@one-paragon/angular-utilities 1.2.12 → 1.2.14

package/src/table-builder/components/number-filter/number-filter.component.css

@@ -1,10 +0,0 @@
-.switch {
-    display: inline-block;
-}
-
-.my-filter {
-    margin-right: 15px;
-}
-.inline{
-  display: inline-block;
-}

package/src/table-builder/components/number-filter/number-filter.component.html

@@ -1,19 +0,0 @@
-@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){
-  <mat-form-field class="my-filter">
-    <input matInput name="filterValue" [ngModel]="info.filterValue" type="number"/>
-  </mat-form-field>
-}
-@if(CurrentFilterType === FilterType.NumberBetween){
-  <ng-container ngModelGroup="filterValue"  >
-    <mat-form-field class="my-filter">
-      <input matInput name="Start" [ngModel]="info.filterValue?.Start" placeholder="Start" type="number"/>
-    </mat-form-field>
-    <mat-form-field class="my-filter">
-      <input matInput name="End" [ngModel]="info.filterValue?.End" placeholder="End" type="number"/>
-    </mat-form-field>
-  </ng-container>
-}
-
-@if (CurrentFilterType === FilterType.In) {
-  <lib-in-filter name='filterValue' [type]="FieldType.Number" [(ngModel)]='info.filterValue' />
-}

package/src/table-builder/components/number-filter/number-filter.component.spec.ts

