@ojiepermana/angular-component 22.0.44 → 22.0.46

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>
@@ -523,6 +529,8 @@ class PillboxComponent extends PillboxContext {
           <input
             #inlineSearch
             class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            [attr.aria-label]="ariaLabel() ?? placeholder()"
+            [attr.aria-labelledby]="ariaLabelledby()"
             [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
             [value]="query()"
             [disabled]="disabledState() || null"
@@ -530,7 +538,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 +550,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 +560,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 +577,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,23 +595,27 @@ 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>
             <input
               #panelSearch
               class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              [attr.aria-label]="searchPlaceholder()"
               [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 +624,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 +639,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 +676,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 +694,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 +704,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>
@@ -699,6 +718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           <input
             #inlineSearch
             class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            [attr.aria-label]="ariaLabel() ?? placeholder()"
+            [attr.aria-labelledby]="ariaLabelledby()"
             [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
             [value]="query()"
             [disabled]="disabledState() || null"
@@ -706,7 +727,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 +739,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 +749,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 +766,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,23 +784,27 @@ 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>
             <input
               #panelSearch
               class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              [attr.aria-label]="searchPlaceholder()"
               [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 +813,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 +830,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 }] }] } });
 

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';
 
@@ -67,14 +67,17 @@ class RadioGroupComponent {
         this.disabled.set(d);
     }
     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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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.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()',
@@ -94,6 +97,9 @@ class RadioComponent {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the radio input when no text is projected into `<Radio>`. */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     selected = computed(() => this.group.value() === this.value(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.group.disabled(), /* @ts-ignore */
@@ -115,18 +121,21 @@ class RadioComponent {
         this.ref().nativeElement.focus();
     }
     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: `
+    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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", 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
         type="radio"
         class="peer sr-only"
         [attr.name]="group.resolvedName()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
         [value]="value()"
         [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 +143,12 @@ class RadioComponent {
       </span>
       <ng-content />
     </label>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 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()">
@@ -149,11 +157,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         type="radio"
         class="peer sr-only"
         [attr.name]="group.resolvedName()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
         [value]="value()"
         [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>
@@ -163,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", 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 }] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, ElementRef, input, signal, computed, ChangeDetectionStrategy, Component, booleanAttribute, contentChildren, effect, untracked, forwardRef } from '@angular/core';
+import { Directive, inject, ElementRef, input, signal, computed, Component, booleanAttribute, contentChildren, effect, untracked, forwardRef } from '@angular/core';
 import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
 
 class ResizableGroupContextBase {
@@ -57,13 +57,12 @@ class ResizablePanelComponent {
         return this.host.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResizablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ResizablePanelComponent, isStandalone: true, selector: "ResizablePanel", inputs: { defaultSize: { classPropertyName: "defaultSize", publicName: "defaultSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()", "style.flex": "flexStyle()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ResizablePanelComponent, isStandalone: true, selector: "ResizablePanel", inputs: { defaultSize: { classPropertyName: "defaultSize", publicName: "defaultSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()", "style.flex": "flexStyle()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResizablePanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ResizablePanel',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'resolvedId()',
@@ -134,7 +133,8 @@ class ResizableHandleComponent {
     @if (withHandle()) {
       <span
         aria-hidden="true"
-        class="pointer-events-none inline-flex items-center justify-center rounded-sm border border-border bg-background px-1 py-0.5 shadow-sm">
+        class="pointer-events-none inline-flex items-center justify-center rounded-sm border border-border bg-background px-1 py-0.5 shadow-sm"
+      >
         <svg class="h-3 w-3 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor">
           <circle cx="9" cy="8" r="1.25" />
           <circle cx="15" cy="8" r="1.25" />
@@ -145,13 +145,12 @@ class ResizableHandleComponent {
         </svg>
       </span>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResizableHandleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ResizableHandle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         role: 'separator',
@@ -171,7 +170,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     @if (withHandle()) {
       <span
         aria-hidden="true"
-        class="pointer-events-none inline-flex items-center justify-center rounded-sm border border-border bg-background px-1 py-0.5 shadow-sm">
+        class="pointer-events-none inline-flex items-center justify-center rounded-sm border border-border bg-background px-1 py-0.5 shadow-sm"
+      >
         <svg class="h-3 w-3 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor">
           <circle cx="9" cy="8" r="1.25" />
           <circle cx="15" cy="8" r="1.25" />
@@ -394,14 +394,23 @@ class ResizablePanelGroupComponent extends ResizableGroupContextBase {
         return this.orientation() === 'horizontal' ? event.clientX : event.clientY;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResizablePanelGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: ResizablePanelGroupComponent, isStandalone: true, selector: "ResizablePanelGroup", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [{ provide: ResizableGroupContextBase, useExisting: forwardRef(() => ResizablePanelGroupComponent) }], queries: [{ propertyName: "panels", predicate: ResizablePanelComponent, isSignal: true }, { propertyName: "handles", predicate: ResizableHandleComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: ResizablePanelGroupComponent, isStandalone: true, selector: "ResizablePanelGroup", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [
+            {
+                provide: ResizableGroupContextBase,
+                useExisting: forwardRef(() => ResizablePanelGroupComponent),
+            },
+        ], queries: [{ propertyName: "panels", predicate: ResizablePanelComponent, isSignal: true }, { propertyName: "handles", predicate: ResizableHandleComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ResizablePanelGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ResizablePanelGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: ResizableGroupContextBase, useExisting: forwardRef(() => ResizablePanelGroupComponent) }],
+                    providers: [
+                        {
+                            provide: ResizableGroupContextBase,
+                            useExisting: forwardRef(() => ResizablePanelGroupComponent),
+                        },
+                    ],
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-orientation]': 'orientation()',
@@ -438,7 +447,9 @@ function resolveInitialSizes(preferred, minimums, maximums) {
         sizes = preferred.map(() => equalSize);
     }
     else {
-        const share = unresolvedIndexes.length ? Math.max(100 - specifiedTotal, 0) / unresolvedIndexes.length : 0;
+        const share = unresolvedIndexes.length
+            ? Math.max(100 - specifiedTotal, 0) / unresolvedIndexes.length
+            : 0;
         sizes = preferred.map((value) => value ?? share);
     }
     sizes = sizes.map((size, index) => clamp(size, minimums[index], maximums[index]));