@yomotech/view-toolkit 0.0.31 → 0.0.32

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/view-toolkit",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,50 +1,39 @@
-{
-  "name": "@yomotech/view-toolkit",
-  "version": "0.0.31",
-  "peerDependencies": {
-    "@angular/animations": "^21.1.2",
-    "@angular/cdk": "^21.1.2",
-    "@angular/common": "^21.1.2",
-    "@angular/core": "^21.1.2",
-    "@angular/forms": "^21.1.2",
-    "@angular/material": "^21.1.2",
-    "@angular/platform-browser": "^21.1.2",
-    "@angular/router": "^21.1.2",
-    "@ant-design/icons-angular": "^21.0.0",
-    "@byteowls/capacitor-oauth2": "^5.0.0",
-    "@capacitor/app": "^7.1.0",
-    "@capacitor/browser": "^7.0.2",
-    "@capacitor/core": "^7.2.0",
-    "@capacitor/preferences": "^7.0.1",
-    "@ionic/angular": "^8.0.0",
-    "@stripe/stripe-js": "^5.5.0",
-    "@okta/okta-angular": "^6.5.1",
-    "@okta/okta-auth-js": "^7.12.0-rc1",
-    "jwt-decode": "^4.0.0",
-    "@capacitor/device": "^7.0.3",
-    "angular-oauth2-oidc": "^21.0.1",
-    "jszip": "^3.10.1",
-    "ng-zorro-antd": "^21.1.0",
-    "ngx-toastr": "^19.1.0",
-    "primeflex": "^4.0.0",
-    "primeicons": "^7.0.0",
-    "primeng": "^21.1.1",
-    "rxjs": "~7.8.0",
-    "zone.js": "^0.16.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/yomotech-view-toolkit.mjs",
-  "typings": "types/yomotech-view-toolkit.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/yomotech-view-toolkit.d.ts",
-      "default": "./fesm2022/yomotech-view-toolkit.mjs"
-    }
-  }
+{
+  "name": "@yomotech/view-toolkit",
+  "version": "0.0.32",
+  "peerDependencies": {
+    "@angular/animations": "^21.1.2",
+    "@angular/cdk": "^21.1.2",
+    "@angular/common": "^21.1.2",
+    "@angular/core": "^21.1.2",
+    "@angular/forms": "^21.1.2",
+    "@angular/material": "^21.1.2",
+    "@angular/platform-browser": "^21.1.2",
+    "@angular/router": "^21.1.2",
+    "@ant-design/icons-angular": "^21.0.0",
+    "@byteowls/capacitor-oauth2": "^5.0.0",
+    "@capacitor/app": "^7.1.0",
+    "@capacitor/browser": "^7.0.2",
+    "@capacitor/core": "^7.2.0",
+    "@capacitor/preferences": "^7.0.1",
+    "@ionic/angular": "^8.0.0",
+    "@stripe/stripe-js": "^5.5.0",
+    "@okta/okta-angular": "^6.5.1",
+    "@okta/okta-auth-js": "^7.12.0-rc1",
+    "jwt-decode": "^4.0.0",
+    "@capacitor/device": "^7.0.3",
+    "angular-oauth2-oidc": "^21.0.1",
+    "jszip": "^3.10.1",
+    "ng-zorro-antd": "^21.1.0",
+    "ngx-toastr": "^19.1.0",
+    "primeflex": "^4.0.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^21.1.1",
+    "rxjs": "~7.8.0",
+    "zone.js": "^0.16.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
 }

package/src/lib/app-version.ts

@@ -0,0 +1,2 @@
+// AUTO-GENERATED. Do not edit.
+export const APP_VERSION = '1.0.204';

package/src/lib/components/autocomplete/autocomplete.html

@@ -0,0 +1,23 @@
+<p-autoComplete #autocompleteField="ngModel" [required]="formField.option.required" [name]="formField.scope?.reference"
+    inputmode
+    [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"
+    [style]="getStyleWithoutClasses(formField?.scope?.style).style" [class]="formField?.scope?.style?.classes[0]"
+    [suggestions]="matchData" [dropdown]="true"
+    [placeholder]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.placeholder"
+    (completeMethod)="autocompChangeEvent($event, formField)" (onSelect)="autocompSelectEvent($event, formField)"
+    (onBlur)="autocompFocusOutEvent($event, formField)"
+    [attr.inputmode]="formField.option.keyboard === 'numeric' ? 'numeric' : null">
+</p-autoComplete>
+
+<!-- Error Message -->
+<div *ngIf="autocompleteField?.touched && autocompleteField?.invalid"
+    [style]="getStyleWithoutClasses(formField?.validation?.style).style">
+    <p class="text-danger" *ngIf="autocompleteField?.errors?.['required']">
+        {{setErroMessage(formField, errorMessages, "required")}}</p>
+    <p class="text-danger" *ngIf="autocompleteField?.errors?.['email']">
+        {{(formField.label?.value ?
+        formField.label?.value :
+        modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption)
+        +
+        ' ' + errorMessages.pattern}}</p>
+</div>

package/src/lib/components/autocomplete/autocomplete.ts

@@ -0,0 +1,71 @@
+import { NgIf } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { SelectModule } from 'primeng/select';
+
+@Component({
+  selector: 'vl-autocomplete',
+  standalone: true,
+  imports: [
+    FormsModule,
+    AutoCompleteModule,
+    SelectModule,
+    NgIf
+  ],
+  templateUrl: './autocomplete.html',
+  styleUrl: './autocomplete.css',
+})
+export class Autocomplete {
+  @Input() formField: any;
+  @Input() modalItemInfo: any;
+  @Input() matchData: any;
+  @Input() selectedLanguageInfo: any;
+  @Input() errorMessages: any;
+  @Output() autocompSelect: EventEmitter<any> = new EventEmitter();
+  @Output() autocompChange: EventEmitter<any> = new EventEmitter();
+  @Output() autocompFocusOut: EventEmitter<any> = new EventEmitter();
+
+  autocompSelectEvent(event: any, formField: any) {
+    this.autocompSelect.emit({ event: event, formField: formField });
+  }
+
+  autocompChangeEvent(event: any, formField: any) {
+    this.autocompChange.emit({ event: event, formField: formField });
+  }
+
+  autocompFocusOutEvent(event: any, formField: any) {
+    this.autocompFocusOut.emit({ event: event, formField: formField });
+  }
+
+  getScope(scope: any) {
+    let propertyScope = "";
+    let start = scope?.indexOf("#/") + 2;
+    let end = scope?.indexOf("/", start);
+    if (start && end) {
+      propertyScope = scope.substring(start, end);
+    }
+    return propertyScope;
+  }
+
+  getStyleWithoutClasses(styleObject: any) {
+    if (!styleObject) {
+      return { classes: '', style: {} };
+    }
+    const { classes, ...styleWithoutClasses } = styleObject;
+    return { classes: classes && classes.length > 0 ? classes[0] : '', style: styleWithoutClasses };
+  }
+
+  setErroMessage(formField: any, errorMessages: any, errorType: any) {
+    let error: any = "";
+    let fieldName: any = formField.label?.value ? formField.label?.value : formField.label?.caption ? formField.label?.caption : this.modalItemInfo.propertySchema[this.getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption;
+    if (errorType == "required") {
+      error = this.selectedLanguageInfo?.errorMessages?.required ? this.selectedLanguageInfo?.errorMessages.required : errorMessages.required
+    }
+    if (error && error.toString().includes("{{requiredLength}}")) {
+      error = error.replace(/{{\s*requiredLength\s*}}/g, formField?.minlength.toString());
+    }
+    return error.replace(/{{\s*field\s*}}/g, fieldName);
+  }
+
+}

package/src/lib/components/button/button.html

@@ -0,0 +1 @@
+<p>button works!</p>

package/src/lib/components/button/button.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'vl-button',
+  standalone: true,
+  templateUrl: './button.html',
+  styleUrl: './button.css',
+})
+export class Button {
+
+}

package/src/lib/components/date/date.html

@@ -0,0 +1 @@
+<p>date works!</p>

package/src/lib/components/date/date.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'vl-date',
+  standalone: true,
+  templateUrl: './date.html',
+  styleUrl: './date.css',
+})
+export class Date {
+
+}

