@ojiepermana/angular-component 22.0.43 → 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) {
@@ -133,19 +166,20 @@ class SheetComponent {
         // localName DOM selalu lowercase, meski tag template ditulis '<Drawer>'.
         return this.host.nativeElement.localName === 'drawer';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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 ɵ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 }, 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.3", ngImport: i0, type: SheetComponent, decorators: [{
+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.3", 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,17 +232,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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);
     closeSheet() {
         this.sheet.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: SheetCloseDirective, isStandalone: true, selector: "button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]", host: { listeners: { "click": "closeSheet()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: SheetCloseDirective, isStandalone: true, selector: "button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]", host: { listeners: { "click": "closeSheet()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]',
@@ -220,65 +257,85 @@ class SheetHeaderComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     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.3", ngImport: i0, type: SheetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetHeaderComponent, decorators: [{
+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 */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 });
+    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: { 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.3", ngImport: i0, type: SheetTitleComponent, decorators: [{
+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 */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 });
+    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: { 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.3", ngImport: i0, type: SheetDescriptionComponent, decorators: [{
+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.3", ngImport: i0, type: SheetContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetContentComponent, decorators: [{
+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 />`,
                 }]
@@ -288,14 +345,13 @@ class SheetFooterComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     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.3", ngImport: i0, type: SheetFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetFooterComponent, decorators: [{
+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 {
@@ -7,14 +7,13 @@ class SkeletonComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     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.3", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SkeletonComponent, decorators: [{
+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';
 
@@ -16,12 +16,12 @@ class SliderComponent {
     focus() {
         this.el.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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 ɵ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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SliderComponent, decorators: [{
+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) {
@@ -289,15 +295,16 @@ class SliderRootComponent {
         }
         return view.getComputedStyle(host).direction === 'rtl' ? 'rtl' : 'ltr';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: SliderRootComponent, isStandalone: true, selector: "Slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, thumbLabels: { classPropertyName: "thumbLabels", publicName: "thumbLabels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "window:pointermove": "onWindowPointerMove($event)", "window:pointerup": "onWindowPointerUp($event)", "window:pointercancel": "onWindowPointerUp($event)" }, properties: { "class": "hostClasses()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SliderRootComponent, isStandalone: true, selector: "Slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, thumbLabels: { classPropertyName: "thumbLabels", publicName: "thumbLabels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "window:pointermove": "onWindowPointerMove($event)", "window:pointerup": "onWindowPointerUp($event)", "window:pointercancel": "onWindowPointerUp($event)" }, properties: { "class": "hostClasses()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div #track class="slider__track" (pointerdown)="onTrackPointerDown($event)">
       <div
         class="slider__range"
         [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.3", ngImport: i0, type: SliderRootComponent, decorators: [{
+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.3", 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.3", 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 {
@@ -10,25 +10,25 @@ class SpinnerComponent {
     ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     classes = computed(() => cn('inline-flex size-4 shrink-0 items-center justify-center align-middle text-current', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: SpinnerComponent, isStandalone: true, selector: "Spinner", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "spinner" }, properties: { "class": "classes()", "attr.role": "decorative() ? null : \"status\"", "attr.aria-hidden": "decorative() ? \"true\" : null", "attr.aria-label": "decorative() || ariaLabelledby() ? null : ariaLabel()", "attr.aria-labelledby": "decorative() ? null : ariaLabelledby()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SpinnerComponent, isStandalone: true, selector: "Spinner", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "spinner" }, properties: { "class": "classes()", "attr.role": "decorative() ? null : \"status\"", "attr.aria-hidden": "decorative() ? \"true\" : null", "attr.aria-label": "decorative() || ariaLabelledby() ? null : ariaLabel()", "attr.aria-labelledby": "decorative() ? null : ariaLabelledby()" } }, ngImport: i0, template: `
     <svg
       aria-hidden="true"
       class="size-full animate-spin motion-reduce:animate-none"
       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.3", ngImport: i0, type: SpinnerComponent, decorators: [{
+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.3", 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>