@one-paragon/angular-utilities 2.1.5 → 2.1.7

package/src/table-builder/components/table-container/table-container.helpers/data-state.helpers.ts

@@ -1,112 +0,0 @@
-import { Observable, Timestamp, combineLatest, map, scan, timestamp } from "rxjs";
-import { SortState } from "./sort-state.helpers";
-import { FilterPredicateState } from "./filter-state.helpers";
-import { filterData, getFactory, sortData, tbNoShowSymbol } from "../../../functions/sort-data-function";
-import { defaultShareReplay } from "../../../../rxjs/defaultShareReplay";
-import { FieldType, MetaData } from "../../../interfaces/report-def";
-import { set } from "lodash";
-
-export const _sortAndFilterData = <T>(data: Observable<T[]>, sortState: Observable<SortState>, filterState: Observable<FilterPredicateState<T>>) => combineLatest([
-  data.pipe(timestamp()),
-  sortState.pipe(timestamp()),
-  filterState.pipe(timestamp())
-]).pipe(
-  scan((mappedData, [data, sort, f], index)=> {
-    return mapDataSortsAndFilters( data, f, sort, index === 0, mappedData);
-    }, [] as T[])
-  ).pipe(
-    map((resultData) => resultData.filter(item => !item[tbNoShowSymbol])),
-    defaultShareReplay()
-  );
-
-const mapDataSortsAndFilters = <T>(allData: Timestamp<T[]>, filters: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>, firstRun: boolean, filteredData: T[]) => {
-  const fresh = firstRun || (allData.timestamp > sort.timestamp && allData.timestamp > filters.timestamp);
-  const sortChanged = !fresh && sort.timestamp > filters.timestamp;
-  const filterRemoved = !fresh && !sortChanged && !filters.value.onlyAddedFilters;
-  const runAllOnAllData = fresh || filterRemoved;
-  const resetFilters = !fresh && filterRemoved;
-  if(runAllOnAllData){
-    const filteredData = filterData(sortData(allData.value , sort.value.sortsToRun ), filters.value.allFilters, resetFilters);
-    return filteredData;
-  }
-  if(sortChanged){
-    return (sortData(filteredData, sort.value.sortsToRun));
-  }
-  return (filterData(filteredData, filters.value.onlyAddedFilters || filters.value.allFilters, resetFilters));
-}
-
-export const sortAndFilterData = <T>(data: Timestamp<T[]>, filters: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>, firstRun: boolean, resultData: T[]) => {
-  const markedAndSortedData = mapDataSortsAndFilters( data, filters, sort, firstRun, resultData);
-  const filteredData = markedAndSortedData.filter(item => !item[tbNoShowSymbol]);
-  return filteredData;
-}
-export const createDataCleaners = <T>(metadatas: MetaData<T>[], mutate = false) => {
-  const transforms = createCleaners(metadatas);
-  return (data: T) => {
-    if(!mutate){
-      data = { ...data }
-    }
-    for(const transform of transforms){
-      transform(data);
-    }
-    return data;
-  }
-}
-
-const createCleaners = <T>(metadatas: MetaData<T> []) => {
-  return metadatas.reduce((transforms,metaData) => {
-    const getter = getFactory(metaData.key);
-    const setter = metaData.key.includes('.') ? (t, val) => set(t, metaData.key, val) : (t, val) => t[metaData.key as unknown as keyof T] = val
-    switch ( metaData.fieldType ) {
-      case FieldType.Currency:
-      case FieldType.Number:{
-        const transform = (t:T) => {
-          const val = getter(t);
-          const num = Number( val );
-          setter(t, isNaN(num) || val == null ? null : num)
-        };
-        transforms.push(transform);
-        break;
-      }
-      case FieldType.Date:{
-        const transform = (t:T) => {
-          const val = getter(t);
-          const date = Date.parse(val);
-          let mappedDate: Date;
-          if(isNaN(date)){
-            mappedDate = null as any;
-          } else {
-            mappedDate = new Date(date);
-            mappedDate.setHours(0, 0, 0, 0);
-          }
-          setter(t, mappedDate);
-        };
-        transforms.push(transform);
-        break;
-      }
-        
-      case FieldType.DateTime:{
-        const transform = (t:T) => {
-          const val = getter(t);
-          const date = Date.parse(val);
-          let mappedDate: Date;
-          if(isNaN(date)){
-            mappedDate = null as any;
-          } else {
-            mappedDate = new Date(date);
-            if(!metaData.additional?.dateTimeOptions?.includeMilliseconds){
-              if(metaData.additional?.dateTimeOptions?.includeSeconds){
-                mappedDate.setMilliseconds(0);
-              } else {
-                mappedDate.setSeconds(0, 0);
-              }
-            }
-          }
-          setter(t, mappedDate);
-        };
-        transforms.push(transform);
-      }
-    }
-    return transforms;
-  }, [] as ((t:T) => void)[])
-}

