@acontplus/ng-components 2.1.0 → 2.1.2

package/fesm2022/acontplus-ng-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, ElementRef, Renderer2 } from '@angular/core';
+import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, forwardRef, ElementRef, Renderer2 } from '@angular/core';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2 from '@angular/material/button';
@@ -19,7 +19,8 @@ import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, delay, d
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { MatChipRow, MatChipGrid, MatChipInput, MatChipListbox, MatChip } from '@angular/material/chips';
-import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
+import * as i1$5 from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatHint, MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
@@ -36,12 +37,17 @@ import { switchMap, catchError as catchError$1, takeUntil as takeUntil$1, filter
 import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
-import { MatCheckbox } from '@angular/material/checkbox';
+import * as i3$2 from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1$4 from '@angular/material/menu';
 import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import * as i3$1 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
+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 { TranslocoService } from '@jsverse/transloco';
 
 /**
@@ -2276,10 +2282,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class DataGridColClassPipe {
     transform(colDef, rowData, rowChangeRecord, currentValue) {
         if (rowChangeRecord) {
-            console.log('');
+            /* empty */
         }
         if (currentValue) {
-            console.log('');
+            /* empty */
         }
         if (typeof colDef.class === 'string') {
             return colDef.class;
@@ -2319,10 +2325,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class DataGridCellActionsPipe {
     transform(btns, rowData, rowChangeRecord, currentValue) {
         if (rowChangeRecord) {
-            console.log('');
+            /* empty */
         }
         if (currentValue) {
-            console.log('');
+            /* empty */
         }
         if (typeof btns === 'function') {
             return btns(rowData);
@@ -2374,10 +2380,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class DataGridCellActionDisablePipe {
     transform(btn, rowData, rowChangeRecord, currentValue) {
         if (typeof rowChangeRecord === 'object') {
-            console.log('');
+            /* empty */
         }
         if (currentValue) {
-            console.log('');
+            /* empty */
         }
         if (typeof btn.disabled === 'boolean') {
             return btn.disabled;
@@ -2636,15 +2642,6 @@ class KeyboardNavigationService {
         }
         return '';
     }, ...(ngDevMode ? [{ debugName: "focusedElementName" }] : []));
-    constructor() {
-        // Este effect se dispara cada vez que el elemento enfocado cambia.
-        // Es útil para realizar acciones secundarias si fuera necesario.
-        effect(() => {
-            const focusedElementIndex = this.currentFocusIndex();
-            const focusedElementName = this.focusedElementName();
-            console.log(`El foco cambió al elemento: ${focusedElementName} (índice: ${focusedElementIndex})`);
-        });
-    }
     /**
      * Registra un nuevo elemento en el sistema de navegación por teclado.
      * @param element El objeto FocusableElement a registrar.
@@ -2784,7 +2781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const DATA_GRID_DEFAULT_OPTIONS = new InjectionToken('data-grid-default-options');
 class DataGrid {
@@ -3339,6 +3336,468 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+class DateRangePicker {
+    static nextId = 0;
+    dateInput;
+    // MatFormFieldControl implementation
+    stateChanges = new Subject();
+    id = `acp-date-range-picker-${DateRangePicker.nextId++}`;
+    controlType = 'acp-date-range-picker';
+    autofilled = false;
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
+    _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    get focused() {
+        return this._focused();
+    }
+    get empty() {
+        return !this._value();
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        return this._required();
+    }
+    get value() {
+        return this._value();
+    }
+    set value(val) {
+        this._value.set(val);
+        this.stateChanges.next();
+    }
+    _errorState = false;
+    get errorState() {
+        return this._errorState;
+    }
+    get userAriaDescribedBy() {
+        return undefined;
+    }
+    get placeholder() {
+        return this.placeholderText();
+    }
+    get disabled() {
+        return this.isDisabled();
+    }
+    ngControl = null;
+    // Configuration 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" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    // Icon inputs
+    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
+    dateRangeSelected = output();
+    pickerShow = output();
+    pickerHide = output();
+    pickerApply = output();
+    pickerCancel = output();
+    checkboxChange = output();
+    // Internal state
+    picker;
+    isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
+    // ControlValueAccessor implementation
+    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
+    }
+    ngOnInit() {
+        this.initializePicker();
+        this.isInitialized.set(true);
+    }
+    ngOnChanges(changes) {
+        if (changes['options'] && !changes['options'].isFirstChange()) {
+            if (this.picker) {
+                this.updateOptions();
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.picker) {
+            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();
+    }
+    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.onTouched();
+            this.dateRangeSelected.emit({ startDate, endDate, label });
+            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;
+        }
+        this.initializePicker();
+        if (currentValue) {
+            setTimeout(() => {
+                this.writeValue(currentValue);
+            }, 0);
+        }
+    }
+    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: {},
+            opens: 'center',
+            drops: 'auto',
+            locale: SPANISH_LOCALE,
+            buttonClasses: 'btn btn-sm',
+            applyButtonClasses: 'btn-success',
+            cancelButtonClasses: 'btn-danger',
+            theme: this.getTheme(),
+        };
+        // Merge user options with defaults, excluding presetTheme
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { presetTheme, ...userOptions } = opts;
+        return {
+            ...defaultOptions,
+            ...userOptions,
+            // Always use getTheme() to handle presetTheme properly
+            theme: this.getTheme(),
+        };
+    }
+    getTheme() {
+        const opts = this.options();
+        const baseTheme = opts.theme ?? DEFAULT_THEME;
+        switch (opts.presetTheme ?? 'material') {
+            case 'bootstrap':
+                return { ...BOOTSTRAP_THEME, ...baseTheme };
+            case 'material':
+                return { ...MATERIAL_THEME, ...baseTheme };
+            case 'custom':
+                return baseTheme;
+            default:
+                return { ...DEFAULT_THEME, ...baseTheme };
+        }
+    }
+    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('focus', () => {
+            this._focused.set(true);
+            this.stateChanges.next();
+        });
+        input.addEventListener('blur', () => {
+            this._focused.set(false);
+            this.onTouched();
+            this.stateChanges.next();
+        });
+    }
+    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;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.dateInput) {
+            this.dateInput.nativeElement.disabled = isDisabled;
+        }
+    }
+    show() {
+        this.picker?.show();
+    }
+    hide() {
+        this.picker?.hide();
+    }
+    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;
+        }
+        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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateRangePicker),
+                multi: true,
+            },
+            {
+                provide: MatFormFieldControl,
+                useExisting: DateRangePicker,
+            },
+        ], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <mat-form-field [appearance]="appearance()" class="full-width">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <!-- Checkbox in prefix -->
+      @if (showCheckbox() && checkboxPosition() === 'prefix') {
+        <mat-checkbox
+          matPrefix
+          [checked]="checkboxChecked()"
+          [disabled]="checkboxReadonly()"
+          [aria-label]="checkboxAriaLabel()"
+          (change)="onCheckboxToggle($event)"
+          (click)="$event.stopPropagation()"
+        ></mat-checkbox>
+      }
+
+      <input
+        #dateInput
+        matInput
+        type="text"
+        [placeholder]="placeholderText()"
+        [disabled]="isDisabled()"
+        [readonly]="inputReadonly()"
+        [id]="id"
+      />
+
+      <!-- Checkbox in suffix -->
+      @if (showCheckbox() && checkboxPosition() === 'suffix') {
+        <mat-checkbox
+          matSuffix
+          [checked]="checkboxChecked()"
+          [disabled]="checkboxReadonly()"
+          [aria-label]="checkboxAriaLabel()"
+          (change)="onCheckboxToggle($event)"
+          (click)="$event.stopPropagation()"
+        ></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>
+  `, isInline: true, styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$3.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: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateRangePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-date-range-picker', template: `
+    <mat-form-field [appearance]="appearance()" class="full-width">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <!-- Checkbox in prefix -->
+      @if (showCheckbox() && checkboxPosition() === 'prefix') {
+        <mat-checkbox
+          matPrefix
+          [checked]="checkboxChecked()"
+          [disabled]="checkboxReadonly()"
+          [aria-label]="checkboxAriaLabel()"
+          (change)="onCheckboxToggle($event)"
+          (click)="$event.stopPropagation()"
+        ></mat-checkbox>
+      }
+
+      <input
+        #dateInput
+        matInput
+        type="text"
+        [placeholder]="placeholderText()"
+        [disabled]="isDisabled()"
+        [readonly]="inputReadonly()"
+        [id]="id"
+      />
+
+      <!-- Checkbox in suffix -->
+      @if (showCheckbox() && checkboxPosition() === 'suffix') {
+        <mat-checkbox
+          matSuffix
+          [checked]="checkboxChecked()"
+          [disabled]="checkboxReadonly()"
+          [aria-label]="checkboxAriaLabel()"
+          (change)="onCheckboxToggle($event)"
+          (click)="$event.stopPropagation()"
+        ></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: [{
+                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"] }] } });
+
+// Angular component
+
 class ToUpperCase {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
@@ -3476,5 +3935,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
+export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
 //# sourceMappingURL=acontplus-ng-components.mjs.map