@testgorilla/tgo-ui 2.10.999 → 2.11.1

package/projects/tgo-canopy-ui/components/tooltip/tooltip.component.spec.ts

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TooltipComponent } from './tooltip.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { TooltipPositionType } from './tooltip.model';
+
+describe('TooltipComponent', () => {
+  let fixture: ComponentFixture<TooltipComponent>;
+  let component: TooltipComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatTooltipModule],
+      declarations: [TooltipComponent],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TooltipComponent);
+    component = fixture.componentInstance;
+
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  });
+
+  it('should be placed at top by default', () => {
+    expect(component.position).toContain(TooltipPositionType.TOP);
+  });
+
+  describe('when position is at the top', () => {
+    it('should have matPosition as "above"', () => {
+      fixture.detectChanges();
+      expect(component.position).toContain(TooltipPositionType.TOP);
+      expect(component.matPosition).toContain('above')
+    })
+  });
+
+  describe('when position is at the bottom', () => {
+    it('should have matPosition as "below"', () => {
+      component.position = TooltipPositionType.BOTTOM;
+      fixture.detectChanges();
+      expect(component.matPosition).toContain('below')
+    })
+  });
+  describe('when position is at the left', () => {
+    it('should have matPosition as "left"', () => {
+      component.position = TooltipPositionType.LEFT;
+      fixture.detectChanges();
+      expect(component.matPosition).toContain('left')
+    })
+  })
+});

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

@@ -0,0 +1,235 @@
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { TooltipComponent } from './tooltip.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+
+export default {
+  title: 'Tooltip',
+  component: TooltipComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [TooltipComponent],
+      imports: [MatTooltipModule, MatButtonModule, MatIconModule, ButtonComponentModule],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Styles = `
+  .example-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .example-container.left {
+    justify-content: flex-start;
+  }
+
+  .example-container a {
+    text-decoration: none;
+  }
+`;
+
+const Exclude = ['ngOnInit', 'matPosition', 'setPosition'];
+
+export const WithBottom: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="bottom" message="Message for bottom tooltip" applicationTheme="${_theme}">
+        <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithBottom.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2852-4807&t=tr4FtpDPzRNxR0y1-0',
+  },
+};
+
+WithBottom.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithRight: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="right" message="Tooltip with right position" applicationTheme="${_theme}">
+      <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    styles: [Styles],
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+    template: `
+  <div class="example-container">
+    <ui-tooltip [position]="position" [message]="message" applicationTheme="${_theme}">
+      <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+    </ui-tooltip>
+  </div>`,
+  };
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  message: 'Tooltip message for default tooltip',
+  position: 'top',
+} as Partial<TooltipComponent>;
+
+Default.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithLeft: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="left" message="Message for left tooltip" applicationTheme="${_theme}">
+        <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithLeft.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithDirective: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    const linkColor = _theme === 'classic' ? '#46A997' : '#D410AA';
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container left">
+      <ui-button
+      type="primary"
+      iconName="Help"
+      iconPosition="left"
+      label="More Help"
+      matTooltip="Tooltip meessage for button"
+      matTooltipPosition="below"
+      matTooltipClass="${_theme}"
+      applicationTheme="${_theme}"
+      ></ui-button>
+    </div>
+    <div class="example-container">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie est ipsum, nec <a [style.color]="'${linkColor}'" matTooltipClass="${_theme}" href="#" matTooltipPosition="above" matTooltip="Tooltip for link">lobortis neque lacinia</a> ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur urna quis ultricies mattis. Cras quis euismod urna. Duis facilisis ac mauris in gravida.</p>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithDirective.parameters = {
+  docs: {
+    description: {
+      story: 'For using `tooltip` as directive use `mat-tooltip` properties: `matTooltip` and `matTooltipPosition`',
+    },
+  },
+  controls: {
+    exclude: Exclude,
+  },
+};
+
+export const WithLongTextLeft: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [Styles],
+      template: `
+    <div class="example-container">
+      <ui-tooltip position="left" message="Lorem ipsum dolor sit amet, consectetu adipiscing elit." applicationTheme="${_theme}">
+        <ui-button
+        type="secondary"
+        [justIcon]="true"
+        iconName="Help"
+        label="secondary"
+        size="small"
+        matTooltipClass="${_theme}"
+        applicationTheme="${_theme}"
+      ></ui-button>
+      </ui-tooltip>
+    </div>
+  `,
+    };
+  },
+} as Story;
+
+WithLongTextLeft.parameters = {
+  controls: {
+    exclude: Exclude,
+  },
+};

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