package/src/table-builder/components/table-container/table-container.helpers/filter-state.helpers.ts

@@ -1,125 +0,0 @@
-import { Timestamp } from "rxjs";
-import { CustomFilter, FilterInfo, createFilterFunc, isCustomFilter, isFilterInfo, needsFilterCreation } from "../../../classes/filter-info";
-import { Dictionary } from "../../../interfaces/dictionary";
-import { Predicate } from "@angular/core";
-import { difference, intersection } from "lodash";
-import { TableCustomFilterDirective, TableFilterDirective } from "../../../directives";
-
-//The idea of this is that if filters were only added, and none were removed or changed, then we only need to tag more rows to not be shown. We don't need to remove any 'dont show' tags.
-// So if filters were only added this method will return the added filters, if filters were removed or changed this method will return undefined.
-export const updateFilterInfoState = <T>(previousState: FilterInfoState<T>, filterInfos: FilterInfoDict) => {
-  filterInfos = filterNonActiveOrNotReadyFilters(filterInfos);
-  const currentState: FilterInfoState<T> = {
-    allFilters: filterInfos,
-    onlyAddedFilters: filterInfoOnlyAdded(previousState.allFilters, filterInfos)
-  }
-  return currentState;
-}
-
-export const mapFilterInfoStateToPredicateState = <T>(s: FilterInfoState<T>): FilterPredicateState<T> => {
-  const mappedAddOnly: {[key in keyof T]: Predicate<T>} = 
-    s.onlyAddedFilters
-    ?
-    Object.entries(s.onlyAddedFilters).filter(([, v]) => needsFilterCreation(v)).reduce((obj, [key, value]) => {
-      obj[key] = createFilterFunc(value);
-      return obj;
-    }, {} as {[key in keyof T]: Predicate<T>})
-    : {} as {[key in keyof T]: Predicate<T>};
-  const mappedAll = Object.entries(s.allFilters).filter(([, v]) => needsFilterCreation(v))
-    .filter(([,v])=> !isCustomFilter(v) || !!v.predicate)
-    .map(([key, value]) => {
-      return mappedAddOnly[key] || createFilterFunc(value);
-    });
-  return ({
-    allFilters: mappedAll,
-    onlyAddedFilters: s.onlyAddedFilters ? Object.values(mappedAddOnly) : undefined
-  })
-}
-
-export const updateFilterPredicateState = <T>(previousState: FilterPredicateState<T>, filters: Predicate<any>[]) => {
-  const currentState: FilterPredicateState<T> = {
-    allFilters: filters,
-    onlyAddedFilters: predicatesOnlyAdded(previousState.allFilters, filters)
-  }
-  return currentState;
-}
-
-export const updateFilterState = <T>(filterInfos: Timestamp<FilterInfoState<T>>, predicates: Timestamp<FilterPredicateState<T>>): FilterPredicateState<T> => {
-  const infos = mapFilterInfoStateToPredicateState(filterInfos.value);
-  const filtersState: FilterPredicateState<T> = {
-    allFilters: [...infos.allFilters, ...predicates.value.allFilters]
-  }
-  if(filterInfos.timestamp > predicates.timestamp && !!filterInfos.value.onlyAddedFilters){
-    filtersState.onlyAddedFilters = infos.onlyAddedFilters;
-  } else {
-    filtersState.onlyAddedFilters = predicates.value.onlyAddedFilters
-  }
-  return filtersState
-}
-
-
-const filterNonActiveOrNotReadyFilters = (filtersDict : FilterInfoDict) => Object.entries(filtersDict).reduce((obj ,[key, value]) => { 
-  if(value.active !== false && (!isCustomFilter(value) || !!value.predicate)){
-    obj[key] = value
-  };
-  return obj;
-}, {} as Dictionary<FilterInfo | CustomFilter>);
-
-
-function filterInfoOnlyAdded(previousFilterInfos: FilterInfoDict, currentFilterInfos: FilterInfoDict): FilterInfoDict | undefined{
-  const previousKeys = Object.keys(previousFilterInfos);
-  const currentKeys = Object.keys(currentFilterInfos);
-  const keysInBoth = intersection(previousKeys, currentKeys);
-  const someRemoved = previousKeys.length > keysInBoth.length;
-  if(someRemoved || !previousKeys.length){
-    return undefined;
-  }
-  if(filtersInfosUpdated(previousFilterInfos, currentFilterInfos)){
-    return undefined;
-  }
-  const addedFilters = difference(currentKeys, keysInBoth).reduce((dict, key) => {
-    dict[key] = currentFilterInfos[key];
-    return dict;
-  }, {} as FilterInfoDict);
-  return addedFilters;
-}
-
-function predicatesOnlyAdded(previousPredicates: Predicate<any>[], currentPredicates: Predicate<any>[]){
-  if(!previousPredicates.length){
-    return undefined;
-  }
-  const predicateFiltersRemoved = difference(previousPredicates, currentPredicates).length;
-  if(predicateFiltersRemoved){
-    return undefined;
-  }
-  return difference(currentPredicates, previousPredicates);
-}
-
-function filtersInfosUpdated(previousFilterInfos: FilterInfoDict<any>, currentFilterInfos: FilterInfoDict<any>){
-  return !Object.entries(previousFilterInfos).every(([key, val]) => {
-    return currentFilterInfos[key].filterType === val.filterType && currentFilterInfos[key].filterValue === val.filterValue
-  })
-}
-
-export function patchDirectiveFromState(directive: (TableCustomFilterDirective | TableFilterDirective), stateFilter: FilterInfo | CustomFilter){
-  if(isFilterInfo(stateFilter)) {
-    const filterDirective: TableFilterDirective = directive as TableFilterDirective;
-    filterDirective.setFilterValue(stateFilter.filterValue);
-    filterDirective.update();
-  }
-  if(isCustomFilter(stateFilter)) {
-    directive.active = stateFilter.active ?? false;
-  }
-}
-
-export interface FilterInfoState<T> {
-  allFilters: FilterInfoDict<T>, 
-  onlyAddedFilters?: FilterInfoDict<T> | undefined,
-}
-
-export interface FilterPredicateState<T> {
-  allFilters: Predicate<T>[], 
-  onlyAddedFilters?: Predicate<T>[] | undefined,
-}
-
-export type FilterInfoDict<T = any> = Dictionary<FilterInfo<any, T> | CustomFilter<any>>;