package/src/lib/components/dropdown/dropdown.html

@@ -0,0 +1 @@
+<p>dropdown works!</p>

package/src/lib/components/dropdown/dropdown.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'vl-dropdown',
+  standalone: true,
+  templateUrl: './dropdown.html',
+  styleUrl: './dropdown.css',
+})
+export class Dropdown {
+
+}

package/src/lib/components/error-message/error-message.html

@@ -0,0 +1 @@
+<p>error-message works!</p>

package/src/lib/components/error-message/error-message.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'vl-error-message',
+  standalone: true,
+  templateUrl: './error-message.html',
+  styleUrl: './error-message.css',
+})
+export class ErrorMessage {
+
+}

package/src/lib/components/label/label.html

@@ -0,0 +1,7 @@
+<label [style]="getStyleWithoutClasses(formField?.label?.style).style" [class]="formField?.label?.style?.classes[0]">{{
+    formField.label?.value
+    ?
+    formField.label?.value : formField.label?.caption ?
+    formField.label?.caption :
+    modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+    }}</label>

package/src/lib/components/label/label.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'vl-label',
+  standalone: true,
+  templateUrl: './label.html',
+  styleUrl: './label.css',
+})
+export class Label {
+  @Input() formField: any;
+  @Input() modalItemInfo: any;
+
+
+  getScope(scope: any) {
+    let propertyScope = "";
+    let start = scope?.indexOf("#/") + 2;
+    let end = scope?.indexOf("/", start);
+    if (start && end) {
+      propertyScope = scope.substring(start, end);
+    }
+    return propertyScope;
+  }
+
+  getStyleWithoutClasses(styleObject: any) {
+    if (!styleObject) {
+      return { classes: '', style: {} };
+    }
+    const { classes, ...styleWithoutClasses } = styleObject;
+    return { classes: classes && classes.length > 0 ? classes[0] : '', style: styleWithoutClasses };
+  }
+
+
+}

