@ojiepermana/angular-component 22.0.44 → 22.0.46

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

@@ -1,14 +1,37 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Service, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Service, input, computed, Component, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 
 const MATERIAL_SYMBOLS_FONT_ATTR = 'data-icon-font';
 const MATERIAL_SYMBOLS_FONT_ID = 'material-symbols-outlined';
 const MATERIAL_SYMBOLS_FONT_HREF = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
+/**
+ * Presence of this token is what enables {@link IconComponent} to auto-load the
+ * font. It is only provided when the app opts in via `provideMaterialSymbols()`;
+ * without it, `<Icon>` makes no network request.
+ */
+const MATERIAL_SYMBOLS_CONFIG = new InjectionToken('MATERIAL_SYMBOLS_CONFIG');
 class MaterialSymbolsService {
     documentRef = inject(DOCUMENT, { optional: true });
     platformId = inject(PLATFORM_ID);
+    config = inject(MATERIAL_SYMBOLS_CONFIG, { optional: true });
+    /**
+     * Token-gated load. No-op unless the app opted in via `provideMaterialSymbols()`
+     * (which provides {@link MATERIAL_SYMBOLS_CONFIG}). Called by `IconComponent`
+     * so rendering an icon never triggers an implicit network request on its own.
+     */
     ensureLoaded() {
+        if (!this.config) {
+            return;
+        }
+        this.load(this.config);
+    }
+    /**
+     * Explicitly inject the font stylesheet, regardless of whether the config
+     * token is present. Used by integrations that decide to load the font from
+     * their own option surface (e.g. `provideUiTheme({ icons: { materialSymbols: true } })`).
+     */
+    load(config) {
         const head = this.documentRef?.head;
         if (!isPlatformBrowser(this.platformId) || !head) {
             return;
@@ -17,9 +40,9 @@ class MaterialSymbolsService {
         if (existing) {
             return;
         }
-        const link = this.documentRef.createElement('link');
+        const link = head.ownerDocument.createElement('link');
         link.rel = 'stylesheet';
-        link.href = MATERIAL_SYMBOLS_FONT_HREF;
+        link.href = config?.href ?? MATERIAL_SYMBOLS_FONT_HREF;
         link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
         head.appendChild(link);
     }
@@ -59,13 +82,12 @@ class IconComponent {
         this.materialSymbols.ensureLoaded();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: IconComponent, isStandalone: true, selector: "Icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "resolvedSize()", "style.line-height.px": "resolvedSize()", "style.font-variation-settings": "fontVariationSettings()" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: IconComponent, isStandalone: true, selector: "Icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "resolvedSize()", "style.line-height.px": "resolvedSize()", "style.font-variation-settings": "fontVariationSettings()" } }, ngImport: i0, template: `{{ name() }}`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Icon',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[style.font-size.px]': 'resolvedSize()',
@@ -78,8 +100,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
 
+/**
+ * Opt in to loading the Material Symbols icon font that `<Icon>` renders with.
+ *
+ * By default `IconComponent` makes **no** network request — better for privacy,
+ * offline, and strict CSP. Add this provider to your bootstrap to fetch the font
+ * stylesheet once at startup. Pass `{ href }` to load from a self-hosted source
+ * instead of Google Fonts.
+ *
+ * @example
+ * // Google Fonts (default source):
+ * bootstrapApplication(App, { providers: [provideMaterialSymbols()] });
+ *
+ * @example
+ * // Self-hosted / offline:
+ * provideMaterialSymbols({ href: '/assets/material-symbols.css' });
+ */
+function provideMaterialSymbols(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: MATERIAL_SYMBOLS_CONFIG, useValue: config },
+        provideEnvironmentInitializer(() => inject(MaterialSymbolsService).ensureLoaded()),
+    ]);
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IconComponent, MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_HREF, MATERIAL_SYMBOLS_FONT_ID, MaterialSymbolsService };
+export { IconComponent, MATERIAL_SYMBOLS_CONFIG, MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_HREF, MATERIAL_SYMBOLS_FONT_ID, MaterialSymbolsService, provideMaterialSymbols };