@@ -1,30 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FieldType } from 'projects/angular-utilities/src/public-api';
-
-import { NumberFilterComponent } from './number-filter.component';
-
-describe('NumberFilterComponent', () => {
-  let component: NumberFilterComponent;
-  let fixture: ComponentFixture<NumberFilterComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NumberFilterComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NumberFilterComponent);
-    component = fixture.componentInstance;
-    component.info = {
-      key: '',
-      fieldType: FieldType.Unknown
-    };
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/table-builder/components/number-filter/number-filter.component.ts

@@ -1,25 +0,0 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
-import { FilterType, FilterTypes } from '../../enums/filterTypes';
-import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
-import { PartialFilter } from '../../classes/filter-info';
-import { FieldType } from '../../interfaces/report-def';
-import { MatInputModule } from '@angular/material/input';
-import { InFilterComponent } from '../in-filter/in-filter.component';
-
-
-@Component({
-  selector: 'tb-number-filter',
-  templateUrl: './number-filter.component.html',
-  styleUrls: ['./number-filter.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
-  standalone: true,
-  imports: [
-    MatInputModule, FormsModule, InFilterComponent
-  ]
-})
-export class NumberFilterComponent {
-  FilterType = FilterTypes; FieldType = FieldType;
-  @Input() CurrentFilterType!: FilterType;
-  @Input() info!:PartialFilter;
-}

package/src/table-builder/components/profiles-menu/profiles-menu.component.html

@@ -1,74 +0,0 @@
-<button mat-icon-button [matMenuTriggerFor]="menu" #trigger="matMenuTrigger" [matTooltip]="'Profiles'">
-  <mat-icon color="primary">people</mat-icon>
-</button>
-<mat-menu #menu="matMenu" (closed)="addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)">
-  @if(!!$currentProfile())
-  {
-    <div mat-menu-item [matTooltip]="'Save Profile'" mat-stroked-button (click)="saveState($currentProfile()!)">
-      <mat-icon color="primary">save</mat-icon>
-      <span>{{$currentProfile()}}</span>
-    </div>
-  }
-  @else
-  {
-    <div class="profile-line">
-      <button class="first-in-line first-button" mat-stroked-button (click)="addState(defaultName, m.checked);">
-        <mat-icon class="save-for-default-icon button-save-icon" color="primary">save</mat-icon>
-        <span>Save as <span class="current-name">{{defaultName}}</span> </span>
-      </button>
-      <button [matTooltip]="'Toggle Profile Being Created As Default'" stop-propagation mat-icon-button (click)="m.toggle()" >
-        <mat-icon style="color: green;">{{m.checked ? 'star' : 'star_border'}}</mat-icon>
-      </button>
-      <mat-checkbox class="display-none" [checked]="true" #m />
-    </div>
-  }
-  @if (allProfilesPanelOpened()) {<hr class="divider"/>}
-  <div [class]="{ hide: !$keys().length }" mat-menu-item stop-propagation (click)="allProfilesPanelOpened.set(!allProfilesPanelOpened())">All Profiles</div>
-  <div [class]="{ hide: !allProfilesPanelOpened(), panel: true }">
-    @for (key of $keys() ; track key) {
-      <div class="profile-line" [class.current-in-list]="key === $currentProfile()">
-        <button [matTooltip]="'Select Profile'" class="menu-item first-in-line" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>
-          <span>{{key}}</span>
-        </button>
-        @if(key !== $defaultProfile())
-        {
-          <button [matTooltip]="'Toggle Profile Being Default'" stop-propagation mat-icon-button (click)="setDefault(key)">
-            <mat-icon style="color: green;">star_border</mat-icon>
-          </button>
-        }
-        @else
-        {
-          <button [matTooltip]="'Toggle Profile Being Default'" stop-propagation mat-icon-button (click)="unsetDefault()">
-            <mat-icon style="color: green;">star</mat-icon>
-          </button>
-        }
-        <button [matTooltip]="'Delete Profile'" class="last-in-line" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>
-          <mat-icon color='warn'>delete_forever</mat-icon>
-        </button>
-      </div>
-    }
-    <hr class="divider"/>
-  </div>
-  @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class="divider"/>}
-  <div mat-menu-item stop-propagation (click)="newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()">Add New Profile</div>
-  <div [class]="{ hide: !newProfilePanelOpened(), panel: true }" >
-    <div class="profile-line" stop-propagation>
-      <div class="new-name-input">
-        <i class="input-hint">Enter New Name</i>
-        <input matInput #addedKey="matInput" [name]="'key'" />
-      </div>
-      <button [matTooltip]="'Toggle Profile Being Created As Default'" stop-propagation mat-icon-button (click)="m2.toggle()" >
-        <mat-icon style="color: green;">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>
-      </button>
-      <mat-checkbox class="display-none" [ngModel]="!$defaultProfile()" #m2 />
-    </div>
-    <button class="add-button" color="primary" [matTooltip]="'Create New Profile'" mat-raised-button (click)="addState(addedKey.value, m2.checked); addedKey.value = null" [disabled]="!addedKey.value">
-      Add
-    </button>
-  </div>
-</mat-menu>
-
-<ng-template #line let-key>
-
-
-</ng-template>

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

@@ -1,98 +0,0 @@
-
-:host ::ng-deep .mat-expansion-panel-header{
-  padding: 0;
-}
-.current-name{
-  color: blue;
-}
-.menu-item{
-  display: inline-flex;
-  width: initial;
-  flex-grow: 1;
-}
-.profile-line{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.first-in-line{
-  --f-b: 2rem;
-  margin-left: var(--mat-menu-item-with-icon-leading-spacing);
-  &.first-button{
-    height: var(--f-b);
-    margin: .2rem;
-  }
-  .button-save-icon{
-    height: var(--f-b);
-    width: var(--f-b);
-    font-size: var(--f-b);
-  }
-}
-.main-save-button{
-  height: 4rem;
-  width: 4rem;
-  padding: .5rem;
-  mat-icon{
-    height: 3rem;
-    width: 3rem;
-    font-size: 3rem;
-  }
-}
-.save-for-default-icon{
-  margin: 0;
-}
-.display-none{
-  display: none;
-}
-.last-in-line{
-  padding-right: var(--mat-menu-item-with-icon-trailing-spacing);
-}
-.default-cursor{
-  cursor: default;
-}
-.as-def{
-  padding-left: var(--mat-menu-item-with-icon-leading-spacing);
-}
-.divider{
-  margin: .2px 0;
-}
-.add-key{
-  max-width: 8.5rem;
-  margin-left: 2px;
-  ::ng-deep{
-    .mdc-text-field{
-      padding: 0;
-    }
-  }
-}
-.panel{
-  transition: height .1s
-}
-.hide{
-  height: 0;
-  min-height: 0;
-  overflow: hidden;
-}
-.open-panel-button{
-  width: 100%;
-  height: 2.5rem;
-}
-.current-in-list{
-  border-left: 3px solid blue;
-  background-color: #0000ff0d;
-}
-.new-name-input{
-  margin-left: 3px;
-  display: flex;
-  flex-direction: column;
-  .input-hint{
-    font-size: smaller;
-    font-weight: 200;
-    color: gray;
-  }
-}
-.add-button{
-  height: 20px;
-  line-height: 20px;
-  margin: 3px 0 0 3px;
-}

package/src/table-builder/components/profiles-menu/profiles-menu.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProfilesMenuComponent } from './profiles-menu.component';
-
-describe('ProfilesMenuComponent', () => {
-  let component: ProfilesMenuComponent;
-  let fixture: ComponentFixture<ProfilesMenuComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ProfilesMenuComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(ProfilesMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,65 +0,0 @@
-import { Component, computed, inject, input, output, signal, viewChild } from '@angular/core';
-import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
-import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import { MatIcon } from '@angular/material/icon';
-import { TableStore } from '../../classes/table-store';
-import { MatTooltip } from '@angular/material/tooltip';
-import { MatButton, MatIconButton } from '@angular/material/button';
-import { ClickEmitterDirective, DialogDirective, FunctionPipe, StopPropagationDirective } from '../../../utilities';
-import { MatInput, MatInputModule } from '@angular/material/input';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { Subject } from 'rxjs';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'tb-profiles-menu',
-  standalone: true,
-  imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput, DialogDirective, ClickEmitterDirective, NgTemplateOutlet,
-    MatCheckbox, StopPropagationDirective, FunctionPipe, MatInputModule, AsyncPipe, FormsModule
-  ],
-  templateUrl: './profiles-menu.component.html',
-  styleUrl: './profiles-menu.component.scss'
-})
-export class ProfilesMenuComponent {
-  stateService = inject(TableBuilderStateStore);
-  tableStore = inject(TableStore);
-  $tableId = input.required<string>();
-  onSaveState = output<null>();
-  trigger = viewChild<MatMenuTrigger>('trigger');
-  allProfilesPanelOpened = signal(false);
-  newProfilePanelOpened = signal(false);
-  $currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())());
-  $defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())());
-  $keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())());
-  saveState(key: string) {
-    const tableState = this.tableStore.getSavableStateSignal();
-    this.onSaveState.emit(null);
-    this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
-  }
-
-  addState(key: string, asDefault: boolean){
-    const tableState = this.tableStore.getSavableStateSignal();
-    this.stateService.addNewStateToLocalAndStorage(this.$tableId(), key, tableState, asDefault);
-  }
-
-  setDefault(key: string){
-    this.stateService.setDefaultInLocalAndStorage(this.$tableId(), key);
-  }
-
-  unsetDefault(){
-    this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
-  }
-
-  defaultName = 'My Profile';
-  position$ = new Subject<{ top: string, right: string} | undefined>();
-  setPosition = (e: HTMLElement) => {
-    const rect = e.getBoundingClientRect();
-    if(rect.top === 0) return;
-    const a = {
-      right: `${(window.innerWidth - rect.right)}px`,
-      top: `${rect.top}px`,
-    }
-    return a;
-  }
-}

