@mozaic-ds/angular 0.23.1 → 0.23.2-beta.0

package/projects/kit/components/datatable/components/selection/moz-datatable-selection.component.html

@@ -1,82 +0,0 @@
-<div class="mc-datatable__selection">
-  <ng-container *ngIf="selectionSettings && selectionSettings.labels && paginationEnabled">
-    <div class="mc-datatable__topbar-selection">
-      <ng-container *ngIf="selectionSettings.selectedIds.length || selectionSettings.allSelected">
-        <div class="center-selection-label">
-          <div *ngIf="selectionSettings.allSelected; else notAllSelected">
-            <ng-container *ngIf="selectionSettings.excludedIds.length > 0; else exludedIdsEmpty">
-              <span>
-                <b
-                  >{{
-                    selectionSettings.totalSelectableItems - selectionSettings.excludedIds.length
-                  }}
-                  {{ selectionSettings.labels.selectedLabel || 'selected' }}</b
-                >
-                <ng-container
-                  *ngIf="
-                    selectionSettings.totalSelectableItems -
-                      selectionSettings.excludedIds.length ===
-                      1;
-                    else plurialAllSelected
-                  "
-                >
-                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-
-                </ng-container>
-                <ng-template #plurialAllSelected>
-                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-
-                </ng-template>
-
-                {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-
-                <a href="/" (click)="selectAll(); $event.preventDefault()">
-                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}
-                  {{ selectionSettings.totalSelectableItems }}
-                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}
-                </a>
-              </span>
-            </ng-container>
-            <ng-template #exludedIdsEmpty>
-              <span>
-                {{
-                  selectionSettings.labels.rowsSelectedLabel ||
-                    'All rows are selected in the table.'
-                }}
-                -
-                <a href="/" (click)="clearAll(); $event.preventDefault()">
-                  {{ selectionSettings.labels.clearSelectionLabel || 'Clear selection' }}
-                </a>
-              </span>
-            </ng-template>
-          </div>
-          <ng-template #notAllSelected>
-            <span>
-              <b
-                >{{ selectionSettings.selectedIds.length }}
-                {{ selectionSettings.labels.selectedLabel || 'selected' }}</b
-              >
-              <ng-container
-                *ngIf="selectionSettings.selectedIds && selectionSettings.selectedIds.length > 0"
-              >
-                <ng-container
-                  *ngIf="
-                    selectionSettings.selectedIds && selectionSettings.selectedIds.length === 1;
-                    else plurialNotAllSelected
-                  "
-                >
-                  {{ selectionSettings.labels.rowOnPageLabel || 'row on the page. ' }}-
-                </ng-container>
-                <ng-template #plurialNotAllSelected>
-                  {{ selectionSettings.labels.rowsOnPageLabel || 'rows on the page. ' }}-
-                </ng-template>
-                <a href="/" (click)="selectAll(); $event.preventDefault()">
-                  {{ selectionSettings.labels.selectAllLabel || 'Select all' }}
-                  {{ selectionSettings.totalSelectableItems }}
-                  {{ selectionSettings.labels.rowsOfTableLabel || 'rows of the table' }}
-                </a>
-              </ng-container>
-            </span>
-          </ng-template>
-        </div>
-      </ng-container>
-    </div>
-  </ng-container>
-</div>

package/projects/kit/components/datatable/components/selection/moz-datatable-selection.component.scss

@@ -1,4 +0,0 @@
-.center-selection-label {
-  text-align: center;
-  margin-bottom: 0.5rem;
-}

package/projects/kit/components/datatable/components/selection/moz-datatable-selection.component.spec.ts

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

package/projects/kit/components/datatable/components/selection/moz-datatable-selection.component.ts

