Skip to content

Commit c8027b7

Browse files
JonasDev17JonasDev17
committed
removed flex layout dependency (replaced with css)
1 parent c8a681e commit c8027b7

15 files changed

+187
-31
lines changed

‎packages/angular-material/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@
6363
"@angular/cdk": "^14.2.0 || ^15.0.0",
6464
"@angular/common": "^14.2.0 || ^15.0.0",
6565
"@angular/core": "^14.2.0 || ^15.0.0",
66-
"@angular/flex-layout": "^14.0.0-beta || ^15.0.0-beta",
6766
"@angular/forms": "^14.2.0 || ^15.0.0",
6867
"@angular/material": "^14.2.0 || ^15.0.0",
6968
"@angular/platform-browser": "^14.2.0 || ^15.0.0",
@@ -83,7 +82,6 @@
8382
"@angular/compiler": "^14.2.0",
8483
"@angular/compiler-cli": "^14.2.0",
8584
"@angular/core": "^14.2.0",
86-
"@angular/flex-layout": "^14.0.0-beta || ^15.0.0-beta",
8785
"@angular/forms": "^14.2.0",
8886
"@angular/material": "^14.2.0",
8987
"@angular/platform-browser": "^14.2.0",

‎packages/angular-material/src/controls/autocomplete.renderer.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ import { startWith } from 'rxjs/operators';
6464
@Component({
6565
selector: 'AutocompleteControlRenderer',
6666
template: `
67-
<mat-form-field fxFlex [fxHide]="hidden">
67+
<mat-form-field [ngClass]="{'simple-flex-item':true,'d-none': hidden}">
6868
<mat-label>{{ label }}</mat-label>
6969
<input
7070
matInput
@@ -93,11 +93,21 @@ import { startWith } from 'rxjs/operators';
9393
<mat-error>{{ error }}</mat-error>
9494
</mat-form-field>
9595
`,
96+
styles: [
97+
`.d-none {
98+
display: none;
99+
}
100+
.simple-flex-item {
101+
flex: 1 1 0%;
102+
box-sizing: border-box;
103+
}
104+
`
105+
],
96106
changeDetection: ChangeDetectionStrategy.OnPush
97107
})
98108
export class AutocompleteControlRenderer extends JsonFormsControl {
99109
@Input() options: string[];
100-
110+
101111
focused: boolean = false;
102112
filteredOptions: Observable<string[]>;
103113
shouldFilter: boolean;

‎packages/angular-material/src/controls/boolean.renderer.ts

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
3030
selector: 'BooleanControlRenderer',
3131
template: `
3232
<div
33-
[fxHide]="hidden"
34-
fxLayout="column"
35-
fxLayoutAlign="center"
36-
style="height:100%"
33+
[ngClass]="{'boolean-control': true, 'd-none': hidden}"
3734
>
3835
<mat-checkbox
3936
(change)="onChange($event)"
@@ -47,6 +44,19 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
4744
<mat-error class="mat-caption">{{ error }}</mat-error>
4845
</div>
4946
`,
47+
styles: [
48+
`.d-none {
49+
display: none;
50+
}
51+
.boolean-control {
52+
box-sizing: border-box;
53+
display: flex;
54+
flex-direction: column;
55+
justify-content: 'center';
56+
height: 100%;
57+
}
58+
`
59+
],
5060
changeDetection: ChangeDetectionStrategy.OnPush
5161
})
5262
export class BooleanControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/date.renderer.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
3333
@Component({
3434
selector: 'DateControlRenderer',
3535
template: `
36-
<mat-form-field fxFlex [fxHide]="hidden">
36+
<mat-form-field [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
3737
<mat-label>{{ label }}</mat-label>
3838
<input
3939
matInput
@@ -53,6 +53,16 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
5353
<mat-error>{{ error }}</mat-error>
5454
</mat-form-field>
5555
`,
56+
styles: [
57+
`.d-none {
58+
display: none;
59+
}
60+
.simple-flex-item {
61+
flex: 1 1 0%;
62+
box-sizing: border-box;
63+
}
64+
`
65+
],
5666
changeDetection: ChangeDetectionStrategy.OnPush
5767
})
5868
export class DateControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/number.renderer.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import merge from 'lodash/merge';
3737
@Component({
3838
selector: 'NumberControlRenderer',
3939
template: `
40-
<mat-form-field fxFlex [fxHide]="hidden">
40+
<mat-form-field [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
4141
<mat-label>{{ label }}</mat-label>
4242
<input
4343
matInput
@@ -55,6 +55,16 @@ import merge from 'lodash/merge';
5555
<mat-error>{{ error }}</mat-error>
5656
</mat-form-field>
5757
`,
58+
styles: [
59+
`.d-none {
60+
display: none;
61+
}
62+
.simple-flex-item {
63+
flex: 1 1 0%;
64+
box-sizing: border-box;
65+
}
66+
`
67+
],
5868
changeDetection: ChangeDetectionStrategy.OnPush
5969
})
6070
export class NumberControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/range.renderer.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
2929
@Component({
3030
selector: 'RangeControlRenderer',
3131
template: `
32-
<div fxFlex fxLayout="column" [fxHide]="hidden">
32+
<div [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
3333
<label class="mat-caption" style="color:rgba(0,0,0,.54)">{{
3434
label
3535
}}</label>
@@ -48,6 +48,22 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
4848
<mat-error class="mat-caption">{{ error }}</mat-error>
4949
</div>
5050
`,
51+
styles: [
52+
`
53+
.range-control {
54+
box-sizing: border-box;
55+
display: flex;
56+
flex-direction: column;
57+
}
58+
.d-none {
59+
display: none;
60+
}
61+
.simple-flex-item {
62+
flex: 1 1 0%;
63+
box-sizing: border-box;
64+
}
65+
`
66+
],
5167
changeDetection: ChangeDetectionStrategy.OnPush
5268
})
5369
export class RangeControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/text.renderer.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
2929
@Component({
3030
selector: 'TextControlRenderer',
3131
template: `
32-
<mat-form-field fxFlex [fxHide]="hidden">
32+
<mat-form-field [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
3333
<mat-label>{{ label }}</mat-label>
3434
<input
3535
matInput
@@ -44,6 +44,16 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
4444
<mat-error>{{ error }}</mat-error>
4545
</mat-form-field>
4646
`,
47+
styles: [
48+
`.d-none {
49+
display: none;
50+
}
51+
.simple-flex-item {
52+
flex: 1 1 0%;
53+
box-sizing: border-box;
54+
}
55+
`
56+
],
4757
changeDetection: ChangeDetectionStrategy.OnPush
4858
})
4959
export class TextControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/textarea.renderer.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
2929
@Component({
3030
selector: 'TextAreaRenderer',
3131
template: `
32-
<mat-form-field fxFlex [fxHide]="hidden">
32+
<mat-form-field [ngClass]="{'simple-flex-item': true, 'd-none': hidden}">
3333
<mat-label>{{ label }}</mat-label>
3434
<textarea
3535
matInput
@@ -43,6 +43,16 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
4343
<mat-error>{{ error }}</mat-error>
4444
</mat-form-field>
4545
`,
46+
styles: [
47+
`.d-none {
48+
display: none;
49+
}
50+
.simple-flex-item {
51+
flex: 1 1 0%;
52+
box-sizing: border-box;
53+
}
54+
`
55+
],
4656
changeDetection: ChangeDetectionStrategy.OnPush
4757
})
4858
export class TextAreaRenderer extends JsonFormsControl {

‎packages/angular-material/src/controls/toggle.renderer.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import {
3535
@Component({
3636
selector: 'ToggleControlRenderer',
3737
template: `
38-
<div [fxHide]="hidden">
38+
<div [ngClass]="{'d-none': hidden}">
3939
<mat-slide-toggle
4040
(change)="onChange($event)"
4141
[checked]="isChecked()"
@@ -48,6 +48,12 @@ import {
4848
<mat-error class="mat-caption">{{ error }}</mat-error>
4949
</div>
5050
`,
51+
styles: [
52+
`.d-none {
53+
display: none;
54+
}
55+
`
56+
],
5157
changeDetection: ChangeDetectionStrategy.OnPush
5258
})
5359
export class ToggleControlRenderer extends JsonFormsControl {

‎packages/angular-material/src/layouts/array-layout.renderer.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ import {
5151
@Component({
5252
selector: 'app-array-layout-renderer',
5353
template: `
54-
<div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
54+
<div [ngClass]="{'array-layout-col': true, 'd-none': hidden}">
5555
<div [ngClass]="'array-layout-toolbar'">
5656
<h2 [ngClass]="['mat-h2', 'array-layout-title']">{{ label }}</h2>
57-
<span fxFlex></span>
57+
<span ></span>
5858
<mat-icon
5959
*ngIf="this.error?.length"
6060
color="warn"
@@ -65,7 +65,7 @@ import {
6565
>
6666
error_outline
6767
</mat-icon>
68-
<span fxFlex></span>
68+
<span [ngClass]="'simple-flex-item'"></span>
6969
<button
7070
mat-button
7171
matTooltip="{{ this.addTooltip }}"
@@ -131,7 +131,20 @@ import {
131131
</div>
132132
`,
133133
styles: [
134-
`.array-layout-toolbar {
134+
`
135+
.d-none {
136+
display: none;
137+
}
138+
.array-layout-col {
139+
display: flex;
140+
flex-direction: column;
141+
gap: 1rem; /** 16px */
142+
}
143+
.simple-flex-item {
144+
flex: 1 1 0%;
145+
box-sizing: border-box;
146+
}
147+
.array-layout-toolbar {
135148
display: flex;
136149
align-items: center;
137150
}

0 commit comments

Comments
 (0)