@one-paragon/angular-utilities 2.8.4 → 2.8.5

package/src/table-builder/components/group-by-list/group-by-list.component.html

@@ -1,21 +0,0 @@
-<span class="tb-group-label">Group By:</span>
-<mat-chip-set>
-  @for (groupBy of $groups(); track groupBy.key)
-  {
-    @if($index > 0)
-    {
-      <mat-icon class="nested-arrow">arrow_right</mat-icon>
-    }
-    <mat-chip (removed)="tableStore.removeGroupByKey(groupBy.key)">
-      <span class="chip-c">
-        {{groupBy.name | spaceCase}}
-        <mat-icon stop-propagation class="sort-icon" (click)="tableStore.cycleGroupBySortDirection(groupBy.key)">
-          @if (groupBy.sort === 'asc'){ arrow_upward }
-          @else if (groupBy.sort === 'desc') { arrow_downward } 
-          @else { swap_vert }
-        </mat-icon>
-      </span>
-      <mat-icon matChipRemove>cancel</mat-icon>
-    </mat-chip>
-  }
-</mat-chip-set>

package/src/table-builder/components/group-by-list/group-by-list.component.spec.ts

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

package/src/table-builder/components/group-by-list/group-by-list.component.ts

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { TableStore } from '../../classes/table-store';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
-
-@Component({
-  selector: 'group-by-list',
-  templateUrl: './group-by-list.component.html',
-  styleUrls: ['./group-by-list.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
-  ]
-})
-export class GroupByListComponent {
-  tableStore = inject(TableStore);
-  $groups = computed(() => {
-    const dict = this.tableStore.$metaData();
-    return this.tableStore.$groupByData().map(gbk => ({
-      key: gbk.key,
-      name: dict[gbk.key].displayName || gbk.key,
-      sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
-    }))
-  })
-}

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

@@ -1,22 +0,0 @@
-.inline{
-  display: inline-block;
-}
-.small-button {
-  height: 18px;
-  width: 18px;
-  font-size: 18px;
-  padding: 0;
-  margin: 0;
-  ::ng-deep * {
-    line-height: initial;
-    font-size: initial;
-    height: 18px;
-    width: 18px;
-    font-size: 18px;
-    bottom: initial;
-
-  }
-}
-button{
-  cursor: pointer;
-}

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

