@osovitny/anatoly 3.19.34 → 3.19.36

package/assets/jsons/languages-readme.txt

@@ -0,0 +1,28 @@
+https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes
+https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
+
+{
+  "code": "en",      //Language Code => 639-1 or 639-2
+  "name": "English", //Country Name
+  "country": "us"    //Country Code
+}
+
+"us" //The United States of America
+"ru" //The Russian Federation
+"es" //The Kingdom of Spain
+"in" //The Republic of India
+"am" //The Republic of Armenia
+"ua" //Ukraine
+
+Recommendation:
+Use ISO 639‑1 codes (en, fr, es, ru) in most cases.
+Short → only 2 characters, compact for storage and indexing.
+Widely supported → used in BCP 47 language tags, browsers, HTTP Accept-Language, Android/iOS locales.
+Easy for users → more familiar for developers and end users.
+Good for most apps → unless you need obscure languages.
+
+When to use ISO 639‑2
+Use 3‑letter codes (eng, fra, spa) only if:
+You must support rare, historical, or constructed languages not in ISO 639‑1.
+You work with bibliographic or archival systems (libraries, research).
+You need to distinguish similar but separate dialects more precisely.

package/assets/jsons/languages.json

@@ -0,0 +1,38 @@
+[
+  {
+    "code": "en",
+    "name": "English",
+    "country": "us",
+    "standard": "639-1"
+  },
+  {
+    "code": "ru",
+    "name": "Russian",
+    "country": "ru",
+    "standard": "639-1"
+  },
+  {
+    "code": "es",
+    "name": "Spanish",
+    "country": "es",
+    "standard": "639-1"
+  },
+  {
+    "code": "hi",
+    "name": "Hindi",
+    "country": "in",
+    "standard": "639-1"
+  },
+  {
+    "code": "hy",
+    "name": "Armenian",
+    "country": "am",
+    "standard": "639-1"
+  },
+  {
+    "code": "uk",
+    "name": "Ukrainian",    
+    "country": "ua",
+    "standard": "639-1"
+  }
+]

