ca-components 2.1.152 → 2.1.161

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

@@ -1,897 +0,0 @@
-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>);
-    }
-}