@testgorilla/tgo-ui 2.10.999 → 2.11.1

package/projects/tgo-canopy-ui/directives/digits-only.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[digitsOnly]',
+})
+export class DigitsOnlyDirective {
+  constructor(private el: ElementRef) {}
+
+  @Input() allowNegative = false;
+  @Input() allowDecimal = false;
+  @Input() allowOnlyDigits = false;
+  regex: RegExp;
+
+  @HostListener('keypress', ['$event'])
+  onKeyPress(event: KeyboardEvent) {
+    this.validate(event, event.key);
+  }
+
+  @HostListener('paste', ['$event'])
+  onPaste(event: Event) {
+    const pastedText = <ClipboardEvent>event && (<ClipboardEvent>event)?.clipboardData?.getData('text/plain'); // Non-IE browsers
+    this.validate(event, pastedText || '');
+  }
+
+  validate(event: Event, text: string) {
+    if (this.allowOnlyDigits) {
+      const txtInput = this.el.nativeElement;
+      const newValue =
+        txtInput.value.substring(0, txtInput.selectionStart) + text + txtInput.value.substring(txtInput.selectionEnd);
+      if (!this.regex) {
+        this.regex = // eslint-disable-next-line no-eval
+          eval(
+            `/^${this.allowNegative ? '-?' : ''}${this.allowDecimal ? '((\\d+\\.?)|(\\.?))\\d*' : '\\d*'}$/g`
+          ) as RegExp;
+      }
+      if (!newValue.match(this.regex)) {
+        event.preventDefault();
+        return;
+      }
+    }
+  }
+}

package/projects/tgo-canopy-ui/directives/drag-drop.directive.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { DragDropDirective } from './drag-drop.directive';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: `
+    <div uiDragDrop (fileDropped)="onFileDropped($event)" [ngClass]="{'file-over': isFileOver}">
+      Drop files here
+    </div>
+  `
+})
+class TestComponent {
+  isFileOver = false;
+  onFileDropped(files: FileList) { }
+}
+
+describe('DragDropDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let directiveElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DragDropDirective, TestComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    directiveElement = fixture.debugElement.query(By.directive(DragDropDirective));
+    fixture.detectChanges();
+  });
+
+  it('should create an instance of the directive', () => {
+    expect(directiveElement).toBeTruthy();
+  });
+
+  it('should add file-over class when dragging over the element', () => {
+    const divElement = fixture.debugElement.query(By.css('div'));
+    divElement.triggerEventHandler('dragover', createMockEventInit());
+    fixture.detectChanges();
+    expect(divElement.nativeElement.classList).toContain('file-over');
+  });
+
+  it('should remove file-over class when dragging leaves the element', () => {
+    const divElement = fixture.debugElement.query(By.css('div'));
+    divElement.nativeElement.classList.add('file-over');
+    divElement.triggerEventHandler('dragleave', createMockEventInit());
+    fixture.detectChanges();
+    expect(component.isFileOver).toBe(false);
+    expect(divElement.nativeElement.classList).not.toContain('file-over');
+  });
+
+  it('should emit fileDropped event with dropped files when a file is dropped', () => {
+    const divElement = fixture.debugElement.query(By.css('div'));
+    const files: FileList = createMockFileList();
+    jest.spyOn(component, 'onFileDropped');
+    const dropEvent = createMockEvent('drop', { dataTransfer: { files } });
+    divElement.nativeElement.dispatchEvent(dropEvent);
+    fixture.detectChanges();
+    expect(component.onFileDropped).toHaveBeenCalledWith(files);
+  });
+
+  function createMockFileList(): FileList {
+    const file = new File(['dummy content'], 'test.txt');
+    return {
+      0: file,
+      length: 1,
+      item: (index: number) => file
+    } as unknown as FileList;
+  }
+
+  function createMockEvent(type: string, options?: any): Event {
+    const event = new Event(type);
+    Object.assign(event, options);
+    return event;
+  }
+
+  function createMockEventInit(type: string = 'mock', options: EventInit = {}): Event {
+    return new Event(type, options);
+  }
+});

package/projects/tgo-canopy-ui/directives/drag-drop.directive.ts

