@one-paragon/angular-utilities 1.2.17 → 1.2.18

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

@@ -0,0 +1,47 @@
+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",
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterModule
+  ],
+  template: `
+  <a target="{{additional().target}}"
+    [routerLink]=" [link()]"
+    [queryParams]="queryParams()"
+    [fragment]="routerLinkOptions().fragment"
+    [preserveFragment]="routerLinkOptions().preserveFragment"
+    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
+  >
+    {{value()}}
+  </a>
+  `
+})export class RouterLinkColumnComponent {
+  additional =  input.required<LinkInfo>();
+  element = input.required<any>();
+  value = input.required<string>();
+  link = computed(() => this.additional().link(this.element()));
+  queryParams = computed(() => this.additional().routerLinkOptions!.queryParams(this.element()));
+  routerLinkOptions = computed(() => this.additional().routerLinkOptions!);
+}
+
+@Component({
+  selector: "tb-link-column",
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <a target="{{additional().target}}"
+      href="{{link()}}">
+      {{value()}}
+  </a>
+  `
+})export class LinkColumnComponent {
+  value = input.required<string>();
+  element = input.required<any>();
+  additional =  input.required<LinkInfo>();
+  link = computed(() => this.additional().link(this.element()));
+}

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

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

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

@@ -0,0 +1,19 @@
+@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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,78 @@
+<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, 'all-profile-row': true }" mat-menu-item stop-propagation (click)="allProfilesPanelOpened.set(!allProfilesPanelOpened())">
+    <div class="all-profiles">
+      <span>All Profiles</span>
+      <span [class]="(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open') + ' all-profile-arrow'" class="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 [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>
+  <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 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

@@ -0,0 +1,126 @@
+
+: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;
+}
+.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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,111 @@
+<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>