@@ -0,0 +1,81 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+} from '@angular/core';
+import { TooltipPositionType } from './tooltip.model';
+import { TooltipPosition } from '@angular/material/tooltip';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-tooltip',
+  templateUrl: './tooltip.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TooltipComponent implements OnInit {
+  /**
+   * Allows the user to define the position of the tooltip relative to the parent element.
+   *
+   * @type {TooltipPositionType}
+   * @memberof TooltipComponent
+   */
+  @Input() position: TooltipPositionType = TooltipPositionType.TOP;
+
+  /**
+   * Disables the display of the tooltip.
+   *
+   * @type {boolean}
+   * @memberof TooltipComponent
+   */
+  @Input({ transform: booleanAttribute }) disabled = false;
+
+  /**
+   * The message to be displayed in the tooltip.
+   *
+   * @type {string}
+   * @memberof TooltipComponent
+   */
+  @Input() message = '';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof TooltipComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  matPosition: TooltipPosition;
+
+  ngOnInit() {
+    this.setPosition();
+  }
+
+  //set position
+  setPosition(): void {
+    switch (this.position) {
+      case TooltipPositionType.TOP:
+        this.matPosition = 'above';
+        break;
+      case TooltipPositionType.BOTTOM:
+        this.matPosition = 'below';
+        break;
+      default:
+        this.matPosition = this.position;
+        break;
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/tooltip/tooltip.model.ts

@@ -0,0 +1,6 @@
+export enum TooltipPositionType {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right'
+}

package/projects/tgo-canopy-ui/components/validation-error/validation-error.component.html

@@ -0,0 +1,29 @@
+<div class="errors" *ngIf="ngControl?.hasError('maxlength')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MAX_LENGTH' | uiTranslate : language : { maxlength: getErrorValue('maxlength') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('minlength')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MIN_LENGTH' | uiTranslate : language : { maxlength: getErrorValue('minlength') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('min')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MIN' | uiTranslate : language : { min: getErrorValue('min') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('max')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'MAX' | uiTranslate : language : { max: getErrorValue('max') } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('required') && ngControl?.touched">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + (label ? 'REQUIRED_FIELD' : 'REQUIRED') | uiTranslate : language : { label } }}</span>
+</div>
+
+<div class="errors" *ngIf="ngControl?.hasError('email')">
+  <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+  <span>{{ translationContextErrors + 'EMAIL_INCORRECT' | uiTranslate : language }}</span>
+</div>

package/projects/tgo-canopy-ui/components/validation-error/validation-error.component.spec.ts

@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ValidationErrorComponent } from './validation-error.component';
+import { ReactiveFormsModule, FormControl, Validators, NgControl } from '@angular/forms';
+
+describe('ValidationErrorComponent', () => {
+  let component: ValidationErrorComponent;
+  let fixture: ComponentFixture<ValidationErrorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule], // Necessary to use form controls
+      declarations: [ValidationErrorComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ValidationErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges(); // Initialize component
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should default the applicationTheme to "light"', () => {
+    expect(component.applicationTheme).toBe('light'); // Default theme
+  });
+
+  it('should set the theme as a host attribute', () => {
+    component.applicationTheme = 'dark';
+    fixture.detectChanges(); // Trigger change detection
+
+    const themeAttribute = fixture.nativeElement.getAttribute('theme');
+    expect(themeAttribute).toBe('dark'); // Check if the theme attribute is set
+  });
+
+  it('should get the correct error value for "maxlength"', () => {
+    const formControl = new FormControl('', [Validators.maxLength(5)]);
+    formControl.setErrors({ maxlength: { requiredLength: 5 } });
+
+    component.ngControl = { control: formControl, errors: formControl.errors } as any;
+
+    const result = component.getErrorValue('maxlength');
+    expect(result).toBe(5); // Should return the required length
+  });
+
+  it('should get the correct error value for "minlength"', () => {
+    const formControl = new FormControl('', [Validators.minLength(3)]);
+    formControl.setErrors({ minlength: { requiredLength: 3 } });
+
+    component.ngControl = { control: formControl, errors: formControl.errors } as any;
+
+    const result = component.getErrorValue('minlength');
+    expect(result).toBe(3); // Should return the required length
+  });
+
+  it('should get the correct error value for "max"', () => {
+    const formControl = new FormControl('', [Validators.max(10)]);
+    formControl.setErrors({ max: { max: 10 } });
+
+    component.ngControl = { control: formControl, errors: formControl.errors } as any;
+
+    const result = component.getErrorValue('max');
+    expect(result).toBe(10); // Should return the max value
+  });
+
+  it('should get the correct error value for "min"', () => {
+    const formControl = new FormControl('', [Validators.min(1)]);
+    formControl.setErrors({ min: { min: 1 } });
+
+    component.ngControl = { control: formControl, errors: formControl.errors } as any;
+
+    const result = component.getErrorValue('min');
+    expect(result).toBe(1); // Should return the min value
+  });
+});

package/projects/tgo-canopy-ui/components/validation-error/validation-error.component.ts