@@ -0,0 +1,39 @@
+import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
+
+@Directive({
+  selector: '[uiDragDrop]'
+})
+export class DragDropDirective {
+  constructor() { }
+
+  @HostBinding('class.file-over') file: boolean;
+  @Output() fileDropped = new EventEmitter<any>();
+
+  // Dragover listener
+  @HostListener('dragover', ['$event']) onDragOver(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.file = true;
+  }
+
+  // Dragleave listener
+  @HostListener('dragleave', ['$event']) public onDragLeave(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.file = false;
+  }
+
+  // Drop listener
+  @HostListener('drop', ['$event']) public ondrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.file = false;
+    let files: FileList;
+    if (!!event.dataTransfer) {
+      files = event.dataTransfer.files;
+      if (files.length > 0) {
+        this.fileDropped.emit(files);
+      }
+    }
+  }
+}

package/projects/tgo-canopy-ui/directives/ellipse-text.directive.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { EllipseTextDirective } from './ellipse-text.directive';
+
+@Component({
+  template: `<div uiEllipseText (onChangeTextState)="onChangeTextState($event)">{{ text }}</div>`
+})
+class TestComponent {
+  text = 'Lorem ipsum dolor sit amet';
+  onChangeTextState(showTooltip: boolean) {
+  }
+}
+
+describe('EllipseTextDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      imports: [EllipseTextDirective],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create an instance', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit false when text does not have ellipsis', fakeAsync(() => {
+    const spyOnChangeTextState = jest.spyOn(component, 'onChangeTextState');
+
+    fixture.detectChanges();
+    tick(100);
+
+    expect(spyOnChangeTextState).toHaveBeenCalledWith(false);
+  }));
+
+  it('should emit true when text has ellipsis', fakeAsync(() => {
+    fixture.componentInstance.text = 'Long text that will be truncated';
+
+    const spyOnChangeTextState = jest.spyOn(component, 'onChangeTextState');
+
+    fixture.detectChanges();
+    tick(100);
+
+    spyOnChangeTextState.mockImplementation(() => {
+      expect(spyOnChangeTextState).toHaveBeenCalledWith(true);
+    });
+
+    window.dispatchEvent(new Event('resize'));
+    tick(100);
+  }));
+});

package/projects/tgo-canopy-ui/directives/ellipse-text.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, ElementRef, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
+import { debounceTime, startWith, Subject } from 'rxjs';
+
+/**
+ * Checks if element ellipsis
+ */
+@Directive({
+  selector: '[uiEllipseText]',
+  standalone: true,
+})
+export class EllipseTextDirective implements OnInit {
+  checkEllipsis$ = new Subject<void>();
+  @Output() onChangeTextState = new EventEmitter<boolean>();
+  @HostListener('window:resize')
+  resize(): void {
+    this.checkEllipsis$.next();
+  }
+
+  constructor(private el: ElementRef) {}
+
+  ngOnInit() {
+    this.checkEllipsis$.pipe(startWith(null), debounceTime(100)).subscribe(() => {
+      const textElement = this.el.nativeElement as HTMLElement;
+      this.onChangeTextState.emit(textElement.clientWidth < textElement.scrollWidth);
+    });
+  }
+}

package/projects/tgo-canopy-ui/directives/select-text.directive.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed, tick, fakeAsync, flush } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { SelectTextDirective } from './select-text.directive';
+
+@Component({
+  template: `<div [selectText]="textToHighlight">Hello World!</div>`,
+})
+class TestComponent {
+  textToHighlight = 'Hello';
+}
+
+describe('SelectTextDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TestComponent, SelectTextDirective],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should highlight specified text', fakeAsync(() => {
+    fixture.detectChanges();
+
+    tick(100);
+
+    const highlightedText = debugElement.query(By.css('div'))?.nativeElement.innerHTML;
+    expect(highlightedText).toContain('<span style=\"font-weight: bold\">Hello</span> World!');
+    flush()
+  }));
+
+  it('should handle null or undefined textToHighlight', fakeAsync (() => {
+    component.textToHighlight = '';
+    fixture.detectChanges();
+
+    tick(200);
+
+    const innerHtml = debugElement.query(By.css('div')).nativeElement.innerHTML;
+    expect(innerHtml).toBe('Hello World!');
+    flush()
+  }));
+});

