@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
+
+@Component({
+  selector: 'tb-comma-array-column',
+    template: `
+  @for(val of displayArray(); track $index){
+          {{val + (!$last ? ',' : '')}}
+        }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayCommaColumnComponent {
+
+  value = input.required<(string | number)[]>();
+  additional = input(3);
+  displayArray = computed(() => (this.value() || []).slice(0, this.additional()))
+}
+
+
+@Component({
+  selector: 'tb-new-line-array-column',
+    template: `
+  @for(val of displayArray(); track $index){
+          {{val}}
+          @if(!$last){ <br/> }
+        }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayNewLineColumnComponent {
+  value = input.required<(string | number)[]>();
+  additional = input(3);
+  displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
+}

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

@@ -0,0 +1,69 @@
+@let metaData = $metaData();
+@let customCell = $customCell();
+@let styles = $styles()!;
+
+@if(metaData)
+{
+  <ng-container [matColumnDef]="metaData.key">
+
+    <!-- header -->
+    <ng-template matHeaderCellDef #myHeader>
+      <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]="metaData.key" class="column-head"
+        [class]='metaData.additional?.columnPartClasses?.header'>
+        <div class="header-container" cdkDragHandle>
+          @if(!customCell?.columnDef?.headerCell)
+          {
+              @if(metaData.fieldType !== FieldType.NotMapped){
+                <div mat-sort-header [disabled]="metaData.noSort" style="width: 100%">
+                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+                </div>
+              } @else if(metaData.fieldType === FieldType.NotMapped){
+                <div style="width: 100%">
+                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+                </div>
+              }
+              @if($showFilters()){
+                <tb-header-menu #menu [metaData]='metaData' />
+              }
+          }
+          @else
+          {
+            <ng-container *ngTemplateOutlet="customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} ">
+            </ng-container>
+          }
+        </div>
+      </mat-header-cell>
+    </ng-template>
+  
+    <!-- body -->
+    <ng-container *matCellDef="let element;">
+      <ng-container *ngTemplateOutlet="$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }"/>
+    </ng-container>
+    <ng-template #body let-element='element' >
+      <mat-cell  [matTooltip]="metaData.toolTip ? (getTooltip | func : element) : ''"  [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >
+        <ng-container *ngTemplateOutlet="$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; Injector: injector" />
+      </mat-cell>
+    </ng-template>
+  
+    <!-- footer -->
+    <ng-template matFooterCellDef>
+      @if(customCell?.columnDef?.footerCell){
+        <ng-container
+        *ngTemplateOutlet="customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }"/>
+      } @else {
+        @let data = $data();
+        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>
+          @if(!!data?.length && metaData.additional?.footer){
+            <span class="bold">
+              @switch (metaData.fieldType) {
+                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }
+                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }
+              }
+            </span>
+          }
+  
+        </mat-footer-cell>
+      }
+    </ng-template>
+  </ng-container>
+}

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