package/src/table-builder/components/table-container/table-container.helpers/groupBy.helpers.ts

@@ -1,120 +0,0 @@
-import { groupBy } from "lodash";
-import { Timestamp } from "rxjs";
-import { DataGroup, Group, GroupedData, GroupGroup, NoneGroupHeader } from "../../../classes/TableState";
-import { initIndexSymbol } from "./sort-state.helpers";
-import { Dictionary } from "@ngrx/entity";
-
-const supportsGroupBy = typeof Object.groupBy === 'function'
-
-function getGroupedData<T extends NoneGroupHeader>(data: T[], groupByKeys: string[]) {
-  return tbGroupBy(data, groupByKeys);
-}
-
-const tbGroupBy = <T extends NoneGroupHeader = any>(data: T[], groupByKeys: string[], level= 1, parentGroupName?: string) => {
-  const currentKey = groupByKeys[0];
-  const groupedDataArr = groupData(currentKey, data, level, parentGroupName);
-
-  const remainingGroupByKeys = groupByKeys.slice(1);
-  const hasChildrenGroups = !!remainingGroupByKeys.length;
-
-  if (hasChildrenGroups) {
-    //group the children by iterating over each group and grouping it by the next keys
-    const groupOfGroups = groupedDataArr.map((group: DataGroup<T>) => {
-      const children = group.children;
-      const groupGroup = {
-        groupName: group.groupName,
-        groupHeaderDisplay: group.groupHeaderDisplay,
-        uniqueName: group.uniqueName,
-        key: currentKey,
-        hasTheData: false,
-        isGroupHeader: true,
-        padding : group.padding,
-        level: group.level,
-        length: group.length,
-        groups: tbGroupBy(children as T[], remainingGroupByKeys, level + 1, group.groupName),
-        [initIndexSymbol]: group[initIndexSymbol],
-      } as GroupGroup<T>;
-      return  groupGroup;
-    });
-    return groupOfGroups;
-  }
-
-  return groupedDataArr;
-}
-
-function groupData<T extends NoneGroupHeader = any>(groupByKey: string, groupData: T[], level = 1, parentGroupName?: string){
-  const groupedDataDict: Record<string, (T)[]> = supportsGroupBy ? Object.groupBy(groupData, d => d[groupByKey]) as Record<string, T[]> : groupBy(groupData, groupByKey);
-  const groupedDataArr = Object.entries(groupedDataDict).map(([name, groupData]) => {
-    const uniqueName = parentGroupName ? `${parentGroupName}-${name}` : `${name}`;
-
-    return ({
-      isGroupHeader: true,
-      groupHeaderDisplay: name,
-      hasTheData: true,
-      children: groupData,
-      groupName: `tb_group_${uniqueName}`,
-      padding: 1 + (20 * (level - 1)),
-      key: groupByKey,
-      length : groupData.length,
-      uniqueName,
-      level,
-      [initIndexSymbol]: uniqueName,
-    } as DataGroup<T>)
-  });
-  return groupedDataArr;
-}
-
-export function updateGroupByState<T extends NoneGroupHeader = any>(groupedData: any[], { data, groups, expanded}: { data: Timestamp<T[]>, groups: Timestamp<string[]>, expanded: Timestamp<GroupedData[]>}, firstRun: boolean){
-  if(
-    firstRun
-    || dataUpdated(data, groups, expanded)
-    || groupsUpdated(groups, expanded)
-  ){
-    groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
-  }
-  const newDisplayData = expanded.value.length === 0
-    ? groupedData
-    : groupedData.map(group => mapGroupHeader(group, expanded.value.flatMap(g => g.expandedHeaders))).flat();
-  return ({displayData: newDisplayData, groupedData}) as GroupByState;
-}
-
-export function mapGroupHeader(obj: DataGroup | GroupGroup, expandedHeaders: string[] | true): any[]{
-  const showChildren = expandedHeaders === true || expandedHeaders.includes(obj.groupName);
-  const children = !showChildren ? [] : 
-                        obj.hasTheData ?  obj.children
-                          : obj.groups.map(a => mapGroupHeader(a, expandedHeaders))
-  return [obj, ...children].flat() as any[]
-}
-
-function dataUpdated(data: Timestamp<any[]>, groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
-  return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
-}
-
-function groupsUpdated(groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
-  return groups.timestamp >= expandedGroups.timestamp;
-}
-
-export interface GroupByState { displayData: any[], groupedData: DataGroup[]};
-
-export const initialGroupByState = { displayData: [], groupedData: []}
-
-export const getAllGroupHeaderNames = (data: any[]) => {
-  const groups = getGroupHeaders(data, (d:any) => d.isGroupHeader);
-  const a = supportsGroupBy ? Object.groupBy(groups, group => group.key) as Dictionary<Group[]> : groupBy(groups, 'key');
-  return Object.entries(a).reduce((names, [key, groups]) => {
-    names[key] = groups!.map(g => ({groupName: g.groupName, key: g.key}));
-    return names;
-  }, {})
-}
-
-export const getAllGroupHeaderNamesByKeys = (data: any[], keys: string[]) => {
-  const groups = getGroupHeaders(data, (d:any) => d.isGroupHeader && keys.includes(d.key));
-  return supportsGroupBy ? Object.groupBy(groups, group => group.key) as Dictionary<Group[]> : groupBy(groups, 'key');
-}
-
-const getGroupHeaders = (data: any[], filterFunc: (d:any) => boolean, arr:Group[] = []) => {
-  const headers: Group[] = data.filter(filterFunc);
-  arr.push(...headers);
-  headers.forEach(h => {if(h.hasTheData === false && !!h.groups.length) getGroupHeaders(h.groups, filterFunc, arr)});
-  return arr;
-}

