@ojiepermana/angular-component 22.0.44 → 22.0.45

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()',
@@ -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.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.4", 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>

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]));

package/fesm2022/ojiepermana-angular-component-scroll-area.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, numberAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, numberAttribute, computed, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 
 /**
@@ -26,24 +26,26 @@ class ScrollAreaComponent {
       [class]="viewportClasses()"
       [attr.aria-label]="viewportAriaLabel()"
       [attr.role]="viewportRole()"
-      [attr.tabindex]="viewportTabIndex()">
+      [attr.tabindex]="viewportTabIndex()"
+    >
       <ng-content />
     </div>
-  `, isInline: true, styles: [":host{display:block;overflow:hidden;position:relative}.scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb))) var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar{width:var(--scrollbar-size, .5rem);height:var(--scrollbar-size, .5rem)}.scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--scrollbar-radius, 9999px)}.scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb-hover))));background-clip:padding-box}@media(forced-colors:active){.scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;overflow:hidden;position:relative}.scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb))) var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar{width:var(--scrollbar-size, .5rem);height:var(--scrollbar-size, .5rem)}.scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--scrollbar-radius, 9999px)}.scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var( --scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb-hover))) );background-clip:padding-box}@media(forced-colors:active){.scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ScrollAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ScrollArea', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ScrollArea', host: {
                         '[class]': 'classes()',
                     }, template: `
     <div
       [class]="viewportClasses()"
       [attr.aria-label]="viewportAriaLabel()"
       [attr.role]="viewportRole()"
-      [attr.tabindex]="viewportTabIndex()">
+      [attr.tabindex]="viewportTabIndex()"
+    >
       <ng-content />
     </div>
-  `, styles: [":host{display:block;overflow:hidden;position:relative}.scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb))) var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar{width:var(--scrollbar-size, .5rem);height:var(--scrollbar-size, .5rem)}.scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--scrollbar-radius, 9999px)}.scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb-hover))));background-clip:padding-box}@media(forced-colors:active){.scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"] }]
+  `, styles: [":host{display:block;overflow:hidden;position:relative}.scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb))) var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar{width:var(--scrollbar-size, .5rem);height:var(--scrollbar-size, .5rem)}.scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--scrollbar-radius, 9999px)}.scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var( --scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb-hover))) );background-clip:padding-box}@media(forced-colors:active){.scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], viewportClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportClass", required: false }] }], viewportAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportAriaLabel", required: false }] }], viewportTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportTabIndex", required: false }] }] } });
 
 /**

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, computed, effect, forwardRef, ViewEncapsulation, Component } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { MAT_OPTION_PARENT_COMPONENT, MatOption, MatPseudoCheckbox, MatRipple } from '@angular/material/core';
@@ -69,7 +69,8 @@ class SelectComponent extends MatSelect {
       class="mat-mdc-select-trigger"
       (click)="open()"
       #fallbackOverlayOrigin="cdkOverlayOrigin"
-      #trigger>
+      #trigger
+    >
       <div class="mat-mdc-select-value" [attr.id]="_valueId">
         @if (empty) {
           <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{ placeholder }}</span>
@@ -108,7 +109,8 @@ class SelectComponent extends MatSelect {
       [cdkConnectedOverlayUsePopover]="_popoverLocation"
       (detach)="close()"
       (backdropClick)="close()"
-      (overlayKeydown)="_handleOverlayKeydown($event)">
+      (overlayKeydown)="_handleOverlayKeydown($event)"
+    >
       <!-- mat-undefined is weird, but we were using it internally -->
       <div
         #panel
@@ -127,15 +129,16 @@ class SelectComponent extends MatSelect {
         [attr.aria-multiselectable]="multiple"
         [attr.aria-label]="ariaLabel || null"
         [attr.aria-labelledby]="_getPanelAriaLabelledby()"
-        (keydown)="_handleKeydown($event)">
+        (keydown)="_handleKeydown($event)"
+      >
         <ng-content></ng-content>
       </div>
     </ng-template>
-  `, isInline: true, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 calc(var(--spacing-base) * 3);border:1px solid hsl(var(--input));border-radius:calc(var(--radius-base) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius-base);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:calc(var(--spacing-base) * 1)}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius-base) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 calc(var(--spacing-base) * 3);border:1px solid hsl(var(--input));border-radius:calc(var(--radius-base) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius-base);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:calc(var(--spacing-base) * 1)}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius-base) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'SelectField', exportAs: 'matSelect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [OverlayModule], host: {
+            args: [{ selector: 'SelectField', exportAs: 'matSelect', encapsulation: ViewEncapsulation.None, imports: [OverlayModule], host: {
                         class: 'mat-mdc-select',
                         role: 'combobox',
                         'aria-haspopup': 'listbox',
@@ -150,7 +153,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       class="mat-mdc-select-trigger"
       (click)="open()"
       #fallbackOverlayOrigin="cdkOverlayOrigin"
-      #trigger>
+      #trigger
+    >
       <div class="mat-mdc-select-value" [attr.id]="_valueId">
         @if (empty) {
           <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{ placeholder }}</span>
@@ -189,7 +193,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [cdkConnectedOverlayUsePopover]="_popoverLocation"
       (detach)="close()"
       (backdropClick)="close()"
-      (overlayKeydown)="_handleOverlayKeydown($event)">
+      (overlayKeydown)="_handleOverlayKeydown($event)"
+    >
       <!-- mat-undefined is weird, but we were using it internally -->
       <div
         #panel
@@ -208,7 +213,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [attr.aria-multiselectable]="multiple"
         [attr.aria-label]="ariaLabel || null"
         [attr.aria-labelledby]="_getPanelAriaLabelledby()"
-        (keydown)="_handleKeydown($event)">
+        (keydown)="_handleKeydown($event)"
+      >
         <ng-content></ng-content>
       </div>
     </ng-template>
@@ -241,7 +247,8 @@ class OptionComponent extends MatOption {
         class="mat-mdc-option-pseudo-checkbox"
         [disabled]="disabled"
         [state]="selected ? 'checked' : 'unchecked'"
-        aria-hidden="true" />
+        aria-hidden="true"
+      />
     }
 
     <ng-content select="mat-icon" />
@@ -254,7 +261,8 @@ class OptionComponent extends MatOption {
         [disabled]="disabled"
         state="checked"
         aria-hidden="true"
-        appearance="minimal" />
+        appearance="minimal"
+      />
     }
 
     @if (group && group._inert) {
@@ -266,18 +274,20 @@ class OptionComponent extends MatOption {
       aria-hidden="true"
       mat-ripple
       [matRippleTrigger]="_getHostElement()"
-      [matRippleDisabled]="disabled || disableRipple"></div>
-  `, isInline: true, styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var( --mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent) )}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var( --mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent) );outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var( --mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container) )}.mat-mdc-option.mdc-list-item{align-items:center;background:transparent}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{inset:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors:active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator:before{content:\"\"}\n"], dependencies: [{ kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+      [matRippleDisabled]="disabled || disableRipple"
+    ></div>
+  `, isInline: true, styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var( --mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent) )}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var( --mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent) );outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var( --mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container) )}.mat-mdc-option.mdc-list-item{align-items:center;background:transparent}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{inset:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors:active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator:before{content:\"\"}\n"], dependencies: [{ kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'SelectItem', imports: [MatPseudoCheckbox, MatRipple], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'matOption', providers: [{ provide: MatOption, useExisting: forwardRef(() => OptionComponent) }], template: `
+            args: [{ selector: 'SelectItem', imports: [MatPseudoCheckbox, MatRipple], encapsulation: ViewEncapsulation.None, exportAs: 'matOption', providers: [{ provide: MatOption, useExisting: forwardRef(() => OptionComponent) }], template: `
     @if (multiple) {
       <mat-pseudo-checkbox
         class="mat-mdc-option-pseudo-checkbox"
         [disabled]="disabled"
         [state]="selected ? 'checked' : 'unchecked'"
-        aria-hidden="true" />
+        aria-hidden="true"
+      />
     }
 
     <ng-content select="mat-icon" />
@@ -290,7 +300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [disabled]="disabled"
         state="checked"
         aria-hidden="true"
-        appearance="minimal" />
+        appearance="minimal"
+      />
     }
 
     @if (group && group._inert) {
@@ -302,7 +313,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       aria-hidden="true"
       mat-ripple
       [matRippleTrigger]="_getHostElement()"
-      [matRippleDisabled]="disabled || disableRipple"></div>
+      [matRippleDisabled]="disabled || disableRipple"
+    ></div>
   `, styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var( --mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent) )}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var( --mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent) );outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var( --mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container) )}.mat-mdc-option.mdc-list-item{align-items:center;background:transparent}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{inset:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors:active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox)):after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator:before{content:\"\"}\n"] }]
         }] });
 

package/fesm2022/ojiepermana-angular-component-separator.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 SeparatorComponent {
@@ -12,13 +12,12 @@ class SeparatorComponent {
     classes = computed(() => cn('block shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SeparatorComponent, isStandalone: true, selector: "Separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SeparatorComponent, isStandalone: true, selector: "Separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Separator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': 'decorative() ? "none" : "separator"',