@@ -1,337 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-import { RowData } from '../../model/row-data';
-import { SelectionSettings } from '../../model/selection-settings';
-
-@Component({
-  selector: 'moz-datatable-selection',
-  templateUrl: './moz-datatable-selection.component.html',
-  styleUrls: ['./moz-datatable-selection.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MozDatatableSelectionComponent implements OnChanges {
-  @Input() public selectionSettings?: SelectionSettings;
-  @Input() public paginationEnabled?: boolean;
-  @Input() public rowData?: RowData[];
-  @Output() public updateSelectionAllEmitter = new EventEmitter<SelectionSettings>();
-
-  public isIndeterminate: boolean = false;
-
-  constructor(private ref: ChangeDetectorRef) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['rowData']) {
-      this.updateSelection();
-    }
-  }
-
-  private updateSelection(): void {
-    if (this.selectionSettings && this.rowData) {
-      this.rowData
-        ?.filter(
-          (row: RowData) =>
-            !row.disableSelection &&
-            row.selected &&
-            this.selectionSettings?.selectedIds.filter((selectedRow) => {
-              return (
-                !this.selectionSettings?.allSelected &&
-                this.selectionSettings &&
-                selectedRow === row[this.selectionSettings.selectionIdentifierFieldKey]
-              );
-            }).length === 0
-        )
-        .forEach((row: RowData) => {
-          this.selectionSettings?.selectedIds.push(
-            row[this.selectionSettings.selectionIdentifierFieldKey]
-          );
-        });
-      if (
-        (this.selectionSettings?.selectedIds || []).length ===
-        this.selectionSettings.totalSelectableItems
-      ) {
-        this.selectionSettings.allSelected = true;
-        this.selectionSettings.selectedIds = [];
-        this.selectionSettings.excludedIds = [];
-      }
-      this.isIndeterminate = this.isSelectionIndeterminate();
-      this.selectionSettings.allSelected = this.isAllPageRowAreSelected();
-      this.ref.markForCheck();
-    }
-  }
-
-  public selectAll(): void {
-    if (this.selectionSettings) {
-      this.selectionSettings.excludedIds = [];
-      this.selectionSettings.selectedIds = [];
-      this.selectionSettings.allSelected = true;
-      this.updateSelectedValueOnRowData(true);
-      this.isIndeterminate = this.isSelectionIndeterminate();
-      this.selectionSettings.allSelected = this.isAllPageRowAreSelected();
-      this.updateSelectionAllEmitter.emit(this.selectionSettings);
-      this.ref.markForCheck();
-    }
-  }
-
-  public clearAll(): void {
-    if (this.selectionSettings) {
-      this.selectionSettings.excludedIds = [];
-      this.selectionSettings.selectedIds = [];
-      this.selectionSettings.allSelected = false;
-      this.updateSelectedValueOnRowData(false);
-      this.isIndeterminate = this.isSelectionIndeterminate();
-      this.selectionSettings.allSelected = this.isAllPageRowAreSelected();
-      this.updateSelectionAllEmitter.emit(this.selectionSettings);
-      this.ref.markForCheck();
-    }
-  }
-
-  public isAllPageRowAreSelected(): boolean {
-    if (this.rowData) {
-      const selectedRows = this.rowData.filter(
-        (row) => !row.disableSelection && row.selected === true
-      );
-      return (
-        selectedRows.length === this.rowData.filter((row) => !row.disableSelection).length &&
-        this.rowData.filter((row) => !row.disableSelection).length > 0
-      );
-    }
-    return false;
-  }
-
-  public onUdpateSelectionRow(row: RowData): void {
-    this.handleCountItemSelection(row);
-  }
-
-  public onUdpateSelectionAllPageRows($event: any): void {
-    this.updateSelectedValueOnRowData($event.target.checked);
-    this.handleCountAllSelection(this.isAllPageRowAreSelected());
-  }
-
-  public handleCountItemSelection(row: RowData): void {
-    if (this.selectionSettings != null) {
-      const selectionIdentifierFieldKey = this.selectionSettings.selectionIdentifierFieldKey;
-      if (this.selectionSettings.allSelected) {
-        if (row.selected) {
-          this.selectionSettings.excludedIds = [
-            ...this.selectionSettings.excludedIds.filter((deselectedId) => {
-              return deselectedId !== row[selectionIdentifierFieldKey];
-            }),
-          ];
-        } else {
-          if (this.paginationEnabled) {
-            this.selectionSettings.excludedIds = [
-              ...this.selectionSettings.excludedIds,
-              row[selectionIdentifierFieldKey],
-            ];
-          } else {
-            this.selectionSettings.selectedIds = [
-              ...this.selectionSettings.selectedIds.filter(
-                (selectedId) => selectedId !== row[selectionIdentifierFieldKey]
-              ),
-            ];
-            this.selectionSettings.allSelected = false;
-          }
-          if (
-            this.selectionSettings.excludedIds.length ===
-            this.selectionSettings.totalSelectableItems
-          ) {
-            this.selectionSettings.excludedIds = [];
-            this.selectionSettings.allSelected = false;
-          }
-        }
-      } else {
-        if (row.selected) {
-          this.selectionSettings.selectedIds = [
-            ...this.selectionSettings.selectedIds,
-            row[selectionIdentifierFieldKey],
-          ];
-          if (
-            this.selectionSettings.selectedIds.length ===
-            this.selectionSettings.totalSelectableItems
-          ) {
-            if (this.paginationEnabled) {
-              this.selectionSettings.selectedIds = [];
-            }
-            this.selectionSettings.allSelected = true;
-          }
-        } else {
-          this.selectionSettings.selectedIds = [
-            ...this.selectionSettings.selectedIds.filter((selectedId) => {
-              return selectedId !== row[selectionIdentifierFieldKey];
-            }),
-          ];
-        }
-      }
-      this.isIndeterminate = this.isSelectionIndeterminate();
-      this.ref.markForCheck();
-    }
-  }
-
-  private handleCountAllSelection(allPageRowsSelected: boolean): void {
-    if (this.selectionSettings) {
-      const selectionIdentifierFieldKey = this.selectionSettings.selectionIdentifierFieldKey;
-      if (this.selectionSettings?.allSelected) {
-        if (this.isIndeterminate && this.rowData) {
-          this.rowData
-            .filter((row) => !row.disableSelection)
-            .filter(
-              (row) =>
-                !(this.selectionSettings?.selectedIds || []).includes(
-                  row[selectionIdentifierFieldKey]
-                )
-            )
-            .forEach((row) => {
-              if (this.selectionSettings) {
-                this.selectionSettings.selectedIds = [
-                  ...this.selectionSettings.selectedIds,
-                  row[selectionIdentifierFieldKey],
-                ];
-              }
-            });
-          this.rowData
-            .filter((row) => !row.disableSelection)
-            .forEach((row) => {
-              if (this.selectionSettings) {
-                const index = this.selectionSettings.excludedIds.indexOf(
-                  row[selectionIdentifierFieldKey],
-                  0
-                );
-                if (index > -1) {
-                  this.selectionSettings.excludedIds.splice(index, 1);
-                  this.selectionSettings.excludedIds = [...this.selectionSettings.excludedIds];
-                }
-              }
-            });
-          if (
-            this.selectionSettings.selectedIds.length ===
-            this.selectionSettings.totalSelectableItems
-          ) {
-            this.selectionSettings.allSelected = true;
-            this.selectionSettings.selectedIds = [];
-            this.rowData = this.rowData
-              ?.filter((row) => !row.disableSelection)
-              .map((row) => {
-                row.selected = true;
-                return row;
-              });
-          }
-        } else {
-          if (this.rowData) {
-            this.selectionSettings.excludedIds = [
-              ...this.selectionSettings.excludedIds,
-              ...this.rowData
-                .filter((row) => !row.disableSelection)
-                .map((row) => row[selectionIdentifierFieldKey]),
-            ];
-            if (
-              this.selectionSettings.excludedIds.length ===
-              this.selectionSettings.totalSelectableItems
-            ) {
-              this.selectionSettings.allSelected = false;
-              this.selectionSettings.selectedIds = [];
-              this.selectionSettings.excludedIds = [];
-              this.rowData = this.rowData
-                ?.filter((row) => !row.disableSelection)
-                .map((row) => {
-                  row.selected = false;
-                  return row;
-                });
-            }
-          }
-        }
-      } else {
-        if (allPageRowsSelected && this.rowData) {
-          this.rowData
-            .filter((row) => !row.disableSelection)
-            .filter(
-              (row) =>
-                !(this.selectionSettings?.selectedIds || []).includes(
-                  row[selectionIdentifierFieldKey]
-                )
-            )
-            .forEach((row) => {
-              if (this.selectionSettings) {
-                this.selectionSettings.selectedIds = [
-                  ...this.selectionSettings.selectedIds,
-                  row[selectionIdentifierFieldKey],
-                ];
-              }
-            });
-          if (
-            this.selectionSettings.selectedIds.length ===
-            this.selectionSettings.totalSelectableItems
-          ) {
-            if (this.paginationEnabled) {
-              this.selectionSettings.selectedIds = [];
-            }
-            this.selectionSettings.allSelected = true;
-          }
-        } else {
-          if (this.rowData) {
-            this.rowData
-              .filter((row) => !row.disableSelection)
-              .forEach((row) => {
-                if (this.selectionSettings) {
-                  this.selectionSettings.selectedIds = [
-                    ...this.selectionSettings.selectedIds.filter((selectedId) => {
-                      return selectedId !== row[selectionIdentifierFieldKey];
-                    }),
-                  ];
-                }
-              });
-          }
-        }
-      }
-    }
-    this.isIndeterminate = this.isSelectionIndeterminate();
-    this.ref.markForCheck();
-  }
-
-  private updateSelectedValueOnRowData(selected: boolean): void {
-    this.rowData = this.rowData
-      ?.filter((row) => !row.disableSelection)
-      .map((row) => {
-        row.selected = selected;
-        return row;
-      });
-  }
-
-  private isSelectionIndeterminate(): boolean {
-    if (this.selectionSettings) {
-      if (
-        (!this.selectionSettings.allSelected &&
-          this.rowData
-            ?.filter((row) => !row.disableSelection)
-            .map((row) => {
-              if (this.selectionSettings) {
-                return row[this.selectionSettings.selectionIdentifierFieldKey];
-              }
-            })
-            .every((item) => (this.selectionSettings?.selectedIds || []).includes(item))) ||
-        (!this.selectionSettings.allSelected && this.selectionSettings.selectedIds.length === 0) ||
-        (this.selectionSettings.allSelected &&
-          this.rowData &&
-          !this.rowData
-            .map((row) => {
-              if (this.selectionSettings) {
-                return row[this.selectionSettings.selectionIdentifierFieldKey];
-              }
-            })
-            .some((id) => (this.selectionSettings?.excludedIds || []).includes(id))) ||
-        (this.selectionSettings.allSelected && this.selectionSettings.excludedIds.length === 0)
-      ) {
-        return false;
-      }
-      return true;
-    }
-    return false;
-  }
-}