package/src/table-builder/components/table-container/table-container.helpers/meta-data.helpers.ts

@@ -1,16 +0,0 @@
-import { CustomCellMeta, MetaData } from "../../../interfaces/report-def";
-
-export function mergeCustomCellMetaData(metaData1: CustomCellMeta, metaData2?: MetaData): MetaData {
-  if(!metaData2){
-    metaData1.noExport = true;
-    return metaData1
-  }
-  if(!metaData1.displayName) metaData1.displayName = metaData2.displayName;
-  if(!metaData1.preSort) metaData1.preSort = metaData2.preSort;
-  if(!metaData1.order) metaData1.order = metaData2.order;
-  if(!metaData1.width) metaData1.width = metaData2.width;
-  if(metaData2.fieldType) metaData1.fieldType = metaData2.fieldType;
-  metaData1.noExport = metaData2.noExport;
-  
-  return ({ ...metaData2, ...metaData1 });
-}

package/src/table-builder/components/table-container/table-container.helpers/sort-state.helpers.ts

@@ -1,47 +0,0 @@
-import { Sort } from "@angular/material/sort";
-import { SortDirection } from "../../../interfaces/report-def";
-import { difference } from "lodash";
-
-// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
-// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
-// So we need to calculate the matching tail of the sort array. Then sortsToRun will be the non-matching head.
-// But if any sorts were removed the only way to 'unsort' is to start by the original data and run all the existing sorts again, so 'sorts to run' will be all
-// the sorts.
-// We always pass allSorts to the container because if the table data changes all the sorts will need to be run.
-export function updateSortState(previousSorts: SortState, currentSorts: TableBuilderSort[]): SortState{
-  currentSorts = addInitSort(currentSorts);
-  if(sortsRemoved(previousSorts.allSorts, currentSorts)){
-    return ({sortsToRun: currentSorts, allSorts: currentSorts});
-  }
-  const sameTailLength = getSameTailLength(previousSorts.allSorts, currentSorts);
-  const sortsToRun = currentSorts.slice(0, currentSorts.length - sameTailLength);
-  return ({sortsToRun, allSorts: currentSorts});
-}
-
-export interface SortState { sortsToRun: TableBuilderSort[], allSorts: TableBuilderSort[]}
-
-function addInitSort(sorts: TableBuilderSort[]){
-  return [...sorts, {active: initIndexSymbol as unknown as string, direction: 'asc' as SortDirection}];
-}
-
-function sortsRemoved(previousSorts: TableBuilderSort[], currentSorts: TableBuilderSort[]): boolean{
-  const previousSortedColumns = previousSorts.map(s => s.active);
-  const currentSortedColumns = currentSorts.map(s => s.active);
-  const sortsRemoved = !!difference(previousSortedColumns, currentSortedColumns).length;
-  return sortsRemoved;
-}
-
-
-function getSameTailLength(previousSorts: TableBuilderSort[], currentSorts: TableBuilderSort[]){
-  previousSorts = [...previousSorts].reverse();
-  currentSorts = [...currentSorts].reverse();
-  let indexOfChange = currentSorts.findIndex((s, i) => s.active !== previousSorts[i]?.active || s.direction !== previousSorts[i]?.direction);
-  if(indexOfChange === -1) return indexOfChange = currentSorts.length;
-  return indexOfChange;
-}
-
-export const initIndexSymbol = Symbol('tb_init_index');
-
-export const initialSortState: SortState = { sortsToRun: [], allSorts: []};
-
-export type TableBuilderSort = Sort & { nulls?: 'first' | 'last' , sortBy?: (t) => any }

