@testgorilla/tgo-ui 2.10.1 → 2.10.2

package/projects/tgo-canopy-ui/components/file-upload-demo/file-upload-demo.component.html

@@ -1,32 +0,0 @@
-<form [formGroup]="uploadDemoForm">
-  <div class="form-value" *ngIf="!!uploadValue">
-    <p><strong>Name: </strong>{{ uploadValue.name }}</p>
-    <p><strong>Size: </strong>{{ uploadValue.size }}</p>
-  </div>
-  <div class="field">
-    <ui-file-upload
-      formControlName="upload"
-      [maxFileSizeMB]="100"
-      supportedFileTypes="png .jpg .psd .bmp .gif .mp3 .key .odp .ppt .pptx .txt .doc .docx .csv .xls .xlsx"
-      [uploadProgress]="progress"
-      [applicationTheme]="applicationTheme"
-      (OnDrop)="startDemo($event)"
-    ></ui-file-upload>
-  </div>
-  <div class="field">
-    <h2>With Errors</h2>
-    <div class="form-value" *ngIf="!!uploadValueErrors">
-      <p><strong>Name: </strong>{{ uploadValueErrors.name }}</p>
-      <p><strong>Size: </strong>{{ uploadValueErrors.size }}</p>
-    </div>
-    <ui-file-upload
-      formControlName="uploadErrors"
-      [maxFileSizeMB]="100"
-      supportedFileTypes="png .jpg .psd .bmp .gif .mp3 .key .odp .ppt .pptx .txt .doc .docx .csv .xls .xlsx"
-      [uploadProgress]="progressError"
-      [applicationTheme]="applicationTheme"
-      (OnDrop)="startDemoErrors($event)"
-      [errors]="errors"
-    ></ui-file-upload>
-  </div>
-</form>

package/projects/tgo-canopy-ui/components/file-upload-demo/file-upload-demo.component.module.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FileUploadComponentModule } from '../file-upload/file-upload.component.module';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { FileUploadDemoComponent } from './file-upload-demo.component';
-
-
-@NgModule({
-  declarations: [FileUploadDemoComponent],
-  imports: [CommonModule, FileUploadComponentModule, FormsModule, ReactiveFormsModule, ProgressBarComponentModule],
-  exports: [FileUploadDemoComponent],
-})
-export class FileUploadDemoComponentModule {}

package/projects/tgo-canopy-ui/components/file-upload-demo/file-upload-demo.component.scss

@@ -1,23 +0,0 @@
-:host {
-  display:flex;
-  justify-content: center;
-  flex-flow: column;
-  align-items: center;
-
-  form div.field {
-    margin-bottom: 40px;
-  }
-
-  h2 {
-    margin-bottom: 20px;
-  }
-
-  .form-value {
-    font-size: 12px;
-    margin-bottom: 20px;
-
-    p { 
-      margin: 5px 0;
-    }
-  }
-}

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

