@ojiepermana/angular-component 22.0.44 → 22.0.45

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, ElementRef, model, input, output, viewChild, computed, effect, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, ElementRef, model, input, output, signal, computed, viewChild, effect, Component, Directive } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
@@ -7,7 +7,7 @@ import { DOCUMENT } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter } from 'rxjs/operators';
 import { ButtonComponent } from '@ojiepermana/angular-component/button';
-import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue, uniqueId } from '@ojiepermana/angular-component/utils';
 
 const SIDE_BASE = {
     top: 'inset-x-0 top-0 border-b border-border',
@@ -51,6 +51,9 @@ class SheetComponent {
     ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
     labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** ARIA role for the surface. Defaults to `'dialog'`. */
+    role = input('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     radius = input('inherit', /* @ts-ignore */
@@ -58,6 +61,16 @@ class SheetComponent {
     density = input('inherit', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     openedChange = output();
+    registeredTitleId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []));
+    registeredDescriptionId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-labelledby` wins; otherwise a projected `SheetTitle` supplies the id. */
+    resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-describedby` wins; otherwise a projected `SheetDescription` supplies the id. */
+    resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
     tpl = viewChild.required('tpl');
     overlayRef = null;
     focusTrap = null;
@@ -124,6 +137,26 @@ class SheetComponent {
     close() {
         this.open.set(false);
     }
+    /** Called by a projected `SheetTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id) {
+        this.registeredTitleId.set(id);
+    }
+    /** Cleared by a `SheetTitle` on destroy so a closed/reopened sheet never points at a stale id. */
+    unregisterTitleId(id) {
+        if (this.registeredTitleId() === id) {
+            this.registeredTitleId.set(null);
+        }
+    }
+    /** Called by a projected `SheetDescription`. */
+    registerDescriptionId(id) {
+        this.registeredDescriptionId.set(id);
+    }
+    /** Cleared by a `SheetDescription` on destroy. */
+    unregisterDescriptionId(id) {
+        if (this.registeredDescriptionId() === id) {
+            this.registeredDescriptionId.set(null);
+        }
+    }
     isDrawerHost() {
         const variant = this.variant();
         if (variant) {
@@ -134,18 +167,19 @@ class SheetComponent {
         return this.host.nativeElement.localName === 'drawer';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
-        role="dialog"
+        [attr.role]="role()"
         aria-modal="true"
-        [attr.aria-labelledby]="labelledBy()"
-        [attr.aria-describedby]="describedBy()"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
         [class]="surfaceClasses()"
         [style.--sheet-from]="enterFrom()"
         [style.--radius-base]="radiusBase()"
-        [style.--spacing-base]="densityBase()">
+        [style.--spacing-base]="densityBase()"
+      >
         @if (showCloseButton()) {
           <button
             type="button"
@@ -154,7 +188,8 @@ class SheetComponent {
             size="icon-sm"
             class="sheet-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
             [attr.aria-label]="closeButtonLabel()"
-            (click)="close()">
+            (click)="close()"
+          >
             <span aria-hidden="true">X</span>
             <span class="sr-only">{{ closeButtonLabel() }}</span>
           </button>
@@ -162,22 +197,23 @@ class SheetComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Sheet, Drawer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], template: `
+            args: [{ selector: 'Sheet, Drawer', imports: [ButtonComponent], template: `
     <ng-template #tpl>
       <div
         class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
-        role="dialog"
+        [attr.role]="role()"
         aria-modal="true"
-        [attr.aria-labelledby]="labelledBy()"
-        [attr.aria-describedby]="describedBy()"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
         [class]="surfaceClasses()"
         [style.--sheet-from]="enterFrom()"
         [style.--radius-base]="radiusBase()"
-        [style.--spacing-base]="densityBase()">
+        [style.--spacing-base]="densityBase()"
+      >
         @if (showCloseButton()) {
           <button
             type="button"
@@ -186,7 +222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             size="icon-sm"
             class="sheet-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
             [attr.aria-label]="closeButtonLabel()"
-            (click)="close()">
+            (click)="close()"
+          >
             <span aria-hidden="true">X</span>
             <span class="sr-only">{{ closeButtonLabel() }}</span>
           </button>
@@ -195,7 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       </div>
     </ng-template>
   `, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 
 class SheetCloseDirective {
     sheet = inject(SheetComponent);
@@ -221,64 +258,84 @@ class SheetHeaderComponent {
     classes = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', 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: SheetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetHeaderComponent, isStandalone: true, selector: "SheetHeader, DrawerHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetHeaderComponent, isStandalone: true, selector: "SheetHeader, DrawerHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'SheetHeader, DrawerHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class SheetTitleComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = uniqueId('sheet-title');
+    sheet = inject(SheetComponent, { optional: true });
+    /** The id rendered on the element, used by the parent sheet for aria-labelledby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-lg font-semibold text-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.sheet?.registerTitleId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.sheet?.unregisterTitleId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetTitleComponent, isStandalone: true, selector: "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetTitleComponent, isStandalone: true, selector: "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]", inputs: { 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()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class SheetDescriptionComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = uniqueId('sheet-description');
+    sheet = inject(SheetComponent, { optional: true });
+    /** The id rendered on the element, used by the parent sheet for aria-describedby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-sm text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.sheet?.registerDescriptionId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.sheet?.unregisterDescriptionId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetDescriptionComponent, isStandalone: true, selector: "SheetDescription, DrawerDescription, p[SheetDescription], p[DrawerDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetDescriptionComponent, isStandalone: true, selector: "SheetDescription, DrawerDescription, p[SheetDescription], p[DrawerDescription]", inputs: { 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()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'SheetDescription, DrawerDescription, p[SheetDescription], p[DrawerDescription]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class SheetContentComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('flex-1 overflow-auto', 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: SheetContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetContentComponent, isStandalone: true, selector: "SheetContent, DrawerContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetContentComponent, isStandalone: true, selector: "SheetContent, DrawerContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'SheetContent, DrawerContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -289,13 +346,12 @@ class SheetFooterComponent {
     classes = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', 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: SheetFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetFooterComponent, isStandalone: true, selector: "SheetFooter, DrawerFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SheetFooterComponent, isStandalone: true, selector: "SheetFooter, DrawerFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'SheetFooter, DrawerFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]

package/fesm2022/ojiepermana-angular-component-skeleton.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 SkeletonComponent {
@@ -8,13 +8,12 @@ class SkeletonComponent {
     classes = computed(() => cn('block animate-pulse rounded-md bg-muted', 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: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SkeletonComponent, isStandalone: true, selector: "Skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "\"true\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SkeletonComponent, isStandalone: true, selector: "Skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "\"true\"" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Skeleton',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.aria-hidden]': '"true"',

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component, viewChild, numberAttribute, booleanAttribute, output, signal, effect, untracked } from '@angular/core';
+import { inject, ElementRef, input, computed, Component, viewChild, numberAttribute, booleanAttribute, output, signal, effect, untracked } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 import { DOCUMENT } from '@angular/common';
 
@@ -17,11 +17,11 @@ class SliderComponent {
         this.el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SliderComponent, isStandalone: true, selector: "input[type=range][Slider]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, styles: [":host.Slider{height:1.25rem;cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-.25rem;width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SliderComponent, isStandalone: true, selector: "input[type=range][Slider]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, styles: [":host.Slider{height:1.25rem;cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-.25rem;width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input[type=range][Slider]', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'classes()' }, template: '', styles: [":host.Slider{height:1.25rem;cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-.25rem;width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] }]
+            args: [{ selector: 'input[type=range][Slider]', host: { '[class]': 'classes()' }, template: '', styles: [":host.Slider{height:1.25rem;cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-.25rem;width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class SliderRootComponent {
@@ -161,10 +161,14 @@ class SliderRootComponent {
         let nextValue = null;
         switch (event.key) {
             case 'ArrowRight':
-                nextValue = current + (direction === 'rtl' && this.orientation() === 'horizontal' ? -config.step : config.step);
+                nextValue =
+                    current +
+                        (direction === 'rtl' && this.orientation() === 'horizontal' ? -config.step : config.step);
                 break;
             case 'ArrowLeft':
-                nextValue = current + (direction === 'rtl' && this.orientation() === 'horizontal' ? config.step : -config.step);
+                nextValue =
+                    current +
+                        (direction === 'rtl' && this.orientation() === 'horizontal' ? config.step : -config.step);
                 break;
             case 'ArrowUp':
                 nextValue = current + config.step;
@@ -261,7 +265,9 @@ class SliderRootComponent {
             return this.orientation() === 'horizontal' && this.resolvedDirection() === 'rtl' ? 100 : 0;
         }
         const logicalRatio = (value - config.min) / range;
-        const physicalRatio = this.orientation() === 'horizontal' && this.resolvedDirection() === 'rtl' ? 1 - logicalRatio : logicalRatio;
+        const physicalRatio = this.orientation() === 'horizontal' && this.resolvedDirection() === 'rtl'
+            ? 1 - logicalRatio
+            : logicalRatio;
         return clamp(physicalRatio * 100, 0, 100);
     }
     thumbLabel(index, count) {
@@ -297,7 +303,8 @@ class SliderRootComponent {
         [style.left.%]="orientation() === 'horizontal' ? rangeOffset() : null"
         [style.width.%]="orientation() === 'horizontal' ? rangeSize() : null"
         [style.bottom.%]="orientation() === 'vertical' ? rangeOffset() : null"
-        [style.height.%]="orientation() === 'vertical' ? rangeSize() : null"></div>
+        [style.height.%]="orientation() === 'vertical' ? rangeSize() : null"
+      ></div>
 
       @for (thumb of thumbs(); track thumb.index) {
         <button
@@ -320,14 +327,15 @@ class SliderRootComponent {
           role="slider"
           (focus)="onThumbFocus(thumb.index)"
           (keydown)="onThumbKeydown($event, thumb.index)"
-          (pointerdown)="onThumbPointerDown($event, thumb.index)"></button>
+          (pointerdown)="onThumbPointerDown($event, thumb.index)"
+        ></button>
       }
     </div>
-  `, isInline: true, styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Slider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'Slider', host: {
                         '[class]': 'hostClasses()',
                         '[attr.data-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-orientation]': 'orientation()',
@@ -341,7 +349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [style.left.%]="orientation() === 'horizontal' ? rangeOffset() : null"
         [style.width.%]="orientation() === 'horizontal' ? rangeSize() : null"
         [style.bottom.%]="orientation() === 'vertical' ? rangeOffset() : null"
-        [style.height.%]="orientation() === 'vertical' ? rangeSize() : null"></div>
+        [style.height.%]="orientation() === 'vertical' ? rangeSize() : null"
+      ></div>
 
       @for (thumb of thumbs(); track thumb.index) {
         <button
@@ -364,7 +373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           role="slider"
           (focus)="onThumbFocus(thumb.index)"
           (keydown)="onThumbKeydown($event, thumb.index)"
-          (pointerdown)="onThumbPointerDown($event, thumb.index)"></button>
+          (pointerdown)="onThumbPointerDown($event, thumb.index)"
+        ></button>
       }
     </div>
   `, styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"] }]
@@ -382,7 +392,9 @@ function decimalPlaces(value) {
 }
 function normalizeSliderValues(values, config) {
     const incoming = values.length ? [...values] : [config.min];
-    const sorted = incoming.map((value) => snapToStep(value, config)).sort((left, right) => left - right);
+    const sorted = incoming
+        .map((value) => snapToStep(value, config))
+        .sort((left, right) => left - right);
     const gap = config.step * config.minStepsBetweenThumbs;
     const normalized = [];
     sorted.forEach((value, index) => {

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 
 class SpinnerComponent {
@@ -18,17 +18,17 @@ class SpinnerComponent {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2">
+      stroke-width="2"
+    >
       <circle cx="12" cy="12" r="9" class="opacity-20" />
       <path d="M21 12a9 9 0 0 0-9-9" stroke-linecap="round" />
     </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Spinner',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': 'decorative() ? null : "status"',
@@ -44,7 +44,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2">
+      stroke-width="2"
+    >
       <circle cx="12" cy="12" r="9" class="opacity-20" />
       <path d="M21 12a9 9 0 0 0-9-9" stroke-linecap="round" />
     </svg>

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, output, viewChild, signal, computed, forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
 
@@ -42,7 +42,11 @@ class SwitchComponent {
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     labelClasses = computed(() => cn('inline-flex select-none items-center gap-2 text-sm font-medium leading-none', this.isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
-    trackClasses = computed(() => cn('inline-flex shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition-colors', 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', this.size() === 'sm' ? 'h-4 w-7' : 'h-5 w-9', this.ariaInvalidAttr() === 'true' ? 'bg-destructive' : this.checked() ? 'bg-primary' : 'bg-input'), /* @ts-ignore */
+    trackClasses = computed(() => cn('inline-flex shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition-colors', 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', this.size() === 'sm' ? 'h-4 w-7' : 'h-5 w-9', this.ariaInvalidAttr() === 'true'
+        ? 'bg-destructive'
+        : this.checked()
+            ? 'bg-primary'
+            : 'bg-input'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
     thumbClasses = computed(() => cn('pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform', this.size() === 'sm' ? 'size-3' : 'size-4', this.checked() ? (this.size() === 'sm' ? 'translate-x-3' : 'translate-x-4') : 'translate-x-0'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "thumbClasses" }] : /* istanbul ignore next */ []));
@@ -73,7 +77,9 @@ class SwitchComponent {
         this.disabledState.set(d);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: SwitchComponent, isStandalone: true, selector: "Switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: SwitchComponent, isStandalone: true, selector: "Switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true },
+        ], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <label [class]="labelClasses()" [attr.for]="id()">
       <input
         #ref
@@ -90,20 +96,22 @@ class SwitchComponent {
         [attr.aria-labelledby]="ariaLabelledby()"
         [attr.aria-invalid]="ariaInvalidAttr()"
         (change)="handleChange($event)"
-        (blur)="handleBlur()" />
+        (blur)="handleBlur()"
+      />
       <span aria-hidden="true" [class]="trackClasses()">
         <span [class]="thumbClasses()"></span>
       </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: SwitchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Switch',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true },
+                    ],
                     host: { '[class]': 'hostClasses()' },
                     template: `
     <label [class]="labelClasses()" [attr.for]="id()">
@@ -122,7 +130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [attr.aria-labelledby]="ariaLabelledby()"
         [attr.aria-invalid]="ariaInvalidAttr()"
         (change)="handleChange($event)"
-        (blur)="handleBlur()" />
+        (blur)="handleBlur()"
+      />
       <span aria-hidden="true" [class]="trackClasses()">
         <span [class]="thumbClasses()"></span>
       </span>