Skip to content

Commit 8a92bf0

Browse files
abadakhshanabadakhshan
committed
fix angular flex bug
1 parent 0b3c2ca commit 8a92bf0

8 files changed

Lines changed: 548 additions & 243 deletions

File tree

‎projects/narik-ui-material/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@narik/ui-material",
3-
"version": "4.0.0",
3+
"version": "4.0.1",
44
"peerDependencies": {
55
"@angular/common": "~10.0.9",
66
"@angular/core": "~10.0.9",

‎projects/narik-ui-material/src/lib/narik-mat-dynamic-form/narik-mat-dynamic-form.component.html‎

Lines changed: 147 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,203 @@
1-
<div [tab-guard]="activeTabGuard" [auto-focus]="activeAutoFocus" [autoFocusContainerName]="defaultFocusField"
2-
fxLayout="{{columnsCount === 1 ? 'column' : 'row wrap'}} " fxLayout.xs="column" fxLayoutGap.xs="0"
3-
fxLayoutGap="{{ layoutGap }}px" fxLayoutAlign="flex-start">
1+
<div
2+
[tab-guard]="activeTabGuard"
3+
[auto-focus]="activeAutoFocus"
4+
[autoFocusContainerName]="defaultFocusField"
5+
fxLayout="{{ columnsCount === 1 ? 'column' : 'row wrap' }} "
6+
fxLayout.xs="column"
7+
fxLayoutGap.xs="0"
8+
fxLayoutGap="{{ layoutGap }}px"
9+
fxLayoutAlign="flex-start"
10+
>
411
<ng-container *ngIf="!groupFields">
5-
<div fxFlex.lt-sm="100%" fxFlex.lt-xl="0 1 calc({{ columnWidth }}% - {{ layoutGap }}px)"
6-
fxFlex.lt-md="0 1 calc({{ columnWidth }}% - {{ layoutGap }}px)" *ngFor="let item of fields; let i = index">
7-
<ng-container *ngTemplateOutlet="
12+
<div
13+
fxFlex.gt-xs="0 1 calc({{ columnWidth }}% - {{ layoutGap }}px)"
14+
fxFlex="100%"
15+
*ngFor="let item of fields; let i = index"
16+
>
17+
<ng-container
18+
*ngTemplateOutlet="
819
fieldContainer;
920
context: {
1021
$implicit: item,
1122
invisibleItems: invisibleItems,
1223
disableItems: disableItems,
1324
model: model
1425
}
15-
"></ng-container>
26+
"
27+
></ng-container>
1628
</div>
1729
</ng-container>
1830
<ng-container *ngIf="groupFields">
19-
<div fxFlex.lt-sm="100%" fxFlex.lt-xl="0 1 calc({{ columnWidth }}% - {{ layoutGap }}px)"
20-
fxFlex.lt-md="0 1 calc({{ columnWidth }}% - {{ layoutGap }}px)"
21-
*ngFor="let item of [].constructor(groupCount); let i = index">
31+
<div
32+
fxFlex.gt-xs="0 1 calc({{ columnWidth }}% - {{ layoutGap }}px)"
33+
fxFlex="100%"
34+
*ngFor="let item of [].constructor(groupCount); let i = index"
35+
>
2236
<div fxLayout="column" class="narik-mat-form-group">
2337
<div *ngFor="let item of fieldsArray.get(i); let j = index">
24-
<ng-container *ngTemplateOutlet="
38+
<ng-container
39+
*ngTemplateOutlet="
2540
fieldContainer;
2641
context: {
2742
$implicit: item,
2843
invisibleItems: invisibleItems,
2944
disableItems: disableItems,
3045
model: model
3146
}
32-
"></ng-container>
47+
"
48+
></ng-container>
3349
</div>
3450
</div>
3551
</div>
3652
</ng-container>
3753
</div>
3854

39-
<ng-template #fieldContainer let-item let-invisibleItems="invisibleItems" let-model="model"
40-
let-disableItems="disableItems">
55+
<ng-template
56+
#fieldContainer
57+
let-item
58+
let-invisibleItems="invisibleItems"
59+
let-model="model"
60+
let-disableItems="disableItems"
61+
>
4162
<ng-container *ngIf="!item.hideExpr || !invisibleItems[item.name]">
42-
<ng-container *ngIf="!customFormComponentKeysObject[item.type|| 'text']">
43-
<ng-container *ngIf="
44-
!item.type ||
45-
item.type == 'text' ||
46-
item.type == 'number' ||
47-
item.type == 'time' ||
48-
item.type == 'textArea' ||
49-
item.type == 'password'
50-
">
51-
<narik-mat-input [name]="item.name" [disabled]="item.disableExpr && disableItems[item.name]"
52-
[required]="item.required" placeHolder="{{ item.options.placeHolder | translate }}"
53-
[type]="item.type || 'text'" label="{{ item.label | translate }}" [(ngModel)]="model[item.model]"
54-
[narikValidator]="item.validators" [narikValidatorParams]="item.validatorParams" [options]="item.options">
63+
<ng-container *ngIf="!customFormComponentKeysObject[item.type || 'text']">
64+
<ng-container
65+
*ngIf="
66+
!item.type ||
67+
item.type == 'text' ||
68+
item.type == 'number' ||
69+
item.type == 'time' ||
70+
item.type == 'textArea' ||
71+
item.type == 'password'
72+
"
73+
>
74+
<narik-mat-input
75+
[name]="item.name"
76+
[disabled]="item.disableExpr && disableItems[item.name]"
77+
[required]="item.required"
78+
placeHolder="{{ item.options.placeHolder | translate }}"
79+
[type]="item.type || 'text'"
80+
label="{{ item.label | translate }}"
81+
[(ngModel)]="model[item.model]"
82+
[narikValidator]="item.validators"
83+
[narikValidatorParams]="item.validatorParams"
84+
[options]="item.options"
85+
>
5586
</narik-mat-input>
5687
</ng-container>
5788
<ng-container *ngIf="item.type == 'boolean'">
58-
<narik-mat-checkbox [name]="item.name" [disabled]="item.disableExpr && disableItems[item.name]"
59-
[options]="item.options" [(ngModel)]="model[item.model]" [narikValidator]="item.validators"
60-
[narikValidatorParams]="item.validatorParams" label="{{ item.label | translate }}"></narik-mat-checkbox>
89+
<narik-mat-checkbox
90+
[name]="item.name"
91+
[disabled]="item.disableExpr && disableItems[item.name]"
92+
[options]="item.options"
93+
[(ngModel)]="model[item.model]"
94+
[narikValidator]="item.validators"
95+
[narikValidatorParams]="item.validatorParams"
96+
label="{{ item.label | translate }}"
97+
></narik-mat-checkbox>
6198
</ng-container>
6299
<ng-container *ngIf="item.type == 'date'">
63-
<narik-mat-date-picker [options]="item.options" [disabled]="item.disableExpr && disableItems[item.name]"
64-
[name]="item.name" [required]="item.required" placeHolder="{{ item.options.placeHolder | translate }}"
65-
[(ngModel)]="model[item.model]" [narikValidator]="item.validators"
66-
[narikValidatorParams]="item.validatorParams" label="{{ item.label | translate }}"></narik-mat-date-picker>
100+
<narik-mat-date-picker
101+
[options]="item.options"
102+
[disabled]="item.disableExpr && disableItems[item.name]"
103+
[name]="item.name"
104+
[required]="item.required"
105+
placeHolder="{{ item.options.placeHolder | translate }}"
106+
[(ngModel)]="model[item.model]"
107+
[narikValidator]="item.validators"
108+
[narikValidatorParams]="item.validatorParams"
109+
label="{{ item.label | translate }}"
110+
></narik-mat-date-picker>
67111
</ng-container>
68112
<ng-container *ngIf="item.type == 'select'">
69-
<narik-mat-select [options]="item.options" [name]="item.name"
70-
[disabled]="item.disableExpr && disableItems[item.name]" [required]="item.required"
71-
placeHolder="{{ item.options.placeHolder | translate }}" [dataInfo]="item.dataInfo"
72-
label="{{ item.label | translate }}" [(ngModel)]="model[item.model]" [narikValidator]="item.validators"
73-
[narikValidatorParams]="item.validatorParams"></narik-mat-select>
113+
<narik-mat-select
114+
[options]="item.options"
115+
[name]="item.name"
116+
[disabled]="item.disableExpr && disableItems[item.name]"
117+
[required]="item.required"
118+
placeHolder="{{ item.options.placeHolder | translate }}"
119+
[dataInfo]="item.dataInfo"
120+
label="{{ item.label | translate }}"
121+
[(ngModel)]="model[item.model]"
122+
[narikValidator]="item.validators"
123+
[narikValidatorParams]="item.validatorParams"
124+
></narik-mat-select>
74125
</ng-container>
75126
<ng-container *ngIf="item.type == 'autoComplete'">
76-
<narik-mat-autocomplete [options]="item.options" [name]="item.name"
77-
[disabled]="item.disableExpr && disableItems[item.name]" [required]="item.required"
78-
placeHolder="{{ item.options.placeHolder | translate }}" [minSearchLength]="item.options.minSearchLength || 0"
79-
[isLazyLoadData]="item.options.isLazyLoadData" [dataInfo]="item.dataInfo" label="{{ item.label | translate }}"
80-
[(ngModel)]="model[item.model]" [narikValidator]="item.validators"
81-
[narikValidatorParams]="item.validatorParams"></narik-mat-autocomplete>
127+
<narik-mat-autocomplete
128+
[options]="item.options"
129+
[name]="item.name"
130+
[disabled]="item.disableExpr && disableItems[item.name]"
131+
[required]="item.required"
132+
placeHolder="{{ item.options.placeHolder | translate }}"
133+
[minSearchLength]="item.options.minSearchLength || 0"
134+
[isLazyLoadData]="item.options.isLazyLoadData"
135+
[dataInfo]="item.dataInfo"
136+
label="{{ item.label | translate }}"
137+
[(ngModel)]="model[item.model]"
138+
[narikValidator]="item.validators"
139+
[narikValidatorParams]="item.validatorParams"
140+
></narik-mat-autocomplete>
82141
</ng-container>
83142
<ng-container *ngIf="item.type == 'radio'">
84-
<narik-mat-radio-group [options]="item.options" [name]="item.name"
85-
[disabled]="item.disableExpr && disableItems[item.name]" [required]="item.required"
86-
placeHolder="{{ item.options.placeHolder | translate }}" [dataInfo]="item.dataInfo"
87-
label="{{ item.label | translate }}" [(ngModel)]="model[item.model]" [narikValidator]="item.validators"
88-
[narikValidatorParams]="item.validatorParams"></narik-mat-radio-group>
143+
<narik-mat-radio-group
144+
[options]="item.options"
145+
[name]="item.name"
146+
[disabled]="item.disableExpr && disableItems[item.name]"
147+
[required]="item.required"
148+
placeHolder="{{ item.options.placeHolder | translate }}"
149+
[dataInfo]="item.dataInfo"
150+
label="{{ item.label | translate }}"
151+
[(ngModel)]="model[item.model]"
152+
[narikValidator]="item.validators"
153+
[narikValidatorParams]="item.validatorParams"
154+
></narik-mat-radio-group>
89155
</ng-container>
90156
<ng-container *ngIf="item.type == 'checkList'">
91-
<narik-mat-checkbox-list [options]="item.options" [name]="item.name"
92-
[disabled]="item.disableExpr && disableItems[item.name]" [required]="item.required"
93-
placeHolder="{{ item.options.placeHolder | translate }}" [dataInfo]="item.dataInfo"
94-
label="{{ item.label | translate }}" [(ngModel)]="model[item.model]" [narikValidator]="item.validators"
95-
[narikValidatorParams]="item.validatorParams"></narik-mat-checkbox-list>
157+
<narik-mat-checkbox-list
158+
[options]="item.options"
159+
[name]="item.name"
160+
[disabled]="item.disableExpr && disableItems[item.name]"
161+
[required]="item.required"
162+
placeHolder="{{ item.options.placeHolder | translate }}"
163+
[dataInfo]="item.dataInfo"
164+
label="{{ item.label | translate }}"
165+
[(ngModel)]="model[item.model]"
166+
[narikValidator]="item.validators"
167+
[narikValidatorParams]="item.validatorParams"
168+
></narik-mat-checkbox-list>
96169
</ng-container>
97170
<ng-container *ngIf="item.type == 'table-select'">
98-
<narik-mat-data-table-select [options]="item.options" [name]="item.name"
171+
<narik-mat-data-table-select
172+
[options]="item.options"
173+
[name]="item.name"
99174
[gridOptions]="item.options.gridOptions || {}"
100-
[disabled]="item.disableExpr && disableItems[item.name]" [required]="item.required"
101-
placeHolder="{{ item.options.placeHolder | translate }}" [dataInfo]="item.dataInfo"
102-
label="{{ item.label | translate }}" [fields]="item.options ? item.options.fields : undefined"
103-
[isLazyLoadData]="item.options.isLazyLoadData" [(ngModel)]="model[item.model]"
104-
[narikValidator]="item.validators" [narikValidatorParams]="item.validatorParams">
175+
[disabled]="item.disableExpr && disableItems[item.name]"
176+
[required]="item.required"
177+
placeHolder="{{ item.options.placeHolder | translate }}"
178+
[dataInfo]="item.dataInfo"
179+
label="{{ item.label | translate }}"
180+
[fields]="item.options ? item.options.fields : undefined"
181+
[isLazyLoadData]="item.options.isLazyLoadData"
182+
[(ngModel)]="model[item.model]"
183+
[narikValidator]="item.validators"
184+
[narikValidatorParams]="item.validatorParams"
185+
>
105186
</narik-mat-data-table-select>
106187
</ng-container>
107188
</ng-container>
108189

109190
<ng-container *ngIf="customFormComponentKeysObject[item.type || 'text']">
110-
<ng-container *narikComponentLoader="
191+
<ng-container
192+
*narikComponentLoader="
111193
customFormComponentKeysObject[item.type || 'text'];
112194
bindings: {
113195
field:item,
114196
model:model
115197
};
116198
bindingSource:this
117-
"></ng-container>
199+
"
200+
></ng-container>
118201
</ng-container>
119202
</ng-container>
120-
</ng-template>
203+
</ng-template>

‎projects/narik-ui-nebular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@narik/ui-nebular",
3-
"version": "4.0.0",
3+
"version": "4.0.1",
44
"peerDependencies": {
55
"@angular/common": "~10.0.9",
66
"@angular/core": "~10.0.9",

0 commit comments

Comments
 (0)