@@ -1,111 +0,0 @@
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { FormBuilder, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { createMockFileList } from '../../test-utils/mock-file';
-import { FileUploadComponentModule } from '../file-upload/file-upload.component.module';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { FileUploadDemoComponent } from './file-upload-demo.component';
-import { By } from '@angular/platform-browser';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-declare const global: any;
-
-const disableAnimations =
-  !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));
-
-describe('FileUploadDemoComponent', () => {
-  let component: FileUploadDemoComponent;
-  let fixture: ComponentFixture<FileUploadDemoComponent>;
-  let fileMock: File;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FileUploadDemoComponent],
-      providers: [FormBuilder],
-      imports: [
-        BrowserAnimationsModule.withConfig({ disableAnimations }),
-        FileUploadComponentModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ProgressBarComponentModule,
-      ],
-      schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FileUploadDemoComponent);
-    component = fixture.componentInstance;
-    fileMock = new File(['dummy content'], 'test.txt');
-  });
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-  describe('Create form with formBuilder', () => {
-    it('uploadDemoForm should be defined', fakeAsync(() => {
-      const testForm = new FileUploadDemoComponent(new FormBuilder());
-      expect(testForm.uploadDemoForm).toBeDefined();
-    }));
-  });
-  describe('ngOnInit', () => {
-    it('it should set new value to uploadValue', () => {
-      fixture.detectChanges();
-      component.uploadDemoForm.controls['upload'].setValue(fileMock);
-      fixture.detectChanges();
-      expect(component.uploadValue).toBe(fileMock);
-    });
-    it('it should set new value to uploadValueErrors', () => {
-      fixture.detectChanges();
-      component.uploadDemoForm.controls['uploadErrors'].setValue(fileMock);
-      fixture.detectChanges();
-      expect(component.uploadValueErrors).toBe(fileMock);
-    });
-  });
-  describe('startDemo()', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-      jest.spyOn(global, 'setTimeout');
-    });
-    afterEach(() => {
-      jest.useRealTimers();
-    });
-    it('should start the demo upload', () => {
-      component.startDemo(fileMock);
-      expect(component.progress).toBe(1);
-      jest.runAllTimers();
-      expect(component.progress).toBe(100);
-    });
-    it('should return', () => {
-      component.startDemo();
-      jest.runAllTimers();
-      expect(component.progressError).toBe(undefined);
-    });
-  });
-  describe('startDemoErrors()', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-      jest.spyOn(global, 'setTimeout');
-    });
-    afterEach(() => {
-      jest.useRealTimers();
-    });
-    it('should start the demoErrors upload', () => {
-      component.startDemoErrors(fileMock);
-      expect(component.progressError).toBe(1);
-      jest.runAllTimers();
-      expect(component.progressError).toBe(100);
-    });
-    it('should set errors', () => {
-      component.startDemoErrors(fileMock);
-      jest.runAllTimers();
-      expect(component.errors).toEqual([ 'Unsupported file', 'File size exceeds the maximum limit' ]);
-    });
-    it('should return', () => {
-      component.startDemoErrors();
-      jest.runAllTimers();
-      expect(component.progressError).toBe(undefined);
-    });
-  });
-});

package/projects/tgo-canopy-ui/components/file-upload-demo/file-upload-demo.component.stories.ts

@@ -1,28 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
-import { FileUploadComponentModule } from '../file-upload/file-upload.component.module';
-import { FileUploadDemoComponent } from './file-upload-demo.component';
-import { transformTheme } from '../../utils/transform-theme';
-
-export default {
-  title: 'File upload/Demo',
-  component: FileUploadDemoComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [FileUploadComponentModule, FormsModule, ReactiveFormsModule],
-      declarations: [FileUploadDemoComponent],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});

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

@@ -1,74 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-file-upload-demo',
-  templateUrl: './file-upload-demo.component.html',
-  styleUrls: ['./file-upload-demo.component.scss']
-})
-export class FileUploadDemoComponent implements OnInit {
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  constructor(private fb: UntypedFormBuilder) { }
-
-  /**
-   * @ignore
-   */
-  uploadDemoForm = this.fb.group({
-    upload: [''],
-    uploadErrors: [''],
-  });
-
-  progress: number;
-  progressError: number;
-  errors: string[] | undefined;
-  uploadValue: File;
-  uploadValueErrors: File;
-
-  ngOnInit(): void {
-    this.uploadDemoForm.get('upload')?.valueChanges.subscribe((value: File) => {
-      this.uploadValue = value;
-    });
-    this.uploadDemoForm.get('uploadErrors')?.valueChanges.subscribe((value: File) => {
-      this.uploadValueErrors = value;
-    });
-  }
-
-  startDemo(file?: File) {
-    if (!file) {
-      return;
-    }
-    this.progress = 0;
-    if (this.progress === 0) {
-      this.progress= 1;
-      const id = setInterval(() => {
-        if (this.progress>= 100) {
-          clearInterval(id);
-          this.progress = 100;
-        } else {
-          this.progress++;
-        }
-      }, 16);
-    }
-  }
-
-  startDemoErrors(file?: File) {
-    if (!file) {
-      return;
-    }
-    this.progressError = 0;
-    if (this.progressError === 0) {
-      this.progressError = 1;
-      const id = setInterval(() => {
-        if (this.progressError >= 100) {
-          clearInterval(id);
-          this.progressError = 100;
-          this.errors = ['Unsupported file', 'File size exceeds the maximum limit'];
-        } else {
-          this.progressError++;
-        }
-      }, 16);
-    }
-  }
-}

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

