onshore-forms 0.0.6 → 0.0.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.6",
+  "version": "0.0.8",
   "name": "onshore-forms",
   "description": "OnShore Angular Form Builder",
   "author": {
@@ -14,13 +14,6 @@
   "bugs": {
     "url": "https://github.com/OnShore-Development/onshore_libs.git/issues"
   },
-  "scripts": {
-    "sass:dev": "sass --watch --update --style=expanded styles/scss:styles/css",
-    "sass:prod": "sass --no-source-map --style=compressed styles/scss:styles/css",
-    "build": "npm run sass:prod && ng build onshore-forms",
-    "serve": "npm run sass:dev && ng build onshore-forms --watch",
-    "publish": "npm publish"
-  },
   "peerDependencies": {
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0",
@@ -34,6 +27,24 @@
   "exports": {
     "./theme1": {
       "sass": "./styles/theme1/style.scss"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/onshore-forms.mjs",
+      "es2020": "./fesm2020/onshore-forms.mjs",
+      "es2015": "./fesm2015/onshore-forms.mjs",
+      "node": "./fesm2015/onshore-forms.mjs",
+      "default": "./fesm2020/onshore-forms.mjs"
     }
-  }
-}
+  },
+  "module": "fesm2015/onshore-forms.mjs",
+  "es2020": "fesm2020/onshore-forms.mjs",
+  "esm2020": "esm2020/onshore-forms.mjs",
+  "fesm2020": "fesm2020/onshore-forms.mjs",
+  "fesm2015": "fesm2015/onshore-forms.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/{src/public-api.ts → public-api.d.ts}

@@ -1,7 +1,3 @@
-/*
- * Public API Surface of onshore-forms
- */
-
 export * from './lib/onshore-forms.service';
 export * from './lib/onshore-forms.component';
 export * from './lib/onshore-forms.module';

package/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/onshore-forms'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/onshore-forms",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "assets": [
-    "./styles/scss/*.*",
-    "./src/lib/components/*.*"
-  ]
-}

package/src/lib/components/form-autocomplete-item/form-autocomplete-item.component.html

@@ -1,46 +0,0 @@
-<!--<div class="flex flex-column mb-3">
-  <div *ngIf="formTemplate.label" class="flex justify-content-between align-items-center">
-    <b [class.text-muted]="disabled" class="mb-1 white-space-nowrap">
-      {{formTemplate.label}}
-      <span *ngIf="formTemplate.required" class="tl-color-danger">*</span>
-    </b>
-    <i *ngIf="formTemplate.tooltip" class="fa fa-info-circle tl-color-black" [pTooltip]="formTemplate.tooltip" tooltipPosition="left" [escape]="false"></i>
-  </div>
-
-  <p-autoComplete [placeholder]="formTemplate.placeholder"
-                  appendTo="body"
-                  [formControl]="this.ngControl.control"
-                  (onSelect)="selected($event)"
-                  (onUnselect)="selected($event)"
-                  (onClear)="searchClear()"
-                  [suggestions]="dataSearch"
-                  (completeMethod)="searchPrepare($event)"
-                  [size]="30"
-                  [minLength]="2"
-                  [multiple]="multiple"
-                  [delay]="1000"
-                  [unique]="true"
-                  [field]="selectedField"
-                  class="w-100">
-    <ng-template let-item pTemplate="item">
-      <div *ngIf="suggestionsHighlightedField">
-        <span class="mr-1">
-          <b>{{item[suggestionsHighlightedField]}}</b><br>
-        </span>
-      </div>
-      <div [hidden]="suggestionsLineOneFields.length <= 0"><span *ngFor="let field of suggestionsLineOneFields">{{item[field]}} </span></div>
-      <div [hidden]="suggestionsLineTwoFields.length <= 0"><span *ngFor="let field of suggestionsLineTwoFields">{{item[field]}} </span></div>
-    </ng-template>
-  </p-autoComplete>
-
-  <small *ngIf="formTemplate.description"><i class="fa fa-info-circle"></i> {{formTemplate.description}}</small>
-
-  <div *ngIf="ngControl.control.touched">
-    <onshore-form-validation-output
-      [validationErrors]="ngControl.control.errors"
-      [externValidationPattern]="formTemplate.validationPatternTranslation">
-    </onshore-form-validation-output>
-  </div>
-
-</div>
--->

package/src/lib/components/form-autocomplete-item/form-autocomplete-item.component.ts

