@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

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

@@ -1,141 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatNativeDateModule } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { DatepickerComponent } from './datepicker.component';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from "../../utils/transform-theme";
-import { NoDateFormatDirective } from './no-date-format.directive';
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-
-export default {
-  title: 'Forms/Datepicker',
-  component: DatepickerComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        BrowserAnimationsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        ButtonComponentModule,
-        IconComponentModule,
-        UiTranslatePipe,
-        NoDateFormatDirective,
-        HasValidationErrorPipe,
-      ],
-      declarations: [DatepickerComponent],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-const excludeParameter = {
-  controls: {
-    exclude: [
-      'class',
-      'showClose',
-      'ngOnInit',
-      'inputChange',
-      'onInput',
-      'registerOnChange',
-      'registerOnTouched',
-      'setDisabledState',
-      'setErrorsLength',
-      'writeValue',
-      'errorsLength',
-      'fieldChangeEvent',
-      'clearValue',
-      '_errors',
-    ],
-  },
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2851-4193&mode=design&t=KFrqGE3ZnlxieCyX-0',
-  },
-};
-
-export const Basic = Template.bind({});
-
-Basic.args = {
-  label: 'Date',
-};
-
-Basic.parameters = excludeParameter;
-
-export const WithValue = Template.bind({});
-
-WithValue.args = {
-  label: 'Date',
-  value: new Date(new Date().setDate(15)),
-};
-
-WithValue.parameters = excludeParameter;
-
-export const WithRange = Template.bind({});
-
-WithRange.args = {
-  label: 'Date',
-  isRange: true,
-  browserTimezone: true,
-};
-
-WithRange.parameters = excludeParameter;
-
-export const WithPlaceholder = Template.bind({});
-
-WithPlaceholder.args = {
-  label: 'Date',
-  placeholder: 'DD/MM/YYYY',
-};
-
-WithPlaceholder.parameters = excludeParameter;
-
-export const WithErrors = Template.bind({});
-WithErrors.args = {
-  errors: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit'],
-};
-
-WithErrors.parameters = excludeParameter;
-
-export const WithDisable = Template.bind({});
-WithDisable.args = {
-  disabled: true,
-};
-
-WithDisable.parameters = excludeParameter;
-
-export const WithRequire = Template.bind({});
-WithRequire.args = {
-  required: true,
-  label: 'Label require',
-};
-
-WithRequire.parameters = excludeParameter;
-
-export const MonthPicker = Template.bind({});
-MonthPicker.args = {
-  label: 'Label require',
-  monthPicker: true,
-};
-
-MonthPicker.parameters = excludeParameter;

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

@@ -1,391 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DoCheck,
-  EventEmitter,
-  HostBinding,
-  Inject,
-  Input,
-  OnChanges,
-  Optional,
-  Output,
-  Self,
-  SimpleChanges,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ControlValueAccessor, FormControl, FormGroup, NgControl } from '@angular/forms';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { MatDatepicker } from '@angular/material/datepicker';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { adjustLightness } from "../../utils/color-contrast";
-import { DateAdapter, MAT_DATE_FORMATS } from "@angular/material/core";
-import { UI_DATE_FORMATS, UiDateAdapter } from "./date-adapter";
-import { DatepickerService } from "./datepicker.service";
-
-@Component({
-  selector: 'ui-datepicker',
-  templateUrl: './datepicker.component.html',
-  styleUrls: ['./datepicker.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    { provide: DateAdapter, useClass: UiDateAdapter },
-    { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS }
-  ]
-})
-// 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?: Array<Date | null>  | 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;
-
-  /**
-   * 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;
-
-  /**
-   * Color of the option hover.
-   * Defaults to Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof DatepickerComponent
-   */
-  @Input() companyColor: string = ''
-
-  /**
-   * Use browser timezone
-   * @type boolean
-   * @memberof DatepickerComponent
-   */
-  @Input() set browserTimezone(value: boolean) {
-    this.datepickerService.useBrowserTimezone = value;
-  }
-
-  /**
-   * @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 | Date[]>();
-
-  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,
-    private datepickerService: DatepickerService
-  ) {
-    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);
-    this.setStyleVariable();
-  }
-
-  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.isRange) {
-      this.setRange();
-    }
-    if (changes['companyColor']) {
-      this.setStyleVariable();
-    }
-  }
-
-  // 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 | Date[]) {
-    this.writeValue(value);
-    this.errorsLength = this.setErrorsLength();
-    if (!this.updateOnBlur) {
-      this.onTouch();
-    }
-    this.onChange(value);
-    this.changed.emit(value);
-  }
-
-  writeValue(value?: Date | Date[]): 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() {
-    const start = this.range.controls.start.value!;
-    const end = this.range.controls.end.value!;
-    this.onValueChange([start ? new Date(start) : start, end ? new Date(end) : end]);
-  }
-
-  setMonthAndYear(normalizedMonthAndYear: any, datepicker: MatDatepicker<Date>) {
-    const ctrlValue = (this.value) as Date || new Date();
-
-    ctrlValue.setMonth(normalizedMonthAndYear.getMonth());
-    ctrlValue.setFullYear(normalizedMonthAndYear.getFullYear());
-
-    datepicker.close();
-
-    this.onValueChange(new Date(ctrlValue));
-  }
-
-  private setRange() {
-    if (Array.isArray(this.value)) {
-      const [start, end] = this.value;
-
-      if (start) {
-        this.range.controls.start.setValue(new Date(start));
-      }
-
-      if (end) {
-        this.range.controls.end.setValue(new Date(end));
-      }
-    }
-
-    if (!this.value) {
-      this.range.controls.start.setValue(null);
-      this.range.controls.end.setValue(null);
-    }
-  }
-
-  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);
-  }
-
-  private setStyleVariable() {
-    const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';
-    document.body.style.setProperty('--datepicker-hover-color', hover);
-    document.body.style.setProperty('--datepicker-selected-color', `${this.companyColor || '#D410AA'}`);
-  }
-}

package/projects/tgo-canopy-ui/components/datepicker/datepicker.service.spec.ts

@@ -1,30 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { DatepickerService } from './datepicker.service';
-
-describe('DatepickerService', () => {
-  let service: DatepickerService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(DatepickerService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should return false as default value for useBrowserTimezone', () => {
-    expect(service.useBrowserTimezone).toBe(false);
-  });
-
-  it('should set useBrowserTimezone to true', () => {
-    service.useBrowserTimezone = true;
-    expect(service.useBrowserTimezone).toBe(true);
-  });
-
-  it('should set useBrowserTimezone to false', () => {
-    service.useBrowserTimezone = true;
-    service.useBrowserTimezone = false;
-    expect(service.useBrowserTimezone).toBe(false);
-  });
-});

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

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DatepickerService {
-  #useBrowserTimezone = false;
-
-  set useBrowserTimezone(value: boolean) {
-    this.#useBrowserTimezone = value;
-  }
-
-  get useBrowserTimezone(): boolean {
-    return this.#useBrowserTimezone;
-  }
-}

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

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

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

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

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

@@ -1,32 +0,0 @@
-@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;
-        }
-      }
-    }
-  }
-}