@one-paragon/angular-utilities 2.8.4 → 2.8.6

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

@@ -1,126 +0,0 @@
-
-:host ::ng-deep .mat-expansion-panel-header{
-  padding: 0;
-}
-.current-name{
-  color: var(tb-current-profile, 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;
-}
-.not-current-in-list{
-  border-left: 3px solid rgba(255, 255, 255, 0);
-}
-.add-new-profile-row, .all-profile-row{
-  border-top: rgb(128 128 128 / 25%) solid 1px;
-}
-.all-profiles{
-  display: flex;
-  justify-content: space-between;
-  &:has(.all-profile-arrow-close){
-    align-items: center;
-  }
-}
-.all-profile-arrow{
-  display: inline-block;
-  height: .7rem;
-  width: .7rem;
-  border-color: black;
-  transform: rotate(-45deg);
-  &-open{
-    border-left: solid 2px;
-    border-bottom: solid 2px;
-  }
-  &-close{
-    border-right: solid 2px;
-    border-top: solid 2px;
-  }
-}
-.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,64 +0,0 @@
-import { Component, computed, inject, input, signal, viewChild, ChangeDetectionStrategy } from '@angular/core';
-import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
-import { MatMenu, 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 { StopPropagationDirective } from '../../../utilities';
-import { MatInput, MatInputModule } from '@angular/material/input';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { Subject } from 'rxjs';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'tb-profiles-menu',
-  imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
-    MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
-  ],
-  templateUrl: './profiles-menu.component.html',
-  styleUrl: './profiles-menu.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProfilesMenuComponent {
-  stateService = inject(TableBuilderStateStore);
-  tableStore = inject(TableStore);
-  $tableId = input.required<string>({ alias: 'tableId' });
-  $isMatMenuChild = input<boolean>(false, { alias: 'isMatMenuChild' });
-  trigger = viewChild<MatMenuTrigger>('trigger');
-  menu = viewChild.required(MatMenu)
-  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.$savableState();
-    this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
-  }
-
-  addState(key: string, asDefault: boolean){
-    const tableState = this.tableStore.$savableState();
-    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/reset-menu/reset-menu.component.css

@@ -1,3 +0,0 @@
-:host{
-  display: contents;
-}

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

@@ -1,10 +0,0 @@
-<mat-menu #menu2="matMenu">
-  @if($set().length > 1)
-  {
-    <button mat-menu-item (click)="state.resetState()">All</button>
-  }
-  @for (item of $set(); track $index)
-  {
-    <button mat-menu-item (click)="state.resetPart(item)">Reset {{item}}</button>
-  }
-</mat-menu>

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

@@ -1,87 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject, output, viewChild } from '@angular/core';
-import { MatMenu, MatMenuModule } from '@angular/material/menu';
-import { resetable } from '../../classes/table-store';
-import { TableContainerComponent } from '../table-container/table-container.component';
-import { sortsAreSame } from '../../directives';
-import { MatButtonModule } from '@angular/material/button';
-import { isCustomFilter } from '../../classes/filter-info';
-
-@Component({
-  selector: 'lib-reset-menu',
-  imports: [MatMenuModule, MatButtonModule],
-  templateUrl: './reset-menu.component.html',
-  styleUrl: './reset-menu.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ResetMenuComponent {
-  menu = viewChild.required(MatMenu);
-  protected tableContainer = inject(TableContainerComponent);
-  state = this.tableContainer.state;
-  onStateReset$ = output<null>({ alias: 'onStateReset' });
-  protected resetState() {
-    this.tableContainer.$customFilterDirectives().forEach( cf => cf.reset());
-    this.tableContainer.$filterDirectives().forEach( cf => cf.reset() );
-    this.state.resetState();
-    this.onStateReset$.emit(null)
-  }
-
-  $filtersSet = computed(() => {
-    return Object.values(this.state.$filters())
-      .filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
-      .length;
-  });
-  $sortSet = computed(() => {
-    const sorts = this.state.$selectSorted();
-    if(!sorts.length) return false;
-    const preSorts = this.state.$preSort();
-    if(!preSorts.length) return true;
-    return !sortsAreSame(preSorts, sorts);
-  });
-  $groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups());
-  $hiddenSet = computed(() => this.state.$hiddenKeys().length);
-  $orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length);
-  $widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length);
-  $rowHeightSet = this.state.$userDefinedRowHeight;
-  headerHeightSet = this.state.$userDefinedHeaderHeight;
-  pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)());
-  showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
-  $set = computed(() => {
-    const arr: (typeof resetable[number])[] = [] as (typeof resetable[number])[];
-    if(this.$filtersSet()){
-      arr.push('Filters')
-    }
-    if(this.$sortSet()){
-      arr.push('Sorting')
-    }
-    if(this.$groupBySet()){
-      arr.push('Group By')
-    }
-    if(this.$hiddenSet()){
-      arr.push('Hidden Columns')
-    }
-    if(this.$orderSet()){
-      arr.push('Column Order')
-    }
-    if(this.$widthsSet()){
-      arr.push('Column Widths')
-    }
-    if(this.$rowHeightSet()){
-      arr.push('Row Height')
-    }
-    if(this.headerHeightSet()){
-      arr.push('Header Height')
-    }
-    if(this.pageSizeSet()){
-      arr.push('Page Size')
-    }
-    if(this.showAllSet()){
-      arr.push('Show All')
-    }
-    return arr;
-  })
-
-  resetable = resetable;
-  reset(s: string){
-    this.state.resetPart(s as any);
-  }
-}

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