@@ -1,41 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Meta, Story, moduleMetadata } from '@storybook/angular';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { CheckboxComponentModule } from '../checkbox/checkbox.component.module';
-import { DropdownComponentModule } from '../dropdown/dropdown.component.module';
-import { FieldComponentModule } from '../field/field.component.module';
-import { RadioButtonComponentModule } from '../radio-button/radio-button.component.module';
-import { FormDemoComponent } from './form-demo.component';
-import { MatRadioModule } from '@angular/material/radio';
-import { AutocompleteComponentModule } from '../autocomplete/autocomplete.component.module';
-import { SliderComponentModule } from '../slider/slider.component.module';
-import { PhoneInputComponentModule } from '../phone-input/phone-input.component.module';
-
-export default {
-  title: 'Forms/Demo',
-  component: FormDemoComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        MatRadioModule,
-        ReactiveFormsModule,
-        FormsModule,
-        ButtonComponentModule,
-        CheckboxComponentModule,
-        DropdownComponentModule,
-        FieldComponentModule,
-        RadioButtonComponentModule,
-        AutocompleteComponentModule,
-        SliderComponentModule,
-        PhoneInputComponentModule,
-      ],
-      declarations: [FormDemoComponent],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = args => ({
-  props: args,
-});
-
-export const Default = Template.bind({});

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

