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

package/projects/tgo-canopy-ui/components/radio-button/radio-button.component.ts

@@ -1,358 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DestroyRef,
-  EventEmitter,
-  Host,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  NgZone,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Output,
-  Self,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { MatRadioButton } from '@angular/material/radio';
-import { RadioButtonEventType } from './radio-button.model';
-import { ApplicationTheme } from "../../models/application-theme.model";
-import { ControlValueAccessor, NgControl } from "@angular/forms";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { MatTooltip } from '@angular/material/tooltip';
-import { Alignment } from '../../models/checkbox.model';
-import { FocusMonitor } from '@angular/cdk/a11y';
-
-@Component({
-  selector: 'ui-radio-button',
-  templateUrl: './radio-button.component.html',
-  styleUrls: ['./radio-button.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  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-radio-button element.
-    '(focus)': 'radioElement.focus()',
-  },
-})
-export class RadioButtonComponent implements OnInit, OnChanges, ControlValueAccessor, AfterViewInit, OnDestroy {
-  @HostListener('click', ['$event'])
-  onHostClick(event: any): void {
-    if (event.target?.classList?.value?.includes?.('mat-mdc-radio-button') || event.target?.classList?.value?.includes?.('mdc-form-field')) {
-      this.radioElement._inputElement.nativeElement.click();
-    }
-  }
-  /**
-   * Determines whether the radio button is disabled.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof RadioButtonComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   * Determines whether the radio button is checked.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof RadioButtonComponent
-   */
-  //@Input() selected = false;
-
-  _selected = false;
-  @Input()
-  get selected() {
-    return this._selected;
-  }
-  set selected(selected: boolean) {
-    this._selected = selected;
-  }
-
-  /**
-   * Determines whether the radio button can be unchecked.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof RadioButtonComponent
-   */
-  @Input() allowUnselect = false;
-
-  /**
-   * Determines the radio button color.
-   * Default: Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof RadioButtonComponent
-   */
-  @HostBinding('style.--color')
-  @Input()
-  companyColor: string | null = null;
-
-  /**
-   * Used to group radios for unique selection.
-   *
-   * @type {string}
-   * @memberof RadioButtonComponent
-   */
-  @Input() name = '';
-
-  /**
-   * Text content will be applied to the input element if present.
-   *
-   * @type {string}
-   * @memberof RadioButtonComponent
-   */
-  @Input() label = '';
-
-  /**
-   * Determines whether the radio button is a multiple choice cell.
-   * Default: false
-   *
-   * @type {boolean}
-   * @memberof RadioButtonComponent
-   */
-  @Input() multiple = false;
-
-  /**
-   * Determines value of the radio button.
-   * Default: false
-   *
-   * @type {any}
-   * @memberof RadioButtonComponent
-   */
-  @Input() value: any;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof RadioButtonComponent
-   */
-  @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 RadioButtonComponent
-   */
-  @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 RadioButtonComponent
-   */
-  @Input() ariaRequired = false;
-
-  /**
-   * Defines if checkbox has error
-   *
-   * @type {boolean}
-   * @memberof RadioButtonComponent
-   */
-  @Input() hasError = 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 RadioButtonComponent
-   */
-  @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 RadioButtonComponent
-   */
-  @Input() ariaDescribedby = '';
-
-  /**
-   *  Truncate text if it is too long
-   * @type {boolean}
-   * @memberof RadioButtonComponent
-   */
-  @Input() truncateText = false;
-
-  /**
-   * Text alignment
-   * @type {'center' | 'top'}
-   * @memberof RadioButtonComponent
-   */
-  @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 RadioButtonComponent
-   */
-  @Input() tabIndex = 0;
-
-  /**
-   * Event emitted when the checked state of the radio button changes.
-   *
-   * @type {boolean}
-   * @memberof RadioButtonComponent
-   */
-  @Output() changeRadio = new EventEmitter<RadioButtonEventType>();
-
-  classMultiple: string;
-  showTooltip = false;
-  protected origin: string | null = null;
-
-  @ViewChild('radio') radioElement: MatRadioButton;
-  @ViewChild('tooltip') tooltipElement: MatTooltip;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    @Optional() @Self() public ngControl: NgControl,
-    @Optional() @Host() public hostNgControl: NgControl,
-    private destroyRef: DestroyRef,
-    private focusMonitor: FocusMonitor,
-    private ngZone: NgZone,
-    private cdr: ChangeDetectorRef,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-  }
-
-  ngOnInit() {
-    this.checkHost();
-    this.classMultiple = this.setClass();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['selected']) {
-      this.classMultiple = this.setClass();
-    }
-    this.setCompanyColor();
-  }
-
-  ngAfterViewInit() {
-    this.radioElement._inputElement.nativeElement.setAttribute('role', 'radio');
-    this.radioElement._inputElement.nativeElement.onclick = () => {
-      this.clickRadio();
-    };
-
-    this.focusMonitor.monitor(this.radioElement._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.radioElement._inputElement.nativeElement);
-  }
-
-  //Click method
-  clickRadio() {
-    if (this.allowUnselect) {
-      this.radioElement.checked = !this.radioElement.checked;
-      this._selected = this.radioElement.checked;
-      this.classMultiple = this.setClass();
-      this.selected = this.radioElement.checked;
-      this.changeRadio?.emit({ optionName: this.radioElement.value, optionChecked: this.radioElement.checked });
-    } else {
-      this.selected = this.radioElement.checked;
-      this.changeRadio.emit({ optionName: this.radioElement.value, optionChecked: true });
-    }
-    if (this.disabled) {
-      this._selected = false;
-      this.changeRadio.emit({ optionName: '', optionChecked: false });
-    }
-    this.onChange(this._selected)
-  }
-
-  writeValue(value: any): void {
-    if (typeof value === 'boolean' || value === this.value) {
-      this.selected = value;
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  onChange = (_: any) => {};
-
-  /**
-   * @ignore
-   */
-  onTouch = () => {};
-
-  //Set class for multiple radio
-  setClass(): string {
-    if (this.multiple) {
-      return this._selected ? 'multiple-checked' : 'multiple-unchecked';
-    }
-    return '';
-  }
-
-  onLabelEllipsisChange(isEllipsis: boolean): void {
-    this.showTooltip = isEllipsis;
-  }
-
-  private checkHost(): void {
-    if (this.hostNgControl) {
-      this.selected = this.value === this.hostNgControl.value;
-      this.hostNgControl.valueChanges?.pipe(
-        takeUntilDestroyed(this.destroyRef)
-      ).subscribe((value) => {
-        this.selected = value === this.value;
-        this.classMultiple = this.setClass();
-      });
-    }
-  }
-
-  private setCompanyColor(): void {
-    this.companyColor = this.companyColor ? this.companyColor : this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
-  }
-
-  onFocus(showTooltip: boolean): void {
-    setTimeout(() => {
-      this.showTooltip && showTooltip ? this.tooltipElement.show() : this.tooltipElement.hide();
-    }, 0)
-  }
-
-  focus(): void {
-    this.radioElement.focus();
-  }
-}

package/projects/tgo-canopy-ui/components/radio-button/radio-button.model.ts

@@ -1,4 +0,0 @@
-export type RadioButtonEventType = {
-  optionName: string;
-  optionChecked: boolean;
-};

package/projects/tgo-canopy-ui/components/rating/half-star.pipe.spec.ts

@@ -1,33 +0,0 @@
-import { HalfStarPipe } from './half-star.pipe';
-
-describe('HalfStarPipe', () => {
-  let pipe: HalfStarPipe;
-
-  beforeEach(() => {
-    pipe = new HalfStarPipe();
-  });
-
-  it('should create an instance', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  it('should return true for a half-star index', () => {
-    const result = pipe.transform(4, 3.5);
-    expect(result).toBe(true);
-  });
-
-  it('should return false for a whole-star index', () => {
-    const result = pipe.transform(2, 2);
-    expect(result).toBe(false);
-  });
-
-  it('should return false for a non-matching index', () => {
-    const result = pipe.transform(1, 2.5);
-    expect(result).toBe(false);
-  });
-
-  it('should return false for a whole-star index with non-integer value', () => {
-    const result = pipe.transform(3, 3.5);
-    expect(result).toBe(false);
-  });
-});

package/projects/tgo-canopy-ui/components/rating/half-star.pipe.ts

@@ -1,17 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'halfStar',
-})
-export class HalfStarPipe implements PipeTransform {
-  /**
-   * @description Used to indicate whether display half-star icon.
-   * Returns true if the rounded value of the current element
-   * is equal to it's index, and value is not integer (e.g. index = 4, value = 3.5),
-   * @param index the index of the current element
-   * @param value the value of the current element
-   */
-  transform(index: number, value: number): boolean {
-    return Math.ceil(value) === index && !Number.isInteger(value);
-  }
-}

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