package/src/table-builder/components/scroll-strategy.ts

@@ -1,76 +0,0 @@
-import {
-  CdkVirtualScrollViewport,
-  VirtualScrollStrategy,
-} from '@angular/cdk/scrolling';
-import { animationFrameScheduler, Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, observeOn } from 'rxjs/operators';
-import { subscriber } from '../../rxjs';
-
-export class TableVirtualScrollStrategy implements VirtualScrollStrategy {
-  scrolledIndexChange: Observable<number>;
-
-  private dataLength = 0;
-  private readonly indexChange = new Subject<number>();
-  private viewport?: CdkVirtualScrollViewport;
-
-  constructor(private itemHeight: number, private headerHeight: number) {
-    this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
-  }
-
-  attach(viewport: CdkVirtualScrollViewport): void {
-    this.viewport = viewport;
-    this.onDataLengthChanged();
-  }
-
-  contentScrolled$ = new Subject<void>();
-
-  sub = subscriber(this.contentScrolled$.pipe(
-      observeOn(animationFrameScheduler)
-  ), () => {
-    this.updateContent();
-  })
-
-  onContentScrolled(): void {
-    this.contentScrolled$.next();
-  }
-
-  onDataLengthChanged(): void {
-    if (this.viewport) {
-      this.viewport.setTotalContentSize(this.dataLength * this.itemHeight);
-      this.updateContent();
-    }
-  }
-
-  setDataLength(length: number): void {
-    this.dataLength = length;
-    this.onDataLengthChanged();
-  }
-
-  detach(): void {}
-  onContentRendered(): void {}
-  onRenderedOffsetChanged(): void {
-  }
-  scrollToIndex(index: number, behavior: ScrollBehavior): void {
-  }
-
-  private updateContent(): void {
-    if (!this.viewport) {
-      return;
-    }
-
-    const amountOfRows = Math.ceil((this.viewport.getViewportSize() - this.headerHeight) / this.itemHeight);
-    const offset = this.viewport.measureScrollOffset();
-    const buffer = 35;
-
-    const skip = Math.round(offset / this.itemHeight);
-    // always start at an even index so we don't change the color patterns for odd and even rows.
-    const index =  skip % 2 === 0 ? skip : skip - 1;
-    const start = Math.max(0, index - buffer);
-    const end = Math.min(this.dataLength, index + amountOfRows + buffer);
-
-    this.viewport.setRenderedContentOffset(this.itemHeight * start);
-    this.viewport.setRenderedRange({ start, end });
-
-    this.indexChange.next(index);
-  }
-}

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

