@testgorilla/tgo-ui 2.10.1 → 2.10.3

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

@@ -1,127 +0,0 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatRadioModule } from '@angular/material/radio';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CheckboxComponentModule } from '../../components/checkbox/checkbox.component.module';
-import { DropdownComponentModule } from '../../components/dropdown/dropdown.component.module';
-import { FieldComponentModule } from '../../components/field/field.component.module';
-import { RadioButtonComponentModule } from '../../components/radio-button/radio-button.component.module';
-import { RadioButtonEventType } from '../radio-button/radio-button.model';
-
-import { FormDemoComponent } from './form-demo.component';
-import { RadioButtonsData } from './form-demo.model';
-import { AutocompleteComponentModule } from '../autocomplete/autocomplete.component.module';
-import { SliderComponentModule } from '../slider/slider.component.module';
-import { PhoneInputComponentModule } from '../phone-input/phone-input.component.module';
-
-const disableAnimations =
-  !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));
-
-describe('FormDemoComponent', () => {
-  let component: FormDemoComponent;
-  let fixture: ComponentFixture<FormDemoComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FormDemoComponent ],
-      providers: [FormBuilder],
-      imports: [
-        BrowserAnimationsModule.withConfig({ disableAnimations }),
-        FormsModule,
-        ReactiveFormsModule,
-        FieldComponentModule,
-        CheckboxComponentModule,
-        DropdownComponentModule,
-        RadioButtonComponentModule,
-        MatRadioModule,
-        AutocompleteComponentModule,
-        SliderComponentModule,
-        PhoneInputComponentModule,
-      ],
-      schemas: [ NO_ERRORS_SCHEMA ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FormDemoComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('checkRadioChange', () => {
-    it('should update the checked property of the radio buttons array', () => {
-      const radioButtons: RadioButtonsData[] = [
-        { value: 'option1', checked: false, label: '', name: '' },
-        { value: 'option2', checked: false, label: '', name: '' },
-        { value: 'option3', checked: false,label: '', name: '' },
-      ];
-      const event: RadioButtonEventType = {
-        optionName: 'option2',
-        optionChecked: true,
-      };
-
-      component.checkRadioChange(radioButtons, event);
-
-      expect(radioButtons[0].checked).toBe(false);
-      expect(radioButtons[1].checked).toBe(true);
-      expect(radioButtons[2].checked).toBe(false);
-    });
-  });
-
-  describe('onChangeRadioMulti', () => {
-
-    it('should update the radioMulti form control value based on the event', () => {
-      const event: RadioButtonEventType = {
-        optionName: 'option2',
-        optionChecked: true,
-      };
-
-      component.onChangeRadioMulti(event);
-
-      expect(component.formDemo.get('radioMulti')!.value).toBe('option2');
-    });
-
-    it('should reset the radioMulti form control value if optionChecked is false', () => {
-      const event: RadioButtonEventType = {
-        optionName: 'option2',
-        optionChecked: false,
-      };
-
-      component.formDemo.get('radioMulti')!.setValue('option2');
-      component.onChangeRadioMulti(event);
-
-      expect(component.formDemo.get('radioMulti')!.value).toBe('');
-    });
-  });
-
-  describe('onChangeRadio', () => {
-    it('should update the radio form control value based on the event', () => {
-      const event: RadioButtonEventType = {
-        optionName: 'option1',
-        optionChecked: true,
-      };
-
-      component.onChangeRadio(event);
-
-      expect(component.formDemo.get('radio')!.value).toBe('option1');
-    });
-
-    it('should reset the radio form control value if optionChecked is false', () => {
-      const event: RadioButtonEventType = {
-        optionName: 'option1',
-        optionChecked: false,
-      };
-
-      component.formDemo.get('radio')!.setValue('option1');
-      component.onChangeRadio(event);
-
-      expect(component.formDemo.get('radio')!.value).toBe('');
-    });
-  });
-});

package/projects/tgo-canopy-ui/components/form-demo/form-demo.component.ts