package/projects/tgo-canopy-ui/directives/select-text.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
+
+/**
+ * the SelectTextDirective provides a dynamic way to highlight or style specific text within an element.
+ */
+@Directive({
+  selector: '[selectText]',
+})
+export class SelectTextDirective implements OnChanges {
+  @Input() selectText: string | null;
+
+  constructor(private el: ElementRef) {}
+
+  /**
+   * this method utilizes setTimeout to defer the execution until the next tick of the event loop.
+   * The text content of the element is modified by wrapping occurrences of the specified selectText with a <span> element,
+   * applying a bold font-weight style.
+   */
+  private setTextColor(): void {
+    const textElement = this.el.nativeElement as HTMLElement;
+    setTimeout(() => {
+      const { textContent } = textElement;
+      if (this.selectText && textContent) {
+        textElement.innerHTML = textContent.replace(
+          new RegExp(this.selectText, 'gmi'),
+          match => `<span style="font-weight: bold" >${match}</span>`
+        );
+      } else if (textElement.textContent) {
+        textElement.textContent = textContent;
+      }
+    }, 0);
+  }
+
+  ngOnChanges(): void {
+    this.setTextColor();
+  }
+}

package/projects/tgo-canopy-ui/directives/step-line-width.directive.spec.ts

@@ -0,0 +1,59 @@
+import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { StepLineWidthDirective } from './step-line-width.directive';
+
+@Component({
+  template: `<div [stepLineWidth]="line"></div>`,
+})
+class TestComponent {
+  line: HTMLElement;
+}
+
+describe('StepLineWidthDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+  let directive: StepLineWidthDirective;
+  let divDebugElement: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, StepLineWidthDirective],
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    directive = fixture.debugElement.query(By.directive(StepLineWidthDirective)).injector.get(StepLineWidthDirective);
+
+    divDebugElement = fixture.debugElement.query(By.css('div'));
+  });
+
+  it('should create an instance', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  it('should set the size on ngOnChanges', fakeAsync(() => {
+    const setSizeSpy = jest.spyOn(directive, 'setSize');
+    component.line = document.createElement('div');
+    fixture.detectChanges();
+    tick()
+    expect(setSizeSpy).toHaveBeenCalled();
+  }));
+
+  it('should set width and left styles on setSize', () => {
+    const line = document.createElement('div');
+    component.line = line;
+    fixture.detectChanges();
+
+    const getBoundingClientRectSpy = jest.spyOn(line, 'getBoundingClientRect').mockReturnValue({ width: 100 } as any);
+
+    directive.setSize();
+
+    const nativeElement = divDebugElement.nativeElement as HTMLElement;
+
+    expect(nativeElement.style.width).toBe(`calc(100% + ${(100 / 2) - 16}px)`);
+    expect(nativeElement.style.left).toBe(`-${(100 / 2) - 36}px`);
+
+    getBoundingClientRectSpy.mockRestore();
+  });
+});

package/projects/tgo-canopy-ui/directives/step-line-width.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, ElementRef, HostListener, Input, OnChanges } from '@angular/core';
+
+const MARGINS = 36;
+const PADDING = 16;
+
+/**
+ * Directive is used to draw lines between steps
+ */
+@Directive({
+  selector: '[stepLineWidth]',
+})
+export class StepLineWidthDirective implements OnChanges {
+  @Input() stepLineWidth: HTMLElement;
+  @HostListener('window:resize.out-zone', ['$event'])
+  resize(): void {
+    this.setSize();
+  }
+
+  constructor(private el: ElementRef) {}
+
+  setSize(): void {
+    this.el.nativeElement.style.width = `calc(100% + ${this.stepLineWidth.getBoundingClientRect().width / 2 - PADDING}px)`;
+    this.el.nativeElement.style.left = `-${this.stepLineWidth.getBoundingClientRect().width / 2 - MARGINS}px`;
+  }
+
+  ngOnChanges(): void {
+    queueMicrotask(() => {
+      this.setSize();
+    });
+  }
+}

package/projects/tgo-canopy-ui/foundations/colors/colors.component.html

@@ -0,0 +1,4 @@
+<div data-testid="ui-colors" *ngFor="let color of colors" [ngClass]="color.colorClass" >
+  <h4><strong>{{ color.colorVariable }}</strong></h4>
+  <p class="featured">{{ color.colorHex }}</p>
+</div>

package/projects/tgo-canopy-ui/foundations/colors/colors.component.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ColorsComponent } from './colors.component';
+
+@NgModule({
+  declarations: [ColorsComponent],
+  imports: [CommonModule],
+  providers: [],
+})
+export class ColorsComponentModule {}