mapa-library-ui 1.0.1 → 1.1.0

package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs

@@ -1,7 +1,10 @@
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, DestroyRef, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, Input, Component, DestroyRef, ChangeDetectionStrategy } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$1 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { provideNativeDateAdapter } from '@angular/material/core';
 import * as i3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -11,64 +14,8 @@ import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i2 from '@angular/forms';
-import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 
-const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
-function isValidDate(date) {
-    return !Number.isNaN(date.getTime());
-}
-function formatDateAsDayMonthYear(date) {
-    const day = `${date.getDate()}`.padStart(2, "0");
-    const month = `${date.getMonth() + 1}`.padStart(2, "0");
-    const year = `${date.getFullYear()}`;
-    return `${day}/${month}/${year}`;
-}
-function parseDateValue(value) {
-    if (value instanceof Date) {
-        return isValidDate(value) ? new Date(value.getTime()) : null;
-    }
-    if (typeof value === "number") {
-        const parsedDate = new Date(value);
-        return isValidDate(parsedDate) ? parsedDate : null;
-    }
-    if (typeof value !== "string") {
-        return null;
-    }
-    const trimmedValue = value.trim();
-    if (!trimmedValue) {
-        return null;
-    }
-    const dayMonthYearMatch = DAY_MONTH_YEAR_PATTERN.exec(trimmedValue);
-    if (dayMonthYearMatch) {
-        const [, dayValue, monthValue, yearValue] = dayMonthYearMatch;
-        const day = Number(dayValue);
-        const month = Number(monthValue);
-        const year = Number(yearValue);
-        const parsedDate = new Date(year, month - 1, day);
-        if (parsedDate.getFullYear() === year &&
-            parsedDate.getMonth() === month - 1 &&
-            parsedDate.getDate() === day) {
-            return parsedDate;
-        }
-        return null;
-    }
-    const parsedDate = new Date(trimmedValue);
-    return isValidDate(parsedDate) ? parsedDate : null;
-}
-function isDateValue(value) {
-    return parseDateValue(value) !== null;
-}
-function getRelativeDateRange(daysBack) {
-    const endDate = new Date();
-    endDate.setHours(23, 59, 59, 999);
-    const startDate = new Date();
-    startDate.setHours(0, 0, 0, 0);
-    startDate.setDate(startDate.getDate() - daysBack);
-    return { startDate, endDate };
-}
-
 const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
 const MAPA_UI_DEFAULT_TEXTS = {
     common: {
@@ -121,6 +68,10 @@ const MAPA_UI_DEFAULT_TEXTS = {
             return `Mostrando ${startIndex + 1} - ${endIndex} de ${length} ${itemLabel}`;
         },
     },
+    table: {
+        emptyTitle: "Nao foram encontrados resultados",
+        emptySubtitle: "",
+    },
     validation: {
         cnpj: "CNPJ inválido",
         cpf: "CPF inválido",
@@ -155,6 +106,10 @@ function mergeMapaUiTexts(customTexts) {
             ...MAPA_UI_DEFAULT_TEXTS.paginator,
             ...(customTexts?.paginator ?? {}),
         },
+        table: {
+            ...MAPA_UI_DEFAULT_TEXTS.table,
+            ...(customTexts?.table ?? {}),
+        },
         validation: {
             ...MAPA_UI_DEFAULT_TEXTS.validation,
             ...(customTexts?.validation ?? {}),
@@ -190,10 +145,10 @@ class MapaI18nService {
     resolveText(value, context) {
         return typeof value === "function" ? value(context) : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -205,7 +160,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     args: [MAPA_UI_TEXTS]
                 }] }] });
 