@@ -0,0 +1,53 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { errorType } from './validation-error.model';
+import { NgControl } from '@angular/forms';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { LanguageService } from '../../utils/localization/language.service';
+
+@Component({
+  selector: 'ui-validation-error',
+  templateUrl: './validation-error.component.html',
+  styleUrls: ['./validation-error.component.scss'],
+})
+export class ValidationErrorComponent {
+  @Input() ngControl: NgControl;
+
+  @Input() label: string | undefined | null;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof ValidationErrorComponent
+   */
+  @HostBinding('attr.theme')
+  @Input()
+  applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * The language to be used
+   * @property language
+   * @type {Language}
+   * @memberof ValidationErrorComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  getErrorValue(type: errorType): number {
+    const ngControlErrors: any = this.ngControl.errors;
+    switch (type) {
+      case 'maxlength':
+        return ngControlErrors.maxlength.requiredLength;
+      case 'minlength':
+        return ngControlErrors.minlength.requiredLength;
+      case 'max':
+        return ngControlErrors.max.max;
+      case 'min':
+        return ngControlErrors.min.min;
+      default:
+        return 0;
+    }
+  }
+
+  translationContextErrors = 'ERRORS.';
+}

package/projects/tgo-canopy-ui/components/validation-error/validation-error.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ValidationErrorComponent } from './validation-error.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [ValidationErrorComponent],
+  exports: [ValidationErrorComponent],
+  imports: [CommonModule, IconComponentModule, UiTranslatePipe],
+})
+export class ValidationErrorModule {}

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

@@ -0,0 +1,121 @@
+import { Component, DebugElement, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DigitsOnlyDirective } from './digits-only.directive';
+
+@Component({
+  template: ` <input digitsOnly [allowOnlyDigits]="true" type="number" (paste)="onPaste($event)" /> `,
+})
+class TestComponent {
+  @ViewChild(DigitsOnlyDirective) digitsOnlyDirective: DigitsOnlyDirective;
+
+  onPaste(event: ClipboardEvent) {
+    // Simulate your paste handler
+  }
+}
+
+describe('DragDropDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let directiveElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DigitsOnlyDirective, TestComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    directiveElement = fixture.debugElement.query(By.directive(DigitsOnlyDirective));
+    fixture.detectChanges();
+  });
+
+  it('should create an instance of the directive', () => {
+    expect(directiveElement).toBeTruthy();
+  });
+
+  it('allow only digits, non-decimals and non-negative, valid input, should propagate value', () => {
+    const element = fixture.debugElement.query(By.css('input')).nativeElement;
+    const event = new KeyboardEvent('keypress', { key: '2' });
+    jest.spyOn(event, 'preventDefault');
+    element.dispatchEvent(event);
+    fixture.detectChanges();
+    expect(event.preventDefault).toHaveBeenCalledTimes(0);
+  });
+
+  it('allow only digits, non-decimals and non-negative, invalid input, should not propagate value', () => {
+    const element = fixture.debugElement.query(By.css('input')).nativeElement;
+    const event = new KeyboardEvent('keypress', { key: '2.5' });
+    jest.spyOn(event, 'preventDefault');
+    element.dispatchEvent(event);
+    fixture.detectChanges();
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it('allow only digits, non-decimals and non-negative, invalid input, should not propagate value', () => {
+    const element = fixture.debugElement.query(By.css('input')).nativeElement;
+    const event = new KeyboardEvent('keypress', { key: '2e' });
+    jest.spyOn(event, 'preventDefault');
+    element.dispatchEvent(event);
+    fixture.detectChanges();
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it('allow only digits, decimals and non-negative, valid input, should propagate value', () => {
+    component.digitsOnlyDirective.allowDecimal = true;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('input')).nativeElement;
+    const event = new KeyboardEvent('keypress', { key: '2.5' });
+    jest.spyOn(event, 'preventDefault');
+    element.dispatchEvent(event);
+    fixture.detectChanges();
+    expect(event.preventDefault).toHaveBeenCalledTimes(0);
+  });
+
+  it('allow only digits, non-decimals and negative, valid input, should propagate value', () => {
+    component.digitsOnlyDirective.allowNegative = true;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('input')).nativeElement;
+    const event = new KeyboardEvent('keypress', { key: '-25' });
+    jest.spyOn(event, 'preventDefault');
+    element.dispatchEvent(event);
+    fixture.detectChanges();
+    expect(event.preventDefault).toHaveBeenCalledTimes(0);
+  });
+
+  it('should allow valid paste events', () => {
+    // Mock the ClipboardEvent with a simple object
+    const clipboardData = {
+      getData: jest.fn().mockReturnValue('12345'), // Mock the clipboard data
+    };
+
+    const event = {
+      clipboardData,
+      preventDefault: jest.fn(), // Mock preventDefault function
+    } as unknown as ClipboardEvent; // Cast as ClipboardEvent
+
+    directiveElement.triggerEventHandler('paste', event); // Trigger the paste event
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(event.preventDefault).not.toHaveBeenCalled(); // Should not prevent valid paste
+  });
+
+  it('should prevent invalid paste events', () => {
+    // Mock the ClipboardEvent with invalid data
+    const clipboardData = {
+      getData: jest.fn().mockReturnValue('abc'), // Non-numeric data
+    };
+
+    const event = {
+      clipboardData,
+      preventDefault: jest.fn(), // Mock preventDefault function
+    } as unknown as ClipboardEvent;
+
+    directiveElement.triggerEventHandler('paste', event); // Trigger the paste event
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(event.preventDefault).toHaveBeenCalled(); // Should prevent invalid paste
+  });
+});