@annalib/anna-core 1.6.0 → 2.2.0

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.html

@@ -0,0 +1,10 @@
+<p class="sort-container">
+    <button
+        class="sort-btn"
+        *ngFor="let option of sortOptions; let i = index"
+        (click)="sortOptionChanged(i, option.sortType)"
+        [ngClass]="{ active: option.isOptionActive }"
+    >
+        {{option.text}}
+    </button>
+</p>

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.scss

@@ -0,0 +1 @@
+@import "../../../anna-core-shared-lib/scss/sort";

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+
+import { SortComponent } from "./anna-sort.component";
+
+describe("SortComponent", () => {
+    let component: SortComponent;
+    let fixture: ComponentFixture<SortComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [SortComponent],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SortComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/anna-generic-table-lib/components/anna-sort/anna-sort.component.ts

@@ -0,0 +1,76 @@
+// Angular import statements
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+
+
+// Third party import statements
+
+// User defined import statements
+import { AnnaSortService, SortOption, SortType } from '@annalib/anna-core/src/lib/anna-core-shared-lib';
+
+//sub-entries of anna lib import statement
+
+//Add onChange push change detection
+@Component({
+  selector: 'anna-core-sort-lib',
+  templateUrl: './anna-sort.component.html',
+  styleUrls: ['./anna-sort.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AnnaSortComponent implements OnChanges{
+  
+  @Input() sortObjectKey: string;
+  @Output() sortOptionClicked = new EventEmitter<SortType>();
+
+  sortOptions: SortOption[] = [
+    {
+      sortType: 'ASC',
+      isOptionActive: false,
+      text: 'A to Z',
+    },
+    {
+      sortType: 'DESC',
+      isOptionActive: false,
+      text: 'Z to A',
+    },
+    {
+      sortType: 'DEFAULT',
+      isOptionActive: false,
+      text: 'DEFAULT',
+    },
+  ];
+
+  constructor(private annaSortService: AnnaSortService) {}
+  
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log("sort component ngOnChanges");
+    console.log(this.sortObjectKey);
+    if(changes["sortObjectKey"] && changes["sortObjectKey"].currentValue){
+      console.log("inside sort active func");
+      let sortType = this.annaSortService.columnSortState.get(
+        this.sortObjectKey
+      );
+      this.setSortType(sortType);
+    }
+
+  }
+
+  sortOptionChanged(index: number, sortType: SortType) {
+    this.sortOptions.forEach((item) => (item.isOptionActive = false));
+    this.sortOptions[index].isOptionActive = true;
+    this.sortOptionClicked.emit(sortType);
+  }
+
+  ngOnInit(): void {
+    console.log("sort component ngOnInit");
+    console.log(this.annaSortService.columnSortState);
+    this.annaSortService.updateSortTypeSubject.subscribe((item: string) => {
+      this.setSortType(item);
+    });
+  }
+
+  setSortType(option: string){
+    this.sortOptions.forEach(item => item.isOptionActive = false);
+    let index = this.sortOptions.findIndex(item => item.sortType == option);
+    this.sortOptions[index].isOptionActive = true;
+  }
+}

package/src/lib/anna-generic-table-lib/components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component.html

@@ -0,0 +1,13 @@
+<!--
+  Wrap the rendered content in an element that will be used to offset it based on the scroll
+  position.
+-->
+<div #contentWrapper class="anna-table-virtual-scroll-content-wrapper">
+	<ng-content></ng-content>
+</div>
+<!--
+  Spacer used to force the scrolling container to the correct size for the *total* number of items
+  so that the scrollbar captures the size of the entire data set.
+-->
+<div class="app-table-virtual-scroll-spacer" [style.width]="_totalContentWidth" [style.height]="_totalContentHeight">
+</div>

package/src/lib/anna-generic-table-lib/components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component.scss

@@ -0,0 +1,88 @@
+// When elements such as `<tr>` or `<li>` are repeated inside the cdk-virtual-scroll-viewport,
+// their container element (e.g. `<table>`, `<ul>`, etc.) needs to be placed in the viewport as
+// well. We reset some properties here to prevent these container elements from introducing
+// additional space that would throw off the scrolling calculations.
+@mixin _cdk-virtual-scroll-clear-container-space($direction) {
+  $start: if($direction == horizontal, "left", "top");
+  $end: if($direction == horizontal, "right", "bottom");
+
+  & > dl:not([cdkVirtualFor]),
+  & > ol:not([cdkVirtualFor]),
+  & > table:not([cdkVirtualFor]),
+  & > ul:not([cdkVirtualFor]) {
+    padding: {
+      #{$start}: 0;
+      #{$end}: 0;
+    }
+    margin: {
+      #{$start}: 0;
+      #{$end}: 0;
+    }
+    border: {
+      #{$start}-width: 0;
+      #{$end}-width: 0;
+    }
+    outline: none;
+  }
+}
+
+// Scrolling container.
+anna-table-virtual-scroll-viewport {
+  display: block;
+  position: relative;
+  overflow: auto;
+  contain: strict;
+  // transform: translateZ(0);
+  will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
+
+}
+
+// Wrapper element for the rendered content. This element will be transformed to push the rendered
+// content to its correct offset in the data set as a whole.
+.anna-table-virtual-scroll-content-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: content;
+  // Note: We can't put `will-change: transform;` here because it causes Safari to not update the
+  // viewport's `scrollHeight` when the spacer's transform changes.
+
+  [dir="rtl"] & {
+    right: 0;
+    left: auto;
+  }
+}
+
+.app-table-virtual-scroll-orientation-horizontal
+  .anna-table-virtual-scroll-content-wrapper {
+  min-height: 100%;
+  @include _cdk-virtual-scroll-clear-container-space(horizontal);
+}
+
+.app-table-virtual-scroll-orientation-vertical
+  .anna-table-virtual-scroll-content-wrapper {
+  min-width: 100%;
+  @include _cdk-virtual-scroll-clear-container-space(vertical);
+}
+
+// Spacer element that whose width or height will be adjusted to match the size of the entire data
+// set if it were rendered all at once. This ensures that the scrollable content region is the
+// correct size.
+.app-table-virtual-scroll-spacer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1px;
+  width: 1px;
+  transform-origin: 0 0;
+
+  // Note: We can't put `will-change: transform;` here because it causes Safari to not update the
+  // viewport's `scrollHeight` when the spacer's transform changes.
+
+  [dir="rtl"] & {
+    right: 0;
+    left: auto;
+    transform-origin: 100% 0;
+  }
+}

package/src/lib/anna-generic-table-lib/components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnaTableVirtualScrollViewportComponent } from './anna-table-virtual-scroll-viewport.component';
+
+describe('AnnaTableVirtualScrollViewportComponent', () => {
+  let component: AnnaTableVirtualScrollViewportComponent;
+  let fixture: ComponentFixture<AnnaTableVirtualScrollViewportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnnaTableVirtualScrollViewportComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnaTableVirtualScrollViewportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});