-const MY_DATE_FORMATS = {
+class ValidationMessageResolverService {
+    constructor(i18n) {
+        this.i18n = i18n;
+        this.errorOrder = [
+            "required",
+            "minlength",
+            "maxlength",
+            "cpf",
+            "cnpj",
+            "email",
+            "pattern",
+            "min",
+            "max",
+        ];
+    }
+    resolveFirstError(control, errors) {
+        const validationErrors = control?.errors;
+        if (!validationErrors) {
+            return null;
+        }
+        const firstErrorKey = this.errorOrder.find((key) => control?.hasError(key));
+        if (!firstErrorKey) {
+            return null;
+        }
+        return this.resolveErrorMessage(firstErrorKey, validationErrors, errors);
+    }
+    resolveErrorMessage(errorKey, validationErrors, errors) {
+        const errorOverrides = errors;
+        const customMessage = this.getCustomMessage(errorKey, errorOverrides);
+        if (customMessage) {
+            return customMessage;
+        }
+        const errorValue = validationErrors[errorKey];
+        switch (errorKey) {
+            case "minlength":
+                return this.i18n.resolveValidationText("minLength", errorValue);
+            case "maxlength":
+                return this.i18n.resolveValidationText("maxLength", errorValue);
+            case "min":
+                return this.i18n.resolveValidationText("min", errorValue);
+            case "max":
+                return this.i18n.resolveValidationText("max", errorValue);
+            default:
+                return this.i18n.resolveValidationText(errorKey);
+        }
+    }
+    getCustomMessage(errorKey, errors) {
+        if (!errors) {
+            return undefined;
+        }
+        switch (errorKey) {
+            case "minlength":
+                return errors.minLength ?? errors.minlength;
+            case "maxlength":
+                return errors.maxLength ?? errors.maxlength;
+            default:
+                return errors[errorKey];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ValidationMessageResolverService, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ValidationMessageResolverService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ValidationMessageResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: MapaI18nService }] });
+
+class MapaFormErrorsComponent {
+    constructor(validationMessageResolver) {
+        this.validationMessageResolver = validationMessageResolver;
+    }
+    get message() {
+        return this.validationMessageResolver.resolveFirstError(this.control, this.errors);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaFormErrorsComponent, deps: [{ token: ValidationMessageResolverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MapaFormErrorsComponent, isStandalone: true, selector: "mapa-form-errors", inputs: { control: "control", errors: "errors" }, ngImport: i0, template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaFormErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-form-errors", imports: [CommonModule, MatFormFieldModule], template: "<span *ngIf=\"message\">\n  {{ message }}\n</span>\n" }]
+        }], ctorParameters: () => [{ type: ValidationMessageResolverService }], propDecorators: { control: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }] } });
+
+const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+function isValidDate(date) {
+    return !Number.isNaN(date.getTime());
+}
+function formatDateAsDayMonthYear(date) {
+    const day = `${date.getDate()}`.padStart(2, "0");
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const year = `${date.getFullYear()}`;
+    return `${day}/${month}/${year}`;
+}
+function parseDateValue(value) {
+    if (value instanceof Date) {
+        return isValidDate(value) ? new Date(value.getTime()) : null;
+    }
+    if (typeof value === "number") {
+        const parsedDate = new Date(value);
+        return isValidDate(parsedDate) ? parsedDate : null;
+    }
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+        return null;
+    }
+    const dayMonthYearMatch = DAY_MONTH_YEAR_PATTERN.exec(trimmedValue);
+    if (dayMonthYearMatch) {
+        const [, dayValue, monthValue, yearValue] = dayMonthYearMatch;
+        const day = Number(dayValue);
+        const month = Number(monthValue);
+        const year = Number(yearValue);
+        const parsedDate = new Date(year, month - 1, day);
+        if (parsedDate.getFullYear() === year &&
+            parsedDate.getMonth() === month - 1 &&
+            parsedDate.getDate() === day) {
+            return parsedDate;
+        }
+        return null;
+    }
+    const parsedDate = new Date(trimmedValue);
+    return isValidDate(parsedDate) ? parsedDate : null;
+}
+function isDateValue(value) {
+    return parseDateValue(value) !== null;
+}
+function getRelativeDateRange(daysBack) {
+    const endDate = new Date();
+    endDate.setHours(23, 59, 59, 999);
+    const startDate = new Date();
+    startDate.setHours(0, 0, 0, 0);
+    startDate.setDate(startDate.getDate() - daysBack);
+    return { startDate, endDate };
+}
+
+const MAPA_DATEPICKER_FORMATS = {
     parse: {
         dateInput: "DD/MM/YYYY",
     },
@@ -216,68 +313,72 @@ const MY_DATE_FORMATS = {
         monthYearA11yLabel: "MMMM YYYY",
     },
 };
-class DatepickerComponent {
-    constructor(i18n, cdr) {
-        this.i18n = i18n;
+class MapaDatepicker {
+    constructor(cdr) {
         this.cdr = cdr;
         this.destroyRef = inject(DestroyRef);
-        this.defaultDaysBack = 60;
         this.formDatepicker = new FormGroup({
-            startDate: new FormControl(null),
-            endDate: new FormControl(null),
+            date: new FormControl(null),
         });
-        this.formDatepicker.valueChanges
+    }
+    ngOnInit() {
+        this.formControl = this.formGroup.get(this.element.key);
+        this.syncDatepickerControl(this.formControl.value);
+        this.formControl.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
-            this.updateExternalForm(value);
+            this.syncDatepickerControl(value);
         });
-    }
-    get texts() {
-        return this.i18n.textsSignal();
-    }
-    ngOnInit() {
-        this.syncRangeForm(this.formGroup.getRawValue());
-        this.formGroup.valueChanges
+        this.formDatepicker.controls.date.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
-            this.syncRangeForm(value);
+            this.updateExternalControl(value);
         });
     }