@@ -1,133 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component, EventEmitter, Input, OnDestroy, OnInit,
-  Optional, Output,
-  Self
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { OnshoreFormTemplateItem } from '../../models/form.models';
-
-@Component({
-  selector: 'onshore-form-autocomplete-item',
-  templateUrl: './form-autocomplete-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class OnshoreFormAutocompleteItemComponent {
-
-}
-/*export class OnshoreFormAutocompleteItemComponent implements ControlValueAccessor, OnDestroy, OnInit {
-  @Input() formTemplate: OnshoreFormTemplateItem;
-  @Output() onSelect: EventEmitter<UnionDataType> = new EventEmitter();
-  @Output() onClear: EventEmitter<boolean> = new EventEmitter();
-
-  @Input() public dataType: DataType = DataType.user;
-  @Input() public searchFields: string[] = [];
-  @Input() public selectedField: string = '';
-  @Input() public preventDuplicatesField: string = '';
-  @Input() public suggestionsHighlightedField: string = '';
-  @Input() public suggestionsLineOneFields: string[] = [];
-  @Input() public suggestionsLineTwoFields: string[] = [];
-  @Input() public multiple: boolean = false;
-
-  disabled: boolean = false;
-  dataSearch: UnionDataType[];
-  selectedData: UnionDataType;
-
-  selected(data: UnionDataType) {
-      this.onSelect.emit(data);
-      this.cdr.markForCheck();
-  }
-
-  searchClear() {
-    this.dataSearch = [];
-    this.ngControl.reset();
-    this.onClear.emit();
-  }
-
-  searchPrepare(term: any) {
-    if(term.query != '') {
-      this.search(term.query);
-    }else{
-      this.dataSearch = [];
-      this.ngControl.reset();
-      this.onClear.emit();
-    }
-  }
-
-  async search(searchTerm: string) {
-    let filterParams = {};
-
-    this.searchFields.forEach(field => {
-      // @ts-ignore
-      filterParams[field + '[regex]'] = searchTerm;
-    });
-
-    if(this.searchFields.length > 1) {
-      // @ts-ignore
-      filterParams['condition'] = 'or';
-    }
-
-    const data: UnionDataType[] = await this.apiService.getWithQuery(this.dataType, filterParams);
-
-    if(this.preventDuplicatesField != '') {
-      this.dataSearch = data.filter(item => {
-        // @ts-ignore
-        return !(this.ngControl?.value || []).find(value => value[this.preventDuplicatesField] === item[this.preventDuplicatesField]);
-      });
-    } else {
-      this.dataSearch = data;
-    }
-    this.cdr.markForCheck();
-  }
-
-  public writeValue(obj: any): void {
-    if(obj) {
-      this.selectedData = obj;
-      this.cdr.markForCheck();
-    }
-  }
-
-  public registerOnChange(fn: any): void {
-    if(this.ngControl.value) {
-      this.selectedData = this.ngControl.value;
-      this.cdr.markForCheck();
-    }
-  }
-
-  public registerOnTouched(fn: any): void {}
-
-  public setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  ngOnInit(): void {
-    this.ngControl.control?.valueChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-    this.ngControl.control?.statusChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-    if(this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
-      this.ngControl.control?.setValue(this.formTemplate.default);
-      this.cdr.markForCheck();
-    }
-    if(this.formTemplate.enabled) {
-      this.ngControl.control?.enable();
-    } else {
-      this.ngControl.control?.disable();
-    }
-  }
-
-  ngOnDestroy() {
-    this.ngControl.control?.disable();
-  }
-
-  constructor(private cdr: ChangeDetectorRef,
-              private apiService: ApiService,
-              @Self() @Optional() public ngControl: NgControl) {
-
-    this.ngControl.valueAccessor = this;
-  }
-
-}*/

package/src/lib/components/form-checkbox-item/form-checkbox-item.component.html

@@ -1,23 +0,0 @@
-<div class="flex flex-column mb-3">
-  <div class="flex justify-content-between align-items-center">
-    <b [class.text-muted]="disabled" class="mb-1 white-space-nowrap">
-      {{formTemplate.label}}
-      <span *ngIf="formTemplate.required" class="tl-color-danger">*</span>
-    </b>
-    <i *ngIf="formTemplate.tooltip" class="fa fa-info-circle tl-color-black" [pTooltip]="formTemplate.tooltip" tooltipPosition="left" [escape]="false"></i>
-  </div>
-
-  <div class="p-field-checkbox flex">
-    <p-checkbox class="align-self-start mt-1" [name]="formTemplate.name" [formControl]="ngControl.control" [binary]="true" [inputId]="formTemplate.name" [value]="ngControl.control.value" (onChange)="changeCheck($event)"></p-checkbox>
-    <label class="mb-0 ml-2" [for]="formTemplate.name">{{formTemplate.description}}</label>
-  </div>
-
-  <div *ngIf="ngControl.control.touched">
-    <onshore-form-validation-output
-      [validationItems]="formTemplate.validationItems"
-      [validationErrors]="ngControl.control.errors"
-      [externValidationPattern]="formTemplate.validationPatternTranslation">
-    </onshore-form-validation-output>
-  </div>
-
-</div>

package/src/lib/components/form-checkbox-item/form-checkbox-item.component.ts

@@ -1,65 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input, OnChanges, OnDestroy,
-  OnInit, Optional,
-  Self, SimpleChanges
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { OnshoreFormTemplateItem } from '../../models/form.models';
-
-@Component({
-  selector: 'onshore-form-checkbox-item',
-  templateUrl: './form-checkbox-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class OnshoreFormCheckboxItemComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy {
-  @Input() formTemplate!: OnshoreFormTemplateItem;
-
-  disabled: boolean = false;
-
-  // ControlValueAccessor interface
-  writeValue(obj: any): void {}
-  registerOnChange(fn: any): void {}
-  registerOnTouched(fn: any): void {}
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  changeCheck(value: any) {
-    this.ngControl.control?.setValue(value.checked);
-  }
-
-  ngOnInit(): void {
-    this.ngControl.control?.valueChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-    this.ngControl.control?.statusChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-
-    if(this.ngControl.control?.value !== true && this.ngControl.control?.value !== false && this.formTemplate.default != undefined) {
-      this.ngControl.control?.setValue(this.formTemplate.default);
-      this.cdr.markForCheck();
-    }
-    if(this.formTemplate.enabled) {
-      this.ngControl.control?.enable();
-    } else {
-      this.ngControl.control?.disable();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.cdr.markForCheck();
-  }
-
-  ngOnDestroy() {
-    this.ngControl.control?.disable();
-  }
-
-  constructor(@Self() @Optional() public ngControl: NgControl,
-              private cdr: ChangeDetectorRef) {
-    this.ngControl.valueAccessor = this;
-  }
-}

package/src/lib/components/form-colorpicker-item/form-colorpicker-item.component.html

@@ -1,30 +0,0 @@
-<div class="flex flex-column mb-3">
-  <div class="flex justify-content-between align-items-center">
-    <b [class.text-muted]="disabled" class="mb-1 white-space-nowrap">
-      {{formTemplate.label}}:
-      <span *ngIf="formTemplate.required" class="tl-color-danger">*</span>
-    </b>
-    <i *ngIf="formTemplate.tooltip" class="fa fa-info-circle tl-color-black" [pTooltip]="formTemplate.tooltip" tooltipPosition="left" [escape]="false"></i>
-  </div>
-
-  <div class="flex w-100">
-    <p-colorPicker [(ngModel)]="colorPickerValue" format="hex" [inline]="false" appendTo="body" [baseZIndex]="99999" (onChange)="changeColor()"></p-colorPicker>
-    <input class="w-100 ml-2"
-           type="text"
-           [name]="formTemplate.name"
-           [placeholder]="formTemplate.label"
-           [formControl]="ngControl.control"
-           pInputText
-           [value]="ngControl.control.value"
-           (input)="changeInput($event)"/>
-  </div>
-
-  <div *ngIf="ngControl.control.touched">
-    <onshore-form-validation-output
-      [validationItems]="formTemplate.validationItems"
-      [validationErrors]="ngControl.control.errors"
-      [externValidationPattern]="formTemplate.validationPatternTranslation">
-    </onshore-form-validation-output>
-  </div>
-
-</div>

package/src/lib/components/form-colorpicker-item/form-colorpicker-item.component.ts

@@ -1,71 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input, OnChanges, OnDestroy,
-  OnInit, Optional,
-  Self, SimpleChanges
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { OnshoreFormTemplateItem } from '../../models/form.models';
-@Component({
-  selector: 'onshore-form-colorpicker-item',
-  templateUrl: './form-colorpicker-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class OnshoreFormColorpickerItemComponent implements OnInit, OnChanges, ControlValueAccessor, OnDestroy {
-  @Input() formTemplate!: OnshoreFormTemplateItem;
-
-  disabled: boolean = false;
-  colorPickerValue = '';
-
-  // ControlValueAccessor interface
-  writeValue(obj: any): void {}
-  registerOnChange(fn: any): void {}
-  registerOnTouched(fn: any): void {}
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  changeColor() {
-    this.ngControl.control?.setValue(this.colorPickerValue);
-  }
-
-  changeInput(input: any) {
-    this.colorPickerValue = input.target?.value;
-  }
-
-  ngOnInit(): void {
-    this.ngControl.control?.valueChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-    this.ngControl.control?.statusChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-
-    if(this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
-      this.ngControl.control?.setValue(this.formTemplate.default);
-      this.colorPickerValue = this.formTemplate.default;
-      this.cdr.markForCheck();
-    }
-    if(this.formTemplate.enabled) {
-      this.ngControl.control?.enable();
-    } else {
-      this.ngControl.control?.disable();
-    }
-  }
-
-  ngOnDestroy() {
-    this.ngControl.control?.disable();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.colorPickerValue = this.ngControl.control?.value;
-    this.cdr.markForCheck();
-  }
-
-  constructor(@Self() @Optional() public ngControl: NgControl,
-              private cdr: ChangeDetectorRef) {
-    this.ngControl.valueAccessor = this;
-  }
-}

package/src/lib/components/form-dropdown-item/form-dropdown-item.component.html

@@ -1,44 +0,0 @@
-<div class="flex flex-column mb-3">
-  <div class="flex justify-content-between align-items-center">
-    <b [class.text-muted]="disabled" class="mb-1 white-space-nowrap">
-      {{formTemplate?.label}}
-      <span *ngIf="formTemplate?.required" class="tl-color-danger">*</span>
-    </b>
-    <i *ngIf="formTemplate?.tooltip" class="fa fa-info-circle tl-color-black" [pTooltip]="formTemplate?.tooltip" tooltipPosition="left" [escape]="false"></i>
-  </div>
-
-  <p-dropdown *ngIf="!multiple"
-              class="w-100"
-              [options]="formTemplate?.options"
-              [formControl]="ngControl.control"
-              [name]="formTemplate?.name"
-              [placeholder]="formTemplate?.placeholder"
-              [disabled]="disabled"
-              [dataKey]="formTemplate?.optionDataKey"
-              [showClear]="formTemplate?.settings?.showClear"
-              (onClear)="clearSelection()"
-              optionDisabled="disabled"
-              appendTo="body">
-  </p-dropdown>
-
-  <p-multiSelect *ngIf="multiple"
-               class="w-100"
-               [options]="formTemplate?.options"
-               [formControl]="ngControl.control"
-               [name]="formTemplate?.name"
-               [placeholder]="formTemplate?.placeholder"
-               [disabled]="disabled"
-               [dataKey]="formTemplate?.optionDataKey"
-               display="chip"
-               optionDisabled="disabled"
-               appendTo="body"></p-multiSelect>
-
-  <div *ngIf="ngControl.control.touched">
-    <onshore-form-validation-output
-      [validationItems]="formTemplate.validationItems"
-      [validationErrors]="ngControl.control.errors"
-      [externValidationPattern]="formTemplate?.validationPatternTranslation">
-    </onshore-form-validation-output>
-  </div>
-
-</div>

package/src/lib/components/form-dropdown-item/form-dropdown-item.component.ts

@@ -1,68 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input, OnChanges, OnDestroy,
-  OnInit, Optional,
-  Self, SimpleChanges
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { OnshoreDropdownSettings, OnshoreFormTemplateItem } from '../../models/form.models';
-
-@Component({
-  selector: 'onshore-form-dropdown-item',
-  templateUrl: './form-dropdown-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class OnshoreFormDropdownItemComponent implements OnInit, OnChanges, ControlValueAccessor, OnChanges, OnDestroy {
-  @Input() formTemplate!: OnshoreFormTemplateItem;
-
-  disabled: boolean | undefined = false;
-  multiple: boolean | undefined = false;
-
-  // ControlValueAccessor interface
-  writeValue(obj: any): void {}
-  registerOnChange(fn: any): void {}
-  registerOnTouched(fn: any): void {}
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  clearSelection() {
-    this.ngControl.control?.setValue(null);
-  }
-
-  ngOnInit(): void {
-    this.ngControl.control?.valueChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-    this.ngControl.control?.statusChanges.subscribe(() => {
-      this.cdr.markForCheck();
-    });
-
-    if(this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
-      this.ngControl.control?.setValue(this.formTemplate.default);
-      this.cdr.markForCheck();
-    }
-    if(this.formTemplate.enabled) {
-      this.ngControl.control?.enable();
-    } else {
-      this.ngControl.control?.disable();
-    }
-
-    this.multiple = (this.formTemplate.settings as OnshoreDropdownSettings)?.multiple;
-  }
-
-  ngOnDestroy() {
-    this.ngControl.control?.disable();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.cdr.markForCheck();
-  }
-
-  constructor(@Self() @Optional() public ngControl: NgControl,
-              private cdr: ChangeDetectorRef) {
-    this.ngControl.valueAccessor = this;
-  }
-}