pjc-fields 0.0.25 → 0.0.31

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, Injectable, InjectionToken, effect } 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';
@@ -22,6 +22,11 @@ import { InputNumberModule } from 'primeng/inputnumber';
 import { KeyValuePipe } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { merge } from 'rxjs';
+import * as i2$4 from 'primeng/autocomplete';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import * as i3$2 from 'primeng/api';
 
 class PjcFields {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -764,8 +769,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 +841,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 +868,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 +879,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 +894,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 {
@@ -1084,6 +1229,7 @@ const ESTADOS = [
     { uf: 'SE', descricao: 'Sergipe' },
     { uf: 'TO', descricao: 'Tocantins' },
 ];
+
 class PjcUfFieldComponent {
     label = input('UF', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -1693,6 +1839,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             args: [{ selector: 'pjc-erro-validacao', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyValuePipe], template: "@if (control; as ctrl) {\n  @if (ctrl.touched && ctrl.errors) {\n    @for (entry of erros() | keyvalue; track entry.key) {\n      @if (ctrl.errors[entry.key]) {\n        <small class=\"text-red-500 text-xs\">{{ entry.value }}</small>\n      }\n    }\n  }\n}\n" }]
         }], propDecorators: { controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], erros: [{ type: i0.Input, args: [{ isSignal: true, alias: "erros", required: true }] }] } });
 
