@testgorilla/tgo-ui 2.10.999 → 2.11.1

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

@@ -0,0 +1,32 @@
+<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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,23 @@
+: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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,210 @@
+<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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,59 @@
+: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;
+    }
+  }
+}