@egose/shadcn-theme-ng 0.1.0 → 0.3.0

package/date-picker/fesm2022/date-picker.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, ChangeDetectionStrategy, Component, forwardRef, viewChild, contentChild, booleanAttribute, linkedSignal, signal, computed, output, ElementRef, effect, Directive, numberAttribute, untracked, NgModule } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, forwardRef, viewChild, contentChild, linkedSignal, signal, output, ElementRef, effect, Directive, numberAttribute, untracked, NgModule } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX, lucideCalendar, lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDateInput, provideBrnDatePickerTrigger, BrnDatePickerTriggerToken, provideBrnDatePicker, injectBrnDatePicker } from '@spartan-ng/brain/date-picker';
 import * as i1 from '@egose/shadcn-theme-ng/input-group';
 import { HlmInputGroup, HlmInputGroupImports } from '@egose/shadcn-theme-ng/input-group';
+import { hlm, classes } from '@egose/shadcn-theme-ng/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@spartan-ng/brain/field';
 import { provideBrnLabelable, BrnFieldControl, BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
@@ -16,7 +17,6 @@ import { HlmPopoverImports, HlmPopoverTrigger } from '@egose/shadcn-theme-ng/pop
 import { BrnOverlay } from '@spartan-ng/brain/overlay';
 import * as i1$2 from '@egose/shadcn-theme-ng/button';
 import { HlmButtonImports } from '@egose/shadcn-theme-ng/button';
-import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 function getDefaultConfig$3() {
     return {
@@ -70,6 +70,26 @@ function injectHlmDatePickerMultiConfig() {
 
 class HlmDateMultiInput extends BrnDateInput {
     _config = injectHlmDatePickerMultiConfig();
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into dates. Return `null` for invalid input - the
      * picker's dates are cleared while the text is preserved so the user can
@@ -93,16 +113,21 @@ class HlmDateMultiInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDates()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateMultiInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateMultiInput, isStandalone: true, selector: "hlm-date-multi-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateMultiInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateMultiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateMultiInput, isStandalone: true, selector: "hlm-date-multi-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateMultiInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -133,7 +158,7 @@ class HlmDateMultiInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateMultiInput, decorators: [{
             type: Component,
@@ -149,9 +174,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -184,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
 
 function getDefaultConfig$2() {
     return {
@@ -324,7 +354,7 @@ class HlmDatePicker {
         this.dateChange.emit(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmDatePicker, isStandalone: true, selector: "hlm-date-picker", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, host: { classAttribute: "block" }, providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar\n          class=\"rounded-none border-0\"\n          [captionLayout]=\"captionLayout()\"\n          [date]=\"_mutableDate()\"\n          [defaultFocusedDate]=\"_mutableDate() ?? defaultFocusedDate()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"disabledState()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendar, selector: "hlm-calendar", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmDatePicker, isStandalone: true, selector: "hlm-date-picker", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, transformDate: { classPropertyName: "transformDate", publicName: "transformDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, host: { classAttribute: "block w-full min-w-0 max-w-full" }, providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)], queries: [{ propertyName: "_trigger", first: true, predicate: BrnDatePickerTriggerToken, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.BrnFieldControl }], ngImport: i0, template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar\n          class=\"rounded-none border-0\"\n          [captionLayout]=\"captionLayout()\"\n          [date]=\"_mutableDate()\"\n          [defaultFocusedDate]=\"_mutableDate() ?? defaultFocusedDate()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"disabledState()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2.HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: i2.HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: i2.HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "component", type: HlmCalendar, selector: "hlm-calendar", inputs: ["captionLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePicker, decorators: [{
             type: Component,
@@ -334,7 +364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [BrnFieldControl],
-                    host: { class: 'block' },
+                    host: { class: "block w-full min-w-0 max-w-full" },
                     template: "\n    <hlm-popover sideOffset=\"5\" [state]=\"_popoverState()\" (stateChanged)=\"_onStateChange($event)\">\n      <ng-content />\n\n      <hlm-popover-content class=\"w-fit p-0\" *hlmPopoverPortal=\"let ctx\">\n        <ng-content select=\"[hlmDatePickerHeader]\" />\n        <hlm-calendar\n          class=\"rounded-none border-0\"\n          [captionLayout]=\"captionLayout()\"\n          [date]=\"_mutableDate()\"\n          [defaultFocusedDate]=\"_mutableDate() ?? defaultFocusedDate()\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [disabled]=\"disabledState()\"\n          (dateChange)=\"_handleChange($event)\"\n        />\n        <ng-content select=\"[hlmDatePickerFooter]\" />\n      </hlm-popover-content>\n    </hlm-popover>\n  ",
                 }]
         }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnPopover), { isSignal: true }] }], _trigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BrnDatePickerTriggerToken), { isSignal: true }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapperDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperDisabled", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], defaultFocusedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocusedDate", required: false }] }], autoCloseOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseOnSelect", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], transformDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
@@ -365,6 +395,22 @@ class HlmDatePickerInput extends BrnDateInput {
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     ariaDescribedby = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into a date value. Return `null` for invalid
      * input - the picker's date is cleared while the text is preserved so
@@ -388,18 +434,21 @@ class HlmDatePickerInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDate()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDatePickerInput, isStandalone: true, selector: "hlm-date-picker-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDatePickerInput, isStandalone: true, selector: "hlm-date-picker-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -430,7 +479,7 @@ class HlmDatePickerInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerInput, decorators: [{
             type: Component,
@@ -446,11 +495,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -483,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
 
 const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -526,10 +578,12 @@ class HlmDatePickerMulti {
     ...(ngDevMode ? [{ debugName: "transformDates" }] : /* istanbul ignore next */ []));
     _popoverState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
-    disabledState = this._disabled.asReadonly();
+    disabledState = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    _disabled = this.disabledState;
     formattedDate = computed(() => {
         const dates = this._mutableDate();
         return dates ? this.formatDates()(dates) : undefined;
@@ -590,7 +644,7 @@ class HlmDatePickerMulti {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');
@@ -708,6 +762,26 @@ function injectHlmDateRangePickerConfig() {
 
 class HlmDateRangeInput extends BrnDateInput {
     _config = injectHlmDateRangePickerConfig();
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into a date range. Return `null` for invalid
      * input - the picker's range is cleared while the text is preserved so
@@ -731,16 +805,21 @@ class HlmDateRangeInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDates()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangeInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateRangeInput, isStandalone: true, selector: "hlm-date-range-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateRangeInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateRangeInput, isStandalone: true, selector: "hlm-date-range-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateRangeInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -771,7 +850,7 @@ class HlmDateRangeInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangeInput, decorators: [{
             type: Component,
@@ -787,9 +866,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -822,7 +906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
 
 const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -865,10 +949,12 @@ class HlmDateRangePicker {
     ...(ngDevMode ? [{ debugName: "transformDates" }] : /* istanbul ignore next */ []));
     _popoverState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
-    disabledState = this._disabled.asReadonly();
+    disabledState = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    _disabled = this.disabledState;
     formattedDate = computed(() => {
         const start = this._start();
         const end = this._end();
@@ -954,7 +1040,7 @@ class HlmDateRangePicker {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');
@@ -1039,6 +1125,26 @@ function injectHlmMonthYearPickerConfig() {
 
 class HlmMonthYearInput extends BrnDateInput {
     _config = injectHlmMonthYearPickerConfig();
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into a date value. Return `null` for invalid
      * input - the picker's date is cleared while the text is preserved so
@@ -1062,16 +1168,21 @@ class HlmMonthYearInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDate()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmMonthYearInput, isStandalone: true, selector: "hlm-month-year-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmMonthYearInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmMonthYearInput, isStandalone: true, selector: "hlm-month-year-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmMonthYearInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -1102,7 +1213,7 @@ class HlmMonthYearInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearInput, decorators: [{
             type: Component,
@@ -1118,9 +1229,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -1153,7 +1269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
 
 const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -1192,10 +1308,12 @@ class HlmMonthYearPicker {
     ...(ngDevMode ? [{ debugName: "transformDate" }] : /* istanbul ignore next */ []));
     _popoverState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
-    disabledState = this._disabled.asReadonly();
+    disabledState = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    _disabled = this.disabledState;
     formattedDate = computed(() => {
         const date = this._mutableDate();
         return date ? this.formatDate()(date) : undefined;
@@ -1252,7 +1370,7 @@ class HlmMonthYearPicker {
         this._onTouched?.();
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');