http-request-manager 18.15.32 → 18.15.34

package/src/lib/http-request-services-demo/http-request-services-demo.component.ts

@@ -0,0 +1,53 @@
+import { Component, Inject, Input, OnInit } from '@angular/core';
+
+import { CONFIG_SETTINGS_TOKEN } from '../models/config-token.model';
+import { ConfigOptions } from '../models/config-options.model';
+import { UserData } from './request-manager-ws-demo/models/user-data.model';
+
+@Component({
+    selector: 'app-http-request-services-demo',
+    templateUrl: './http-request-services-demo.component.html',
+    styleUrls: ['./http-request-services-demo.component.scss'],
+    standalone: false
+})
+export class HttpRequestServicesDemoComponent implements OnInit {
+
+  @Input() wsServer = 'ws:'
+  @Input() jwtToken = ''
+  @Input() server = 'http:'
+  @Input() user?: UserData
+  @Input() path: string[] = ['ai','tests'];
+
+  @Input() adapter?: Function
+  @Input() mapper?: Function
+
+  requestTypes = [
+    { name: "Http Service", value: 'http_service' },
+    // { name: "Http Signals Service", value: 'http_signals_service', new: true },
+    { name: "Http State Service", value: 'http_state_service' },
+    { name: "Http State Service - Websockets", value: 'http_state_service_ws', new: false },
+    { name: "File Upload Demo", value: 'file_upload_demo', new: true, divider: true },
+    { name: "Database Service", value: 'database_service', divider: true, disabled: false },
+    { name: "Local Storage Service", value: 'local_storage_service' },
+    // { name: "Local Signals Storage Service", value: 'local_storage_signals_service', new: true },
+    { name: "Store State Manager Service", value: 'store_state_manager', new: true },
+    { name: "Basic Http Service", value: 'basic_http_service', divider: true },
+  ]
+
+  selectedService = this.requestTypes[1].value //menu selection default
+
+  injectionOptions?: ConfigOptions
+
+  constructor(
+    @Inject(CONFIG_SETTINGS_TOKEN) private configOptions?: ConfigOptions
+  ) { }
+
+  ngOnInit() { 
+    if(this.configOptions) this.injectionOptions = this.configOptions
+  }
+
+  onSelected(type: number) {
+    this.selectedService = this.requestTypes[type].value
+  }
+
+}

package/src/lib/http-request-services-demo/local-storage-demo/local-storage-demo.component.html

