@ojiepermana/angular-component 22.0.43 → 22.0.45

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';
 
@@ -16,10 +16,10 @@ const pillboxPillSizeClasses = {
 };
 class PillboxSelectedDirective {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: PillboxSelectedDirective, isStandalone: true, selector: "ng-template[PillboxSelected]", exportAs: ["PillboxSelected"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: PillboxSelectedDirective, isStandalone: true, selector: "ng-template[PillboxSelected]", exportAs: ["PillboxSelected"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxSelectedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxSelectedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[PillboxSelected]',
@@ -64,8 +64,8 @@ class PillboxOptionComponent {
         event.preventDefault();
         this.context.chooseOption(this, event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: PillboxOptionComponent, isStandalone: true, selector: "PillboxOption, button[PillboxOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, 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\"", "attr.data-selected": "selected() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.role": "\"option\"", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? -1 : 0", "hidden": "!visible()" } }, queries: [{ propertyName: "selectedTemplate", first: true, predicate: PillboxSelectedDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PillboxOptionComponent, isStandalone: true, selector: "PillboxOption, button[PillboxOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, 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\"", "attr.data-selected": "selected() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.role": "\"option\"", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? -1 : 0", "hidden": "!visible()" } }, queries: [{ propertyName: "selectedTemplate", first: true, predicate: PillboxSelectedDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <span class="min-w-0 flex-1 truncate text-left"><ng-content /></span>
     @if (selected()) {
       <svg
@@ -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.3", ngImport: i0, type: PillboxOptionComponent, decorators: [{
+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.3", 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>
     }
@@ -138,14 +139,13 @@ class PillboxOptionCreateComponent {
         event.preventDefault();
         this.context.chooseCreate(this, event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxOptionCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxOptionCreateComponent, decorators: [{
+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()',
@@ -169,20 +169,19 @@ class PillboxOptionEmptyComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('px-2 py-6 text-center text-sm text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxOptionEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: PillboxOptionEmptyComponent, isStandalone: true, selector: "PillboxOptionEmpty", inputs: { whenLoading: { classPropertyName: "whenLoading", publicName: "whenLoading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option-empty\"", "hidden": "!context.emptyVisible()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxOptionEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PillboxOptionEmptyComponent, isStandalone: true, selector: "PillboxOptionEmpty", inputs: { whenLoading: { classPropertyName: "whenLoading", publicName: "whenLoading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option-empty\"", "hidden": "!context.emptyVisible()" } }, ngImport: i0, template: `
     @if (context.emptyMessage()) {
       {{ context.emptyMessage() }}
     } @else {
       <ng-content />
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxOptionEmptyComponent, decorators: [{
+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() {
@@ -461,8 +464,8 @@ class PillboxComponent extends PillboxContext {
         this.removeDocumentListener?.();
         this.removeDocumentListener = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PillboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: PillboxComponent, isStandalone: true, selector: "Pillbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", 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 } }, outputs: { valueChange: "valueChange", searchChange: "searchChange", create: "create", openedChange: "openedChange" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"pillbox\"", "attr.data-open": "openState() ? \"\" : null", "attr.data-size": "size()", "attr.data-variant": "variant()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PillboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PillboxComponent, isStandalone: true, selector: "Pillbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", 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 } }, outputs: { valueChange: "valueChange", searchChange: "searchChange", create: "create", openedChange: "openedChange" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"pillbox\"", "attr.data-open": "openState() ? \"\" : null", "attr.data-size": "size()", "attr.data-variant": "variant()" } }, providers: [
             { provide: PillboxContext, useExisting: forwardRef(() => PillboxComponent) },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PillboxComponent), multi: true },
         ], queries: [{ propertyName: "options", predicate: PillboxOptionComponent, descendants: true, isSignal: true }, { propertyName: "createOptions", predicate: PillboxOptionCreateComponent, descendants: true, isSignal: true }, { propertyName: "emptyOptions", predicate: PillboxOptionEmptyComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "inlineSearch", first: true, predicate: ["inlineSearch"], descendants: true, isSignal: true }, { propertyName: "panelSearch", first: true, predicate: ["panelSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
@@ -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.3", ngImport: i0, type: PillboxComponent, decorators: [{
+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.3", 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.3", 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.3", 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.3", 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.3", 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.3", 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.3", 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.3", 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.3", 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.3", 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.3", 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-popover.mjs

@@ -15,10 +15,10 @@ class PopoverContentDirective {
     ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
     densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: PopoverContentDirective, isStandalone: true, selector: "ng-template[PopoverContent]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, exportAs: ["PopoverContent"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: PopoverContentDirective, isStandalone: true, selector: "ng-template[PopoverContent]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, exportAs: ["PopoverContent"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PopoverContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PopoverContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[PopoverContent]',
@@ -130,10 +130,10 @@ class PopoverTriggerDirective {
             tagName === 'SUMMARY' ||
             (tagName === 'A' && host.hasAttribute('href')));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: PopoverTriggerDirective, isStandalone: true, selector: "[PopoverTrigger]", inputs: { PopoverTrigger: { classPropertyName: "PopoverTrigger", publicName: "PopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "onKeyboardToggle($event)", "keydown.space": "onKeyboardToggle($event)", "keydown.escape": "close()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["PopoverTrigger"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: PopoverTriggerDirective, isStandalone: true, selector: "[PopoverTrigger]", inputs: { PopoverTrigger: { classPropertyName: "PopoverTrigger", publicName: "PopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "onKeyboardToggle($event)", "keydown.space": "onKeyboardToggle($event)", "keydown.escape": "close()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["PopoverTrigger"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[PopoverTrigger]',

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 {
@@ -27,16 +27,17 @@ class ProgressComponent {
     ...(ngDevMode ? [{ debugName: "indicatorTransform" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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.3", ngImport: i0, type: ProgressComponent, decorators: [{
+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.3", 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 }] }] } });
 

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, contentChildren, forwardRef, signal, computed, ChangeDetectionStrategy, Component, inject, viewChild } from '@angular/core';
+import { input, output, contentChildren, forwardRef, signal, computed, Component, inject, viewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
 
@@ -66,15 +66,18 @@ class RadioGroupComponent {
     setDisabledState(d) {
         this.disabled.set(d);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.3", type: RadioGroupComponent, isStandalone: true, selector: "RadioGroup", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-describedby": "ariaDescribedby()", "attr.aria-invalid": "ariaInvalidAttr()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true }], queries: [{ propertyName: "radios", predicate: i0.forwardRef(() => RadioComponent), descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: RadioGroupComponent, isStandalone: true, selector: "RadioGroup", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-describedby": "ariaDescribedby()", "attr.aria-invalid": "ariaInvalidAttr()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
+        ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(() => RadioComponent), descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: RadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'RadioGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true }],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
+                    ],
                     host: {
                         role: 'radiogroup',
                         '[class]': 'classes()',
@@ -114,8 +117,8 @@ class RadioComponent {
     focus() {
         this.ref().nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: RadioComponent, isStandalone: true, selector: "Radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadioComponent, isStandalone: true, selector: "Radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <label [class]="labelClasses()">
       <input
         #ref
@@ -126,7 +129,8 @@ class RadioComponent {
         [checked]="selected()"
         [disabled]="isDisabled()"
         (change)="handleChange()"
-        (blur)="handleBlur()" />
+        (blur)="handleBlur()"
+      />
       <span aria-hidden="true" [class]="circleClasses()">
         @if (selected()) {
           <span class="size-2 rounded-full bg-primary"></span>
@@ -134,13 +138,12 @@ class RadioComponent {
       </span>
       <ng-content />
     </label>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Radio',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'hostClasses()' },
                     template: `
     <label [class]="labelClasses()">
@@ -153,7 +156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         [checked]="selected()"
         [disabled]="isDisabled()"
         (change)="handleChange()"
-        (blur)="handleBlur()" />
+        (blur)="handleBlur()"
+      />
       <span aria-hidden="true" [class]="circleClasses()">
         @if (selected()) {
           <span class="size-2 rounded-full bg-primary"></span>