@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

package/projects/tgo-canopy-ui/components/autocomplete/autocomplete.component.spec.ts

@@ -1,532 +0,0 @@
-import { AutocompleteComponent } from './autocomplete.component';
-import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
-import { LanguageService } from '../../utils/localization/language.service';
-import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-import { By } from '@angular/platform-browser';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { TransformItemPipe } from './transform-Item.pipe';
-import { Subject } from 'rxjs';
-import { ElementRef } from '@angular/core';
-
-describe('AutocompleteComponent', () => {
-  let component: AutocompleteComponent;
-  let fixture: ComponentFixture<AutocompleteComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [AutocompleteComponent, TransformItemPipe],
-      imports: [UiTranslatePipe, MatAutocompleteModule, HasValidationErrorPipe],
-      providers: [
-        LanguageService,
-        {
-          provide: 'CANOPYUI_DEFAULT_APPLICATION_THEME',
-          useValue: 'app_theme',
-        },
-      ],
-    });
-
-    fixture = TestBed.createComponent(AutocompleteComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should initialize the component', () => {
-    expect(component).toBeDefined();
-  });
-
-  it('should update value when writeValue is called', () => {
-    const mockValue = 'testValue';
-    component.writeValue(mockValue);
-    //@ts-expect-error
-    expect(component.value).toEqual(mockValue);
-  });
-
-  it('should call #initValue only once on writeValue when infiniteScroll is true', () => {
-    component['initValue'] = jest.fn();
-
-    component.infiniteScroll = true;
-
-    component.writeValue('testValue');
-    component.writeValue('testValue2');
-    expect(component['initValue']).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call #initValue multiple times on writeValue when infiniteScroll is false', () => {
-    component['initValue'] = jest.fn();
-
-    component.writeValue('testValue');
-    component.writeValue('testValue2');
-    expect(component['initValue']).toHaveBeenCalledTimes(2);
-  });
-
-  it('should call onUpdate when onOptionSelected is called', () => {
-    const mockEvent: any = { option: { value: 'selectedValue' } };
-    //@ts-expect-error
-    const spyOnUpdate = jest.spyOn(component, 'onUpdate');
-    //@ts-expect-error
-    component.onOptionSelected(mockEvent);
-    expect(spyOnUpdate).toHaveBeenCalled();
-  });
-
-  it('should call checkOverlap when type is multi', () => {
-    //@ts-expect-error
-    const spyOnCheckOverlap = jest.spyOn(component, 'checkOverlap');
-    component.type = 'multi';
-    //@ts-expect-error
-    component.onOptionSelected({ option: { value: 'selectedValue' } });
-    expect(spyOnCheckOverlap).toHaveBeenCalled();
-  });
-
-  it('should add new value when addNewValue is called', () => {
-    const mockValue = 'testValue';
-    component.type = 'multi';
-    //@ts-expect-error
-    component.addNewValue(mockValue);
-    //@ts-expect-error
-    expect(component.value).toContain(mockValue);
-  });
-
-  it('should not add duplicate value when addNewValue is called', () => {
-    const mockValue = 'testValue';
-    component.type = 'multi';
-    //@ts-expect-error
-    component.value = [mockValue];
-    //@ts-expect-error
-    component.addNewValue(mockValue);
-    //@ts-expect-error
-    expect(component.value.length).toBe(0);
-  });
-
-  it('should set isInputFocus to true on onFocus', () => {
-    //@ts-expect-error
-    component.onFocus();
-    //@ts-expect-error
-    expect(component.isInputFocus).toBe(true);
-  });
-
-  it('should not trim input value on onFocus if length is not 1 or value length is 0', () => {
-    //@ts-expect-error
-    component.value = 'testValue';
-    //@ts-expect-error
-    component.inputValue = 'test';
-    //@ts-expect-error
-    component.onFocus();
-    //@ts-expect-error
-    expect(component.inputValue).toBe('test');
-  });
-
-  it('should update value on onOptionRemoved', () => {
-    const mockOption = 'removedValue';
-    //@ts-expect-error
-    component.value = [mockOption];
-    //@ts-expect-error
-    const spyOnUpdate = jest.spyOn(component, 'onUpdate');
-    //@ts-expect-error
-    component.onOptionRemoved({ showPanel: false }, mockOption);
-    //@ts-expect-error
-    expect(component.value).toEqual(['removedValue']);
-    expect(spyOnUpdate).toHaveBeenCalled();
-  });
-
-  it('should update inputValue on onClear', () => {
-    //@ts-expect-error
-    const spyOnUpdate = jest.spyOn(component, 'onUpdate');
-    //@ts-expect-error
-    component.value = 'testValue';
-    //@ts-expect-error
-    component.onClear();
-    //@ts-expect-error
-    expect(component.inputValue).toBe('');
-    expect(spyOnUpdate).toHaveBeenCalled();
-  });
-
-  it('should refill input value on refillInput', () => {
-    //@ts-expect-error
-    component.value = 'testValue';
-    //@ts-expect-error
-    component.refillInput();
-    //@ts-expect-error
-    expect(component.inputValue).toBe('');
-  });
-
-  it('should not refill input value on refillInput if type is not single', () => {
-    component.type = 'multi';
-    //@ts-expect-error
-    component.value = 'testValue';
-    //@ts-expect-error
-    component.refillInput();
-    //@ts-expect-error
-    expect(component.inputValue).toBe('');
-  });
-
-  afterEach(() => {
-    fixture.destroy();
-  });
-
-  it('should correctly set and get input properties', () => {
-    component.itemsList = ['Item 1', 'Item 2', 'Item 3'];
-    component.label = 'Select Item';
-    component.textField = 'item';
-    component.valueField = 'id';
-
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(component.itemsList).toEqual(['Item 1', 'Item 2', 'Item 3']); // Validate items list
-    expect(component.label).toBe('Select Item'); // Check label
-    expect(component.textField).toBe('item'); // Check text field
-    expect(component.valueField).toBe('id'); // Check value field
-  });
-
-  it('should emit selectionChange event when an item is selected', () => {
-    jest.spyOn(component.selectionChange, 'emit'); // Spy on selectionChange
-
-    component.itemsList = ['Item 1', 'Item 2', 'Item 3'];
-    component.type = 'single'; // Set type to single
-    fixture.detectChanges(); // Trigger change detection
-
-    const matAutocomplete = fixture.debugElement.query(By.css('mat-autocomplete'));
-    //@ts-ignore
-    component.onOptionSelected({ option: { value: 'Item 2' } } as MatAutocompleteSelectedEvent); // Simulate option selection
-
-    expect(component.selectionChange.emit).toHaveBeenCalledWith('Item 2'); // Validate event emission
-  });
-
-  it('should emit searchTextChange event when text changes', () => {
-    jest.spyOn(component.searchTextChange, 'emit'); // Spy on searchTextChange
-
-    //@ts-ignore
-    component.onInputChange({ target: { value: 'Test' } } as unknown as Event); // Simulate text change
-
-    expect(component.searchTextChange.emit).toHaveBeenCalledWith('Test'); // Validate event emission
-  });
-
-  it('should correctly apply company color for styling', () => {
-    component.companyColor = '#FF0000'; // Set company color
-    fixture.detectChanges(); // Trigger change detection
-
-    //@ts-ignore
-    component.setCompanyColorVariable(); // Set the company color variable
-
-    const bodyStyle = document.body.style.getPropertyValue('--ui-autocomplete-option-color'); // Get the custom style property
-
-    expect(bodyStyle).toBe('#FF0000'); // Validate the correct color is applied
-  });
-
-  it('should filter items based on input value', () => {
-    component.itemsList = ['Item 1', 'Item 2', 'Item 3'];
-    component.textField = ''; // Set to primitive (default to no specific text field)
-
-    fixture.detectChanges(); // Trigger change detection
-
-    //@ts-ignore
-    component.inputValueSearch$.next('Item'); // Simulate input value
-
-    let filteredItems: any[] | undefined;
-
-    //@ts-ignore
-    component.filteredItemsList$.subscribe(items => {
-      filteredItems = items;
-    });
-
-    expect(filteredItems).toEqual(['Item 1', 'Item 2', 'Item 3']); // Validate filtered items based on input
-  });
-
-  it('should set isOverLapping to true when tags overlap inputWidth', () => {
-    // component.inputWidth = 100; // Assuming input width
-    component.tagContainer = { nativeElement: document.createElement('div') };
-    component.tagContainer.nativeElement.innerHTML = `
-      <div class="value-tag" style="width: 50px;"></div>
-      <div class="value-tag" style="width: 50px;"></div>
-    `;
-    //@ts-ignore
-    component.checkOverlap();
-    //@ts-ignore
-    expect(component.isOverLapping).toBe(false);
-  });
-
-  it('should check overlap', fakeAsync(() => {
-    component.tagContainer = { nativeElement: document.createElement('div') };
-    component.tagContainer.nativeElement.innerHTML = `<div class="value-tag" style="width: 1550px;"></div>`;
-    //@ts-ignore
-    tick(500);
-    //@ts-ignore
-    component.checkOverlap(0);
-    //@ts-ignore
-    expect(component.isOverLapping).toEqual(false);
-    //@ts-ignore
-    expect(component.overlapIndex).toEqual(0);
-    //@ts-ignore
-    expect(component.isOverlapChecking).toEqual(true);
-    flush();
-  }));
-
-  it('should compare correctly for strings using compareWith', () => {
-    component.compareWith = (a: any, b: any) => a === b;
-    expect(component.compareWith('test', 'test')).toBeTruthy();
-    expect(component.compareWith('test', 'Test')).toBeFalsy();
-  });
-
-  it('should compare correctly for objects using compareWith', () => {
-    component.compareWith = (a: any, b: any) => a.id === b.id && a.name === b.name;
-    const obj1 = { id: 1, name: 'Test' };
-    const obj2 = { id: 1, name: 'Test' };
-    const obj3 = { id: 2, name: 'Test' };
-    expect(component.compareWith(obj1, obj2)).toBeTruthy();
-    expect(component.compareWith(obj1, obj3)).toBeFalsy();
-  });
-
-  it('should compare correctly for mixed types using compareWith', () => {
-    component.compareWith = (a: any, b: any) => a === b;
-    const obj = { id: 1, name: 'Test' };
-    const str = 'Test';
-    expect(component.compareWith(obj, str)).toBeFalsy();
-  });
-
-  it('should set inputValue as value for single select', fakeAsync(() => {
-    //@ts-expect-error
-    component.value = 'Hello';
-    component.type = 'single';
-    //@ts-expect-error
-    component.inputValue = undefined;
-    //@ts-expect-error
-    component.refillInput();
-    tick(500);
-    //@ts-expect-error
-    expect(component.inputValue).toEqual('Hello');
-    //@ts-expect-error
-    component.inputValueSearch$.subscribe(r => {
-      expect(r).toEqual('');
-    });
-    //@ts-expect-error
-    component.userInput$.subscribe(r => {
-      expect(r).toEqual('');
-    });
-    //@ts-expect-error
-    expect(component.isInputFocus).toEqual(false);
-    flush();
-  }));
-
-  it('should set inputValue as empty string', fakeAsync(() => {
-    //@ts-expect-error
-    component.inputValue = undefined;
-    //@ts-expect-error
-    component.value = [1];
-    //@ts-expect-error
-    component.refillInput();
-    tick(500);
-    //@ts-expect-error
-    expect(component.inputValue).toEqual(' ');
-    flush();
-  }));
-
-  it('should set inputValue if value is array', fakeAsync(() => {
-    //@ts-expect-error
-    component.inputValue = {};
-    component.type = 'single';
-    //@ts-expect-error
-    component.value = [1];
-    //@ts-expect-error
-    component.refillInput();
-    tick(500);
-    //@ts-expect-error
-    expect(component.inputValue).toEqual(1);
-  }));
-
-  it('should set inputValue as empty string for non single select type and no value', fakeAsync(() => {
-    //@ts-expect-error
-    component.inputValue = 5;
-    component.type = 'multi';
-    //@ts-expect-error
-    component.refillInput();
-    tick(500);
-    //@ts-expect-error
-    expect(component.inputValue).toEqual(' ');
-  }));
-
-  it('should go to up', () => {
-    component['savedVirtualScrollViewport'] = {
-      scrollToIndex: jest.fn(),
-      checkViewportSize: jest.fn(),
-    } as any as CdkVirtualScrollViewport;
-    const scrollToIndexSpy = jest.spyOn(component['savedVirtualScrollViewport'], 'scrollToIndex');
-    const checkViewportSizeSpy = jest.spyOn(component['savedVirtualScrollViewport'], 'checkViewportSize');
-    //@ts-expect-error
-    component.gotoUp();
-    expect(scrollToIndexSpy).toHaveBeenCalledTimes(1);
-    expect(scrollToIndexSpy).toHaveBeenCalledWith(0);
-    expect(checkViewportSizeSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('should apply theme from token', () => {
-    expect(component.applicationTheme).toEqual('app_theme');
-  });
-
-  describe('Dynamic Filtering Inputs and Logic', () => {
-    it('should set filteredItemsList$ to dynamicFilteredList$ on ngOnInit when dynamic filtering is enabled', () => {
-      component.isDynamicFilteringEnabled = true;
-
-      component.ngOnInit();
-
-      expect(component['filteredItemsList$']).toBe(component['dynamicFilteredList$']);
-    });
-
-    it('should update dynamicFilteredList$ when dynamicFilteredList input changes in ngOnChanges', () => {
-      component.isDynamicFilteringEnabled = true;
-      component['initValue'] = jest.fn();
-      const newList = ['Item A', 'Item B', 'Item C'];
-      const changes: any = {
-        dynamicFilteredList: {
-          currentValue: newList,
-          previousValue: null,
-          firstChange: true,
-          isFirstChange: () => true,
-        },
-      };
-      component.ngOnChanges(changes);
-      expect(component['initValue']).not.toHaveBeenCalled();
-      expect(component['dynamicFilteredList$'].value).toEqual(newList);
-    });
-
-    it('should update dynamicFilteredList$ to an empty array when dynamicFilterLoading is true in ngOnChanges', () => {
-      component.isDynamicFilteringEnabled = true;
-
-      const changes: any = {
-        dynamicFilterLoading: {
-          currentValue: true,
-          previousValue: false,
-          firstChange: true,
-          isFirstChange: () => true,
-        },
-      };
-      component.ngOnChanges(changes);
-
-      expect(component['dynamicFilteredList$'].value).toEqual([]);
-    });
-
-    it('should update dynamicFilteredList$ to an empty array when both dynamicFilteredList and dynamicFilterLoading changes are present', () => {
-      component.isDynamicFilteringEnabled = true;
-      const newList = ['Item A', 'Item B'];
-      const changes: any = {
-        dynamicFilteredList: {
-          currentValue: newList,
-          previousValue: null,
-          firstChange: true,
-          isFirstChange: () => true,
-        },
-        dynamicFilterLoading: {
-          currentValue: true,
-          previousValue: false,
-          firstChange: true,
-          isFirstChange: () => true,
-        },
-      };
-      component.ngOnChanges(changes);
-
-      expect(component['dynamicFilteredList$'].value).toEqual([]);
-    });
-
-    it('should not update dynamicFilteredList$ in ngOnChanges when dynamic filtering is disabled', () => {
-      component.isDynamicFilteringEnabled = false;
-      const newList = ['Item A', 'Item B'];
-      const changes: any = {
-        dynamicFilteredList: {
-          currentValue: newList,
-          previousValue: null,
-          firstChange: true,
-          isFirstChange: () => true,
-        },
-        dynamicFilterLoading: {
-          currentValue: true,
-          previousValue: false,
-          firstChange: true,
-          isFirstChange: () => true,
-        },
-      };
-
-      component.ngOnChanges(changes);
-      expect(component['dynamicFilteredList$'].value).toBeNull();
-    });
-  });
-
-  describe('Infinite Scrolling', () => {
-    let elementScrolled$: Subject<void>;
-
-    beforeEach(() => {
-      elementScrolled$ = new Subject();
-
-      component['savedVirtualScrollViewport'] = {
-        elementScrolled: jest.fn(() => elementScrolled$.asObservable()),
-        measureScrollOffset: jest.fn(() => 10),
-        getViewportSize: jest.fn(() => 100),
-      } as any;
-      component.matInput = { nativeElement: document.createElement('input') } as ElementRef<HTMLInputElement>;
-    });
-
-    it('should emit scrollViewportBottomReached when scroll offset is less than threshold', fakeAsync(() => {
-      component.infiniteScroll = true;
-      const emitSpy = jest.spyOn(component.scrollViewportBottomReached, 'emit');
-
-      component.cdkVirtualScrollViewport = component['savedVirtualScrollViewport'] as CdkVirtualScrollViewport;
-
-      elementScrolled$.next();
-      tick(200);
-
-      expect(emitSpy).toHaveBeenCalled();
-
-      flush();
-    }));
-
-    it('should not emit scrollViewportBottomReached when scroll offset is greater than or equal to threshold', fakeAsync(() => {
-      component.infiniteScroll = true;
-
-      (component['savedVirtualScrollViewport'].measureScrollOffset as jest.Mock).mockReturnValue(30);
-      const emitSpy = jest.spyOn(component.scrollViewportBottomReached, 'emit');
-
-      component.ngAfterViewInit();
-
-      elementScrolled$.next();
-      tick(200);
-
-      expect(emitSpy).not.toHaveBeenCalled();
-
-      flush();
-    }));
-
-    it('should not subscribe to infinite scrolling if infiniteScroll is false', fakeAsync(() => {
-      component.infiniteScroll = false;
-      const emitSpy = jest.spyOn(component.scrollViewportBottomReached, 'emit');
-
-      component.ngAfterViewInit();
-
-      elementScrolled$.next();
-      tick(200);
-
-      expect(emitSpy).not.toHaveBeenCalled();
-
-      flush();
-    }));
-
-    it('should throttle multiple scroll events', fakeAsync(() => {
-      component.infiniteScroll = true;
-      const emitSpy = jest.spyOn(component.scrollViewportBottomReached, 'emit');
-
-      component.cdkVirtualScrollViewport = component['savedVirtualScrollViewport'] as CdkVirtualScrollViewport;
-
-      elementScrolled$.next();
-      tick(100);
-
-      elementScrolled$.next();
-      tick(100);
-
-      expect(emitSpy).toHaveBeenCalledTimes(1);
-
-      elementScrolled$.next();
-      tick(200);
-      expect(emitSpy).toHaveBeenCalledTimes(2);
-
-      flush();
-    }));
-  });
-});

package/projects/tgo-canopy-ui/components/autocomplete/autocomplete.component.stories.ts

@@ -1,152 +0,0 @@
-import { AutocompleteComponent } from './autocomplete.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatInputModule } from '@angular/material/input';
-import { TagComponentModule } from '../tag/tag.component.module';
-import { MatChipsModule } from '@angular/material/chips';
-import { TransformItemPipe } from './transform-Item.pipe';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { IncludesPipe } from './includes.pipe';
-import { SelectTextDirective } from '../../directives/select-text.directive';
-import { Autocomplete, DropdownVariation } from './autocomplete.model';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from "../../utils/transform-theme";
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-import {
-  CdkFixedSizeVirtualScroll,
-  CdkVirtualForOf,
-  CdkVirtualScrollViewport
-} from "@angular/cdk/scrolling";
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { PreventInputDirective } from "./prevent-input.directive";
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12476-9507&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export default {
-  title: 'Autocomplete',
-  component: AutocompleteComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [AutocompleteComponent, TransformItemPipe, IncludesPipe, SelectTextDirective],
-      imports: [
-        MatFormFieldModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        TagComponentModule,
-        MatChipsModule,
-        FormsModule,
-        ReactiveFormsModule,
-        IconComponentModule,
-        UiTranslatePipe,
-        HasValidationErrorPipe,
-        CdkVirtualForOf,
-        CdkVirtualScrollViewport,
-        CdkFixedSizeVirtualScroll,
-        PreventInputDirective
-      ],
-      providers: [TransformItemPipe, IncludesPipe, SelectTextDirective],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});
-Default.parameters = parameters;
-
-export const Single = Template.bind({});
-Single.args = {
-  suggestionsList: ['Single'],
-  itemsList: ['Single', 'Multi', 'Large', 'Larger'],
-  itemValue: 'Large',
-  type: Autocomplete.SINGLE,
-};
-Single.parameters = parameters;
-
-export const Multi = Template.bind({});
-Multi.args = {
-  suggestionsList: ['Single', 'Multi', 'Large', 'Larger'],
-  itemsList: ['Single', 'Multi', 'Large'],
-  itemValue: 'Large',
-  label: 'Test',
-  type: Autocomplete.MULTI,
-};
-Multi.parameters = parameters;
-
-export const Large = Template.bind({});
-Large.args = {
-  suggestionsList: ['Single'],
-  itemsList: ['Single', 'Multi', 'Large'],
-  itemValue: ['Single', 'Multi', 'Large'],
-  type: Autocomplete.LARGE,
-};
-Large.parameters = parameters;
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  suggestionsList: ['Single'],
-  itemsList: ['Single', 'Multi', 'Large'],
-  itemValue: 'Large',
-  disabled: true,
-  type: Autocomplete.SINGLE,
-};
-Disabled.parameters = parameters;
-
-export const AllowAdd = Template.bind({});
-AllowAdd.args = {
-  suggestionsList: ['Single'],
-  itemsList: ['Single', 'Multi', 'Large'],
-  itemValue: 'Large',
-  allowAdd: true,
-  type: Autocomplete.SINGLE,
-};
-AllowAdd.parameters = parameters;
-
-const valueList = [{ label: 'Test', value: 1 }]
-
-export const Dropdown = Template.bind({});
-Dropdown.args = {
-  itemsList: valueList,
-  itemValue: valueList[0],
-  textField: 'label',
-  valuePrimitive: false,
-  valueField: 'value',
-  variant: DropdownVariation.DROPDOWN,
-  type: Autocomplete.MULTI,
-};
-Dropdown.parameters = parameters;
-
-export const WithErrors = Template.bind({});
-WithErrors.args = {
-  itemsList: ['Single', 'Multi', 'Large'],
-  itemValue: 'Large',
-  variant: DropdownVariation.AUTOCOMPLETE,
-  type: Autocomplete.LARGE,
-  errors: ['Lorem ipsum dolor sit amet', 'Phasellus aliquam quam id tincidunt dapibus <a href="#">text</a>'],
-};
-
-
-export const Groups = Template.bind({});
-Groups.args = {
-  itemsList: [{ items: [{ name: 'First', value: '1' }, { name: 'Second', value: '2' }] }, { groupName: 'Second Group', isGroup: true, items: [{ name: 'Large', value: '3' }, { name: 'Single', value: '4' }] }],
-  itemValue: { name: 'First', value: '1' },
-  textField: 'name',
-  valueField: 'value',
-  variant: DropdownVariation.DROPDOWN,
-  type: Autocomplete.MULTI,
-};