diff --git a/projects/common/components/button/button.component.ts b/projects/common/components/button/button.component.ts
index 4719710bc7eaaa0bb0032568a18b2fe18be554ff..5c2ba802b62fa3dd658acfa9b89923e4b057bcc3 100644
--- a/projects/common/components/button/button.component.ts
+++ b/projects/common/components/button/button.component.ts
@@ -10,9 +10,7 @@ import { ElementComponent } from '../../directives/element-component.directive';
template: `
<div *ngIf="!elementModel.imageSrc && elementModel.asLink"
[style.width.%]="100"
- [style.height.%]="100"
- fxLayout="column"
- fxLayoutAlign="center stretch">
+ [style.height.%]="100">
<a href="{{elementModel.action+'-'+elementModel.actionParam}}"
[style.background-color]="elementModel.styling.backgroundColor"
[style.color]="elementModel.styling.fontColor"
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
index e534e2b1e4807b29cbab18629a3114d7619420a7..355c0ad84b5c60eef1bfa08d618a91e9edb1c922 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
@@ -18,10 +18,9 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
(focusout)="elementFormControl.markAsTouched()">
<!--Add dummy div - otherwise toggle button with empty options will not be in one line-->
<div *ngIf="elementModel.options.length === 0"
+ class="fx-row-center-center"
[style.min-height.px]="elementModel.height - 2"
- [style.width]="100"
- fxLayout="row"
- [fxLayoutAlign]="'center center'">
+ [style.width]="100">
<span> </span>
</div>
<mat-button-toggle *ngFor="let option of elementModel.options; let i = index"
@@ -47,17 +46,38 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
</mat-button-toggle>
</mat-button-toggle-group>
`,
- styles: [
- '.errors {border: 2px solid #f44336 !important;}',
- 'mat-button-toggle-group {display: inline-flex; min-width: 70px; min-height: 20px; max-width: 100%;}',
- 'mat-button-toggle-group {justify-content: center; box-sizing: border-box;}',
- ':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}',
- ':host ::ng-deep .mat-button-toggle-button {height: 100%}',
- ':host ::ng-deep .strike-selected-option.mat-button-toggle-checked .mat-button-toggle-label-content' +
- '{text-decoration: line-through}',
- ':host ::ng-deep .strike-other-options:not(.mat-button-toggle-checked) .mat-button-toggle-label-content' +
- '{text-decoration: line-through}'
- ]
+ styles: [`
+ .errors {
+ border: 2px solid #f44336 !important;
+ }
+ mat-button-toggle-group {
+ display: inline-flex;
+ min-width: 70px;
+ min-height: 20px;
+ max-width: 100%;
+ justify-content: center;
+ box-sizing: border-box;
+ }
+ :host ::ng-deep .mat-button-toggle-label-content {
+ line-height: unset;
+ }
+ :host ::ng-deep .mat-button-toggle-button {
+ height: 100%;
+ }
+ :host ::ng-deep .strike-selected-option.mat-button-toggle-checked .mat-button-toggle-label-content {
+ text-decoration: line-through;
+ }
+ :host ::ng-deep .strike-other-options:not(.mat-button-toggle-checked) .mat-button-toggle-label-content {
+ text-decoration: line-through;
+ }
+ .fx-row-center-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+ `]
})
export class ToggleButtonComponent extends FormElementComponent {
@Input() elementModel!: ToggleButtonElement;
diff --git a/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts b/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
index c737cbcaedc641c4622b88d39467d5f122f41148..dabed44d605b694e82df2df6f6ebce5326e505a2 100644
--- a/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
+++ b/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
@@ -17,8 +17,10 @@ import { LikertRowElement } from 'common/models/elements/compound-elements/liker
[style.grid-row-end]="2"
[style.place-self]="'start'"
[style.align-items]="'center'"
- [fxLayout]="elementModel.rowLabel.imgPosition === 'left' ||
- elementModel.rowLabel.imgPosition === 'right' ? 'row' : 'column'">
+ [class.fx-row-start-stretch]="elementModel.rowLabel.imgPosition === 'left' ||
+ elementModel.rowLabel.imgPosition === 'right'"
+ [class.fx-column-start-stretch]="elementModel.rowLabel.imgPosition === 'above' ||
+ elementModel.rowLabel.imgPosition === 'below'">
<img *ngIf="elementModel.rowLabel.imgSrc &&
(elementModel.rowLabel.imgPosition === 'above' || elementModel.rowLabel.imgPosition === 'left')"
[src]="elementModel.rowLabel.imgSrc | safeResourceUrl" alt="Image Placeholder"
@@ -40,7 +42,23 @@ import { LikertRowElement } from 'common/models/elements/compound-elements/liker
[style.grid-row-end]="2">
</mat-radio-button>
</mat-radio-group>
- `
+ `,
+ styles: [`
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: stretch;
+ }
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+ }
+ `]
})
export class LikertRadioButtonGroupComponent extends FormElementComponent {
@Input() elementModel!: LikertRowElement;
diff --git a/projects/common/components/compound-elements/likert/likert.component.ts b/projects/common/components/compound-elements/likert/likert.component.ts
index 19afd7dd24d3547e24b0d07224fb92fa2d0b1dcf..08be46646c0623e9aa3f19817ae03b1d97dd424b 100644
--- a/projects/common/components/compound-elements/likert/likert.component.ts
+++ b/projects/common/components/compound-elements/likert/likert.component.ts
@@ -44,7 +44,7 @@ import { LikertRadioButtonGroupComponent } from './likert-radio-button-group.com
{{elementModel.label2}}
</div>
<div *ngFor="let column of elementModel.options; let i = index"
- class="columns" fxLayout="column" fxLayoutAlign="end center"
+ class="columns fx-column-end-center"
[style.grid-column-start]="2 + i"
[style.grid-column-end]="3 + i"
[style.grid-row-start]="1"
@@ -75,12 +75,30 @@ import { LikertRadioButtonGroupComponent } from './likert-radio-button-group.com
</div>
</div>
`,
- styles: [
- 'img {object-fit: contain; max-height: 100%; max-width: 100%; margin: 10px}',
- '.columns {text-align: center;}',
- ':host ::ng-deep mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}',
- '.label {margin-bottom: 10px;}'
- ]
+ styles: [`
+ img {
+ object-fit: contain;
+ max-height: 100%;
+ max-width: 100%;
+ margin: 10px;
+ }
+ .columns {
+ text-align: center;
+ }
+ :host ::ng-deep mat-radio-button span.mat-radio-container {
+ left: calc(50% - 10px);
+ }
+ .label {
+ margin-bottom: 10px;
+ }
+ .fx-column-end-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ }
+ `]
})
export class LikertComponent extends CompoundElementComponent {
@ViewChildren(LikertRadioButtonGroupComponent) compoundChildren!: QueryList<LikertRadioButtonGroupComponent>;
diff --git a/projects/common/components/input-elements/radio-button-group.component.ts b/projects/common/components/input-elements/radio-button-group.component.ts
index aeb30246fb696c6d8502d7d726dbc78494045e80..e141cf346c790de401048a9368240f7ce50469ea 100644
--- a/projects/common/components/input-elements/radio-button-group.component.ts
+++ b/projects/common/components/input-elements/radio-button-group.component.ts
@@ -20,7 +20,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[innerHTML]="elementModel.label | safeResourceHTML">
</label>
<mat-radio-group aria-labelledby="radio-group-label"
- [fxLayout]="elementModel.alignment"
+ [class.fx-column-start-stretch]="elementModel.alignment === 'column'"
+ [class.fx-row-start-stretch]="elementModel.alignment === 'row'"
[formControl]="elementFormControl"
[value]="elementModel.value"
[style.margin-top.px]="elementModel.label !== '' ? 10 : 0">
@@ -39,16 +40,46 @@ import { FormElementComponent } from '../../directives/form-element-component.di
</mat-radio-group>
</div>
`,
- styles: [
- ':host ::ng-deep .mat-radio-label {white-space: normal;}',
- ':host ::ng-deep .mat-radio-label .mat-radio-label-content {padding-left: 10px;}',
- 'mat-radio-button {margin-bottom: 6px; margin-right: 15px;}',
- '.error-message {font-size: 75%; line-height: 100%;}',
- ':host ::ng-deep .strike .mat-radio-label {text-decoration: line-through;}',
- ':host ::ng-deep .mat-radio-label {align-items: baseline;}',
- ':host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-container {top: 4px;}',
- '.radio-button-label {pointer-events: none;}'
- ]
+ styles: [`
+ :host ::ng-deep .mat-radio-label {
+ white-space: normal;
+ }
+ :host ::ng-deep .mat-radio-label .mat-radio-label-content {
+ padding-left: 10px;
+ }
+ mat-radio-button {
+ margin-bottom: 6px; margin-right: 15px;
+ }
+ .error-message {
+ font-size: 75%; line-height: 100%;
+ }
+ :host ::ng-deep .strike .mat-radio-label {
+ text-decoration: line-through;
+ }
+ :host ::ng-deep .mat-radio-label {
+ align-items: baseline;
+ }
+ :host ::ng-deep mat-radio-button .mat-radio-label .mat-radio-container {
+ top: 4px;
+ }
+ .radio-button-label {
+ pointer-events: none;
+ }
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: stretch;
+ }
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+ }
+ `]
})
export class RadioButtonGroupComponent extends FormElementComponent {
@Input() elementModel!: RadioButtonGroupElement;
diff --git a/projects/common/components/input-elements/radio-group-images.component.ts b/projects/common/components/input-elements/radio-group-images.component.ts
index f79033fa73924476b52e46766b954f4782adfdd5..6241ca81519a7cf2e31242fceac807903d4d81ff 100644
--- a/projects/common/components/input-elements/radio-group-images.component.ts
+++ b/projects/common/components/input-elements/radio-group-images.component.ts
@@ -16,7 +16,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[value]="elementModel.value">
<mat-radio-button *ngFor="let option of elementModel.options; let i = index"
[style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
- fxLayout="column" fxLayoutAlign="end center"
+ class="fx-column-end-center"
[value]="i">
<img *ngIf="option.imgSrc && (option.imgPosition === 'above' || option.imgPosition === 'left')"
[style.object-fit]="'scale-down'"
@@ -41,14 +41,34 @@ import { FormElementComponent } from '../../directives/form-element-component.di
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
`,
- styles: [
- 'mat-radio-group {display: grid}',
- ':host ::ng-deep .mat-radio-label {flex-direction: column-reverse;}',
- ':host ::ng-deep .mat-radio-label .mat-radio-container {margin-top: 15px; margin-left: 10px;}',
- ':host ::ng-deep .mat-radio-label .mat-radio-label-content {text-align: center;}',
- 'mat-radio-button {margin-bottom: 60px;}',
- '.error-message { font-size: 75% }'
- ]
+ styles: [`
+ mat-radio-group {
+ display: grid;
+ }
+ :host ::ng-deep .mat-radio-label {
+ flex-direction: column-reverse;
+ }
+ :host ::ng-deep .mat-radio-label .mat-radio-container {
+ margin-top: 15px;
+ margin-left: 10px;
+ }
+ :host ::ng-deep .mat-radio-label .mat-radio-label-content {
+ text-align: center;
+ }
+ mat-radio-button {
+ margin-bottom: 60px;
+ }
+ .error-message {
+ font-size: 75%;
+ }
+ .fx-column-end-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ }
+ `]
})
export class RadioGroupImagesComponent extends FormElementComponent {
@Input() elementModel!: RadioButtonGroupComplexElement;
diff --git a/projects/common/components/input-elements/slider.component.ts b/projects/common/components/input-elements/slider.component.ts
index 1d5d4ee18254af64c46e61b7f9c332ba4a39da6e..bd24e915f580afece8e26b53802f8460b22f2c57 100644
--- a/projects/common/components/input-elements/slider.component.ts
+++ b/projects/common/components/input-elements/slider.component.ts
@@ -5,8 +5,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-slider',
template: `
- <div fxLayout="column"
- [style.width.%]="100"
+ <div [style.width.%]="100"
[style.height.%]="100"
[style.background-color]="elementModel.styling.backgroundColor">
<div *ngIf="elementModel.label"
diff --git a/projects/common/components/input-elements/spell-correct.component.ts b/projects/common/components/input-elements/spell-correct.component.ts
index 84b564e46f49f59081a13d9a477e0c5311aa949f..c2352618c1e5ce8d75556902e37032c2713b6b67 100644
--- a/projects/common/components/input-elements/spell-correct.component.ts
+++ b/projects/common/components/input-elements/spell-correct.component.ts
@@ -10,7 +10,7 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
template: `
<div [style.width.%]="100"
[style.height.%]="100">
- <div fxFlex fxLayout="column"
+ <div class="fx-column-start-stretch"
aspectInputBackgroundColor [backgroundColor]="elementModel.styling.backgroundColor"
[style.width.%]="100"
[style.height.%]="100">
@@ -65,9 +65,19 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
</div>
</div>
`,
- styles: [
- ':host ::ng-deep .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
- ]
+ styles: [`
+ :host ::ng-deep .small-input div.mat-form-field-infix {
+ border-top: none;
+ padding: 0.75em 0 0.25em 0;
+ }
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+ }
+ `]
})
export class SpellCorrectComponent extends TextInputComponent {
@Input() elementModel!: SpellCorrectElement;
diff --git a/projects/common/components/input-elements/text-field.component.ts b/projects/common/components/input-elements/text-field.component.ts
index e7b5bff247b21ff72527e6bf44d96630bf881efc..f13fde1deb787b3603533ffc68864859c48e8641 100644
--- a/projects/common/components/input-elements/text-field.component.ts
+++ b/projects/common/components/input-elements/text-field.component.ts
@@ -32,7 +32,8 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
(keydown)="onKeyDown.emit({keyboardEvent: $event, inputElement: input})"
(focus)="focusChanged.emit({ inputElement: input, focused: true })"
(blur)="focusChanged.emit({ inputElement: input, focused: false })">
- <div matSuffix fxLayout="row" fxLayoutAlign="center baseline">
+ <div matSuffix
+ class="fx-row-center-baseline">
<mat-icon *ngIf="!elementFormControl.touched && elementModel.hasKeyboardIcon">keyboard_outline</mat-icon>
<button *ngIf="elementModel.clearable"
type="button"
@@ -46,10 +47,21 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
</mat-error>
</mat-form-field>
`,
- styles: [
- ':host ::ng-deep .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}',
- ':host ::ng-deep .small-input .mat-form-field-outline-gap {display: none; }'
- ]
+ styles: [`
+ :host ::ng-deep .small-input div.mat-form-field-infix {
+ border-top: none; padding: 0.55em 0 0.25em 0;
+ }
+ :host ::ng-deep .small-input .mat-form-field-outline-gap {
+ display: none;
+ }
+ .fx-row-center-baseline {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: baseline;
+ }
+ `]
})
export class TextFieldComponent extends TextInputComponent {
@Input() elementModel!: TextFieldElement;