@@ -1,66 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { Sort } from '@angular/material/sort';
-import { ComponentStore } from '@ngrx/component-store';
-import { combineLatest } from 'rxjs';
-import { distinctUntilChanged, map, mergeMap } from 'rxjs/operators';
-import { TableStore } from '../../classes/table-store';
-import { notNull } from '../../../rxjs/rxjs-operators';
-import { FieldType } from '../../interfaces/report-def';
-import { toObservable } from '@angular/core/rxjs-interop';
-
-@Injectable()
-export class SortMenuComponentStore extends ComponentStore<ComponentStoreState> {
-  private tableState = inject(TableStore);
-
-  constructor(){
-    super({ notSorted:[], sorted: []})
-  }
-  private set = this.updater((state, data: ComponentStoreState)=> ({...data}));
-
-  setSorted = this.updater((state, sorted: SortWithName[])=>({...state, sorted}));
-
-  setNotSorted = this.updater((state, notSorted: SortWithName[])=>({...state, notSorted}));
-  sorted$ = this.select(state=>state.sorted);
-  notSorted$ = this.select(state=>state.notSorted);
-
-  setDirection = this.updater((state,sort:SortWithName)=>{
-    const index = state.sorted.findIndex(s => s.active === sort.active);
-    const sorted = [...state.sorted];
-    sorted.splice(index,1,sort);
-    return ({...state,sorted});
-  })
-  metaDataArr$ = toObservable(this.tableState.$metaDataArray);
-  reset = () => {
-    const sorted = this.tableState.sort$.pipe(
-      mergeMap(sort => this.tableState.metaData$.pipe(
-        notNull(),
-        map(
-        meta => sort.map(s => {
-          return ({...s, displayName: meta[s.active]?.displayName} as SortWithName)})
-      )))
-    );
-    const notSorted = this.metaDataArr$.pipe(mergeMap(
-      metas => this.tableState.sort$.pipe(
-        map(s => metas
-          .filter(meta => !s.some(s=>s.active=== meta.key) && meta.fieldType !== FieldType.NotMapped && !meta.noSort)
-          .map(meta=>({active:meta.key,displayName : meta.displayName} as SortWithName)))
-      )
-    ));
-    this.set(combineLatest([
-      sorted.pipe(distinctSortArray),notSorted.pipe(distinctSortArray)
-    ]).pipe(map(([sorted,notSorted])=>({sorted,notSorted}))));
-  }
-}
-
-export interface ComponentStoreState {
-  sorted : SortWithName[];
-  notSorted: SortWithName[];
-}
-
-export interface SortWithName extends Sort{
-  displayName : string;
-}
-
-const equalSortArray = (arr1:SortWithName[],arr2:SortWithName[]) =>
-  arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
-const distinctSortArray = distinctUntilChanged<SortWithName[]>(equalSortArray);

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