@@ -1,139 +0,0 @@
-import {
-  CdkVirtualScrollViewport,
-  VirtualScrollStrategy,
-} from '@angular/cdk/scrolling';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { subscriber } from '../../rxjs';
-import { VirtualScrollContainer } from './table-container/virtual-scroll-container';
-import { effect, linkedSignal, signal, Signal, untracked } from '@angular/core';
-import { DataStore } from '../classes/data-store';
-
-export class TableVirtualScrollStrategy implements VirtualScrollStrategy {
-  constructor(scrollContainer: VirtualScrollContainer, dataStore: DataStore) {
-    this.$rowHeight = scrollContainer.computedRowHeight;
-    this.$headerHeight = scrollContainer.computedHeaderHeight;
-    this.viewport = scrollContainer.viewport;
-    this.dataStore = dataStore;
-    this.$dataLength = scrollContainer.$dataLength;
-  }
-  private dataStore: DataStore;
-  private readonly indexChange = new Subject<number>();
-  scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
-  private viewport: Signal<CdkVirtualScrollViewport>;
-
-  private $dataLength: Signal<number>;
-  $dataLengthChange = linkedSignal<number, {curr: number, previous: number }>({
-    source: () => this.$dataLength(),
-    computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
-  });
-  $rowHeight: Signal<number>;
-  $rowHeightChange = linkedSignal<number, {curr: number, previous: number }>({
-    source: () => this.$rowHeight(),
-    computation: (curr, previous) => {
-      return ({ curr, previous: previous == undefined ? curr : previous.source })}
-  });
-
-  $headerHeight: Signal<number>;
-  $headerHeightChange = linkedSignal<number, {curr: number, previous: number }>({
-    source: () => this.$headerHeight(),
-    computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
-  });
-
-  contentScrolled$ = new Subject<number>();
-  sub = subscriber(this.contentScrolled$.pipe(
-    debounceTime(20),
-    distinctUntilChanged()
-  ), offset => {
-    this.updateContent('scroll')
-  })
-  onContentScrolled(): void {
-    this.contentScrolled$.next(this.viewport().measureScrollOffset());
-  }
-
-  #onDataLengthChange = effect(() => {
-    const dataLengthChange = this.$dataLengthChange();
-    untracked(() => {
-      if(dataLengthChange.curr === dataLengthChange.previous) return;
-      this.updateContent('data length')
-    });
-  })
-
-  #onHeaderChange = effect(() => {
-    const headerHeightChange = this.$headerHeightChange();
-    untracked(() => {
-      if(headerHeightChange.curr === headerHeightChange.previous) return;
-      this.updateContent('header height')
-    });
-  })
-
-  #onRowChange = effect(() => {
-    const rowHeightChange = this.$rowHeightChange();
-    untracked(() => {
-      if(rowHeightChange.curr === rowHeightChange.previous) return;
-      this.updateContent('row height')
-    })
-  });
-
-  $currentRange = signal({ start: 0, end: 0 })
-
-  private updateContent(trigger: ScrollStrategyTrigger): void {
-    const viewport = this.viewport && this.viewport()
-    if(!viewport || !this.$rowHeight) {
-      return;
-    }
-    const currentContentHeight = +viewport._totalContentHeight().replace('px', '');
-    const newContentHeight = this.$dataLength() * this.$rowHeight();
-    if(currentContentHeight !== newContentHeight){
-      viewport.setTotalContentSize(newContentHeight);
-      this.update(trigger, viewport, true)
-      return;
-    }
-    this.update(trigger, viewport)
-  }
-  update(trigger: ScrollStrategyTrigger, viewport: CdkVirtualScrollViewport, needsScroll = false){
-    if(!viewport.getViewportSize()) return;
-
-    const rowHeightChangeEvent = this.$rowHeightChange();
-    const rowHeight = rowHeightChangeEvent.curr;
-    const rowHeightAdjustment = trigger === 'row height' ? rowHeightChangeEvent.curr / rowHeightChangeEvent.previous : 1;
-
-    const amountOfRows = Math.ceil((viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
-    const f = viewport.measureScrollOffset();
-    const offset = viewport.measureScrollOffset() * rowHeightAdjustment;
-
-    const buffer = 35 + Math.round((40 - rowHeight) / 10);
-    const skip = Math.round(offset / rowHeight);
-    const index = skip % 2 === 0 ? skip : skip - 1;
-    const start = Math.max(0, index - buffer);
-    const end = Math.min(this.$dataLength(), index + amountOfRows + buffer);
-
-    if(start > this.$dataLength()){
-      this.viewport().scrollToOffset(0)
-    }
-    else if(f !== offset){
-      if(offset < f) viewport.scrollToOffset(offset);
-      else setTimeout(() => {
-        viewport.scrollToOffset(offset)
-      }, 0);
-    }
-    if(this.$currentRange().start === start && this.$currentRange().end === end){
-      return;
-    }
-    this.$currentRange.set({ start, end });
-    viewport.setRenderedContentOffset(rowHeight * start);
-    this.dataStore.patchState({ virtualScrollOffset: offset });
-    viewport.setRenderedRange({ start, end });
-
-    this.indexChange.next(index);
-  }
-
-  attach(viewport: CdkVirtualScrollViewport): void {}
-  onDataLengthChanged(): void {}
-  detach(): void {}
-  onContentRendered(): void {}
-  onRenderedOffsetChanged(): void {}
-  scrollToIndex(index: number, behavior: ScrollBehavior): void {}
-}
-
-type ScrollStrategyTrigger = 'scroll' | 'data length' | 'header height' | 'row height';

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

@@ -1,57 +0,0 @@
-import { Injectable, effect, inject, untracked } from '@angular/core';
-import { Sort } from '@angular/material/sort';
-import { ComponentStore } from '@ngrx/component-store';
-import { TableStore } from '../../classes/table-store';
-import { FieldType } from '../../interfaces/meta-data';
-
-@Injectable()
-export class SortMenuComponentStore extends ComponentStore<ComponentStoreState> {
-  private tableState = inject(TableStore);
-  setStoreStateEffect = effect(() => {
-    const metaData = this.tableState.$metaData();
-    if(!metaData) return;
-    this.tableState.$selectSorted();
-    untracked(() => this.setStateFromTableStore());
-  });
-
-  setStateFromTableStore = () => {
-    const metaData = this.tableState.$metaData();
-    const sorted = [...this.tableState.$selectSorted()].map(s => ({
-      ...s,
-      displayName: metaData[s.active]?.displayName
-    } as SortWithName));
-    const notSorted = this.tableState.$metaDataArray()
-      .filter(md => (md.fieldType !== FieldType.NotMapped || md.sortLogic?.sortBy) && !md.noSort && !sorted.some(s => s.active === md.key))
-      .map(meta => ({ active: meta.key, displayName: meta.displayName } as SortWithName));
-    this.setState({ sorted, notSorted })
-  }
-  constructor(){
-    super({ notSorted: [], sorted: [] })
-  }
-
-  setSorted = this.updater((state, sorted: SortWithName[]) => ({ ...state, sorted }));
-  setNotSorted = this.updater((state, notSorted: SortWithName[]) => ({ ...state, notSorted }));
-
-  $sorted = this.selectSignal(state => state.sorted);
-  $notSorted = this.selectSignal(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 });
-  });
-
-  reset = () => {
-    this.setStateFromTableStore();
-  }
-}
-
-export interface ComponentStoreState {
-  sorted : SortWithName[];
-  notSorted: SortWithName[];
-}
-
-export interface SortWithName extends Sort{
-  displayName : string;
-}

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

@@ -1,115 +0,0 @@
-@let dirty = $dirty();
-@let sorted = $sorted();
-@let notSorted = $notSorted();
-
-<!-- Menu Trigger -->
-<span matTooltip="Sort">
-  <button color="primary" 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" stop-propagation
-      [class.apply-border]="dirty" [disabled]="!dirty"
-      (click)="apply()">
-        Apply @if (dirty) { Unsaved Changes }
-    </button>
-  </div>
-
-  <!-- Default Sorting Text -->
-  @if (!sorted.length)
-  {
-    <div class="tip" >
-      Sorting List
-    </div>
-  }
-
-  <!-- Sorted Menu List -->
-  <div #sortedGroup="cdkDropList"
-    class="list"
-    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 class="up-down-icon" [class]="sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'">
-              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 class="up-down-icon" [class]="sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'">
-                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 #notSortedGroup="cdkDropList"
-    class="list"
-    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>