argos/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-comp...

422 lines
22 KiB
HTML

<!-- TO LINK -->
<!-- <div class="row">
<h4 *ngIf="isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE' | translate}}</h4>
<h4 *ngIf="!isComposite" class="col-auto titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE' | translate}}</h4>
<mat-checkbox class="col-auto" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}</mat-checkbox>
<mat-checkbox class="col-auto" [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)"
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}</mat-checkbox>
<mat-checkbox class="col" [formControl]="this.form.get('hasCommentField')">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}</mat-checkbox>
</div> -->
<!-- TO LINK -->
<!--
<div class="row">
<mat-form-field *ngIf="isComposite" class="col">
<input matInput type="string" placeholder="Id" [formControl]="form.get('id')" required>
<mat-error *ngIf="form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isComposite" class="col">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-TITLE' | translate}}"
[formControl]="this.form.get('title')">
</mat-form-field>
<mat-form-field *ngIf="!isComposite" class="col">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.FIELD-TITLE' | translate}}"
[formControl]="this.form.get('title')">
</mat-form-field>
<mat-form-field *ngIf="isMultiplicityEnabled" class="col">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
type="number" [formControl]="form.get('multiplicity').get('min')" required>
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isMultiplicityEnabled" class="col">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field class="col">
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ORDER' | translate}}"
[formControl]="this.form.get('ordinal')" required>
</mat-form-field>
</div> -->
<!-- ID TOP RIGHT CORNER -->
<!-- <div class="field-id-container">
{{this.form.get('id').value}}
<button mat-mini-fab class="field-id-container-icon">
<mat-icon>delete</mat-icon>
</button>
</div> -->
<!-- MAIN CONTENT -->
<div class="main-content-page" [ngClass]="{'pb-2': !hasFocus}">
<!-- TITLE -->
<div class="col-12">
<div class="row fielset-header">
<!-- <div class="col-auto d-flex">
<div class="align-self-center">
{{numbering}}
</div>
</div> -->
<mat-form-field appearance="none" class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
<input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled>
</mat-form-field>
<!-- [appearance]="titleControl.focused? 'legacy':'none'" floatLabel="never" -->
<mat-form-field class="col field-title" [appearance]="'none'" floatLabel="never">
<input matInput type="text" [placeholder]="('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' |translate)+' '+('DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput"
[formControl]="this.form.get('title')">
</mat-form-field>
</div>
</div>
<div style="position: relative;" class="col-12">
<ng-container *ngIf="hasFocus">
<div class="row" *ngIf="showDescription">
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
[formControl]="this.form.get('description')">
</mat-form-field>
</div>
<div class="row" *ngIf="showExtendedDescription">
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
[formControl]="this.form.get('extendedDescription')"/>
</mat-form-field>
</div>
<div class="row" *ngIf="showAdditionalInfo">
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
[formControl]="this.form.get('additionalInformation')"/>
</mat-form-field>
</div>
<div class="row">
<mat-form-field *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field" appearance="legacy">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
type="number" [formControl]="form.get('multiplicity').get('min')" required>
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isMultiplicityEnabled" class="col pr-0 underline-line-field" appearance="legacy">
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
</div>
</ng-container>
</div>
<!-- FIELDS DETAILS AND ACTIONS -->
<div class="row">
<!-- FIELDS -->
<div class="col">
<div>
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
>
<!-- field-container -->
<!-- [ngClass]="{'field-container-active': (field.get('id').value === targetField?.get('id').value) && hasFocus}" -->
<!-- <div class="field-id-container">
{{form.get('fields').get(''+i).get('id').value}} -->
<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
<mat-icon>delete</mat-icon>
</button> -->
<!-- </div> -->
<!-- *ngIf="!isComposite" -->
<app-dataset-profile-editor-field-component class="col-12"
[form]="form.get('fields').get(''+i)" [showOrdinal]="false"
[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
[expandView]="hasFocus"
[canBeDeleted]="form.get('fields')['controls'].length !=1"
(delete)="deleteField(i)">
</app-dataset-profile-editor-field-component>
</div>
<hr *ngIf="hasFocus">
</ng-container>
<!--
<div *ngIf="isComposite" class="row">
<h4 class="col-12 titleStile">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' | translate}}
</h4>
<div class="col-12">
<mat-expansion-panel *ngFor="let field of form.get('fields')['controls'] let i=index;" #panel class="field-container">
<div class="field-id-container">
random id
</div>
<mat-expansion-panel-header>
<mat-panel-title class="cardTitle">{{i + 1}}. {{getFieldTile(field, i)}}</mat-panel-title>
<div class="row">
<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteField(i);" [disabled]="viewOnly">
<mat-icon>delete</mat-icon>
</button>
</div>
</mat-expansion-panel-header>
<div id="{{indexPath + 'f' + i}}" *ngIf="panel.expanded">
<app-dataset-profile-editor-field-component [form]="form.get('fields').get(''+i)" [indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"></app-dataset-profile-editor-field-component>
</div>
</mat-expansion-panel>
</div>
<div class="col-12">
<button mat-button class="full-width" (click)="addNewField()" [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD' | translate}}</button>
</div>
</div> -->
</div>
</div>
<!-- PREVIEW -->
<div class="col-12 previewer">
<div *ngIf="hasFocus" class="d-flex mb-3" style="justify-content: space-between;">
<span style="font-weight: bold; font-style: italic;">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('viewStyle').get('renderStyle').value">
<ng-container *ngIf="!previewDirty">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
</ng-container>
<ng-container *ngIf="previewDirty">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}}
</ng-container>
</span>
</div>
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;" >
<div *ngIf="previewForm && showPreview && firstField?.get('viewStyle').get('renderStyle').value">
<app-form-section-inner [form]="previewForm">
</app-form-section-inner>
</div>
</div>
<div class="w-100" *ngIf="!firstField?.get('viewStyle').get('renderStyle').value">
<em>
{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
</em>
</div>
</div>
<div class="col-12">
<hr *ngIf="hasFocus">
</div>
</div>
<ng-container *ngIf="hasFocus">
<div class="row justify-content-end pt-2" >
<div class="col-auto">
<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
<!-- <li class="list-inline-item" (click)="addNewField()"><mat-icon>folder</mat-icon> <small>Add input</small></li> -->
<li class="list-inline-item" *ngIf="!viewOnly">
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate"/>
<span class="fieldset-new-input-action">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
</span>
<!-- <mat-icon [matMenuTriggerFor]="inputmenu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate">folder</mat-icon> -->
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
<!-- <button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.TextArea)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.FreeText)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}</button>
<mat-divider></mat-divider>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.BooleanDecision)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.RadioBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Select)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.CheckBox)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}</button>
<mat-divider></mat-divider>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatePicker)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Currency)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}</button>
<mat-divider></mat-divider>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Registries)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Services)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Researchers)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Organizations)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.ExternalDatasets)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DataRepositories)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Other)">{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}</button>
<mat-divider></mat-divider>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">Internal DMPs</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Tags)">Tags</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">Dataset Identifier</button>
<button class="mat-menu-item" (click)="addNewInput(viewTypeEnum.Validation)">Validation</button>
-->
<mat-action-list>
<button mat-list-item (click)="addNewInput(viewTypeEnum.TextArea)">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Text Area icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.FreeText)">
<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="Free Text icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(viewTypeEnum.BooleanDecision)">
<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.RadioBox)">
<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Select)">
<span class="input_icon">
<img src="/assets/images/editor/icons/select.svg" alt="Select icon">
</span>
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.CheckBox)">
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox Icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(viewTypeEnum.DatePicker)">
<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker Icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Currency)">
<img src="/assets/images/editor/icons/currency.svg" class="input_icon" alt="Currency Icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
<img src="/assets/images/editor/icons/api.svg" class="input_icon" alt="APIs icon">
APIs
</button>
<mat-action-list class="ml-4">
<button mat-list-item (click)="addNewInput(viewTypeEnum.Registries)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Services)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Services icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Researchers)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Researchers icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Organizations)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Organizations icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.ExternalDatasets)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="External Datasets icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.DataRepositories)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DataRepositories icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Other)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Other icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}
</button>
</mat-action-list>
<mat-divider></mat-divider>
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
<img src="/assets/images/editor/icons/argos_entities.svg" class="input_icon" alt="Argos Entities icon">
Argos Entities
</button>
<mat-action-list class="ml-4">
<button mat-list-item (click)="addNewInput(viewTypeEnum.InternalDmpEntities)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.InternalDmpEntities)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Tags)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Tags)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.DatasetIdentifier)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Datset Identifier icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatasetIdentifier)}}
</button>
<button mat-list-item (click)="addNewInput(viewTypeEnum.Validation)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Validation)}}
</button>
</mat-action-list>
</mat-action-list>
</mat-menu>
</li>
<!-- <li class="list-inline-item"><mat-icon>folder</mat-icon><small>CommentField</small></li> -->
<li class="list-inline-item">
<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
</li>
<li class="list-inline-item">
<mat-checkbox class="fieldset-checkbox-action-dataset-profile-editor" [checked]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
</mat-checkbox>
</li>
<li class="list-inline-item">
<!-- <mat-icon>more_vert</mat-icon> -->
<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
<mat-menu #menu="matMenu">
<!-- TODO to check -->
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox>
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox>
</mat-menu>
</li>
</ul>
</div>
</div>
</ng-container>
</div>
<!--
<span>Preview</span>
<app-form-composite-field [form]="previewForm" *ngIf="previewForm">
</app-form-composite-field> -->
<!--
Current FORM: {{this.form.value |json}}
<br>
Target: {{this.targetField?.value |json}} -->
<!--
<button (click)="generatePreview()">Generate preview</button>
-->