package/src/table-builder/components/table-container/table-container.html

@@ -1,79 +0,0 @@
-@let tableId = $tableId();
-@let tableSettings = state.$tableSettings();
-
-<ng-content select="[before]" />
-<ng-container multiSort>
-  <div class="tb-header-wrapper" [id]="headerId">
-    <div class="title">
-      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)
-      {
-        <ng-content select=".tb-header-title"/>
-      }
-    </div>
-    @if(state.$groupByKeys().length){
-      <group-by-list />
-    }
-    <div class="flx-row-end">
-      <lib-filter-list />
-      @if (!tableSettings.hideHeader)
-      {
-        @if (!$collapsedHeader())
-        {
-          <ng-container *ngTemplateOutlet="headerMenu"/>
-          <button mat-icon-button color='primary' [matMenuTriggerFor]="l.menu()">
-            <mat-icon>more_vert</mat-icon>
-          </button>
-
-          <lib-table-header-menu #l/>
-
-        }
-        @else {
-          <mat-icon color="primary" [matMenuTriggerFor]="mainMenu" class="flat-menu-button pointer">more_horiz</mat-icon>
-          <mat-menu #mainMenu='matMenu'>
-            <div class="flex-column">
-              <ng-container *ngTemplateOutlet="headerMenu; injector menuInjector"/>
-            </div>
-            <lib-table-header-menu />
-          </mat-menu>
-        }
-        <mat-icon [matTooltip]="$collapsedHeader() ? 'expand' : 'collapse'" class="collapse-icon header"
-          (click)="state.toggleCollapseHeader()">
-          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}
-        </mat-icon>
-      }
-
-    </div>
-  </div>
-
-  @if($useVirtual())
-  {
-    <tb-virtual-scroll-container class="scrollable">
-      <tb-generic-table [rows]="$customRows()" [data]="$data()!" [displayDataLength]="$displayDataLength()"
-        (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]="$trackBy()" [dataSource]="dataSource" />
-    </tb-virtual-scroll-container>
-  }
-  @else
-  {
-    <tb-generic-table [rows]="$customRows()" [data]="$data()!" [displayDataLength]="$displayDataLength()"
-      (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]="$trackBy()"  [dataSource]="dataSource" />
-  }
-  @if(tableSettings.usePaginator)
-  {
-    <div class="paginator">
-      <tb-paginator #tbPaginator />
-
-      <mat-icon [matTooltip]="$collapsedFooter() ? 'expand' : 'collapse'" class="collapse-icon footer"
-        (click)="state.toggleCollapseFooter()">
-        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}
-      </mat-icon>
-    </div>
-  }
-
-  <ng-template #headerMenu>
-    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}
-    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}
-    @if (!tableSettings.hideSort) {<tb-sort-menu/>}
-    @if (!!tableId) {<tb-profiles-menu [tableId]="tableId"/>}
-  </ng-template>
-
-</ng-container>

package/src/table-builder/components/table-container/table-container.scss

@@ -1,47 +0,0 @@
-.tb-header-wrapper{
-  display: flex;
-  flex-direction: row;
-  width:100%;
-}
-
-
-.flx-row-end{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  margin-left: auto;
-}
-
-.flat-menu{
-  line-height: initial;
-  height: initial;
-}
-
-.pointer{
-  cursor: pointer;
-}
-
-.add-key{
-  width: 90%;
-}
-
-.paginator{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  background-color: white;
-  bottom: 0px;
-  position: sticky;
-  border-top: .5px solid rgba(0,0,0,.12);
-}
-.profiles-menu{
-  visibility: hidden;
-  width: 0px;
-  height: 0px;
-  display: block;
-  overflow: hidden;
-  position: absolute;
-  top: 50px;
-}