@@ -1,217 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, FormControl } from '@angular/forms';
-import { RadioButtonEventType } from '../../components/radio-button/radio-button.model';
-import { RadioButtonsData } from './form-demo.model';
-import { DropdownVariation } from '../autocomplete/autocomplete.model';
-
-const MOCK_ITEMS_LIST = ['John Doe', 'Bruce Willis', 'Leonardo DiCaprio', 'Jason Statham', 'Will Ferrell'];
-const MOCK_SUGGESTIONS = ['John Doe', 'Bruce Willis'];
-
-const MOCK_ITEMS_LIST_OBJECTS = [
-  { name: 'John Doe', id: 1 },
-  { name: 'Bruce Willis', id: 2 },
-  { name: 'Leonardo DiCaprio', id: 3 },
-  { name: 'Jason Statham', id: 4 },
-  { name: 'Will Ferrell', id: 5 },
-];
-const MOCK_SUGGESTIONS_OBJECTS = [
-  { name: 'John Doe', id: 1 },
-  { name: 'Bruce Willis', id: 2 },
-];
-
-@Component({
-  selector: 'ui-form-demo',
-  templateUrl: './form-demo.component.html',
-  styleUrls: ['./form-demo.component.scss']
-})
-
-export class FormDemoComponent implements OnInit {
-  constructor(private fb: UntypedFormBuilder, private cdr: ChangeDetectorRef) {
-  }
-
-  /**
-   * @ignore
-   */
-  formDemo = this.fb.group({
-    text: [''],
-    password: [''],
-    search: [''],
-    email: [''],
-    numberField: [''],
-    tel: [''],
-    dropdown: ['Item 2'],
-    dropdownMultiple: [''],
-    checkField: [false],
-    checkFieldMulti: [true],
-    checkFieldIndeterminate: [false],
-    radio: [''],
-    radioMulti: [''],
-    inputAutocompleteSingle: [''],
-    inputAutocompleteMulti: [[]],
-    inputAutocompleteSinglePredefined: [MOCK_SUGGESTIONS[0]],
-    inputAutocompleteMultiPredefined: [[MOCK_SUGGESTIONS_OBJECTS[0], MOCK_SUGGESTIONS_OBJECTS[1], MOCK_ITEMS_LIST_OBJECTS[2]]],
-    multiLargeAutocompleteValue: [[MOCK_SUGGESTIONS_OBJECTS[0], MOCK_SUGGESTIONS_OBJECTS[1], MOCK_ITEMS_LIST_OBJECTS[2]]],
-    slider: [{ start: 20, end: 50 }],
-    phoneNumber: ['+55 123123123'],
-  });
-  singleAutocompleteValuePrimitive = MOCK_SUGGESTIONS[1];
-  singleAutocompleteValueObject = MOCK_SUGGESTIONS_OBJECTS[1];
-  multiAutocompleteValue = [MOCK_SUGGESTIONS_OBJECTS[1]];
-  multiLargeAutocompleteValue = [MOCK_SUGGESTIONS_OBJECTS[1]];
-
-  dropDownList = [
-    {
-      value: 'Item 1',
-    },
-    {
-      value: 'Item 2',
-    },
-    {
-      value: 'Item 3',
-    },
-    {
-      value: 'Item 4',
-    },
-    {
-      value: 'Item 5',
-    }
-  ];
-
-  radioButtonValues: RadioButtonsData[] = [
-    {
-      value: 'test1',
-      label: 'Test 1',
-      name: 'test1',
-      checked: true,
-    },
-    {
-      value: 'test2',
-      label: 'Test 2',
-      name: 'test2',
-      checked: false,
-    },
-    {
-      value: 'test3',
-      label: 'Test 3',
-      name: 'test3',
-      checked: false,
-    },
-    {
-      value: 'test4',
-      label: 'Test 4',
-      name: 'test4',
-      checked: false,
-    },
-    {
-      value: 'test5',
-      label: 'Test 5',
-      name: 'test5',
-      checked: false,
-    },
-  ];
-
-  radioButtonMultiValues: RadioButtonsData[] = [
-    {
-      value: 'test1',
-      label: 'Test multi 1',
-      name: 'test1',
-      checked: true,
-    },
-    {
-      value: 'test2',
-      label: 'Test multi 2',
-      name: 'test2',
-      checked: false,
-    },
-    {
-      value: 'test3',
-      label: 'Test multi 3',
-      name: 'test3',
-      checked: false,
-    },
-    {
-      value: 'test4',
-      label: 'Test multi 4',
-      name: 'test4',
-      checked: false,
-    },
-    {
-      value: 'test5',
-      label: 'Test multi 5',
-      name: 'test5',
-      checked: false,
-    },
-  ];
-
-  countryList = [
-    {
-      name: 'Bouvet Island',
-      alpha2Code: 'BV',
-      callingCode: '+0',
-    },
-    {
-      name: 'Brazil',
-      alpha2Code: 'BR',
-      callingCode: '+55',
-    },
-    {
-      name: 'British Indian Ocean Territory',
-      alpha2Code: 'IO',
-      callingCode: '+246',
-    },
-    {
-      name: 'Brunei Darussalam',
-      alpha2Code: 'BN',
-      callingCode: '+673',
-    },
-  ];
-
-  formValue: any;
-
-  ngOnInit(): void {
-    this.initRadio(this.radioButtonMultiValues, 'radioMulti');
-    this.initRadio(this.radioButtonValues, 'radio');
-  }
-
-  //Initialized radio buttons from data
-  initRadio(array: RadioButtonsData[], control: string) {
-    array.forEach(radioButton => {
-      if (radioButton.checked) {
-        this.formDemo.controls[control].setValue(radioButton.value);
-      }
-    });
-  }
-
-  //Check which radio button is checked
-  checkRadioChange(array: RadioButtonsData[], event: RadioButtonEventType) {
-    array.forEach(radioButton => {
-      radioButton.checked = radioButton.value === event.optionName;
-    });
-  }
-
-  //Check radio button multiple and set value for form
-  onChangeRadioMulti(event: RadioButtonEventType) {
-    this.checkRadioChange(this.radioButtonMultiValues, event);
-    if (!event.optionChecked) {
-      this.formDemo.controls['radioMulti'].setValue('');
-    } else {
-      this.formDemo.controls['radioMulti'].setValue(event.optionName);
-    }
-  }
-
-  //Check radio button simple and set value for form
-  onChangeRadio(event: RadioButtonEventType) {
-    this.checkRadioChange(this.radioButtonValues, event);
-    if (!event.optionChecked) {
-      this.formDemo.controls['radio'].setValue('');
-    } else {
-      this.formDemo.controls['radio'].setValue(event.optionName);
-    }
-  }
-
-  protected readonly MOCK_ITEMS_LIST = MOCK_ITEMS_LIST;
-  protected readonly MOCK_SUGGESTIONS = MOCK_SUGGESTIONS;
-  protected readonly MOCK_ITEMS_LIST_OBJECTS = MOCK_ITEMS_LIST_OBJECTS;
-  protected readonly MOCK_SUGGESTIONS_OBJECTS = MOCK_SUGGESTIONS_OBJECTS;
-  protected readonly DropdownVariation = DropdownVariation;
-}

