@testgorilla/tgo-ui 2.10.0 → 2.10.1

package/projects/tgo-canopy-ui/components/datepicker/datepicker.component.ts

@@ -0,0 +1,358 @@
+/* eslint-disable no-underscore-dangle */
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DoCheck,
+  EventEmitter,
+  HostBinding,
+  Inject,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  Self,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ControlValueAccessor, FormControl, FormGroup, NgControl } from '@angular/forms';
+import { LanguageService } from '../../utils/localization/language.service';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { MatDatepicker } from '@angular/material/datepicker';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ui-datepicker',
+  templateUrl: './datepicker.component.html',
+  styleUrls: ['./datepicker.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+export class DatepickerComponent implements OnChanges, ControlValueAccessor, DoCheck {
+  @HostBinding() class = 'ui-datepicker';
+
+  /**
+   * Form field label
+   *
+   * @type {string}
+   * @memberof DatepickerComponent
+   */
+  @Input() label? = '';
+
+  /**
+   * Input name attribute
+   *
+   * @type {string}
+   * @memberof DatepickerComponent
+   */
+  @Input() fieldName?: string;
+
+  /**
+   * Input placeholder
+   *
+   * @type {string}
+   * @memberof DatepickerComponent
+   */
+  @Input() placeholder? = '';
+
+  /**
+   * Input id
+   *
+   * @type {string}
+   * @memberof DatepickerComponent
+   */
+  @Input() id? = '';
+
+  /**
+   * Input value
+   *
+   * @type {string}
+   * @memberof DatepickerComponent
+   */
+  @Input() value?: string | Date;
+
+  _errors: SafeHtml[];
+  /**
+   * Input field errors
+   *
+   * @type {string}
+   * @memberof DatepickerComponent
+   */
+  @Input() set errors(errors: string[]) {
+    this._errors = errors?.filter(Boolean).map(error => this.sanitizer.bypassSecurityTrustHtml(error));
+    this.errorsLength = this.setErrorsLength();
+  }
+
+  /**
+   * Determines if input is date range
+   *
+   * @type {boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() isRange: boolean;
+
+  /**
+   * Determines if input is disabled
+   *
+   * @type {boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() disabled: boolean;
+
+  /**
+   * Input is required or not
+   *
+   * @type {boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() required: boolean;
+
+  /**
+   * Hint text
+   *
+   * @type {string}
+   * @memberof DatepickerComponent
+   */
+  @Input() hintMessage: string;
+
+  /**
+   * Input is update only on blur
+   *
+   * @type {Boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() updateOnBlur = false;
+
+  /**
+   * The language to be used
+   *
+   * @type {Language}
+   * @memberof DatepickerComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  /**
+   * Show reserved content below form field
+   *
+   * @type {boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() showBottomContent = true;
+
+  /**
+   * Set full width DatepickerComponent
+   *
+   * @type {boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() fullWidth = false;
+
+  /**
+   * Set min date for Datepicker
+   *
+   * @type {Date}
+   * @memberof DatepickerComponent
+   */
+  @Input() minDate: Date | undefined;
+
+  /**
+   * Set max date for Datepicker
+   *
+   * @type {Date}
+   * @memberof DatepickerComponent
+   */
+  @Input() maxDate: Date | undefined;
+
+  /**
+   * Show and pick date without day
+   * @default false
+   * @type {boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() monthPicker = false;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof DatepickerComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Hide in-build errors for Reactive Forms
+   *
+   * @type {number}
+   * @memberof DatepickerComponent
+   */
+  @Input() hideBuiltInErrors = false;
+
+  /**
+   * Hide label in errors
+   *
+   * @type {number}
+   * @memberof DatepickerComponent
+   */
+  @Input() hideLabelInErrors = false;
+
+  /**
+   * Prevent user input
+   *
+   * @type {boolean}
+   * @memberof DatepickerComponent
+   */
+  @Input() preventUserInput = false;
+  /**
+   * @ignore
+   */
+  onChange = (_: any) => {};
+
+  /**
+   * @ignore
+   */
+  onTouch = () => {};
+
+  /**
+   * Event emitted when the value is change - when used outside of form
+   *
+   * @type {Date}
+   * @memberof DatepickerComponent
+   */
+  @Output() changed = new EventEmitter<Date | string>();
+
+  range = new FormGroup({
+    start: new FormControl<Date | null>(null),
+    end: new FormControl<Date | null>(null),
+  });
+
+  errorsLength: boolean;
+  protected translationContext = 'DATEPICKER.';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private cdr: ChangeDetectorRef,
+    private sanitizer: DomSanitizer,
+    @Optional() @Self() public ngControl: NgControl
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  get hint(): string {
+    if (this.hintMessage === undefined) {
+      return this.isRange ? 'MM/DD/YYYY - MM/DD/YYYY' : this.monthPicker ? 'MM/YYYY' : 'MM/DD/YYYY';
+    }
+
+    return this.hintMessage;
+  }
+
+  /**
+   * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
+   * to display validation errors that might happen (e.g. required)
+   */
+  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+  ngDoCheck(): void {
+    if (this.ngControl?.touched || this.ngControl?.errors) {
+      this.cdr.markForCheck();
+    }
+  }
+
+  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+  ngOnInit() {
+    document.body.setAttribute('theme', this.applicationTheme);
+  }
+
+  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+  ngOnChanges(): void {
+    if (this.isRange) {
+      this.setRange();
+    }
+  }
+
+  // Set errors length for validation
+  // Consider only those errors which which are not empty
+  setErrorsLength(): boolean {
+    if (!!this._errors) {
+      return this._errors.filter(err => !!err).length > 0 ? true : false;
+    }
+    return false;
+  }
+
+  onValueChange(value: Date | string) {
+    this.writeValue(value);
+    this.errorsLength = this.setErrorsLength();
+    if (!this.updateOnBlur) {
+      this.onTouch();
+    }
+    this.onChange(value);
+    this.changed.emit(value);
+  }
+
+  writeValue(value?: Date | string): void {
+    this.value = value;
+    if (this.isRange) {
+      this.setRange();
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  dateRangeChange(start: string, end: string) {
+    if (start && end) {
+      this.onValueChange(this.getRange(start, end));
+    }
+  }
+
+  setMonthAndYear(normalizedMonthAndYear: any, datepicker: MatDatepicker<Date>) {
+    const ctrlValue = typeof this.value === 'string' ? new Date(this.value) : this.value || new Date();
+
+    ctrlValue.setMonth(normalizedMonthAndYear.getMonth());
+    ctrlValue.setFullYear(normalizedMonthAndYear.getFullYear());
+
+    datepicker.close();
+
+    this.onValueChange(new Date(ctrlValue));
+  }
+
+  private setRange() {
+    if (typeof this.value === 'string') {
+      const [start, end] = this.value?.split('-');
+      if (start) {
+        this.range.controls.start.setValue(new Date(start));
+      }
+      if (end) {
+        this.range.controls.end.setValue(new Date(end));
+      }
+    }
+  }
+
+  private getRange(start: string, end: string): string {
+    return `${start}-${end}`;
+  }
+
+  onInput(event: Event) {
+    const target = event.target as EventTarget & { value: string };
+    const [month, year] = target.value.split('/');
+    const date = new Date().getDate();
+    const fullDateString = `${month}/${date}/${year}`;
+    const fullDate = new Date(fullDateString);
+    this.onValueChange(fullDate);
+  }
+}

package/projects/tgo-canopy-ui/components/datepicker/no-date-format.directive.spec.ts

@@ -0,0 +1,35 @@
+import { Component, DebugElement, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoDateFormatDirective } from "./no-date-format.directive";
+
+@Component({
+  template: `<div appNoDateFormat></div>`,
+})
+class TestComponent {
+  @ViewChild(NoDateFormatDirective) noDateFormatDirective: NoDateFormatDirective;
+}
+
+describe('noDateFormatDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let directiveElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      imports: [NoDateFormatDirective]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    directiveElement = fixture.debugElement.query(By.directive(NoDateFormatDirective));
+    fixture.detectChanges();
+  });
+
+  it('should create an instance of the directive', () => {
+    expect(directiveElement).toBeTruthy();
+  });
+});

