@one-paragon/angular-utilities 0.1.21 → 0.1.23

package/src/table-builder/pipes/format-filter-type.pipe.ts

@@ -1,12 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { FilterType } from '../enums/filterTypes';
-
-@Pipe({name: 'formatFilterType'})
-export class FormatFilterTypePipe implements PipeTransform {
-  transform(filterType: FilterType, value: any){
-    if(filterType === FilterType.IsNull){
-      return value ? filterType : 'Is Not Blank'
-    }
-    return filterType;
-  }
-}

package/src/table-builder/pipes/format-filter-value.pipe.ts

@@ -1,40 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { TableStore } from '../classes/table-store';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { FieldType } from '../interfaces/report-def';
-import { DatePipe } from '@angular/common';
-import { FilterType } from '../enums/filterTypes';
-import { spaceCase } from '../../utilities/pipes/space-case.pipes';
-
-
-@Pipe({name: 'formatFilterValue'})
-export class FormatFilterValuePipe implements PipeTransform {
-  constructor( public tableState: TableStore , private datePipe: DatePipe) {
-  }
-  transform(value: any, key: string, filterType: FilterType): Observable<string> {
-    return this.tableState.getMetaData$(key).pipe(
-      map( md => {
-        if(filterType === FilterType.IsNull) {
-          return '';
-        }
-        if(value && (filterType === FilterType.In )){
-          if(md.fieldType === FieldType.Enum) {
-            return value.map( (v: any) => spaceCase(md.additional!.enumMap![v])).join(', ') ?? value;
-          }
-          return value.join(', ') ?? value;
-        }
-        if(filterType === FilterType.NumberBetween){
-          if(md.fieldType === FieldType.Date){
-            value = this.datePipe.transform(value.Start, 'MM/dd/yy')+ ' - ' + this.datePipe.transform(value.End, 'MM/dd/yy');
-          }else{
-            value = value.Start + ' - ' + value.End;
-          }
-        } else if(md.fieldType === FieldType.Date){
-          value = this.datePipe.transform(value, 'MM/dd/yy');
-        }
-        return value
-      })
-    );
-  }
-}

package/src/table-builder/pipes/key-display.ts

@@ -1,16 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { TableStore } from '../classes/table-store';
-import { spaceCase } from '../../utilities/pipes/space-case.pipes';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-@Pipe({name: 'keyDisplay'})
-export class KeyDisplayPipe implements PipeTransform {
-  constructor( public tableState: TableStore) {
-  }
-  transform(key: string): Observable<string> {
-    return this.tableState.getMetaData$(key).pipe(
-      map( metaData => metaData.displayName || spaceCase(key))
-    );
-  }
-}

package/src/table-builder/services/export-to-csv.service.ts