@@ -1,32 +0,0 @@
-<div class="rating"
-     (mouseleave)="onHover(-1)"
-     [attr.aria-label]="ariaLabel"
-     [attr.aria-required]="ariaRequired"
->
-  <ng-container *ngIf="theme === 'block';else stars">
-    <div class="rating-item" [attr.theme]="applicationTheme" *ngFor="let item of items" (click)="select(item)" (mouseenter)="onHover(item)"
-         [ngClass]="{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }"
-         [ngStyle]="{'width.px': barWidth}">
-    </div>
-  </ng-container>
-
-  <ng-template #stars>
-    <div class="star-container" [attr.theme]="applicationTheme">
-      <div
-        #star
-        class="star"
-        [tabIndex]="0"
-        (mouseenter)="onHover(item)"
-        (mouseleave)="onHover(-1)"
-        [ngClass]="{
-          filled: value > i,
-          hover: item < hoverIndex && (value ? item >= value : true),
-          disabled,
-          'filled-half': i + 1 | halfStar : value
-        }"
-        *ngFor="let item of items; index as i"
-        (click)="select(item); star.blur()"
-      ></div>
-    </div>
-  </ng-template>
-</div>

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

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RatingComponent } from './rating.component';
-import { HalfStarPipe } from './half-star.pipe';
-import { MatInputModule } from '@angular/material/input';
-
-@NgModule({
-  declarations: [RatingComponent, HalfStarPipe],
-  imports: [CommonModule, MatInputModule],
-  exports: [RatingComponent],
-})
-export class RatingComponentModule {}

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

