From 198061aeaaa38dfc73858e069774034abf7c4475 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Tue, 12 Oct 2021 18:14:22 +0300 Subject: [PATCH] Description boxes in admin forms replaced with rich text editor . 1. dataset-profile-editor-composite-field.component.ts & dataset-profile-editor-section.component.ts & dataset-profile-editor.component.ts: Initialize AngularEditorConfig. 2. dataset-profile-editor-composite-field.component.html & dataset-profile-editor-section.component.html & dataset-profile-editor.component.html: Use in description. 3. multiple-auto-complete.component.html & dataset-profile-listing.component.html & form-section.component.html: Show description as html. 4. dataset-profile.module.ts: Imported HttpClientModule, AngularEditorModule (needed for ). 5. available-profiles.component.html: Show description as html, under the Dataset Template title, not as tooltip (matTooltip does not receive html). 6. available-profiles.component.ts: Added styleUrls: ['available-profiles.component.scss']. 7. available-profiles.component.scss: [NEW] Added css for class "list-option" to cut description if too long. 8. form-composite-title.component.html: Show description and extendedDescription as html | Add view more/less functionality to show/hide extendedDescription. 9. form-composite-title.component.ts: Added "public showExtendedDescription: boolean = false;" field. 10. form-composite-title.component.scss: Added css for "more" class, to make "view more/less" seem like link. 11. assets/i18n/: In language files added DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE (-LESS). 12. assets/styles.css: Added css for , to be similar to the other text areas and forms. --- dmp-frontend/package.json | 1 + .../multiple-auto-complete.component.html | 2 +- .../dataset-profile/dataset-profile.module.ts | 5 +- ...file-editor-composite-field.component.html | 22 +++++---- ...rofile-editor-composite-field.component.ts | 34 ++++++++++++++ ...aset-profile-editor-section.component.html | 13 +++--- ...ataset-profile-editor-section.component.ts | 35 ++++++++++++++ .../dataset-profile-editor.component.html | 19 ++++---- .../dataset-profile-editor.component.ts | 35 ++++++++++++++ .../dataset-profile-listing.component.html | 2 +- .../available-profiles.component.html | 8 +++- .../available-profiles.component.scss | 7 +++ .../available-profiles.component.ts | 1 + .../form-composite-title.component.html | 18 ++++++-- .../form-composite-title.component.scss | 8 ++++ .../form-composite-title.component.ts | 2 + .../form-section/form-section.component.html | 4 +- dmp-frontend/src/assets/i18n/de.json | 8 +++- dmp-frontend/src/assets/i18n/en.json | 8 +++- dmp-frontend/src/assets/i18n/es.json | 8 +++- dmp-frontend/src/assets/i18n/gr.json | 8 +++- dmp-frontend/src/assets/i18n/pt.json | 8 +++- dmp-frontend/src/assets/i18n/sk.json | 8 +++- dmp-frontend/src/assets/i18n/sr.json | 6 +++ dmp-frontend/src/assets/i18n/tr.json | 8 +++- dmp-frontend/src/styles.scss | 46 ++++++++++++++++++- 26 files changed, 280 insertions(+), 44 deletions(-) create mode 100644 dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss diff --git a/dmp-frontend/package.json b/dmp-frontend/package.json index a96c29d45..12b85564e 100644 --- a/dmp-frontend/package.json +++ b/dmp-frontend/package.json @@ -19,6 +19,7 @@ "@angular/forms": "^12.2.7", "@angular/material-moment-adapter": "^12.2.7", "@angular/platform-browser": "^12.2.7", + "@kolkov/angular-editor": "^1.2.0", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "@swimlane/ngx-datatable": "^20.0.0", diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html index 63ed19aec..0a912d97a 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html @@ -45,7 +45,7 @@
{{_titleFn(item)}}
- {{_subtitleFn(item)}} +
{{popupItemActionIcon}} diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts index 526c39143..660ab6101 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts @@ -51,6 +51,8 @@ import { DatasetProfileEditorSectionFieldSetComponent } from './editor/component import { ParseStatus } from './listing/pipe/parse-status.pipe'; import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents'; import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section'; +import {HttpClientModule} from "@angular/common/http"; +import {AngularEditorModule} from "@kolkov/angular-editor"; @@ -68,7 +70,8 @@ import { DatasetProfileTableOfContentsInternalSection } from './table-of-content DragDropModule, MatBadgeModule, DragulaModule, - AutoCompleteModule + AutoCompleteModule, + HttpClientModule, AngularEditorModule, ], declarations: [ DatasetProfileListingComponent, diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html index 9ddfe63e7..1069e7252 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html @@ -77,17 +77,19 @@
-
- - - +
+
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}
+
+ +
-
- - - +
+
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}
+
+ +
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts index ad65a89c9..306eaa17a 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts @@ -24,6 +24,7 @@ import { Subject } from 'rxjs'; import { debounceTime, delay, map, takeUntil, tap } from 'rxjs/operators'; import { GENERAL_ANIMATIONS } from '../../animations/animations'; import { BaseComponent } from '@common/base/base.component'; +import {AngularEditorConfig} from "@kolkov/angular-editor"; @Component({ selector: 'app-dataset-profile-editor-composite-field-component', @@ -32,6 +33,39 @@ import { BaseComponent } from '@common/base/base.component'; animations:[GENERAL_ANIMATIONS] }) export class DatasetProfileEditorCompositeFieldComponent extends BaseComponent implements OnInit, OnChanges { + editorConfig: AngularEditorConfig = { + editable: true, + spellcheck: true, + height: 'auto', + minHeight: '0', + maxHeight: 'auto', + width: '100%', + minWidth: '0', + translate: 'yes', + enableToolbar: true, + showToolbar: true, + placeholder: 'Enter text here...', + defaultParagraphSeparator: '', + defaultFontName: '', + defaultFontSize: '', + sanitize: true, + toolbarPosition: 'top', + toolbarHiddenButtons: [ + [ + 'heading', + 'fontName' + ], + [ + 'fontSize', + 'backgroundColor', + 'customClasses', + 'insertImage', + 'insertVideo', + 'removeFormat'//, + // 'toggleEditorMode' + ] + ] + }; @Input() form: FormGroup; @Input() indexPath: string; diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html index 2b799f3f6..4bf4fe5c2 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html @@ -29,14 +29,13 @@ -->
{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}}
{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}
- - - - +
+
+ +
+
- -
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}
- - - {{'GENERAL.VALIDATION.REQUIRED' - | translate}} - - +
+
+ +
+
+ + {{'GENERAL.VALIDATION.REQUIRED'| translate}} + +
+
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts index 43310bd90..e5fb0b33b 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts @@ -45,6 +45,7 @@ import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profil import { UserService } from '@app/core/services/user/user.service'; import { MatInput } from '@angular/material/input'; import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component'; +import {AngularEditorConfig} from "@kolkov/angular-editor"; const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json'); @@ -57,6 +58,40 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable. providers:[VisibilityRulesService] }) export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent implements OnInit { + editorConfig: AngularEditorConfig = { + editable: true, + spellcheck: true, + height: 'auto', + minHeight: '0', + maxHeight: 'auto', + width: '100%', + minWidth: '0', + translate: 'yes', + enableToolbar: true, + showToolbar: true, + placeholder: 'Enter text here...', + defaultParagraphSeparator: '', + defaultFontName: '', + defaultFontSize: '', + sanitize: true, + toolbarPosition: 'top', + toolbarHiddenButtons: [ + [ + 'heading', + 'fontName' + ], + [ + 'fontSize', + 'backgroundColor', + 'customClasses', + 'insertImage', + 'insertVideo', + 'removeFormat', + 'toggleEditorMode' + ] + ] + }; + canDeactivate(): boolean { return !this.form.dirty; } diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html index fe07ba1df..45f9e968c 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html @@ -34,7 +34,7 @@ {{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}} - {{row.description}} + diff --git a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html index 9c670a435..81bd11179 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html +++ b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html @@ -1,8 +1,12 @@

{{ 'DMP-EDITOR.DATASET-TEMPLATE-LIST.TITLE' | translate }}

- - {{profile.label}} + +
+ {{profile.label}} +
+ +

diff --git a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss new file mode 100644 index 000000000..34a1934de --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss @@ -0,0 +1,7 @@ +.list-option { + flex-grow: 1; + white-space: nowrap; + width: calc(100% - 16px); + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.ts b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.ts index 165d7554c..6ee413cc2 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.ts @@ -9,6 +9,7 @@ import { BaseComponent } from '@common/base/base.component'; import { takeUntil } from 'rxjs/operators'; @Component({ + styleUrls: ['available-profiles.component.scss'], selector: 'app-available-profiles-component', templateUrl: 'available-profiles.component.html', }) diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html index 747b63432..0d2718efb 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html @@ -12,7 +12,17 @@

-
{{form.get('description').value}}
-
- {{form.get('extendedDescription').value}} -
+
+ +
+
+ {{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-MORE' | translate}} +
+
+
+
+ + {{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.VIEW-LESS' | translate}} + +
+
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss index 3024dfe73..b6469481f 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss @@ -21,3 +21,11 @@ h6 { text-transform: none; font-weight: 400; } + +.more { + text-decoration: underline; + color: #F7DD72; + cursor: pointer; + font-size: 1rem; + font-weight: 400; +} diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts index 4a9776b5b..797650d47 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts @@ -13,6 +13,8 @@ export class FormCompositeTitleComponent implements OnInit { @Input() isChild: Boolean = false; @Input() tocentry:ToCEntry; + public showExtendedDescription: boolean = false; + constructor() { } ngOnInit() { diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html index 2ef2eacbe..5408c7bb4 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html @@ -7,7 +7,7 @@ -
{{form.get('description').value}}
+
@@ -135,4 +135,4 @@ - \ No newline at end of file + diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json index 1c7087ccf..eaf38eea3 100644 --- a/dmp-frontend/src/assets/i18n/de.json +++ b/dmp-frontend/src/assets/i18n/de.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "An error occured.", "MESSAGE": "Message: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "View more", + "VIEW-LESS": "View less" + } } }, "DATASET-CREATE-WIZARD": { @@ -1810,4 +1816,4 @@ "FINALIZED": "Finalized", "DELETED": "Deleted" } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 913634fc3..06b8f42d3 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "An error occured.", "MESSAGE": "Message: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "View more", + "VIEW-LESS": "View less" + } } }, "DATASET-CREATE-WIZARD": { @@ -1810,4 +1816,4 @@ "FINALIZED": "Finalized", "DELETED": "Deleted" } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json index 0735e6090..10171573c 100644 --- a/dmp-frontend/src/assets/i18n/es.json +++ b/dmp-frontend/src/assets/i18n/es.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "An error occured.", "MESSAGE": "Message: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "View more", + "VIEW-LESS": "View less" + } } }, "DATASET-CREATE-WIZARD": { @@ -1810,4 +1816,4 @@ "FINALIZED": "Finalizado", "DELETED": "Deleted" } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json index 46ce0e673..ad549453e 100644 --- a/dmp-frontend/src/assets/i18n/gr.json +++ b/dmp-frontend/src/assets/i18n/gr.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "Προέκυψε κάποιο σφάλμα.", "MESSAGE": "Μήνυμα: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "Δείτε περισσότερα", + "VIEW-LESS": "Δείτε λιγότερα" + } } }, "DATASET-CREATE-WIZARD": { @@ -1810,4 +1816,4 @@ "FINALIZED": "Οριστικοποιημένα", "DELETED": "Deleted" } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json index 56efd16f9..88b079bbc 100644 --- a/dmp-frontend/src/assets/i18n/pt.json +++ b/dmp-frontend/src/assets/i18n/pt.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "Um erro ocorreu.", "MESSAGE": "Mensangem: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "View more", + "VIEW-LESS": "View less" + } } }, "DATASET-CREATE-WIZARD": { @@ -1818,4 +1824,4 @@ "Index: 0, Size: 0" : "Ficheiro a importar deverá ser em formato .json", "Field value of": "O campo", "must be filled": "deve ser preenchido" -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json index 850293fb0..274f54910 100644 --- a/dmp-frontend/src/assets/i18n/sk.json +++ b/dmp-frontend/src/assets/i18n/sk.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "An error occured.", "MESSAGE": "Message: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "View more", + "VIEW-LESS": "View less" + } } }, "DATASET-CREATE-WIZARD": { @@ -1810,4 +1816,4 @@ "FINALIZED": "Dokončené", "DELETED": "Deleted" } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json index 59f2a2c93..f4f28155c 100644 --- a/dmp-frontend/src/assets/i18n/sr.json +++ b/dmp-frontend/src/assets/i18n/sr.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "An error occured.", "MESSAGE": "Message: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "View more", + "VIEW-LESS": "View less" + } } }, "DATASET-CREATE-WIZARD": { diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json index 6107aec1c..941b6a297 100644 --- a/dmp-frontend/src/assets/i18n/tr.json +++ b/dmp-frontend/src/assets/i18n/tr.json @@ -1246,6 +1246,12 @@ "ERRORS":{ "ERROR-OCCURED": "An error occured.", "MESSAGE": "Message: " + }, + "QUESTION": { + "EXTENDED-DESCRIPTION": { + "VIEW-MORE": "View more", + "VIEW-LESS": "View less" + } } }, "DATASET-CREATE-WIZARD": { @@ -1810,4 +1816,4 @@ "FINALIZED": "Tamamlandı", "DELETED": "Silindi" } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss index 6ca804bb1..b57d42eba 100644 --- a/dmp-frontend/src/styles.scss +++ b/dmp-frontend/src/styles.scss @@ -251,4 +251,48 @@ .translateY-3{ transform:translateY(3px); -} \ No newline at end of file +} + +// CSS for (@kolkov/angular-editor) +.angular-editor-textarea { + min-height: 150px !important; +} + +.form-field-subscript-wrapper { + font-size: 75%; + padding-left: 12px; + margin-top: 8px; +} + +.editor-wrapper { + border: 1px solid transparent !important; + border-radius: 5px; +} + +.angular-editor-toolbar { + margin-left: 1px; + margin-right: 1px; +} + +.angular-editor-textarea, .angular-editor-toolbar { + border: none !important; +} + +.angular-editor { + border: 1px solid #ddd !important; + border-radius: 5px; + background-color: #fff; +} + +.editor-wrapper:hover, .angular-editor:hover { + border: 1px solid #000 !important; +} + +.editor-wrapper:focus-within, .angular-editor:focus-within { + border: 1px solid #034459 !important; +} + +.required.editor-wrapper, .required .editor .angular-editor { + border: 1px solid #f44336 !important; +} +// end of CSS for (@kolkov/angular-editor)