@@ -1,111 +0,0 @@
-<ng-container *ngrxLet="dirty$ as dirty">
-  @if(sorted$ | async; as sorted){
-    @if (notSorted$ | async; as notSorted) {
-      <!-- Menu Trigger -->
-      <span matTooltip="Sort">
-        <button mat-icon-button [matMenuTriggerFor]="menu">
-          <mat-icon color="primary">swap_vert</mat-icon>
-        </button>
-      </span>
-
-      <!-- Menu -->
-      <mat-menu #menu="matMenu"  class="my-mat-menu" (closed)="reset()">
-        <div mat-menu-item class="menu-button">
-          <div class="close-button-wrapper">
-            <span matTooltip="Close">
-              <mat-icon>close</mat-icon>
-            </span>
-            @if(dirty){
-              <span matTooltip="Undo" stop-propagation (click)="reset()">
-                <mat-icon>undo</mat-icon>
-              </span>
-            }
-            
-          </div>
-        </div>
-
-        <!-- Apply Button -->
-        <div class="apply-button-wrapper">
-          <button mat-button color="primary" (click)="apply(null)"
-            stop-propagation [class.apply-border]="dirty"
-            [disabled]="!dirty">
-              Apply @if (dirty) { Unsaved Changes }
-          </button>
-        </div>
-
-        <!-- Default Sorting Text -->
-        @if (!sorted.length) {
-          <div class="tip" >
-            Sorting List
-          </div>
-        }
-
-        <!-- Sorted Menu List -->
-        <div class="list"
-          cdkDropList
-          #sortedGroup="cdkDropList"
-          [cdkDropListConnectedTo]="[notSortedGroup]"
-          [cdkDropListData]="sorted"
-          (cdkDropListDropped)="dropIntoSorted($event)">
-
-          <!-- Menu Item Wrapper -->
-          @for (sort of sorted; track sort.active) {
-            <!-- Menu Item Headers -->
-            @if (sorted.length > 1) {
-              <span class="description sort-header">{{$index === 0 ? 'First By' : 'Then By'}}</span>
-            }
-  
-            <!-- Menu Item -->
-            <div mat-menu-item   cdkDrag class="menu-item">
-              <div class="sort-item">
-                <span class="sorted-name">
-                  {{sort.displayName || (sort.active | spaceCase)}}
-                  <span class="direction-text">{{sort.direction}}</span>
-                </span>
-  
-                <!-- Sort Direction Buttons -->
-                <div class="up-down-buttons-wrapper">
-                  <button  class="up-down-button up-button" stop-propagation
-                  (click)="setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})">
-                    <mat-icon [ngClass]="sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'" class="up-down-icon">
-                    arrow_upward
-                    </mat-icon>
-                  </button>
-  
-                  <button class="up-down-button" stop-propagation
-                  (click)="setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})">
-                    <mat-icon [ngClass]="sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'" class="up-down-icon">
-                      arrow_downward
-                    </mat-icon>
-                  </button>
-                </div>
-              </div>
-            </div>
-          }
-
-        </div>
-
-        <!-- Default Not Sorted Text -->
-        @if(!notSorted.length){
-          <div class="tip" >
-            Not Sorted List
-          </div>
-        }
-
-        <!-- Not Sorted Menu List -->
-        <div class="list"
-          cdkDropList
-          #notSortedGroup="cdkDropList"
-          [cdkDropListConnectedTo]="[sortedGroup]"
-          [cdkDropListData]="notSorted"
-          (cdkDropListDropped)="dropIntoNotSorted($event)">
-          @for (sort of notSorted; track sort.active) {
-            <div mat-menu-item class="menu-item" cdkDrag>
-              <span class="not-sorted-name">{{sort.displayName || (sort.active | spaceCase)}}</span>
-            </div>
-          }
-        </div>
-      </mat-menu>
-    }
-  }
-</ng-container>