@@ -0,0 +1,43 @@
+.header-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+}
+
+.negative-currency {
+  color: red;
+}
+
+.column-head{
+  position: relative;
+}
+
+.bold,
+.group-footer {
+  font-weight: 900;
+}
+
+.cdk-drag-preview {
+  background: white;
+  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: 33%;
+  border-right-width: 0px;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.drag-handle{
+  color:lightblue;
+  cursor: move;
+  margin-right: 9px;
+}
+
+

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

@@ -0,0 +1,49 @@
+import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, waitForAsync } from '@angular/core/testing';
+import { ColumnBuilderComponent } from './column-builder.component';
+import { FieldType } from '../../interfaces/report-def';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { PhoneNumberPipe } from 'projects/angular-utilities/src/utilities';
+import { MatTable } from '@angular/material/table';
+
+const initialState = {fullTableState: {
+  'test-id': {
+    metaData: [],
+    hiddenKeys: [],
+    pageSize: 10,
+    initialized : true ,
+  }
+}};
+
+
+describe('ColumnBuilderComponent', () => {
+  let component: ColumnBuilderComponent;
+  let fixture: ComponentFixture<ColumnBuilderComponent>;
+
+  beforeEach(waitForAsync(() => {
+     TestBed.configureTestingModule({
+      declarations: [ ColumnBuilderComponent, SpaceCasePipe ],
+      providers: [
+        { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+        { provide: MatTable, useValue: {addColumnDef:(colDef) => {}}},
+        provideMockStore({ initialState }),
+        DatePipe,
+        CurrencyPipe,
+        PhoneNumberPipe,
+      ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColumnBuilderComponent);
+    component = fixture.componentInstance;
+    component.metaData = { key: 'key', fieldType: FieldType.String };
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,128 @@
+import { Component, ChangeDetectionStrategy, TemplateRef, Predicate, Injector, computed, inject, viewChild, signal, Signal } from '@angular/core';
+import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
+import { MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
+import { CustomCellDirective, ResizeColumnDirective } from '../../directives';
+import { TransformCreator } from '../../services/transform-creator';
+import { TableStore } from '../../classes/table-store';
+import { TableTemplateService } from '../../services/table-template-service';
+import { CdkDropList, CDK_DROP_LIST, DragDropModule } from '@angular/cdk/drag-drop';
+import { Dictionary } from '@ngrx/entity';
+import { CurrencyPipe, DecimalPipe, NgTemplateOutlet } from '@angular/common';
+import { ConditionalClassesDirective, FunctionPipe, SpaceCasePipe } from '../../../utilities';
+import { MatSortModule } from '@angular/material/sort';
+import { HeaderMenuComponent } from '../header-menu/header-menu.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ColumnTotalPipe } from '../../pipes/column-total.pipe';
+import { StylerDirective } from '../../../utilities/directives/styler';
+import { columnStyles } from './column-helpers';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+
+@Component({
+  templateUrl: './column-builder.component.html',
+  styleUrls: ['./column-builder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    { provide: CDK_DROP_LIST, useExisting: CdkDropList },
+  ],
+    imports: [
+    MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
+    ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
+    MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
+  ]
+})
+export class ColumnBuilderComponent {
+  FieldType = FieldType;
+  private transformCreator = inject(TransformCreator);
+  private table = inject<MatTable<any>>(MatTable);
+  private state = inject(TableStore);
+  private templateService = inject(TableTemplateService);
+  private tableConfig = inject(TableBuilderConfigToken);
+  protected injector = inject(Injector);
+
+  $columnDef = viewChild(MatColumnDef);
+  $bodyTemplate = viewChild<TemplateRef<any>>('body');
+  protected $metaData = signal<MetaData | undefined>(undefined);
+  $additional = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    if(metaData.fieldType === FieldType.Link){
+      return this.state.$getLinkInfo(metaData)();
+    }
+    if(metaData.fieldType === FieldType.Array){
+      return (metaData.additional as ArrayAdditional)?.limit || this.tableConfig?.arrayDefaults?.limit;
+    }
+    return undefined;
+  });
+  setMetaData(md: MetaData){
+    this.$metaData.set(md);
+  }
+  $customCell = signal<CustomCellDirective | undefined>(undefined);
+  $data!: Signal<any[]>;
+
+  $transform = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    return this.transformCreator.createTransformer(metaData)
+  });
+  $innerTemplate = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
+  });
+  $showFilters = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    const settings = this.state.$tableSettings();
+    return !(settings.hideColumnHeaderFilters || metaData.noFilter)
+  });
+  $outerTemplate = computed(() => {
+    return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
+  });
+  $classes: Signal<Dictionary<Predicate<any>>| undefined> = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return;
+    if(metaData.fieldType === FieldType.Currency) {
+      return ({
+        ['negative-currency']: (element) => element[metaData.key] < 0,
+        ...metaData.classes
+      })
+    }
+      return  metaData.classes;
+  });
+  $styles = computed(() => {
+    const metaData = this.$metaData();
+    if(!metaData) return
+    return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
+  });
+
+  private viewInited = false;
+  ngAfterViewInit() {
+    this.table.addColumnDef(this.$columnDef()!);
+    this.onViewInit();
+    this.viewInited = true;
+  }
+  private onViewInit: () => void = () => {};
+  whenViewInited = (callback: () => void) => {
+    if(this.viewInited) {
+      callback();
+      return;
+    }
+    this.onViewInit = callback;
+  }
+
+  cellClicked(element: any, key: string) {
+    const metaData = this.$metaData();
+    if(metaData?.click) {
+      metaData.click(element,key);
+    }
+  }
+
+  getTooltip = (element: any) => {
+    const metaData = this.$metaData();
+    if(!metaData?.toolTip) return;
+    if(typeof metaData.toolTip === 'string') {
+      return metaData.toolTip;
+    }
+    return metaData.toolTip!(element);
+  }
+}

package/src/table-builder/components/column-builder/column-helpers.ts