@@ -1,92 +0,0 @@
-import { DatePipe } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { first, map  } from 'rxjs/operators';
-import { combineLatest} from 'rxjs';
-import { orderMetaData, TableStore } from '../classes/table-store';
-import { TableBuilderConfig, TableBuilderConfigToken } from '../classes/TableBuilderConfig';
-import { downloadData } from '../functions/download-data';
-import { ArrayAdditional, ArrayStyle, FieldType, MetaData } from '../interfaces/report-def';
-import { TableState } from '../classes/TableState';
-import { isPipe } from './transform-creator';
-import { get } from 'lodash';
-
-@Injectable()
-export class ExportToCsvService<T> {
-  constructor(
-    public state: TableStore,
-    @Inject(TableBuilderConfigToken) private config: TableBuilderConfig,
-    private datePipe: DatePipe,
-  ){}
-
-  exportToCsv = (data: Observable<T[]>) => {
-    const exportableFields$ = this.state.state$.pipe(
-      map(mapExportableFields)
-    );
-
-    combineLatest([data,exportableFields$]).pipe(
-      first(),
-      map(([data,fields]) => this.csvData(data,fields)),
-    ).subscribe(csv => downloadData(csv,'export.csv','text/csv') );
-  }
-
-  csvData = (data:Array<T>, metaData: MetaData<T>[]) => {
-    const res = data.map(row => metaData.map(meta => this.metaToField(meta, row)).join(','));
-    res.unshift(metaData.map(meta => meta.displayName || meta.key).join(','));
-    return res.join('\n');
-  }
-
-  metaToField = (meta: MetaData<T>, row: T) => {
-    let val: any = get( row,meta.key);
-    if (val == null && !meta.transform) return val
-    if(meta.transform && meta.fieldType !== FieldType.Expression){
-      const transform = meta.transform as any;
-      return  isPipe(transform) ? transform.transform(val) : transform(val);
-    }
-    switch (meta.fieldType) {
-      case FieldType.Date:
-        const dateFormat = meta.additional?.export?.dateFormat || this.config?.export?.dateFormat || meta.additional?.dateFormat;
-        val = this.transform(val, dateFormat);
-        break;
-      case FieldType.String:
-        const prepend: string = meta.additional?.export?.prepend || this.config?.export?.prepend || '';
-        val = prepend + val;
-        break;
-      case FieldType.Array:
-        const additional = meta.additional as ArrayAdditional;
-        val = (val as Array<string>).slice(0,additional.limit).join(additional.arrayStyle === ArrayStyle.NewLine ? '\n' : ', ');
-        break;
-      case FieldType.Expression:
-        val = (meta.transform as any)(row);
-        break;
-    }
-    if (typeof val === 'string' && (val.includes(',') || val.includes('"') || val.includes('\n'))) {
-      val = val.replaceAll('"', '""');
-      val = '"' + val + '"';
-    }
-    return val;
-  }
-
-  private transform(val: any, dateFormat: any) {
-    if (this.config.transformers && this.config.transformers[FieldType.Date]) {
-      return this.config.transformers[FieldType.Date]!(val);
-    }
-    return this.datePipe.transform(val, dateFormat);
-  }
-}
-
-export const removeFromMetaData = (state: TableState, keysToRemove: string[]) =>
-
-  orderMetaData(state)
-  .filter( meta => !keysToRemove.includes(meta.key));
-
-
-export const nonExportableFields = (state: TableState) => Object.values( state.metaData)
-  .filter(md => md.noExport )
-  .map( md => md.key );
-
-export const mapExportableFields = (state: TableState) => {
-  const fieldsToRemove = nonExportableFields(state)
-    .concat(state.hiddenKeys);
-   return removeFromMetaData(state, fieldsToRemove);
-}

package/src/table-builder/services/link-creator.service.ts

@@ -1,48 +0,0 @@
-import { get } from "lodash";
-import { MetaData } from "../interfaces/report-def";
-
-export function createLinkCreator<T>(metaData: MetaData<T>){
-  const target = metaData.additional?.link?.target || metaData.additional?.target || '_blank';
-  const useRouterLink = metaData.additional?.link?.useRouterLink || metaData.additional?.useRouterLink;
-  const hasRoute = !!metaData.additional?.link?.interpolatedRoute;
-  const routerLinkOptions = useRouterLink ? {
-    queryParams: (element) => metaData.additional!.link!.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
-      map[key] = parseInterpolated(value, element);
-      return map;
-    }, {}) ?? null,
-    fragment: metaData.additional!.link?.routerLinkOptions?.fragment,
-    preserveFragment: metaData.additional!.link!.routerLinkOptions?.preserveFragment ?? false,
-    queryParamsHandling: metaData.additional!.link!.routerLinkOptions?.queryParamsHandling ?? '',
-  }
-  : undefined;
-
-
-
-  if (hasRoute) {
-    return ({
-      link: (element: T) => parseInterpolated(metaData.additional!.link!.interpolatedRoute!, element),
-      target,
-      useRouterLink,
-      routerLinkOptions,
-    });
-  } else {
-    const slashIfNeeded = !metaData.additional?.link?.base?.endsWith('/') ? '/' : '';
-    const base = metaData.additional!.link?.base || metaData.additional!.base;
-    const getKey = key(metaData);
-    return ({
-      link: (element: T) => `${base}${slashIfNeeded}${getKey(element)}`,
-      target,
-      useRouterLink,
-      routerLinkOptions,
-    });
-  }
-}
-
-const key = (metaData : MetaData) => metaData.additional!.link?.urlKey ? 
-  (element:any) => get(element, (metaData.additional!.link!.urlKey as string)) :
-    metaData.additional!.urlKey ?
-  (element:any) => get(element, (metaData.additional!.urlKey as string)) :
-  (element:any) => get(element, metaData.key);
-
-const parseInterpolated = ( interpolatedString: string, element: any ) =>
-  interpolatedString.replace(/{([^}]+)}/g, (_, key) => get(element ,key));