package/projects/tgo-canopy-ui/components/form-demo/form-demo.model.ts

@@ -1,6 +0,0 @@
-export type RadioButtonsData = {
-  value: string;
-  label: string;
-  name: string;
-  checked: boolean;
-};

package/projects/tgo-canopy-ui/components/icon/__snapshots__/icon.component.spec.ts.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconComponent should render correctly 1`] = `
-<ui-icon
-  applicationTheme={[Function String]}
-  color={[Function String]}
-  cssClass=""
-  customCssClass={[Function String]}
-  defaultAppTheme="null"
-  domSanitzer={[Function _DomSanitizerImpl]}
-  filled="false"
-  matIconRegistry={[Function _MatIconRegistry]}
-  name="undefined"
-  size={[Function String]}
->
-  <mat-icon
-    class=" size-16 black"
-  />
-</ui-icon>
-`;

package/projects/tgo-canopy-ui/components/icon/icon.component.html

@@ -1 +0,0 @@
-<mat-icon [svgIcon]="name" [attr.class]="customCssClass"></mat-icon>

package/projects/tgo-canopy-ui/components/icon/icon.component.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { IconComponent } from './icon.component';
-
-@NgModule({
-  declarations: [IconComponent],
-  imports: [CommonModule, MatIconModule, HttpClientModule],
-  exports: [IconComponent],
-  providers: [HttpClientModule],
-})
-export class IconComponentModule {}

package/projects/tgo-canopy-ui/components/icon/icon.component.scss

@@ -1,66 +0,0 @@
-@use "../../theme/variables" as *;
-
-:host {
-  width: var(--icon-size)px !important;
-  height: var(--icon-size)px !important;
-}
-
-mat-icon {
-  display: flex;
-
-  &.size-16 svg {
-    width: 16px;
-    height: 16px;
-  }
-
-  &.size-24 svg {
-  width: 24px;
-  height: 24px;
-  }
-
-  &.size-40 svg {
-    width: 40px;
-    height: 40px;
-  }
-
-  &.size-80 svg {
-    width: 80px;
-    height: 80px;
-  }
-
-  &.dark svg {
-    color: $tgo-dark;
-  }
-
-  &.white svg {
-    color: $tgo-white;
-  }
-
-  &.teal svg {
-    color: $tgo-teal-default;
-  }
-
-  &.petrol svg {
-    color: $tgo-petrol-default;
-  }
-
-  &.black svg {
-    color: $tgo-black;
-  }
-
-  &.red svg {
-    color: $error-50;
-  }
-
-  &.gray svg {
-    color: $grayscale-50;
-  }
-
-  &.orange svg {
-    color: $warning-50;
-  }
-
-  &.rebrand-black svg {
-   color: $black;
-  }
-}

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

@@ -1,150 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { IconComponent } from './icon.component';
-import { tgoIcons } from './icon.config';
-import { IconName } from './icon.model';
-import { IconMock } from '../../__mocks__/icon.mock';
-import { By } from '@angular/platform-browser';
-describe('IconComponent', () => {
-  let component: IconComponent;
-  let fixture: ComponentFixture<IconComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [IconComponent],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(IconComponent);
-    component = fixture.componentInstance;
-    component.applicationTheme = "classic";
-  });
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  it('should render correctly', () => {
-    fixture.detectChanges();
-    expect(fixture).toMatchSnapshot();
-  });
-  //Testing size input
-  describe('when size input is initialized', () => {
-    it('should render small size as default', () => {
-      fixture.detectChanges();
-      const button = fixture.debugElement.query(By.css('mat-icon'));
-      expect(button.classes[IconMock.size.small]).toBeTruthy();
-    });
-  });
-  describe('when size value changes', () => {
-    it('should render 24 size', () => {
-      component.size = '24';
-      fixture.detectChanges();
-      const icon = fixture.debugElement.query(By.css('mat-icon'));
-      expect(icon.classes[IconMock.size.big]).toBeTruthy();
-    });
-    it('should call setCssClass() method when size changes', () => {
-      const sizeSpy = jest.spyOn(component, 'setCssClass');
-      component.size = '24';
-      component.ngOnChanges({
-        size: new SimpleChange(null, component.size, true)
-      });
-      fixture.detectChanges();
-      expect(sizeSpy).toHaveBeenCalled();
-    });
-  });
-  //Testing cssClass input
-  describe('when cssClass input is initialized', () => {
-    it('should render cssClass input', () => {
-      component.cssClass = 'testing';
-      component.ngOnChanges({
-        cssClass: new SimpleChange(null, component.cssClass, true)
-      });
-      fixture.detectChanges();
-      const icon = fixture.debugElement.query(By.css('mat-icon'));
-      expect(icon.classes[IconMock.cssClass]).toBeTruthy();
-    });
-  });
-  describe('when cssClass input changes', () => {
-    it('should call setCssClass() method', () => {
-      const classCssSpy = jest.spyOn(component, 'setCssClass');
-      component.cssClass = 'new testing';
-      component.ngOnChanges({
-        size: new SimpleChange(null, component.cssClass, true)
-      });
-      fixture.detectChanges();
-      expect(classCssSpy).toHaveBeenCalled();
-    });
-  });
-
-  //Testing name input
-  describe('when name input is initialized', () => {
-    it('should set mat-icon svgIcon input according name input', () => {
-      const randIconIdx = Math.floor(Math.random() * tgoIcons.length);
-      component.name = tgoIcons[randIconIdx] as IconName;
-      fixture.detectChanges();
-      const icon = fixture.debugElement.query(By.css('mat-icon')).nativeElement;
-      expect(icon.svgIcon).toEqual(component.name);
-    });
-  });
-  describe('when name input changes', () => {
-    it('should call addIcon() method', () => {
-      const addIconSpy = jest.spyOn(component, 'addIcon');
-      component.name = 'Archive';
-      component.ngOnChanges({
-        name: new SimpleChange(null, component.name, true)
-      });
-      fixture.detectChanges();
-      expect(addIconSpy).toHaveBeenCalled();
-    });
-  });
-  //Testing color input
-  describe('when color input is initialized', () => {
-    it('should render dark color as default', () => {
-      fixture.detectChanges();
-      const icon = fixture.debugElement.query(By.css('mat-icon'));
-      expect(icon.classes[IconMock.color.black]).toBeTruthy();
-    });
-    describe('and it changes its value', () => {
-      it('should render teal color', () => {
-        component.color = 'teal';
-        fixture.detectChanges();
-        const icon = fixture.debugElement.query(By.css('mat-icon'));
-        expect(icon.classes[IconMock.color.teal]).toBeTruthy();
-      });
-      it('should render petrol color', () => {
-        component.color = 'petrol';
-        fixture.detectChanges();
-        const icon = fixture.debugElement.query(By.css('mat-icon'));
-        expect(icon.classes[IconMock.color.petrol]).toBeTruthy();
-      });
-      it('should render dark color', () => {
-        component.color = 'dark';
-        fixture.detectChanges();
-        const icon = fixture.debugElement.query(By.css('mat-icon'));
-        expect(icon.classes[IconMock.color.dark]).toBeTruthy();
-      });
-      it('should render white color', () => {
-        component.color = 'white';
-        fixture.detectChanges();
-        const icon = fixture.debugElement.query(By.css('mat-icon'));
-        expect(icon.classes[IconMock.color.white]).toBeTruthy();
-      });
-    });
-  });
-  describe('when color input changes', () => {
-    it('should call setCssClass() method', () => {
-      const classCssSpy = jest.spyOn(component, 'setCssClass');
-      component.color = 'teal';
-      component.ngOnChanges({
-        color: new SimpleChange(null, component.color, true)
-      });
-      fixture.detectChanges();
-      expect(classCssSpy).toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,68 +0,0 @@
-import { MatIconModule } from '@angular/material/icon';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { IconComponent } from './icon.component';
-import { transformTheme } from "../../utils/transform-theme";
-import { FileUploadComponent } from "../file-upload/file-upload.component";
-
-export default {
-  title: 'Icons/Icon',
-  component: IconComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [IconComponent],
-      imports: [MatIconModule],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-const hideControls = {
-  controls: {
-    exclude: ['customCssClass', 'ngOnChanges', 'ngOnInit', 'setCssClass', 'addIcon'],
-  },
-};
-
-export const IconBasicSizeSmall = Template.bind({});
-IconBasicSizeSmall.args = {
-  name: 'Archive',
-  size: '16',
-};
-
-export const IconSizeBig = Template.bind({});
-IconSizeBig.args = {
-  name: 'Team',
-  size: '24',
-};
-
-IconBasicSizeSmall.parameters = hideControls;
-IconSizeBig.parameters = hideControls;
-
-export const IconColors: Story = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [
-        `
-  .colum { align-items: center; justify-content: center; display: flex; flex-flow: column; font-size: 12px; flex-direction: column-reverse; }
-  .row { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }
-  .icon-container {border-radius: 50%; padding: 5px; display: flex; margin-bottom: 7px}
-  .icon-container.white { background: black; }
-  `,
-      ],
-      template: `<div class="row"><div class="colum">Black<div class="icon-container"><ui-icon name="Promotion" size="24"></ui-icon></div></div>
-  <div class="colum">Teal<div class="icon-container"><ui-icon name="Promotion" size="24" color="teal"></ui-icon></div></div>
-  <div class="colum">Petrol<div class="icon-container"><ui-icon name="Promotion" size="24" color="petrol"></ui-icon></div></div>
-  <div class="colum">Dark<div class="icon-container"><ui-icon name="Promotion" size="24" color="dark"></ui-icon></div></div>
-  <div class="colum">White<div class="icon-container white"><ui-icon name="Promotion" size="24" color="white"></ui-icon></div></div></div>`,
-    }
-  }
-} as Story