package/projects/tgo-canopy-ui/components/datepicker/no-date-format.directive.ts

@@ -0,0 +1,43 @@
+import { Directive, Injectable } from '@angular/core';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MatDateFormats,
+  NativeDateAdapter,
+} from '@angular/material/core';
+import { formatDate } from '@angular/common';
+
+@Injectable()
+export class CustomDateAdapter extends NativeDateAdapter {
+  override format(date: Date): string {
+    return formatDate(date, 'MM/yyyy', 'en-US');
+  }
+}
+
+const FORMATS: MatDateFormats = {
+  parse: {
+    dateInput: 'MM/YYYY',
+  },
+  display: {
+    dateInput: 'MM/YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
+@Directive({
+  selector: '[appNoDateFormat]',
+  providers: [
+    {
+      provide: DateAdapter,
+      useClass: CustomDateAdapter,
+    },
+    {
+      provide: MAT_DATE_FORMATS,
+      useValue: FORMATS,
+    },
+  ],
+  standalone: true,
+})
+export class NoDateFormatDirective {}

package/projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.html

@@ -0,0 +1,5 @@
+<mat-paginator [length]="length"
+              [pageSize]="defaultPageSize"
+              [pageSizeOptions]="pageSizeOptions"
+              (page)="paginatorChanged($event)">
+</mat-paginator>

package/projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { DeprecatedPaginatorComponent } from './deprecated-paginator.component';
+
+@NgModule({
+  declarations: [DeprecatedPaginatorComponent],
+  imports: [CommonModule, MatPaginatorModule],
+  exports: [DeprecatedPaginatorComponent],
+  providers: [],
+})
+export class DeprecatedPaginatorComponentModule {}

package/projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.scss

@@ -0,0 +1,32 @@
+@use "../../theme/variables" as *;
+
+$font-size: 14px;
+
+.mat-mdc-paginator {
+  border-radius: 0px 0px 8px 8px;
+
+  .mat-mdc-paginator-outer-container {
+    border-radius: 0px 0px 8px 8px;
+    font-weight: 400;
+    font-size: $font-size;
+    line-height: 16px;
+    color: $tgo-black;
+
+    .mat-mdc-paginator-container {
+      padding: 0;
+      .mat-mdc-select-value-text {
+        font-size: $font-size;
+      }
+
+      .mat-mdc-paginator-range-actions {
+        height: 100%;
+
+        button {
+          height: 100%;
+          width: 70px;
+          border-radius: 0px;
+        }
+      }
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.stories.ts

@@ -0,0 +1,31 @@
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { DeprecatedPaginatorComponent } from './deprecated-paginator.component';
+
+export default {
+  title: 'Deprecated/Paginator',
+  component: DeprecatedPaginatorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [BrowserAnimationsModule, MatPaginatorModule],
+      declarations: [DeprecatedPaginatorComponent],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = args => ({
+  props: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: '',
+  },
+};

package/projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+
+@Component({
+  selector: 'ui-paginator',
+  templateUrl: './deprecated-paginator.component.html',
+  styleUrls: ['./deprecated-paginator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeprecatedPaginatorComponent implements OnInit {
+  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
+  // https://github.com/storybookjs/storybook/issues/16865
+  // https://github.com/storybookjs/storybook/issues/17004
+
+  /**
+   * Paginator size options
+   *
+   * @type {number[]}
+   * @memberof PaginatorComponent
+   */
+  readonly pageSizeOptions = [10, 25, 50];
+
+  /**
+   * Data length
+   *
+   * @type {number}
+   * @memberof PaginatorComponent
+   */
+  @Input() length = 0;
+
+  /**
+   * Default page size
+   *
+   * @type {number}
+   * @memberof PaginatorComponent
+   */
+  @Input() defaultPageSize = 25;
+
+  /**
+   * @ignore
+   */
+  @Output() paginatorChangedEvent: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
+
+  /**
+   * @ignore
+   */
+  ngOnInit(): void {}
+
+  constructor() {}
+
+  paginatorChanged(paginator: PageEvent) {
+    this.paginatorChangedEvent.emit(paginator);
+  }
+}

package/projects/tgo-canopy-ui/components/deprecated-table/deprecated-table.component.html

@@ -0,0 +1,113 @@
+<table *ngIf="!tableDetails" mat-table [dataSource]="dataSource" matSort (matSortChange)="onSort($event)">
+  <ng-container *ngFor="let tableColumn of tableColumns; let i = index" [matColumnDef]="tableColumn.headerName">
+    <ng-container *ngIf="tableColumn.sortable; else notSortable">
+      <th mat-header-cell *matHeaderCellDef="let element" [mat-sort-header]="tableColumn.field || ''"
+        arrowPosition="after" [ngStyle]="{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}"
+        [ngClass]="tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''">
+          <ng-container *ngTemplateOutlet="tableHeader; context: {tableColumn}"></ng-container>
+      </th>
+    </ng-container>
+    <ng-template #notSortable>
+      <th mat-header-cell *matHeaderCellDef [ngStyle]="{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}"
+        [ngClass]="tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''">
+        <ng-container *ngTemplateOutlet="tableHeader; context: {tableColumn}"></ng-container>
+      </th>
+    </ng-template>
+    <td mat-cell *matCellDef="let element" (click)="onRowClick(element)"
+      [align]="tableColumn.styles?.alignment"
+      [ngClass]="[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']">
+      <ng-container *ngTemplateOutlet="tableDataTpl; context: {element, tableColumn}"></ng-container>
+      <mat-icon *ngIf="onRowClickEvent.observed && i === tableColumns.length - 1" class="row-detail-icon">navigate_next</mat-icon>
+    </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;" [ngClass]="{'row-clickable': onRowClickEvent.observed}"></tr>
+</table>
+
+<table *ngIf="tableDetails" mat-table [dataSource]="dataSource" matSort (matSortChange)="onSort($event)"
+  multiTemplateDataRows>
+  <ng-container *ngFor="let tableColumn of tableColumns; let i = index" [matColumnDef]="tableColumn.headerName">
+    <ng-container *ngIf="tableColumn.sortable; else notSortable">
+      <th mat-header-cell *matHeaderCellDef="let element" [mat-sort-header]="tableColumn.field || ''"
+        arrowPosition="after" [ngStyle]="{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}"
+        [ngClass]="tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''">
+        <ng-container *ngTemplateOutlet="tableHeader; context: {tableColumn}"></ng-container>
+      </th>
+    </ng-container>
+    <ng-template #notSortable>
+      <th mat-header-cell *matHeaderCellDef [ngStyle]="{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}"
+        [ngClass]="tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''">
+        <ng-container *ngTemplateOutlet="tableHeader; context: {tableColumn}"></ng-container>
+      </th>
+    </ng-template>
+    <td mat-cell *matCellDef="let element" (click)="onRowClick(element)"
+      [align]="tableColumn.styles?.alignment"
+      [ngClass]="[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']">
+      <mat-icon *ngIf="i === 0" class="row-expand-icon">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>
+      <ng-container *ngTemplateOutlet="tableDataTpl; context: {element, tableColumn}"></ng-container>
+    </td>
+  </ng-container>
+
+  <!-- Expanded Content Column -->
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
+      <div class="element-detail" *ngIf="dataSourceDetail.data.length"
+        [@expandDetail]="element === elementDetail ? 'expanded' : 'collapsed'">
+        <table mat-table [dataSource]="dataSourceDetail">
+          <ng-container *ngFor="let tableColumn of tableDetailColumns.columnDefs"
+            [matColumnDef]="tableColumn.headerName">
+            <th mat-header-cell *matHeaderCellDef="let element" arrowPosition="after"
+              [ngStyle]="{width: tableColumn.styles?.width}"
+              [ngClass]="tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''">
+              {{tableColumn.headerName | uppercase}}
+            </th>
+            <td mat-cell *matCellDef="let element" (click)="onDetailRowClick(element)"
+              [align]="tableColumn.styles?.alignment"
+              [ngClass]="tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''"
+              [ngStyle]="{padding: tableColumn.styles?.padding}">
+              <ng-container *ngTemplateOutlet="tableDataTpl; context: {element, tableColumn}"></ng-container>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="columnsDetailToDisplay"></tr>
+          <tr mat-row *matRowDef="let rowDetail; columns: columnsDetailToDisplay;"></tr>
+        </table>
+      </div>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="element-row"
+    [ngClass]="{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}"
+    (click)="toggleRow(element)">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
+</table>
+
+<ng-template #tableDataTpl let-element="element" let-tableColumn="tableColumn">
+  <div class="align-wrapper">
+    <ng-container [ngSwitch]="tableColumn.type">
+      <ng-container *ngSwitchCase="DataType.FIELD">
+        {{element | dataPropertyGetter: tableColumn.field}}
+      </ng-container>
+      <ng-container *ngSwitchCase="DataType.FUNCTION">
+        {{tableColumn.function?.(element)}}
+      </ng-container>
+      <ng-container *ngSwitchCase="DataType.RENDERER">
+        <ng-template
+          [dynamicComponent]="tableColumn.renderer?.(element)">
+        </ng-template>
+      </ng-container>
+      <ng-container *ngSwitchDefault>
+        {{element | dataPropertyGetter: tableColumn.field}}
+      </ng-container>
+    </ng-container>
+  </div>
+</ng-template>
+
+<ng-template #tableHeader let-tableColumn="tableColumn">
+  <div class="tooltip" [ngStyle]="{'justify-content': tableColumn.styles?.alignment}" [ngClass]="tableColumn.styles?.alignment">
+    <span>{{tableColumn.headerName | uppercase}}</span>
+    <mat-icon *ngIf="tableColumn.headerTooltip" [matTooltip]="tableColumn.headerTooltip" class="tooltip-icon" (click)="$event.stopPropagation()">help</mat-icon>
+  </div>
+</ng-template>