@ieeesa-npm/presentation 0.22.0 → 0.22.1

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

@@ -120,6 +120,16 @@ export declare class ChipsComponent implements OnInit, OnDestroy {
             minCharToSearch: number;
             debounceTime: number;
         };
+        multiSelectAutoComplete: {
+            ariaLabel: {
+                selectedOption: string;
+                removeOption: string;
+            };
+            icons: {
+                remove: string;
+                clearAll: string;
+            };
+        };
         header: {
             alt: {
                 logo: string;

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

@@ -13,6 +13,7 @@ import { SlideToggleOption } from '../../models/slide-toggle-options.model';
 import { SelectOpenedState } from '../../models/select-opened-state.model';
 import { RadioOption } from '../../models/radio-option.model';
 import { IconButton } from '../../models/icon-button.model';
+import { AutoCompleteOption } from '../../models/autocomplete-option.model';
 import * as i0 from "@angular/core";
 /**
  * Creates a reactive form dynamically based on the passed form field configuration and handles the form events.
@@ -85,6 +86,9 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
     formColorPickerChange: EventEmitter<string>;
     formRadioOptionSelected: EventEmitter<RadioOption>;
     ctaButtonClick: EventEmitter<IconButton>;
+    formMultiSelectAutoCompleteSearch: EventEmitter<string>;
+    formMultiSelectAutoCompleteClearSearchValue: EventEmitter<string>;
+    multiSelectAutoCompleteOptionsSelected: EventEmitter<AutoCompleteOption[]>;
     formRichTextEditorContentChange: EventEmitter<string>;
     form: FormGroup;
     formGroupArray: FormGroup[];
@@ -229,6 +233,25 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
      * @memberof DynamicFormComponent
      */
     onAutoCompleteOptionSelected(): void;
+    /**
+     *
+     * Listens form field multi select auto complete search event and emits formMultiSelectAutoCompleteSearch event.
+     * @param {string} event
+     * @memberof DynamicFormComponent
+     */
+    onMultiSelectAutoCompleteSearch(event: string): void;
+    /**
+     * Listens form field multi select auto complete search clear event and emits formMultiSelectAutoCompleteClearSearchValue event.
+     * @param {string} event
+     * @memberof DynamicFormComponent
+     */
+    onMultiSelectAutoCompleteClearSearchValue(event: string): void;
+    /**
+     * Listens form field multi select auto complete option selection event and emits multiSelectAutoCompleteOptionSelected event.
+     * @param {AutoCompleteOption[]} event
+     * @memberof DynamicFormComponent
+     */
+    onMultiSelectAutoCompleteOptionsSelected(event: AutoCompleteOption[]): void;
     /**
      * Handles form slide toggle event and emits formSlideToggleChange event.
      * @param {SlideToggleOption} toggle
@@ -292,5 +315,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"; "formRichTextEditorContentChange": "formRichTextEditorContentChange"; }, 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"; "formMultiSelectAutoCompleteSearch": "formMultiSelectAutoCompleteSearch"; "formMultiSelectAutoCompleteClearSearchValue": "formMultiSelectAutoCompleteClearSearchValue"; "multiSelectAutoCompleteOptionsSelected": "multiSelectAutoCompleteOptionsSelected"; "formRichTextEditorContentChange": "formRichTextEditorContentChange"; }, never, ["[component]"], true, never>;
 }

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

@@ -117,6 +117,16 @@ export declare class FileUploadComponent implements OnInit {
             minCharToSearch: number;
             debounceTime: number;
         };
+        multiSelectAutoComplete: {
+            ariaLabel: {
+                selectedOption: string;
+                removeOption: string;
+            };
+            icons: {
+                remove: string;
+                clearAll: string;
+            };
+        };
         header: {
             alt: {
                 logo: string;

package/lib/components/multi-select-autocomplete/multi-select-autocomplete.component.d.ts

@@ -0,0 +1,128 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { FormUtilityService } from '../../services/form-utility.service';
+import { AutoCompleteOption } from '../../models/autocomplete-option.model';
+import { SelectOption } from '../../models/select-option.model';
+import { FieldConfig } from '../../models/field-config.model';
+import { FormField } from '../../models/form-field.model';
+import * as i0 from "@angular/core";
+/**
+ * MultiSelectAutocompleteComponent allows to search the option(s) from the list and select the option(s) from the autocomplete search results.
+ * @class MultiSelectAutocompleteComponent
+ * @implements {OnInit}
+ * @implements {FormField}
+ * @implements {OnDestroy}
+ * @implements {AfterViewInit}
+ */
+export declare class MultiSelectAutocompleteComponent implements OnInit, FormField, OnDestroy, AfterViewInit {
+    private formUtilityService;
+    separatorKeysCodes: number[];
+    config: FieldConfig;
+    group: FormGroup;
+    selectedOptions: SelectOption[];
+    autoCompleteOptionList: AutoCompleteOption[];
+    /**
+     * Sets the options for multi select autocomplete.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    set multiSelectAutoCompleteOptions(value: AutoCompleteOption[]);
+    /**
+     * Returns the autocomplete options list.
+     * @readonly
+     * @type {AutoCompleteOption[]}
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    get multiSelectAutoCompleteOptions(): AutoCompleteOption[];
+    multiSelectAutoCompleteSearchValue: EventEmitter<string>;
+    multiSelectAutoCompleteClearSearchValue: EventEmitter<string>;
+    multiSelectAutoCompleteOptionsSelected: EventEmitter<AutoCompleteOption[]>;
+    multiSelectAutoComplete: ElementRef;
+    matACTrigger: MatAutocompleteTrigger;
+    destroy$: Subject<boolean>;
+    autocompleteConstInfo: any;
+    removeIconURL: any;
+    clearAllIconURL: any;
+    constructor(formUtilityService: FormUtilityService);
+    /**
+     * Implementation of ngOnInit lifecycle hook method to initialize components instance properties.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    ngOnInit(): void;
+    /**
+     * Initialize the form control change event once the form control is ready on ngAfterViewInit by calling onValueChanges method.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Emits an multiSelectAutoCompleteSearchValue change event when the value is changed and value is greater than minCharToSearch or equal to zero.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    onValueChanges(): void;
+    /**
+     * Handles field error by setting the appropriate form control errors.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    handleFieldError(): void;
+    /**
+     * Adds a newly entered option to the selectedOptions array.
+     * @param {*} event -The event containing the input and value.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    add(event: MatChipInputEvent): void;
+    /**
+     * Removes a selected option from the selectedOptions array.
+     * @param {SelectOption} removedOption -The option to remove.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    onOptionRemoved(removedOption: SelectOption): void;
+    /**
+     * Handles the selection of an autocomplete option.
+     * @param {AutoCompleteOption} option  -The selected autocomplete option.
+     * @return {AutoCompleteOption}
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    onChange(option: any): AutoCompleteOption;
+    /**
+     * Formats the selected options and emits the multiSelectAutoCompleteOptionSelected event.
+     * @param {SelectOption[]} selectedOptions -Array of selected options.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    formatSelectedOption(selectedOptions: SelectOption[]): void;
+    /**
+     * Displays the name of the option
+     * @param {AutoCompleteOption} option
+     * @return {*}  {string}
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    displayOptionName(option: AutoCompleteOption): string;
+    /**
+     * Tracks the option by its index or id.
+     * @param {number} index
+     * @param {SelectOption} option
+     * @return {*}  {(number | string)}
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    trackByFn(index: number, option: SelectOption): number | string;
+    /**
+     * Checks if the checkbox is selected.
+     * @param {AutoCompleteOption} option
+     * @return {*}  {boolean}
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    isCheckboxSelected(option: AutoCompleteOption): boolean;
+    /**
+     * Clears all selected options.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    clearSelections(): void;
+    /**
+     * Implementation of ngOnDestroy lifecycle hook method to unsubscribe the open observable subscriptions.
+     * @memberof MultiSelectAutocompleteComponent
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectAutocompleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectAutocompleteComponent, "ieeesa-multi-select-autocomplete", never, { "multiSelectAutoCompleteOptions": { "alias": "multiSelectAutoCompleteOptions"; "required": false; }; }, { "multiSelectAutoCompleteSearchValue": "multiSelectAutoCompleteSearchValue"; "multiSelectAutoCompleteClearSearchValue": "multiSelectAutoCompleteClearSearchValue"; "multiSelectAutoCompleteOptionsSelected": "multiSelectAutoCompleteOptionsSelected"; }, never, never, true, never>;
+}

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

@@ -11,6 +11,7 @@ import { SlideToggleOption } from '../../models/slide-toggle-options.model';
 import { SelectOpenedState } from '../../models/select-opened-state.model';
 import { RadioOption } from '../../models/radio-option.model';
 import { IconButton } from '../../models/icon-button.model';
+import { AutoCompleteOption } from '../../models/autocomplete-option.model';
 import * as i0 from "@angular/core";
 /**
  * Provides the implementation of DynamicFormFieldDirective which hosts and creates the form fields components dynamically.
@@ -76,6 +77,9 @@ export declare class DynamicFormFieldDirective implements FormField, OnInit, OnD
     formFileUpload: EventEmitter<File | FileList>;
     formRadioOptionSelected: EventEmitter<RadioOption>;
     ctaButtonClick: EventEmitter<IconButton>;
+    formMultiSelectAutoCompleteSearch: EventEmitter<string>;
+    multiSelectAutoCompleteClearSearchValue: EventEmitter<string>;
+    multiSelectAutoCompleteOptionsSelected: EventEmitter<AutoCompleteOption[]>;
     formRichTextEditorContentChange: EventEmitter<string>;
     component: ComponentRef<any>;
     constructor(container: ViewContainerRef);
@@ -95,5 +99,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"; "formRichTextEditorContentChange": "formRichTextEditorContentChange"; }, 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"; "formMultiSelectAutoCompleteSearch": "formMultiSelectAutoCompleteSearch"; "multiSelectAutoCompleteClearSearchValue": "multiSelectAutoCompleteClearSearchValue"; "multiSelectAutoCompleteOptionsSelected": "multiSelectAutoCompleteOptionsSelected"; "formRichTextEditorContentChange": "formRichTextEditorContentChange"; }, never, never, true, never>;
 }

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

@@ -82,5 +82,6 @@ export interface FieldConfig {
     isArrowIconNeeded?: boolean;
     canHideColorPicker?: boolean;
     canHideTextInput?: boolean;
+    multiSelectAutoCompleteOptions?: AutoCompleteOption[];
     editorConfig?: EditorConfig;
 }

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

@@ -7,6 +7,7 @@ export declare enum FormControlType {
     CHECKBOX = "CHECKBOX",
     RADIO = "RADIO",
     AUTO_COMPLETE = "AUTO_COMPLETE",
+    MULTI_SELECT_AUTO_COMPLETE = "MULTI_SELECT_AUTO_COMPLETE",
     ADD_FORM_GROUP = "ADD_FORM_GROUP",
     TIME_PICKER = "TIME_PICKER",
     SLIDE_TOGGLE = "SLIDE_TOGGLE",

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

@@ -116,6 +116,16 @@ export declare class FileUploadService implements OnDestroy {
             minCharToSearch: number;
             debounceTime: number;
         };
+        multiSelectAutoComplete: {
+            ariaLabel: {
+                selectedOption: string;
+                removeOption: string;
+            };
+            icons: {
+                remove: string;
+                clearAll: string;
+            };
+        };
         header: {
             alt: {
                 logo: string;
@@ -139,11 +149,7 @@ export declare class FileUploadService implements OnDestroy {
                 label: string;
                 ariaLabel: string;
                 toolTip: string;
-                isToolTipNeeded: boolean; /**
-                 * Gets file upload progress.
-                 * @param {*} message
-                 * @memberof FileUploadService
-                 */
+                isToolTipNeeded: boolean;
             }[];
             errors: {
                 "2029": string;
@@ -175,6 +181,11 @@ export declare class FileUploadService implements OnDestroy {
             }[];
         };
         breadcrumb: {
+            /**
+             * Returns file upload status.
+             * @return {boolean}
+             * @memberof FileUploadService
+             */
             label: {
                 initial: string;
             };
@@ -189,11 +200,6 @@ export declare class FileUploadService implements OnDestroy {
             defaultTimeFormat: number;
             timePickerIcon: string;
         };
-        /**
-         * Returns file upload status.
-         * @return {boolean}
-         * @memberof FileUploadService
-         */
         colorPicker: {
             label: {
                 select: string;
@@ -201,12 +207,7 @@ export declare class FileUploadService implements OnDestroy {
             };
             ariaLabel: {
                 colorPicker: string;
-                next: string; /**
-                 * Retrieves presigned URL for downloading files to Amazon S3 bucket.
-                 * @param {(File | FileList)} file
-                 * @return {Observable<string>}
-                 * @memberof FileUploadService
-                 */
+                next: string;
                 back: string;
                 select: string;
                 cancel: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",

package/public-api.d.ts

@@ -39,7 +39,6 @@ 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';
 export * from './lib/directives/text-truncated/text-truncated.directive';
 export * from './lib/directives/file-upload/file-upload.directive';

package/src/lib/assets/constants.json

@@ -141,6 +141,16 @@
     "minCharToSearch": 3,
     "debounceTime": 1000
   },
+  "multiSelectAutoComplete": {
+    "ariaLabel": {
+      "selectedOption": "Selected option",
+      "removeOption": "Remove"
+    },
+    "icons": {
+      "remove": "assets/images/sprites/sprites.svg#icon-trailing",
+      "clearAll": "assets/images/sprites/sprites.svg#icon-cancel_24px"
+    }
+  },
   "header": {
     "alt": {
       "logo": "Logo"