package/fesm2022/osovitny-anatoly.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Output, Input, Inject, Pipe, provideAppInitializer, inject, NgModule, Directive, ChangeDetectionStrategy, ViewChild, ViewEncapsulation, HostListener, HostBinding } from '@angular/core';
-import { BehaviorSubject, Subject, filter, takeUntil, map as map$1, catchError, of, merge, forkJoin, timer, fromEvent, firstValueFrom } from 'rxjs';
+import { BehaviorSubject, merge, Subject, filter, takeUntil, map as map$1, catchError, of, forkJoin, timer, fromEvent, firstValueFrom } from 'rxjs';
 import { map, tap, mergeMap } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import { HttpResponse, HttpClient, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
@@ -246,7 +246,6 @@ class Stopwatch {
 
   Authors:
     Vadim Osovitny vadim.osovitny@osovitny.com
-    Anatoly Osovitny anatoly.osovitny@osovitny.com
 
   Created:
     28 Apr 2024
@@ -259,7 +258,9 @@ const AppContextStorageKeys = {
     currency: 'currency',
     //Lists
     countries: 'countries',
-    languages: 'languages'
+    languages: 'languages',
+    timezones: 'timezones',
+    usStates: 'usStates'
 };
 
 /*
@@ -333,7 +334,6 @@ class SessionStorageService extends WebStorageService {
 
   Authors:
     Vadim Osovitny vadim.osovitny@osovitny.com
-    Anatoly Osovitny anatoly.osovitny@osovitny.com
 
   Created:
     13 Nov 2017
@@ -350,14 +350,18 @@ class AppContextService extends ApiServiceBase {
         this.sessionStorage = sessionStorage;
         this.storageKeyName = 'appContext';
         this.subscription = null;
-        //Private Streams
+        //updated
         this._updated = new BehaviorSubject(null);
-        this._userUpdated = new BehaviorSubject(null);
-        //Public Streams
         this.updated$ = this._updated.asObservable();
+        //userUpdated
+        this._userUpdated = new BehaviorSubject(null);
         this.userUpdated$ = this._userUpdated.asObservable();
+        //jsonFilesLoaded
+        this._jsonFilesLoaded = new BehaviorSubject(null);
+        this.jsonFilesLoaded$ = this._jsonFilesLoaded.asObservable();
         this.baseUrl = `${ApiUrl}/appContext`;
     }
+    //fires
     fireUpdated(data) {
         if (!data) {
             return;
@@ -367,6 +371,22 @@ class AppContextService extends ApiServiceBase {
     fireUserUpdated() {
         this._userUpdated.next(null);
     }
+    fireJsonFilesLoaded() {
+        this._jsonFilesLoaded.next(null);
+    }
+    //API
+    getCountriesJsonFile() {
+        return this.getExternalJsonFile('anatoly', 'countries.json');
+    }
+    getLanguagesJsonFile() {
+        return this.getExternalJsonFile('anatoly', 'languages.json');
+    }
+    getTimezonesJsonFile() {
+        return this.getExternalJsonFile('anatoly', 'timezones.json');
+    }
+    getUSStatesJsonFile() {
+        return this.getExternalJsonFile('anatoly', 'usStates.json');
+    }
     //Session
     getCurrent4Session() {
         return this.sessionStorage.getObject(this.storageKeyName);
@@ -384,7 +404,7 @@ class AppContextService extends ApiServiceBase {
             return;
         }
         //Logging
-        let stopwatch = new Stopwatch("AppContextService: Requesting a new AppContext");
+        let stopwatch = new Stopwatch("@osovitny/anatoly. AppContextService: Requesting a new AppContext");
         stopwatch.start();
         this.subscription = this.get('getCurrentContext', null).subscribe({
             next: (data) => {
@@ -423,6 +443,46 @@ class AppContextService extends ApiServiceBase {
             this.current = context;
         }
     }
+    loadStandardJsonFiles() {
+        let countries = this.countries;
+        let languages = this.languages;
+        let timezones = this.timezones;
+        let usStates = this.usStates;
+        if (countries && languages && timezones && usStates) {
+            //VadimOS: that means NO action requried, just we have everything in place
+            return null;
+        }
+        let countries$ = this.getCountriesJsonFile().pipe(map(data => {
+            if (data) {
+                this.countries = data;
+            }
+        }));
+        let languages$ = this.getLanguagesJsonFile().pipe(map(data => {
+            if (data) {
+                this.languages = data;
+            }
+        }));
+        let timezones$ = this.getTimezonesJsonFile().pipe(map(data => {
+            if (data) {
+                this.timezones = data;
+            }
+        }));
+        let usStates$ = this.getUSStatesJsonFile().pipe(map(data => {
+            if (data) {
+                this.usStates = data;
+            }
+        }));
+        let tasks$ = merge(countries$, languages$, timezones$, usStates$);
+        //Logging
+        let stopwatch = new Stopwatch("@osovitny/anatoly. AppContextService: standard json files loaded");
+        stopwatch.start();
+        return tasks$.pipe(map(() => {
+            this.fireJsonFilesLoaded();
+            //Logging
+            stopwatch.stop();
+            stopwatch.printElapsedAsMilliseconds();
+        }));
+    }
     loadRequiredJsonFiles() {
         return null;
     }
@@ -495,6 +555,26 @@ class AppContextService extends ApiServiceBase {
     clearLanguages() {
         this.localStorage.remove(AppContextStorageKeys.languages);
     }
+    //timezones => localStorage
+    get timezones() {
+        return this.localStorage.getObject(AppContextStorageKeys.timezones);
+    }
+    set timezones(value) {
+        this.localStorage.setObject(AppContextStorageKeys.timezones, value);
+    }
+    clearTimezones() {
+        this.localStorage.remove(AppContextStorageKeys.timezones);
+    }
+    //usStates => localStorage
+    get usStates() {
+        return this.localStorage.getObject(AppContextStorageKeys.usStates);
+    }
+    set usStates(value) {
+        this.localStorage.setObject(AppContextStorageKeys.usStates, value);
+    }
+    clearUSStates() {
+        this.localStorage.remove(AppContextStorageKeys.usStates);
+    }
     static { this.ɵfac = function AppContextService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AppContextService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(LocalStorageService), i0.ɵɵinject(SessionStorageService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: AppContextService, factory: AppContextService.ɵfac }); }
 }
@@ -2665,14 +2745,12 @@ class StarterService extends ApiServiceBase {
         let context = this.appContext.current;
         if (!is.objectNullOrEmpty(context)) {
             //Logging
-            this.logger.info('StarterService.applicationStarting: got AppContext from Session Storage');
+            this.logger.info('@osovitny/anatoly. StarterService: getting AppContext from Session Storage');
             this.appContext.init(context);
             return of(context);
         }
         //Logging
-        this.logger.info('StarterService.applicationStarting: there is no AppContext in Session Storage');
-        //Logging
-        let stopwatch = new Stopwatch("StarterService.applicationStarting: getting AppContext");
+        let stopwatch = new Stopwatch("@osovitny/anatoly. StarterService: getting AppContext from API");
         stopwatch.start();
         this.baseUrl = `${ApiUrl}/appContext`;
         return this.get('applicationStarting').pipe(map(data => {
@@ -2686,14 +2764,17 @@ class StarterService extends ApiServiceBase {
         //1. Application Starting
         let applicationStarting$ = this.applicationStarting();
         //2. Load json files
-        let jsonFiles$ = this.appContext.loadRequiredJsonFiles();
+        let standardJsonFiles$ = this.appContext.loadStandardJsonFiles();
+        let requiredJsonFiles$ = this.appContext.loadRequiredJsonFiles();
         //3. Load required items, like settings
         let requiredItems$ = this.appContext.loadRequiredItems();
         //Tasks to execute
         let parallelTasks = [];
         let tasks$ = null;
-        if (jsonFiles$)
-            parallelTasks.push(jsonFiles$);
+        if (standardJsonFiles$)
+            parallelTasks.push(standardJsonFiles$);
+        if (requiredJsonFiles$)
+            parallelTasks.push(requiredJsonFiles$);
         if (requiredItems$)
             parallelTasks.push(requiredItems$);
         /*
@@ -2712,7 +2793,7 @@ class StarterService extends ApiServiceBase {
             tasks$ = applicationStarting$;
         }
         //Logging
-        let stopwatch = new Stopwatch("StarterService.ensureApplicationStarted");
+        let stopwatch = new Stopwatch("@osovitny/anatoly. StarterService: ensureApplicationStarted");
         stopwatch.start();
         return tasks$.pipe(map(() => {
             //Logging
@@ -6548,15 +6629,6 @@ class CoreApiService extends ApiServiceBase {
         this.http = http;
         this.baseUrl = `${ApiUrl}/core`;
     }
-    getTimezonesJsonFile() {
-        return this.getExternalJsonFile('anatoly', 'timezones.json');
-    }
-    getCountriesJsonFile() {
-        return this.getExternalJsonFile('anatoly', 'countries.json');
-    }
-    getUSStatesJsonFile() {
-        return this.getExternalJsonFile('anatoly', 'usStates.json');
-    }
     static { this.ɵfac = function CoreApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CoreApiService)(i0.ɵɵinject(i1.HttpClient)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CoreApiService, factory: CoreApiService.ɵfac }); }
 }
@@ -7163,18 +7235,18 @@ function CountryDropdownlist_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r0.items);
 } }
 class CountryDropdownlist extends EditComponentBase {
-    constructor(api) {
+    constructor(appContext) {
         super();
-        this.api = api;
+        this.appContext = appContext;
         this.title = 'Country';
     }
     ngOnInit() {
         this.setValues();
     }
     setValues() {
-        this.api.getCountriesJsonFile().subscribe({
-            next: (data) => {
-                this.items = data.reverse();
+        this.appContext.jsonFilesLoaded$.subscribe({
+            next: () => {
+                this.items = this.appContext.countries.reverse();
             }
         });
         if (this.isNgModelBased) {
@@ -7182,7 +7254,7 @@ class CountryDropdownlist extends EditComponentBase {
         else {
         }
     }
-    static { this.ɵfac = function CountryDropdownlist_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CountryDropdownlist)(i0.ɵɵdirectiveInject(CoreApiService)); }; }
+    static { this.ɵfac = function CountryDropdownlist_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CountryDropdownlist)(i0.ɵɵdirectiveInject(AppContextService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CountryDropdownlist, selectors: [["anatoly-country-dropdownlist"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], [3, "formGroup", 4, "ngIf"], [3, "formGroup"], [3, "text", 4, "ngIf"], [1, "form-select", 3, "formControlName"], [3, "value", 4, "ngFor", "ngForOf"], [3, "text"], [3, "value"]], template: function CountryDropdownlist_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CountryDropdownlist_div_0_Template, 1, 0, "div", 0)(1, CountryDropdownlist_div_1_Template, 4, 4, "div", 1);
         } if (rf & 2) {
@@ -7194,7 +7266,7 @@ class CountryDropdownlist extends EditComponentBase {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CountryDropdownlist, [{
         type: Component,
         args: [{ selector: 'anatoly-country-dropdownlist', standalone: false, template: "<div *ngIf='isNgModelBased'>\r\n</div>\r\n\r\n<div *ngIf='!isNgModelBased' [formGroup]='formGroup'>\r\n  <kendo-label text=\"{{ title }}\" *ngIf='isTitleVisible'></kendo-label>\r\n  <select [formControlName]='controlName' class='form-select'>\r\n    <option *ngFor='let item of items' [value]='item.code'>\r\n      {{ item.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
-    }], () => [{ type: CoreApiService }], null); })();
+    }], () => [{ type: AppContextService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CountryDropdownlist, { className: "CountryDropdownlist", filePath: "lib/ui/components/dropdownlists/country/country.dropdownlist.ts", lineNumber: 28 }); })();
 
 /*
@@ -7575,9 +7647,8 @@ function TimezoneDropdownlist_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r1.items);
 } }
 class TimezoneDropdownlist extends EditComponentBase {
-    constructor(api, appContext) {
+    constructor(appContext) {
         super();
-        this.api = api;
         this.appContext = appContext;
         this.disabled = false;
         this.title = 'Timezone';
@@ -7586,9 +7657,9 @@ class TimezoneDropdownlist extends EditComponentBase {
         this.setValues();
     }
     setValues() {
-        this.api.getTimezonesJsonFile().subscribe({
-            next: (data) => {
-                this.items = data.reverse();
+        this.appContext.jsonFilesLoaded$.subscribe({
+            next: () => {
+                this.items = this.appContext.timezones.reverse();
             }
         });
         if (this.isNgModelBased) {
@@ -7613,7 +7684,7 @@ class TimezoneDropdownlist extends EditComponentBase {
             }
         }
     }
-    static { this.ɵfac = function TimezoneDropdownlist_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimezoneDropdownlist)(i0.ɵɵdirectiveInject(CoreApiService), i0.ɵɵdirectiveInject(AppContextService)); }; }
+    static { this.ɵfac = function TimezoneDropdownlist_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimezoneDropdownlist)(i0.ɵɵdirectiveInject(AppContextService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimezoneDropdownlist, selectors: [["anatoly-timezone-dropdownlist"]], inputs: { disabled: "disabled" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], [3, "formGroup", 4, "ngIf"], [3, "formGroup"], ["class", "col-form-label", 4, "ngIf"], [1, "form-select", 3, "formControlName", "disabled"], [3, "value", 4, "ngFor", "ngForOf"], [1, "col-form-label"], [3, "value"]], template: function TimezoneDropdownlist_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, TimezoneDropdownlist_div_0_Template, 1, 0, "div", 0)(1, TimezoneDropdownlist_div_1_Template, 4, 5, "div", 1);
         } if (rf & 2) {
@@ -7625,10 +7696,10 @@ class TimezoneDropdownlist extends EditComponentBase {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimezoneDropdownlist, [{
         type: Component,
         args: [{ selector: 'anatoly-timezone-dropdownlist', standalone: false, template: "<div *ngIf='isNgModelBased'>\r\n</div>\r\n\r\n<div *ngIf='!isNgModelBased' [formGroup]='formGroup'>\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>Timezone</label>\r\n  <select [formControlName]='controlName' class='form-select' [disabled]='disabled'>\r\n    <option *ngFor='let item of items' [value]='item.code'>\r\n      ({{ item.offset }}) {{ item.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
-    }], () => [{ type: CoreApiService }, { type: AppContextService }], { disabled: [{
+    }], () => [{ type: AppContextService }], { disabled: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimezoneDropdownlist, { className: "TimezoneDropdownlist", filePath: "lib/ui/components/dropdownlists/timezone/timezone.dropdownlist.ts", lineNumber: 30 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimezoneDropdownlist, { className: "TimezoneDropdownlist", filePath: "lib/ui/components/dropdownlists/timezone/timezone.dropdownlist.ts", lineNumber: 29 }); })();
 
 /*
 <file>
@@ -9621,10 +9692,10 @@ class AddressComponent extends EditComponentBase {
             this.init();
         }
     }
-    constructor(fb, api) {
+    constructor(fb, appContext) {
         super();
         this.fb = fb;
-        this.api = api;
+        this.appContext = appContext;
         this.formGroupGenerated = false;
         this.countryData = [];
         this.usStateData = [];
@@ -9635,14 +9706,10 @@ class AddressComponent extends EditComponentBase {
         this.title = 'Address';
     }
     ngOnInit() {
-        this.api.getCountriesJsonFile().subscribe({
-            next: (data) => {
-                this.countryData = data;
-            }
-        });
-        this.api.getUSStatesJsonFile().subscribe({
-            next: (data) => {
-                this.usStateData = data;
+        this.appContext.jsonFilesLoaded$.subscribe({
+            next: () => {
+                this.countryData = this.appContext.countries.reverse();
+                this.usStateData = this.appContext.usStates;
             }
         });
         this.createFormGroup();
@@ -9702,7 +9769,7 @@ class AddressComponent extends EditComponentBase {
         let usState = event.target.value;
         this.change.emit(usState);
     }
-    static { this.ɵfac = function AddressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AddressComponent)(i0.ɵɵdirectiveInject(i2$1.FormBuilder), i0.ɵɵdirectiveInject(CoreApiService)); }; }
+    static { this.ɵfac = function AddressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AddressComponent)(i0.ɵɵdirectiveInject(i2$1.FormBuilder), i0.ɵɵdirectiveInject(AppContextService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddressComponent, selectors: [["anatoly-forms-address"]], inputs: { address: "address" }, outputs: { change: "change" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 29, consts: [["classes", "card-outline card-primary"], [3, "title", 4, "ngIf"], [3, "formGroup"], [1, "row"], [1, "form-group", 3, "ngClass"], ["type", "text", "formControlName", "address_street", "placeholder", "Street Address", 1, "form-control"], ["controlName", "address_street", "controlTitle", "Street", 3, "formGroup", "formSubmitted"], ["type", "text", "formControlName", "address_street2", "placeholder", "Apartment, suite, unit, building, floor, etc.", 1, "form-control"], ["controlName", "address_street2", "controlTitle", "Street2", 3, "formGroup", "formSubmitted"], [1, "form-group", "col-3", "mb-0", 3, "ngClass"], ["type", "text", "formControlName", "address_city", "placeholder", "City", 1, "form-control"], ["controlName", "address_city", "controlTitle", "City", 3, "formGroup", "formSubmitted"], ["class", "form-group col-3 mb-0", 3, "ngClass", 4, "ngIf"], ["type", "text", "formControlName", "address_zipcode", "placeholder", "zipcode", 1, "form-control"], ["controlName", "address_zipcode", "controlTitle", "zipcode", 3, "formGroup", "formSubmitted"], ["formControlName", "address_country", "data-placeholder", "Select a Country", 1, "form-control", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], ["controlName", "address_country", "controlTitle", "Country", 3, "formGroup", "formSubmitted"], [3, "title"], ["formControlName", "address_stateOrRegion", 1, "form-control", 3, "change"], ["controlName", "address_stateOrRegion", "controlTitle", "State", 3, "formGroup", "formSubmitted"], [3, "value"]], template: function AddressComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "anatoly-card", 0);
             i0.ɵɵtemplate(1, AddressComponent_anatoly_card_header_1_Template, 1, 1, "anatoly-card-header", 1);
@@ -9768,7 +9835,7 @@ class AddressComponent extends EditComponentBase {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddressComponent, [{
         type: Component,
         args: [{ selector: 'anatoly-forms-address', standalone: false, template: "<anatoly-card classes='card-outline card-primary'>\r\n  <anatoly-card-header *ngIf='isTitleVisible' [title]='title' />\r\n  <anatoly-card-body [formGroup]='formGroup'>\r\n    <div class=\"row\">\r\n      <div class='form-group' [ngClass]=\"{'has-error': isControlInvalid('address_street')}\" >\r\n        <label>Street Address</label>\r\n        <input type='text' class='form-control' formControlName='address_street' placeholder='Street Address'>\r\n        <anatoly-item-validation-summary controlName='address_street'\r\n                                         controlTitle='Street'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group' [ngClass]=\"{'has-error': isControlInvalid('address_street2')}\" >\r\n        <input type='text' class='form-control' formControlName='address_street2' placeholder='Apartment, suite, unit, building, floor, etc.'>\r\n        <anatoly-item-validation-summary controlName='address_street2'\r\n                                         controlTitle='Street2'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class='form-group col-3 mb-0' [ngClass]=\"{'has-error': isControlInvalid('address_city')}\">\r\n        <label>City</label>\r\n        <input type='text' class='form-control' formControlName='address_city' placeholder='City'>\r\n        <anatoly-item-validation-summary controlName='address_city'\r\n                                         controlTitle='City'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-3 mb-0' *ngIf=\"formGroup.value.address_country == 'US'\" [ngClass]=\"{'has-error': isControlInvalid('address_stateOrRegion')}\">\r\n        <label>State</label>\r\n        <select class='form-control' (change)='onUSStateChange($event)' formControlName='address_stateOrRegion'>\r\n          <option *ngFor='let state of usStateData' [value]='state.code'>{{state.name}}</option>\r\n        </select>\r\n        <anatoly-item-validation-summary controlName='address_stateOrRegion'\r\n                                         controlTitle='State'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-3 mb-0' [ngClass]=\"{'has-error': isControlInvalid('address_zipcode')}\" >\r\n        <label>Zipcode</label>\r\n        <input type='text' class='form-control' formControlName='address_zipcode' placeholder='zipcode'>\r\n        <anatoly-item-validation-summary controlName='address_zipcode'\r\n                                         controlTitle='zipcode'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-3 mb-0' [ngClass]=\"{'has-error': isControlInvalid('address_country')}\">\r\n        <label>Country</label>\r\n        <select class='form-control' (change)='onCountryChange($event)' formControlName='address_country' data-placeholder='Select a Country'>\r\n          <option *ngFor='let country of countryData' [value]='country.code'>{{country.name}}</option>\r\n        </select>\r\n        <anatoly-item-validation-summary controlName='address_country'\r\n                                         controlTitle='Country'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n    </div>\r\n  </anatoly-card-body>\r\n</anatoly-card>\r\n" }]
-    }], () => [{ type: i2$1.FormBuilder }, { type: CoreApiService }], { address: [{
+    }], () => [{ type: i2$1.FormBuilder }, { type: AppContextService }], { address: [{
             type: Input
         }], change: [{
             type: Output
@@ -10184,14 +10251,14 @@ class AnatolyDataModule {
     static { this.ɵfac = function AnatolyDataModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AnatolyDataModule)(); }; }
     static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AnatolyDataModule }); }
     static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
-            //Billing
+            //Billing Services
             CurrenciesApiService,
             CurrenciesStorageService,
             PaymentsApiService,
             PromoCodesApiService,
             SubscriptionsApiService,
             TransactionsApiService,
-            //App
+            //Services
             CoreApiService,
             EmailsApiService
         ], imports: [CommonModule] }); }
@@ -10203,14 +10270,14 @@ class AnatolyDataModule {
                     CommonModule
                 ],
                 providers: [
-                    //Billing
+                    //Billing Services
                     CurrenciesApiService,
                     CurrenciesStorageService,
                     PaymentsApiService,
                     PromoCodesApiService,
                     SubscriptionsApiService,
                     TransactionsApiService,
-                    //App
+                    //Services
                     CoreApiService,
                     EmailsApiService
                 ]