package/src/table-builder/services/table-template-service.ts

@@ -1,44 +0,0 @@
-import { ComponentFactoryResolver, Injector } from "@angular/core";
-import { Injectable, TemplateRef } from "@angular/core";
-import { TableStore } from "../classes/table-store";
-import { InitializationComponent } from "../components/initialization-component/initialization-component";
-import { FieldType, MetaData } from "../interfaces/report-def";
-
-@Injectable({providedIn: 'root'})
-export class TableTemplateService {
-  instance!: InitializationComponent;
-  templates;
-
-  initTemplates() {
-    this.templates = { };
-    this.templates[FieldType.Array] = this.instance.arrayTemplate;
-    this.templates[FieldType.Boolean] = this.instance.defaultWithIcon;
-    this.templates[FieldType.Currency] = this.instance.defaultTemplate;
-    this.templates[FieldType.Date] = this.instance.defaultTemplate;
-    this.templates[FieldType.Expression] = this.instance.defaultTemplate;
-    this.templates[FieldType.ImageUrl] = this.instance.imageUrlTemplate;
-    this.templates[FieldType.Link] = this.instance.linkTemplate;
-    this.templates[FieldType.Number] = this.instance.defaultTemplate;
-    this.templates[FieldType.PhoneNumber] = this.instance.defaultTemplate;
-    this.templates[FieldType.String] = this.instance.defaultTemplate;
-    this.templates[FieldType.Unknown] = this.instance.defaultTemplate;
-    this.templates[FieldType.Enum] = this.instance.defaultTemplate;
-  }
-  getTemplate(metaData: MetaData) : TemplateRef<any> {
-
-    let tmp =  this.templates[metaData.fieldType];
-    if(metaData.useIcon) {
-      if(tmp === this.instance.defaultTemplate) {
-        tmp = this.instance.defaultWithIcon;
-      }
-    }
-    return tmp;
-  }
-
-  constructor(resolver: ComponentFactoryResolver, i: Injector,  ) {
-        const factory = resolver.resolveComponentFactory(InitializationComponent);
-        const c = factory.create(i);
-        this.instance = c.instance;
-        this.initTemplates();
-  }
-}

package/src/table-builder/services/transform-creator.ts