+class PjcCidadeService {
+    http = inject(HttpClient);
+    API_URL = 'https://servicodados.ibge.gov.br/api/v1/localidades/estados';
+    getMunicipiosByUf(uf) {
+        return this.http
+            .get(`${this.API_URL}/${uf}/municipios`)
+            .pipe(map((data) => data
+            .map((m) => ({ id: m.id, nome: m.nome, descricao: m.descricao }))
+            .sort((a, b) => {
+            const aDisplay = a.nome || a.descricao || '';
+            const bDisplay = b.nome || b.descricao || '';
+            return aDisplay.localeCompare(bDisplay);
+        })));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcCidadeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcCidadeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcCidadeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const PJC_CIDADE_SERVICE = new InjectionToken('PjcCidadeService');
+
+class PjcCidadeFieldComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    placeholder = input('Digite o nome da cidade', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    id = input(`pjc-cidade-${Math.random().toString(36).substring(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    labelVariant = input('on', ...(ngDevMode ? [{ debugName: "labelVariant" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    uf = input('', ...(ngDevMode ? [{ debugName: "uf" }] : /* istanbul ignore next */ []));
+    service = inject(PJC_CIDADE_SERVICE, { optional: true }) ?? inject(PjcCidadeService);
+    municipios = signal([], ...(ngDevMode ? [{ debugName: "municipios" }] : /* istanbul ignore next */ []));
+    filteredMunicipios = signal([], ...(ngDevMode ? [{ debugName: "filteredMunicipios" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    value = null;
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            const uf = this.uf();
+            if (uf) {
+                this.fetchMunicipios(uf);
+            }
+            else {
+                this.municipios.set([]);
+                this.filteredMunicipios.set([]);
+            }
+        });
+    }
+    writeValue(val) {
+        if (val === null || val === undefined) {
+            this.value = null;
+        }
+        else if (typeof val === 'string') {
+            const found = this.municipios().find(m => m.nome === val || m.descricao === val);
+            this.value = found ?? { id: 0, nome: val };
+        }
+        else {
+            this.value = val;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onModelChange(value) {
+        if (typeof value === 'string') {
+            this.value = null;
+            this.onChange(null);
+        }
+        else {
+            this.value = value;
+            this.onChange(value);
+        }
+    }
+    onModelTouched() {
+        this.onTouched();
+    }
+    getMunicipioDisplay(m) {
+        return m.nome || m.descricao || '';
+    }
+    filterMunicipios(event) {
+        const query = event.query.toLowerCase();
+        this.filteredMunicipios.set(this.municipios().filter(m => this.getMunicipioDisplay(m).toLowerCase().includes(query)));
+    }
+    fetchMunicipios(uf) {
+        this.loading.set(true);
+        this.value = null;
+        this.onChange(null);
+        this.service.getMunicipiosByUf(uf).subscribe({
+            next: (data) => {
+                this.municipios.set(data);
+                this.filteredMunicipios.set(data);
+                this.loading.set(false);
+            },
+            error: () => {
+                this.municipios.set([]);
+                this.filteredMunicipios.set([]);
+                this.loading.set(false);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PjcCidadeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PjcCidadeFieldComponent, isStandalone: true, selector: "pjc-cidade-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, uf: { classPropertyName: "uf", publicName: "uf", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PjcCidadeFieldComponent),
+                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-autocomplete\n        [inputId]=\"id()\"\n        [suggestions]=\"filteredMunicipios()\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onModelTouched()\"\n        (completeMethod)=\"filterMunicipios($event)\"\n        dataKey=\"id\"\n        [forceSelection]=\"true\"\n        [disabled]=\"disabled || readonly() || !uf() || loading()\"\n        appendTo=\"body\"\n        styleClass=\"w-full\"\n        inputStyleClass=\"w-full\"\n      >\n        <ng-template pTemplate=\"item\" let-option>\n          {{ getMunicipioDisplay(option) }}\n        </ng-template>\n      </p-autocomplete>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-autocomplete\n      [inputId]=\"id()\"\n      [suggestions]=\"filteredMunicipios()\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onModelTouched()\"\n      (completeMethod)=\"filterMunicipios($event)\"\n      dataKey=\"id\"\n      [forceSelection]=\"true\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled || readonly() || !uf() || loading()\"\n      appendTo=\"body\"\n      styleClass=\"w-full\"\n      inputStyleClass=\"w-full\"\n    >\n      <ng-template pTemplate=\"item\" let-option>\n        {{ getMunicipioDisplay(option) }}\n      </ng-template>\n    </p-autocomplete>\n  }\n\n  @if (hint()) {\n    <small class=\"text-xs text-surface-500\">{{ hint() }}</small>\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: AutoCompleteModule }, { kind: "component", type: i2$4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: PjcCidadeFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pjc-cidade-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AutoCompleteModule, FloatLabelModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PjcCidadeFieldComponent),
+                            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-autocomplete\n        [inputId]=\"id()\"\n        [suggestions]=\"filteredMunicipios()\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onModelTouched()\"\n        (completeMethod)=\"filterMunicipios($event)\"\n        dataKey=\"id\"\n        [forceSelection]=\"true\"\n        [disabled]=\"disabled || readonly() || !uf() || loading()\"\n        appendTo=\"body\"\n        styleClass=\"w-full\"\n        inputStyleClass=\"w-full\"\n      >\n        <ng-template pTemplate=\"item\" let-option>\n          {{ getMunicipioDisplay(option) }}\n        </ng-template>\n      </p-autocomplete>\n      <label [for]=\"id()\">{{ label() }}</label>\n    </p-floatlabel>\n  } @else {\n    <p-autocomplete\n      [inputId]=\"id()\"\n      [suggestions]=\"filteredMunicipios()\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onModelTouched()\"\n      (completeMethod)=\"filterMunicipios($event)\"\n      dataKey=\"id\"\n      [forceSelection]=\"true\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled || readonly() || !uf() || loading()\"\n      appendTo=\"body\"\n      styleClass=\"w-full\"\n      inputStyleClass=\"w-full\"\n    >\n      <ng-template pTemplate=\"item\" let-option>\n        {{ getMunicipioDisplay(option) }}\n      </ng-template>\n    </p-autocomplete>\n  }\n\n  @if (hint()) {\n    <small class=\"text-xs text-surface-500\">{{ hint() }}</small>\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], labelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVariant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], uf: [{ type: i0.Input, args: [{ isSignal: true, alias: "uf", required: false }] }] } });
+
 /*
  * Public API Surface of pjc-fields
  */
@@ -1701,5 +1979,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 { ESTADOS, PJC_CIDADE_SERVICE, PjcCepFieldComponent, PjcChassiFieldComponent, PjcChassiInputDirective, PjcCidadeFieldComponent, PjcCidadeService, 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