package/projects/kit/components/datatable/directives/moz-datatable-sort.directive.ts

@@ -1,62 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnInit,
-  Output,
-  Renderer2,
-} from '@angular/core';
-import { ColumnDef } from '../model/column-def';
-
-@Directive({
-  selector: '[mozDatatableSort]',
-})
-export class MozDatatableSortDirective implements OnInit {
-  @Input('mozDatatableSort') columnDef?: ColumnDef;
-  @Output() sortEmitter = new EventEmitter<unknown>();
-
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
-
-  ngOnInit() {
-    if (this.columnDef?.sort) {
-      const sortIcon = this.renderer.createElement('span');
-      this.renderer.addClass(sortIcon, 'mc-datatable__sort-arrow');
-      this.updateSortDirection(sortIcon);
-      this.renderer.appendChild(this.elementRef.nativeElement, sortIcon);
-    }
-  }
-
-  @HostListener('click', ['$event'])
-  onSortClick($event: any) {
-    this.updateSortDirection($event.target);
-  }
-
-  private updateSortDirection(htmlSpanElement: HTMLSpanElement): void {
-    if (this.columnDef?.sort) {
-      if (htmlSpanElement.classList.contains('mc-datatable__sort-arrow')) {
-        this.columnDef.sort.direction =
-          this.columnDef.sort.direction == undefined
-            ? 'ASC'
-            : this.columnDef.sort.direction === 'ASC'
-            ? 'DESC'
-            : undefined;
-        if (this.columnDef.sort.direction === 'ASC') {
-          this.renderer.addClass(htmlSpanElement, 'is-sorted-asc');
-          this.renderer.removeClass(htmlSpanElement, 'is-sorted-desc');
-        } else if (this.columnDef.sort.direction === 'DESC') {
-          this.renderer.addClass(htmlSpanElement, 'is-sorted-desc');
-          this.renderer.removeClass(htmlSpanElement, 'is-sorted-asc');
-        } else {
-          this.renderer.removeClass(htmlSpanElement, 'is-sorted-desc');
-          this.renderer.removeClass(htmlSpanElement, 'is-sorted-asc');
-        }
-        this.sortEmitter.emit({
-          direction: this.columnDef.sort.direction,
-          field: this.columnDef.field,
-        });
-      }
-    }
-  }
-}

