diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html index 2fa3ea1723..fc115e043a 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html @@ -1,79 +1,80 @@
- - - -
+ + +
-
- - - -
+
+ +
+ + +
-
- {{ message | translate: model.validators }} -
+
+ {{ message | translate: model.validators }} +
-
-
- -
-
- -
- - - - - - - -
-
- +
+ +
+
+ +
+
+ + + + + + + +
+
+
- - diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html index a5d6d63418..d5421a254f 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html @@ -1,50 +1,54 @@ -
- +
+
+ + {{model.placeholder}} * + + - - - + + +
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss index 9eab449eeb..97698b2102 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss @@ -1,3 +1,7 @@ .col-lg-1 { width: auto; } + +legend { + font-size: initial; +} diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts index 87e49956bb..4989dab93a 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts @@ -69,6 +69,7 @@ describe('DsDatePickerComponent test suite', () => { [bindId]='bindId' [group]='group' [model]='model' + [legend]='legend' (blur)='onBlur($event)' (change)='onValueChange($event)' (focus)='onFocus($event)'>`; diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts index 438f78a6a0..78f9935829 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts @@ -20,6 +20,7 @@ export class DsDatePickerComponent extends DynamicFormControlComponent implement @Input() bindId = true; @Input() group: FormGroup; @Input() model: DynamicDsDatePickerModel; + @Input() legend: string; @Output() selected = new EventEmitter(); @Output() remove = new EventEmitter(); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts index fa71e0b6dd..1c053ffc80 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts @@ -1,24 +1,30 @@ import { DynamicDateControlModel, - DynamicDateControlModelConfig, + DynamicDatePickerModelConfig, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core'; export const DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER = 'DATE'; +export interface DynamicDsDateControlModelConfig extends DynamicDatePickerModelConfig { + legend?: string; +} + /** * Dynamic Date Picker Model class */ export class DynamicDsDatePickerModel extends DynamicDateControlModel { @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER; malformedDate: boolean; + legend: string; hasLanguages = false; repeatable = false; - constructor(config: DynamicDateControlModelConfig, layout?: DynamicFormControlLayout) { + constructor(config: DynamicDsDateControlModelConfig, layout?: DynamicFormControlLayout) { super(config, layout); this.malformedDate = false; + this.legend = config.legend; } } diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html index 0e48b85c78..eb4f60add7 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html @@ -1,8 +1,13 @@
-
+
-

{{'form.loading' | translate}}

@@ -40,5 +50,3 @@
- - diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts index 0f69b0fd57..aef0219579 100644 --- a/src/app/shared/form/builder/parsers/date-field-parser.ts +++ b/src/app/shared/form/builder/parsers/date-field-parser.ts @@ -1,6 +1,8 @@ import { FieldParser } from './field-parser'; -import { DynamicDatePickerModelConfig } from '@ng-dynamic-forms/core'; -import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model'; +import { + DynamicDsDateControlModelConfig, + DynamicDsDatePickerModel +} from '../ds-dynamic-form-ui/models/date-picker/date-picker.model'; import { isNotEmpty } from '../../../empty.util'; import { DS_DATE_PICKER_SEPARATOR } from '../ds-dynamic-form-ui/models/date-picker/date-picker.component'; import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model'; @@ -9,7 +11,8 @@ export class DateFieldParser extends FieldParser { public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any { let malformedDate = false; - const inputDateModelConfig: DynamicDatePickerModelConfig = this.initModel(null, label); + const inputDateModelConfig: DynamicDsDateControlModelConfig = this.initModel(null, false, true); + inputDateModelConfig.legend = this.configData.label; inputDateModelConfig.toggleIcon = 'fas fa-calendar'; this.setValues(inputDateModelConfig as any, fieldValue); diff --git a/src/app/shared/number-picker/number-picker.component.html b/src/app/shared/number-picker/number-picker.component.html index 1f6c08d92e..58b6def50b 100644 --- a/src/app/shared/number-picker/number-picker.component.html +++ b/src/app/shared/number-picker/number-picker.component.html @@ -1,6 +1,6 @@
- - -