@@ -1,210 +0,0 @@
-<form [formGroup]="formDemo">
-  <h2>UI-Field</h2>
-  <div>
-    <div class="field">
-      <caption><strong>Value text: </strong>{{ formDemo.controls['text'].value }}</caption>
-      <ui-field
-        label="Input text label"
-        formControlName="text"
-        placeholder="Input text"
-        type="text"
-      ></ui-field>
-    </div>
-    <div class="field">
-      <caption><strong>Value password: </strong>{{ formDemo.controls['password'].value }}</caption>
-      <ui-field
-        label="Input password label"
-        formControlName="password"
-        placeholder="Input password"
-        type="password"
-      ></ui-field>
-    </div>
-    <div class="field">
-      <caption><strong>Value search: </strong>{{ formDemo.controls['search'].value }}</caption>
-      <ui-field
-        label="Input search label"
-        formControlName="search"
-        placeholder="Input search"
-        type="search"
-      ></ui-field>
-    </div>
-    <div class="field">
-      <caption><strong>Value email: </strong>{{ formDemo.controls['email'].value }}</caption>
-      <ui-field
-        label="Input email label"
-        formControlName="email"
-        placeholder="Input email"
-        type="email"
-      ></ui-field>
-    </div>
-    <div class="field">
-      <caption><strong>Value number: </strong>{{ formDemo.controls['numberField'].value }}</caption>
-      <ui-field
-        label="Input number label"
-        formControlName="numberField"
-        placeholder="Input number"
-        type="number"
-      ></ui-field>
-    </div>
-    <div class="field">
-      <caption><strong>Value tel: </strong>{{ formDemo.controls['tel'].value }}</caption>
-      <ui-field
-        label="Input tel label"
-        formControlName="tel"
-        placeholder="Input tel"
-        type="tel"
-      ></ui-field>
-    </div>
-  </div>
-  <h2>UI-Dropdown</h2>
-  <div>
-    <div class="field">
-      <caption><strong>Value dropdown: </strong>{{ formDemo.controls['dropdown'].value }}</caption>
-      <ui-dropdown
-        label="Dropdown label"
-        formControlName="dropdown"
-        placeholder="Dropdown"
-        [valueList]="dropDownList"
-      ></ui-dropdown>
-    </div>
-    <div>
-      <caption><strong>Value dropdownMultiple: </strong>{{ formDemo.controls['dropdownMultiple'].value }}</caption>
-      <ui-dropdown
-        label="Dropdown multiple label"
-        formControlName="dropdownMultiple"
-        placeholder="Dropdown multiple"
-        [valueList]="dropDownList"
-        [allowMultipleSelection]="true"
-      ></ui-dropdown>
-    </div>
-  </div>
-  <h2>UI-Checkbox</h2>
-  <div class="checkbox-list">
-    <div class="field checkbox">
-      <caption><strong>Value checkbox: </strong>{{ formDemo.controls['checkField'].value }}</caption>
-      <ui-checkbox
-        formControlName="checkField"
-        label="Checkbox simple"
-        [checked]="false"
-      ></ui-checkbox>
-    </div>
-    <div class="field checkbox">
-      <caption><strong>Value checkbox indeterminate: </strong>{{ formDemo.controls['checkFieldIndeterminate'].value }}</caption>
-      <ui-checkbox
-        formControlName="checkFieldIndeterminate"
-        label="Checkbox indeterminate"
-        [indeterminate]="true"
-        [checked]="true"
-      ></ui-checkbox>
-    </div>
-    <div class="field checkbox">
-      <caption><strong>Value checkbox multi: </strong>{{ formDemo.controls['checkFieldMulti'].value }}</caption>
-      <ui-checkbox
-        [multiple]="true"
-        formControlName="checkFieldMulti"
-        label="Checkbox with multiple style"
-        [checked]="true"
-      ></ui-checkbox>
-    </div>
-  </div>
-  <h2>UI-Radio-button</h2>
-  <div class="checkbox-list radio">
-    <caption><strong>Value radio buttons simple: </strong>{{ formDemo.controls['radio'].value }}</caption>
-    <mat-radio-group
-      formControlName="radio">
-      <div class="field radio" *ngFor="let radio of radioButtonValues">
-        <ui-radio-button
-          [label]="radio.label"
-          [value]="radio.value"
-          [name]="radio.name"
-          [selected]="radio.checked"
-          (changeRadio)="onChangeRadio($event)"
-        ></ui-radio-button>
-      </div>
-    </mat-radio-group>
-  </div>
-  <div class="checkbox-list radio">
-    <caption><strong>Value radio buttons multiple: </strong>{{ formDemo.controls['radioMulti'].value }}</caption>
-    <mat-radio-group
-      formControlName="radioMulti">
-      <div class="field radio" *ngFor="let radio of radioButtonMultiValues">
-        <ui-radio-button
-          [label]="radio.label"
-          [value]="radio.value"
-          [multiple]="true"
-          [name]="radio.name"
-          [selected]="radio.checked"
-          [allowUnselect]="true"
-          (changeRadio)="onChangeRadioMulti($event)"
-        ></ui-radio-button>
-      </div>
-    </mat-radio-group>
-  </div>
-  <h2>Input Autocomplete (Not form control):</h2>
-  <div>
-    <div class="field">
-      <caption><strong>Primitive Autocomplete Single: </strong>{{ singleAutocompleteValuePrimitive }}</caption>
-      <div>
-        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [type]="'single'" [itemValue]="singleAutocompleteValuePrimitive" (selectionChange)="singleAutocompleteValuePrimitive = $event" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST' [suggestionsList]='MOCK_SUGGESTIONS'></ui-autocomplete>
-      </div>
-    </div>
-
-    <div class="field">
-      <caption><strong>Objects Autocomplete Single: </strong>{{ singleAutocompleteValueObject | json }}</caption>
-      <div>
-        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [type]="'single'" [textField]="'name'" [valueField]="'id'" [itemValue]="singleAutocompleteValueObject" (selectionChange)="singleAutocompleteValueObject = $event" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
-      </div>
-    </div>
-  </div>
-
-  <h2>Input Autocomplete (Form control):</h2>
-  <div>
-    <div class="field">
-      <caption><strong>Value Autocomplete Predefined single: </strong>{{ formDemo.controls['inputAutocompleteSinglePredefined'].value }}</caption>
-      <div>
-        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [type]="'single'" [itemValue]="MOCK_ITEMS_LIST[0]" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST' [suggestionsList]='MOCK_SUGGESTIONS' [formControlName]="'inputAutocompleteSinglePredefined'"></ui-autocomplete>
-      </div>
-    </div>
-
-    <div class="field">
-      <caption><strong>Value Autocomplete multiple: </strong><div *ngFor="let item of multiAutocompleteValue">{{item | json}}</div></caption>
-      <div>
-        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" label="test" (selectionChange)="multiAutocompleteValue = $event" [itemValue]="multiAutocompleteValue" [textField]="'name'" [valueField]="'id'" [type]="'multi'" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
-      </div>
-    </div>
-
-    <div class="field">
-      <caption><strong>Value Autocomplete Predefined Multi: </strong><div *ngFor="let item of formDemo.controls['inputAutocompleteMultiPredefined'].value">{{item | json}}</div></caption>
-      <div>
-        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [textField]="'name'" [valueField]="'id'" placeholder="test2" [type]="'multi'" [formControlName]="'inputAutocompleteMultiPredefined'" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
-      </div>
-    </div>
-
-    <div class="field">
-      <caption><strong>Value Autocomplete Predefined Large: </strong><div *ngFor="let item of formDemo.controls['multiLargeAutocompleteValue'].value">{{item | json}}</div></caption>
-      <div>
-        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [textField]="'name'" [valueField]="'id'" [type]="'large'" [formControlName]="'multiLargeAutocompleteValue'" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
-      </div>
-    </div>
-  </div>
-
-  <h2>Slider:</h2>
-  <div>
-    <div class="field">
-      <caption><strong>Value Slider: </strong>{{ formDemo.controls['slider'].value | json}}</caption>
-      <div>
-        <ui-slider [formControlName]="'slider'"></ui-slider>
-      </div>
-    </div>
-  </div>
-
-  <h2>Phone Number:</h2>
-  <div>
-    <div class="field">
-      <caption><strong>Value Phone Number: </strong>{{ formDemo.controls['phoneNumber'].value}}</caption>
-      <div>
-        <ui-phone-input [formControlName]="'phoneNumber'" [countryList]="countryList"></ui-phone-input>
-      </div>
-    </div>
-  </div>
-</form>

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

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatRadioModule } from '@angular/material/radio';
-import { ButtonComponentModule } from '../../components/button/button.component.module';
-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 { FormDemoComponent } from './form-demo.component';
-import { AutocompleteComponentModule } from '../autocomplete/autocomplete.component.module';
-import { SliderComponentModule } from '../slider/slider.component.module';
-import { PhoneInputComponentModule } from '../phone-input/phone-input.component.module';
-
-@NgModule({
-  declarations: [FormDemoComponent],
-  imports: [
-    CommonModule,
-    FieldComponentModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ButtonComponentModule,
-    CheckboxComponentModule,
-    DropdownComponentModule,
-    RadioButtonComponentModule,
-    MatRadioModule,
-    AutocompleteComponentModule,
-    SliderComponentModule,
-    PhoneInputComponentModule,
-  ],
-  exports: [FormDemoComponent],
-  providers: [],
-})
-export class FormDemoComponentModule {}

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

@@ -1,59 +0,0 @@
-:host {
-  display:flex;
-  justify-content: center;
-  flex-flow: column;
-  align-items: center;
-
-  caption { margin-bottom: 15px;}
-
-  form div.checkbox-list,
-  mat-radio-group {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    flex-direction: row;
-    flex-wrap: wrap;
-    column-gap: 20px;
-    row-gap: 20px;
-    margin-bottom: 30px;
-
-    &.radio {
-      margin-bottom: 0;
-    }
-
-    .field.checkbox {
-      display: flex;
-      align-items: center;
-      width: 310px;
-      flex-flow: column;
-      align-items: flex-start;
-    }
-
-    .field.radio {
-      display: flex;
-      align-items: center;
-      width: 30%;
-
-      ui-radio-button {
-        width: 100%;
-      }
-    }
-  }
-
-  form {
-    width: 700px;
-  }
-
-  h2 {
-    margin-bottom: 20px;
-  }
-
-  .form-value {
-    font-size: 12px;
-    margin-bottom: 20px;
-
-    p { 
-      margin: 5px 0;
-    }
-  }
-}