@@ -1,139 +0,0 @@
-@use "../../theme/variables" as *;
-
-.rating {
-  display: flex;
-  align-content: center;
-  justify-content: flex-start;
-  align-items: center;
-
-  &-item {
-    width: 35px;
-    height: 16px;
-    border: 1px solid $tgo-medium;
-    border-left: 0;
-    cursor: pointer;
-
-    &-hover {
-      border: 0;
-      background-color: $tgo-teal-60w;
-
-      &[theme="dark"], &[theme="light"] {
-        background-color: $brand-30;
-      }
-
-      &:not(:first-child) {
-        border-left: 1px solid $tgo-white;
-      }
-    }
-
-    &:first-child {
-      border-radius: 4px 0px 0px 4px;
-
-      &:not(.rating-item-selected):not(.rating-item-hover) {
-        border-left: 1px solid $tgo-medium;
-      }
-    }
-
-    &:last-child {
-      border-radius: 0px 4px 4px 0px;
-    }
-
-    &:first-child:last-child {
-      border-radius: 4px;
-    }
-
-    &-selected {
-      border: 0;
-      background-color: $tgo-teal-default;
-
-      &[theme="dark"], &[theme="light"] {
-        background-color: $brand-50;
-      }
-
-      &:not(:first-child) {
-        border-left: 1px solid $tgo-white;
-      }
-    }
-  }
-
-  .star-container {
-    display: flex;
-    flex-direction: row;
-    min-height: 24px;
-
-    .star {
-      width: 24px;
-      height: 24px;
-      background: url("/icons/rating-icons/Star-outline.svg") no-repeat center;
-      background-size: 100%;
-      margin-right: 4px;
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &:focus {
-        outline: 1px dashed $tgo-dark;
-      }
-
-      &:hover, &.hover, &:focus {
-        opacity: 0.5;
-        @extend .star-filled;
-      }
-
-      &.filled {
-        @extend .star-filled
-      }
-
-      &.filled-half {
-        background-image: url("/icons/rating-icons/Star-half.svg")!important;
-      }
-
-      &.disabled {
-        pointer-events: none;
-        background-image: url("/icons/rating-icons/Star-filled-disabled.svg");
-      }
-
-      &:active {
-        @extend .star-filled;
-        opacity: 1;
-      }
-    }
-
-    .star-filled {
-      background-image: url("/icons/rating-icons/Star-filled.svg");
-    }
-
-    &[theme="dark"], &[theme="light"] {
-      .star {
-        cursor: pointer;
-        background: url("/icons/rebrand/Review-star-in-line.svg") no-repeat center;
-        &:hover, &.hover, &:focus {
-          opacity: 0.5;
-          @extend .star-filled;
-        }
-
-        &:focus {
-          outline-offset: 4px
-        }
-
-        &.filled {
-          @extend .star-filled;
-        }
-
-        &.filled-half {
-          background-image: url("/icons/rebrand/Review-half-star-filled.svg")!important;
-        }
-
-        &.disabled {
-          background-image: url("/icons/rebrand/Review-star-filled-disabled.svg");
-        }
-      }
-      .star-filled {
-        background-image: url("/icons/rebrand/Review-star-filled.svg");
-      }
-    }
-
-  }
-}
-
-