mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-09-17 14:21:29 +00:00
[AAE-6807] Text and number widgets support left side label
This commit is contained in:
Rubén Barroso
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<div class="adf-textfield adf-number-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
|
||||
<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" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<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"
|
||||
@@ -18,6 +21,7 @@
|
||||
matTooltipPosition="above"
|
||||
matTooltipShowDelay="1000">
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary" ></error-widget>
|
||||
<error-widget [error]="field.validationSummary" class="break"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
.adf {
|
||||
&-number-widget {
|
||||
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
.mat-form-field-label-wrapper {
|
||||
top: 20px;
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<div class="adf-textfield adf-text-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
|
||||
<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" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
|
||||
<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"
|
||||
@@ -21,3 +23,4 @@
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
.adf {
|
||||
&-text-widget {
|
||||
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
.mat-form-field-label-wrapper {
|
||||
top: 20px;
|
||||
|
||||
@@ -1772,83 +1772,379 @@ export class DemoForm {
|
||||
};
|
||||
|
||||
cloudFormDefinition: any = {
|
||||
formRepresentation: {
|
||||
id: 'text-form',
|
||||
name: 'test-start-form',
|
||||
version: 0,
|
||||
description: '',
|
||||
formDefinition: {
|
||||
tabs: [],
|
||||
fields: [
|
||||
"formRepresentation": {
|
||||
"id": "form-bd97eb82-493a-4f6d-926a-55fa95c19c51",
|
||||
"name": "f1",
|
||||
"description": "",
|
||||
"version": 0,
|
||||
"standAlone": true,
|
||||
"leftLabel": true,
|
||||
"formDefinition": {
|
||||
"tabs": [
|
||||
{
|
||||
id: '1511517333638',
|
||||
type: 'container',
|
||||
fieldType: 'ContainerRepresentation',
|
||||
name: 'Label',
|
||||
tab: null,
|
||||
numberOfColumns: 2,
|
||||
fields: {
|
||||
1: [
|
||||
"id": "b7aaa257-e202-4ce4-87d0-0f87ed50a413",
|
||||
"title": "New Tab",
|
||||
"visibilityCondition": null
|
||||
},
|
||||
{
|
||||
fieldType: 'FormFieldRepresentation',
|
||||
id: 'texttest',
|
||||
name: 'texttest',
|
||||
type: 'text',
|
||||
value: null,
|
||||
required: false,
|
||||
placeholder: 'text',
|
||||
params: {
|
||||
existingColspan: 2,
|
||||
maxColspan: 6,
|
||||
inputMaskReversed: true,
|
||||
inputMask: '0#',
|
||||
inputMaskPlaceholder: '(0-9)'
|
||||
"id": "7a5cc1aa-b62b-4b49-aaf8-57f725d9e6ea",
|
||||
"title": "New Tab",
|
||||
"visibilityCondition": null
|
||||
}
|
||||
],
|
||||
"fields": [
|
||||
{
|
||||
"id": "1e653ba3-f7bc-473d-91f1-6713022bd24d",
|
||||
"name": "Label",
|
||||
"type": "container",
|
||||
"tab": "b7aaa257-e202-4ce4-87d0-0f87ed50a413",
|
||||
"numberOfColumns": 2,
|
||||
"fields": {
|
||||
"1": [
|
||||
{
|
||||
"id": "Text0vrwjf",
|
||||
"name": "Text",
|
||||
"type": "text",
|
||||
"readOnly": false,
|
||||
"required": true,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"placeholder": null,
|
||||
"minLength": 0,
|
||||
"maxLength": 0,
|
||||
"regexPattern": null,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Number0au8cm",
|
||||
"name": "Number",
|
||||
"type": "integer",
|
||||
"readOnly": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"placeholder": null,
|
||||
"minValue": null,
|
||||
"maxValue": null,
|
||||
"required": true,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Date06j610",
|
||||
"name": "Date",
|
||||
"type": "date",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"placeholder": null,
|
||||
"minValue": null,
|
||||
"maxValue": null,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
},
|
||||
"dateDisplayFormat": "YYYY-MM-DD"
|
||||
},
|
||||
{
|
||||
"id": "Dropdown0rk1ud",
|
||||
"name": "Dropdown",
|
||||
"type": "dropdown",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"optionType": "manual",
|
||||
"options": [],
|
||||
"authName": null,
|
||||
"restUrl": null,
|
||||
"restResponsePath": null,
|
||||
"restIdProperty": null,
|
||||
"restLabelProperty": null,
|
||||
"selectionType": "single",
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
},
|
||||
"rule": null
|
||||
},
|
||||
{
|
||||
"id": "Radiobuttons0ixsge",
|
||||
"name": "Radio buttons",
|
||||
"type": "radio-buttons",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"optionType": "manual",
|
||||
"options": [
|
||||
{
|
||||
"id": "Id_1",
|
||||
"name": "Label 1"
|
||||
},
|
||||
{
|
||||
"id": "Id_2",
|
||||
"name": "Label 2"
|
||||
}
|
||||
],
|
||||
"authName": null,
|
||||
"restUrl": null,
|
||||
"restResponsePath": null,
|
||||
"restIdProperty": null,
|
||||
"restLabelProperty": null,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Attachfile0le6s4",
|
||||
"name": "Attach file",
|
||||
"type": "upload",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2,
|
||||
"fileSource": {
|
||||
"name": "Alfresco Content",
|
||||
"serviceId": "alfresco-content"
|
||||
},
|
||||
"multiple": false,
|
||||
"link": false,
|
||||
"menuOptions": {
|
||||
"show": true,
|
||||
"download": true,
|
||||
"retrieveMetadata": false,
|
||||
"remove": true
|
||||
},
|
||||
"displayableCMProperties": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Hyperlink081lmk",
|
||||
"name": "Hyperlink",
|
||||
"type": "hyperlink",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"hyperlinkUrl": null,
|
||||
"displayText": null,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Fileviewer08bizj",
|
||||
"name": "File viewer",
|
||||
"type": "file-viewer",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
}
|
||||
],
|
||||
2: [{
|
||||
fieldType: 'AttachFileFieldRepresentation',
|
||||
id: 'attachfiletest',
|
||||
name: 'attachfiletest',
|
||||
type: 'upload',
|
||||
required: true,
|
||||
colspan: 2,
|
||||
placeholder: 'attachfile',
|
||||
params: {
|
||||
existingColspan: 2,
|
||||
maxColspan: 2,
|
||||
fileSource: {
|
||||
serviceId: 'local-file',
|
||||
name: 'Local File'
|
||||
},
|
||||
multiple: true,
|
||||
link: false
|
||||
},
|
||||
visibilityCondition: {
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
],
|
||||
outcomes: [],
|
||||
metadata: {
|
||||
property1: 'value1',
|
||||
property2: 'value2'
|
||||
},
|
||||
variables: [
|
||||
"2": [
|
||||
{
|
||||
name: 'variable1',
|
||||
type: 'string',
|
||||
value: 'value1'
|
||||
"id": "People027fto",
|
||||
"name": "People",
|
||||
"type": "people",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"optionType": "single",
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
},
|
||||
"selectLoggedUser": false
|
||||
},
|
||||
{
|
||||
name: 'variable2',
|
||||
type: 'string',
|
||||
value: 'value2'
|
||||
"id": "Amount0bflna",
|
||||
"name": "Amount",
|
||||
"type": "amount",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"placeholder": "123",
|
||||
"minValue": null,
|
||||
"maxValue": null,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
},
|
||||
"enableFractions": false,
|
||||
"currency": "$"
|
||||
},
|
||||
{
|
||||
"id": "Multilinetext0bwk6t",
|
||||
"name": "Multiline text",
|
||||
"type": "multi-line-text",
|
||||
"readOnly": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"placeholder": null,
|
||||
"minLength": 0,
|
||||
"maxLength": 0,
|
||||
"regexPattern": null,
|
||||
"required": false,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Checkbox04obiv",
|
||||
"name": "Checkbox",
|
||||
"type": "boolean",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Groupofpeople00lqxw",
|
||||
"name": "Group of people",
|
||||
"type": "functional-group",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"optionType": "single",
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Dateandtime0pqokp",
|
||||
"name": "Date and time",
|
||||
"type": "datetime",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"placeholder": null,
|
||||
"minValue": null,
|
||||
"maxValue": null,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
},
|
||||
"dateDisplayFormat": "YYYY-MM-DD HH:mm"
|
||||
},
|
||||
{
|
||||
"id": "Displaytext0o147e",
|
||||
"name": "Display text",
|
||||
"type": "readonly-text",
|
||||
"readOnly": false,
|
||||
"value": "Display text as part of the form",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Metadataviewer0rqi1s",
|
||||
"name": "Metadata viewer",
|
||||
"type": "properties-viewer",
|
||||
"readOnly": false,
|
||||
"required": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2,
|
||||
"propertiesViewerOptions": {
|
||||
"displayDefaultProperties": true,
|
||||
"expanded": true,
|
||||
"preset": "default",
|
||||
"displayEmpty": false,
|
||||
"editable": false,
|
||||
"multi": false,
|
||||
"displayAspect": null,
|
||||
"copyToClipboardAction": true,
|
||||
"useChipsForMultiValueProperty": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "Displayvalue01ly0f",
|
||||
"name": "Display value",
|
||||
"type": "readonly",
|
||||
"value": "No field selected",
|
||||
"readOnly": false,
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"visibilityCondition": null,
|
||||
"params": {
|
||||
"existingColspan": 1,
|
||||
"maxColspan": 2,
|
||||
"field": {
|
||||
"id": "Displayvalue01ly0f",
|
||||
"name": "Display value",
|
||||
"type": "text"
|
||||
},
|
||||
"responseVariable": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"outcomes": [
|
||||
{
|
||||
"id": "1cfe6797-7c70-4113-b16d-94a776f03451",
|
||||
"name": "New Outcome"
|
||||
},
|
||||
{
|
||||
"id": "a53a0d3a-09c5-495c-919c-4fd1bf942130",
|
||||
"name": "New Outcome"
|
||||
},
|
||||
{
|
||||
"id": "e5eecf9b-e54c-42fe-89bc-dd80593fc369",
|
||||
"name": "New Outcome"
|
||||
}
|
||||
],
|
||||
"metadata": {},
|
||||
"variables": []
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
getEasyForm(): any {
|
||||
|
||||
Reference in New Issue
Block a user