@ojiepermana/angular-component 22.0.44 → 22.0.45

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { numberAttribute, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
+import { numberAttribute, input, booleanAttribute, output, computed, Component, inject, ElementRef, signal, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn } from '@ojiepermana/angular-component/utils';
 
@@ -56,7 +56,9 @@ class ComposerComponent {
         if (this.disabled() || event.key !== 'Enter' || event.defaultPrevented) {
             return;
         }
-        const shouldSubmit = this.submit() === 'enter' ? !event.shiftKey && !event.isComposing : event.metaKey || event.ctrlKey;
+        const shouldSubmit = this.submit() === 'enter'
+            ? !event.shiftKey && !event.isComposing
+            : event.metaKey || event.ctrlKey;
         if (!shouldSubmit) {
             return;
         }
@@ -81,7 +83,8 @@ class ComposerComponent {
       data-slot="composer-shell"
       [class]="shellClasses()"
       [attr.data-disabled]="disabled() ? 'true' : null"
-      [attr.aria-invalid]="invalid() ? 'true' : null">
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
       <ng-content select="ComposerHeader" />
       <div data-slot="composer-body" [class]="bodyClasses()">
         <ng-content select="ComposerActionsLeading" />
@@ -90,13 +93,12 @@ class ComposerComponent {
       </div>
       <ng-content select="ComposerFooter" />
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Composer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer"',
@@ -112,7 +114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       data-slot="composer-shell"
       [class]="shellClasses()"
       [attr.data-disabled]="disabled() ? 'true' : null"
-      [attr.aria-invalid]="invalid() ? 'true' : null">
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
       <ng-content select="ComposerHeader" />
       <div data-slot="composer-body" [class]="bodyClasses()">
         <ng-content select="ComposerActionsLeading" />
@@ -130,13 +133,12 @@ class ComposerHeaderComponent {
     classes = computed(() => cn('flex min-w-0 flex-wrap gap-2 border-b border-[hsl(var(--border)/var(--opacity-70))] px-2.5 py-2', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerHeaderComponent, isStandalone: true, selector: "ComposerHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerHeaderComponent, isStandalone: true, selector: "ComposerHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-header\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-header"',
@@ -150,13 +152,12 @@ class ComposerFooterComponent {
     classes = computed(() => cn('border-t border-[hsl(var(--border)/var(--opacity-70))] px-2.5 py-1.5 text-xs leading-5 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: ComposerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerFooterComponent, isStandalone: true, selector: "ComposerFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerFooterComponent, isStandalone: true, selector: "ComposerFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-footer\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-footer"',
@@ -170,13 +171,12 @@ class ComposerActionsLeadingComponent {
     classes = computed(() => cn('flex min-h-8 shrink-0 items-center gap-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: ComposerActionsLeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerActionsLeadingComponent, isStandalone: true, selector: "ComposerActionsLeading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-leading\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerActionsLeadingComponent, isStandalone: true, selector: "ComposerActionsLeading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-leading\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerActionsLeadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerActionsLeading',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-actions-leading"',
@@ -190,13 +190,12 @@ class ComposerActionsTrailingComponent {
     classes = computed(() => cn('flex min-h-8 shrink-0 items-center justify-end gap-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: ComposerActionsTrailingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerActionsTrailingComponent, isStandalone: true, selector: "ComposerActionsTrailing", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-trailing\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerActionsTrailingComponent, isStandalone: true, selector: "ComposerActionsTrailing", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"composer-actions-trailing\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerActionsTrailingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerActionsTrailing',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-actions-trailing"',
@@ -220,13 +219,12 @@ class ComposerInputComponent {
         this.composer?.handleInputKeydown(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ComposerInputComponent, isStandalone: true, selector: "ComposerInput", inputs: { 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 } }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : 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: ComposerInputComponent, isStandalone: true, selector: "ComposerInput", inputs: { 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 } }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class": "classes()", "attr.data-slot": "\"composer-input\"", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ComposerInput',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"composer-input"',
@@ -316,13 +314,12 @@ class ComposerTextareaComponent {
                 useExisting: forwardRef(() => ComposerTextareaComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComposerTextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'textarea[ComposerInput]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,

package/fesm2022/ojiepermana-angular-component-date-picker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { model, input, signal, computed, effect, inject, DestroyRef, untracked, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, signal, computed, effect, inject, DestroyRef, untracked, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { provideNativeDateAdapter } from '@angular/material/core';
 import { MatDatepicker, MatDatepickerInput } from '@angular/material/datepicker';
@@ -108,15 +108,23 @@ class DatePickerComponent {
         [min]="min()"
         [max]="max()"
         [formControl]="control"
-        (blur)="handleTouched()" />
+        (blur)="handleTouched()"
+      />
       <button
         matIconSuffix
         type="button"
         class="date-picker-toggle"
         aria-label="Open calendar"
         [disabled]="control.disabled"
-        (click)="picker.open()">
-        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        (click)="picker.open()"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
           <path d="M8 2v4" />
           <path d="M16 2v4" />
           <rect width="18" height="18" x="3" y="4" rx="2" />
@@ -129,13 +137,21 @@ class DatePickerComponent {
         [startAt]="startAt()"
         [startView]="startView()"
         [touchUi]="touchUi()"
-        (closed)="handleTouched()"></mat-datepicker>
+        (closed)="handleTouched()"
+      ></mat-datepicker>
     </mat-form-field>
-  `, isInline: true, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .date-picker-toggle{opacity:.5}::ng-deep mat-datepicker-content:has(.datepicker-panel){--mat-datepicker-calendar-container-background-color: hsl(var(--popover));--mat-datepicker-calendar-container-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-container-shape: var(--radius);--mat-datepicker-calendar-container-touch-shape: var(--radius);--mat-datepicker-calendar-container-elevation-shadow: var( --shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24) );--mat-datepicker-calendar-container-touch-elevation-shadow: var( --shadow-lg, 0 18px 36px -28px hsl(var(--foreground) / .34) );--mat-datepicker-calendar-text-font: var(--font-sans);--mat-datepicker-calendar-date-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-hover-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-focus-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-selected-state-background-color: hsl(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-selected-disabled-state-background-color: hsl(var(--muted));--mat-datepicker-calendar-date-disabled-state-text-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-today-outline-color: hsl(var(--primary));--mat-datepicker-calendar-date-today-selected-state-outline-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-today-disabled-state-outline-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-in-range-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-in-comparison-range-state-background-color: hsl(var(--accent) / .5);--mat-datepicker-calendar-date-preview-state-outline-color: hsl(var(--ring));--mat-datepicker-calendar-header-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-header-divider-color: transparent;--mat-datepicker-calendar-body-label-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-period-button-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-period-button-icon-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-navigation-button-icon-color: hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .date-picker-toggle{opacity:.5}::ng-deep mat-datepicker-content:has(.datepicker-panel){--mat-datepicker-calendar-container-background-color: hsl(var(--popover));--mat-datepicker-calendar-container-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-container-shape: var(--radius);--mat-datepicker-calendar-container-touch-shape: var(--radius);--mat-datepicker-calendar-container-elevation-shadow: var( --shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24) );--mat-datepicker-calendar-container-touch-elevation-shadow: var( --shadow-lg, 0 18px 36px -28px hsl(var(--foreground) / .34) );--mat-datepicker-calendar-text-font: var(--font-sans);--mat-datepicker-calendar-date-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-hover-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-focus-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-selected-state-background-color: hsl(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-selected-disabled-state-background-color: hsl(var(--muted));--mat-datepicker-calendar-date-disabled-state-text-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-today-outline-color: hsl(var(--primary));--mat-datepicker-calendar-date-today-selected-state-outline-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-today-disabled-state-outline-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-in-range-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-in-comparison-range-state-background-color: hsl(var(--accent) / .5);--mat-datepicker-calendar-date-preview-state-outline-color: hsl(var(--ring));--mat-datepicker-calendar-header-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-header-divider-color: transparent;--mat-datepicker-calendar-body-label-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-period-button-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-period-button-icon-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-navigation-button-icon-color: hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'DatePicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, MatFormField, MatSuffix, MatInput, MatDatepicker, MatDatepickerInput], host: { '[class]': 'classes()' }, providers: [
+            args: [{ selector: 'DatePicker', imports: [
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatSuffix,
+                        MatInput,
+                        MatDatepicker,
+                        MatDatepickerInput,
+                    ], host: { '[class]': 'classes()' }, providers: [
                         provideNativeDateAdapter(),
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
                     ], template: `
@@ -152,15 +168,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [min]="min()"
         [max]="max()"
         [formControl]="control"
-        (blur)="handleTouched()" />
+        (blur)="handleTouched()"
+      />
       <button
         matIconSuffix
         type="button"
         class="date-picker-toggle"
         aria-label="Open calendar"
         [disabled]="control.disabled"
-        (click)="picker.open()">
-        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        (click)="picker.open()"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
           <path d="M8 2v4" />
           <path d="M16 2v4" />
           <rect width="18" height="18" x="3" y="4" rx="2" />
@@ -173,7 +197,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [startAt]="startAt()"
         [startView]="startView()"
         [touchUi]="touchUi()"
-        (closed)="handleTouched()"></mat-datepicker>
+        (closed)="handleTouched()"
+      ></mat-datepicker>
     </mat-form-field>
   `, styles: [":host{display:inline-block}:host ::ng-deep .mat-mdc-form-field{--mat-form-field-container-height: 2.25rem;--mat-form-field-container-vertical-padding: 0;--mat-form-field-filled-with-label-container-padding-top: 0;--mat-form-field-filled-with-label-container-padding-bottom: 0;--mdc-outlined-text-field-container-shape: calc(var(--radius) - .125rem);--mdc-outlined-text-field-outline-color: hsl(var(--input));--mdc-outlined-text-field-hover-outline-color: hsl(var(--input));--mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));--mdc-outlined-text-field-input-text-color: hsl(var(--foreground));--mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-hover-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-focus-label-text-color: hsl(var(--muted-foreground));--mdc-outlined-text-field-disabled-outline-color: hsl(var(--input) / .5);--mdc-outlined-text-field-disabled-input-text-color: hsl(var(--muted-foreground));width:100%;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-text-field-wrapper{height:2.25rem;padding:0 .25rem 0 .75rem;background:transparent}:host ::ng-deep .mat-mdc-form-field-flex{height:2.25rem;align-items:center}:host ::ng-deep .mat-mdc-form-field-infix{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;padding:0;width:auto}:host ::ng-deep .mat-mdc-form-field-icon-suffix{align-self:center;padding-right:.25rem!important;padding-left:.25rem!important;color:hsl(var(--muted-foreground))}.date-picker-toggle{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;color:hsl(var(--muted-foreground));border-radius:calc(var(--radius) - .125rem);transition:color .15s ease,background-color .15s ease}.date-picker-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.date-picker-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.date-picker-toggle:disabled{cursor:not-allowed;opacity:.5}.date-picker-toggle svg{width:1rem;height:1rem}:host ::ng-deep .mat-mdc-input-element{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-input-element::placeholder{color:hsl(var(--muted-foreground))}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mdc-floating-label,:host ::ng-deep .mat-mdc-floating-label,:host ::ng-deep .mdc-notched-outline__notch .mdc-floating-label{display:none}:host ::ng-deep .mdc-notched-outline__notch{padding:0;border-left:none;border-right:none}:host ::ng-deep .mat-mdc-form-field.mat-focused .date-picker-toggle{color:hsl(var(--foreground))}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .date-picker-toggle{opacity:.5}::ng-deep mat-datepicker-content:has(.datepicker-panel){--mat-datepicker-calendar-container-background-color: hsl(var(--popover));--mat-datepicker-calendar-container-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-container-shape: var(--radius);--mat-datepicker-calendar-container-touch-shape: var(--radius);--mat-datepicker-calendar-container-elevation-shadow: var( --shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24) );--mat-datepicker-calendar-container-touch-elevation-shadow: var( --shadow-lg, 0 18px 36px -28px hsl(var(--foreground) / .34) );--mat-datepicker-calendar-text-font: var(--font-sans);--mat-datepicker-calendar-date-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-hover-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-focus-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-selected-state-background-color: hsl(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-selected-disabled-state-background-color: hsl(var(--muted));--mat-datepicker-calendar-date-disabled-state-text-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-today-outline-color: hsl(var(--primary));--mat-datepicker-calendar-date-today-selected-state-outline-color: hsl(var(--primary-foreground));--mat-datepicker-calendar-date-today-disabled-state-outline-color: hsl(var(--muted-foreground) / .5);--mat-datepicker-calendar-date-in-range-state-background-color: hsl(var(--accent));--mat-datepicker-calendar-date-in-comparison-range-state-background-color: hsl(var(--accent) / .5);--mat-datepicker-calendar-date-preview-state-outline-color: hsl(var(--ring));--mat-datepicker-calendar-header-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-header-divider-color: transparent;--mat-datepicker-calendar-body-label-text-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-period-button-text-color: hsl(var(--popover-foreground));--mat-datepicker-calendar-period-button-icon-color: hsl(var(--muted-foreground));--mat-datepicker-calendar-navigation-button-icon-color: hsl(var(--muted-foreground));border:1px solid hsl(var(--border))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });

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

@@ -2,12 +2,12 @@ import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, model, input, output, viewChild, computed, effect, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, model, input, output, signal, computed, viewChild, effect, Component, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import { ButtonComponent } from '@ojiepermana/angular-component/button';
-import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue, uniqueId } from '@ojiepermana/angular-component/utils';
 
 /**
  * Declarative modal dialog. Renders into the body via CDK overlay when
@@ -44,6 +44,9 @@ class DialogComponent {
     ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
     labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** ARIA role for the surface. `'dialog'` by default; `AlertDialog` sets `'alertdialog'`. */
+    role = input('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     radius = input('inherit', /* @ts-ignore */
@@ -51,6 +54,36 @@ class DialogComponent {
     density = input('inherit', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     openedChange = output();
+    registeredTitleId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []));
+    registeredDescriptionId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-labelledby` wins; otherwise a projected `DialogTitle` supplies the id. */
+    resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Explicit `aria-describedby` wins; otherwise a projected `DialogDescription` supplies the id. */
+    resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
+    /** Called by a projected `DialogTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id) {
+        this.registeredTitleId.set(id);
+    }
+    /** Cleared by a `DialogTitle` on destroy so a closed/reopened dialog never points at a stale id. */
+    unregisterTitleId(id) {
+        if (this.registeredTitleId() === id) {
+            this.registeredTitleId.set(null);
+        }
+    }
+    /** Called by a projected `DialogDescription`. */
+    registerDescriptionId(id) {
+        this.registeredDescriptionId.set(id);
+    }
+    /** Cleared by a `DialogDescription` on destroy. */
+    unregisterDescriptionId(id) {
+        if (this.registeredDescriptionId() === id) {
+            this.registeredDescriptionId.set(null);
+        }
+    }
     tpl = viewChild.required('tpl');
     overlayRef = null;
     focusTrap = null;
@@ -117,17 +150,18 @@ class DialogComponent {
         this.requestClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
-        role="dialog"
+        [attr.role]="role()"
         aria-modal="true"
-        [attr.aria-labelledby]="labelledBy()"
-        [attr.aria-describedby]="describedBy()"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
         [class]="surfaceClasses()"
         [style.--radius-base]="radiusBase()"
-        [style.--spacing-base]="densityBase()">
+        [style.--spacing-base]="densityBase()"
+      >
         @if (showCloseButton()) {
           <button
             type="button"
@@ -136,7 +170,8 @@ class DialogComponent {
             size="icon-sm"
             class="dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
             [attr.aria-label]="closeButtonLabel()"
-            (click)="close()">
+            (click)="close()"
+          >
             <span aria-hidden="true">X</span>
             <span class="sr-only">{{ closeButtonLabel() }}</span>
           </button>
@@ -144,25 +179,25 @@ class DialogComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Dialog',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonComponent],
                     template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
-        role="dialog"
+        [attr.role]="role()"
         aria-modal="true"
-        [attr.aria-labelledby]="labelledBy()"
-        [attr.aria-describedby]="describedBy()"
+        [attr.aria-labelledby]="resolvedLabelledBy()"
+        [attr.aria-describedby]="resolvedDescribedBy()"
         [class]="surfaceClasses()"
         [style.--radius-base]="radiusBase()"
-        [style.--spacing-base]="densityBase()">
+        [style.--spacing-base]="densityBase()"
+      >
         @if (showCloseButton()) {
           <button
             type="button"
@@ -171,7 +206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             size="icon-sm"
             class="dialog-close-button absolute right-4 top-4 h-8 w-8 rounded-md p-0 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
             [attr.aria-label]="closeButtonLabel()"
-            (click)="close()">
+            (click)="close()"
+          >
             <span aria-hidden="true">X</span>
             <span class="sr-only">{{ closeButtonLabel() }}</span>
           </button>
@@ -181,7 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 
 class DialogCloseDirective {
     dialog = inject(DialogComponent);
@@ -207,64 +243,84 @@ class DialogHeaderComponent {
     classes = computed(() => cn('flex flex-col gap-1.5 text-center sm:text-left', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogHeaderComponent, isStandalone: true, selector: "DialogHeader", 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: DialogHeaderComponent, isStandalone: true, selector: "DialogHeader", 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: DialogHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class DialogTitleComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = uniqueId('dialog-title');
+    dialog = inject(DialogComponent, { optional: true });
+    /** The id rendered on the element, used by the parent dialog for aria-labelledby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-lg font-semibold leading-none tracking-tight', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.dialog?.registerTitleId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.dialog?.unregisterTitleId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogTitleComponent, isStandalone: true, selector: "DialogTitle, h2[DialogTitle]", 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: DialogTitleComponent, isStandalone: true, selector: "DialogTitle, h2[DialogTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogTitle, h2[DialogTitle]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class DialogDescriptionComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    autoId = uniqueId('dialog-description');
+    dialog = inject(DialogComponent, { optional: true });
+    /** The id rendered on the element, used by the parent dialog for aria-describedby. */
+    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-sm text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.dialog?.registerDescriptionId(this.resolvedId()));
+        inject(DestroyRef).onDestroy(() => this.dialog?.unregisterDescriptionId(this.resolvedId()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogDescriptionComponent, isStandalone: true, selector: "DialogDescription, p[DialogDescription]", 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: DialogDescriptionComponent, isStandalone: true, selector: "DialogDescription, p[DialogDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogDescriptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogDescription, p[DialogDescription]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class DialogContentComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('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: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogContentComponent, isStandalone: true, selector: "DialogContent", 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: DialogContentComponent, isStandalone: true, selector: "DialogContent", 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: DialogContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]
@@ -275,13 +331,12 @@ class DialogFooterComponent {
     classes = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DialogFooterComponent, isStandalone: true, selector: "DialogFooter", 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: DialogFooterComponent, isStandalone: true, selector: "DialogFooter", 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: DialogFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'DialogFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]