onshore-forms 0.0.1

package/README.md

@@ -0,0 +1 @@
+# OnShore FormBuilder

package/karma.conf.js

@@ -0,0 +1,44 @@
+// 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

@@ -0,0 +1,11 @@
+{
+  "$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/package.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.0.1",
+  "name": "onshore-forms",
+  "description": "OnShore Angular Form Builder",
+  "author": {
+    "name": "Michael Bösken",
+    "email": "mboesken@onshore.tv"
+  },
+  "homepage": "https://onshore.tv",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OnShore-Development/onshore_libs.git"
+  },
+  "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",
+    "primeicons": "^6.0.1",
+    "primeng": "^14.1.2",
+    "primeflex": "^3.2.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "exports": {
+    "./theme1": {
+      "sass": "./styles/theme1/style.scss"
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+<!--<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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,68 @@
+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;
+  }
+}

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

@@ -0,0 +1,79 @@
+<div class="flex flex-column mb-3" style="max-width: 500px">
+  <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="w-100">
+
+      <div class="position-relative flex justify-content-center align-items-center" style="background-color: white">
+        <!--<app-image-placeholder class="w-100" [image]="image" imageStyle="position: absolut; height: 250px; width: 250px" [placeholder]="formSettings?.imagePlaceholder ? formSettings?.imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'" placeholderStyle="width: 250px; height: 250px"></app-image-placeholder>-->
+      </div>
+
+      <div class="flex flex-column mt-4 w-100">
+        <button pButton pRipple type="button"
+                [hidden]="formSettings?.disableImageSelection"
+                icon="fa fa-image"
+                label="Bild hochladen"
+                class="p-button-rounded p-button-outlined text-secondary mb-2"
+                [disabled]="disabled"
+                (click)="imageChooserDialogVisible = true">
+        </button>
+
+        <button pButton pRipple type="button"
+                [hidden]="formSettings?.disableWebcamSelection"
+                icon="fa fa-camera"
+                label="Foto aufnehmen"
+                class="p-button-rounded p-button-outlined text-secondary mb-2"
+                [disabled]="disabled"
+                (click)="webcamDialogVisible = true">
+        </button>
+
+        <!--<button pButton pRipple type="button"
+                [hidden]="formSettings?.disableMediaSelection"
+                icon="fa fa-photo-video"
+                label="Medienverwaltung"
+                class="p-button-rounded p-button-outlined text-secondary mb-2"
+                [disabled]="disabled"
+                (click)="searchMedia()">
+        </button>-->
+
+        <button pButton pRipple type="button"
+                [hidden]="formSettings?.disableDelete"
+                icon="fa fa-eraser"
+                label="Entfernen"
+                (click)="removeImage()"
+                [disabled]="!image || disabled"
+                class="p-button-rounded p-button-outlined text-secondary">
+        </button>
+
+      </div>
+
+  </div>
+
+  <small *ngIf="formTemplate.description"><i class="fa fa-info-circle"></i> {{formTemplate.description}}</small>
+
+</div>
+
+<!--
+<p-dialog [header]="'Bild auswählen'" [(visible)]="imageChooserDialogVisible" [modal]="true" [style]="{'max-width': '50vw'}">
+  <app-image-chooser buttonLabel="Auswählen"
+                     (choosen)="getFileImage($event)"
+                     (canceled)="imageChooserDialogVisible = false"
+                     [inverseColor]="inverseColor"
+                     [resizeToWidth]="imageWidth"
+                     [resizeToHeight]="imageHeight"
+                     [containWithinAspectRatio]="containWithinAspectRatio"
+                     [aspectRatio]="aspectRatio"
+                     backgroundColor="transparent"></app-image-chooser>
+</p-dialog>
+-->
+
+<!--
+<p-dialog [header]="'Foto aufnehmen'" [(visible)]="webcamDialogVisible" [modal]="true" [style]="{'max-width': '50vw'}">
+  <app-webcam *ngIf="webcamDialogVisible" buttonLabel="Smile" (shot)="getWebcamImage($event)" (canceled)="webcamDialogVisible = false" [inverseColor]="inverseColor"></app-webcam>
+</p-dialog>
+-->