pjc-fields 0.0.24 → 0.0.29

package/fesm2022/pjc-fields.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, input, forwardRef, ChangeDetectionStrategy, inject, ElementRef, output, Directive, computed, signal, ChangeDetectorRef, DestroyRef } from '@angular/core';
+import { Component, input, forwardRef, ChangeDetectionStrategy, signal, computed, inject, ElementRef, output, Directive, ChangeDetectorRef, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer } from '@angular/forms';
 import * as i2 from 'primeng/inputmask';
@@ -764,8 +764,16 @@ class PjcDataFieldComponent {
     maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
     labelVariant = input('on', ...(ngDevMode ? [{ debugName: "labelVariant" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    mostrarAniversario = input(false, ...(ngDevMode ? [{ debugName: "mostrarAniversario" }] : /* istanbul ignore next */ []));
     value = null;
     disabled = false;
+    valueSignal = signal(null, ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
+    age = computed(() => {
+        const date = this.valueSignal();
+        if (!date)
+            return null;
+        return this.calculateAge(date);
+    }, ...(ngDevMode ? [{ debugName: "age" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     el = inject(ElementRef);
@@ -828,8 +836,18 @@ class PjcDataFieldComponent {
         this.disabled = isDisabled;
     }
     onValueChange(date) {
+        this.valueSignal.set(date);
         this.onChange(date);
     }
+    calculateAge(birthDate) {
+        const today = new Date();
+        let age = today.getFullYear() - birthDate.getFullYear();
+        const monthDiff = today.getMonth() - birthDate.getMonth();
+        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+            age--;
+        }
+        return age;
+    }
     validate(_control) {
         const value = this.value;
         if (!value)
@@ -845,7 +863,7 @@ class PjcDataFieldComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcDataFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PjcDataFieldComponent, isStandalone: true, selector: "pjc-data-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, labelVariant: { classPropertyName: "labelVariant", publicName: "labelVariant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PjcDataFieldComponent, isStandalone: true, selector: "pjc-data-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, labelVariant: { classPropertyName: "labelVariant", publicName: "labelVariant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, mostrarAniversario: { classPropertyName: "mostrarAniversario", publicName: "mostrarAniversario", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PjcDataFieldComponent),
@@ -856,7 +874,7 @@ class PjcDataFieldComponent {
                 useExisting: forwardRef(() => PjcDataFieldComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-1 w-full\">\n  @if (label()) {\n    <p-floatlabel [variant]=\"labelVariant()\" class=\"w-full\">\n      <p-datePicker\n        [inputId]=\"id()\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (onBlur)=\"onTouched()\"\n        dateFormat=\"dd/mm/yy\"\n        [showIcon]=\"true\"\n        [showClear]=\"true\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"disabled\"\n        [readonlyInput]=\"readonly()\"\n        placeholder=\"dd/mm/aaaa\"\n        appendTo=\"body\"\n        class=\"w-full\"\n        inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n      ></p-datePicker>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-datePicker\n      [inputId]=\"id()\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onBlur)=\"onTouched()\"\n      dateFormat=\"dd/mm/yy\"\n      [showIcon]=\"true\"\n      [showClear]=\"true\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      placeholder=\"dd/mm/aaaa\"\n      appendTo=\"body\"\n      class=\"w-full\"\n      inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n    ></p-datePicker>\n  }\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-1 w-full\">\n  @if (label()) {\n    <p-floatlabel [variant]=\"labelVariant()\" class=\"w-full\">\n      <p-datePicker\n        [inputId]=\"id()\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (onBlur)=\"onTouched()\"\n        dateFormat=\"dd/mm/yy\"\n        [showIcon]=\"true\"\n        [showClear]=\"true\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"disabled\"\n        [readonlyInput]=\"readonly()\"\n        placeholder=\"dd/mm/aaaa\"\n        appendTo=\"body\"\n        class=\"w-full\"\n        inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n      ></p-datePicker>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-datePicker\n      [inputId]=\"id()\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onBlur)=\"onTouched()\"\n      dateFormat=\"dd/mm/yy\"\n      [showIcon]=\"true\"\n      [showClear]=\"true\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      placeholder=\"dd/mm/aaaa\"\n      appendTo=\"body\"\n      class=\"w-full\"\n      inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n    ></p-datePicker>\n  }\n\n  @if (mostrarAniversario() && age()) {\n    <p class=\"text-xs text-surface-600\">Idade: {{ age() }} {{ age() === 1 ? 'ano' : 'anos' }}</p>\n  }\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcDataFieldComponent, decorators: [{
             type: Component,
@@ -871,7 +889,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                             useExisting: forwardRef(() => PjcDataFieldComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"flex flex-col gap-1 w-full\">\n  @if (label()) {\n    <p-floatlabel [variant]=\"labelVariant()\" class=\"w-full\">\n      <p-datePicker\n        [inputId]=\"id()\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (onBlur)=\"onTouched()\"\n        dateFormat=\"dd/mm/yy\"\n        [showIcon]=\"true\"\n        [showClear]=\"true\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"disabled\"\n        [readonlyInput]=\"readonly()\"\n        placeholder=\"dd/mm/aaaa\"\n        appendTo=\"body\"\n        class=\"w-full\"\n        inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n      ></p-datePicker>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-datePicker\n      [inputId]=\"id()\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onBlur)=\"onTouched()\"\n      dateFormat=\"dd/mm/yy\"\n      [showIcon]=\"true\"\n      [showClear]=\"true\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      placeholder=\"dd/mm/aaaa\"\n      appendTo=\"body\"\n      class=\"w-full\"\n      inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n    ></p-datePicker>\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col gap-1 w-full\">\n  @if (label()) {\n    <p-floatlabel [variant]=\"labelVariant()\" class=\"w-full\">\n      <p-datePicker\n        [inputId]=\"id()\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (onBlur)=\"onTouched()\"\n        dateFormat=\"dd/mm/yy\"\n        [showIcon]=\"true\"\n        [showClear]=\"true\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"disabled\"\n        [readonlyInput]=\"readonly()\"\n        placeholder=\"dd/mm/aaaa\"\n        appendTo=\"body\"\n        class=\"w-full\"\n        inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n      ></p-datePicker>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-datePicker\n      [inputId]=\"id()\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onBlur)=\"onTouched()\"\n      dateFormat=\"dd/mm/yy\"\n      [showIcon]=\"true\"\n      [showClear]=\"true\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      placeholder=\"dd/mm/aaaa\"\n      appendTo=\"body\"\n      class=\"w-full\"\n      inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n    ></p-datePicker>\n  }\n\n  @if (mostrarAniversario() && age()) {\n    <p class=\"text-xs text-surface-600\">Idade: {{ age() }} {{ age() === 1 ? 'ano' : 'anos' }}</p>\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], labelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVariant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mostrarAniversario: [{ type: i0.Input, args: [{ isSignal: true, alias: "mostrarAniversario", required: false }] }] } });
+
+class PjcDataHoraFieldComponent {
+    label = input('Data e Hora', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    id = input(`pjc-data-hora-${Math.random().toString(36).substring(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    labelVariant = input('on', ...(ngDevMode ? [{ debugName: "labelVariant" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    value = null;
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    el = inject(ElementRef);
+    isFormatting = false;
+    ngAfterViewInit() {
+        const input = this.el.nativeElement.querySelector('input');
+        if (input) {
+            input.addEventListener('input', this.handleDateInput);
+        }
+    }
+    ngOnDestroy() {
+        const input = this.el.nativeElement.querySelector('input');
+        if (input) {
+            input.removeEventListener('input', this.handleDateInput);
+        }
+    }
+    handleDateInput = (event) => {
+        if (this.isFormatting)
+            return;
+        const input = event.target;
+        const raw = input.value;
+        const cursor = input.selectionStart ?? raw.length;
+        const digits = raw.replace(/\D/g, '').substring(0, 12);
+        let formatted = digits;
+        if (digits.length > 2) {
+            formatted = `${digits.substring(0, 2)}/${digits.substring(2)}`;
+        }
+        if (digits.length > 4) {
+            formatted = `${digits.substring(0, 2)}/${digits.substring(2, 4)}/${digits.substring(4)}`;
+        }
+        if (digits.length > 8) {
+            formatted = `${digits.substring(0, 2)}/${digits.substring(2, 4)}/${digits.substring(4, 8)} ${digits.substring(8)}`;
+        }
+        if (digits.length > 10) {
+            formatted = `${digits.substring(0, 2)}/${digits.substring(2, 4)}/${digits.substring(4, 8)} ${digits.substring(8, 10)}:${digits.substring(10)}`;
+        }
+        if (raw === formatted)
+            return;
+        const digitsBeforeCursor = raw.substring(0, cursor).replace(/\D/g, '').length;
+        this.isFormatting = true;
+        input.value = formatted;
+        this.isFormatting = false;
+        let newCursor = 0;
+        let digitCount = 0;
+        for (let i = 0; i < formatted.length; i++) {
+            if (/\d/.test(formatted[i]))
+                digitCount++;
+            if (digitCount === digitsBeforeCursor) {
+                newCursor = i + 1;
+                break;
+            }
+        }
+        input.setSelectionRange(newCursor, newCursor);
+    };
+    writeValue(val) {
+        this.value = val ?? null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onValueChange(date) {
+        this.onChange(date);
+    }
+    validate(_control) {
+        const value = this.value;
+        if (!value)
+            return null;
+        const minDate = this.minDate();
+        if (minDate && value < minDate) {
+            return { dataMinima: { min: minDate, atual: value } };
+        }
+        const maxDate = this.maxDate();
+        if (maxDate && value > maxDate) {
+            return { dataMaxima: { max: maxDate, atual: value } };
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcDataHoraFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PjcDataHoraFieldComponent, isStandalone: true, selector: "pjc-data-hora-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, labelVariant: { classPropertyName: "labelVariant", publicName: "labelVariant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PjcDataHoraFieldComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => PjcDataHoraFieldComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-1 w-full\">\n  @if (label()) {\n    <p-floatlabel [variant]=\"labelVariant()\" class=\"w-full\">\n      <p-datePicker\n        [inputId]=\"id()\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (onBlur)=\"onTouched()\"\n        dateFormat=\"dd/mm/yy\"\n        [showTime]=\"true\"\n        [hourFormat]=\"'24'\"\n        [showIcon]=\"true\"\n        [showClear]=\"true\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"disabled\"\n        [readonlyInput]=\"readonly()\"\n        placeholder=\"dd/mm/aaaa HH:MM\"\n        appendTo=\"body\"\n        class=\"w-full\"\n        inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n      ></p-datePicker>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-datePicker\n      [inputId]=\"id()\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onBlur)=\"onTouched()\"\n      dateFormat=\"dd/mm/yy\"\n      [showTime]=\"true\"\n      [hourFormat]=\"'24'\"\n      [showIcon]=\"true\"\n      [showClear]=\"true\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"disabled\"\n      [readonlyInput]=\"readonly()\"\n      placeholder=\"dd/mm/aaaa HH:MM\"\n      appendTo=\"body\"\n      class=\"w-full\"\n      inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n    ></p-datePicker>\n  }\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcDataHoraFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pjc-data-hora-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, DatePickerModule, FloatLabelModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PjcDataHoraFieldComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => PjcDataHoraFieldComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"flex flex-col gap-1 w-full\">\n  @if (label()) {\n    <p-floatlabel [variant]=\"labelVariant()\" class=\"w-full\">\n      <p-datePicker\n        [inputId]=\"id()\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (onBlur)=\"onTouched()\"\n        dateFormat=\"dd/mm/yy\"\n        [showTime]=\"true\"\n        [hourFormat]=\"'24'\"\n        [showIcon]=\"true\"\n        [showClear]=\"true\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"disabled\"\n        [readonlyInput]=\"readonly()\"\n        placeholder=\"dd/mm/aaaa HH:MM\"\n        appendTo=\"body\"\n        class=\"w-full\"\n        inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n      ></p-datePicker>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-datePicker\n      [inputId]=\"id()\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onBlur)=\"onTouched()\"\n      dateFormat=\"dd/mm/yy\"\n      [showTime]=\"true\"\n      [hourFormat]=\"'24'\"\n      [showIcon]=\"true\"\n      [showClear]=\"true\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"disabled\"\n      [readonlyInput]=\"readonly()\"\n      placeholder=\"dd/mm/aaaa HH:MM\"\n      appendTo=\"body\"\n      class=\"w-full\"\n      inputStyleClass=\"w-full p-2 border border-surface-300 rounded-md outline-none bg-transparent focus:border-primary-500\"\n    ></p-datePicker>\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], labelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVariant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 class PjcHoraFieldComponent {
@@ -1701,5 +1841,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PjcCepFieldComponent, PjcChassiFieldComponent, PjcChassiInputDirective, PjcCnhFieldComponent, PjcCnpjFieldComponent, PjcCpfCnpjFieldComponent, PjcCpfFieldComponent, PjcDataFieldComponent, PjcEmailFieldComponent, PjcErroValidacaoComponent, PjcFields, PjcHoraFieldComponent, PjcIntegerFieldComponent, PjcMoedaFieldComponent, PjcNumeroCartaoFieldComponent, PjcPasswordFieldComponent, PjcPlacaFieldComponent, PjcRenavamFieldComponent, PjcTelefoneFieldComponent, PjcUfFieldComponent, PjcUppercaseFieldComponent, PjcValidators };
+export { PjcCepFieldComponent, PjcChassiFieldComponent, PjcChassiInputDirective, PjcCnhFieldComponent, PjcCnpjFieldComponent, PjcCpfCnpjFieldComponent, PjcCpfFieldComponent, PjcDataFieldComponent, PjcDataHoraFieldComponent, PjcEmailFieldComponent, PjcErroValidacaoComponent, PjcFields, PjcHoraFieldComponent, PjcIntegerFieldComponent, PjcMoedaFieldComponent, PjcNumeroCartaoFieldComponent, PjcPasswordFieldComponent, PjcPlacaFieldComponent, PjcRenavamFieldComponent, PjcTelefoneFieldComponent, PjcUfFieldComponent, PjcUppercaseFieldComponent, PjcValidators };
 //# sourceMappingURL=pjc-fields.mjs.map