ca-components 2.1.142 → 2.1.151

package/lib/components/ca-input-dropdown-test/ca-input-dropdown-test.component.ts

@@ -0,0 +1,897 @@
+import { ChangeDetectorRef, Renderer2, ViewEncapsulation } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    Self,
+    ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+    debounceTime,
+    distinctUntilChanged,
+    skip,
+    Subject,
+    takeUntil,
+} from 'rxjs';
+
+// bootstrap
+import {
+    NgbPopover,
+    NgbPopoverModule,
+    NgbModule,
+} from '@ng-bootstrap/ng-bootstrap';
+
+// animation
+import { inputDropdownAnimation } from './animations';
+
+// components
+import { CaInputDropdownLoadBrokerComponent } from './components/ca-input-dropdown-load-broker/ca-input-dropdown-load-broker.component';
+import { CaInputDropdownLoadDispatchesTtdComponent } from './components/ca-input-dropdown-load-dispatches-ttd/ca-input-dropdown-load-dispatches-ttd.component';
+import { CaInputDropdownLoadDispatcherComponent } from './components/ca-input-dropdown-load-dispatcher/ca-input-dropdown-load-dispatcher.component';
+import { CaInputDropdownSvgTemplateComponent } from './components/ca-input-dropdown-svg-template/ca-input-dropdown-svg-template.component';
+import { CaInputDropdownSvgtextTemplateComponent } from './components/ca-input-dropdown-svgtext-template/ca-input-dropdown-svgtext-template.component';
+import { CaInputDropdownSvgtextDispatchTemplateComponent } from './components/ca-input-dropdown-svgtext-dispatch-template/ca-input-dropdown-svgtext-dispatch-template.component';
+import { CaInputDropdownGroupsComponent } from './components/ca-input-dropdown-groups/ca-input-dropdown-groups.component';
+import { CaInputDropdownMultiselectComponent } from './components/ca-input-dropdown-multiselect/ca-input-dropdown-multiselect.component';
+import { CaInputDropdownLabelsComponent } from './components/ca-input-dropdown-labels/ca-input-dropdown-labels.component';
+import { CaInputDropdownLoadBrokerContactComponent } from './components/ca-input-dropdown-load-broker-contact/ca-input-dropdown-load-broker-contact.component';
+import { CaInputDropdownLoadBrokerShipperComponent } from './components/ca-input-dropdown-load-broker-shipper/ca-input-dropdown-load-broker-shipper.component';
+import { CaInputDropdownTextCounterComponent } from './components/ca-input-dropdown-text-counter/ca-input-dropdown-text-counter.component';
+import { CaInputDropdownDoubleTextTemplateComponent } from './components/ca-input-dropdown-double-text-template/ca-input-dropdown-double-text-template.component';
+import { CaInputDropdownTripleTextTemplateComponent } from './components/ca-input-dropdown-triple-text-template/ca-input-dropdown-triple-text-template.component';
+import { CaInputDropdownDefaultTemplateComponent } from './components/ca-input-dropdown-default-template/ca-input-dropdown-default-template.component';
+import { CaInputDropdownFuelFranchiseComponent } from './components/ca-input-dropdown-fuel-franchise/ca-input-dropdown-fuel-franchise.component';
+import { CaInputDropdownDispatchComponent } from './components/ca-input-dropdown-dispatch/ca-input-dropdown-dispatch.component';
+import { CaInputDropdownDetailsTemplateComponent } from './components/ca-input-dropdown-details-template/ca-input-dropdown-details-template.component';
+import { CaInputDropdownPayrollTrucksComponent } from './components/ca-input-dropdown-payroll-trucks/ca-input-dropdown-payroll-trucks.component';
+import { CaInputDropdownLoadDispatchesTtdComponentItem } from './components/ca-input-dropdown-load-dispatches-ttd/ca-input-dropdown-load-dispatches-ttd-item/ca-input-dropdown-load-dispatches-ttd-item';
+import { CaInputDropdownLoadBrokerComponentItem } from './components/ca-input-dropdown-load-broker/ca-input-dropdown-load-broker-item/ca-input-dropdown-load-broker-item.component';
+import { CaInputDropdownLoadBrokerShipperItemComponent } from './components/ca-input-dropdown-load-broker-shipper/ca-input-dropdown-load-broker-shipper-item/ca-input-dropdown-load-broker-shipper-item.component';
+import { CaInputDropdownLoadDispatcherItemComponent } from './components/ca-input-dropdown-load-dispatcher/ca-input-dropdown-load-dispatcher-item/ca-input-dropdown-load-dispatcher-item.component';
+
+// pipes
+import { FormControlPipe } from '../ca-input/pipes';
+import {
+    DropdownCountPipe,
+    InputDropdownGetIconsPipe,
+    InputDropdownMultiselectClassPipe,
+} from './pipes';
+import { DropdownOptionsPipe } from './pipes/dropdown-options.pipe';
+
+// modules
+import { AngularSvgIconModule } from 'angular-svg-icon';
+
+// directives
+import {
+    ControlValueAccessor,
+    FormControl,
+    FormsModule,
+    NgControl,
+    ReactiveFormsModule,
+} from '@angular/forms';
+
+// models
+import { CommandsEvent } from '../ca-input/models';
+
+// types
+import {
+    AbstractControlWithNotFoundType,
+    FormControlWithNotFoundType,
+} from './types';
+import { SelectDropdownValueType } from './types/select-dropdown-value.type';
+
+// svg routes
+import { InputDropdownSvgRoutes } from './utils/svg-routes/input-dropdown-svg-routes';
+
+// enums
+import { DropdownStringEnum, DropdownTemplateTypeEnum } from './enums';
+
+// helpers
+import { uuidv4 } from '../../utils/helpers';
+
+// classes
+import { EventInputManager } from '../ca-input/base-classes/ca-input-event-manager';
+
+// components
+import { InputTestComponent } from '../ca-input-test/input-test.component';
+import { CaInputDropdownLoadBrokerContactItemComponent } from './components/ca-input-dropdown-load-broker-contact/ca-input-dropdown-load-broker-contact-item/ca-input-dropdown-load-broker-contact-item.component';
+
+// config
+import { ICaInput } from '../ca-input-test/config';
+
+// interfaces
+import { IOptionModel } from './interfaces/input-dropdown-option.interface';
+@Component({
+    selector: 'ca-input-dropdown-test',
+    templateUrl: './ca-input-dropdown-test.component.html',
+    styleUrls: ['./ca-input-dropdown-test.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [FormControlPipe],
+    animations: [inputDropdownAnimation('showHideDropdownOptions')],
+    imports: [
+        // Module
+        CommonModule,
+        FormsModule,
+        NgbPopoverModule,
+        ReactiveFormsModule,
+        NgbModule,
+        AngularSvgIconModule,
+        // Component
+        CaInputDropdownSvgtextTemplateComponent,
+        CaInputDropdownSvgtextDispatchTemplateComponent,
+        CaInputDropdownGroupsComponent,
+        CaInputDropdownMultiselectComponent,
+        CaInputDropdownLabelsComponent,
+        CaInputDropdownLoadBrokerComponent,
+        CaInputDropdownLoadDispatchesTtdComponent,
+        CaInputDropdownLoadDispatcherComponent,
+        CaInputDropdownLoadBrokerContactComponent,
+        CaInputDropdownLoadBrokerShipperComponent,
+        CaInputDropdownTextCounterComponent,
+        CaInputDropdownDoubleTextTemplateComponent,
+        CaInputDropdownTripleTextTemplateComponent,
+        CaInputDropdownDefaultTemplateComponent,
+        CaInputDropdownFuelFranchiseComponent,
+        CaInputDropdownDispatchComponent,
+        CaInputDropdownDetailsTemplateComponent,
+        CaInputDropdownPayrollTrucksComponent,
+        CaInputDropdownSvgTemplateComponent,
+        InputTestComponent,
+        CaInputDropdownLoadDispatchesTtdComponentItem,
+        CaInputDropdownLoadBrokerComponentItem,
+        CaInputDropdownLoadBrokerShipperItemComponent,
+        CaInputDropdownLoadDispatcherItemComponent,
+        CaInputDropdownLoadBrokerContactItemComponent,
+        // Pipes
+        FormControlPipe,
+        DropdownCountPipe,
+        InputDropdownMultiselectClassPipe,
+        DropdownOptionsPipe,
+        InputDropdownGetIconsPipe,
+    ],
+})
+export class CaInputDropdownTestComponent
+    implements
+        OnInit,
+        AfterViewInit,
+        OnDestroy,
+        ControlValueAccessor,
+        AfterViewInit
+{
+    @ViewChild('input') inputRef!: InputTestComponent;
+    @ViewChild('t2') public popoverRef!: NgbPopover;
+    @ViewChild('dropdownComponentRef', { static: false })
+    dropdownComponentRef: any;
+
+    // Label input - value that will be showed inside input
+    @Input() label!: keyof IOptionModel;
+
+    // optionValue input - key value from object - Emit this if you want to set whole object
+    @Input() optionValue!: string;
+
+    public inputHoveredItem: number = -1;
+    public isDropDownIsOpen: boolean = false;
+
+    // different templates for body rendering
+    public _template!: string;
+    _canAddNew: boolean = false;
+
+    @Input() set template(value: string) {
+        this._template = value;
+    }
+
+    @Input() multiselectTemplate!: string;
+    @Input() inputConfig!: ICaInput;
+    @Input() set canAddNew(value: boolean) {
+        this._canAddNew = value;
+    } // ADD NEW item in options
+
+    public get canAddNew() {
+        return this._canAddNew;
+    }
+
+    @Input() canOpenModal!: boolean; // open modal with ADD NEW button
+
+    // sort-template for different options
+    public _sort!: string;
+    @Input() set sort(value: string) {
+        this._sort = value;
+    }
+
+    public get sort() {
+        return this._sort;
+    }
+
+    // currently active item
+    public _activeItem!: IOptionModel | null;
+    @Input() set activeItem(value: IOptionModel | null) {
+        this._activeItem = value;
+    }
+
+    public get activeItem() {
+        return this._activeItem;
+    }
+
+    @Input() activeItemColor!: IOptionModel | null; // currently active color in dropdown
+    @Input() labelMode!: 'Label' | 'Color';
+
+    // when send SVG, please premmaped object: add 'folder' | 'subfolder'
+    public _options: IOptionModel[] = [];
+    @Input() set options(values: IOptionModel[]) {
+        this._options = values ? [...values] : [];
+        if (this.firstWriteValue) {
+            this.writeValueToFormControl(this.firstWriteValue);
+        }
+    }
+
+    // MultiSelect Selected Items From Backend
+    @Input() set preloadMultiselectItems(values: IOptionModel[]) {
+        if (this.inputConfig.multiselectDropdown) {
+            if (!values) {
+                this.deleteAllMultiSelectItems(this.inputConfig.label);
+                return;
+            }
+
+            if (values?.length) {
+                values.forEach((item) => {
+                    this.onMultiselectSelect(item);
+                });
+            }
+        }
+    }
+
+    @Input() isDetailsPages!: boolean; // only for details pages
+    @Input() isIncorrectValue!: boolean; // applicant review option
+    @Input() isAddressDropdown!: boolean; // only for address dropdown
+
+    @Output() selectedItem: EventEmitter<IOptionModel | null> =
+        new EventEmitter<IOptionModel | null>();
+    @Output() selectedItems: EventEmitter<IOptionModel[] | null> =
+        new EventEmitter<IOptionModel[] | null>();
+    @Output() selectedItemColor: EventEmitter<IOptionModel | null> =
+        new EventEmitter<IOptionModel | null>();
+    @Output() selectedLabelMode: EventEmitter<string> =
+        new EventEmitter<string>();
+    @Output() closeDropdown: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
+    @Output() saveItem: EventEmitter<{
+        data: IOptionModel | null;
+        action: string;
+    }> = new EventEmitter<{ data: IOptionModel | null; action: string }>();
+    @Output() incorrectEvent: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
+    @Output() placeholderIconEvent: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
+    @Output('pagination') paginationEvent: EventEmitter<number> =
+        new EventEmitter<number>();
+    @Output('activeGroup') activeGroupEvent: EventEmitter<IOptionModel> =
+        new EventEmitter<IOptionModel>();
+    @Output('clearInputEvent') clearInputEvent: EventEmitter<boolean> =
+        new EventEmitter<boolean>();
+
+    @Output('searchInputEvent') searchInputEvent: EventEmitter<string> =
+        new EventEmitter<string>();
+    // events
+    public searchInputText = new EventInputManager<string>(
+        null,
+        this.searchInputEvent
+    );
+
+    // Copy of Options
+    public originalOptions: IOptionModel[] = [];
+
+    // Pagination
+    public paginationNumber: number = 0;
+
+    // Multiselect dropdown options
+    public multiselectItems: IOptionModel[] = [];
+    public isMultiSelectInputFocus: boolean = false;
+    public multiSelectLabel!: string | undefined;
+    public lastActiveMultiselectItem!: IOptionModel | null;
+
+    // Add mode
+    public isInAddMode: boolean = false;
+
+    // Dropdown navigation with keyboard
+    private dropdownPosition: number = -1;
+
+    // Dropdown Cleartimeout
+    public clearTimeoutDropdown:
+        | string
+        | number
+        | ReturnType<typeof setTimeout>
+        | undefined;
+
+    public hoveringIndex!: number;
+    public inputDropdownSvgRoutes = InputDropdownSvgRoutes;
+    public dropdownTemplateTypeEnum = DropdownTemplateTypeEnum;
+
+    // Destroy
+    private destroy$ = new Subject<void>();
+
+    constructor(
+        @Self() public superControl: NgControl,
+        private cdRef: ChangeDetectorRef,
+        private renderer: Renderer2
+    ) {
+        this.superControl.valueAccessor = this;
+    }
+
+    get getSuperControl() {
+        return this.superControl.control;
+    }
+
+    public inputFormControl: FormControl = new FormControl(null);
+
+    public lastValidOption!: IOptionModel;
+    public firstWriteValue: any;
+    writeValue(value: string | number): void {
+        if (value) this.firstWriteValue = value;
+        this.writeValueToFormControl(value);
+    }
+
+    public writeValueToFormControlTimer!: ReturnType<typeof setTimeout>;
+    public writeValueToFormControl(value: string | number): void {
+        clearTimeout(this.writeValueToFormControlTimer);
+        this.writeValueToFormControlTimer = setTimeout(() => {
+            const findInOptions = this.inputConfig.searchinGroupIndex
+                ? this.getMainGroup()
+                : this._options;
+
+            let findOption = findInOptions.find(
+                (option) =>
+                    option[this.optionValue as keyof IOptionModel] === value
+            );
+
+            let optionNotFound = false;
+            if (!findOption && value) {
+                if (this.optionValue) {
+                    findOption = {
+                        [this.optionValue]: this.firstWriteValue,
+                        [this.label]: this.firstWriteValue,
+                    };
+                } else {
+                    findOption = value as any;
+                }
+
+                optionNotFound = true;
+            }
+
+            if (findOption) {
+                this.setDropdownValue({
+                    option: findOption,
+                    setNotFoundError: optionNotFound,
+                });
+            } else {
+                this.setControlValue();
+                this._activeItem = null;
+            }
+        }, 100);
+    }
+
+    public setNotFoundInvalidFlag(value: boolean): void {
+        if (this.getSuperControl)
+            (
+                this.getSuperControl as AbstractControlWithNotFoundType
+            ).notFoundInvalid = value; // Attach dynamic values
+        (this.inputFormControl as FormControlWithNotFoundType).notFoundInvalid =
+            value; // Attach dynamic values
+    }
+
+    public onTouched = () => {};
+    public onChange(_: any): void {}
+
+    public registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: () => void): void {
+        this.onTouched = fn;
+    }
+
+    ngOnInit(): void {
+        // Multiselect
+        if (this.inputConfig.multiselectDropdown) {
+            this.multiSelectLabel = this.inputConfig.label;
+        }
+
+        this.inputFormControl.valueChanges
+            .pipe(
+                distinctUntilChanged(),
+                debounceTime(50),
+                skip(1),
+                takeUntil(this.destroy$)
+            )
+            .subscribe((searchText) => {
+                if (this.labelMode === 'Color') {
+                    return;
+                }
+
+                this.searchInputText.next('');
+
+                if (this.inputRef.inputElement.nativeElement.value) {
+                    this.searchInputText.next(searchText || '');
+                    this.cdRef.detectChanges();
+                }
+            });
+    }
+
+    ngAfterViewInit() {
+        if (this.inputConfig.autoFocus) {
+            this.clearTimeoutDropdown = setTimeout(() => {
+                this.popoverRef.open();
+            }, 450);
+        }
+    }
+
+    public onScrollDropdown(event: EventTarget | null) {
+        const target = event as HTMLElement;
+
+        if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+            this.paginationNumber += 1;
+
+            this.paginationEvent.emit(this.paginationNumber);
+        }
+    }
+
+    public onActiveItem(option: IOptionModel, group?: any): void {
+        if (
+            this.canOpenModal &&
+            option?.[this.label].toString()?.toLowerCase() === 'add new'
+        ) {
+            this.popoverRef?.close();
+
+            this.searchInputText.next('');
+            this.selectedItem.emit({
+                id: 7655,
+                name: DropdownStringEnum.ADD_NEW,
+                canOpenModal: true,
+            });
+        } else {
+            this.setDropdownValue({ option });
+        }
+    }
+
+    public onActiveItemGroup(event: { option: IOptionModel; group: any }) {
+        this.onActiveItem(event.option, event.group);
+    }
+
+    public onClearSearch(): void {
+        this._activeItem = null;
+        this.inputHoveredItem = -1;
+
+        this.setControlValue('');
+
+        this.selectedItem.emit(null);
+    }
+
+    public clearDropdownLabel() {
+        this._activeItem = null;
+        this.activeItemColor = null;
+        this.selectedItem.emit(null);
+        this.selectedItemColor.emit(null);
+        this.selectedLabelMode.emit('Label');
+    }
+
+    public commandEvent(event: CommandsEvent) {
+        if (event.action === 'Edit Input') {
+            this.selectedLabelMode.emit('Color');
+        }
+        if (event.action === 'Toggle Dropdown') {
+            this.popoverRef.toggle();
+        }
+        if (event.action === 'confirm' && event.mode === 'new') {
+            this.addNewItem();
+        }
+
+        if (event.action === 'confirm' && event.mode === 'edit') {
+            this.updateItem();
+        }
+
+        if (event.action === 'Placeholder Icon Event') {
+            this.placeholderIconEvent.emit(true);
+        }
+
+        if (event.action === 'cancel') {
+            this.saveItem.emit({
+                data: this._activeItem,
+                action: 'cancel',
+            });
+            this.selectedLabelMode.emit('Label');
+        }
+    }
+
+    public addNewItem(): void {
+        this._activeItem = {
+            id: parseInt(uuidv4()),
+            name: this.getSuperControl!.value,
+        };
+        //this.inputConfig.commands!.active = false;
+        this.inputRef.isVisibleCommands = false;
+        this.inputRef.isFocusInput = false;
+
+        this.saveItem.emit({ data: this._activeItem, action: 'new' });
+
+        if (this.inputConfig.dropdownLabel) {
+            this.selectedLabelMode.emit('Label');
+            this.inputRef.isTouchedInput = true;
+        }
+    }
+
+    public updateItem(): void {
+        if (this.inputConfig.dropdownLabel) {
+            this._activeItem = {
+                ...this._activeItem,
+                name: this.getSuperControl?.value,
+                colorId: this.activeItemColor
+                    ? this.activeItemColor.id
+                    : this._activeItem?.colorId,
+                color: this.activeItemColor
+                    ? this.activeItemColor.name
+                    : this._activeItem?.color,
+                code: this.activeItemColor
+                    ? this.activeItemColor.code
+                    : this._activeItem?.code,
+            };
+
+            this.selectedLabelMode.emit('Label');
+        } else {
+            this._activeItem = {
+                ...this._activeItem,
+                name: this.getSuperControl?.value,
+            };
+        }
+
+        this.saveItem.emit({
+            data: this._activeItem,
+            action: 'edit',
+        });
+    }
+
+    public addNewConfig() {
+        this.inputConfig = {
+            ...this.inputConfig,
+            commands: {
+                active: true,
+                type: 'confirm-cancel',
+                firstCommand: {
+                    popup: {
+                        name: 'Confirm',
+                        backgroundColor: '#3074d3',
+                    },
+                    name: 'confirm',
+                    svg: InputDropdownSvgRoutes.specConfirmSvg,
+                },
+                secondCommand: {
+                    popup: {
+                        name: 'Cancel',
+                        backgroundColor: '#2f2f2f',
+                    },
+                    name: 'cancel',
+                    svg: InputDropdownSvgRoutes.xClearSvg,
+                },
+            },
+            placeholder: '',
+        };
+
+        this.popoverRef?.close();
+
+        this.isInAddMode = true;
+        this.clearTimeoutDropdown = setTimeout(() => {
+            this.isInAddMode = false;
+        }, 200);
+    }
+
+    public onIncorrectInput(event: boolean) {
+        this.incorrectEvent.emit(event);
+    }
+
+    public identity(index: number, item: IOptionModel): number | undefined {
+        return item.id;
+    }
+
+    public toggleNestedList(option: IOptionModel): void {
+        if (option.open) {
+            option.open = false;
+            return;
+        }
+        this._options.filter((item) => (item.open = false));
+
+        option.open = !option.open;
+
+        if (option.open) {
+            this.activeGroupEvent.emit(option);
+        }
+    }
+
+    public onBlurInput(event: boolean) {
+        this.closeDropdown.emit(event);
+    }
+
+    public onClearInputEvent(event: boolean) {
+        this.clearInputEvent.emit(event);
+
+        if (event) {
+            this.popoverRef?.close();
+            // label dropdown
+
+            if (this.inputConfig.dropdownLabel) {
+                this.clearDropdownLabel();
+            }
+            // normal dropdown
+            else {
+                this.onClearSearch();
+            }
+        }
+    }
+
+    public handleHiddenDropdown() {
+        this.isDropDownIsOpen = false;
+        this.inputFormControl.patchValue(this.dropdownValue || '');
+        this.inputRef.inputElement.nativeElement.blur();
+        this.searchInputText.next('');
+        this.inputRef.inputElement.nativeElement.value = '';
+    }
+
+    public handleOpenDropdown() {
+        this.isDropDownIsOpen = true;
+        this.searchInputText.next('');
+        this.inputRef.inputElement.nativeElement.value = '';
+    }
+
+    public showHideDropdown(action: boolean) {
+        if (this.inputConfig.multiselectDropdown) {
+            this.isMultiSelectInputFocus = action;
+        }
+
+        if (this.labelMode !== 'Color') {
+            this.getSuperControl!.setValue(null);
+
+            this.popoverRef?.close();
+        }
+
+        // Details pages
+        if (
+            this.inputConfig.customClass?.includes('details-pages') &&
+            !action
+        ) {
+            this.selectedItem.emit(this._activeItem);
+        }
+    }
+
+    public getMainGroup() {
+        let mainGroup: IOptionModel[] = [];
+        this._options.map((groups) => {
+            mainGroup.push(
+                ...groups[
+                    this.inputConfig.searchinGroupIndex as keyof IOptionModel
+                ]
+            );
+        });
+
+        return mainGroup;
+    }
+
+    public dropDownKeyNavigation({
+        keyCode,
+        data,
+    }: {
+        keyCode: number;
+        data: any;
+    }) {
+        // Navigate down
+        if (keyCode === 40) {
+            this.dropdownNavigation(1);
+        }
+        // Navigate up
+        if (keyCode === 38) {
+            this.dropdownNavigation(-1);
+        }
+
+        // Press 'enter'
+        if (keyCode === 13) {
+            let selectedItem;
+            if (this.inputConfig.searchinGroupIndex) {
+                let mainGroup = this.getMainGroup();
+                selectedItem = mainGroup[this.inputHoveredItem];
+            } else {
+                selectedItem =
+                    this.inputHoveredItem > -1
+                        ? this.dropdownComponentRef.options[
+                              this.inputHoveredItem
+                          ]
+                        : { [this.label]: '' };
+            }
+
+            if (
+                this.canOpenModal &&
+                selectedItem?.[this.label].toString()?.toLowerCase() ===
+                    'add new'
+            ) {
+                this.selectedItem.emit({
+                    id: 7655,
+                    name: DropdownStringEnum.ADD_NEW,
+                    canOpenModal: true,
+                });
+            } else if( selectedItem[this.label] ){
+                
+                this.setDropdownValue({ option: selectedItem });
+            }
+        }
+
+        if (keyCode === 9) {
+            if (!this.popoverRef.isOpen()) this.popoverRef?.open();
+        }
+    }
+
+    public setDropdownValue({
+        option,
+        optionValue,
+        label,
+        setNotFoundError,
+    }: SelectDropdownValueType) {
+        this.setNotFoundInvalidFlag(setNotFoundError || false);
+        this.lastValidOption = option;
+        this.selectedItem.emit(option);
+        const optValue = optionValue ? optionValue : this.optionValue;
+        const lbel = label ? label : this.label;
+        const controlValue = optValue
+            ? option[optValue as keyof IOptionModel]
+            : option;
+
+        const inputValue = option[lbel as keyof IOptionModel] || controlValue;
+
+        this._activeItem = option;
+        this.setControlValue(controlValue, inputValue);
+
+        this.popoverRef?.close();
+        this.searchInputText.next('');
+    }
+
+    // ----------------------------------  Multiselect Dropdown ----------------------------------
+    public onMultiselectSelect(option: IOptionModel): void {
+        this.isMultiSelectInputFocus = false;
+        //this.inputConfig.label = undefined;
+
+        if (this.multiselectItems.some((item) => item.id === option.id)) {
+            return;
+        }
+
+        this._options = this._options.map((item) => {
+            if (item.id === option.id) {
+                return {
+                    ...item,
+                    active: true,
+                };
+            } else {
+                if (!item.active) {
+                    return {
+                        ...item,
+                        active: false,
+                    };
+                } else {
+                    return {
+                        ...item,
+                        active: true,
+                    };
+                }
+            }
+        });
+
+        this.multiselectItems = this._options.filter((item) => item.active);
+
+        this.selectedItems.emit(this.multiselectItems);
+
+        this._options = this._options.sort(
+            (x, y) => Number(y.active) - Number(x.active)
+        );
+        this.originalOptions = [...this._options];
+
+        this.lastActiveMultiselectItem = this._options
+            .filter((item) => item.active)
+            .slice(-1)[0];
+
+        if (this.inputRef) {
+            this.inputRef.isFocusInput = false;
+            this.inputRef.inputElement.nativeElement.blur();
+        }
+    }
+
+    public removeMultiSelectItem(index: number) {
+        this._options = this.originalOptions.map((item) => {
+            if (item.id === this.multiselectItems[index].id) {
+                return {
+                    ...this.multiselectItems[index],
+                    active: false,
+                };
+            }
+            return item;
+        });
+
+        this._options = this._options.sort(
+            (x, y) => Number(y.active) - Number(x.active)
+        );
+
+        this.originalOptions = this._options;
+        this.multiselectItems.splice(index, 1);
+
+        if (!this.multiselectItems.length) {
+            this.lastActiveMultiselectItem = null;
+        } else {
+            this.lastActiveMultiselectItem = this._options
+                .filter((item) => item.active)
+                .slice(-1)[0];
+        }
+
+        this.selectedItems.emit(
+            this.multiselectItems.map((item) => {
+                return { ...item };
+            })
+        );
+    }
+
+    public deleteAllMultiSelectItems(currentLabel?: string) {
+        this.multiselectItems = [];
+        this._options = this._options.map((item) => {
+            return {
+                ...item,
+                active: false,
+            };
+        });
+        this.originalOptions = this._options;
+        this.selectedItems.emit(null);
+
+        this.lastActiveMultiselectItem = null;
+    }
+
+    public toggleMultiselectDropdown() {
+        if (this.inputConfig.isDisabled) {
+            return;
+        }
+        this.isMultiSelectInputFocus = !this.isMultiSelectInputFocus;
+
+        if (this.isMultiSelectInputFocus) {
+            this.clearTimeoutDropdown = setTimeout(() => {
+                this.popoverRef.open();
+            }, 150);
+        } else {
+            this.inputRef.isFocusInput = false;
+            this.popoverRef?.close();
+        }
+    }
+    // ----------------------------------  End ----------------------------------
+
+    public dropdownValue: string | undefined = '';
+    public setControlValue(value?: string, dropdownInputValue?: string) {
+        this.onChange(value); // Notify Angular form about the change
+        if (value) this.onTouched(); // Mark as touched
+        this.dropdownValue = dropdownInputValue || value;
+        this.inputFormControl.patchValue(dropdownInputValue || value);
+    }
+
+    /**
+     * Navigate through dropdown with keyboard arrows
+     */
+    private dropdownNavigation(step: number) {
+        const nextStep = this.inputHoveredItem + step;
+
+        if (nextStep > this.dropdownComponentRef.dropdownOption.length - 1)
+            this.inputHoveredItem = 0;
+        else if (nextStep < 0)
+            this.inputHoveredItem =
+                this.dropdownComponentRef.dropdownOption.length - 1;
+        else this.inputHoveredItem = nextStep;
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+        clearTimeout(this.clearTimeoutDropdown as ReturnType<typeof setTimeout>);
+    }
+}