@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,213 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter, Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  ViewChild
+} from '@angular/core';
+import { debounceTime, map, ReplaySubject } from 'rxjs';
+import { IconColor, IconName } from '../icon/icon.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+})
+export class TagComponent implements AfterViewInit, OnInit {
+  /**
+   * Tag's label
+   *
+   * @memberof TagComponent
+   */
+  @Input() set label(value: string) {
+    this.labelText = value;
+    if (this.labelElement) {
+      this.isLabelEllipseActive();
+    }
+  }
+
+  /**
+   * Icon
+   *
+   * @type {string}
+   * @memberof TagComponent
+   */
+  @Input() icon: IconName = '';
+
+  /**
+   * Whether to allow the tag to be closed.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() allowClose = false;
+
+  /**
+   * Whether the tag is in read-only mode.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() readOnly = false;
+
+  /**
+   * Whether the tag is selected.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() isSelected = false;
+
+  /**
+   * Display icon when is selected
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() showIconWhenSelected = false;
+
+  /**
+   * Specifies whether the element is disabled.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() isDisabled = false;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof TagComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof TagComponent
+   */
+  @Input() ariaLabel: string;
+
+  /**
+   * A string representing the ARIA requirement for accessibility.
+   * This attribute is used to indicate whether an input field is required for form submission.
+   * @type {boolean}
+   * @memberof TagComponent
+   */
+  @Input() ariaRequired = false;
+
+  /**
+   * Event triggered when the tag should be closed.
+   *
+   * @event
+   * @memberof TagComponent
+   */
+  @Output() close = new EventEmitter<void>();
+
+  /**
+   * Event triggered when a press action occurs.
+   *
+   * @event
+   * @memberof TagComponent
+   */
+  @Output() press = new EventEmitter<boolean>();
+
+  /**
+   * Subject that needs to be triggered when Label input changes, to check if it's truncated
+   * @private
+   * @type {void}
+   * @memberof TagComponent
+   */
+  private checkLabelEllipsis$ = new ReplaySubject<void>(1);
+
+  /**
+   * Observable that indicates if the Label is truncated
+   * debounceTime is used to wait for view to be initialized after receiving a new Label input
+   * @protected
+   * @type {boolean}
+   * @memberof TagComponent
+   */
+  protected isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(
+    debounceTime(100),
+    map(() => {
+      const el = this.labelElement.nativeElement;
+      return el.offsetWidth < el.scrollWidth;
+    })
+  );
+  protected labelText = '';
+  protected isHovered = false;
+  protected shrink = false;
+  protected iconToPass: IconName;
+  protected iconColor: IconColor;
+
+  @ViewChild('labelElement') labelElement: ElementRef<HTMLElement>;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {
+    this.iconToPass = this.icon;
+    this.iconColor = 'black';
+  }
+
+  ngAfterViewInit(): void {
+    this.isLabelEllipseActive();
+  }
+
+  onPress(): void {
+    if (!this.readOnly && !this.allowClose) {
+      this.isSelected = this.showIconWhenSelected ? !this.isSelected : false;
+      this.press.emit(this.isSelected);
+    }
+  }
+
+  setHoverState(state: boolean) {
+    this.isHovered = state;
+    if (this.applicationTheme !== 'classic') {
+      if (state) {
+        this.iconToPass = `${this.icon}-filled` as IconName;
+      } else {
+        this.iconToPass = this.icon;
+      }
+      this.iconColor = this.isHovered ? 'white' : 'black';
+    }
+  }
+
+  setShrinkState(state: boolean) {
+    this.shrink = state;
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  private isLabelEllipseActive(): void {
+    this.checkLabelEllipsis$.next();
+  }
+
+  get tabIndex(): number {
+    return this.isDisabled || this.readOnly ? -1 : 0;
+  }
+
+  get filled(): boolean {
+    return this.readOnly || this.allowClose || this.isSelected;
+  }
+}

package/projects/tgo-canopy-ui/components/toggle/toggle.component.html

@@ -0,0 +1,24 @@
+<div class="toggle" [ngClass]="classes">
+  <div
+    [style.--max-width]="maxWidth + 'px'"
+    [tabIndex]="0"
+    class="toggle-container"
+    [ngClass]="{ 'active': selected }"
+    (click)="onToggle()"
+    [attr.aria-label]="ariaLabel"
+    [attr.aria-required]="ariaRequired"
+  >
+    <div
+      class="label"
+      uiEllipseText
+      [matTooltipShowDelay]="800"
+      [matTooltip]="showLabelTooltip ? label : ''"
+      (onChangeTextState)="changeTextState($event)"
+    >
+      {{ label ? label : selected ? (translateContext + 'ON' | uiTranslate : language) : (translateContext + 'OFF' | uiTranslate : language) }}
+    </div>
+    <div class="knob"></div>
+  </div>
+  <div *ngIf="message && selected" class="message">{{ message }}</div>
+</div>
+

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToggleComponent } from './toggle.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
+import { MatInputModule } from '@angular/material/input';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [ToggleComponent],
+  imports: [CommonModule, MatTooltipModule, EllipseTextDirective, MatInputModule, UiTranslatePipe],
+  exports: [ToggleComponent],
+})
+export class ToggleComponentModule {}