@@ -1,38 +0,0 @@
-<div class=inline>
-  @for (val of value; track $index)
-  {
-    <div>
-      @if($type() === FieldType.Number || $type() === FieldType.Currency)
-      {
-        <input type="number" [ngModel]="val"
-          [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
-          [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index, $event)"/>
-      }
-      @else if($type() === FieldType.Date)
-      {
-        <input matInput name="filterValue" [ngModel]="val" [matDatepicker]="cal"
-          [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
-          [autoFocus]="$index === value.length - 1" (dateChange)="onValueChange($index, $event.value)"/>
-        <mat-datepicker-toggle class="small-button date-toggle" matSuffix preventEnter [for]="cal" />
-        <mat-datepicker #cal />
-      }
-      @else if($type() === FieldType.DateTime)
-      {
-        <input type="datetime-local" preventEnter [ngModel]="val"
-          [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
-          [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index, $event)"/>
-      }
-      @else
-      {
-        <input type="string"
-          [ngModel]="val" [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
-          [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index ,$event)" />
-      }
-    </div>
-    <button [disabled]="value.length <= 1" (click)="removeInput($index)">-</button>
-    @if ($index === value.length - 1)
-    {
-      <button [disabled]="val == undefined || val === ''" (click)="addInput()">+</button>
-    }
-  }
-</div>

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

@@ -1,66 +0,0 @@
-import { ChangeDetectionStrategy, Component, ChangeDetectorRef, inject, input } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { FieldType } from '../../interfaces/meta-data';
-import { AutoFocusDirective } from '../../../utilities';
-import { MatDatepickerModule } from "@angular/material/datepicker";
-
-@Component({
-  selector: 'lib-in-filter',
-  templateUrl: './in-filter.component.html',
-  styleUrl: './in-filter.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: InFilterComponent,
-    multi: true
-  }],
-  imports: [
-    FormsModule, AutoFocusDirective, MatDatepickerModule
-  ]
-})
-export class InFilterComponent implements ControlValueAccessor {
-  private ref = inject(ChangeDetectorRef);
-
-  FieldType = FieldType;
-  $type = input.required<FieldType>({ alias: 'type' })
-  value: (string | number | undefined)[] = [undefined];
-
-  constructor() {
-    this.value = [undefined];
-  }
-  writeValue(obj: any[]): void {
-    if(!obj?.length) obj = [undefined];
-    this.value = obj;
-    this.ref.markForCheck();
-  }
-  onChange = (_: any) => { };
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  onTouched = () => { };
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  addInput(){
-    this.value = [...this.value, undefined];
-    this.ref.markForCheck();
-    this.onChange(this.value);
-  }
-
-  removeInput(index: number){
-    this.value = [...this.value];
-    this.value.splice(index, 1);
-    this.ref.markForCheck();
-    this.onChange(this.value);
-  }
-
-  onValueChange(i:number, value: number | string){
-    this.value = [...this.value];
-    this.value[i] = value;
-    this.ref.markForCheck();
-    this.onChange(this.value);
-  }
-
-}

package/src/table-builder/components/index.ts

@@ -1,9 +0,0 @@
-export * from './date-filter/date-filter.component';
-export * from './filter/filter.component';
-export * from './gen-col-displayer/gen-col-displayer.component';
-export * from './table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
-export * from './table-container-filter/filter-list/filter-list.component';
-export * from './generic-table/generic-table.component';
-export * from './table-container/table-container.component';
-export * from './generic-table/paginator.component';
-export * from './group-by-list/group-by-list.component';

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

@@ -1,78 +0,0 @@
-<ng-template #link  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
-  @let link = additional.link | func : element;
-  @if(link)
-  {
-    <tb-link-column [element]="element" [additional]="additional" [link]="$any(link)">
-      <span [styler]="styles" [element]="element">{{value}}</span>
-    </tb-link-column>
-  }
-  @else
-  {
-    <span [styler]="styles" [element]="element">{{value}}</span>
-  }
-</ng-template>
-
-<ng-template #routerLink  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
-  @let link = additional.link | func : element;
-  @if(link)
-  {
-    <tb-router-link-column [element]="element" [additional]="additional" [link]="$any(link)">
-      <span [styler]="styles" [element]="element">{{value}}</span>
-    </tb-router-link-column>
-  }
-  @else
-  {
-    <span [styler]="styles" [element]="element">{{value}}</span>
-  }
-
-</ng-template>
-
-<ng-template #linkWithIcon  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
-  @let link = additional.link | func : element;
-  @if(link)
-  {
-    <tb-link-column [element]="element" [additional]="additional"  [link]="$any(link)">
-      <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
-    </tb-link-column>
-  }
-  @else
-  {
-    <span [styler]="styles" [element]="element">{{value}}</span>
-  }
-</ng-template>
-
-<ng-template #routerLinkWithIcon  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
-  @let link = additional.link | func : element;
-  @if(link)
-  {
-    <tb-link-column [element]="element" [additional]="additional"  [link]="$any(link)">
-      <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
-    </tb-link-column>
-  }
-  @else
-  {
-    <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
-  }
-</ng-template>
-
-<ng-template #imageUrl  let-value='value'>
-  <span>
-    <img height="75px" width="75px" [src]="value" />
-  </span>
-</ng-template>
-
-<ng-template #arrayNewLine let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
-  <tb-new-line-array-column [value]='value' [additional]='additional' [styler]="styles" [element]="element"/>
-</ng-template>
-
-<ng-template #arrayComma let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
-  <tb-comma-array-column [value]='value' [additional]='additional' [styler]="styles" [element]="element"/>
-</ng-template>
-
-<ng-template #default let-value='value' let-element='element' let-styles="innerStyles">
-  <span [styler]="styles" [element]="element">{{value}}</span>
-</ng-template>
-
-<ng-template #defaultWithIcon  let-value='value' let-element='element' let-styles="innerStyles">
-  <mat-icon [styler]="styles" [element]="element">{{value}}</mat-icon>
-</ng-template>

package/src/table-builder/components/initialization-component/initialization.component.ts

@@ -1,28 +0,0 @@
-import { Component, TemplateRef, viewChild, ChangeDetectionStrategy } from "@angular/core";
-import { LinkColumnComponent, RouterLinkColumnComponent } from "../link-column.component";
-import { ArrayCommaColumnComponent, ArrayNewLineColumnComponent } from "../array-column.component";
-import { MatIcon } from "@angular/material/icon";
-import { StylerDirective } from "../../../utilities/directives/styler";
-import { FunctionPipe } from "../../../utilities";
-
-@Component({
-  selector: 'initialization',
-  templateUrl: './initialization.component.html',
-  imports: [
-    LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
-    RouterLinkColumnComponent, ArrayNewLineColumnComponent,
-    StylerDirective, FunctionPipe
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class InitializationComponent {
-  $linkTemplate = viewChild.required<TemplateRef<any>>('link');
-  $routerLinkTemplate = viewChild.required<TemplateRef<any>>('routerLink');
-  $linkWithIconTemplate = viewChild.required<TemplateRef<any>>('linkWithIcon');
-  $routerLinkWithIconTemplate = viewChild.required<TemplateRef<any>>('routerLinkWithIcon');
-  $imageUrlTemplate = viewChild.required<TemplateRef<any>>('imageUrl');
-  $arrayNewLineTemplate = viewChild.required<TemplateRef<any>>('arrayNewLine');
-  $arrayCommaTemplate = viewChild.required<TemplateRef<any>>('arrayComma');
-  $defaultTemplate = viewChild.required<TemplateRef<any>>('default');
-  $defaultWithIcon = viewChild.required<TemplateRef<any>>('defaultWithIcon');
-}

package/src/table-builder/components/link-column.component.ts

@@ -1,42 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { LinkInfo } from "../services/link-creator.service";
-
-@Component({
-  selector: "tb-router-link-column",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    RouterModule
-  ],
-  template: `
-  <a target="{{additional().target}}"
-    [routerLink]=" [link()]"
-    [queryParams]="queryParams()"
-    [fragment]="routerLinkOptions().fragment"
-    [preserveFragment]="routerLinkOptions().preserveFragment"
-    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
-  >
-    <ng-content></ng-content>
-  </a>
-  `
-}) export class RouterLinkColumnComponent {
-  additional = input.required<LinkInfo>();
-  element = input.required<any>();
-  queryParams = computed(() => this.additional().routerLinkOptions!.queryParams(this.element()));
-  routerLinkOptions = computed(() => this.additional().routerLinkOptions!);
-  link = input.required<string>();
-}
-
-@Component({
-  selector: "tb-link-column",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-  <a target="{{additional().target}}" href="{{link()}}">
-    <ng-content></ng-content>
-  </a>
-  `
-}) export class LinkColumnComponent {
-  element = input.required<any>();
-  additional = input.required<LinkInfo>();
-  link = input.required<string>();
-}

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,32 +0,0 @@
-@let currentFilterType = $currentFilterType();
-@let info = $info();
-
-@if(currentFilterType !== FilterType.NumberBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)
-{
-  <mat-form-field class="my-filter">
-    <input matInput name="filterValue" type="number" [ngModel]="info.filterValue"/>
-  </mat-form-field>
-}
-@if(currentFilterType === FilterType.NumberBetween)
-{
-  <ng-container ngModelGroup="filterValue"  >
-    <mat-form-field class="my-filter">
-      <input matInput name="Start" placeholder="Start" type="number" [ngModel]="info.filterValue?.Start"/>
-    </mat-form-field>
-    <mat-form-field class="my-filter">
-      <input matInput name="End" placeholder="End" type="number" [ngModel]="info.filterValue?.End"/>
-    </mat-form-field>
-  </ng-container>
-}
-
-@if(currentFilterType === FilterType.In)
-{
-  @if($allValuesInMeta())
-  {
-    <tb-in-list-filter name="filterValue" [key]="info.key" [values]="info.filterValue" [(ngModel)]="info.filterValue" />
-  }
-  @else
-  {
-    <lib-in-filter name="filterValue" [type]="FieldType.Date" [(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,34 +0,0 @@
-import { Component, ChangeDetectionStrategy, input, inject, computed } from '@angular/core';
-import { FilterType } from '../../enums/filterTypes';
-import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
-import { PartialFilter } from '../../classes/filter-info';
-import { AllValueOptions, FieldType } from '../../interfaces/meta-data';
-import { MatInputModule } from '@angular/material/input';
-import { InFilterComponent } from '../in-filter/in-filter.component';
-import { TableStore } from '../../classes/table-store';
-import { InListFilterComponent } from '../filter/in-list/in-list-filter.component';
-
-
-@Component({
-  selector: 'tb-number-filter',
-  templateUrl: './number-filter.component.html',
-  styleUrl: './number-filter.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
-  imports: [
-    MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
-  ]
-})
-export class NumberFilterComponent {
-  FilterType = FilterType;
-  FieldType = FieldType;
-  $currentFilterType = input.required<FilterType>({ alias: 'currentFilterType' });
-  $info = input.required<PartialFilter>({ alias: 'info' });
-
-  private state = inject(TableStore)
-  $metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
-  $allValuesInMeta = computed(() => {
-    const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
-    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
-  });
-}

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

@@ -1,77 +0,0 @@
-@if(!$isMatMenuChild())
-{
-  <button #trigger="matMenuTrigger" color="primary" mat-icon-button [matMenuTriggerFor]="menu" [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 mat-stroked-button [matTooltip]="'Save Profile'" (click)="saveState($currentProfile()!)">
-      <mat-icon color="primary">save</mat-icon>
-      <span>{{$currentProfile()}}</span>
-    </div>
-  }
-  @else
-  {
-    <div class="profile-line">
-      <button color="primary" 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 stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Created As Default'" (click)="m.toggle()" >
-        <mat-icon style="color: green;">{{m.checked ? 'star' : 'star_border'}}</mat-icon>
-      </button>
-      <mat-checkbox #m class="display-none" [checked]="true" />
-    </div>
-  }
-  @if (allProfilesPanelOpened()) {<hr class="divider"/>}
-  <div mat-menu-item stop-propagation [class]="{ hide: !$keys().length, 'all-profile-row': true }" (click)="allProfilesPanelOpened.set(!allProfilesPanelOpened())">
-    <div class="all-profiles">
-      <span>All Profiles</span>
-      <span class="arrow" [class]="`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`"></span>
-    </div>
-  </div>
-  <div [class]="{ hide: !allProfilesPanelOpened(), panel: true }">
-    @for (key of $keys() ; track key)
-    {
-      <div class="profile-line" [class]="key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'">
-        <button class="menu-item first-in-line" mat-stroked-button [matTooltip]="'Select Profile'" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>
-          <span>{{key}}</span>
-        </button>
-        @if(key !== $defaultProfile())
-        {
-          <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Default'" (click)="setDefault(key)">
-            <mat-icon style="color: green;">star_border</mat-icon>
-          </button>
-        }
-        @else
-        {
-          <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Default'" (click)="unsetDefault()">
-            <mat-icon style="color: green;">star</mat-icon>
-          </button>
-        }
-        <button color="warn" class="last-in-line" stop-propagation mat-icon-button [matTooltip]="'Delete Profile'" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>
-          <mat-icon color='warn'>delete_forever</mat-icon>
-        </button>
-      </div>
-    }
-    <hr class="divider"/>
-  </div>
-  <div class="add-new-profile-row" 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 #addedKey="matInput" matInput [name]="'key'" />
-      </div>
-      <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Created As Default'" (click)="m2.toggle()" >
-        <mat-icon style="color: green;">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>
-      </button>
-      <mat-checkbox #m2 class="display-none" [ngModel]="!$defaultProfile()" />
-    </div>
-    <button class="add-button" color="primary" mat-raised-button [matTooltip]="'Create New Profile'" [disabled]="!addedKey.value" (click)="addState(addedKey.value, m2.checked); addedKey.value = null">
-      Add
-    </button>
-  </div>
-</mat-menu>