package/fesm2022/ojiepermana-angular-component-input-group.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, inject, ElementRef } from '@angular/core';
+import { input, computed, Component, inject, ElementRef } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 import { buttonVariants } from '@ojiepermana/angular-component/button';
 
@@ -17,8 +17,16 @@ const GROUP_BASE = [
     '[&>[data-slot=input-group-control]]:focus-visible:outline-none',
 ].join(' ');
 const addonAlignClasses = {
-    'inline-start': ['order-10', '[border-inline-end-width:1px]', '[border-inline-end-color:hsl(var(--border))]'].join(' '),
-    'inline-end': ['order-30', '[border-inline-start-width:1px]', '[border-inline-start-color:hsl(var(--border))]'].join(' '),
+    'inline-start': [
+        'order-10',
+        '[border-inline-end-width:1px]',
+        '[border-inline-end-color:hsl(var(--border))]',
+    ].join(' '),
+    'inline-end': [
+        'order-30',
+        '[border-inline-start-width:1px]',
+        '[border-inline-start-color:hsl(var(--border))]',
+    ].join(' '),
     'block-start': [
         'order-0 basis-full py-2',
         '[border-block-end-width:1px]',
@@ -47,13 +55,12 @@ class InputGroupComponent {
     classes = computed(() => cn(GROUP_BASE, 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: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupComponent, isStandalone: true, selector: "InputGroup", 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: InputGroupComponent, isStandalone: true, selector: "InputGroup", 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: InputGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'InputGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -66,13 +73,12 @@ class InputGroupAddonComponent {
     classes = computed(() => cn(ADDON_BASE, addonAlignClasses[this.align()], 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: InputGroupAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupAddonComponent, isStandalone: true, selector: "InputGroupAddon", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-align": "align()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupAddonComponent, isStandalone: true, selector: "InputGroupAddon", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-align": "align()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputGroupAddonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'InputGroupAddon',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-align]': 'align()',
@@ -86,13 +92,12 @@ class InputGroupTextComponent {
     classes = computed(() => cn('inline-flex items-center gap-1.5 whitespace-nowrap text-sm leading-none text-current', 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: InputGroupTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupTextComponent, isStandalone: true, selector: "InputGroupText", 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: InputGroupTextComponent, isStandalone: true, selector: "InputGroupText", 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: InputGroupTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'InputGroupText',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -107,13 +112,12 @@ class InputGroupButtonComponent {
     classes = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'shrink-0 shadow-none', 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: InputGroupButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupButtonComponent, isStandalone: true, selector: "button[InputGroupButton], a[InputGroupButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupButtonComponent, isStandalone: true, selector: "button[InputGroupButton], a[InputGroupButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputGroupButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[InputGroupButton], a[InputGroupButton]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-size]': 'size()',
@@ -132,13 +136,12 @@ class InputGroupInputComponent {
         this.el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputGroupInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupInputComponent, isStandalone: true, selector: "input[InputGroupInput]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupInputComponent, isStandalone: true, selector: "input[InputGroupInput]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputGroupInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[InputGroupInput]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-slot': 'input-group-control',
@@ -156,13 +159,12 @@ class InputGroupTextareaComponent {
         this.el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputGroupTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupTextareaComponent, isStandalone: true, selector: "textarea[InputGroupTextarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputGroupTextareaComponent, isStandalone: true, selector: "textarea[InputGroupTextarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputGroupTextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'textarea[InputGroupTextarea]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-slot': 'input-group-control',

package/fesm2022/ojiepermana-angular-component-input-otp.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, input, computed, ChangeDetectionStrategy, Component, inject, numberAttribute, booleanAttribute, viewChild, ElementRef, Injector, output, linkedSignal, signal, contentChildren, forwardRef } from '@angular/core';
+import { Directive, input, computed, Component, inject, numberAttribute, booleanAttribute, viewChild, ElementRef, Injector, output, linkedSignal, signal, contentChildren, forwardRef } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FormFieldContext } from '@ojiepermana/angular-component/form';
 import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
@@ -19,13 +19,12 @@ class InputOtpGroupComponent {
     classes = computed(() => cn('flex items-center overflow-hidden rounded-md border border-input bg-background shadow-sm', 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: InputOtpGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputOtpGroupComponent, isStandalone: true, selector: "InputOtpGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"input-otp-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputOtpGroupComponent, isStandalone: true, selector: "InputOtpGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"input-otp-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputOtpGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'InputOtpGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"input-otp-group"',
@@ -46,16 +45,16 @@ class InputOtpSeparatorComponent {
       stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
-      stroke-linejoin="round">
+      stroke-linejoin="round"
+    >
       <path d="M5 12h14" />
     </svg>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputOtpSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'InputOtpSeparator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"input-otp-separator"',
@@ -68,7 +67,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
-      stroke-linejoin="round">
+      stroke-linejoin="round"
+    >
       <path d="M5 12h14" />
     </svg>
   `,
@@ -107,7 +107,8 @@ class InputOtpSlotComponent {
     ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
     effectiveInvalid = computed(() => this.invalid() || this.ctx.isInvalid(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('relative flex h-10 w-10 items-center justify-center border-r border-border text-sm font-medium transition-[background-color,box-shadow,opacity] last:border-r-0', this.active() && !this.effectiveInvalid() && 'z-10 ring-1 ring-inset ring-ring', this.effectiveInvalid() && 'bg-destructive/5 text-destructive ring-1 ring-inset ring-destructive/50', this.disabled() && 'opacity-50', this.class()), /* @ts-ignore */
+    classes = computed(() => cn('relative flex h-10 w-10 items-center justify-center border-r border-border text-sm font-medium transition-[background-color,box-shadow,opacity] last:border-r-0', this.active() && !this.effectiveInvalid() && 'z-10 ring-1 ring-inset ring-ring', this.effectiveInvalid() &&
+        'bg-destructive/5 text-destructive ring-1 ring-inset ring-destructive/50', this.disabled() && 'opacity-50', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     focus(select = true) {
         const input = this.inputRef().nativeElement;
@@ -152,14 +153,14 @@ class InputOtpSlotComponent {
       (focus)="handleFocus()"
       (input)="handleInput($event)"
       (keydown)="handleKeydown($event)"
-      (paste)="handlePaste($event)" />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      (paste)="handlePaste($event)"
+    />
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputOtpSlotComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'InputOtpSlot',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"input-otp-slot"',
@@ -189,7 +190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       (focus)="handleFocus()"
       (input)="handleInput($event)"
       (keydown)="handleKeydown($event)"
-      (paste)="handlePaste($event)" />
+      (paste)="handlePaste($event)"
+    />
   `,
                 }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
@@ -479,13 +481,12 @@ class InputOtpComponent extends InputOtpContextBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: InputOtpComponent, isStandalone: true, selector: "InputOtp", inputs: { maxLengthInput: { classPropertyName: "maxLengthInput", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "handleFocusOut($event)" }, properties: { "class": "classes()", "attr.id": "null", "attr.role": "\"group\"", "attr.data-slot": "\"input-otp\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-describedby": "describedBy()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "isInvalid() ? \"true\" : null" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputOtpComponent), multi: true },
             { provide: InputOtpContextBase, useExisting: forwardRef(() => InputOtpComponent) },
-        ], queries: [{ propertyName: "slots", predicate: InputOtpSlotComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "slots", predicate: InputOtpSlotComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputOtpComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'InputOtp',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputOtpComponent), multi: true },
                         { provide: InputOtpContextBase, useExisting: forwardRef(() => InputOtpComponent) },

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, computed, Component } from '@angular/core';
 import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 const BASE = [
@@ -33,13 +33,12 @@ class InputComponent {
         this.el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputComponent, isStandalone: true, selector: "input[Input]", inputs: { 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 } }, host: { properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: InputComponent, isStandalone: true, selector: "input[Input]", inputs: { 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 } }, host: { properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[Input]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[style.--radius-base]': 'radiusBase()',

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, inject, ElementRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, inject, ElementRef, Component } from '@angular/core';
 import { radiusBaseValue, densityBaseValue, cn } from '@ojiepermana/angular-component/utils';
 import { cva } from 'class-variance-authority';
 
@@ -83,13 +83,12 @@ class ItemComponent {
     classes = computed(() => cn(itemVariants({ variant: this.variant(), size: this.size(), interactive: this.interactive }), 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: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemComponent, isStandalone: true, selector: "Item, [Item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-interactive": "interactive ? \"true\" : null", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemComponent, isStandalone: true, selector: "Item, [Item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-interactive": "interactive ? \"true\" : null", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Item, [Item]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-size]': 'size()',
@@ -107,13 +106,12 @@ class ItemGroupComponent {
     classes = computed(() => cn('flex w-full flex-col gap-3', 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: ItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemGroupComponent, isStandalone: true, selector: "ItemGroup", 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: ItemGroupComponent, isStandalone: true, selector: "ItemGroup", 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: ItemGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -124,13 +122,12 @@ class ItemSeparatorComponent {
     classes = computed(() => cn('block h-px w-full bg-border', 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: ItemSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemSeparatorComponent, isStandalone: true, selector: "ItemSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemSeparatorComponent, isStandalone: true, selector: "ItemSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ItemSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemSeparator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         role: 'separator',
@@ -144,13 +141,12 @@ class ItemHeaderComponent {
     classes = computed(() => cn('basis-full overflow-hidden rounded-lg', 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: ItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemHeaderComponent, isStandalone: true, selector: "ItemHeader", 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: ItemHeaderComponent, isStandalone: true, selector: "ItemHeader", 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: ItemHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -164,13 +160,12 @@ class ItemMediaComponent {
     classes = computed(() => cn(itemMediaVariants({ variant: this.variant(), size: this.item?.size() ?? 'default' }), 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: ItemMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemMediaComponent, isStandalone: true, selector: "ItemMedia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemMediaComponent, isStandalone: true, selector: "ItemMedia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-variant": "variant()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ItemMediaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemMedia',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-variant]': 'variant()',
@@ -184,13 +179,12 @@ class ItemContentComponent {
     classes = computed(() => cn('flex min-w-0 flex-1 basis-0 flex-col justify-center gap-0.5', 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: ItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemContentComponent, isStandalone: true, selector: "ItemContent", 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: ItemContentComponent, isStandalone: true, selector: "ItemContent", 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: ItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -202,13 +196,12 @@ class ItemTitleComponent {
     classes = computed(() => cn('block min-w-0 truncate font-medium text-foreground', ITEM_TITLE_CLASSES[this.item?.size() ?? 'default'], 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: ItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemTitleComponent, isStandalone: true, selector: "ItemTitle", 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: ItemTitleComponent, isStandalone: true, selector: "ItemTitle", 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: ItemTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemTitle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -220,13 +213,12 @@ class ItemDescriptionComponent {
     classes = computed(() => cn('block min-w-0 text-muted-foreground', ITEM_DESCRIPTION_CLASSES[this.item?.size() ?? 'default'], 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: ItemDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemDescriptionComponent, isStandalone: true, selector: "ItemDescription", 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: ItemDescriptionComponent, isStandalone: true, selector: "ItemDescription", 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: ItemDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemDescription',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -237,13 +229,12 @@ class ItemActionsComponent {
     classes = computed(() => cn('ms-auto flex shrink-0 items-center gap-2', 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: ItemActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemActionsComponent, isStandalone: true, selector: "ItemActions", 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: ItemActionsComponent, isStandalone: true, selector: "ItemActions", 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: ItemActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemActions',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -254,13 +245,12 @@ class ItemFooterComponent {
     classes = computed(() => cn('basis-full 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.4", ngImport: i0, type: ItemFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ItemFooterComponent, isStandalone: true, selector: "ItemFooter", 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: ItemFooterComponent, isStandalone: true, selector: "ItemFooter", 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: ItemFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ItemFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]