-    get startDatePlaceholder() {
-        return this.texts.datepicker.startDatePlaceholder;
+    get minDate() {
+        return parseDateValue(this.element.minDate);
+    }
+    get maxDate() {
+        return parseDateValue(this.element.maxDate);
     }
-    get endDatePlaceholder() {
-        return this.texts.datepicker.endDatePlaceholder;
+    hasValue() {
+        return !!this.formControl?.value;
     }
-    syncRangeForm(value) {
-        const nextRangeValue = {
-            startDate: parseDateValue(value.startDate),
-            endDate: parseDateValue(value.endDate),
-        };
-        const currentValue = this.formDatepicker.getRawValue();
-        if (this.areDatesEqual(currentValue.startDate, nextRangeValue.startDate) &&
-            this.areDatesEqual(currentValue.endDate, nextRangeValue.endDate)) {
+    cleanDatepicker() {
+        this.formDatepicker.patchValue({ date: null }, { emitEvent: false });
+        if (this.formControl.value === "") {
             return;
         }
-        this.formDatepicker.patchValue(nextRangeValue, { emitEvent: false });
+        this.formControl.patchValue("");
         this.cdr.markForCheck();
     }
-    updateExternalForm(value) {
-        if (!value.startDate || !value.endDate) {
+    syncDatepickerControl(value) {
+        const nextDate = parseDateValue(value);
+        const currentDate = this.formDatepicker.controls.date.value;
+        if (this.areDatesEqual(currentDate, nextDate)) {
             return;
         }
-        const nextValue = {
-            startDate: formatDateAsDayMonthYear(value.startDate),
-            endDate: formatDateAsDayMonthYear(value.endDate),
-        };
-        const currentValue = this.formGroup.getRawValue();
-        if (currentValue.startDate === nextValue.startDate &&
-            currentValue.endDate === nextValue.endDate) {
+        this.formDatepicker.patchValue({ date: nextDate }, { emitEvent: false });
+        this.cdr.markForCheck();
+    }
+    updateExternalControl(value) {
+        if (!value) {
+            if (this.formControl.value !== "") {
+                this.formControl.patchValue("");
+                this.cdr.markForCheck();
+            }
             return;
         }
-        this.formGroup.patchValue(nextValue);
+        const formattedDate = formatDateAsDayMonthYear(value);
+        if (this.formControl.value === formattedDate) {
+            return;
+        }
+        this.formControl.patchValue(formattedDate);
         this.cdr.markForCheck();
     }
+    closePicker(picker) {
+        picker.close();
+    }
     areDatesEqual(first, second) {
         if (first === second) {
             return true;
@@ -287,19 +388,13 @@ class DatepickerComponent {
         }
         return first.getTime() === second.getTime();
     }
-    cleanDatepicker() {
-        const defaultRange = getRelativeDateRange(this.defaultDaysBack);
-        this.formDatepicker.patchValue(defaultRange, { emitEvent: false });
-        this.updateExternalForm(defaultRange);
-        this.cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerComponent, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DatepickerComponent, isStandalone: true, selector: "mapa-datepicker", inputs: { formGroup: "formGroup" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDatepicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker", inputs: { formGroup: "formGroup", element: "element" }, providers: [
             provideNgxMask(),
-            provideNativeDateAdapter(MY_DATE_FORMATS),
-        ], ngImport: i0, template: "<section\n  class=\"mapa__datepicker\"\n  [formGroup]=\"formGroup\"\n>\n  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mapa__datepicker--start-date\">\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n  </mat-form-field>\n  <div class=\"mapa__datepicker--divider\">&ndash;</div>\n  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mapa__datepicker--end-date\">\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n    <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input\n        matStartDate\n        formControlName=\"startDate\"\n      />\n      <input\n        matEndDate\n        formControlName=\"endDate\"\n      />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa__datepicker{display:flex;align-items:center;justify-content:flex-start;border:2px solid #a7aaad;border-radius:8px;padding:10px 16px;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa__datepicker--start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa__datepicker--start-date .mat-mdc-input-element,:host ::ng-deep .mapa__datepicker--start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa__datepicker--end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa__datepicker--end-date .mat-mdc-input-element,:host ::ng-deep .mapa__datepicker--end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa__datepicker--divider{margin:0 8px}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa__datepicker .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:transparent;min-height:100%}:host ::ng-deep .mapa__datepicker .mdc-notched-outline{display:none}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mapa__datepicker .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            provideNativeDateAdapter(MAPA_DATEPICKER_FORMATS),
+        ], ngImport: i0, template: "@if (element && formGroup) {\n  <section class=\"mapa-datepicker\" [formGroup]=\"formGroup\">\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\">\n        {{ element.label }}\n      </label>\n    }\n\n    <section class=\"mapa-datepicker__field\" [formGroup]=\"formGroup\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          [formControlName]=\"element.key\"\n          [placeholder]=\"element.placeholder || element.label || ''\"\n          [mask]=\"element.mask\"\n          [readonly]=\"element.readonly\"\n        />\n        <mat-icon *ngIf=\"hasValue()\" matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker touchUi=\"true\" #picker></mat-datepicker>\n        @if (element.hint) {\n          <mat-hint>{{ element.hint }}</mat-hint>\n        }\n        <mat-error>\n          <mapa-form-errors\n            [control]=\"formControl\"\n            [errors]=\"element.errors\"\n          ></mapa-form-errors>\n        </mat-error>\n      </mat-form-field>\n    </section>\n\n    <section class=\"mapa-datepicker--hidden\">\n      <mat-form-field [formGroup]=\"formDatepicker\">\n        <input\n          matInput\n          formControlName=\"date\"\n          [min]=\"minDate\"\n          [max]=\"maxDate\"\n          [matDatepicker]=\"picker\"\n          (dateChange)=\"closePicker(picker)\"\n        />\n      </mat-form-field>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaDatepicker, decorators: [{
             type: Component,
             args: [{ selector: "mapa-datepicker", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -309,25 +404,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
+                        MapaFormErrorsComponent,
                     ], providers: [
                         provideNgxMask(),
-                        provideNativeDateAdapter(MY_DATE_FORMATS),
-                    ], standalone: true, template: "<section\n  class=\"mapa__datepicker\"\n  [formGroup]=\"formGroup\"\n>\n  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mapa__datepicker--start-date\">\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n  </mat-form-field>\n  <div class=\"mapa__datepicker--divider\">&ndash;</div>\n  <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mapa__datepicker--end-date\">\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n    <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input\n        matStartDate\n        formControlName=\"startDate\"\n      />\n      <input\n        matEndDate\n        formControlName=\"endDate\"\n      />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa__datepicker{display:flex;align-items:center;justify-content:flex-start;border:2px solid #a7aaad;border-radius:8px;padding:10px 16px;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa__datepicker--start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa__datepicker--start-date .mat-mdc-input-element,:host ::ng-deep .mapa__datepicker--start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa__datepicker--end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa__datepicker--end-date .mat-mdc-input-element,:host ::ng-deep .mapa__datepicker--end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa__datepicker--divider{margin:0 8px}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa__datepicker .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:transparent;min-height:100%}:host ::ng-deep .mapa__datepicker .mdc-notched-outline{display:none}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa__datepicker .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mapa__datepicker .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa--hidden{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
+                        provideNativeDateAdapter(MAPA_DATEPICKER_FORMATS),
+                    ], standalone: true, template: "@if (element && formGroup) {\n  <section class=\"mapa-datepicker\" [formGroup]=\"formGroup\">\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\">\n        {{ element.label }}\n      </label>\n    }\n\n    <section class=\"mapa-datepicker__field\" [formGroup]=\"formGroup\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          [formControlName]=\"element.key\"\n          [placeholder]=\"element.placeholder || element.label || ''\"\n          [mask]=\"element.mask\"\n          [readonly]=\"element.readonly\"\n        />\n        <mat-icon *ngIf=\"hasValue()\" matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker touchUi=\"true\" #picker></mat-datepicker>\n        @if (element.hint) {\n          <mat-hint>{{ element.hint }}</mat-hint>\n        }\n        <mat-error>\n          <mapa-form-errors\n            [control]=\"formControl\"\n            [errors]=\"element.errors\"\n          ></mapa-form-errors>\n        </mat-error>\n      </mat-form-field>\n    </section>\n\n    <section class=\"mapa-datepicker--hidden\">\n      <mat-form-field [formGroup]=\"formDatepicker\">\n        <input\n          matInput\n          formControlName=\"date\"\n          [min]=\"minDate\"\n          [max]=\"maxDate\"\n          [matDatepicker]=\"picker\"\n          (dateChange)=\"closePicker(picker)\"\n        />\n      </mat-form-field>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker--hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
+                type: Input
+            }], element: [{
                 type: Input
             }] } });
 
 /*
- * Public API Surface of mapa-library-ui datepicker
+ * Public API Surface of mapa-library-ui datepicker (single)
  */
 
 /*
- * Public API Surface of mapa-library-ui datepicker
+ * Public API Surface of mapa-library-ui datepicker (single)
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DatepickerComponent, MY_DATE_FORMATS };
+export { MAPA_DATEPICKER_FORMATS, MapaDatepicker };
 //# sourceMappingURL=mapa-library-ui-src-lib-components-datepicker.mjs.map