pjc-fields 0.0.29 → 0.0.32

package/fesm2022/pjc-fields.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, input, forwardRef, ChangeDetectionStrategy, signal, computed, inject, ElementRef, output, Directive, 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 });
@@ -1224,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 */ []));
@@ -1833,6 +1839,139 @@ 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) => {
+                const normalized = data.map(m => ({ ...m, nome: m.nome || m.descricao || '' }));
+                this.municipios.set(normalized);
+                this.filteredMunicipios.set(normalized);
+                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        optionLabel=\"nome\"\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      optionLabel=\"nome\"\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        optionLabel=\"nome\"\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      optionLabel=\"nome\"\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
  */
@@ -1841,5 +1980,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, PjcDataHoraFieldComponent, 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