package/projects/tgo-canopy-ui/components/toggle/toggle.component.scss

@@ -0,0 +1,202 @@
+@use "../../theme/variables" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
+:host {
+  width: fit-content;
+  display: block;
+
+  .toggle {
+    height: auto;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &.disabled {
+      opacity: 0.5;
+
+      .toggle-container {
+        background: $tgo-medium;
+        pointer-events: none;
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+
+    &.dark, &.light {
+      &.disabled {
+        .toggle-container {
+          &.active {
+            background: $grayscale-20;
+            border: 1px solid $black;
+
+            .knob {
+              &:after {
+                background: $black;
+              }
+            }
+          }
+        }
+      }
+
+      .toggle-container {
+        background: transparent;
+        border: 1px solid $black;
+
+        .label {
+          color: $black;
+        }
+
+        .knob {
+          &:after {
+            background: $black;
+          }
+        }
+
+        &.active {
+          background: $brand-50;
+          border: 1px solid $brand-50;
+
+          .label {
+            color: $tgo-white;
+          }
+
+          .knob {
+            &:after {
+              background: $tgo-white;
+            }
+          }
+        }
+      }
+
+      .message {
+        color: $black;
+      }
+    }
+
+    &.dark {
+      &.disabled {
+        .toggle-container {
+          &.active {
+            border-color: $tgo-white;
+
+            .knob {
+              &:after {
+                background: $tgo-white;
+              }
+            }
+          }
+        }
+      }
+
+      .toggle-container {
+        border-color: $tgo-white;
+
+        .label {
+          color: $tgo-white;
+        }
+
+        .knob {
+          &:after {
+            background: $tgo-white;
+          }
+        }
+      }
+
+      .message {
+        color: $tgo-white;
+      }
+    }
+
+
+    .toggle-container {
+      min-height: 16px;
+      max-height: 24px;
+      max-width: var(--max-width);
+      padding: 0 3px 0 16px;
+      width: fit-content;
+      min-width: 34px;
+      border-radius: 16px;
+      background: $tgo-dark;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      transition: transform 0.3s, padding 0.3s, background 0.3s;
+
+      &:focus {
+        outline: 1px dashed $tgo-dark;
+        outline-offset: 4px;
+      }
+
+      .knob {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        left: -1px;
+        top: 0;
+        display: flex;
+        align-items: center;
+        padding: 3px;
+        max-height: 16px;
+        transition: transform 0.3s;
+
+        &:after {
+          content: "";
+          display: block;
+          border-radius: 16px;
+          width: 12px;
+          height: 12px;
+          background: $tgo-white;
+          transition: background 0.3s;
+        }
+      }
+
+      .label {
+        z-index: 1;
+        font-size: 8px;
+        font-weight: bold;
+        color: $tgo-white;
+        text-align: center;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        pointer-events: visible;
+        line-height: 16px;
+      }
+
+      &.active {
+        background: $tgo-petrol-default;
+        padding: 0 16px 0 3px;
+
+        .knob {
+          transform: translateX(calc(100% - 15px));
+        }
+      }
+    }
+
+    .message {
+      margin-top: 4px;
+      font-weight: bold;
+      font-size: 12px;
+      line-height: 16px;
+      color: $tgo-petrol-default;
+      text-align: justify;
+    }
+  }
+}
+
+::ng-deep .mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-family: "Open Sans", serif;
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}

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

@@ -0,0 +1,197 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ToggleComponent } from './toggle.component';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+describe('ToggleComponent', () => {
+  let component: ToggleComponent;
+  let fixture: ComponentFixture<ToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ToggleComponent],
+      imports: [ReactiveFormsModule, UiTranslatePipe],
+      providers: [
+        {provide: 'CANOPYUI_DEFAULT_APPLICATION_THEME', useValue: 'dark'}
+      ],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should change form value', waitForAsync(() => {
+    const form: FormGroup = new FormGroup({ switch: new FormControl(true) })
+    const control: FormControl = form.get('switch') as FormControl;
+
+    control.setValue(false);
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(control.value).toBe(false);
+    });
+  }));
+
+  it('should not toggle the state or emit the event when disabled', () => {
+    expect(component.selected).toBe(false);
+
+    component.disabled = true;
+
+    // @ts-ignore
+    jest.spyOn(component, 'onChange');
+    jest.spyOn(component.toggle, 'emit');
+
+    component.onToggle();
+
+    expect(component.selected).toBe(false);
+
+    // @ts-ignore
+    expect(component.onChange).not.toHaveBeenCalled();
+    expect(component.toggle.emit).not.toHaveBeenCalled();
+  });
+
+  it('should emit toggle event when onToggle is called', () => {
+    jest.spyOn(component.toggle, 'emit');
+    component.onToggle();
+    expect(component.toggle.emit).toHaveBeenCalledWith(component.selected);
+  });
+
+
+  it('should set disabled state', () => {
+    component.setDisabledState(true);
+    expect(component.disabled).toBe(true);
+    component.setDisabledState(false);
+    expect(component.disabled).toBe(false);
+  });
+
+  it('should change text state', () => {
+    component.changeTextState(true);
+    // @ts-ignore
+    expect(component.showLabelTooltip).toBe(true);
+    component.changeTextState(false);
+    // @ts-ignore
+    expect(component.showLabelTooltip).toBe(false);
+  });
+
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default selected value as false', () => {
+    expect(component.selected).toBe(false); // Default state
+  });
+
+  it('should emit "toggle" event when toggled', () => {
+    jest.spyOn(component.toggle, 'emit'); // Spy on the toggle event
+
+    component.onToggle(); // Simulate toggle
+    expect(component.toggle.emit).toHaveBeenCalledWith(true); // Should emit new state
+  });
+
+  it('should toggle the state when not disabled', () => {
+    expect(component.selected).toBe(false); // Initial state
+
+    component.onToggle(); // Toggle the state
+
+    expect(component.selected).toBe(true); // State should change
+  });
+
+  it('should not toggle when disabled', () => {
+    component.disabled = true;
+
+    component.onToggle(); // Try to toggle
+
+    expect(component.selected).toBe(false); // State should not change
+  });
+
+  it('should register onChange and trigger it when the state changes', () => {
+    const onChangeMock = jest.fn(); // Create a mock function
+
+    component.registerOnChange(onChangeMock);
+    component.onToggle(); // Simulate toggle
+
+    expect(onChangeMock).toHaveBeenCalledWith(true); // onChange should be called with the new state
+  });
+
+  it('should set disabled state with setDisabledState', () => {
+    component.setDisabledState(true);
+    expect(component.disabled).toBe(true); // Should set disabled to true
+
+    component.setDisabledState(false);
+    expect(component.disabled).toBe(false); // Should set disabled to false
+  });
+
+  it('should set max-width based on the maxWidth input', () => {
+    component.maxWidth = 100; // Set maxWidth input
+
+    fixture.detectChanges(); // Trigger change detection
+
+    const hostElement = fixture.nativeElement as HTMLElement;
+    expect(hostElement.style.getPropertyValue('--max-width')).toBe('100'); // Validate the HostBinding
+  });
+
+  it('should update selected state with writeValue', () => {
+    component.writeValue(true); // Set selected to true
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.selected).toBe(true); // Should update the selected state
+  });
+
+  it('should set disabled state with setDisabledState', () => {
+    component.setDisabledState(true); // Set disabled state
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.disabled).toBe(true); // The component should be disabled
+
+    component.setDisabledState(false); // Set disabled state to false
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.disabled).toBe(false); // The component should not be disabled
+  });
+
+  it('should change text state with changeTextState', () => {
+    component.changeTextState(true); // Set the tooltip state to true
+    //@ts-ignore
+    expect(component.showLabelTooltip).toBe(true); // Should update the text state
+
+    component.changeTextState(false); // Set the tooltip state to false
+    //@ts-ignore
+    expect(component.showLabelTooltip).toBe(false); // Should update the text state
+  });
+
+  it('should have provided application theme', () => {
+    expect(component.applicationTheme).toEqual('dark');
+  });
+
+  it('should have classes', () => {
+    component.applicationTheme = 'dark';
+    fixture.detectChanges();
+
+    //@ts-expect-error
+    expect(component.classes).toEqual(' dark');
+  });
+
+  it('should not update value if preventClick', () => {
+    component.preventClick = true;
+    component.selected = true;
+    const toggleSpy = jest.spyOn(component.toggle, 'emit');
+    // @ts-expect-error
+    const onChangeSpy = jest.spyOn(component, 'onChange');
+
+    fixture.detectChanges();
+    component.onToggle();
+
+    expect(toggleSpy).toHaveBeenCalledWith(true);
+    expect(onChangeSpy).toHaveBeenCalledTimes(0);
+  });
+});