@@ -0,0 +1,52 @@
+import {Dictionary} from "@ngrx/entity";
+import {MetaData, metaDataArrToDict} from "../../interfaces/report-def";
+import {StylerStyle} from "../../../utilities/directives/styler";
+
+export const calculateWidths = (metaData: MetaData, userDefinedWidth: number | undefined) => {
+  const definedWidth = (userDefinedWidth && `${userDefinedWidth}px`) || metaData.width;
+  return definedWidth;
+}
+
+export function calculateUserDefinedWidth(userDefinedWidth: number | undefined){
+  if(userDefinedWidth) return {flex: `0 0 ${userDefinedWidth}px`, maxWidth: 'none' };
+  return undefined;
+}
+
+export function calculateTableDefinedWidth(metaData: MetaData, tableSettingsMinWidth: number | undefined){
+  if(metaData.width) return ({flex: `0 0 ${metaData.width}`, maxWidth: 'none'});
+  const style = { flex: `${1}`};
+  if(tableSettingsMinWidth) style['minWidth'] = `${tableSettingsMinWidth}px`;
+  return style;
+}
+
+export const calculateFlexWidth = (metaData: MetaData, userDefinedWidth: number | undefined, tableSettingsMinWidth: number | undefined) => {
+  const definedWidth = calculateWidths(metaData, userDefinedWidth);
+  if(definedWidth) return ({flex: `0 0 ${definedWidth}`, maxWidth: 'none' });
+  const style = { flex: `${1}`};
+  if(tableSettingsMinWidth) style['minWidth'] = `${tableSettingsMinWidth}px`;
+  return style;
+}
+
+export const columnStyles = (metaData: MetaData, userDefinedWidth: number | undefined, tableSettingsMinWidth?: number | undefined) => {
+  const fullMetaStyles = metaData.additional?.styles ?? {};
+  const userWidth = calculateUserDefinedWidth(userDefinedWidth) ?? {};
+  const tableWidth = userDefinedWidth ? {} : calculateTableDefinedWidth(metaData, tableSettingsMinWidth);
+  const styles: {
+    header: Dictionary<string>;
+    body: StylerStyle;
+    footer: Dictionary<string>;
+  } = {
+    header: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.header, ...userWidth},
+    footer: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.footer, ...userWidth},
+    body: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.body, ...userWidth},
+  };
+  return styles;
+}
+
+export const calculateFlexWidths = (metaDatas: MetaData[], userDefinedWidths: Dictionary<number>, tableSettingsMinWidth: number | undefined) => {
+  return metaDataArrToDict(metaDatas, md => calculateFlexWidth(md, userDefinedWidths[md.key], tableSettingsMinWidth));
+}
+
+export const columnsStyles = (metaDatas: MetaData[], userDefinedWidths: Dictionary<number>) => {
+  return metaDataArrToDict(metaDatas, md => columnStyles(md, userDefinedWidths[md.key]));
+}

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

@@ -0,0 +1,23 @@
+@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {
+  <mat-form-field>
+    <input matInput name="filterValue" [ngModel]="info.filterValue" [matDatepicker]="cal"/>
+    <mat-datepicker-toggle class="small-button date-toggle" matSuffix [for]="cal" preventEnter />
+    <mat-datepicker #cal />
+  </mat-form-field>
+}
+@if(CurrentFilterType === FilterType.DateBetween){
+  <ng-container ngModelGroup="filterValue">
+    <mat-form-field class="my-filter" >
+      <input matInput name="Start" [ngModel]="info.filterValue?.Start"  placeholder="From" [matDatepicker]="fromVal"
+          (click)="fromVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" [for]="fromVal" preventEnter />
+      <mat-datepicker #fromVal></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput name="End" [ngModel]="info.filterValue?.End"  placeholder="To" [matDatepicker]="toVal" (click)="toVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" [for]="toVal" preventEnter />
+      <mat-datepicker #toVal />
+    </mat-form-field>
+  </ng-container>
+}
+

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

@@ -0,0 +1,22 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { PartialFilter } from '../../classes/filter-info';
+import { FilterType, FilterTypes } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+
+@Component({
+    selector: 'tb-date-filter',
+    templateUrl: './date-filter.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrls: ['../filter/filter.component.scss'],
+    viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+        imports: [
+        MatInputModule, FormsModule, MatDatepickerModule
+    ]
+})
+export class DateFilterComponent {
+    FilterType = FilterTypes;
+    @Input() info!: PartialFilter;
+    @Input() CurrentFilterType!: FilterType;
+}

package/src/table-builder/components/date-time-filter/date-time-filter.component.html

@@ -0,0 +1,9 @@
+@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){
+  <input type="datetime-local" [ngModel]="info.filterValue" preventEnter name="filterValue" class="op-date-time-input"/>
+}
+@if(CurrentFilterType === FilterType.DateTimeBetween){
+  <ng-container ngModelGroup="filterValue">
+    <input type="datetime-local" [ngModel]="info.filterValue?.Start" preventEnter name="Start" class="op-date-time-input"/>
+    <input type="datetime-local" [ngModel]="info.filterValue?.End" preventEnter name="End" class="op-date-time-input"/>
+  </ng-container>
+}

package/src/table-builder/components/date-time-filter/date-time-filter.component.ts