@@ -0,0 +1,195 @@
+<div style="margin: 2rem;">
+
+  <div style="display: flex; gap: 1rem">
+    <h2 style="padding-top: .5rem; display: flex;">
+      <div style="padding-top: .5rem;">Local Storage Manager</div>
+      <div>
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>info</mat-icon>
+        </button>
+      </div>
+    </h2>
+    <span style="flex:1"></span>
+    <div style="padding-top: .25rem;">
+      <mat-button-toggle-group name="storage" [formControl]="typeControl" (change)="onCancel()">
+        <mat-button-toggle value="0">Local Storage</mat-button-toggle>
+        <mat-button-toggle value="1">Session Storage</mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+    <div style="margin-top: .25rem;">
+      <button mat-icon-button (click)="onCreate()">
+        <mat-icon>add</mat-icon>
+      </button>
+    </div>
+  </div>
+
+  <ng-container *ngIf="storeProps?.storageName || storeProps?.storageSettingsName">
+    <div style="display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;"
+    >
+      <div style="display: flex;">
+        <div *ngIf="storeProps?.storageSettingsName" style="flex:1">
+          Database: <b>{{ storeProps?.storageSettingsName }}</b>
+        </div>
+        <div *ngIf="storeProps?.storageName" style="flex:1">
+          Data: <b>{{ storeProps?.storageName }}</b>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div style="margin-top: 2rem;" [formGroup]="newStoreForm" *ngIf="create; else LIST">
+
+    <h2>Create Store</h2>
+
+    <div style="display: flex; gap: 1rem;">
+      <div style="flex:1">
+        <mat-form-field appearance="outline">
+          <mat-label>Store Name</mat-label>
+          <input matInput placeholder="sample" formControlName="name">
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field appearance="outline">
+          <mat-label>Expires In...</mat-label>
+          <mat-select formControlName="expiresIn">
+            <mat-option value="0">None</mat-option>
+            <mat-option value="30s">30 Seconds</mat-option>
+            <mat-option value="1mn">1 Minute</mat-option>
+            <mat-option value="1hr">1 Hour</mat-option>
+            <mat-option value="1d">1 Day</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div style="margin-top: 1rem;">
+        <mat-slide-toggle formControlName="encrypted">Encrypted</mat-slide-toggle>
+      </div>
+    </div>
+
+    <div style="display: flex;">
+      <mat-form-field appearance="outline" style="flex: 1;">
+        <mat-label>Data (Must be an Object or Array of any)</mat-label>
+        <textarea matInput placeholder="[]" formControlName="data" #json></textarea>
+      </mat-form-field>
+    </div>
+    <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
+
+    <div style="display: flex;">
+      <span style="flex:1"></span>
+      <button mat-stroked-button (click)="onCreateStore()" [disabled]="!(isValid && isValidJSON(json.value))">
+        Save Store
+      </button>
+    </div>
+
+  </div>
+
+  <ng-template #LIST>
+
+    <div style="margin-top: 1rem;">
+      <mat-divider></mat-divider>
+    </div>
+{{ settings$ | async | json }}
+    <div *ngIf="filterData(settings$ | async) as data">
+      <ng-container *ngIf="data.length > 0; else NO_DATA">
+        <table mat-table [dataSource]="data">
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef> Store </th>
+            <td mat-cell *matCellDef="let element" style="font-weight: bold; text-transform: uppercase;"> {{element.name}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef> ID </th>
+            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="encrypted">
+            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Encrypted </th>
+            <td mat-cell *matCellDef="let element" style="text-align: center;">
+              <ng-container *ngIf="element.options.encrypted; else NO">YES</ng-container>
+              <ng-template #NO><span style="color:gray">NO</span></ng-template>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="expires">
+            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Expires </th>
+            <td mat-cell *matCellDef="let element" style="text-align: center;">
+              <ng-container *ngIf="element.options.expires !== 0; else NO_DATA">
+                {{expiresIn(element.options.expires)}}
+              </ng-container>
+              <ng-template #NO_DATA>
+                ∞
+              </ng-template>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="option">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element" style="padding-right: 0;">
+              <div style="display: flex;justify-content: flex-end;">
+                <button mat-icon-button color="warn" (click)="onDelete(element); $event.stopPropagation()">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onSelectedRow(row)"></tr>
+        </table>
+      </ng-container>
+
+      <ng-template #NO_DATA>
+        <h3 style="margin-top: 1rem;">No Data</h3>
+      </ng-template>
+
+      <div *ngIf="(data$ | async) as data" style="margin-top: 2rem;">
+        <div style="margin-bottom: 1rem;">
+          <mat-divider></mat-divider>
+        </div>
+
+        <h3>STORE: <span style="font-weight: bold;">{{ store.name | uppercase }}</span></h3>
+        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>
+        <div style="display: flex;">
+          <mat-form-field appearance="outline" style="flex: 1;">
+            <mat-label>Data (Must be an Object or Array of any)</mat-label>
+            <textarea matInput placeholder="[]" #json [value]="data"></textarea>
+          </mat-form-field>
+        </div>
+        <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
+
+        <div style="display: flex; gap: .5rem;">
+          <span style="flex:1"></span>
+          <button mat-stroked-button (click)="onCancel()">Cancel</button>
+          <button mat-stroked-button (click)="onUpdate(store, json.value)" [disabled]="!(isValidJSON(json.value))">Update</button>
+        </div>
+      </div>
+    </div>
+
+  </ng-template>
+
+  <div style="margin-top: 1rem;">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 1rem;">
+    <button mat-stroked-button (click)="onReset()">Delete All Stores</button>
+  </div>
+
+</div>
+
+
+<mat-menu #menu="matMenu">
+  <div style="padding: 1rem;">
+    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>
+    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>
+    <mat-divider></mat-divider>
+  <div style="font-size: smaller; margin-top: .5rem;">
+    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>
+    <div style="background-color: whitesmoke; padding: 1rem;">
+      &#123;<br>
+        provide: APP_ID,<br>
+        useValue: "056991ac-3537-43ab-b5b9-83edf6554eff",<br>
+      &#125;
+    </div>
+  </div>
+  </div>
+</mat-menu>

package/src/lib/http-request-services-demo/local-storage-demo/local-storage-demo.component.scss

@@ -0,0 +1,17 @@
+  .mat-mdc-row .mat-mdc-cell {
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    cursor: pointer;
+  }
+
+  .mat-mdc-row:hover .mat-mdc-cell {
+    border-color: currentColor;
+  }
+
+  .demo-row-is-clicked {
+    font-weight: bold;
+  }
+
+  .mat-mdc-menu-panel.mat-mdc-menu-panel {
+    max-width: 280px !important;
+  }

package/src/lib/http-request-services-demo/local-storage-demo/local-storage-demo.component.ts

@@ -0,0 +1,208 @@
+import { Component, Inject, inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { LocalStorageManagerService, SettingOptions, StorageOption, StorageType } from '../../services/local-storage-manager-service';
+import { FormBuilder, Validators } from '@angular/forms';
+import { BehaviorSubject, EMPTY, Observable, of } from 'rxjs';
+import { ConfigOptions } from '../../models/config-options.model';
+import { LocalStorageOptions } from '../../models/config-local-storage-options.model';
+import { UtilsService } from '../../services/utils/utils.service';
+import { switchMap, tap, map } from 'rxjs/operators';
+import { CONFIG_SETTINGS_TOKEN } from '../../models/config-token.model';
+
+@Component({
+    selector: 'app-local-storage-demo',
+    templateUrl: './local-storage-demo.component.html',
+    styleUrls: ['./local-storage-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class LocalStorageDemoComponent implements OnInit {
+
+  fb = inject(FormBuilder)
+  utils = inject(UtilsService)
+
+  type$ = new BehaviorSubject(StorageType.GLOBAL)
+  get type() {
+    return (this.typeControl.value) ? +this.typeControl.value : 0
+  }
+
+  typeControl = this.fb.control(StorageType.GLOBAL.toString())
+
+  localStorageManagerService = inject(LocalStorageManagerService)
+
+  settings$: Observable<any> = this.localStorageManagerService.settings$
+
+  setting$ = (store: string) => this.localStorageManagerService.setting$(store)
+
+  storageForm = this.fb.group({
+    store: this.fb.control<string|null>(null),
+    type: 'local',
+    settingType: 'local',
+    encrypted: false,
+    data: this.fb.control<string>('', Validators.required),
+  })
+
+  newStoreForm = this.fb.group({
+    name: this.fb.control<string|null>(null, Validators.required),
+    storage: 'local',
+    encrypted: false,
+    data: this.fb.control<string>('', Validators.required),
+    expiresIn: this.fb.control('0')
+  })
+
+  store$?: Observable<any>
+
+  storeData$ = this.storageForm.get('store')?.valueChanges
+  .pipe(
+    switchMap((data: any) => {
+      return data
+        ? this.localStorageManagerService.store$(data.name)
+        : of('')
+    }),
+    tap(data => {
+      this.storageForm.get('data')?.patchValue(data, { emitEvent: false })
+    })
+  )
+
+  expiresIn = (epoch: number) => this.utils.expiresIn(epoch)
+
+  get isValid() {
+    return this.newStoreForm.valid
+  }
+
+  get isValidData() {
+    return this.storageForm.valid
+  }
+
+  isValidJSON = (str: string) => {
+    try {
+      JSON.parse(str)
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+
+  displayedColumns: string[] = ['name', 'id', 'encrypted', 'expires', "option"];
+
+  filterData = (values: SettingOptions[]) => {
+    if(!values) return []
+    return values.filter((item: any) => item.options.storage === +this.type)
+  }
+
+  data$?: Observable<any>
+
+  store: any
+
+  create = false
+
+  storeProps?: LocalStorageOptions
+  options?: SettingOptions
+
+  constructor(@Inject(CONFIG_SETTINGS_TOKEN) private configOptions?: ConfigOptions) { }
+
+  ngOnInit() {
+
+    this.storeProps = this.configOptions?.LocalStorageOptions
+    this.options = this.storeProps?.options
+
+    if(this.options?.storage) {
+      this.typeControl.patchValue(this.options.storage.toString())
+      this.typeControl.disable()
+    } else {
+      this.typeControl.enable()
+    }
+
+    if(this.options?.expiresIn) {
+      this.newStoreForm.get('expiresIn')?.patchValue(this.options.expiresIn)
+      this.newStoreForm.get('expiresIn')?.disable()
+    } else {
+      this.newStoreForm.get('expiresIn')?.enable()
+    }
+
+    if(this.options?.encrypted) {
+      this.newStoreForm.get('encrypted')?.patchValue(this.options.encrypted)
+      this.newStoreForm.get('encrypted')?.disable()
+    } else {
+      this.newStoreForm.get('encrypted')?.enable()
+    }
+
+  }
+
+  onCreateStore() {
+
+    if(!this.isValid) return
+
+    const store = this.newStoreForm.value
+    if(!store.name || store.name === '') return
+
+    const options = { storage: this.type, encrypted: store.encrypted, expiresIn: store.expiresIn }
+
+    this.localStorageManagerService.createStore({
+      name: store.name,
+      data: store.data,
+      options: SettingOptions.adapt(options)
+    })
+
+    this.newStoreForm.reset()
+    this.create = false
+  }
+
+  onUpdateStore(store: any) {
+
+    if(!this.storageForm.valid) return
+
+    const storeData = this.storageForm.value
+
+    const data = JSON.parse(storeData.data || '')
+
+    const type = (storeData.type === 'local') ? StorageType.GLOBAL : StorageType.SESSION
+
+    this.localStorageManagerService.updateStore({
+      name: store.name,
+      data
+    })
+
+  }
+
+  onSelectedRow(store: any) {
+    this.store = store
+    this.data$ = this.localStorageManagerService.store$(store.name).pipe(map(item => JSON.stringify(item)))
+    this.create = false
+  }
+
+  onCreate() {
+    this.onCancel()
+    this.create = true
+  }
+
+  onDelete(store: StorageOption) {
+
+    this.localStorageManagerService.deleteStore({
+      name: store.name,
+    })
+
+    this.onCancel()
+  }
+
+  onCancel() {
+    this.data$ = EMPTY
+    this.store = null
+    this.create = false
+  }
+
+  onUpdate(store: StorageOption, data: any) {
+
+    this.localStorageManagerService.updateStore({
+      name: store.name,
+      data: JSON.parse(data)
+    })
+
+    this.onCancel()
+
+  }
+
+  onReset() {
+    this.localStorageManagerService.resetStore()
+  }
+
+}

package/src/lib/http-request-services-demo/local-storage-signals-demo/local-storage-signals-demo.component.html

@@ -0,0 +1,200 @@
+<div style="margin: 2rem;">
+
+  <div style="display: flex; gap: 1rem">
+    <h2 style="padding-top: .5rem; display: flex;">
+      <div style="padding-top: .5rem;">
+        <span>Local Storage Manager</span>
+        <span style="margin-left: .5rem;">
+          <mat-icon color="accent">fiber_new</mat-icon>
+        </span>
+      </div>
+      <div>
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>info</mat-icon>
+        </button>
+      </div>
+    </h2>
+    <span style="flex:1"></span>
+    <div style="padding-top: .25rem;">
+      <mat-button-toggle-group name="storage" [formControl]="typeControl" (change)="onCancel()">
+        <mat-button-toggle value="0">Local Storage</mat-button-toggle>
+        <mat-button-toggle value="1">Session Storage</mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+    <div style="margin-top: .25rem;">
+      <button mat-icon-button (click)="onCreate()">
+        <mat-icon>add</mat-icon>
+      </button>
+    </div>
+  </div>
+
+  <ng-container *ngIf="storeProps?.storageName || storeProps?.storageSettingsName">
+    <div style="display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;"
+    >
+      <div style="display: flex;">
+        <div *ngIf="storeProps?.storageSettingsName" style="flex:1">
+          Database: <b>{{ storeProps?.storageSettingsName }}</b>
+        </div>
+        <div *ngIf="storeProps?.storageName" style="flex:1">
+          Data: <b>{{ storeProps?.storageName }}</b>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div style="margin-top: 2rem;" [formGroup]="newStoreForm" *ngIf="create; else LIST">
+
+    <h2>Create Store</h2>
+
+    <div style="display: flex; gap: 1rem;">
+      <div style="flex:1">
+        <mat-form-field appearance="outline">
+          <mat-label>Store Name</mat-label>
+          <input matInput placeholder="sample" formControlName="name">
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field appearance="outline">
+          <mat-label>Expires In...</mat-label>
+          <mat-select formControlName="expiresIn">
+            <mat-option value="0">None</mat-option>
+            <mat-option value="30s">30 Seconds</mat-option>
+            <mat-option value="1mn">1 Minute</mat-option>
+            <mat-option value="1hr">1 Hour</mat-option>
+            <mat-option value="1d">1 Day</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div style="margin-top: 1rem;">
+        <mat-slide-toggle formControlName="encrypted">Encrypted</mat-slide-toggle>
+      </div>
+    </div>
+
+    <div style="display: flex;">
+      <mat-form-field appearance="outline" style="flex: 1;">
+        <mat-label>Data (Must be an Object or Array of any)</mat-label>
+        <textarea matInput placeholder="[]" formControlName="data" #json></textarea>
+      </mat-form-field>
+    </div>
+    <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
+
+    <div style="display: flex;">
+      <span style="flex:1"></span>
+      <button mat-stroked-button (click)="onCreateStore()" [disabled]="!(isValid && isValidJSON(json.value))">
+        Save Store
+      </button>
+    </div>
+
+  </div>
+
+  <ng-template #LIST>
+
+    <div style="margin-top: 1rem;">
+      <mat-divider></mat-divider>
+    </div>
+{{ settings() | json }}
+  <div *ngIf="filterData(settings()) as data">
+      <ng-container *ngIf="data.length > 0; else NO_DATA">
+        <table mat-table [dataSource]="data">
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef> Store </th>
+            <td mat-cell *matCellDef="let element" style="font-weight: bold; text-transform: uppercase;"> {{element.name}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef> ID </th>
+            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="encrypted">
+            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Encrypted </th>
+            <td mat-cell *matCellDef="let element" style="text-align: center;">
+              <ng-container *ngIf="element.options.encrypted; else NO">YES</ng-container>
+              <ng-template #NO><span style="color:gray">NO</span></ng-template>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="expires">
+            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Expires </th>
+            <td mat-cell *matCellDef="let element" style="text-align: center;">
+              <ng-container *ngIf="element.options.expires !== 0; else NO_DATA">
+                {{expiresIn(element.options.expires)}}
+              </ng-container>
+              <ng-template #NO_DATA>
+                ∞
+              </ng-template>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="option">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element" style="padding-right: 0;">
+              <div style="display: flex;justify-content: flex-end;">
+                <button mat-icon-button color="warn" (click)="onDelete(element); $event.stopPropagation()">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onSelectedRow(row)"></tr>
+        </table>
+      </ng-container>
+
+      <ng-template #NO_DATA>
+        <h3 style="margin-top: 1rem;">No Data</h3>
+      </ng-template>
+
+  <div *ngIf="storeSelected() as selectedStore" style="margin-top: 2rem;">
+        <div style="margin-bottom: 1rem;">
+          <mat-divider></mat-divider>
+        </div>
+
+  <h3>STORE: <span style="font-weight: bold;">{{ selectedStore.name | uppercase }}</span></h3>
+  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>
+        <div style="display: flex;">
+          <mat-form-field appearance="outline" style="flex: 1;">
+            <mat-label>Data (Must be an Object or Array of any)</mat-label>
+            <textarea matInput placeholder="[]" #json [value]="selectedStoreData()"></textarea>
+          </mat-form-field>
+        </div>
+        <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
+
+        <div style="display: flex; gap: .5rem;">
+          <span style="flex:1"></span>
+          <button mat-stroked-button (click)="onCancel()">Cancel</button>
+          <button mat-stroked-button (click)="onUpdate(selectedStore, json.value)" [disabled]="!(isValidJSON(json.value))">Update</button>
+        </div>
+      </div>
+    </div>
+
+  </ng-template>
+
+  <div style="margin-top: 1rem;">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 1rem;">
+    <button mat-stroked-button (click)="onReset()">Delete All Stores</button>
+  </div>
+
+</div>
+
+
+<mat-menu #menu="matMenu">
+  <div style="padding: 1rem;">
+    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>
+    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>
+    <mat-divider></mat-divider>
+  <div style="font-size: smaller; margin-top: .5rem;">
+    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>
+    <div style="background-color: whitesmoke; padding: 1rem;">
+      &#123;<br>
+        provide: APP_ID,<br>
+        useValue: "056991ac-3537-43ab-b5b9-83edf6554eff",<br>
+      &#125;
+    </div>
+  </div>
+  </div>
+</mat-menu>