package/src/lib/components/string/string.html

@@ -0,0 +1,4 @@
+<h5>{{
+    modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption
+    }}
+</h5>

package/src/lib/components/string/string.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'vl-string',
+  standalone: true,
+  templateUrl: './string.html',
+  styleUrl: './string.css',
+})
+export class String {
+  @Input() formField: any;
+  @Input() modalItemInfo: any;
+
+  getScope(scope: any) {
+    let propertyScope = "";
+    let start = scope?.indexOf("#/") + 2;
+    let end = scope?.indexOf("/", start);
+    if (start && end) {
+      propertyScope = scope.substring(start, end);
+    }
+    return propertyScope;
+  }
+}

package/src/lib/components/textbox/textbox.html

@@ -0,0 +1,7 @@
+<input pInputText type="text" #inputField="ngModel" [required]="formField.option?.required"
+    [email]="formField.option?.email" [disabled]="formField?.option?.disabled"
+    [readonly]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.readonly"
+    [style]="getStyleWithoutClasses(formField?.scope?.style).style" [class]="formField?.scope?.style?.classes[0]"
+    [(ngModel)]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value"
+    [name]="formField.scope?.reference"
+    [placeholder]="modalItemInfo.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.placeholder" />

package/src/lib/components/textbox/textbox.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+  selector: 'vl-textbox',
+  standalone: true,
+  templateUrl: './textbox.html',
+  styleUrl: './textbox.css',
+  imports: [FormsModule, InputTextModule]
+})
+export class Textbox {
+  @Input() formField: any;
+  @Input() modalItemInfo: any;
+
+  getScope(scope: any) {
+    let propertyScope = "";
+    let start = scope?.indexOf("#/") + 2;
+    let end = scope?.indexOf("/", start);
+    if (start && end) {
+      propertyScope = scope.substring(start, end);
+    }
+    return propertyScope;
+  }
+
+  getStyleWithoutClasses(styleObject: any) {
+    if (!styleObject) {
+      return { classes: '', style: {} };
+    }
+    const { classes, ...styleWithoutClasses } = styleObject;
+    return { classes: classes && classes.length > 0 ? classes[0] : '', style: styleWithoutClasses };
+  }
+}

package/src/lib/components/time/time.html

@@ -0,0 +1 @@
+<p>time works!</p>

package/src/lib/components/time/time.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'vl-time',
+  standalone: true,
+  templateUrl: './time.html',
+  styleUrl: './time.css',
+})
+export class Time {
+
+}