@@ -0,0 +1,20 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { PartialFilter } from '../../classes/filter-info';
+import { FilterType, FilterTypes } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'tb-date-time-filter',
+  templateUrl: './date-time-filter.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['../filter/filter.component.scss'],
+  viewProviders: [{provide: ControlContainer, useExisting: NgForm}],
+    imports: [
+    FormsModule
+  ]
+})
+export class DateTimeFilterComponent {
+  FilterType = FilterTypes;
+  @Input() info!: PartialFilter;
+  @Input() CurrentFilterType!: FilterType;
+}

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

@@ -0,0 +1,91 @@
+@let filter = $filter();
+@let currentFilterType = $currentFilterType();
+
+@if (filter) {
+<mat-card appearance="outlined" class="filter-card">
+  <mat-card-content>
+    <form #form="ngForm"  (keydown.enter)="onEnter(form.value,$event)" (keydown.escape)="close.emit()">
+      <input type="hidden" name="filterId" [ngModel]="filter.filterId" />
+      <input type="hidden" name="key" [ngModel]="filter.key" />
+      <input type="hidden" name="fieldType" [ngModel]="filter.fieldType" />
+      <div class="head-row" >
+        <h4 class="filter-name">{{(filter.key | spaceCase)}} Filter</h4>
+        <button class="cancel-button small-button" color="primary" mat-icon-button (click)="close.emit();" type="button"
+            [matTooltip]="'Close'">
+          <mat-icon class="cancel-button" color="primary">close</mat-icon>
+        </button>
+      </div>
+      <div class="filter-row">
+          <div class="inline">
+            <mat-form-field class="my-filter" >
+                <mat-select  placeholder="Select Filter Type" name="filterType"  [ngModel]="$currentFilterType()" (ngModelChange)="$enteredFilterType.set($event)" [panelWidth]="null">
+                  @for (kvp of filterTypes[filter.fieldType]; track kvp) {
+                    <mat-option [value]="kvp">
+                      {{ kvp }}
+                    </mat-option>
+                  }
+                </mat-select>
+            </mat-form-field>
+          </div>
+          @if(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||
+          filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {
+            <ng-container *ngTemplateOutlet="String" />
+          }
+          @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){
+            <tb-number-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
+          }
+          @else if(filter.fieldType === FieldType.Boolean){
+            <ng-container *ngTemplateOutlet="Boolean" />
+          }
+          @else if(filter.fieldType === FieldType.Date){
+            <tb-date-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
+          }
+          @else if(filter.fieldType === FieldType.DateTime){
+            <tb-date-time-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
+          }
+          @else if(filter.fieldType === FieldType.Enum){
+            <ng-container *ngTemplateOutlet="Enum" />
+          }
+
+          @if(currentFilterType === FilterType.IsNull){
+            <mat-radio-group name="filterValue" [ngModel]="filter.filterValue">
+              <mat-radio-button [value]="true">True</mat-radio-button>
+              <mat-radio-button [value]="false">False</mat-radio-button>
+            </mat-radio-group>
+          }
+      </div>
+      <button mat-button (click)="state.addFilter(form.value)" disableRipple [disabled]="form.value.filterValue==undefined || !form.value.filterType">
+        Apply
+      </button>
+    
+    
+    <ng-template #String>
+      @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){
+        <mat-form-field class="my-filter">
+          <input matInput name="filterValue" [ngModel]="filter.filterValue" />
+        </mat-form-field>
+      } @else if(currentFilterType === FilterType.In) {
+        <lib-in-filter [type]="FieldType.String" name='filterValue' [(ngModel)]="filter.filterValue" />
+      }
+    </ng-template>
+    
+    <ng-template #Boolean >
+      @if(currentFilterType === FilterType.BooleanEquals){
+        <div class="switch">
+          <mat-radio-group name="filterValue" [ngModel]="filter.filterValue" >
+            <mat-radio-button [value]="true" preventEnter>True</mat-radio-button>
+            <mat-radio-button [value]="false" preventEnter>False</mat-radio-button>
+          </mat-radio-group>
+        </div>
+      }
+    </ng-template>
+    <ng-template #Enum>
+      @if(currentFilterType === FilterType.In){
+        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>
+
+      }
+    </ng-template>
+    </form>
+  </mat-card-content>
+</mat-card>
+}

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

@@ -0,0 +1,60 @@
+.filter-name {
+  color: cornflowerblue;
+  margin: 10px 0;
+  font-weight: 600;
+  display: inline-block;
+}
+
+.switch {
+  display: inline-block;
+}
+
+.head-row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.filter-row{
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+mat-card.filter-card{
+  &::ng-deep mat-form-field{
+    width: 150px;
+  }
+  &::ng-deep.mat-mdc-form-field-subscript-wrapper{
+    line-height: 0;
+    &::before{
+      height: 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;
+
+  }
+}
+.cancel-button{
+  font-weight: 700;
+}
+.date-toggle ::ng-deep svg{
+  position: absolute;
+  left: 0;
+  top: 0;
+}