@@ -1,61 +0,0 @@
-import { PipeTransform, Inject, Injectable } from '@angular/core';
-import { FieldType, MetaData } from '../interfaces/report-def';
-import { DatePipe, CurrencyPipe } from '@angular/common';
-import { PhoneNumberPipe } from '../../utilities/pipes/phone.pipe';
-import { TableBuilderConfigToken, TableBuilderConfig } from '../classes/TableBuilderConfig';
-import { SpaceCasePipe } from '../../utilities';
-import { get } from 'lodash';
-export function isPipe(o : any ): o is PipeTransform {
-  return typeof ((o as PipeTransform).transform ) === 'function';
-}
-
-@Injectable({
-  providedIn:  'root',
-})
-export class TransformCreator {
-  constructor(
-    private datePipe: DatePipe,
-    private currencyPipe: CurrencyPipe,
-    private phonePipe: PhoneNumberPipe,
-    private casePipe: SpaceCasePipe,
-    @Inject(TableBuilderConfigToken) private config: TableBuilderConfig,
-  ) {}
-  createTransformer(metaData: MetaData): ((value: any, ...args: any[]) => any)  {
-    const defaultFunc = (value: any) => get( value, metaData.key);
-    if(metaData.transform) {
-      if(isPipe(metaData.transform)){
-        return (value: any) =>  (metaData!.transform as PipeTransform).transform(defaultFunc(value));
-      }
-      return metaData.fieldType === FieldType.Expression ? metaData.transform : (value: any) => (metaData.transform as (a:any,b:any)=>any)(defaultFunc(value),value);
-    }
-    if (this.config.transformers && this.config.transformers[metaData.fieldType]) {
-      var tranformer =  this.config.transformers![metaData.fieldType]!;
-      return (value: any) => tranformer(defaultFunc(value));
-    }
-    switch(metaData.fieldType) {
-      case FieldType.Date:
-        const dateFormat = metaData.additional?.dateFormat ?? this.config.defaultSettings?.dateFormat ?? 'shortDate';
-        return (value: any) => this.datePipe.transform(defaultFunc(value), dateFormat);
-      case FieldType.Currency:
-          return (value: any) =>  this.currencyPipe.transform(defaultFunc(value));
-      case FieldType.PhoneNumber:
-        return  (value: any) =>  this.phonePipe.transform(defaultFunc(value));
-      case FieldType.Enum:
-        return (value: any) =>  this.casePipe.transform(metaData.additional?.enumMap![defaultFunc(value)] as string) ;
-      case FieldType.Boolean:
-        let forTrue = 'check'
-        let forFalse = '';
-        if(metaData.additional?.boolean?.forTrue) {
-          forTrue = metaData?.additional.boolean.forTrue.icon;
-        }
-        if(metaData.additional?.boolean?.showForFalse === true) {
-          forFalse = 'clear';
-        } else if (metaData.additional?.boolean?.showForFalse?.icon) {
-          forFalse = metaData.additional?.boolean?.showForFalse?.icon;
-        }
-        return (value: any) => defaultFunc(value) ? forTrue : forFalse ;
-    }
-      return defaultFunc;
-  }
-
-}

package/src/table-builder/specs/table-custom-filters.spec.ts

