inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-6807] Simulate real form

Browse Source
This commit is contained in:
Rubén Barroso
2022-05-09 15:45:07 +02:00
parent 7472f4ef7d
commit b55a54b84e
8 changed files with 5440 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
lib/core/form/components/form-renderer.component.scss
View File

@@ -97,13 +97,25 @@
&-compact-field { &-compact-field {
font-size: 12px; font-size: 12px;
.mat-form-field-wrapper { .mat-form-field-wrapper {
padding-bottom: 0; padding-bottom: 6px;
} }
&.mat-form-field-invalid { &.mat-form-field-invalid {
.mat-form-field-wrapper { .mat-form-field-wrapper {
padding-bottom: 18px; padding-bottom: 18px;
} }
} }
.mat-form-field-label {
top: 0;
margin-top: 0;
}
}
&-compact-dropdown {
font-size: 12px;
.mat-form-field-wrapper > div {
background-color: var(--theme-card-bg-color);
}
} }
&-form-mat-card-actions { &-form-mat-card-actions {

8
lib/core/form/components/widgets/number/number.widget.html
View File

@@ -4,9 +4,7 @@
<mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }} <mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}
<span class="adf-asterisk" *ngIf="isRequired()">*</span> <span class="adf-asterisk" *ngIf="isRequired()">*</span>
</mat-label> </mat-label>
<label *ngIf="!field.compactFields" class="adf-label" [attr.for]="field.id">{{field.name | translate }} <label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</label>
<input matInput <input matInput
class="adf-input" class="adf-input"
type="text" type="text"
@@ -23,6 +21,6 @@
matTooltipPosition="above" matTooltipPosition="above"
matTooltipShowDelay="1000"> matTooltipShowDelay="1000">
</mat-form-field> </mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget> <error-widget *ngIf="isTouched() && !this.field.isValid" [error]="field.validationSummary" class="a"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" class="b"></error-widget>
</div> </div>

17
lib/core/form/components/widgets/number/number.widget.scss
View File

@@ -1,15 +1,10 @@
.adf { .adf {
// &-number-widget { &-number-widget {
// display: flex; width: 100%;
// div { .mat-form-field-label-wrapper label {
// width: 100%; top: 20px;
// padding-right: 1%; }
// } }
// .mat-form-field-label-wrapper {
// top: 20px;
// }
// }
} }

46
lib/core/form/components/widgets/text/text.widget.html
View File

@@ -1,26 +1,26 @@
<div class="adf-textfield adf-text-widget {{field.className}}" <div class="adf-textfield adf-text-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-left-label" *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label> <mat-form-field [hideRequiredMarker]="true" [appearance]="field.compactFields ? 'outline' : 'legacy'" [class.adf-compact-field]="field.compactFields">
<div> <mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}
<mat-form-field [hideRequiredMarker]="true"> <span class="adf-asterisk" *ngIf="isRequired()">*</span>
<label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label> </mat-label>
<input matInput <label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
class="adf-input" <input matInput
type="text" class="adf-input"
[id]="field.id" type="text"
[required]="isRequired()" [id]="field.id"
[value]="field.value" [required]="isRequired()"
[(ngModel)]="field.value" [value]="field.value"
(ngModelChange)="onFieldChanged(field)" [(ngModel)]="field.value"
[disabled]="field.readOnly || readOnly" (ngModelChange)="onFieldChanged(field)"
[textMask]="{mask: mask, isReversed: isMaskReversed}" [disabled]="field.readOnly || readOnly"
[placeholder]="placeholder" [textMask]="{mask: mask, isReversed: isMaskReversed}"
[matTooltip]="field.tooltip" [placeholder]="placeholder"
(blur)="markAsTouched()" [matTooltip]="field.tooltip"
matTooltipPosition="above" (blur)="markAsTouched()"
matTooltipShowDelay="1000"> matTooltipPosition="above"
</mat-form-field> matTooltipShowDelay="1000">
<error-widget [error]="field.validationSummary"></error-widget> </mat-form-field>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> <error-widget *ngIf="isTouched() && !this.field.isValid" [error]="field.validationSummary" class="a"></error-widget>
</div> <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" class="b"></error-widget>
</div> </div>

9
lib/core/form/components/widgets/text/text.widget.scss
View File

@@ -1,14 +1,9 @@
.adf { .adf {
&-text-widget { &-text-widget {
display: flex; width: 100%;
div { .mat-form-field-label-wrapper label {
width: 100%;
padding-right: 1%;
}
.mat-form-field-label-wrapper {
top: 20px; top: 20px;
} }
} }

5787
lib/core/mock/form/demo-form.mock.ts
View File

File diff suppressed because it is too large Load Diff

5
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
View File

@@ -1,11 +1,12 @@
<div class="adf-dropdown-widget {{field.className}}" <div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly"> [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly">
<div class="adf-dropdown-widget-top-labels"> <div class="adf-dropdown-widget-top-labels" *ngIf="!field.compactFields">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span> *ngIf="isRequired()">*</span>
</label> </label>
</div> </div>
<mat-form-field> <mat-form-field [appearance]="field.compactFields ? 'fill' : 'legacy'" [class.adf-compact-dropdown]="field.compactFields">
<mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}</mat-label>
<mat-select class="adf-select" <mat-select class="adf-select"
[id]="field.id" [id]="field.id"
[(ngModel)]="field.value" [(ngModel)]="field.value"

12
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
View File

@@ -39,6 +39,12 @@ export const HIDE_FILTER_LIMIT = 5;
/* eslint-disable @angular-eslint/component-selector */ /* eslint-disable @angular-eslint/component-selector */
interface Food {
value: string;
viewValue: string;
}
@Component({ @Component({
selector: 'dropdown-cloud-widget', selector: 'dropdown-cloud-widget',
templateUrl: './dropdown-cloud.widget.html', templateUrl: './dropdown-cloud.widget.html',
@@ -64,6 +70,12 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
list$: Observable<FormFieldOption[]>; list$: Observable<FormFieldOption[]>;
filter$ = new BehaviorSubject<string>(''); filter$ = new BehaviorSubject<string>('');
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'},
];
protected onDestroy$ = new Subject<boolean>(); protected onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService, constructor(public formService: FormService,