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] Text and number widgets support left side label

Browse Source
This commit is contained in:
Rubén Barroso
2022-05-05 17:10:26 +02:00
parent 90009d7516
commit bfc76e11ef
8 changed files with 432 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -88,6 +88,12 @@
white-space: nowrap;
}
&-left-label {
font-size: var(--theme-caption-font-size);
line-height: 64px;
margin-right: 15px;
}
&-form-mat-card-actions {
float: right;
padding-bottom: 25px !important;

5
lib/core/form/components/widgets/core/form-field.model.ts
View File

@@ -76,6 +76,7 @@ export class FormFieldModel extends FormWidgetModel {
rule?: FormFieldRule;
selectLoggedUser: boolean;
groupsRestriction: string[];
leftLabel: boolean = false;
// container model members
numberOfColumns: number = 1;
@@ -219,6 +220,10 @@ export class FormFieldModel extends FormWidgetModel {
}
}
if (form.json) {
this.leftLabel = form.json.leftLabel || false;
}
const emptyOption = Array.isArray(this.options) ? this.options.find(({ id }) => id === 'empty') : undefined;
if (this.hasEmptyValue === undefined) {
this.hasEmptyValue = json?.hasEmptyValue ?? !!emptyOption;

4
lib/core/form/components/widgets/form.theme.scss
View File

@@ -32,6 +32,10 @@ ul > li > form-field > .adf-focus {
color: var(--theme-secondary-text-color);
}
&-left-label {
color: var(--theme-secondary-text-color);
}
&-asterisk {
padding-left: 2px;
color: var(--theme-warn-color);

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

@@ -1,23 +1,27 @@
<div class="adf-textfield adf-number-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input matInput
class="adf-input"
type="text"
pattern="-?[0-9]*(\.[0-9]+)?"
[id]="field.id"
[required]="isRequired()"
[value]="displayValue"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</mat-form-field>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<label class="adf-left-label" *ngIf="field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<div>
<mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</label>
<input matInput
class="adf-input"
type="text"
pattern="-?[0-9]*(\.[0-9]+)?"
[id]="field.id"
[required]="isRequired()"
[value]="displayValue"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</mat-form-field>
<error-widget [error]="field.validationSummary" class="break"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
</div>

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

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

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

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

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

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