package/projects/kit/components/datatable/model/column-def.ts

@@ -1,12 +0,0 @@
-export interface ColumnDef {
-  field: string;
-  headerName: string;
-  sort?: Sort;
-  width?: string;
-  hide?: boolean;
-}
-
-export interface Sort {
-  activate: boolean;
-  direction?: 'ASC' | 'DESC' | undefined;
-}

package/projects/kit/components/datatable/model/datatable-settings.ts

@@ -1,30 +0,0 @@
-import { ColumnDef } from './column-def';
-import { RowData } from './row-data';
-
-export interface DatatableSettings {
-  activatePagination?: boolean;
-  activateSelection?: boolean;
-  activateSettings?: boolean;
-  activateEmptyBodyButton?: boolean;
-  columnDefs: ColumnDef[];
-  rowData: RowData[];
-  fixHeaderRow?: boolean;
-  fixFirstColumn?: boolean;
-  isLoading?: boolean;
-  labels?: {
-    settings?: {
-      layerTitle?: string;
-      fixFirstColumnTitle?: string;
-      columnsLockTitle?: string;
-      columnsDisplayTitle?: string;
-      applyButtonTitle?: string;
-      resetButtonTitle?: string;
-    };
-    emptyBodyTitle?: string;
-    emptyBodyDescription?: string;
-    emptyBodyButtonTitle?: string;
-  };
-  icons?: {
-    emptyBodyButtonIcon?: string;
-  };
-}

package/projects/kit/components/datatable/model/footer-settings.ts

@@ -1,14 +0,0 @@
-export interface FooterSettings {
-  pagination: {
-    totalItems: number;
-    itemsPerPage: number;
-    currentPage: number;
-    rowPerPage: { options: number[]; selected: number };
-  };
-  labels: {
-    rowPerPage?: string;
-    items?: string;
-    page?: string;
-    of?: string;
-  };
-}

package/projects/kit/components/datatable/model/row-data.ts

@@ -1,5 +0,0 @@
-export interface RowData {
-  [key: string]: any;
-  selected?: boolean;
-  disableSelection?: boolean;
-}

package/projects/kit/components/datatable/model/selection-settings.ts

@@ -1,16 +0,0 @@
-export interface SelectionSettings {
-  selectionIdentifierFieldKey: string;
-  totalSelectableItems: number;
-  excludedIds: string[];
-  selectedIds: string[];
-  allSelected: boolean;
-  labels?: {
-    selectedLabel?: string;
-    rowOnPageLabel?: string;
-    rowsOnPageLabel?: string;
-    rowsOfTableLabel?: string;
-    selectAllLabel?: string;
-    rowsSelectedLabel?: string;
-    clearSelectionLabel?: string;
-  };
-}