@ojiepermana/angular-component 22.0.44 → 22.0.45

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, effect, Injectable, inject, input, booleanAttribute, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { signal, computed, effect, Injectable, inject, input, booleanAttribute, Component, Directive } from '@angular/core';
 import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
 import { NgControl } from '@angular/forms';
 
@@ -83,13 +83,12 @@ class FormFieldComponent {
         effect(() => this.ctx.manualInvalid.set(this.invalid()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormFieldComponent, isStandalone: true, selector: "FormField", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()", "attr.data-invalid": "ctx.invalid() ? \"\" : null", "attr.role": "\"group\"" } }, providers: [FormFieldContext], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormFieldComponent, isStandalone: true, selector: "FormField", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()", "attr.data-invalid": "ctx.invalid() ? \"\" : null", "attr.role": "\"group\"" } }, providers: [FormFieldContext], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormField',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [FormFieldContext],
                     host: {
                         '[class]': 'classes()',
@@ -107,13 +106,12 @@ class FormFieldsetComponent {
     classes = computed(() => cn('block min-w-0 border-0 p-0 m-0', 'grid gap-4', 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: FormFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormFieldsetComponent, isStandalone: true, selector: "FormFieldset, fieldset[FormFieldset]", 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: FormFieldsetComponent, isStandalone: true, selector: "FormFieldset, fieldset[FormFieldset]", 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: FormFieldsetComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormFieldset, fieldset[FormFieldset]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -126,16 +124,17 @@ class FormLegendComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     variant = input('legend', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('block min-w-0 text-foreground', this.variant() === 'label' ? 'text-sm font-medium leading-none' : 'text-sm font-semibold leading-none', this.class()), /* @ts-ignore */
+    classes = computed(() => cn('block min-w-0 text-foreground', this.variant() === 'label'
+        ? 'text-sm font-medium leading-none'
+        : 'text-sm font-semibold leading-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: FormLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormLegendComponent, isStandalone: true, selector: "FormLegend, legend[FormLegend]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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: FormLegendComponent, isStandalone: true, selector: "FormLegend, legend[FormLegend]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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: FormLegendComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormLegend, legend[FormLegend]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -149,13 +148,12 @@ class FormGroupComponent {
     classes = computed(() => cn('block min-w-0', 'grid gap-6', 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: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormGroupComponent, isStandalone: true, selector: "FormGroup", 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: FormGroupComponent, isStandalone: true, selector: "FormGroup", 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: FormGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -169,13 +167,12 @@ class FormSeparatorComponent {
     classes = computed(() => cn('block min-w-0', 'flex items-center gap-3 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground', 'before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after: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: FormSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormSeparatorComponent, isStandalone: true, selector: "FormSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<span class="shrink-0"><ng-content /></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormSeparatorComponent, isStandalone: true, selector: "FormSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<span class="shrink-0"><ng-content /></span>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormSeparator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -189,13 +186,12 @@ class FormContentComponent {
     classes = computed(() => cn('block min-w-0 flex-1', 'grid gap-1.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: FormContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormContentComponent, isStandalone: true, selector: "FormContent", 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: FormContentComponent, isStandalone: true, selector: "FormContent", 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: FormContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -209,13 +205,12 @@ class FormTitleComponent {
     classes = computed(() => cn('block text-sm font-medium leading-none text-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: FormTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormTitleComponent, isStandalone: true, selector: "FormTitle", 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: FormTitleComponent, isStandalone: true, selector: "FormTitle", 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: FormTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormTitle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -230,13 +225,12 @@ class FormLabelComponent {
     classes = computed(() => cn('text-sm font-medium leading-none', this.ctx.invalid() ? 'text-destructive' : 'text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', 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: FormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormLabelComponent, isStandalone: true, selector: "FormLabel, label[FormLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "ctx.controlId" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormLabelComponent, isStandalone: true, selector: "FormLabel, label[FormLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "ctx.controlId" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormLabel, label[FormLabel]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.for]': 'ctx.controlId',
@@ -260,13 +254,12 @@ class FormDescriptionComponent {
         this.ctx?.hasDescription.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormDescriptionComponent, isStandalone: true, selector: "FormDescription, p[FormDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "descriptionId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormDescriptionComponent, isStandalone: true, selector: "FormDescription, p[FormDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "descriptionId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormDescription, p[FormDescription]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'descriptionId()',
@@ -298,13 +291,12 @@ class FormMessageComponent {
     @if (show()) {
       <ng-content>{{ ctx.firstError() }}</ng-content>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormMessageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'FormMessage, p[FormMessage]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'ctx.messageId',

package/fesm2022/ojiepermana-angular-component-hover-card.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, forwardRef, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal } from '@angular/core';
+import { InjectionToken, input, forwardRef, Component, inject, TemplateRef, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -18,13 +18,12 @@ class HoverCardComponent {
     closeDelay = input(100, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HoverCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: HoverCardComponent, isStandalone: true, selector: "HoverCard", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [{ provide: HOVER_CARD_DEFAULTS, useExisting: forwardRef(() => HoverCardComponent) }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: HoverCardComponent, isStandalone: true, selector: "HoverCard", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [{ provide: HOVER_CARD_DEFAULTS, useExisting: forwardRef(() => HoverCardComponent) }], ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HoverCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'HoverCard',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: HOVER_CARD_DEFAULTS, useExisting: forwardRef(() => HoverCardComponent) }],
                     host: {
                         class: 'contents',

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()',