From 090b65ff9eb2fa7f9ce2425b311639043c83906f Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Wed, 16 Feb 2022 15:36:59 +0100
Subject: [PATCH] Refactor fixed size of dynamic positioned elements
Remove the wrapper divs in each element component and add the
'fixed-size-content-wrapper' class to the element overlays
of player and editor
---
projects/common/assets/styles.css | 5 +-
.../ui-elements/audio/audio.component.ts | 38 +++--
.../ui-elements/button/button.component.ts | 52 +++---
.../checkbox/checkbox.component.ts | 44 +++--
.../ui-elements/cloze/cloze.component.ts | 60 ++++---
.../drop-list/drop-list.component.ts | 3 +-
.../dropdown/dropdown.component.ts | 56 ++++---
.../ui-elements/frame/frame.component.ts | 18 +--
.../ui-elements/image/image.component.ts | 28 ++--
.../ui-elements/likert/likert.component.ts | 86 +++++-----
.../radio-group-images.component.ts | 118 +++++++-------
.../radio/radio-button-group.component.ts | 64 ++++----
.../ui-elements/slider/slider.component.ts | 152 +++++++++---------
.../spell-correct/spell-correct.component.ts | 76 +++++----
.../text-area/text-area.component.ts | 56 ++++---
.../text-field/text-field.component.ts | 126 +++++++--------
.../common/ui-elements/text/text.component.ts | 50 +++---
.../ui-elements/video/video.component.ts | 42 +++--
.../dynamic-canvas-overlay.component.ts | 2 +
.../element-container.component.html | 3 +-
20 files changed, 527 insertions(+), 552 deletions(-)
diff --git a/projects/common/assets/styles.css b/projects/common/assets/styles.css
index 14eaa4277..83b0c8ca4 100644
--- a/projects/common/assets/styles.css
+++ b/projects/common/assets/styles.css
@@ -48,8 +48,11 @@ blockquote p {
display: inline;
}
-.element-content-wrapper {
+.fixed-size-content-wrapper {
display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
width: 100%;
height: 100%;
}
diff --git a/projects/common/ui-elements/audio/audio.component.ts b/projects/common/ui-elements/audio/audio.component.ts
index 767c8eb6b..353657bf4 100644
--- a/projects/common/ui-elements/audio/audio.component.ts
+++ b/projects/common/ui-elements/audio/audio.component.ts
@@ -5,27 +5,25 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'aspect-audio',
template: `
- <div class="element-content-wrapper">
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize">
- <audio #player
- (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
- (pause)="onMediaPlayStatusChanged.emit(null)"
- [style.width.%]="100"
- [src]="elementModel.src | safeResourceUrl">
- </audio>
- <aspect-control-bar [player]="player"
- [project]="project"
- [id]="elementModel.id"
- [playerProperties]="elementModel.playerProps"
- [active]="active"
- [dependencyDissolved]="dependencyDissolved"
- (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
- (elementValueChanged)="elementValueChanged.emit($event)">
- </aspect-control-bar>
- </div>
+ <audio #player
+ (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
+ (pause)="onMediaPlayStatusChanged.emit(null)"
+ [style.width.%]="100"
+ [src]="elementModel.src | safeResourceUrl">
+ </audio>
+ <aspect-control-bar [player]="player"
+ [project]="project"
+ [id]="elementModel.id"
+ [playerProperties]="elementModel.playerProps"
+ [active]="active"
+ [dependencyDissolved]="dependencyDissolved"
+ (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
+ (elementValueChanged)="elementValueChanged.emit($event)">
+ </aspect-control-bar>
</div>
`
})
diff --git a/projects/common/ui-elements/button/button.component.ts b/projects/common/ui-elements/button/button.component.ts
index f626bed06..da904596e 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -7,36 +7,34 @@ import { ButtonElement } from './button-element';
@Component({
selector: 'aspect-button',
template: `
- <div class="element-content-wrapper">
- <button *ngIf="!elementModel.imageSrc" mat-button
- type='button'
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <button *ngIf="!elementModel.imageSrc" mat-button
+ type='button'
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [style.border-radius.px]="elementModel.borderRadius"
- (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
- {{elementModel.label}}
- </button>
- <input *ngIf="elementModel.imageSrc" type="image"
- [src]="elementModel.imageSrc | safeResourceUrl"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [style.background-color]="elementModel.surfaceProps.backgroundColor"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [style.border-radius.px]="elementModel.borderRadius"
+ (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
+ {{elementModel.label}}
+ </button>
+ <input *ngIf="elementModel.imageSrc" type="image"
+ [src]="elementModel.imageSrc | safeResourceUrl"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [class.fixed-size-dynamic-image]="elementModel.positionProps.dynamicPositioning &&
+ [class.fixed-size-dynamic-image]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : null"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : null"
- [alt]="'imageNotFound' | translate"
- (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
- </div>
+ [class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : null"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : null"
+ [alt]="'imageNotFound' | translate"
+ (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
`,
styles: [
'.dynamic-image {width: 100%; height: fit-content;}',
diff --git a/projects/common/ui-elements/checkbox/checkbox.component.ts b/projects/common/ui-elements/checkbox/checkbox.component.ts
index c9bb53122..0c609cce6 100644
--- a/projects/common/ui-elements/checkbox/checkbox.component.ts
+++ b/projects/common/ui-elements/checkbox/checkbox.component.ts
@@ -6,30 +6,28 @@ import { CheckboxElement } from './checkbox-element';
@Component({
selector: 'aspect-checkbox',
template: `
- <div class="element-content-wrapper">
- <div class="mat-form-field"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div class="mat-form-field"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.background-color]="elementModel.surfaceProps.backgroundColor">
- <mat-checkbox #checkbox class="example-margin"
- [formControl]="elementFormControl"
- [checked]="$any(elementModel.value)"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- (click)="elementModel.readOnly ? $event.preventDefault() : null">
- <div [style.line-height.%]="elementModel.lineHeight" [innerHTML]="elementModel.label"></div>
- </mat-checkbox>
- <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
- class="error-message">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
- </div>
+ [style.background-color]="elementModel.surfaceProps.backgroundColor">
+ <mat-checkbox #checkbox class="example-margin"
+ [formControl]="elementFormControl"
+ [checked]="$any(elementModel.value)"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ (click)="elementModel.readOnly ? $event.preventDefault() : null">
+ <div [style.line-height.%]="elementModel.lineHeight" [innerHTML]="elementModel.label"></div>
+ </mat-checkbox>
+ <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+ class="error-message">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
</div>
`,
styles: [
diff --git a/projects/common/ui-elements/cloze/cloze.component.ts b/projects/common/ui-elements/cloze/cloze.component.ts
index 9d7c10d28..861e78d28 100644
--- a/projects/common/ui-elements/cloze/cloze.component.ts
+++ b/projects/common/ui-elements/cloze/cloze.component.ts
@@ -13,40 +13,38 @@ import { ElementComponent } from '../../directives/element-component.directive';
<ng-container *ngIf="elementModel.document.content.length == 0">
Kein Dokument vorhanden
</ng-container>
- <div class="element-content-wrapper">
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
- <ng-container *ngFor="let part of elementModel.document.content">
- <ul *ngIf="part.type === 'bulletList'"
- [style.font-size]="part.attrs.fontSize"
- [style.list-style]="part.attrs.listStyle">
- <li *ngFor="let listItem of part.content">
- <ng-container *ngFor="let listItemPart of $any(listItem).content"
- [ngTemplateOutlet]="paragraphs"
- [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
- </li>
- </ul>
- <ol *ngIf="part.type === 'orderedList'"
- [style.font-size]="part.attrs.fontSize"
- [style.list-style]="part.attrs.listStyle">
- <li *ngFor="let listItem of part.content">
- <ng-container *ngFor="let listItemPart of $any(listItem).content"
- [ngTemplateOutlet]="paragraphs"
- [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
- </li>
- </ol>
- <blockquote *ngIf="part.type === 'blockquote'">
- <ng-container *ngFor="let blockquotePart of $any(part).content"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
+ <ng-container *ngFor="let part of elementModel.document.content">
+ <ul *ngIf="part.type === 'bulletList'"
+ [style.font-size]="part.attrs.fontSize"
+ [style.list-style]="part.attrs.listStyle">
+ <li *ngFor="let listItem of part.content">
+ <ng-container *ngFor="let listItemPart of $any(listItem).content"
[ngTemplateOutlet]="paragraphs"
- [ngTemplateOutletContext]="{ $implicit: blockquotePart }"></ng-container>
- </blockquote>
- <ng-container *ngIf="part.type === 'paragraph' || part.type === 'heading'"
+ [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
+ </li>
+ </ul>
+ <ol *ngIf="part.type === 'orderedList'"
+ [style.font-size]="part.attrs.fontSize"
+ [style.list-style]="part.attrs.listStyle">
+ <li *ngFor="let listItem of part.content">
+ <ng-container *ngFor="let listItemPart of $any(listItem).content"
+ [ngTemplateOutlet]="paragraphs"
+ [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
+ </li>
+ </ol>
+ <blockquote *ngIf="part.type === 'blockquote'">
+ <ng-container *ngFor="let blockquotePart of $any(part).content"
[ngTemplateOutlet]="paragraphs"
- [ngTemplateOutletContext]="{ $implicit: part }"></ng-container>
- </ng-container>
- </div>
+ [ngTemplateOutletContext]="{ $implicit: blockquotePart }"></ng-container>
+ </blockquote>
+ <ng-container *ngIf="part.type === 'paragraph' || part.type === 'heading'"
+ [ngTemplateOutlet]="paragraphs"
+ [ngTemplateOutletContext]="{ $implicit: part }"></ng-container>
+ </ng-container>
</div>
<ng-template #paragraphs let-part>
diff --git a/projects/common/ui-elements/drop-list/drop-list.component.ts b/projects/common/ui-elements/drop-list/drop-list.component.ts
index d2ebf5364..065db3716 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -10,7 +10,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
@Component({
selector: 'aspect-drop-list',
template: `
- <div class="element-content-wrapper">
+ <div class="list-container">
<!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
<!-- class style.-->
<div class="list"
@@ -69,6 +69,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
</div>
`,
styles: [
+ '.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
'.list {border-radius: 10px; margin-bottom: 3px;}', // extra margin to reserve for outline
'.text-item {border-radius: 10px; padding: 10px;}',
'.item {cursor: grab}',
diff --git a/projects/common/ui-elements/dropdown/dropdown.component.ts b/projects/common/ui-elements/dropdown/dropdown.component.ts
index 72e842f30..ec3b4e38b 100644
--- a/projects/common/ui-elements/dropdown/dropdown.component.ts
+++ b/projects/common/ui-elements/dropdown/dropdown.component.ts
@@ -5,36 +5,34 @@ import { DropdownElement } from './dropdown-element';
@Component({
selector: 'aspect-dropdown',
template: `
- <div class="element-content-wrapper">
- <mat-form-field appearance="fill"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <mat-form-field appearance="fill"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
- <mat-label [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- {{$any(elementModel).label}}
- </mat-label>
- <mat-select [formControl]="elementFormControl" [value]="elementModel.value">
- <mat-option *ngIf="elementModel.allowUnset" value=""
- [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
- (click)="$event.preventDefault()">
- </mat-option>
- <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i + 1"
- [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
- {{option}}
- </mat-option>
- </mat-select>
- <mat-error *ngIf="elementFormControl.errors">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
- </mat-form-field>
- </div>
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
+ <mat-label [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ {{$any(elementModel).label}}
+ </mat-label>
+ <mat-select [formControl]="elementFormControl" [value]="elementModel.value">
+ <mat-option *ngIf="elementModel.allowUnset" value=""
+ [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+ (click)="$event.preventDefault()">
+ </mat-option>
+ <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i + 1"
+ [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
+ {{option}}
+ </mat-option>
+ </mat-select>
+ <mat-error *ngIf="elementFormControl.errors">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </mat-form-field>
`
})
export class DropdownComponent extends FormElementComponent {
diff --git a/projects/common/ui-elements/frame/frame.component.ts b/projects/common/ui-elements/frame/frame.component.ts
index 587ed875c..2fc18b10b 100644
--- a/projects/common/ui-elements/frame/frame.component.ts
+++ b/projects/common/ui-elements/frame/frame.component.ts
@@ -5,21 +5,19 @@ import { ElementComponent } from '../../directives/element-component.directive';
@Component({
selector: 'aspect-frame',
template: `
- <div class="element-content-wrapper">
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ?
+ [style.width]="elementModel.positionProps.fixedSize ?
elementModel.width + 'px' :
'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
- [style.height]="elementModel.positionProps.fixedSize ?
+ [style.height]="elementModel.positionProps.fixedSize ?
elementModel.height + 'px' :
'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
- [style.border-style]="elementModel.borderStyle"
- [style.border-width.px]="elementModel.borderWidth"
- [style.border-color]="elementModel.borderColor"
- [style.border-radius.px]="elementModel.borderRadius"
- [style.background-color]="elementModel.surfaceProps.backgroundColor">
- </div>
+ [style.border-style]="elementModel.borderStyle"
+ [style.border-width.px]="elementModel.borderWidth"
+ [style.border-color]="elementModel.borderColor"
+ [style.border-radius.px]="elementModel.borderRadius"
+ [style.background-color]="elementModel.surfaceProps.backgroundColor">
</div>
`
})
diff --git a/projects/common/ui-elements/image/image.component.ts b/projects/common/ui-elements/image/image.component.ts
index e9bbb468e..7de353f1d 100644
--- a/projects/common/ui-elements/image/image.component.ts
+++ b/projects/common/ui-elements/image/image.component.ts
@@ -8,8 +8,7 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-image',
template: `
- <div class="element-content-wrapper">
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
[style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
[class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
@@ -17,19 +16,18 @@ import { ValueChangeElement } from '../../models/uI-element';
(mouseover)="magnifierVisible = true"
(mouseenter)="magnifierVisible = true"
(mouseleave)="magnifierVisible = false">
- <img #image
- [src]="elementModel.src | safeResourceUrl"
- [alt]="'imageNotFound' | translate"
- [class]="elementModel.scale ? 'fit-image' : 'max-size-image'">
- <aspect-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
- [imageId]="elementModel.id"
- [size]="elementModel.magnifierSize"
- [zoom]="elementModel.magnifierZoom"
- [used]="elementModel.magnifierUsed"
- [image]=image
- (elementValueChanged)="elementValueChanged.emit($event)">
- </aspect-magnifier>
- </div>
+ <img #image
+ [src]="elementModel.src | safeResourceUrl"
+ [alt]="'imageNotFound' | translate"
+ [class]="elementModel.scale ? 'fit-image' : 'max-size-image'">
+ <aspect-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
+ [imageId]="elementModel.id"
+ [size]="elementModel.magnifierSize"
+ [zoom]="elementModel.magnifierZoom"
+ [used]="elementModel.magnifierUsed"
+ [image]=image
+ (elementValueChanged)="elementValueChanged.emit($event)">
+ </aspect-magnifier>
</div>
`,
styles: [
diff --git a/projects/common/ui-elements/likert/likert.component.ts b/projects/common/ui-elements/likert/likert.component.ts
index cdb3d0c1c..06656d878 100644
--- a/projects/common/ui-elements/likert/likert.component.ts
+++ b/projects/common/ui-elements/likert/likert.component.ts
@@ -13,54 +13,52 @@ import { ElementComponent } from '../../directives/element-component.directive';
<div *ngIf="elementModel.rows.length === 0 && elementModel.columns.length === 0">
Keine Zeilen oder Spalten vorhanden
</div>
- <div class="element-content-wrapper">
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'">
- <div class="mat-typography"
- [style.display]="'grid'"
- [style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'">
+ <div class="mat-typography"
+ [style.display]="'grid'"
+ [style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
'1fr '.repeat(elementModel.columns.length)"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- <div *ngFor="let column of elementModel.columns; let i = index"
- class="columns" fxLayout="column" fxLayoutAlign="end center"
- [style.grid-column-start]="2 + i"
- [style.grid-column-end]="3 + i"
- [style.grid-row-start]="1"
- [style.grid-row-end]="2">
- <img *ngIf="column.imgSrc && column.position === 'above'"
- [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
- [style.object-fit]="'scale-down'">
- {{column.text}}
- <img *ngIf="column.imgSrc && column.position === 'below'"
- [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
- [style.object-fit]="'scale-down'">
- </div>
+ [style.background-color]="elementModel.surfaceProps.backgroundColor"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ <div *ngFor="let column of elementModel.columns; let i = index"
+ class="columns" fxLayout="column" fxLayoutAlign="end center"
+ [style.grid-column-start]="2 + i"
+ [style.grid-column-end]="3 + i"
+ [style.grid-row-start]="1"
+ [style.grid-row-end]="2">
+ <img *ngIf="column.imgSrc && column.position === 'above'"
+ [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
+ [style.object-fit]="'scale-down'">
+ {{column.text}}
+ <img *ngIf="column.imgSrc && column.position === 'below'"
+ [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
+ [style.object-fit]="'scale-down'">
+ </div>
- <ng-container *ngFor="let row of elementModel.rows; let i = index">
- <aspect-likert-radio-button-group
- [style.background-color]="elementModel.lineColoring && i % 2 === 0 ?
+ <ng-container *ngFor="let row of elementModel.rows; let i = index">
+ <aspect-likert-radio-button-group
+ [style.background-color]="elementModel.lineColoring && i % 2 === 0 ?
elementModel.lineColoringColor : ''"
- [style.grid-column-start]="1"
- [style.grid-column-end]="elementModel.columns.length + 2"
- [style.grid-row-start]="2 + i"
- [style.grid-row-end]="3 + i"
- [style.padding.px]="3"
- [elementModel]="row"
- [firstColumnSizeRatio]="elementModel.firstColumnSizeRatio"
- [parentForm]="parentForm"
- (elementValueChanged)="elementValueChanged.emit($event)">
- </aspect-likert-radio-button-group>
- </ng-container>
- </div>
+ [style.grid-column-start]="1"
+ [style.grid-column-end]="elementModel.columns.length + 2"
+ [style.grid-row-start]="2 + i"
+ [style.grid-row-end]="3 + i"
+ [style.padding.px]="3"
+ [elementModel]="row"
+ [firstColumnSizeRatio]="elementModel.firstColumnSizeRatio"
+ [parentForm]="parentForm"
+ (elementValueChanged)="elementValueChanged.emit($event)">
+ </aspect-likert-radio-button-group>
+ </ng-container>
</div>
</div>
`,
diff --git a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
index 61a3719fc..e7da1b453 100644
--- a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
+++ b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
@@ -5,68 +5,66 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-radio-group-images',
template: `
- <div class="element-content-wrapper">
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.display]="'grid !important'"
- [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- <label id="radio-group-label" class="label"
- [style.grid-column-start]="1"
- [style.grid-column-end]="2 + elementModel.columns.length"
- [style.grid-row-start]="1"
- [style.grid-row-end]="2"
- [innerHTML]="elementModel.label">
- </label>
- <div *ngFor="let option of elementModel.columns; let i = index"
- class="columns" fxLayout="column" fxLayoutAlign="center center"
- [style.grid-column-start]="1 + i"
- [style.grid-column-end]="2 + i"
- [style.grid-row-start]="2"
- [style.grid-row-end]="3"
- (click)="selectOption(i + 1)">
- <img *ngIf="option.imgSrc && option.position === 'above'"
- [style.object-fit]="'scale-down'"
- [style.max-width.%]="100"
- [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
- <div>{{option.text}}</div>
- <img *ngIf="option.imgSrc && option.position === 'below'"
- [style.object-fit]="'scale-down'"
- [style.max-width.%]="100"
- [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
- </div>
- <mat-radio-group aria-labelledby="radio-group-label"
- [formControl]="elementFormControl"
- [style.display]="'grid'"
- [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
- [style.grid-column-start]="1"
- [style.grid-column-end]="2 + elementModel.columns.length"
- [style.grid-row-start]="3"
- [style.grid-row-end]="4"
- [value]="elementModel.value">
- <mat-radio-button *ngFor="let option of elementModel.columns; let i = index"
- aria-labelledby="radio-group-label"
- [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
- [value]="i + 1"
- [style.grid-column-start]="1 + i"
- [style.grid-column-end]="2 + i"
- [style.grid-row-start]="1"
- [style.grid-row-end]="2">
- </mat-radio-button>
- </mat-radio-group>
- <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
- class="error-message">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
+ [style.display]="'grid !important'"
+ [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
+ [style.background-color]="elementModel.surfaceProps.backgroundColor"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ <label id="radio-group-label" class="label"
+ [style.grid-column-start]="1"
+ [style.grid-column-end]="2 + elementModel.columns.length"
+ [style.grid-row-start]="1"
+ [style.grid-row-end]="2"
+ [innerHTML]="elementModel.label">
+ </label>
+ <div *ngFor="let option of elementModel.columns; let i = index"
+ class="columns" fxLayout="column" fxLayoutAlign="center center"
+ [style.grid-column-start]="1 + i"
+ [style.grid-column-end]="2 + i"
+ [style.grid-row-start]="2"
+ [style.grid-row-end]="3"
+ (click)="selectOption(i + 1)">
+ <img *ngIf="option.imgSrc && option.position === 'above'"
+ [style.object-fit]="'scale-down'"
+ [style.max-width.%]="100"
+ [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
+ <div>{{option.text}}</div>
+ <img *ngIf="option.imgSrc && option.position === 'below'"
+ [style.object-fit]="'scale-down'"
+ [style.max-width.%]="100"
+ [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
</div>
+ <mat-radio-group aria-labelledby="radio-group-label"
+ [formControl]="elementFormControl"
+ [style.display]="'grid'"
+ [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
+ [style.grid-column-start]="1"
+ [style.grid-column-end]="2 + elementModel.columns.length"
+ [style.grid-row-start]="3"
+ [style.grid-row-end]="4"
+ [value]="elementModel.value">
+ <mat-radio-button *ngFor="let option of elementModel.columns; let i = index"
+ aria-labelledby="radio-group-label"
+ [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+ [value]="i + 1"
+ [style.grid-column-start]="1 + i"
+ [style.grid-column-end]="2 + i"
+ [style.grid-row-start]="1"
+ [style.grid-row-end]="2">
+ </mat-radio-button>
+ </mat-radio-group>
+ <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+ class="error-message">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
</div>
`,
styles: [
diff --git a/projects/common/ui-elements/radio/radio-button-group.component.ts b/projects/common/ui-elements/radio/radio-button-group.component.ts
index 33afd1136..9ec65927e 100644
--- a/projects/common/ui-elements/radio/radio-button-group.component.ts
+++ b/projects/common/ui-elements/radio/radio-button-group.component.ts
@@ -5,42 +5,40 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
@Component({
selector: 'aspect-radio-button-group',
template: `
- <div class="element-content-wrapper">
- <div class="mat-form-field"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div class="mat-form-field"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- <label id="radio-group-label"
- [innerHTML]="elementModel.label">
- </label>
- <mat-radio-group aria-labelledby="radio-group-label"
- [fxLayout]="elementModel.alignment"
- [formControl]="elementFormControl"
- [value]="elementModel.value"
- [style.margin-top.px]="elementModel.label !== '' ? 10 : 0">
- <mat-radio-button *ngFor="let option of elementModel.options; let i = index"
- [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
+ [style.background-color]="elementModel.surfaceProps.backgroundColor"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ <label id="radio-group-label"
+ [innerHTML]="elementModel.label">
+ </label>
+ <mat-radio-group aria-labelledby="radio-group-label"
+ [fxLayout]="elementModel.alignment"
+ [formControl]="elementFormControl"
+ [value]="elementModel.value"
+ [style.margin-top.px]="elementModel.label !== '' ? 10 : 0">
+ <mat-radio-button *ngFor="let option of elementModel.options; let i = index"
+ [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
elementFormControl.value !== null &&
elementFormControl.value !== i + 1 }"
- [value]="i + 1"
- [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
- [style.line-height.%]="elementModel.fontProps.lineHeight">
- {{option}}
- </mat-radio-button>
- <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
- class="error-message">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
- </mat-radio-group>
- </div>
+ [value]="i + 1"
+ [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+ [style.line-height.%]="elementModel.fontProps.lineHeight">
+ {{option}}
+ </mat-radio-button>
+ <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+ class="error-message">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </mat-radio-group>
</div>
`,
styles: [
diff --git a/projects/common/ui-elements/slider/slider.component.ts b/projects/common/ui-elements/slider/slider.component.ts
index 8ef6e4151..44cbded71 100644
--- a/projects/common/ui-elements/slider/slider.component.ts
+++ b/projects/common/ui-elements/slider/slider.component.ts
@@ -7,90 +7,88 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-slider',
template: `
- <div class="element-content-wrapper">
- <div fxLayout="column"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div fxLayout="column"
+ [style.background-color]="elementModel.surfaceProps.backgroundColor"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize">
- <div *ngIf="elementModel.label"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- {{elementModel.label}}
- </div>
- <div #valueContainer
- [class.values]="elementModel.label && !elementModel.showValues">
- <div fxFlex fxLayout="row" fxLayoutAlign="space-between">
- <div #valueMin
- class="value-container-min">
- <div *ngIf="elementModel.showValues"
- class="value-container">
- <div
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- {{elementModel.minValue | number:'':'de'}}
- </div>
- <div *ngIf="elementModel.barStyle" class="number-marker"></div>
+ <div *ngIf="elementModel.label"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ {{elementModel.label}}
+ </div>
+ <div #valueContainer
+ [class.values]="elementModel.label && !elementModel.showValues">
+ <div fxFlex fxLayout="row" fxLayoutAlign="space-between">
+ <div #valueMin
+ class="value-container-min">
+ <div *ngIf="elementModel.showValues"
+ class="value-container">
+ <div
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ {{elementModel.minValue | number:'':'de'}}
</div>
+ <div *ngIf="elementModel.barStyle" class="number-marker"></div>
</div>
- <div #valueMax
- [class.value-container-max]="elementModel.barStyle">
- <div *ngIf="elementModel.showValues"
- class="value-container">
- <div
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
- {{elementModel.maxValue | number:'':'de'}}
- </div>
- <div *ngIf="elementModel.barStyle"
- class="number-marker">
- </div>
+ </div>
+ <div #valueMax
+ [class.value-container-max]="elementModel.barStyle">
+ <div *ngIf="elementModel.showValues"
+ class="value-container">
+ <div
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+ {{elementModel.maxValue | number:'':'de'}}
+ </div>
+ <div *ngIf="elementModel.barStyle"
+ class="number-marker">
</div>
</div>
</div>
</div>
- <div *ngIf="elementModel.barStyle"
- fxFlex fxLayout="row" fxLayoutAlign="space-between center"
- [style.margin-top.px]="elementModel.showValues ? -18 : 0"
- [style.margin-left.px]="valueMin.offsetWidth/2">
- <div class="arrow-line"></div>
- <div class="arrow-head"></div>
- </div>
- <div *ngIf="valueMax && valueMin"
- [style.display]="'flex'"
- [style.flex-direction]="'column'"
- [style.height.%]="100"
- [style.margin-right.px]="elementModel.barStyle ? valueMax.offsetWidth/2 - 8 : valueMax.offsetWidth"
- [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
- [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
- <mat-slider
- [class]="elementModel.barStyle ? 'bar-style' : ''"
- [thumbLabel]="elementModel.thumbLabel"
- [formControl]="elementFormControl"
- [style.width.%]="100"
- [max]="elementModel.maxValue"
- [min]="elementModel.minValue">
- </mat-slider>
- <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
- {{elementModel.requiredWarnMessage}}
- </mat-error>
- </div>
+ </div>
+ <div *ngIf="elementModel.barStyle"
+ fxFlex fxLayout="row" fxLayoutAlign="space-between center"
+ [style.margin-top.px]="elementModel.showValues ? -18 : 0"
+ [style.margin-left.px]="valueMin.offsetWidth/2">
+ <div class="arrow-line"></div>
+ <div class="arrow-head"></div>
+ </div>
+ <div *ngIf="valueMax && valueMin"
+ [style.display]="'flex'"
+ [style.flex-direction]="'column'"
+ [style.height.%]="100"
+ [style.margin-right.px]="elementModel.barStyle ? valueMax.offsetWidth/2 - 8 : valueMax.offsetWidth"
+ [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
+ [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
+ <mat-slider
+ [class]="elementModel.barStyle ? 'bar-style' : ''"
+ [thumbLabel]="elementModel.thumbLabel"
+ [formControl]="elementFormControl"
+ [style.width.%]="100"
+ [max]="elementModel.maxValue"
+ [min]="elementModel.minValue">
+ </mat-slider>
+ <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
+ {{elementModel.requiredWarnMessage}}
+ </mat-error>
</div>
</div>
`,
diff --git a/projects/common/ui-elements/spell-correct/spell-correct.component.ts b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
index d065da2db..046635e17 100644
--- a/projects/common/ui-elements/spell-correct/spell-correct.component.ts
+++ b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
@@ -6,55 +6,53 @@ import { SpellCorrectElement } from './spell-correct-element';
@Component({
selector: 'aspect-spell-correct',
template: `
- <div class="element-content-wrapper">
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize">
- <div fxFlex
- fxLayout="column"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [style.width.%]="100"
- [style.height.%]="100">
- <mat-form-field class="small-input">
- <input matInput type="text"
- [style.text-align]="'center'"
- autocomplete="off"
- [readonly]="elementModel.readOnly"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [value]="elementModel.value"
- [formControl]="elementFormControl">
- </mat-form-field>
- <button #buttonElement
- mat-button
- type="button"
- [disabled]="elementModel.readOnly"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : '400'"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [style.width.%]="100"
- [style.margin-top]="'-20px'"
- [style.text-decoration-line]=
+ <div fxFlex
+ fxLayout="column"
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [style.width.%]="100"
+ [style.height.%]="100">
+ <mat-form-field class="small-input">
+ <input matInput type="text"
+ [style.text-align]="'center'"
+ autocomplete="off"
+ [readonly]="elementModel.readOnly"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [value]="elementModel.value"
+ [formControl]="elementFormControl">
+ </mat-form-field>
+ <button #buttonElement
+ mat-button
+ type="button"
+ [disabled]="elementModel.readOnly"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : '400'"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [style.width.%]="100"
+ [style.margin-top]="'-20px'"
+ [style.text-decoration-line]=
"(inputElement && inputElement.focused) ||
(inputElement && !!inputElement.value) ||
(elementFormControl && elementFormControl.value === '') ? 'line-through' : ''"
- (click)="
+ (click)="
elementFormControl.value === null ?
inputElement.focus() :
buttonElement.focus();
elementFormControl.value === null ?
(elementFormControl.setValue('')) :
elementFormControl.setValue(null)">{{elementModel.label}}
- </button>
- </div>
+ </button>
</div>
</div>
`,
diff --git a/projects/common/ui-elements/text-area/text-area.component.ts b/projects/common/ui-elements/text-area/text-area.component.ts
index ccde78777..30c1f17e5 100644
--- a/projects/common/ui-elements/text-area/text-area.component.ts
+++ b/projects/common/ui-elements/text-area/text-area.component.ts
@@ -7,37 +7,35 @@ import { TextAreaElement } from './text-area-element';
@Component({
selector: 'aspect-text-area',
template: `
- <div class="element-content-wrapper">
- <mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.min-height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.min-height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [appearance]="$any(elementModel.appearance)">
- <mat-label *ngIf="elementModel.label">{{elementModel.label}}</mat-label>
- <textarea matInput #input
- autocomplete="off" rows="{{elementModel.rowCount}}"
- [formControl]="elementFormControl"
- [value]="$any(elementModel.value)"
- [readonly]="elementModel.readOnly"
- [style.min-width.%]="100"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'"
- (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
- (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [appearance]="$any(elementModel.appearance)">
+ <mat-label *ngIf="elementModel.label">{{elementModel.label}}</mat-label>
+ <textarea matInput #input
+ autocomplete="off" rows="{{elementModel.rowCount}}"
+ [formControl]="elementFormControl"
+ [value]="$any(elementModel.value)"
+ [readonly]="elementModel.readOnly"
+ [style.min-width.%]="100"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'"
+ (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
+ (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
</textarea>
- <mat-error *ngIf="elementFormControl.errors">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
- </mat-form-field>
- </div>
+ <mat-error *ngIf="elementFormControl.errors">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </mat-form-field>
`,
styles: [
':host ::ng-deep div.mat-form-field-infix {padding-top: 0.2em; padding-bottom: 0.2em;}',
diff --git a/projects/common/ui-elements/text-field/text-field.component.ts b/projects/common/ui-elements/text-field/text-field.component.ts
index c7cada8e9..7b1f78045 100644
--- a/projects/common/ui-elements/text-field/text-field.component.ts
+++ b/projects/common/ui-elements/text-field/text-field.component.ts
@@ -8,69 +8,67 @@ import { TextFieldElement } from './text-field-element';
@Component({
selector: 'aspect-text-field',
template: `
- <div class="element-content-wrapper">
- <mat-form-field *ngIf="elementModel.label !== ''"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <mat-form-field *ngIf="elementModel.label !== ''"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [appearance]="$any(elementModel.appearance)">
- <mat-label>{{elementModel.label}}</mat-label>
- <input matInput type="text" #input autocomplete="off"
- [formControl]="elementFormControl"
- [value]="$any(elementModel.value)"
- [pattern]="elementModel.pattern"
- [readonly]="elementModel.readOnly"
- (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
- (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
- <button *ngIf="elementModel.clearable"
- type="button"
- matSuffix mat-icon-button aria-label="Clear"
- (click)="this.elementFormControl.setValue('')">
- <mat-icon>close</mat-icon>
- </button>
- <mat-error *ngIf="elementFormControl.errors">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
- </mat-form-field>
- <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [appearance]="$any(elementModel.appearance)">
+ <mat-label>{{elementModel.label}}</mat-label>
+ <input matInput type="text" #input autocomplete="off"
+ [formControl]="elementFormControl"
+ [value]="$any(elementModel.value)"
+ [pattern]="elementModel.pattern"
+ [readonly]="elementModel.readOnly"
+ (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
+ (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
+ <button *ngIf="elementModel.clearable"
+ type="button"
+ matSuffix mat-icon-button aria-label="Clear"
+ (click)="this.elementFormControl.setValue('')">
+ <mat-icon>close</mat-icon>
+ </button>
+ <mat-error *ngIf="elementFormControl.errors">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </mat-form-field>
+ <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [appearance]="$any(elementModel.appearance)">
- <input matInput type="text" #input autocomplete="off"
- [formControl]="elementFormControl"
- [value]="$any(elementModel.value)"
- [readonly]="elementModel.readOnly"
- [pattern]="elementModel.pattern"
- (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
- (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
- <button *ngIf="elementModel.clearable"
- type="button"
- matSuffix mat-icon-button aria-label="Clear"
- (click)="this.elementFormControl.setValue('')">
- <mat-icon>close</mat-icon>
- </button>
- <mat-error *ngIf="elementFormControl.errors">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
- </mat-form-field>
- </div>
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [appearance]="$any(elementModel.appearance)">
+ <input matInput type="text" #input autocomplete="off"
+ [formControl]="elementFormControl"
+ [value]="$any(elementModel.value)"
+ [readonly]="elementModel.readOnly"
+ [pattern]="elementModel.pattern"
+ (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
+ (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
+ <button *ngIf="elementModel.clearable"
+ type="button"
+ matSuffix mat-icon-button aria-label="Clear"
+ (click)="this.elementFormControl.setValue('')">
+ <mat-icon>close</mat-icon>
+ </button>
+ <mat-error *ngIf="elementFormControl.errors">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </mat-form-field>
`,
styles: [
'::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}' // TODO
@@ -86,13 +84,13 @@ export class TextFieldComponent extends FormElementComponent {
validators.push(Validators.required);
}
if (this.elementModel.minLength) {
- validators.push(Validators.minLength(<number> this.elementModel.minLength));
+ validators.push(Validators.minLength(<number>this.elementModel.minLength));
}
if (this.elementModel.maxLength) {
- validators.push(Validators.maxLength(<number> this.elementModel.maxLength));
+ validators.push(Validators.maxLength(<number>this.elementModel.maxLength));
}
if (this.elementModel.pattern) {
- validators.push(Validators.pattern(<string> this.elementModel.pattern));
+ validators.push(Validators.pattern(<string>this.elementModel.pattern));
}
return validators;
}
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index 8af9f767e..131dca7bf 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -8,35 +8,33 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-text',
template: `
- <div class="element-content-wrapper">
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
- <aspect-marking-bar
- *ngIf="elementModel.highlightableYellow ||
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
+ <aspect-marking-bar
+ *ngIf="elementModel.highlightableYellow ||
elementModel.highlightableTurquoise ||
elementModel.highlightableOrange"
- [elementModel]="elementModel"
- (selectionChanged)="onSelectionChanged($event)">
- </aspect-marking-bar>
- <div #textContainerRef class="text-container"
- [class.orange-selection]="selectedColor === 'orange'"
- [class.yellow-selection]="selectedColor === 'yellow'"
- [class.turquoise-selection]="selectedColor === 'turquoise'"
- [class.delete-selection]="selectedColor === 'delete'"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [innerHTML]="elementModel.text | safeResourceHTML"
- (touchstart)="emitStartSelection($event)"
- (mousedown)="emitStartSelection($event)">
- </div>
+ [elementModel]="elementModel"
+ (selectionChanged)="onSelectionChanged($event)">
+ </aspect-marking-bar>
+ <div #textContainerRef class="text-container"
+ [class.orange-selection]="selectedColor === 'orange'"
+ [class.yellow-selection]="selectedColor === 'yellow'"
+ [class.turquoise-selection]="selectedColor === 'turquoise'"
+ [class.delete-selection]="selectedColor === 'delete'"
+ [style.background-color]="elementModel.surfaceProps.backgroundColor"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [innerHTML]="elementModel.text | safeResourceHTML"
+ (touchstart)="emitStartSelection($event)"
+ (mousedown)="emitStartSelection($event)">
</div>
</div>
`,
diff --git a/projects/common/ui-elements/video/video.component.ts b/projects/common/ui-elements/video/video.component.ts
index 57af17b86..f6a9502fd 100644
--- a/projects/common/ui-elements/video/video.component.ts
+++ b/projects/common/ui-elements/video/video.component.ts
@@ -5,29 +5,27 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'aspect-video',
template: `
- <div class="element-content-wrapper">
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
- <video #player
- (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
- (pause)="onMediaPlayStatusChanged.emit(null)"
- [style.width.%]="100"
- [src]="elementModel.src | safeResourceUrl">
- </video>
- <aspect-control-bar class="correct-position"
- [player]="player"
- [project]="project"
- [active]="active"
- [id]="elementModel.id"
- [playerProperties]="elementModel.playerProps"
- [dependencyDissolved]="dependencyDissolved"
- (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
- (elementValueChanged)="elementValueChanged.emit($event)">
- </aspect-control-bar>
- </div>
+ [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
+ <video #player
+ (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
+ (pause)="onMediaPlayStatusChanged.emit(null)"
+ [style.width.%]="100"
+ [src]="elementModel.src | safeResourceUrl">
+ </video>
+ <aspect-control-bar class="correct-position"
+ [player]="player"
+ [project]="project"
+ [active]="active"
+ [id]="elementModel.id"
+ [playerProperties]="elementModel.playerProps"
+ [dependencyDissolved]="dependencyDissolved"
+ (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
+ (elementValueChanged)="elementValueChanged.emit($event)">
+ </aspect-control-bar>
</div>
`,
styles: [
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts
index ced10afe4..8c16596df 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts
@@ -11,6 +11,8 @@ import { UIElement } from '../../../../../../../../common/models/uI-element';
<!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). -->
<!-- DragStart and DragEnd are part of a cursor hack to style the body. See global styling file. -->
<div #draggableElement class="draggable-element"
+ [class.fixed-size-content-wrapper]="element.positionProps?.dynamicPositioning &&
+ element.positionProps?.fixedSize"
[class.temporaryHighlight]="temporaryHighlight"
[style.display]="dragging ? 'none' : ''"
tabindex="-1"
diff --git a/projects/player/src/app/components/element-container/element-container.component.html b/projects/player/src/app/components/element-container/element-container.component.html
index af1244265..21f2e4a5c 100644
--- a/projects/player/src/app/components/element-container/element-container.component.html
+++ b/projects/player/src/app/components/element-container/element-container.component.html
@@ -1,4 +1,5 @@
-<div class="element-container"
+<div [class]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+ 'fixed-size-content-wrapper' : 'element-container'"
cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin">
<ng-template #elementComponentContainer></ng-template>
</div>
--
GitLab