@ojiepermana/angular-component 22.0.44 → 22.0.46

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

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, SecurityContext, forwardRef } from '@angular/core';
+import { input, booleanAttribute, output, computed, Component, inject, ElementRef, signal, SecurityContext, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cn } from '@ojiepermana/angular-component/utils';
@@ -135,17 +135,17 @@ class EditorComponent {
       data-slot="editor-shell"
       [class]="shellClasses()"
       [attr.data-disabled]="disabled() ? 'true' : null"
-      [attr.aria-invalid]="invalid() ? 'true' : null">
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
       <ng-content select="EditorToolbar" />
       <ng-content select="EditorContent" />
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Editor',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"editor"',
@@ -159,7 +159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       data-slot="editor-shell"
       [class]="shellClasses()"
       [attr.data-disabled]="disabled() ? 'true' : null"
-      [attr.aria-invalid]="invalid() ? 'true' : null">
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
       <ng-content select="EditorToolbar" />
       <ng-content select="EditorContent" />
     </div>
@@ -206,7 +207,8 @@ class EditorToolbarComponent {
             [class]="selectClasses"
             [disabled]="disabled()"
             aria-label="Text style"
-            (change)="handleSelect($event)">
+            (change)="handleSelect($event)"
+          >
             <option value="paragraph">Text</option>
             <option value="heading-1">Heading 1</option>
             <option value="heading-2">Heading 2</option>
@@ -218,7 +220,8 @@ class EditorToolbarComponent {
             [class]="selectClasses"
             [disabled]="disabled()"
             aria-label="Text alignment"
-            (change)="handleSelect($event)">
+            (change)="handleSelect($event)"
+          >
             <option value="align-left">Left</option>
             <option value="align-center">Center</option>
             <option value="align-right">Right</option>
@@ -229,7 +232,8 @@ class EditorToolbarComponent {
             data-slot="editor-separator"
             class="mx-1 h-6 w-px shrink-0 bg-border"
             role="separator"
-            aria-orientation="vertical"></span>
+            aria-orientation="vertical"
+          ></span>
         }
         @case ('spacer') {
           <span data-slot="editor-spacer" class="min-w-2 flex-1"></span>
@@ -243,7 +247,8 @@ class EditorToolbarComponent {
             [attr.aria-label]="part.ariaLabel"
             [attr.title]="part.ariaLabel"
             (mousedown)="preserveSelection($event)"
-            (click)="execute(part.command, $event)">
+            (click)="execute(part.command, $event)"
+          >
             @if (part.command === 'undo') {
               <svg
                 aria-hidden="true"
@@ -253,7 +258,8 @@ class EditorToolbarComponent {
                 stroke="currentColor"
                 stroke-width="1.75"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
+              >
                 <path d="M9 14 4 9l5-5" />
                 <path d="M4 9h10a6 6 0 0 1 0 12h-2" />
               </svg>
@@ -266,7 +272,8 @@ class EditorToolbarComponent {
                 stroke="currentColor"
                 stroke-width="1.75"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
+              >
                 <path d="m15 14 5-5-5-5" />
                 <path d="M20 9H10a6 6 0 0 0 0 12h2" />
               </svg>
@@ -278,13 +285,12 @@ class EditorToolbarComponent {
       }
     }
     <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EditorToolbar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"editor-toolbar"',
@@ -300,7 +306,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             [class]="selectClasses"
             [disabled]="disabled()"
             aria-label="Text style"
-            (change)="handleSelect($event)">
+            (change)="handleSelect($event)"
+          >
             <option value="paragraph">Text</option>
             <option value="heading-1">Heading 1</option>
             <option value="heading-2">Heading 2</option>
@@ -312,7 +319,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             [class]="selectClasses"
             [disabled]="disabled()"
             aria-label="Text alignment"
-            (change)="handleSelect($event)">
+            (change)="handleSelect($event)"
+          >
             <option value="align-left">Left</option>
             <option value="align-center">Center</option>
             <option value="align-right">Right</option>
@@ -323,7 +331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             data-slot="editor-separator"
             class="mx-1 h-6 w-px shrink-0 bg-border"
             role="separator"
-            aria-orientation="vertical"></span>
+            aria-orientation="vertical"
+          ></span>
         }
         @case ('spacer') {
           <span data-slot="editor-spacer" class="min-w-2 flex-1"></span>
@@ -337,7 +346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             [attr.aria-label]="part.ariaLabel"
             [attr.title]="part.ariaLabel"
             (mousedown)="preserveSelection($event)"
-            (click)="execute(part.command, $event)">
+            (click)="execute(part.command, $event)"
+          >
             @if (part.command === 'undo') {
               <svg
                 aria-hidden="true"
@@ -347,7 +357,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 stroke="currentColor"
                 stroke-width="1.75"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
+              >
                 <path d="M9 14 4 9l5-5" />
                 <path d="M4 9h10a6 6 0 0 1 0 12h-2" />
               </svg>
@@ -360,7 +371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 stroke="currentColor"
                 stroke-width="1.75"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
+              >
                 <path d="m15 14 5-5-5-5" />
                 <path d="M20 9H10a6 6 0 0 0 0 12h2" />
               </svg>
@@ -399,13 +411,12 @@ class EditorButtonComponent {
     }
     preserveSelection = preserveEditorSelection;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EditorButtonComponent, isStandalone: true, selector: "button[EditorButton]", inputs: { command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "mousedown": "preserveSelection($event)", "click": "handleClick($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-button\"", "attr.title": "tooltip() || null", "attr.aria-pressed": "pressed() === null ? null : pressed()", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EditorButtonComponent, isStandalone: true, selector: "button[EditorButton]", inputs: { command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "mousedown": "preserveSelection($event)", "click": "handleClick($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-button\"", "attr.title": "tooltip() || null", "attr.aria-pressed": "pressed() === null ? null : pressed()", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditorButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[EditorButton]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"editor-button"',
@@ -425,13 +436,12 @@ class EditorSeparatorComponent {
     classes = computed(() => cn('mx-1 h-6 w-px shrink-0 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: EditorSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EditorSeparatorComponent, isStandalone: true, selector: "EditorSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator", "aria-orientation": "vertical" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-separator\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EditorSeparatorComponent, isStandalone: true, selector: "EditorSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator", "aria-orientation": "vertical" }, properties: { "class": "classes()", "attr.data-slot": "\"editor-separator\"" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditorSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EditorSeparator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"editor-separator"',
@@ -447,13 +457,12 @@ class EditorSpacerComponent {
     classes = computed(() => cn('min-w-2 flex-1', 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: EditorSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EditorSpacerComponent, isStandalone: true, selector: "EditorSpacer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"editor-spacer\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EditorSpacerComponent, isStandalone: true, selector: "EditorSpacer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"editor-spacer\"" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditorSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EditorSpacer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"editor-spacer"',
@@ -494,7 +503,8 @@ class EditorContentComponent {
         this.editor?.unregisterContent(this);
     }
     writeValue(value) {
-        this.el.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, value ?? '') ?? '';
+        this.el.nativeElement.innerHTML =
+            this.sanitizer.sanitize(SecurityContext.HTML, value ?? '') ?? '';
         // Read back after assignment: the browser normalizes markup, so the
         // DOM-normalized form is the canonical value for change comparisons.
         this.lastKnownValue = this.el.nativeElement.innerHTML;
@@ -637,13 +647,12 @@ class EditorContentComponent {
                 useExisting: forwardRef(() => EditorContentComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EditorContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EditorContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 import { cva } from 'class-variance-authority';
 
@@ -25,13 +25,12 @@ class EmptyComponent {
     classes = computed(() => cn(emptyVariants(), 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: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EmptyComponent, isStandalone: true, selector: "Empty", 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: EmptyComponent, isStandalone: true, selector: "Empty", 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: EmptyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Empty',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -44,13 +43,12 @@ class EmptyHeaderComponent {
     classes = computed(() => cn('flex w-full max-w-xl flex-col items-center gap-3 text-center', 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: EmptyHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EmptyHeaderComponent, isStandalone: true, selector: "EmptyHeader", 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: EmptyHeaderComponent, isStandalone: true, selector: "EmptyHeader", 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: EmptyHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EmptyHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -65,13 +63,12 @@ class EmptyMediaComponent {
     classes = computed(() => cn(emptyMediaVariants({ variant: this.variant() }), 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: EmptyMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EmptyMediaComponent, isStandalone: true, selector: "EmptyMedia", 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: EmptyMediaComponent, isStandalone: true, selector: "EmptyMedia", 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: EmptyMediaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EmptyMedia',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-variant]': 'variant()',
@@ -85,13 +82,12 @@ class EmptyTitleComponent {
     classes = computed(() => cn('block text-xl font-semibold tracking-tight text-foreground sm:text-2xl', 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: EmptyTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EmptyTitleComponent, isStandalone: true, selector: "EmptyTitle", 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: EmptyTitleComponent, isStandalone: true, selector: "EmptyTitle", 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: EmptyTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EmptyTitle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -104,13 +100,12 @@ class EmptyDescriptionComponent {
     classes = computed(() => cn('block max-w-lg text-sm leading-6 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: EmptyDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EmptyDescriptionComponent, isStandalone: true, selector: "EmptyDescription", 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: EmptyDescriptionComponent, isStandalone: true, selector: "EmptyDescription", 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: EmptyDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EmptyDescription',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },
@@ -123,13 +118,12 @@ class EmptyContentComponent {
     classes = computed(() => cn('flex w-full flex-col items-center justify-center 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: EmptyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: EmptyContentComponent, isStandalone: true, selector: "EmptyContent", 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: EmptyContentComponent, isStandalone: true, selector: "EmptyContent", 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: EmptyContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'EmptyContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                     },

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';
 
@@ -9,16 +9,26 @@ import { NgControl } from '@angular/forms';
  */
 class FormFieldContext {
     controlId = uniqueId('FormField');
+    labelId = `${this.controlId}-label`;
     descriptionId = `${this.controlId}-description`;
     messageId = `${this.controlId}-message`;
     control = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     manualInvalid = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "manualInvalid" }] : /* istanbul ignore next */ []));
+    hasLabel = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
     hasDescription = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
     hasMessage = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * `aria-labelledby` for the control. `<FormLabel>` renders as a custom element,
+     * so the native `for`/`id` pairing does not associate it — point the control at
+     * the label's id explicitly so it has an accessible name (axe `select-name`/`label`).
+     */
+    labelledBy = computed(() => (this.hasLabel() ? this.labelId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
     statusTick = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "statusTick" }] : /* istanbul ignore next */ []));
     invalid = computed(() => {
@@ -83,13 +93,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 +116,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 +134,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 +158,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 +177,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 +196,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 +215,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()',
                     },
@@ -227,23 +232,27 @@ class FormLabelComponent {
     ctx = inject(FormFieldContext);
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Let the control reference this label via aria-labelledby.
+        this.ctx.hasLabel.set(true);
+    }
     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.id": "ctx.labelId", "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.id]': 'ctx.labelId',
                         '[attr.for]': 'ctx.controlId',
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class FormDescriptionComponent {
     ctx = inject(FormFieldContext, { optional: true });
@@ -260,13 +269,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 +306,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',
@@ -342,7 +349,7 @@ class FormControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: FormControlDirective, isStandalone: true, selector: "[FormControl]", host: { properties: { "attr.id": "ctx.controlId", "attr.aria-describedby": "ctx.describedBy()", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: FormControlDirective, isStandalone: true, selector: "[FormControl]", host: { properties: { "attr.id": "ctx.controlId", "attr.aria-labelledby": "ctx.labelledBy()", "attr.aria-describedby": "ctx.describedBy()", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormControlDirective, decorators: [{
             type: Directive,
@@ -350,6 +357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     selector: '[FormControl]',
                     host: {
                         '[attr.id]': 'ctx.controlId',
+                        '[attr.aria-labelledby]': 'ctx.labelledBy()',
                         '[attr.aria-describedby]': 'ctx.describedBy()',
                         '[attr.aria-invalid]': 'ctx.invalid() ? "true" : null',
                     },

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