From 9653a0cb04180470d7dc8d12e87031533c41e5e4 Mon Sep 17 00:00:00 2001 From: mchouliara Date: Thu, 26 Sep 2024 14:33:51 +0300 Subject: [PATCH] REVERT+REDO plan editor with new form focus directive, refactor description editor, fix annotation dialog accessibility, add id/name input to tags field component --- .../rich-text-editor.component.ts | 6 +- .../annotation-dialog.component.html | 16 +- ...cription-base-fields-editor.component.html | 26 +- .../editor/description-editor.module.ts | 4 +- .../field-set-title.component.html | 12 +- .../field-set-title.component.scss | 2 +- .../form-field-set.component.html | 6 +- .../form-field/form-field.component.html | 61 +-- .../form-field/form-field.component.ts | 2 +- .../description-form.module.ts | 4 +- .../plan-listing-item.component.scss | 2 +- .../plan/listing/plan-listing.component.scss | 2 +- .../plan-editor.component.html | 386 ++++++++---------- .../plan-editor.module.ts | 4 +- .../tag/tags-field/tags-field.component.html | 2 +- .../ui/tag/tags-field/tags-field.component.ts | 4 +- .../src/common/forms/form-focus.directive.ts | 17 + 17 files changed, 268 insertions(+), 288 deletions(-) create mode 100644 frontend/src/common/forms/form-focus.directive.ts diff --git a/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts b/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts index 4b168c36e..a5f8a67f1 100644 --- a/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts +++ b/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts @@ -7,7 +7,7 @@ import { Subscription } from "rxjs"; selector: 'rich-text-editor-component', template: `
- @@ -19,11 +19,11 @@ import { Subscription } from "rxjs"; changeDetection: ChangeDetectionStrategy.OnPush }) export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy { - + static nextId = 0; @ViewChild(AngularEditorComponent) editor: AngularEditorComponent @Input() form: FormControl; - @Input() id: string = "editor1"; + @Input() name: string = `rich-text-editor${RichTextEditorComponent.nextId++}`; @Input() placeholder: string = "Enter text"; @Input() required: boolean = false; @Input() wrapperClasses: string = ""; diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html index 766ebd2c4..e26b7197b 100644 --- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html +++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html @@ -9,13 +9,13 @@
-
-
@@ -36,8 +36,8 @@
- visibility_off - public + visibility_off + public
@@ -105,12 +105,12 @@
diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html index d0dca1d19..b695dabd8 100644 --- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html +++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html @@ -7,12 +7,12 @@
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TITLE' | translate}} +
+
- + {{formGroup.get('label').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -22,11 +22,13 @@
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION' | translate}}
- {{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-HINT' | translate}} + +
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-HINT' | translate}}
- +
{{formGroup.get('description').getError('backendError').message}} @@ -38,21 +40,21 @@
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TAGS' | translate}}
+
- +
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE' | translate}} * +
+
- +
{{descriptionTemplate.label}}, diff --git a/frontend/src/app/ui/description/editor/description-editor.module.ts b/frontend/src/app/ui/description/editor/description-editor.module.ts index e1a4bf14d..c7b9893e4 100644 --- a/frontend/src/app/ui/description/editor/description-editor.module.ts +++ b/frontend/src/app/ui/description/editor/description-editor.module.ts @@ -15,6 +15,7 @@ import { TagsFieldModule } from '@app/ui/tag/tags-field/tags-field.module'; import { NewDescriptionDialogComponent } from './new-description/new-description.component'; import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module'; import { DeprecatedDescriptionTemplateDialog } from './description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component'; +import { FormFocusDirective } from '@common/forms/form-focus.directive'; @NgModule({ imports: [ @@ -28,7 +29,8 @@ import { DeprecatedDescriptionTemplateDialog } from './description-base-fields-e DescriptionEditorRoutingModule, RichTextEditorModule, TagsFieldModule, - AutoCompleteModule + AutoCompleteModule, + FormFocusDirective, ], declarations: [ DescriptionEditorComponent, diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html index e728ead21..51605e5ee 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html @@ -1,10 +1,10 @@
-
+
+ info
-
-
+
+
@@ -24,8 +24,8 @@
{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-MORE' | translate}}
-
-
+
+ {{'DESCRIPTION-EDITOR.ACTIONS.VIEW-LESS' | translate}} diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss index 6c0d5ff2d..7011c1a92 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss @@ -21,7 +21,7 @@ h6 { font-weight: 400; } -.more { +.more { //TODO mchouliara link text-decoration: underline; color: var(--secondary-color); cursor: pointer; diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html index 08972bc7b..0ba1dc486 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html @@ -19,9 +19,9 @@
-
{{field.label}}
+
- +
@@ -96,7 +96,7 @@
- +
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html index 27b6faf16..25b0f7dee 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html @@ -1,17 +1,17 @@
-
{{fieldSet.title}}
+ info -
{{fieldSet.description}} -
-
+ {{fieldSet.description}} + + {{fieldSet.extendedDescription}} -
+
{{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} {{'GENERAL.VALIDATION.URL.MESSAGE' | translate}} @@ -21,10 +21,10 @@
- + - +
@@ -32,7 +32,7 @@ {{ field.data.label }} - + {{opt.label}} {{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}} @@ -42,7 +42,7 @@ {{ field.data.label }} - + {{opt.label}} @@ -57,7 +57,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -67,7 +67,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -81,7 +81,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -91,7 +91,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -101,7 +101,7 @@
- + {{field.data.label}} {{propertiesFormGroup?.get(field.id).get('booleanValue').getError('backendError').message}}
@@ -109,7 +109,7 @@
{{ field.data.label }}{{ isRequired ? '*' : ''}} - + @@ -120,8 +120,15 @@
- +
@@ -133,7 +140,7 @@
- + {{ fileNameDisplay }} @@ -152,9 +159,9 @@
- - {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }} - {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }} + + {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }} + {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }} {{propertiesFormGroup?.get(field.id).get('booleanValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -163,8 +170,8 @@
- - {{option.label}} + + {{option.label}} {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -174,7 +181,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('dateValue').getError('backendError').message}} @@ -189,7 +196,7 @@
{{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -210,7 +217,7 @@
{{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts index 0b0c01d27..9ddbc435a 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts @@ -45,7 +45,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn @Input() isChild: Boolean = false; @Input() detectChangesObservable: Observable; - + @Input() path: string; visible: boolean = true; descriptionTemplateFieldTypeEnum = DescriptionTemplateFieldType; diff --git a/frontend/src/app/ui/description/editor/description-form/description-form.module.ts b/frontend/src/app/ui/description/editor/description-form/description-form.module.ts index 73847140d..533eae1ed 100644 --- a/frontend/src/app/ui/description/editor/description-form/description-form.module.ts +++ b/frontend/src/app/ui/description/editor/description-form/description-form.module.ts @@ -16,6 +16,7 @@ import { DescriptionFormComponent } from './description-form.component'; import { FormAnnotationService } from '../../../annotations/annotation-dialog-component/form-annotation.service'; import { TagsFieldModule } from '@app/ui/tag/tags-field/tags-field.module'; import { DescriptionFormService } from './components/services/description-form.service'; +import { FormFocusDirective } from '@common/forms/form-focus.directive'; @NgModule({ @@ -28,7 +29,8 @@ import { DescriptionFormService } from './components/services/description-form.s FormattingModule, ReferenceFieldModule, AnnotationDialogModule, - TagsFieldModule + TagsFieldModule, + FormFocusDirective, ], declarations: [ DescriptionFormComponent, diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss index 5fff851d6..b66134433 100644 --- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss +++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss @@ -68,7 +68,7 @@ p { color: #0d7489; } -.more-horiz { +.more-horiz { //TODO mchouliara link font-size: 28px; color: var(--gray); } diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.scss b/frontend/src/app/ui/plan/listing/plan-listing.component.scss index cc2bbae2c..12d14338f 100644 --- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss +++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss @@ -51,7 +51,7 @@ padding: 0px; } -.more-horiz { +.more-horiz { //TODO mchouliara link font-size: 28px; color: var(--gray); } diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html index f25e817fc..fe72ea9bd 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html @@ -82,16 +82,16 @@
{{'PLAN-EDITOR.FIELDS.TITLE' | translate}} - + {{formGroup.get('label').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
- +
- +
@@ -201,226 +201,174 @@
- @if(field.category === planBlueprintSectionFieldCategoryEnum.System){ - @switch(field.systemFieldType){ - @case(planBlueprintSystemFieldTypeEnum.AccessRights){ -
-
- -
- -
-
- - - - {{enumUtils.toPlanAccessTypeString(planAccessType)}} - - - {{formGroup.get('accessType').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
- }@case(planBlueprintSystemFieldTypeEnum.Language){ -
-
- -
- -
-
- - - - {{ lang.name }} - - - {{formGroup.get('language').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
- }@case(planBlueprintSystemFieldTypeEnum.Description){ -
-
- -
- -
-
- -
- } - @case(planBlueprintSystemFieldTypeEnum.Title){ - -
- - - - {{formGroup.get('label').getError('backendError').message}} - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
- }@case(planBlueprintSystemFieldTypeEnum.Contact){ - -
-
-
-
- {{contactIndex + 1}} - - drag_indicator - -
-
-
-
- - {{'PLAN-EDITOR.FIELDS.FIRST-NAME' | translate}} - - {{contact.get('firstName').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
-
- - {{'PLAN-EDITOR.FIELDS.LAST-NAME' | translate}} - - {{contact.get('lastName').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
-
- - {{'PLAN-EDITOR.FIELDS.EMAIL' | translate}} - - {{contact.get('email').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
-
-
-
- -
-
- -
-
- {{formGroup.get('properties').get('contacts').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} -
-
- -
-
- }@case(planBlueprintSystemFieldTypeEnum.User){ - -
- -
- } - } - } - @if(field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType){ - -
- - - - - - -
- } - @if(field.category === planBlueprintSectionFieldCategoryEnum.Extra){ - @switch(field.dataType){ - @case(planBlueprintExtraFieldDataTypeEnum.Text){ - -
- - {{field.label}} - - {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
- } - @case(planBlueprintExtraFieldDataTypeEnum.RichText){ -
-
- -
- -
-
- -
- }@case(planBlueprintExtraFieldDataTypeEnum.Date) { - -
- - {{field.label}} - - - - {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
- }@case(planBlueprintExtraFieldDataTypeEnum.Number) { - -
- - {{field.label}} - - {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
- } - } - } - - -
-
- -
- -
- - +
+
+ + + +
+
+ +
@if(!isNew){ -
- -
-
} -
{{field.description}}
- +
+ +
{{field.description}}
+ +
+
+
+ + + + {{formGroup.get('label').getError('backendError').message}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ + +
+
+ + + + {{ lang.name }} + + + {{formGroup.get('language').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+
+
+
+ {{contactIndex + 1}} + + drag_indicator + +
+
+
+
+ + {{'PLAN-EDITOR.FIELDS.FIRST-NAME' | translate}} + + {{contact.get('firstName').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ + {{'PLAN-EDITOR.FIELDS.LAST-NAME' | translate}} + + {{contact.get('lastName').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ + {{'PLAN-EDITOR.FIELDS.EMAIL' | translate}} + + {{contact.get('email').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+
+
+ +
+
+ +
+
+ {{formGroup.get('properties').get('contacts').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} +
+
+ +
+
+
+ + + + {{enumUtils.toPlanAccessTypeString(planAccessType)}} + + + {{formGroup.get('accessType').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+
+ +
+
+
+
+ + + + + + +
+
+
+ + {{field.label}} + + {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ +
+
+ + {{field.label}} + + + + {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ + {{field.label}} + + {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+
@@ -429,10 +377,10 @@
- + {{'PLAN-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}} - + {{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts index bbb748d7d..ae703c480 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts @@ -14,6 +14,7 @@ import { PlanFormProgressIndicationModule } from './form-progress-indication/pla import { PlanDeleteDialogModule } from '../plan-delete-dialog/plan-delete-dialog.module'; import { PlanContactPrefillDialogModule } from '../plan-contact-prefill-dialog/plan-contact-prefill-dialog.module'; import { AnnotationDialogModule } from '@app/ui/annotations/annotation-dialog-component/annotation-dialog.module'; +import { FormFocusDirective } from '@common/forms/form-focus.directive'; @NgModule({ imports: [ @@ -30,7 +31,8 @@ import { AnnotationDialogModule } from '@app/ui/annotations/annotation-dialog-co PlanUserFieldModule, PlanFormProgressIndicationModule, PlanContactPrefillDialogModule, - AnnotationDialogModule + AnnotationDialogModule, + FormFocusDirective ], declarations: [ PlanEditorComponent, diff --git a/frontend/src/app/ui/tag/tags-field/tags-field.component.html b/frontend/src/app/ui/tag/tags-field/tags-field.component.html index 616a3746e..f63d09c7f 100644 --- a/frontend/src/app/ui/tag/tags-field/tags-field.component.html +++ b/frontend/src/app/ui/tag/tags-field/tags-field.component.html @@ -8,7 +8,7 @@ - + {{tag}} diff --git a/frontend/src/app/ui/tag/tags-field/tags-field.component.ts b/frontend/src/app/ui/tag/tags-field/tags-field.component.ts index 4515a5655..ccf9ce5b5 100644 --- a/frontend/src/app/ui/tag/tags-field/tags-field.component.ts +++ b/frontend/src/app/ui/tag/tags-field/tags-field.component.ts @@ -16,11 +16,11 @@ import { map, mergeMap, startWith, takeUntil } from 'rxjs/operators'; styleUrls: ['./tags-field.component.scss'] }) export class TagsComponent extends BaseComponent implements OnInit, OnChanges { - + static nextId: number = 0; @Input() form: UntypedFormControl = null; @Input() label: string; @Input() placeholder: string; - + @Input() name: string = `tag-field-${TagsComponent.nextId++}`; separatorKeysCodes: number[] = [ENTER, COMMA]; filteredTags: Observable; tags: string[] = []; diff --git a/frontend/src/common/forms/form-focus.directive.ts b/frontend/src/common/forms/form-focus.directive.ts new file mode 100644 index 000000000..4e15645e1 --- /dev/null +++ b/frontend/src/common/forms/form-focus.directive.ts @@ -0,0 +1,17 @@ +import { Directive, HostListener, Input } from '@angular/core'; + +@Directive({ + selector: '[appFormFocus]', + standalone: true +}) +export class FormFocusDirective { //todo it doesn't work on rich-text-editor inputs + @Input() appFormFocus: string; + constructor() { } + @HostListener('click') onLabelClick(){ + if(this.appFormFocus) { + document.getElementById(this.appFormFocus)?.focus(); + (document.getElementById(this.appFormFocus)?.querySelector(".angular-editor-textarea") as HTMLElement)?.focus(); //for rich-text-editor + document.getElementById(`${this.appFormFocus}-input`)?.focus(); //for any mat component that nests the + } + } +}