@@ -1,262 +0,0 @@
-// import { HarnessLoader } from "@angular/cdk/testing";
-// import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
-// import { Component, DebugElement, Type } from "@angular/core";
-// import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-// import { MatButtonToggleModule } from "@angular/material/button-toggle";
-// import { MatButtonToggleHarness } from "@angular/material/button-toggle/testing";
-// import { MatCheckbox, MatCheckboxModule } from "@angular/material/checkbox";
-// import { MatLegacyRadioModule as MatRadioModule } from "@angular/material/legacy-radio";
-// import { MatLegacySelectModule as MatSelectModule } from "@angular/material/legacy-select";
-// import { MatSlideToggleModule } from "@angular/material/slide-toggle";
-// import { MatSlideToggleHarness } from "@angular/material/slide-toggle/testing";
-// import { MatLegacyRadioButtonHarness as MatRadioButtonHarness } from '@angular/material/legacy-radio/testing';
-// import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
-// import { MatLegacySelectHarness as MatSelectHarness,  } from "@angular/material/legacy-select/testing";
-// import { MatLegacyOptionHarness as MatOptionHarness } from "@angular/material/legacy-core/testing";
-// import { By } from "@angular/platform-browser";
-// import { firstValueFrom, lastValueFrom, Observable, skip, Subject, take, takeUntil } from "rxjs";
-// import { MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleTbFilterDirective, TableCustomFilterDirective } from "../directives/tb-filter.directive";
-// import { NoopAnimationsModule } from "@angular/platform-browser/animations";
-
-// abstract class ToggleTestComponent {
-
-// }
-
-
-// const takeItem = <T>(src:Observable<T>, itemNumber: number, until: Observable<any>) : Promise<T | null> => {
-//   return firstValueFrom(src.pipe( skip(itemNumber - 1),takeUntil(until) ), {defaultValue: null});
-// }
-
-// @Component({
-//   template: `
-//     <mat-slide-toggle tbCustomFilter   > Slide me! </mat-slide-toggle>
-//     <mat-checkbox tbCustomFilter   > Check me! </mat-checkbox>
-//     <mat-radio-button tbCustomFilter   > Click me! </mat-radio-button>
-//     <mat-select>
-//       <mat-option tbCustomFilter   > Click me! </mat-option>
-//       <mat-option [value]='"other"'   >Other</mat-option>
-//     </mat-select>
-//     <mat-button-toggle tbCustomFilter   > Click me! </mat-button-toggle>
-//     <div class='optionGroup' tbCustomFilterGroup >
-//       <mat-checkbox tbCustomFilter class="child-1-checkbox"  >1</mat-checkbox>
-//     </div>
-//   `
-// }) export class SingleToggleTestComponent extends ToggleTestComponent {
-
-// }
-
-
-// let fixture: ComponentFixture<ToggleTestComponent>;
-// let loader: HarnessLoader;
-
-
-// const setupTest = (): void => {
-
-
-//   TestBed.configureTestingModule({
-//       imports: [
-//         NoopAnimationsModule,
-//         MatSlideToggleModule,
-//         MatCheckboxModule,
-//         MatRadioModule,
-//         MatButtonToggleModule,
-//         MatSelectModule
-//       ],
-//       declarations: [
-//         TableCustomFilterDirective,
-//         SingleToggleTestComponent,
-//         MatSlideToggleTbFilterDirective,
-//         MatButtonToggleFilterDirective,
-//         MatOptionTbFilterDirective,
-//         MatRadioButtonTbFilterDirective,
-//         MatCheckboxTbFilterDirective,
-//         TablebFilterGroupDirective,
-
-//     ],
-//     providers: [  ]
-//     });
-//     fixture = TestBed.createComponent(SingleToggleTestComponent);
-//     fixture.detectChanges();
-//     loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
-// };
-
-
-// describe("Custom Table Filters", () => {
-
-//   describe("mat slide toggle filter",  () => {
-//     let toggleHarnesses: MatSlideToggleHarness[];
-//     let dElement: DebugElement;
-//     beforeEach(async () => {
-//       setupTest();
-//       dElement = fixture.debugElement.query(By.directive(MatSlideToggleTbFilterDirective) );
-//       toggleHarnesses = await loader.getAllHarnesses(MatSlideToggleHarness);
-//     } );
-
-//     it('should create', () : void => {
-//       expect(dElement).toBeTruthy();
-//     });
-
-//     it('should emit on toggle', async () => {
-//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
-//       const dunzo = new Subject();
-//       var val = takeItem(filterDirective.filter$, 2, dunzo);
-//       await toggleHarnesses[0].toggle();
-//       dunzo.next(null);
-//       var i = await val;
-//       expect(i).toBeTruthy();
-//       expect(i?.active).toBeTrue();
-//       expect(filterDirective.active).toBeTrue();
-//     })
-//   })
-
-//   describe("check box filter",  () => {
-//     let checkBoxHarnesses: MatCheckboxHarness;
-//     let dElement: DebugElement;
-//     beforeEach( async () => {
-//      setupTest();
-//       dElement = fixture.debugElement.query(By.directive(MatCheckboxTbFilterDirective) );
-//       checkBoxHarnesses = await loader.getHarness(MatCheckboxHarness);
-
-//     });
-
-//     it('should create', async () : Promise<void> => {
-//       expect(dElement).not.toBeNull();
-//     });
-
-//     it('should emit on check', async () => {
-//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
-//       var val = firstValueFrom(filterDirective.filter$);
-//       await checkBoxHarnesses.check();
-//       var i = await val;
-//       expect(i).toBeTruthy();
-//       expect(filterDirective.active).toBeTrue();
-//     });
-
-
-//   });
-
-
-//   describe("radio button filter",  () => {
-//     let radioHarnesses: MatRadioButtonHarness;
-//     let dElement: DebugElement;
-//     beforeEach( async () => {
-//      setupTest();
-//       dElement = fixture.debugElement.query(By.directive(MatRadioButtonTbFilterDirective) );
-//       radioHarnesses = await loader.getHarness(MatRadioButtonHarness);
-
-//     });
-
-//     it('should create', async () : Promise<void> => {
-//       expect(dElement).not.toBeNull();
-//     });
-
-//     it('should emit on check', async () => {
-//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
-//       var val = firstValueFrom(filterDirective.filter$);
-//       await radioHarnesses.check();
-//       var i = await val;
-//       expect(i).toBeTruthy();
-//       expect(filterDirective.active).toBeTrue();
-//     });
-//   });
-
-//   describe("button toggle  filter",  () => {
-//     let buttonToggleHarness: MatButtonToggleHarness;
-//     let dElement: DebugElement;
-//     beforeEach( async () => {
-//      setupTest();
-//       dElement = fixture.debugElement.query(By.directive(MatButtonToggleFilterDirective) );
-//       buttonToggleHarness = await loader.getHarness(MatButtonToggleHarness);
-
-//     });
-
-//     it('should create',  () : void => {
-//       expect(dElement).not.toBeNull();
-//     });
-
-//     it('should emit on toggle', async () => {
-//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
-//       var val = firstValueFrom(filterDirective.filter$);
-//       await buttonToggleHarness.check();
-//       var i = await val;
-//       expect(i).toBeTruthy();
-//       expect(filterDirective.active).toBeTrue();
-//     });
-//   });
-
-//   describe("option filter",  () => {
-//     let optionHarness: MatOptionHarness;
-//     let optionHarness2: MatOptionHarness;
-//     let selectHarness: MatSelectHarness;
-//     let dElement: DebugElement;
-//     beforeEach(async () => {
-//       setupTest();
-//       selectHarness = await loader.getHarness(MatSelectHarness);
-//       await selectHarness.open();
-//       var h = await loader.getAllHarnesses(MatOptionHarness);
-//       optionHarness = h[0];
-//       optionHarness2 = h[1];
-//       dElement = fixture.debugElement.query(By.directive(MatOptionTbFilterDirective) );
-//     });
-
-//     it('should create', async () : Promise<void> => {
-//       expect(dElement).toBeTruthy();
-//     });
-
-//     it('should emit on select', async () => {
-//       let doneSubject = new Subject<void>();
-
-//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
-
-//       let val = takeItem(filterDirective.filter$, 2, doneSubject);
-//       await optionHarness.click();
-//       doneSubject.next();
-//       let i = await val;
-
-//       expect(i).toBeTruthy();
-//       expect(i?.active).toBeTrue();
-//       expect(filterDirective.active).toBeTrue();
-
-
-//       val = takeItem(filterDirective.filter$, 2, doneSubject);
-//       await optionHarness2.click();
-
-//       i = await val;
-//       expect(i).toBeTruthy();
-//       expect(i?.active).toBeFalse();
-//       expect(filterDirective.active).toBeFalse();
-
-//     });
-//   });
-
-//   describe("group filter",  () => {
-//     let checkboxHarness: MatCheckboxHarness;
-//     let dElement: DebugElement;
-//     beforeEach(async () => {
-//       setupTest();
-
-//       dElement = fixture.debugElement.query(By.directive(TablebFilterGroupDirective) );
-//       const childLoader = await loader.getChildLoader('.optionGroup');
-//       checkboxHarness = await childLoader.getHarness(MatCheckboxHarness);
-//     });
-
-//     it('should create', () : void => {
-//       expect(dElement).toBeTruthy();
-//     });
-
-//     it('should emit on child select', async () => {
-
-//       var directive = dElement.injector.get(TablebFilterGroupDirective);
-//       var doneSubject = new Subject<void>();
-//       var resultPromise = takeItem(directive.filter$, 2, doneSubject);
-
-//       await checkboxHarness.check();
-//       doneSubject.next();
-
-//       var result = await resultPromise;
-//       expect(result).toBeTruthy();
-
-//     });
-//   });
-
-// });

package/src/table-builder/styles/collapser.styles.scss

@@ -1,21 +0,0 @@
-.collapse-icon{
-  font-size: 16px;
-  height: 16px;
-  padding-bottom: .2rem;
-  color:#3f51b5;
-  &.header{
-    align-self: flex-end;
-  }
-  &.footer{
-    align-self: flex-start;
-  }
-}
-
-
-.collapse-icon:hover{
-  cursor: pointer;
-}
-
-.hide{
-  display: none;
-}