@acontplus/ng-components 2.1.3 → 2.1.5

package/fesm2022/acontplus-ng-components.mjs

@@ -48,6 +48,7 @@ import * as i2$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { Datex, SPANISH_LOCALE, DEFAULT_THEME, MATERIAL_THEME, BOOTSTRAP_THEME } from 'datex-ui';
 export { BOOTSTRAP_THEME, DEFAULT_THEME, Datex, MATERIAL_THEME, SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME } from 'datex-ui';
+import { tzDate, format, monthStart, addDay, monthEnd, weekStart, weekEnd } from '@formkit/tempo';
 import { TranslocoService } from '@jsverse/transloco';
 
 /**
@@ -3336,14 +3337,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+/* ============================
+   HELPERS
+============================ */
+function formatDateToString(date) {
+    const dateZone = tzDate(date, 'America/Guayaquil');
+    return format({
+        date: dateZone,
+        format: 'YYYY-MM-DD hh:mm:ss A',
+        tz: 'America/Guayaquil',
+    });
+}
+/* ============================
+   COMPONENT
+============================ */
 class DateRangePicker {
+    /* ============================
+       MAT FORM FIELD
+    ============================ */
     static nextId = 0;
-    dateInput;
-    // MatFormFieldControl implementation
-    stateChanges = new Subject();
     id = `acp-date-range-picker-${DateRangePicker.nextId++}`;
     controlType = 'acp-date-range-picker';
+    stateChanges = new Subject();
     autofilled = false;
+    dateInput;
     _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
     _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : []));
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
@@ -3359,6 +3376,10 @@ class DateRangePicker {
     get required() {
         return this._required();
     }
+    _errorState = false;
+    get errorState() {
+        return this._errorState;
+    }
     get value() {
         return this._value();
     }
@@ -3366,13 +3387,6 @@ class DateRangePicker {
         this._value.set(val);
         this.stateChanges.next();
     }
-    _errorState = false;
-    get errorState() {
-        return this._errorState;
-    }
-    get userAriaDescribedBy() {
-        return undefined;
-    }
     get placeholder() {
         return this.placeholderText();
     }
@@ -3380,9 +3394,21 @@ class DateRangePicker {
         return this.isDisabled();
     }
     ngControl = null;
-    // Configuration inputs
+    setDescribedByIds(_ids) {
+        // Implementation for accessibility
+    }
+    onContainerClick() {
+        this.focus();
+    }
+    focus() {
+        this.dateInput.nativeElement.focus();
+        this._focused.set(true);
+        this.stateChanges.next();
+    }
+    /* ============================
+       INPUTS
+    ============================ */
     options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
-    // UI inputs
     placeholderText = input('Seleccionar rango de fechas', ...(ngDevMode ? [{ debugName: "placeholderText" }] : []));
     isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     inputReadonly = input(false, ...(ngDevMode ? [{ debugName: "inputReadonly" }] : []));
@@ -3390,185 +3416,107 @@ class DateRangePicker {
     hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
     errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
     appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-    // Icon inputs
+    formatOutputAsString = input(true, ...(ngDevMode ? [{ debugName: "formatOutputAsString" }] : []));
     calendarIcon = input('date_range', ...(ngDevMode ? [{ debugName: "calendarIcon" }] : []));
     showCalendarButton = input(false, ...(ngDevMode ? [{ debugName: "showCalendarButton" }] : []));
-    // Checkbox functionality
     showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
     checkboxChecked = input(false, ...(ngDevMode ? [{ debugName: "checkboxChecked" }] : []));
     checkboxReadonly = input(false, ...(ngDevMode ? [{ debugName: "checkboxReadonly" }] : []));
     checkboxAriaLabel = input('Toggle selection', ...(ngDevMode ? [{ debugName: "checkboxAriaLabel" }] : []));
     checkboxPosition = input('suffix', ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : []));
-    // Events
+    /* ============================
+       OUTPUTS
+    ============================ */
     dateRangeSelected = output();
     pickerShow = output();
     pickerHide = output();
     pickerApply = output();
     pickerCancel = output();
     checkboxChange = output();
-    // Internal state
+    /* ============================
+       INTERNAL
+    ============================ */
     picker;
-    isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
-    // ControlValueAccessor implementation
+    currentDate = new Date();
     onChange = (_value) => {
         // This will be replaced by registerOnChange
     };
     onTouched = () => {
         // This will be replaced by registerOnTouched
     };
-    constructor() {
-        // No effect here to avoid infinite loops - using ngOnChanges instead
-    }
+    /* ============================
+       LIFECYCLE
+    ============================ */
     ngOnInit() {
         this.initializePicker();
-        this.isInitialized.set(true);
     }
     ngOnChanges(changes) {
-        if (changes['options'] && !changes['options'].isFirstChange()) {
-            if (this.picker) {
-                this.updateOptions();
-            }
+        if (changes['options'] && this.picker) {
+            this.reinitializePicker();
         }
     }
     ngOnDestroy() {
-        if (this.picker) {
-            this.picker.remove();
-        }
+        this.picker?.remove();
         this.stateChanges.complete();
     }
-    setDescribedByIds(_ids) {
-        // Implementation for accessibility
-    }
-    onContainerClick(_event) {
-        if (!this.focused) {
-            this.focus();
-        }
-    }
-    focus() {
-        this.dateInput.nativeElement.focus();
-        this._focused.set(true);
-        this.stateChanges.next();
-    }
-    blur() {
-        this._focused.set(false);
-        this.onTouched();
-        this.stateChanges.next();
+    /* ============================
+       DATE LOGIC
+    ============================ */
+    mapDate(date) {
+        return this.formatOutputAsString()
+            ? formatDateToString(date)
+            : date;
     }
     initializePicker() {
-        const options = this.buildDatexOptions();
-        this.picker = new Datex(this.dateInput.nativeElement, options, (startDate, endDate, label) => {
-            const opts = this.options();
-            const value = opts.singleDatePicker ? startDate : { startDate, endDate };
-            this._value.set(value);
-            this.onChange(value);
+        this.picker = new Datex(this.dateInput.nativeElement, this.buildDatexOptions(), (start, end, label) => {
+            const range = {
+                from: this.mapDate(start),
+                to: this.mapDate(end),
+                label,
+            };
+            this._value.set(range);
+            this.onChange(range);
             this.onTouched();
-            this.dateRangeSelected.emit({ startDate, endDate, label });
+            this.dateRangeSelected.emit(range);
             this.stateChanges.next();
         });
         this.setupEventListeners();
     }
-    updateOptions() {
-        if (!this.picker)
-            return;
-        // Try to use native updateOptions if available
-        if (typeof this.picker.updateOptions === 'function') {
-            const newOptions = this.buildDatexOptions();
-            this.picker.updateOptions(newOptions);
-        }
-        else {
-            // Fallback to reinitialize if updateOptions is not available
-            this.reinitializePicker();
-        }
-    }
     reinitializePicker() {
-        if (!this.isInitialized())
-            return;
-        const currentValue = this._value();
-        if (this.picker) {
-            this.picker.remove();
-            this.picker = undefined;
-        }
+        const value = this._value();
+        this.picker?.remove();
         this.initializePicker();
-        if (currentValue) {
-            setTimeout(() => {
-                this.writeValue(currentValue);
-            }, 0);
+        if (value) {
+            this.writeValue(value);
         }
     }
     buildDatexOptions() {
         const opts = this.options();
-        const today = new Date();
-        const defaultOptions = {
-            startDate: today,
-            endDate: today,
-            autoApply: false,
-            singleDatePicker: false,
-            showDropdowns: true,
-            linkedCalendars: true,
-            autoUpdateInput: true,
-            alwaysShowCalendars: false,
-            showCustomRangeLabel: true,
-            timePicker: false,
-            timePicker24Hour: true,
-            timePickerIncrement: 1,
-            timePickerSeconds: false,
-            ranges: this.getDefaultRanges(),
-            opens: 'center',
-            drops: 'auto',
+        const userOptions = { ...opts };
+        delete userOptions.presetTheme;
+        return {
+            startDate: this.currentDate,
+            endDate: this.currentDate,
             locale: SPANISH_LOCALE,
-            buttonClasses: 'btn btn-sm',
-            applyButtonClasses: 'btn-success',
-            cancelButtonClasses: 'btn-danger',
+            ranges: this.getDefaultRanges(),
             theme: this.getTheme(),
-        };
-        // Merge user options with defaults, excluding presetTheme
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { presetTheme, ...userOptions } = opts;
-        // Merge ranges: user ranges override defaults
-        const mergedRanges = {
-            ...defaultOptions.ranges,
-            ...(userOptions.ranges || {}),
-        };
-        return {
-            ...defaultOptions,
             ...userOptions,
-            ranges: mergedRanges,
-            // Always use getTheme() to handle presetTheme properly
-            theme: this.getTheme(),
         };
     }
     getDefaultRanges() {
-        const today = new Date();
-        const yesterday = new Date(today);
-        yesterday.setDate(today.getDate() - 1);
-        const last5Days = new Date(today);
-        last5Days.setDate(today.getDate() - 4);
-        const last10Days = new Date(today);
-        last10Days.setDate(today.getDate() - 9);
-        const last15Days = new Date(today);
-        last15Days.setDate(today.getDate() - 14);
-        const last30Days = new Date(today);
-        last30Days.setDate(today.getDate() - 29);
-        // Esta semana (lunes a domingo)
-        const startOfWeek = new Date(today);
-        const dayOfWeek = today.getDay();
-        const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Domingo = 0, necesitamos ir 6 días atrás
-        startOfWeek.setDate(today.getDate() - daysToMonday);
-        // Este mes
-        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-        // El mes pasado
-        const startOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-        const endOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
         return {
-            Hoy: [today, today],
-            Ayer: [yesterday, yesterday],
-            'Últimos 5 días': [last5Days, today],
-            'Últimos 10 días': [last10Days, today],
-            'Últimos 15 días': [last15Days, today],
-            'Últimos 30 días': [last30Days, today],
-            'Esta semana': [startOfWeek, today],
-            'Este mes': [startOfMonth, today],
-            'El mes pasado': [startOfLastMonth, endOfLastMonth],
+            Hoy: [this.currentDate, this.currentDate],
+            Ayer: [addDay(this.currentDate, -1), addDay(this.currentDate, -1)],
+            'Últimos 5 días': [addDay(this.currentDate, -4), this.currentDate],
+            'Últimos 10 días': [addDay(this.currentDate, -9), this.currentDate],
+            'Últimos 15 días': [addDay(this.currentDate, -14), this.currentDate],
+            'Últimos 30 días': [addDay(this.currentDate, -29), this.currentDate],
+            'Esta semana': [weekStart(this.currentDate), weekEnd(this.currentDate)],
+            'Este mes': [monthStart(this.currentDate), monthEnd(this.currentDate)],
+            'El mes pasado': [
+                monthStart(addDay(monthStart(this.currentDate), -1)),
+                addDay(monthStart(this.currentDate), -1),
+            ],
         };
     }
     getTheme() {
@@ -3586,21 +3534,11 @@ class DateRangePicker {
         }
     }
     setupEventListeners() {
-        if (!this.picker)
-            return;
         const input = this.dateInput.nativeElement;
-        input.addEventListener('show.daterangepicker', () => {
-            this.pickerShow.emit();
-        });
-        input.addEventListener('hide.daterangepicker', () => {
-            this.pickerHide.emit();
-        });
-        input.addEventListener('apply.daterangepicker', () => {
-            this.pickerApply.emit();
-        });
-        input.addEventListener('cancel.daterangepicker', () => {
-            this.pickerCancel.emit();
-        });
+        input.addEventListener('show.daterangepicker', () => this.pickerShow.emit());
+        input.addEventListener('hide.daterangepicker', () => this.pickerHide.emit());
+        input.addEventListener('apply.daterangepicker', () => this.pickerApply.emit());
+        input.addEventListener('cancel.daterangepicker', () => this.pickerCancel.emit());
         input.addEventListener('focus', () => {
             this._focused.set(true);
             this.stateChanges.next();
@@ -3611,23 +3549,11 @@ class DateRangePicker {
             this.stateChanges.next();
         });
     }
+    /* ============================
+       CVA
+    ============================ */
     writeValue(value) {
         this._value.set(value);
-        if (!this.picker)
-            return;
-        if (value) {
-            const opts = this.options();
-            if (opts.singleDatePicker) {
-                const date = value instanceof Date ? value : new Date(value);
-                this.picker.setStartDate(date);
-                this.picker.setEndDate(date);
-            }
-            else if (value.startDate && value.endDate) {
-                this.picker.setStartDate(new Date(value.startDate));
-                this.picker.setEndDate(new Date(value.endDate));
-            }
-        }
-        this.stateChanges.next();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3636,10 +3562,11 @@ class DateRangePicker {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        if (this.dateInput) {
-            this.dateInput.nativeElement.disabled = isDisabled;
-        }
+        this.dateInput.nativeElement.disabled = isDisabled;
     }
+    /* ============================
+       UI API
+    ============================ */
     show() {
         this.picker?.show();
     }
@@ -3649,41 +3576,13 @@ class DateRangePicker {
     toggle() {
         this.picker?.toggle();
     }
-    getStartDate() {
-        return this.picker?.getStartDate() || null;
-    }
-    getEndDate() {
-        return this.picker?.getEndDate() || null;
-    }
-    setStartDate(date) {
-        this.picker?.setStartDate(date);
-    }
-    setEndDate(date) {
-        this.picker?.setEndDate(date);
-    }
-    updateTheme(theme) {
-        this.picker?.setTheme({ ...this.getTheme(), ...theme });
-    }
-    updateRanges(ranges) {
-        if (this.picker && 'updateRanges' in this.picker) {
-            this.picker.updateRanges(ranges);
-        }
-    }
-    updateConfiguration() {
-        this.reinitializePicker();
-    }
-    forceReinitialize() {
-        this.reinitializePicker();
-    }
     onCheckboxToggle(event) {
-        if (this.checkboxReadonly()) {
-            return;
+        if (!this.checkboxReadonly()) {
+            this.checkboxChange.emit(event.checked);
         }
-        const newValue = event.checked;
-        this.checkboxChange.emit(newValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DateRangePicker, isStandalone: true, selector: "acp-date-range-picker", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, inputReadonly: { classPropertyName: "inputReadonly", publicName: "inputReadonly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, calendarIcon: { classPropertyName: "calendarIcon", publicName: "calendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showCalendarButton: { classPropertyName: "showCalendarButton", publicName: "showCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxChecked: { classPropertyName: "checkboxChecked", publicName: "checkboxChecked", isSignal: true, isRequired: false, transformFunction: null }, checkboxReadonly: { classPropertyName: "checkboxReadonly", publicName: "checkboxReadonly", isSignal: true, isRequired: false, transformFunction: null }, checkboxAriaLabel: { classPropertyName: "checkboxAriaLabel", publicName: "checkboxAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRangeSelected: "dateRangeSelected", pickerShow: "pickerShow", pickerHide: "pickerHide", pickerApply: "pickerApply", pickerCancel: "pickerCancel", checkboxChange: "checkboxChange" }, host: { properties: { "class.floating": "shouldLabelFloat", "id": "id" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DateRangePicker, isStandalone: true, selector: "acp-date-range-picker", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, inputReadonly: { classPropertyName: "inputReadonly", publicName: "inputReadonly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, formatOutputAsString: { classPropertyName: "formatOutputAsString", publicName: "formatOutputAsString", isSignal: true, isRequired: false, transformFunction: null }, calendarIcon: { classPropertyName: "calendarIcon", publicName: "calendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showCalendarButton: { classPropertyName: "showCalendarButton", publicName: "showCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxChecked: { classPropertyName: "checkboxChecked", publicName: "checkboxChecked", isSignal: true, isRequired: false, transformFunction: null }, checkboxReadonly: { classPropertyName: "checkboxReadonly", publicName: "checkboxReadonly", isSignal: true, isRequired: false, transformFunction: null }, checkboxAriaLabel: { classPropertyName: "checkboxAriaLabel", publicName: "checkboxAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateRangeSelected: "dateRangeSelected", pickerShow: "pickerShow", pickerHide: "pickerHide", pickerApply: "pickerApply", pickerCancel: "pickerCancel", checkboxChange: "checkboxChange" }, host: { properties: { "class.floating": "shouldLabelFloat", "id": "id" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePicker),
@@ -3699,7 +3598,7 @@ class DateRangePicker {
         <mat-label>{{ label() }}</mat-label>
       }
 
-      <!-- Checkbox in prefix -->
+      <!-- Checkbox prefix -->
       @if (showCheckbox() && checkboxPosition() === 'prefix') {
         <mat-checkbox
           matPrefix
@@ -3718,10 +3617,9 @@ class DateRangePicker {
         [placeholder]="placeholderText()"
         [disabled]="isDisabled()"
         [readonly]="inputReadonly()"
-        [id]="id"
       />
 
-      <!-- Checkbox in suffix -->
+      <!-- Checkbox suffix -->
       @if (showCheckbox() && checkboxPosition() === 'suffix') {
         <mat-checkbox
           matSuffix
@@ -3733,22 +3631,10 @@ class DateRangePicker {
         ></mat-checkbox>
       }
 
-      <!-- Calendar icon button -->
-      <!-- @if (showCalendarButton()) {
-        <button
-          mat-icon-button
-          matSuffix
-          type="button"
-          (click)="toggle()"
-          [attr.aria-label]="'Abrir selector de fechas'"
-        >
-          <mat-icon>{{ calendarIcon() }}</mat-icon>
-        </button>
-      } -->
-
       @if (hint()) {
         <mat-hint>{{ hint() }}</mat-hint>
       }
+
       @if (errorState && errorMessage()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
@@ -3757,13 +3643,26 @@ class DateRangePicker {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'acp-date-range-picker', template: `
+            args: [{ selector: 'acp-date-range-picker', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatCheckboxModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateRangePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: DateRangePicker,
+                        },
+                    ], host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, template: `
     <mat-form-field [appearance]="appearance()" class="full-width">
       @if (label()) {
         <mat-label>{{ label() }}</mat-label>
       }
 
-      <!-- Checkbox in prefix -->
+      <!-- Checkbox prefix -->
       @if (showCheckbox() && checkboxPosition() === 'prefix') {
         <mat-checkbox
           matPrefix
@@ -3782,10 +3681,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         [placeholder]="placeholderText()"
         [disabled]="isDisabled()"
         [readonly]="inputReadonly()"
-        [id]="id"
       />
 
-      <!-- Checkbox in suffix -->
+      <!-- Checkbox suffix -->
       @if (showCheckbox() && checkboxPosition() === 'suffix') {
         <mat-checkbox
           matSuffix
@@ -3797,44 +3695,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         ></mat-checkbox>
       }
 
-      <!-- Calendar icon button -->
-      <!-- @if (showCalendarButton()) {
-        <button
-          mat-icon-button
-          matSuffix
-          type="button"
-          (click)="toggle()"
-          [attr.aria-label]="'Abrir selector de fechas'"
-        >
-          <mat-icon>{{ calendarIcon() }}</mat-icon>
-        </button>
-      } -->
-
       @if (hint()) {
         <mat-hint>{{ hint() }}</mat-hint>
       }
+
       @if (errorState && errorMessage()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
     </mat-form-field>
-  `, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DateRangePicker),
-                            multi: true,
-                        },
-                        {
-                            provide: MatFormFieldControl,
-                            useExisting: DateRangePicker,
-                        },
-                    ], imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatCheckboxModule], host: {
-                        '[class.floating]': 'shouldLabelFloat',
-                        '[id]': 'id',
-                    }, styles: [".full-width{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dateInput: [{
+  `, styles: [".full-width{width:100%}\n"] }]
+        }], propDecorators: { dateInput: [{
                 type: ViewChild,
                 args: ['dateInput', { static: true }]
-            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], inputReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputReadonly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], calendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIcon", required: false }] }], showCalendarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarButton", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], checkboxChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxChecked", required: false }] }], checkboxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxReadonly", required: false }] }], checkboxAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxAriaLabel", required: false }] }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }], pickerShow: [{ type: i0.Output, args: ["pickerShow"] }], pickerHide: [{ type: i0.Output, args: ["pickerHide"] }], pickerApply: [{ type: i0.Output, args: ["pickerApply"] }], pickerCancel: [{ type: i0.Output, args: ["pickerCancel"] }], checkboxChange: [{ type: i0.Output, args: ["checkboxChange"] }] } });
+            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], inputReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputReadonly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], formatOutputAsString: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOutputAsString", required: false }] }], calendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIcon", required: false }] }], showCalendarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarButton", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], checkboxChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxChecked", required: false }] }], checkboxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxReadonly", required: false }] }], checkboxAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxAriaLabel", required: false }] }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }], pickerShow: [{ type: i0.Output, args: ["pickerShow"] }], pickerHide: [{ type: i0.Output, args: ["pickerHide"] }], pickerApply: [{ type: i0.Output, args: ["pickerApply"] }], pickerCancel: [{ type: i0.Output, args: ["pickerCancel"] }], checkboxChange: [{ type: i0.Output, args: ["checkboxChange"] }] } });
 
 // Angular component