@ieeesa-npm/presentation 0.20.9 → 0.21.1

package/lib/components/chips/chips.component.d.ts

@@ -262,6 +262,15 @@ export declare class ChipsComponent implements OnInit, OnDestroy {
         search: {
             searchIcon: string;
         };
+        richTextEditor: {
+            label: {
+                editor: string;
+            };
+            ariaLabel: {
+                editor: string;
+                colorPicker: string;
+            };
+        };
     };
     chipsType: typeof ChipsType;
     orientations: typeof ChipOrientation;

package/lib/components/dynamic-form/dynamic-form.component.d.ts

@@ -85,6 +85,7 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
     formColorPickerChange: EventEmitter<string>;
     formRadioOptionSelected: EventEmitter<RadioOption>;
     ctaButtonClick: EventEmitter<IconButton>;
+    formRichTextEditorContentChange: EventEmitter<string>;
     form: FormGroup;
     formGroupArray: FormGroup[];
     formControlArray: any[];
@@ -240,6 +241,12 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
      * @memberof DynamicFormComponent
      */
     onFormColorPickerChange(colorCode: string): void;
+    /**
+     * Handles form rich text editor event and emits formRichTextEditorContentChange event.
+     * @param {string} htmlMarkupText
+     * @memberof DynamicFormComponent
+     */
+    onFormRichTextEditorContentChange(htmlMarkupText: string): void;
     /**
      * Handles file upload event and emits formFileUpload event
      * @param {(File | FileList)} file
@@ -285,5 +292,5 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
      */
     onCheckboxCTAButtonClick(event: IconButton): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "ieeesa-dynamic-form", ["dynamicForm"], { "formGroups": { "alias": "formGroups"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; "colWidth": { "alias": "colWidth"; "required": false; }; "isLegendVisible": { "alias": "isLegendVisible"; "required": false; }; "rightButtonLabel": { "alias": "rightButtonLabel"; "required": false; }; "leftButtonLabel": { "alias": "leftButtonLabel"; "required": false; }; "isSubmitButtonDisabled": { "alias": "isSubmitButtonDisabled"; "required": false; }; "isLeftButtonDisabled": { "alias": "isLeftButtonDisabled"; "required": false; }; "isLeftButtonNeeded": { "alias": "isLeftButtonNeeded"; "required": false; }; "actionButtonAlign": { "alias": "actionButtonAlign"; "required": false; }; }, { "formSubmit": "formSubmit"; "formChange": "formChange"; "formInput": "formInput"; "formLeftButtonClicked": "formLeftButtonClicked"; "formSearchApply": "formSearchApply"; "formGroupsReference": "formGroupsReference"; "dropdownChange": "dropdownChange"; "formCheckboxSelection": "formCheckboxSelection"; "formDateSelected": "formDateSelected"; "formSelectSearch": "formSelectSearch"; "formControlChange": "formControlChange"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "formAutoCompleteClearSearchValue": "formAutoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formAfterContentInit": "formAfterContentInit"; "formSelectedDateRange": "formSelectedDateRange"; "addFormGroup": "addFormGroup"; "formTimeSelected": "formTimeSelected"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; "formFileUpload": "formFileUpload"; "dropdownOpenedChange": "dropdownOpenedChange"; "formColorPickerChange": "formColorPickerChange"; "formRadioOptionSelected": "formRadioOptionSelected"; "ctaButtonClick": "ctaButtonClick"; }, never, ["[component]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "ieeesa-dynamic-form", ["dynamicForm"], { "formGroups": { "alias": "formGroups"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; "colWidth": { "alias": "colWidth"; "required": false; }; "isLegendVisible": { "alias": "isLegendVisible"; "required": false; }; "rightButtonLabel": { "alias": "rightButtonLabel"; "required": false; }; "leftButtonLabel": { "alias": "leftButtonLabel"; "required": false; }; "isSubmitButtonDisabled": { "alias": "isSubmitButtonDisabled"; "required": false; }; "isLeftButtonDisabled": { "alias": "isLeftButtonDisabled"; "required": false; }; "isLeftButtonNeeded": { "alias": "isLeftButtonNeeded"; "required": false; }; "actionButtonAlign": { "alias": "actionButtonAlign"; "required": false; }; }, { "formSubmit": "formSubmit"; "formChange": "formChange"; "formInput": "formInput"; "formLeftButtonClicked": "formLeftButtonClicked"; "formSearchApply": "formSearchApply"; "formGroupsReference": "formGroupsReference"; "dropdownChange": "dropdownChange"; "formCheckboxSelection": "formCheckboxSelection"; "formDateSelected": "formDateSelected"; "formSelectSearch": "formSelectSearch"; "formControlChange": "formControlChange"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "formAutoCompleteClearSearchValue": "formAutoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formAfterContentInit": "formAfterContentInit"; "formSelectedDateRange": "formSelectedDateRange"; "addFormGroup": "addFormGroup"; "formTimeSelected": "formTimeSelected"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; "formFileUpload": "formFileUpload"; "dropdownOpenedChange": "dropdownOpenedChange"; "formColorPickerChange": "formColorPickerChange"; "formRadioOptionSelected": "formRadioOptionSelected"; "ctaButtonClick": "ctaButtonClick"; "formRichTextEditorContentChange": "formRichTextEditorContentChange"; }, never, ["[component]"], true, never>;
 }

package/lib/components/file-upload/file-upload.component.d.ts

@@ -259,6 +259,15 @@ export declare class FileUploadComponent implements OnInit {
         search: {
             searchIcon: string;
         };
+        richTextEditor: {
+            label: {
+                editor: string;
+            };
+            ariaLabel: {
+                editor: string;
+                colorPicker: string;
+            };
+        };
     };
     fileUploadLabel: {
         fileUpload: string;

package/lib/components/rich-text-editor/rich-text-editor.component.d.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { EditorConfig } from 'ngx-simple-text-editor';
+import { FieldConfig } from '../../models/field-config.model';
+import { FormUtilityService } from '../../services/form-utility.service';
+import * as i0 from "@angular/core";
+export declare class RichTextEditorComponent implements OnInit, AfterViewInit {
+    private elementRef;
+    private renderer;
+    private formUtilityService;
+    richTextEditorTexts: any;
+    group: FormGroup;
+    config: FieldConfig;
+    contentElementClassName: string;
+    rtEditor: ElementRef;
+    private editorContentValue;
+    set value(value: string);
+    get value(): string;
+    editorLabel: any;
+    formControlName: string;
+    isEditorLabelNeeded: boolean;
+    private editorConfigInfo;
+    /**
+     * Sets the editor config info.
+     * @param {EditorConfig} editorConfig
+     * @memberof RichTextEditorComponent
+     */
+    set editorConfig(editorConfig: EditorConfig);
+    /**
+     * Returns the editor config info.
+     * @returns {EditorConfig}
+     * @memberof RichTextEditorComponent
+     */
+    get editorConfig(): EditorConfig;
+    richTextEditorContentChange: EventEmitter<string>;
+    constructor(elementRef: ElementRef, renderer: Renderer2, formUtilityService: FormUtilityService);
+    /**
+     * Initializes the form group and config details.
+     * @memberof RichTextEditorComponent
+     */
+    ngOnInit(): void;
+    /**
+     * Sets RTE toolbar buttons button type to button.
+     * @returns {void}
+     * @memberof RichTextEditorComponent
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Sets RTE toolbar buttons button type to button to prevent form submit event when the toolbar buttons clicked.
+     */
+    setToolbarButtonType(): void;
+    /**
+     * Emits the typed editor content to consuming components.
+     * @returns {void}
+     * @memberof RichTextEditorComponent
+     */
+    onRichTextEditorContentChange(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichTextEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RichTextEditorComponent, "ieeesa-rich-text-editor", never, { "value": { "alias": "value"; "required": false; }; "editorLabel": { "alias": "editorLabel"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "isEditorLabelNeeded": { "alias": "isEditorLabelNeeded"; "required": false; }; "editorConfig": { "alias": "editorConfig"; "required": false; }; }, { "richTextEditorContentChange": "richTextEditorContentChange"; }, never, never, true, never>;
+}

package/lib/directives/dynamic-form-field/dynamic-form-field.directive.d.ts

@@ -76,6 +76,7 @@ export declare class DynamicFormFieldDirective implements FormField, OnInit, OnD
     formFileUpload: EventEmitter<File | FileList>;
     formRadioOptionSelected: EventEmitter<RadioOption>;
     ctaButtonClick: EventEmitter<IconButton>;
+    formRichTextEditorContentChange: EventEmitter<string>;
     component: ComponentRef<any>;
     constructor(container: ViewContainerRef);
     /**
@@ -94,5 +95,5 @@ export declare class DynamicFormFieldDirective implements FormField, OnInit, OnD
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormFieldDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicFormFieldDirective, "[ieeesaDynamicFormField]", never, { "config": { "alias": "config"; "required": false; }; "group": { "alias": "group"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; }, { "formSearchApply": "formSearchApply"; "formDropdownSelected": "formDropdownSelected"; "formDateSelected": "formDateSelected"; "formTimeSelected": "formTimeSelected"; "formSelectedDateRange": "formSelectedDateRange"; "formSelectSearch": "formSelectSearch"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "autoCompleteClearSearchValue": "autoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formCheckboxSelection": "formCheckboxSelection"; "formInputValue": "formInputValue"; "addFormGroup": "addFormGroup"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; "dropdownOpenedChange": "dropdownOpenedChange"; "formColorPickerChange": "formColorPickerChange"; "formFileUpload": "formFileUpload"; "formRadioOptionSelected": "formRadioOptionSelected"; "ctaButtonClick": "ctaButtonClick"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicFormFieldDirective, "[ieeesaDynamicFormField]", never, { "config": { "alias": "config"; "required": false; }; "group": { "alias": "group"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; }, { "formSearchApply": "formSearchApply"; "formDropdownSelected": "formDropdownSelected"; "formDateSelected": "formDateSelected"; "formTimeSelected": "formTimeSelected"; "formSelectedDateRange": "formSelectedDateRange"; "formSelectSearch": "formSelectSearch"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "autoCompleteClearSearchValue": "autoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formCheckboxSelection": "formCheckboxSelection"; "formInputValue": "formInputValue"; "addFormGroup": "addFormGroup"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; "dropdownOpenedChange": "dropdownOpenedChange"; "formColorPickerChange": "formColorPickerChange"; "formFileUpload": "formFileUpload"; "formRadioOptionSelected": "formRadioOptionSelected"; "ctaButtonClick": "ctaButtonClick"; "formRichTextEditorContentChange": "formRichTextEditorContentChange"; }, never, never, true, never>;
 }

package/lib/directives/observe-dom-change/observe-dom-change.directive.d.ts

@@ -3,7 +3,10 @@ import * as i0 from "@angular/core";
 export declare class ObserveDomChangeDirective implements OnInit, OnDestroy {
     private elementRef;
     observer: MutationObserver;
+    isSubTreeAttributeNeeded: boolean;
+    observedElementClassName: string;
     domChange: EventEmitter<any>;
+    domNodesChange: EventEmitter<MutationRecord[]>;
     constructor(elementRef: ElementRef);
     /**
      * Observes the dom changes and emits dom change event.
@@ -16,5 +19,5 @@ export declare class ObserveDomChangeDirective implements OnInit, OnDestroy {
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ObserveDomChangeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ObserveDomChangeDirective, "[ieeesaObserveDomChange]", never, {}, { "domChange": "domChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ObserveDomChangeDirective, "[ieeesaObserveDomChange]", never, { "isSubTreeAttributeNeeded": { "alias": "isSubTreeAttributeNeeded"; "required": false; }; "observedElementClassName": { "alias": "observedElementClassName"; "required": false; }; }, { "domChange": "domChange"; "domNodesChange": "domNodesChange"; }, never, never, true, never>;
 }

package/lib/models/field-config.model.d.ts

@@ -9,6 +9,7 @@ import { LinkType } from './link-type.model';
 import { SlideToggleOption } from './slide-toggle-options.model';
 import { ColorFormat, ColorsAnimation } from './color-format.model';
 import { AllowedFileTypes } from './allowed-file-types.model';
+import { EditorConfig } from 'ngx-simple-text-editor';
 export interface FieldConfig {
     isSortNeeded?: boolean;
     disabled?: boolean;
@@ -81,4 +82,5 @@ export interface FieldConfig {
     isArrowIconNeeded?: boolean;
     canHideColorPicker?: boolean;
     canHideTextInput?: boolean;
+    editorConfig?: EditorConfig;
 }

package/lib/models/form-control-types.model.d.ts

@@ -11,5 +11,6 @@ export declare enum FormControlType {
     TIME_PICKER = "TIME_PICKER",
     SLIDE_TOGGLE = "SLIDE_TOGGLE",
     COLOR_PICKER = "COLOR_PICKER",
-    FILE_UPLOAD = "FILE_UPLOAD"
+    FILE_UPLOAD = "FILE_UPLOAD",
+    RICH_TEXT_EDITOR = "RICH_TEXT_EDITOR"
 }

package/lib/services/file-upload.service.d.ts

@@ -272,6 +272,15 @@ export declare class FileUploadService implements OnDestroy {
         search: {
             searchIcon: string;
         };
+        richTextEditor: {
+            label: {
+                editor: string;
+            };
+            ariaLabel: {
+                editor: string;
+                colorPicker: string;
+            };
+        };
     };
     apiBaseUrl: string;
     fileByteArray: Uint8Array | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.20.9",
+  "version": "0.21.1",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",
@@ -19,7 +19,8 @@
     "rxjs": "~7.8.0",
     "zone.js": "~0.13.0",
     "ngx-material-timepicker": "^13.1.1",
-    "ngx-colors": "^3.5.3"
+    "ngx-colors": "^3.5.3",
+    "ngx-simple-text-editor": "^4.0.3"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -37,6 +37,7 @@ export * from './lib/components/file-upload/file-upload.component';
 export * from './lib/components/accordion/accordion.component';
 export * from './lib/components/inactive-tenant/inactive-tenant.component';
 export * from './lib/components/image-preview/image-preview.component';
+export * from './lib/components/rich-text-editor/rich-text-editor.component';
 export * from './lib/directives/dynamic-form-field/dynamic-form-field.directive';
 export * from './lib/directives/focus-invalid-form-field/focus-invalid-form-field.directive';
 export * from './lib/directives/set-background/set-background.directive';

package/src/lib/assets/constants.json

@@ -580,5 +580,14 @@
   },
   "search": {
     "searchIcon": "assets/images/sprites/sprites.svg#icon-search"
+  },
+  "richTextEditor": {
+    "label": {
+      "editor": ""
+    },
+    "ariaLabel": {
+      "editor": "Rich text editor.",
+      "colorPicker": "Color picker."
+    }
   }
 }