@ojiepermana/angular-component 22.0.44 → 22.0.45

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>

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

@@ -1,6 +1,6 @@
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, ElementRef, contentChild, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, numberAttribute, DestroyRef, signal, viewChild, contentChildren, forwardRef } from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, contentChild, input, booleanAttribute, output, computed, Component, numberAttribute, DestroyRef, signal, viewChild, contentChildren, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
 
@@ -76,17 +76,17 @@ class PillboxOptionComponent {
         stroke="currentColor"
         stroke-width="1.75"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <path d="M20 6 9 17l-5-5" />
       </svg>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxOptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PillboxOption, button[PillboxOption]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         type: 'button',
                         '[class]': 'classes()',
@@ -113,7 +113,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         stroke="currentColor"
         stroke-width="1.75"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <path d="M20 6 9 17l-5-5" />
       </svg>
     }
@@ -139,13 +140,12 @@ class PillboxOptionCreateComponent {
         this.context.chooseCreate(this, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxOptionCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PillboxOptionCreateComponent, isStandalone: true, selector: "PillboxOptionCreate, button[PillboxOptionCreate]", inputs: { minLength: { classPropertyName: "minLength", publicName: "minLength", 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: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeydown($any($event))", "keydown.space": "handleKeydown($any($event))" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option-create\"", "attr.role": "\"option\"", "attr.tabindex": "disabled() ? -1 : 0", "attr.aria-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PillboxOptionCreateComponent, isStandalone: true, selector: "PillboxOptionCreate, button[PillboxOptionCreate]", inputs: { minLength: { classPropertyName: "minLength", publicName: "minLength", 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: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeydown($any($event))", "keydown.space": "handleKeydown($any($event))" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option-create\"", "attr.role": "\"option\"", "attr.tabindex": "disabled() ? -1 : 0", "attr.aria-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxOptionCreateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PillboxOptionCreate, button[PillboxOptionCreate]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         type: 'button',
                         '[class]': 'classes()',
@@ -176,13 +176,12 @@ class PillboxOptionEmptyComponent {
     } @else {
       <ng-content />
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxOptionEmptyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PillboxOptionEmpty',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"pillbox-option-empty"',
@@ -424,7 +423,9 @@ class PillboxComponent extends PillboxContext {
         this.disabledFromControl.set(disabled);
     }
     emitValue() {
-        const nextValue = this.multiple() ? [...this.selectedValues()] : (this.selectedValues()[0] ?? null);
+        const nextValue = this.multiple()
+            ? [...this.selectedValues()]
+            : (this.selectedValues()[0] ?? null);
         this.onChange(nextValue);
         this.valueChange.emit(nextValue);
     }
@@ -444,7 +445,9 @@ class PillboxComponent extends PillboxContext {
         return Object.is(left, right);
     }
     focusSearchInput() {
-        const searchInput = this.variant() === 'combobox' ? this.inlineSearch()?.nativeElement : this.panelSearch()?.nativeElement;
+        const searchInput = this.variant() === 'combobox'
+            ? this.inlineSearch()?.nativeElement
+            : this.panelSearch()?.nativeElement;
         searchInput?.focus();
     }
     bindOutsideListener() {
@@ -484,7 +487,8 @@ class PillboxComponent extends PillboxContext {
       (keydown.enter)="handleTriggerKeydown($any($event))"
       (keydown.space)="handleTriggerKeydown($any($event))"
       (keydown.arrowDown)="handleTriggerKeydown($any($event))"
-      (keydown.escape)="close()">
+      (keydown.escape)="close()"
+    >
       <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
         @if (selectedItems().length > 0) {
           @for (item of selectedItems(); track item.track) {
@@ -501,7 +505,8 @@ class PillboxComponent extends PillboxContext {
                 class="-mr-1 inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 [attr.aria-label]="'Remove ' + item.label"
                 [disabled]="disabledState() || null"
-                (click)="removeSelected(item.value, $event)">
+                (click)="removeSelected(item.value, $event)"
+              >
                 <svg
                   aria-hidden="true"
                   class="size-3"
@@ -510,7 +515,8 @@ class PillboxComponent extends PillboxContext {
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
-                  stroke-linejoin="round">
+                  stroke-linejoin="round"
+                >
                   <path d="M18 6 6 18" />
                   <path d="m6 6 12 12" />
                 </svg>
@@ -530,7 +536,8 @@ class PillboxComponent extends PillboxContext {
             (focus)="open()"
             (input)="handleSearchInput($event)"
             (keydown.backspace)="handleInlineBackspace($any($event))"
-            (keydown.escape)="close()" />
+            (keydown.escape)="close()"
+          />
         } @else if (selectedItems().length === 0) {
           <span class="truncate text-muted-foreground">{{ placeholder() }}</span>
         }
@@ -541,7 +548,8 @@ class PillboxComponent extends PillboxContext {
           type="button"
           class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           aria-label="Clear selected options"
-          (click)="clear($event)">
+          (click)="clear($event)"
+        >
           <svg
             aria-hidden="true"
             class="size-3.5"
@@ -550,7 +558,8 @@ class PillboxComponent extends PillboxContext {
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
-            stroke-linejoin="round">
+            stroke-linejoin="round"
+          >
             <path d="M18 6 6 18" />
             <path d="m6 6 12 12" />
           </svg>
@@ -566,7 +575,8 @@ class PillboxComponent extends PillboxContext {
         stroke="currentColor"
         stroke-width="1.75"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <path d="m6 9 6 6 6-6" />
       </svg>
     </div>
@@ -583,7 +593,8 @@ class PillboxComponent extends PillboxContext {
               stroke="currentColor"
               stroke-width="1.75"
               stroke-linecap="round"
-              stroke-linejoin="round">
+              stroke-linejoin="round"
+            >
               <circle cx="11" cy="11" r="8" />
               <path d="m21 21-4.35-4.35" />
             </svg>
@@ -593,13 +604,15 @@ class PillboxComponent extends PillboxContext {
               [placeholder]="searchPlaceholder()"
               [value]="query()"
               (input)="handleSearchInput($event)"
-              (keydown.escape)="close()" />
+              (keydown.escape)="close()"
+            />
             @if (query().length > 0) {
               <button
                 type="button"
                 class="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
                 aria-label="Clear search"
-                (click)="clearSearch($event)">
+                (click)="clearSearch($event)"
+              >
                 <svg
                   aria-hidden="true"
                   class="size-3.5"
@@ -608,7 +621,8 @@ class PillboxComponent extends PillboxContext {
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
-                  stroke-linejoin="round">
+                  stroke-linejoin="round"
+                >
                   <path d="M18 6 6 18" />
                   <path d="m6 6 12 12" />
                 </svg>
@@ -622,13 +636,12 @@ class PillboxComponent extends PillboxContext {
         <ng-content />
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Pillbox',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet],
                     providers: [
                         { provide: PillboxContext, useExisting: forwardRef(() => PillboxComponent) },
@@ -660,7 +673,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       (keydown.enter)="handleTriggerKeydown($any($event))"
       (keydown.space)="handleTriggerKeydown($any($event))"
       (keydown.arrowDown)="handleTriggerKeydown($any($event))"
-      (keydown.escape)="close()">
+      (keydown.escape)="close()"
+    >
       <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
         @if (selectedItems().length > 0) {
           @for (item of selectedItems(); track item.track) {
@@ -677,7 +691,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 class="-mr-1 inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 [attr.aria-label]="'Remove ' + item.label"
                 [disabled]="disabledState() || null"
-                (click)="removeSelected(item.value, $event)">
+                (click)="removeSelected(item.value, $event)"
+              >
                 <svg
                   aria-hidden="true"
                   class="size-3"
@@ -686,7 +701,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"
+                >
                   <path d="M18 6 6 18" />
                   <path d="m6 6 12 12" />
                 </svg>
@@ -706,7 +722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             (focus)="open()"
             (input)="handleSearchInput($event)"
             (keydown.backspace)="handleInlineBackspace($any($event))"
-            (keydown.escape)="close()" />
+            (keydown.escape)="close()"
+          />
         } @else if (selectedItems().length === 0) {
           <span class="truncate text-muted-foreground">{{ placeholder() }}</span>
         }
@@ -717,7 +734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           type="button"
           class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           aria-label="Clear selected options"
-          (click)="clear($event)">
+          (click)="clear($event)"
+        >
           <svg
             aria-hidden="true"
             class="size-3.5"
@@ -726,7 +744,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"
+          >
             <path d="M18 6 6 18" />
             <path d="m6 6 12 12" />
           </svg>
@@ -742,7 +761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         stroke="currentColor"
         stroke-width="1.75"
         stroke-linecap="round"
-        stroke-linejoin="round">
+        stroke-linejoin="round"
+      >
         <path d="m6 9 6 6 6-6" />
       </svg>
     </div>
@@ -759,7 +779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               stroke="currentColor"
               stroke-width="1.75"
               stroke-linecap="round"
-              stroke-linejoin="round">
+              stroke-linejoin="round"
+            >
               <circle cx="11" cy="11" r="8" />
               <path d="m21 21-4.35-4.35" />
             </svg>
@@ -769,13 +790,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
               [placeholder]="searchPlaceholder()"
               [value]="query()"
               (input)="handleSearchInput($event)"
-              (keydown.escape)="close()" />
+              (keydown.escape)="close()"
+            />
             @if (query().length > 0) {
               <button
                 type="button"
                 class="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
                 aria-label="Clear search"
-                (click)="clearSearch($event)">
+                (click)="clearSearch($event)"
+              >
                 <svg
                   aria-hidden="true"
                   class="size-3.5"
@@ -784,7 +807,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"
+                >
                   <path d="M18 6 6 18" />
                   <path d="m6 6 12 12" />
                 </svg>
@@ -800,7 +824,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], create: [{ type: i0.Output, args: ["create"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], inlineSearch: [{ type: i0.ViewChild, args: ['inlineSearch', { isSignal: true }] }], panelSearch: [{ type: i0.ViewChild, args: ['panelSearch', { isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionComponent), { ...{ descendants: true }, isSignal: true }] }], createOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionCreateComponent), { ...{ descendants: true }, isSignal: true }] }], emptyOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionEmptyComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], create: [{ type: i0.Output, args: ["create"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], inlineSearch: [{ type: i0.ViewChild, args: ['inlineSearch', { isSignal: true }] }], panelSearch: [{ type: i0.ViewChild, args: ['panelSearch', { isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionComponent), { ...{ descendants: true }, isSignal: true }] }], createOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionCreateComponent), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], emptyOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionEmptyComponent), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ojiepermana-angular-component-progress.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 ProgressComponent {
@@ -31,12 +31,13 @@ class ProgressComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ProgressComponent, isStandalone: true, selector: "ProgressBar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"progressbar\"", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "indeterminate() ? null : clamped()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.data-state": "indeterminate() ? \"indeterminate\" : \"determinate\"" } }, ngImport: i0, template: `
     <div
       class="progress-indicator h-full w-full flex-1 bg-primary transition-transform"
-      [style.transform]="indicatorTransform()"></div>
-  `, isInline: true, styles: [":host{display:block}:host[data-state=indeterminate] .progress-indicator{animation:progress-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host[data-state=indeterminate] .progress-indicator{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      [style.transform]="indicatorTransform()"
+    ></div>
+  `, isInline: true, styles: [":host{display:block}:host[data-state=indeterminate] .progress-indicator{animation:progress-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host[data-state=indeterminate] .progress-indicator{animation:none}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ProgressBar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ProgressBar', host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"progressbar"',
                         '[attr.aria-valuemin]': '0',
@@ -48,7 +49,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     }, template: `
     <div
       class="progress-indicator h-full w-full flex-1 bg-primary transition-transform"
-      [style.transform]="indicatorTransform()"></div>
+      [style.transform]="indicatorTransform()"
+    ></div>
   `, styles: [":host{display:block}:host[data-state=indeterminate] .progress-indicator{animation:progress-indeterminate 1.5s cubic-bezier(.65,.815,.735,.395) infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host[data-state=indeterminate] .progress-indicator{animation:none}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });