diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 3183f9dfd0a76e0a155a246e6e077fda101e4caa..28f2381bec79b1f46f032334b2255bb8d316b401 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -2,6 +2,7 @@ Player
======
1.20.0
- Fix dimensions of images with dynamicPositioning and fixedSize
+- Fix display of fixed size dynamic elements on iPad
1.19.0
- Remove border of slider rectangle in number line mode at position 0
diff --git a/projects/common/ui-elements/audio/audio.component.ts b/projects/common/ui-elements/audio/audio.component.ts
index 91ccb75be28bb33b4ad2ec03d6e837be14d91aaa..767c8eb6b4541190e9a78269612d9e8c81aaab79 100644
--- a/projects/common/ui-elements/audio/audio.component.ts
+++ b/projects/common/ui-elements/audio/audio.component.ts
@@ -5,25 +5,27 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'aspect-audio',
template: `
- <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 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 &&
+ 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>
</div>
`
})
diff --git a/projects/common/ui-elements/button/button.component.ts b/projects/common/ui-elements/button/button.component.ts
index 660e7ccea12dbf983e5d5bfaef9d593833c868ed..f626bed06af14a8b3a9506e7d3d3f3141dba8793 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -7,39 +7,42 @@ import { ButtonElement } from './button-element';
@Component({
selector: 'aspect-button',
template: `
- <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 &&
- elementModel.positionProps.fixedSize"
- [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="element-content-wrapper">
+ <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 &&
+ elementModel.positionProps.fixedSize"
+ [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>
`,
styles: [
'.dynamic-image {width: 100%; height: fit-content;}',
'.static-image {max-width: 100%; max-height: 100%; display: grid;}', // grid: to prevent scrollbars
- '.fixed-size-dynamic-image {position: relative; object-fit: scale-down;}'
+ '.fixed-size-dynamic-image {position: relative; object-fit: scale-down;}',
+ '.center-content {margin: auto !important;}' // overwrite: margin of mat-button
]
})
export class ButtonComponent extends ElementComponent {
diff --git a/projects/common/ui-elements/checkbox/checkbox.component.ts b/projects/common/ui-elements/checkbox/checkbox.component.ts
index 0c609cce6ff0d4152b8f6605ea43205031d08cda..c9bb53122a6a4d2118597a5ef5edd9702e52627f 100644
--- a/projects/common/ui-elements/checkbox/checkbox.component.ts
+++ b/projects/common/ui-elements/checkbox/checkbox.component.ts
@@ -6,28 +6,30 @@ import { CheckboxElement } from './checkbox-element';
@Component({
selector: 'aspect-checkbox',
template: `
- <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="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 &&
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>
+ [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>
</div>
`,
styles: [
diff --git a/projects/common/ui-elements/cloze/cloze.component.ts b/projects/common/ui-elements/cloze/cloze.component.ts
index d26c3e82b2f7446bae369ef4f67bf6430b0b9859..9d7c10d283cfb2d5962cf1180b01a5fb3db31d6e 100644
--- a/projects/common/ui-elements/cloze/cloze.component.ts
+++ b/projects/common/ui-elements/cloze/cloze.component.ts
@@ -13,38 +13,40 @@ import { ElementComponent } from '../../directives/element-component.directive';
<ng-container *ngIf="elementModel.document.content.length == 0">
Kein Dokument vorhanden
</ng-container>
- <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"
+ <div class="element-content-wrapper">
+ <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"
[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"
+ [ngTemplateOutletContext]="{ $implicit: blockquotePart }"></ng-container>
+ </blockquote>
+ <ng-container *ngIf="part.type === 'paragraph' || part.type === 'heading'"
[ngTemplateOutlet]="paragraphs"
- [ngTemplateOutletContext]="{ $implicit: blockquotePart }"></ng-container>
- </blockquote>
- <ng-container *ngIf="part.type === 'paragraph' || part.type === 'heading'"
- [ngTemplateOutlet]="paragraphs"
- [ngTemplateOutletContext]="{ $implicit: part }"></ng-container>
- </ng-container>
+ [ngTemplateOutletContext]="{ $implicit: part }"></ng-container>
+ </ng-container>
+ </div>
</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 cf7ddce3c2b0b64451de934d3ede27e9da09a62b..d2ebf53643beba0a6edf507093b4e9dc23d82fdb 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="list-container">
+ <div class="element-content-wrapper">
<!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
<!-- class style.-->
<div class="list"
@@ -69,7 +69,6 @@ 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}',
@@ -85,8 +84,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
'.dropList-highlight.cdk-drop-list-receiving {outline: solid;}',
'.dropList-highlight.cdk-drop-list-dragging {outline: solid;}',
- '.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}',
- '.center-content {top: unset; transform: unset;}'
+ '.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}'
]
})
export class DropListComponent extends FormElementComponent {
diff --git a/projects/common/ui-elements/dropdown/dropdown.component.ts b/projects/common/ui-elements/dropdown/dropdown.component.ts
index ec3b4e38b200d028429c238dd641d5d9d0b3d8ef..72e842f3057ce91cc01c5b33e2ffdb071031847c 100644
--- a/projects/common/ui-elements/dropdown/dropdown.component.ts
+++ b/projects/common/ui-elements/dropdown/dropdown.component.ts
@@ -5,34 +5,36 @@ import { DropdownElement } from './dropdown-element';
@Component({
selector: 'aspect-dropdown',
template: `
- <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 &&
+ <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 &&
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>
+ 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>
`
})
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 798adf02535007155719196f4d029fb251faf913..587ed875c29503604c905aa82cbeffcc53bf2ad7 100644
--- a/projects/common/ui-elements/frame/frame.component.ts
+++ b/projects/common/ui-elements/frame/frame.component.ts
@@ -5,20 +5,22 @@ import { ElementComponent } from '../../directives/element-component.directive';
@Component({
selector: 'aspect-frame',
template: `
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' :
- 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
- [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>
+ <div class="element-content-wrapper">
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' :
+ 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
+ [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>
+ </div>
`
})
export class FrameComponent extends ElementComponent {
diff --git a/projects/common/ui-elements/image/image.component.ts b/projects/common/ui-elements/image/image.component.ts
index 10442fd7f9dcd5d61f8251592fa706c4ef87bdd5..e9bbb468ec5c128e2f62d9eb738ea1387d8602dc 100644
--- a/projects/common/ui-elements/image/image.component.ts
+++ b/projects/common/ui-elements/image/image.component.ts
@@ -8,9 +8,8 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-image',
template: `
- <!-- Display Flex ensures that the image container is centered and
- that image and magnifier are displayed properly.-->
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ <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 &&
elementModel.positionProps.fixedSize"
@@ -31,6 +30,7 @@ import { ValueChangeElement } from '../../models/uI-element';
(elementValueChanged)="elementValueChanged.emit($event)">
</aspect-magnifier>
</div>
+ </div>
`,
styles: [
'.image-container {position: relative}',
diff --git a/projects/common/ui-elements/likert/likert.component.ts b/projects/common/ui-elements/likert/likert.component.ts
index d1688939aa76d92a33fedba99a03476c48a2282c..cdb3d0c1c0c759af601839352f828b0b759ce72f 100644
--- a/projects/common/ui-elements/likert/likert.component.ts
+++ b/projects/common/ui-elements/likert/likert.component.ts
@@ -13,52 +13,55 @@ 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.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div class="element-content-wrapper">
+ <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 ? 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>
+ <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>
+ </div>
</div>
`,
styles: [
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 e7da1b453581f5232222e51da34eaa072d7ad778..61a3719fc3390bb5b6355f1dbbdbd9c5af63de83 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,66 +5,68 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-radio-group-images',
template: `
- <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 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 &&
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">
+ [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>
- <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 9ec65927ecf1580627c85c823e75256b61e1dbd4..33afd113628489e69e0d4caa8e76a02841cf94f3 100644
--- a/projects/common/ui-elements/radio/radio-button-group.component.ts
+++ b/projects/common/ui-elements/radio/radio-button-group.component.ts
@@ -5,40 +5,42 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
@Component({
selector: 'aspect-radio-button-group',
template: `
- <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="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 &&
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>
+ [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>
</div>
`,
styles: [
diff --git a/projects/common/ui-elements/slider/slider.component.ts b/projects/common/ui-elements/slider/slider.component.ts
index 44cbded714e327ee1e1f9e82eb402777e8374339..8ef6e415106cc0cd7a1d0bd54e139c036d3499b4 100644
--- a/projects/common/ui-elements/slider/slider.component.ts
+++ b/projects/common/ui-elements/slider/slider.component.ts
@@ -7,88 +7,90 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-slider',
template: `
- <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 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 &&
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 *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 *ngIf="elementModel.barStyle" class="number-marker"></div>
</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 #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>
- </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 *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>
`,
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 03db7709b3c64afaf067fe7ae7fb96b529f3cf9d..d065da2db3a884b69228651954b82cf8f6270a20 100644
--- a/projects/common/ui-elements/spell-correct/spell-correct.component.ts
+++ b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
@@ -6,52 +6,55 @@ import { SpellCorrectElement } from './spell-correct-element';
@Component({
selector: 'aspect-spell-correct',
template: `
- <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]=
- "(inputElement && inputElement.focused) ||
- (inputElement && !!inputElement.value) ||
- (elementFormControl && elementFormControl.value === '') ? 'line-through' : ''"
- (click)="
- elementFormControl.value === null ?
- inputElement.focus() :
- buttonElement.focus();
- elementFormControl.value === null ?
- (elementFormControl.setValue('')) :
- elementFormControl.setValue(null)">{{elementModel.label}}
- </button>
+ <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 &&
+ 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]=
+ "(inputElement && inputElement.focused) ||
+ (inputElement && !!inputElement.value) ||
+ (elementFormControl && elementFormControl.value === '') ? 'line-through' : ''"
+ (click)="
+ elementFormControl.value === null ?
+ inputElement.focus() :
+ buttonElement.focus();
+ elementFormControl.value === null ?
+ (elementFormControl.setValue('')) :
+ elementFormControl.setValue(null)">{{elementModel.label}}
+ </button>
+ </div>
</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 30c1f17e51fcc7872ed810b411fe4b5b8b7a7536..ccde78777fbd9d568368d6c256706c8eb7b294a2 100644
--- a/projects/common/ui-elements/text-area/text-area.component.ts
+++ b/projects/common/ui-elements/text-area/text-area.component.ts
@@ -7,35 +7,37 @@ import { TextAreaElement } from './text-area-element';
@Component({
selector: 'aspect-text-area',
template: `
- <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 &&
+ <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 &&
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>
+ <mat-error *ngIf="elementFormControl.errors">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </mat-form-field>
+ </div>
`,
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 fc743ea0645a36841b5be35ecd05155094bc3963..c7cada8e96a178f7d4ef1070c82c8f96743e82ea 100644
--- a/projects/common/ui-elements/text-field/text-field.component.ts
+++ b/projects/common/ui-elements/text-field/text-field.component.ts
@@ -8,70 +8,71 @@ import { TextFieldElement } from './text-field-element';
@Component({
selector: 'aspect-text-field',
template: `
- <mat-form-field *ngIf="elementModel.label !== ''"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div class="element-content-wrapper">
+ <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>
+ [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>
`,
styles: [
- '.center-content {display: block; margin: auto; top: 50%; transform: translateY(-50%);}',
'::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}' // TODO
]
})
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index 28acbcc8ae6abcbc13efaffeac380943569ff327..19b3a43a6ce5dfaddd9859d312ee316d0f147831 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -8,34 +8,36 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-text',
template: `
- <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 ||
- 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"
- (mousedown)="elementModel.highlightableYellow ||
- elementModel.highlightableTurquoise ||
- elementModel.highlightableOrange ? startSelection.emit($event) : null">
+ <div class="element-content-wrapper">
+ <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 ||
+ 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"
+ (mousedown)="elementModel.highlightableYellow ||
+ elementModel.highlightableTurquoise ||
+ elementModel.highlightableOrange ? startSelection.emit($event) : null">
+ </div>
</div>
</div>
`,
@@ -51,7 +53,8 @@ import { ValueChangeElement } from '../../models/uI-element';
'::ng-deep .text-container h3 {font-weight: bold; font-size: 16px;}',
'::ng-deep .text-container h4 {font-weight: normal; font-size: 16px;}',
':host ::ng-deep mark {color: inherit}',
- 'sup, sub {line-height: 0;}'
+ 'sup, sub {line-height: 0;}',
+ '.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}'
]
})
export class TextComponent extends ElementComponent {
diff --git a/projects/common/ui-elements/video/video.component.ts b/projects/common/ui-elements/video/video.component.ts
index faf7d9ad3529adb3db915f1ab2e1a959b783ba2e..57af17b86f99fea61ce278050a8b9e8b56c59fb3 100644
--- a/projects/common/ui-elements/video/video.component.ts
+++ b/projects/common/ui-elements/video/video.component.ts
@@ -5,26 +5,29 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'aspect-video',
template: `
- <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="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 &&
+ 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>
</div>
`,
styles: [
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index 3b245ccca1cea8b3f9e22b54c2ae11ef71e9219b..8e757eded61fe134ffa727be16ea73c9f7de119d 100644
--- a/projects/editor/src/styles.css
+++ b/projects/editor/src/styles.css
@@ -70,10 +70,11 @@ blockquote p {
display: inline;
}
+.element-content-wrapper {
+ display: flex;
+ height: 100%;
+}
+
.center-content {
- position: relative;
- display: block !important;
- margin: auto !important;
- top: 50%;
- transform: translateY(-50%);
+ margin: auto;
}
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index 55548925de6fc461dd0e34db43c30e6854039e54..d427ca0bb505c93184a089b96a1130b9ee0a3217 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -37,10 +37,12 @@ blockquote p {
display: inline;
}
+.element-content-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+}
+
.center-content {
- position: relative;
- display: block !important;
- margin: auto !important;
- top: 50%;
- transform: translateY(-50%);
+ margin: auto
}