@ojiepermana/angular-component 22.0.44 → 22.0.46

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

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { Directive, model, input, signal, computed, forwardRef, ChangeDetectionStrategy, Component, inject, ElementRef, output, DestroyRef } from '@angular/core';
-import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
+import { Directive, model, input, signal, computed, forwardRef, Component, inject, ElementRef, output, DestroyRef } from '@angular/core';
+import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
 
 /** Base class exposed to children for context lookup. */
 class CommandContextBase {
+    /** Shared id linking the combobox input (aria-controls) to the listbox. */
+    listboxId = uniqueId('CommandList');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: CommandContextBase, isStandalone: true, ngImport: i0 });
 }
@@ -63,13 +65,12 @@ class CommandComponent extends CommandContextBase {
         this.items().forEach((item) => item._setActive(item === activeItem));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandComponent, isStandalone: true, selector: "Command", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandComponent, isStandalone: true, selector: "Command", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Command',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }],
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
@@ -99,19 +100,19 @@ class CommandInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-controls": "ctx.listboxId", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[CommandInput]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         type: 'text',
                         role: 'combobox',
                         'aria-autocomplete': 'list',
                         'aria-expanded': 'true',
+                        '[attr.aria-controls]': 'ctx.listboxId',
                         '[attr.aria-activedescendant]': 'ctx.activeDescendantId()',
                         autocomplete: 'off',
                         '[value]': 'ctx.query()',
@@ -125,22 +126,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class CommandListComponent {
+    ctx = inject(CommandContextBase);
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the listbox (required on role="listbox"). */
+    ariaLabel = input('Suggestions', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     classes = computed(() => cn('max-h-[300px] overflow-y-auto overflow-x-hidden p-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: CommandListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, 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: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()", "attr.id": "ctx.listboxId", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandList',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()', role: 'listbox' },
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'listbox',
+                        '[attr.id]': 'ctx.listboxId',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
 class CommandEmptyComponent {
     ctx = inject(CommandComponent);
     class = input('', /* @ts-ignore */
@@ -148,13 +156,12 @@ class CommandEmptyComponent {
     classes = computed(() => cn('py-6 text-center text-sm text-muted-foreground', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandEmptyComponent, isStandalone: true, selector: "CommandEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "hidden": "ctx.hasVisibleItems()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandEmptyComponent, isStandalone: true, selector: "CommandEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "hidden": "ctx.hasVisibleItems()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandEmptyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandEmpty',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[hidden]': 'ctx.hasVisibleItems()',
@@ -175,13 +182,12 @@ class CommandGroupComponent {
       <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
     }
     <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()', role: 'group' },
                     template: `
     @if (heading()) {
@@ -197,14 +203,14 @@ class CommandSeparatorComponent {
     classes = computed(() => cn('-mx-1 h-px bg-border block', 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: CommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandSeparator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()', role: 'separator' },
+                    // Decorative divider — a separator is not an allowed child of role="listbox".
+                    host: { '[class]': 'classes()', 'aria-hidden': 'true' },
                     template: '',
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
@@ -249,13 +255,12 @@ class CommandItemComponent {
         this.ctx.activateOnly(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandItemComponent, isStandalone: true, selector: "CommandItem, button[CommandItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "_select($any($event))", "mousemove": "onHover()" }, properties: { "class": "classes()", "attr.id": "itemId", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.aria-selected": "active()", "attr.data-active": "active() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandItemComponent, isStandalone: true, selector: "CommandItem, button[CommandItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "_select($any($event))", "mousemove": "onHover()" }, properties: { "class": "classes()", "attr.id": "itemId", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.aria-selected": "active()", "attr.data-active": "active() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandItem, button[CommandItem]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'itemId',
@@ -277,13 +282,12 @@ class CommandShortcutComponent {
     classes = computed(() => cn('ml-auto text-xs tracking-widest 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: CommandShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandShortcutComponent, isStandalone: true, selector: "span[CommandShortcut]", 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: CommandShortcutComponent, isStandalone: true, selector: "span[CommandShortcut]", 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: CommandShortcutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[CommandShortcut]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'classes()' },
                     template: `<ng-content />`,
                 }]

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 }] }] } });