argos/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html

<!-- <div *ngIf="fieldSet && isVisibleByVisibilityService && !tableRow" class="dynamic-form-composite-field row"> -->
<div *ngIf="fieldSet && !tableRow" class="dynamic-form-composite-field row">
	<!-- <div *ngIf="fieldSet.fields.length === 1 && this.visibilityRulesService.isVisibleMap[fieldSet.fields.id] ?? true" class="col-12"> -->
	<div *ngIf="fieldSet.fields.length === 1" class="col-12">
		<div class="row">
			<div *ngIf="showTitle" class="col-12">
				<app-form-composite-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-form-composite-title>
			</div>
			<div class="col-12">
				<div class="row">
					<app-form-field class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [field]="fieldSet.fields[0]" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
					<div *ngIf="showDelete" class="col-auto align-self-center">
						<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="propertiesFormGroup.get(fieldSet.fields[0].id).disabled">
							<mat-icon>delete</mat-icon>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div *ngIf="fieldSet.fields.length > 1" class="col-12">
		<div class="row">
			<div *ngIf="showTitle" class="col-12">
				<app-form-composite-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-form-composite-title>
			</div>
			<div class="col align-self-center">
			<!-- <div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField"> -->
				<div *ngFor="let fieldSetFormGroup of propertiesFormGroup.get('fieldSet.id'); let i = index;" class="col-12 compositeField">
					<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">

					<!-- <ng-container *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true"> -->
					<ng-container>
						<div class="row">
							<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
						</div>
						<app-form-field class="col-12 compositeField" [propertiesFormGroup]="propertiesFormGroup" [field]="field" [fieldSet]="fieldSet" [fieldSetFormGroup]="fieldSetFormGroup" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
					</ng-container>
				</div>
			</div>
			</div>
			<div *ngIf="showDelete" class="col-auto align-self-center">
				<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
					<mat-icon>delete</mat-icon>
				</button>
			</div>
		</div>
	</div>
	<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup.get('comment')" class="col-12">
		<rich-text-editor-component [form]="propertiesFormGroup.get('comment')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup.get('commentFieldValue'+fieldSet.id).disabled"></rich-text-editor-component>
	</div>
</div>
<ng-container *ngIf="fieldSet && isVisibleByVisibilityService && tableRow">
	<ng-container *ngFor="let field of fieldSet.fields;">
		<!-- <td *ngIf="this.visibilityRulesService.isVisibleMap[field.id] ?? true" class="text-wrap">{{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}}</td> -->
		<td class="text-wrap">{{propertiesFormGroup.get(field.id).get('value').getRawValue() | fieldValue | translate}}</td>
	</ng-container>
	<td class="actions">
		<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()" [disabled]="propertiesFormGroup.get(field.id).disabled">
			<mat-icon>edit</mat-icon>
		</button>
		<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="propertiesFormGroup.get(field.id).disabled">
			<mat-icon>delete</mat-icon>
		</button>
	</td>
</ng-container>