@one-paragon/angular-utilities 2.8.4 → 2.8.6

package/src/table-builder/components/sort-menu/sort-menu.component.scss

@@ -1,119 +0,0 @@
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.list{
-  padding: 5px 2px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  background: white;
-}
-
-.light-arrow{
-  color: rgb(147 177 234 / 47%);
-}
-
-.dark-arrow{
-  color: #224e9c;
-}
-
-.up-down-button{
-  background-color: white;
-  border-radius: 30%;
-  border-color: aqua;
-  padding: 1px 1px 0;
-  border-width: .5px;
-  cursor: pointer;
-  height: 27px;
-}
-
-.mat-icon.up-down-icon{
-  margin-right: 0;
-  font-size: 20px;
-  font-weight: lighter;
-}
-
-.sort-item{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.up-down-buttons-wrapper{
-  margin-left: 2rem;
-}
-
-.up-button{
-  margin-right: .3rem;
-}
-
-.mat-mdc-menu-item{
-  &.menu-item, &.menu-button{
-    min-height: initial;
-    padding: 0 3px;
-    line-height: 25px;
-    height: 30px;
-  }
-  &.menu-item{
-    cursor: move;
-  }
-}
-
-.sorted-name{
-  color: #224e9c;
-  font-size: 17px;
-  font-weight: 700;
-}
-
-.not-sorted-name{
-  color: rgb(147 177 234);
-  font-size: 17px;
-  font-weight: 700;
-  
-}
-
-.apply-border{
-  border: #224e9c solid .5px;
-}
-
-.apply-border:hover{
-  background-color: antiquewhite;
-}
-
-.apply-button-wrapper{
-  display: grid;
-  justify-content: center;
-
-}
-
-.sort-header{
-  font-size: 10px;
-  font-style: italic;
-}
-
-.tip{
-  padding: 0 3px;
-  color: lightgray;
-}
-
-.direction-text{
-  font-size: small;
-  font-weight: 400;
-}
-
-.close-button-wrapper{
-  display: flex;
-  flex-direction: row-reverse;
-}

package/src/table-builder/components/sort-menu/sort-menu.component.ts

@@ -1,88 +0,0 @@
-import { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
-import { TableStore } from '../../classes/table-store';
-import { SortDirection } from '../../interfaces/meta-data';
-import { SortMenuComponentStore, SortWithName } from './sort-menu.component-store'
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
-
-@Component({
-  selector: 'tb-sort-menu',
-  templateUrl: './sort-menu.component.html',
-  styleUrls: ['./sort-menu.component.scss'],
-  providers: [SortMenuComponentStore],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
-    SpaceCasePipe
-  ]
-})
-export class SortMenuComponent {
-  SortDirection = SortDirection;
-  private tableState = inject(TableStore);
-  protected store = inject(SortMenuComponentStore);
-
-  $sorted = computed(() => [...this.store.$sorted()]);
-  $notSorted = computed(() => [...this.store.$notSorted()]);
-  $dirty = signal(false);
-
-  reset(){
-    this.$dirty.set(false);
-    this.store.reset();
-  }
-
-  dropIntoSorted(event: CdkDragDrop<SortWithName[]>) {
-    this.$dirty.set(true);
-    const sorted = [...event.container.data];
-    if(event.previousContainer === event.container) {
-      moveItemInArray(sorted, event.previousIndex, event.currentIndex);
-      this.store.setSorted(sorted);
-    } else {
-      const notSorted = [...event.previousContainer.data];
-      transferArrayItem(
-        notSorted,
-        sorted,
-        event.previousIndex,
-        event.currentIndex
-      );
-      sorted[event.currentIndex] = { ...sorted[event.currentIndex], direction: SortDirection.asc };
-      this.store.setSorted(sorted);
-      this.store.setNotSorted(notSorted);
-    }
-  }
-
-  dropIntoNotSorted(event: CdkDragDrop<SortWithName[]>){
-    if(event.previousContainer === event.container) {
-      return;
-    } else {
-      this.$dirty.set(true);
-      const sorted = [...event.previousContainer.data];
-      const notSorted = [...event.container.data];
-      transferArrayItem(
-        sorted,
-        notSorted,
-        event.previousIndex,
-        event.currentIndex
-      );
-      notSorted[event.currentIndex] = { ...notSorted[event.currentIndex] };
-
-      this.store.setNotSorted(notSorted);
-      this.store.setSorted(sorted);
-    }
-  }
-
-  apply = () => {
-    this.$dirty.set(false);
-    this.tableState.setAllSort(this.store.$sorted());
-  }
-
-  setDirection(sort:SortWithName){
-    this.$dirty.set(true);
-    this.store.setDirection(sort);
-  }
-}
-
-

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

@@ -1,94 +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"/>
-        @if (tableSettings.title)
-        {
-          @switch (tableSettings.title.level)
-          {
-            @case (1) { <h1 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h1>}
-            @case (2) { <h2 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h2>}
-            @case (4) { <h4 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h4>}
-            @case (5) { <h5 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h5>}
-            @case (6) { <h6 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h6>}
-            @default { <h3 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h3>}
-          }
-        }
-      }
-    </div>
-    @if(state.$groupByData().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]="mainMenu">
-            <mat-icon>more_vert</mat-icon>
-          </button>
-          <mat-menu #mainMenu='matMenu' [xPosition]="'before'">
-            <lib-table-header-menu #l/>
-          </mat-menu>
-
-        }
-        @else
-        {
-          <mat-icon color="primary" class="flat-menu-button pointer" [matMenuTriggerFor]="mainMenu">more_horiz</mat-icon>
-          <mat-menu #mainMenu='matMenu'>
-            <div class="collapsed-head-row">
-              <ng-container *ngTemplateOutlet="headerMenu; injector menuInjector"/>
-            </div>
-            <lib-table-header-menu />
-          </mat-menu>
-        }
-        <mat-icon class="collapse-icon header" [matTooltip]="$collapsedHeader() ? 'expand' : 'collapse'"
-          (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()!" [displayData]="$filteredSortedAndGrouped()?.displayData || []"
-        [columnInfos]='$myColumns()' [trackBy]="$trackBy()" [dataSource]="dataSource" (selection)='_selection$.next($event)' />
-    </tb-virtual-scroll-container>
-  }
-  @else
-  {
-    <tb-generic-table [rows]="$customRows()" [data]="$data()!" [displayData]="$filteredSortedAndGrouped()?.displayData || []"
-      [columnInfos]='$myColumns()' [trackBy]="$trackBy()" [dataSource]="dataSource"  (selection)='_selection$.next($event)' />
-  }
-  @if(tableSettings.usePaginator)
-  {
-    <div #paginatorWrapper class="paginator tb-paginator-wrapper">
-      <ng-content select=".tb-paginator-row" />
-      <tb-paginator #tbPaginator />
-
-      <mat-icon class="collapse-icon footer" [matTooltip]="$collapsedFooter() ? 'expand' : 'collapse'"
-        (click)="state.toggleCollapseFooter()">
-        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}
-      </mat-icon>
-    </div>
-  }
-</ng-container>
-
-<ng-template #headerMenu>
-  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}
-  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}
-  @if (!tableSettings.hideSort) {<tb-sort-menu/>}
-  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]="tableId"/>}
-</ng-template>

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

@@ -1,60 +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;
-}
-.collapsed-head-row{
-  display: flex;
-  justify-content: space-evenly;
-}
-::ng-deep tb-generic-table {
-  .mat-mdc-row:nth-child(odd):not(.no-stripe) {
-    background-color: var(--tb-odd-row-background-color, #cdeefe);
-  }
-}
-.tb-container-title{
-  padding-left: var(--tb-container-title-padding-left, 10px);
-  margin: var(--tb-container-title-margin, 0);
-}