novo-elements 13.7.0 → 13.7.1

package/elements/form/index.d.ts

@@ -1004,6 +1004,7 @@ interface AddressLookupResult {
     address2?: string;
     city?: string;
     state?: string;
+    stateName?: string;
     zip?: string;
     countryName?: string;
     countryCode?: string;
@@ -1093,9 +1094,10 @@ declare class NovoAddressElement implements ControlValueAccessor, OnInit, DoChec
         address_components?: any[];
         formatted_address?: string;
     }): void;
+    private resolveStateValue;
     private parseGooglePlaceDetail;
     setStateLabel(model: any): void;
-    updateStates(): void;
+    updateStates(): Promise<any[]>;
     getStateOptions(filter: string, countryID: number): string[];
     updateControl(): void;
     writeValue(model: any): void;
@@ -1304,7 +1306,7 @@ declare class ControlPromptModal {
     static ɵcmp: i0.ɵɵComponentDeclaration<ControlPromptModal, "control-prompt-modal", never, {}, {}, never, never, false, never>;
 }
 
-declare class NovoFormElement implements AfterContentInit, OnInit {
+declare class NovoFormElement implements AfterContentInit, OnChanges, OnInit {
     private templates;
     form: NovoFormGroup;
     layout: string;
@@ -1318,6 +1320,7 @@ declare class NovoFormElement implements AfterContentInit, OnInit {
     get value(): any;
     get isValid(): boolean;
     ngOnInit(): void;
+    ngOnChanges(changes?: SimpleChanges): void;
     ngAfterContentInit(): void;
     showAllFields(): void;
     showOnlyRequired(hideRequiredWithValue: any): void;

package/fesm2022/novo-elements-elements-form.mjs

@@ -3971,9 +3971,6 @@ class NovoAddressElement {
         if (result.city !== undefined) {
             this.model.city = result.city;
         }
-        if (result.state !== undefined) {
-            this.model.state = result.state;
-        }
         if (result.zip !== undefined) {
             this.model.zip = result.zip;
         }
@@ -3984,11 +3981,32 @@ class NovoAddressElement {
                 this.model.countryName = country.name;
             }
         }
-        this.updateStates();
-        this.updateControl();
-        this.fieldList.forEach((field) => this.onInput(null, field));
         this.debouncedSearch = '';
         this.overlay?.closePanel();
+        // State values differ by picker (name, code or id), so resolve against the loaded options before emitting.
+        this.updateStates()
+            .catch(() => [])
+            .then((stateOptions) => {
+            if (result.state !== undefined || result.stateName !== undefined) {
+                this.model.state = this.resolveStateValue(stateOptions, result);
+            }
+            this.updateControl();
+            this.fieldList.forEach((field) => this.onInput(null, field));
+        });
+    }
+    // Store what a manual pick of the same state would store (option[pickerConfig.field]).
+    resolveStateValue(stateOptions, { state, stateName }) {
+        const name = stateName?.trim().toLowerCase();
+        const code = state?.trim().toLowerCase();
+        const match = stateOptions.find((option) => {
+            const label = String(option?.label ?? option).toLowerCase();
+            const value = String(option?.value ?? option).toLowerCase();
+            return label === name || value === code;
+        });
+        if (match === undefined) {
+            return stateName || state;
+        }
+        return typeof match === 'string' ? match : match[this.config.state.pickerConfig.field ?? 'value'];
     }
     // Map a raw Google detail to flat fields; omitted components resolve to '' so partial selections clear finer fields.
     parseGooglePlaceDetail(place) {
@@ -4005,7 +4023,8 @@ class NovoAddressElement {
             address1: street,
             address2: find('subpremise'),
             city: find('locality') || find('postal_town') || find('sublocality') || find('sublocality_level_1'),
-            state: find('administrative_area_level_1'),
+            state: find('administrative_area_level_1', true),
+            stateName: find('administrative_area_level_1'),
             zip: find('postal_code'),
             countryName: find('country'),
             countryCode: find('country', true),
@@ -4033,7 +4052,7 @@ class NovoAddressElement {
             this.config.state.pickerConfig.options = (query = '') => {
                 return this.stateOptions(query, this.model.countryID);
             };
-            this.stateOptions('', this.model.countryID).then((results) => {
+            return this.stateOptions('', this.model.countryID).then((results) => {
                 this.config.state.pickerConfig.defaultOptions = results;
                 if (results.length) {
                     this.tooltip.state = undefined;
@@ -4049,6 +4068,7 @@ class NovoAddressElement {
                 }
                 this.validityChange.emit();
                 this.onInput(null, 'state');
+                return results;
             });
         }
         else {
@@ -4058,6 +4078,7 @@ class NovoAddressElement {
             if (this.config.state.required) {
                 this.valid.state = false;
             }
+            return Promise.resolve([]);
         }
     }
     getStateOptions(filter = '', countryID) {
@@ -6789,7 +6810,12 @@ class NovoFormElement {
         return this.form.valid;
     }
     ngOnInit() {
-        this.form.layout = this.layout;
+        this.ngOnChanges();
+    }
+    ngOnChanges(changes) {
+        if (this.form) {
+            this.form.layout = this.layout;
+        }
     }
     ngAfterContentInit() {
         if (this.customTemplates && this.customTemplates.length) {
@@ -6834,7 +6860,7 @@ class NovoFormElement {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoFormElement, deps: [{ token: i1.NovoTemplateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: NovoFormElement, isStandalone: false, selector: "novo-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: false, isRequired: false, transformFunction: null }, hasCardSections: { classPropertyName: "hasCardSections", publicName: "hasCardSections", isSignal: true, isRequired: false, transformFunction: null } }, providers: [NovoTemplateService], queries: [{ propertyName: "customTemplates", predicate: NovoTemplate }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: NovoFormElement, isStandalone: false, selector: "novo-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: false, isRequired: false, transformFunction: null }, hasCardSections: { classPropertyName: "hasCardSections", publicName: "hasCardSections", isSignal: true, isRequired: false, transformFunction: null } }, providers: [NovoTemplateService], queries: [{ propertyName: "customTemplates", predicate: NovoTemplate }], usesOnChanges: true, ngImport: i0, template: `
     <novo-control-templates></novo-control-templates>
     <div class="novo-form-container" [class.card-section]="effectiveCardSections()">
       <header *ngIf="!hideHeader">