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

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

@@ -1,343 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DestroyRef,
-  DoCheck,
-  EventEmitter,
-  HostBinding,
-  Inject,
-  Input,
-  NgZone,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Output,
-  Self,
-  ViewChild,
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { MatTooltip } from "@angular/material/tooltip";
-import { Alignment } from '../../models/checkbox.model';
-import { FocusableOption, FocusMonitor } from '@angular/cdk/a11y';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-@Component({
-  selector: 'ui-checkbox',
-  templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.scss'],
-  host: {
-    // Needs to be removed since it causes some a11y issues. (https://github.com/angular/components/issues/21266)
-    '[attr.tabindex]': 'null',
-    '[attr.aria-label]': 'null',
-    '[attr.aria-labelledby]': 'null',
-    '[attr.aria-describedby]': 'null',
-    // Note: under normal conditions focus shouldn't land on this element, however it may be
-    // programmatically set, for example inside of a focus trap, in this case we want to forward
-    // the focus to the mat-checkbox element.
-    '(focus)': 'checkboxElement.focus()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-export class CheckboxComponent implements OnInit, FocusableOption, ControlValueAccessor, DoCheck, OnChanges, AfterViewInit, OnDestroy {
-  /**
-   * Determines whether the checkbox is disabled.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof CheckboxComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   * Determines whether the checkbox is checked.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof CheckboxComponent
-   */
-  @Input() checked = false;
-
-  /**
-   * Determines whether the checkbox is indeterminate.
-   * It can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof CheckboxComponent
-   */
-  @Input() indeterminate = false;
-
-  /**
-   * Determines whether the checkbox color.
-   * Default: Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof CheckboxComponent
-   */
-  @HostBinding('style.--color')
-  @Input() companyColor: string | null;
-
-  /**
-   * Name value will be applied to the input element if present.
-   *
-   * @type {string}
-   * @memberof CheckboxComponent
-   */
-  @Input() name = '';
-
-  /**
-   * Text content will be applied to the input element if present.
-   *
-   * @type {string}
-   * @memberof CheckboxComponent
-   */
-  @Input() label = '';
-
-  /**
-   * Determines whether the checkbox is a multiple choice cell.
-   * Default: false
-   *
-   * @type {boolean}
-   * @memberof CheckboxComponent
-   */
-  @Input() multiple = false;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof CheckboxComponent
-   */
-  @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 CheckboxComponent
-   */
-  @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 CheckboxComponent
-   */
-  @Input() ariaRequired = false;
-
-  /**
-   * Defines if checkbox has error
-   *
-   * @type {boolean}
-   * @memberof CheckboxComponent
-   */
-  @Input() hasError = false;
-
-  /**
-   * Hide in-build errors for Reactive Forms
-   *
-   * @type {number}
-   * @memberof CheckboxComponent
-   */
-  @Input() hideBuiltInErrors = false;
-
-  /**
-   * Hide label in errors
-   *
-   * @type {number}
-   * @memberof CheckboxComponent
-   */
-  @Input() hideLabelInErrors = false;
-
-  /**
-   * A string representing the ARIA requirement for accessibility.
-   * This attribute is used to indicate whether an input field is required for form submission.
-   * @type {string}
-   * @memberof CheckboxComponent
-   */
-  @Input() ariaLabelledby  = '';
-
-  /**
-   * A string representing the ARIA requirement for accessibility.
-   * This attribute is used to indicate whether an input field is required for form submission.
-   * @type {string}
-   * @memberof CheckboxComponent
-   */
-  @Input() ariaDescribedby = '';
-
-  /**
-   *  Truncate text if it is too long
-   * @type {string}
-   * @memberof CheckboxComponent
-   */
-  @Input() truncateText = false;
-
-  /**
-   * Text alignment
-   * @type {'center' | 'top'}
-   * @memberof CheckboxComponent
-   */
-  @Input() alignment: Alignment = 'center';
-
-  /**
-   * Sets the tab index for the checkbox component.
-   * This determines the order in which elements receive focus when the user navigates through them using the Tab key.
-   * Default value is 0.
-   *
-   * @type {number}
-   * @memberof CheckboxComponent
-   */
-  @Input() tabIndex = 0;
-
-  /**
-   * Event emitted when the checkbox's checked value changes.
-   *
-   * @type {boolean}
-   * @memberof CheckboxComponent
-   */
-  @Output() changed = new EventEmitter<boolean>();
-
-  /**
-   * @ignore
-   */
-  onChange = (_: any) => {};
-
-  /**
-   * @ignore
-   */
-  onTouch = () => {};
-
-  showTooltip = false;
-  classMultiple: string;
-
-  @ViewChild('tooltip') tooltipElement: MatTooltip;
-  @ViewChild('checkbox') checkboxElement: MatCheckbox;
-  protected origin: string | null = null;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    private cdr: ChangeDetectorRef,
-    @Optional() @Self() public ngControl: NgControl,
-    private focusMonitor: FocusMonitor,
-    private ngZone: NgZone,
-    private destroyRef: DestroyRef,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-  }
-
-  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-  ngOnChanges(): void {
-    this.setCompanyColor();
-  }
-
-  /**
-   * 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();
-    }
-  }
-
-  ngAfterViewInit(): void {
-    const checkboxNativeInput =  this.checkboxElement._inputElement.nativeElement;
-    checkboxNativeInput.setAttribute('role', 'checkbox');
-    checkboxNativeInput.setAttribute('aria-checked', (!!this.checked).toString());
-    checkboxNativeInput.setAttribute('aria-disabled', (!!this.disabled).toString());
-    checkboxNativeInput.setAttribute('aria-label', this.label);
-    this.focusMonitor.monitor(this.checkboxElement._inputElement.nativeElement).pipe(
-      takeUntilDestroyed(this.destroyRef)
-    ).subscribe(origin =>
-      this.ngZone.run(() => {
-        this.origin = origin;
-        this.cdr.markForCheck();
-        this.onFocus(origin === 'keyboard');
-      }),
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.focusMonitor.stopMonitoring(this.checkboxElement._inputElement.nativeElement);
-  }
-
-  emitChange(event: MatCheckboxChange): void {
-    this.changed.emit(event.checked);
-  }
-
-  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-  ngOnInit() {
-    this.classMultiple = this.setClass();
-    this.setCompanyColor();
-  }
-
-  toggleChecked(): void {
-    this.checked = !this.checked;
-    this.changed.emit(this.checked);
-    this.onTouch();
-    this.onChange(this.checked);
-    if (!this.disabled) {
-      this.indeterminate = false;
-      this.classMultiple = this.setClass();
-    }
-      this.checkboxElement._inputElement.nativeElement.setAttribute('aria-checked', (!!this.checked).toString());
-      this.checkboxElement._inputElement.nativeElement.setAttribute('aria-disabled', (!!this.disabled).toString());
-  }
-
-  setClass(): string {
-    if (this.multiple) {
-      return this.checked || this.indeterminate ? 'multiple-checked' : 'multiple-unchecked';
-    }
-    return '';
-  }
-
-  writeValue(value: boolean): void {
-    this.checked = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-
-  onLabelEllipsisChange(isEllipsis: boolean): void {
-    this.showTooltip = isEllipsis;
-  }
-
-  onFocus(showTooltip: boolean): void {
-    setTimeout(() => {
-      this.showTooltip && showTooltip ? this.tooltipElement.show() : this.tooltipElement.hide();
-    }, 0);
-  }
-
-  private setCompanyColor(): void {
-    this.companyColor = this.companyColor ? this.companyColor : this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
-  }
-
-  focus(): void {
-    this.checkboxElement.focus();
-  }
-}

package/projects/tgo-canopy-ui/components/checkbox/focus-visible.directive.spec.ts

@@ -1,26 +0,0 @@
-import { FocusVisibleDirective } from './focus-visible.directive';
-
-describe('FocusVisibleDirective', () => {
-  let directive: FocusVisibleDirective;
-
-  beforeEach(() => {
-    directive = new FocusVisibleDirective();
-  });
-
-  it('should create an instance', () => {
-    expect(directive).toBeTruthy();
-  });
-
-  it('should emit true on focus after keyboard event', () => {
-    jest.spyOn(directive.uiFocusVisible, 'next');
-    directive.handleKeyboardEvent();
-    directive.onFocus();
-    expect(directive.uiFocusVisible.next).toHaveBeenCalledWith(true);
-  });
-
-  it('should emit false on blur', () => {
-    jest.spyOn(directive.uiFocusVisible, 'next');
-    directive.onBlur();
-    expect(directive.uiFocusVisible.next).toHaveBeenCalledWith(false);
-  });
-});

package/projects/tgo-canopy-ui/components/checkbox/focus-visible.directive.ts

@@ -1,29 +0,0 @@
-import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
-
-@Directive({
-  selector: '[uiFocusVisible]',
-  standalone: true
-})
-export class FocusVisibleDirective {
-  @Output() uiFocusVisible = new EventEmitter<boolean>();
-  private hadKeyboardEvent = false;
-
-  constructor() {}
-
-  @HostListener('document:keydown', ['$event'])
-  handleKeyboardEvent(): void {
-    this.hadKeyboardEvent = true;
-  }
-
-  @HostListener('focus', ['$event'])
-  onFocus(): void {
-    if (this.hadKeyboardEvent) {
-      this.uiFocusVisible.next(true);
-    }
-  }
-
-  @HostListener('blur')
-  onBlur(): void {
-    this.uiFocusVisible.next(false);
-  }
-}

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

@@ -1,63 +0,0 @@
-@if (label()) {
-<h4 [attr.aria-label]="ariaLabel() ?? label()">{{ label() }}</h4>
-}
-
-<ui-progress-bar [showPercentage]="true" [progress]="progress()"></ui-progress-bar>
-
-<div style="position: absolute; left: -9999px" [attr.aria-live]="'polite'">
-  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}
-</div>
-
-<ui-divider size="small" companyColor="#d3d3d3"> </ui-divider>
-
-<div class="checklist-container" data-testid="checklist-container">
-  @for (item of items(); track (item.value+item.checked); let i = $index) {
-  <div
-    data-testid="checklist-item"
-    class="checklist-item"
-    [class.disabled]="item.disabled"
-    [class.checked]="item.checked"
-    [class.active]="item === selectedItem() && !autocheck()"
-    [attr.aria-labelledby]="'item-' + item.value"
-    [tabindex]="item?.disabled ? -1 : 0"
-    (click)="selectItem(item)"
-    (keydown)="keydownHandler($event, item)"
-  >
-    <div class="content">
-      <ui-icon
-        [name]="item.checked ? 'Check-in-line' : 'Circle-in-line'"
-        [filled]="item.checked"
-        class="checked"
-        [applicationTheme]="theme()"
-        [size]="'16'"
-        [color]="item.checked ? 'white' : item.disabled ? '#919191' : 'dark'"
-      ></ui-icon>
-      <span [id]="'item-' + item.value" class="label">{{ item.label }}</span>
-    </div>
-
-    @if (item.hasLink && !item.disabled) {
-    <div class="navigation">
-      <ui-icon
-        [tabindex]="-1"
-        class="link"
-        [name]="'Arrow-chevron-right-filled'"
-        [applicationTheme]="theme()"
-        [size]="'24'"
-        color="rebrand-black"
-      ></ui-icon>
-    </div>
-    }
-  </div>
-  }
-</div>
-@if (footerButtonLabel()) {
-<div class="action-btn">
-  <ui-button
-    data-testid="checklist-footer-button"
-    [label]="footerButtonLabel()!"
-    [variant]="'link'"
-    [companyColor]="'#000'"
-    (buttonClickEvent)="footerButtonClick($event)"
-  ></ui-button>
-</div>
-}

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

@@ -1,145 +0,0 @@
-@use '../../theme/variables' as *;
-
-:host {
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  background: $tgo-white;
-  border: 1px solid $grayscale-30;
-  border-radius: 10px;
-
-  .checklist-container {
-    margin-top: 24px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: auto;
-  }
-
-  h4 {
-    margin: 16px 0;
-  }
-
-  ui-progress-bar {
-    margin-bottom: 24px;
-  }
-
-  .checklist-item {
-    border-radius: 10px;
-    border: 1px solid transparent;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    height: 40px;
-    padding: 8px 8px 8px 12px;
-    margin: 4px 4px 8px 4px;
-    background-color: $tgo-white;
-    justify-content: space-between;
-    cursor: pointer;
-
-    .content {
-      display: flex;
-      align-items: center;
-    }
-
-    .label {
-      user-select: none;
-    }
-
-    .link {
-      position: relative;
-      z-index: 1;
-      cursor: pointer;
-      border-radius: 50px;
-    }
-
-    .checked {
-      position: relative;
-      border-radius: 50px;
-      margin-right: 12px;
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-
-      ::ng-deep mat-icon {
-        position: relative;
-        z-index: 1;
-      }
-
-      &:after {
-        content: '';
-        width: 16px;
-        height: 16px;
-        position: absolute;
-        transition: background-color 0.2s;
-        top: 0;
-        left: 0;
-        border-radius: 50px;
-      }
-    }
-
-    &.checked {
-      cursor: default;
-      ui-icon {
-        .label {
-          color: $grayscale-40;
-        }
-
-        &:after {
-          background: $brand-50;
-        }
-      }
-
-      .label {
-        color: $grayscale-40;
-      }
-    }
-
-    &:hover {
-      background-color: $brand-10;
-
-      .label {
-        color: $black;
-      }
-    }
-
-    &.active,
-    &:active {
-      background-color: $brand-20;
-
-      .label {
-        color: $black;
-      }
-    }
-
-    &:focus-visible {
-      outline-offset: 2px;
-      outline: 3px solid $black;
-      border-color: $black;
-      animation: focus-ring-animation-main 0.4s forwards;
-    }
-
-    ::ng-deep .mat-mdc-radio-button {
-      pointer-events: none !important;
-    }
-
-    &.disabled {
-      pointer-events: none;
-      .label {
-        color: $grayscale-40;
-      }
-    }
-  }
-
-  .action-btn {
-    margin-top: 16px;
-    display: flex;
-    justify-content: flex-end;
-
-    ::ng-deep ui-button {
-      .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper {
-        font-size: 14px !important;
-      }
-    }
-  }
-}