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

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

@@ -1,523 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DestroyRef,
-  DoCheck, ElementRef,
-  EventEmitter,
-  HostBinding,
-  Inject,
-  Input,
-  NgZone,
-  OnInit,
-  Optional,
-  Output,
-  Self,
-  signal,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { FieldType } from '../../components/field/field.model';
-import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { IconName } from '../icon/icon.model';
-import { FocusMonitor } from "@angular/cdk/a11y";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-
-@Component({
-  selector: 'ui-field',
-  templateUrl: './field.component.html',
-  styleUrls: ['./field.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FieldComponent implements OnInit, ControlValueAccessor, DoCheck, AfterViewInit {
-  @HostBinding() class = 'ui-field';
-
-  /**
-   * Indicator of the autocomplete width
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @HostBinding('class.full-width')
-  @Input() fullWidth = true;
-
-  /**
-   * Form field label
-   *
-   * @type {string}
-   * @memberof FieldComponent
-   */
-  @Input() label? = '';
-
-  /**
-   * Input name attribute
-   *
-   * @type {string}
-   * @memberof FieldComponent
-   */
-  @Input() fieldName?: string;
-
-  /**
-   * Input placeholder
-   *
-   * @type {string}
-   * @memberof FieldComponent
-   */
-  @Input() placeholder? = '';
-
-  /**
-   * Input id
-   *
-   * @type {string}
-   * @memberof FieldComponent
-   */
-  @Input() id? = '';
-
-  /**
-   * Input value
-   *
-   * @type {string}
-   * @memberof FieldComponent
-   */
-  @Input() value = '';
-
-  _errors: SafeHtml[];
-  /**
-   * Input field errors
-   *
-   * @type {string}
-   * @memberof FieldComponent
-   */
-  @Input() set errors(errors: string[]) {
-    this._errors = errors?.filter(Boolean).map(error => this.domSanitizer.bypassSecurityTrustHtml(error));
-    this.errorsLength = this.setErrorsLength();
-  }
-
-  /**
-   * Determines if input is disabled
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() disabled: boolean;
-
-  /**
-   * Input is required or not
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() required: boolean;
-
-
-  /**
-   * Input is readonly or not
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() readOnly: boolean = false;
-
-  /**
-   * Hint text
-   *
-   * @type {string}
-   * @memberof FieldComponent
-   */
-  @Input() hintMessage = '';
-
-  /**
-   * Input type
-   *
-   * @type {FieldType}
-   * @memberof FieldComponent
-   */
-  @HostBinding('attr.field-class')
-  @Input()
-  type: FieldType = 'text';
-
-  /**
-   * Input is update only on blur
-   *
-   * @type {Boolean}
-   * @memberof FieldComponent
-   */
-  @Input() updateOnBlur = false;
-
-  /**
-   * allow only digits in input
-   *
-   * @type {Boolean}
-   * @memberof FieldComponent
-   */
-  @Input() allowOnlyDigits = false;
-
-  /**
-   * allow negative numbers
-   *
-   * @type {Boolean}
-   * @memberof FieldComponent
-   */
-  @Input() allowNegative = true;
-
-  /**
-   * Show reserved content below form field
-   * @property showBottomContent
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() showBottomContent = true;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof FieldComponent
-   */
-  @HostBinding('attr.theme')
-  @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 FieldComponent
-   */
-  @Input() ariaLabel: string;
-
-  /**
-   * Show loading button. Only for text
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() loading = false;
-
-  /**
-   * Show icon when field is valid
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() isValid = false;
-
-  /**
-   * Max characters number
-   *
-   * @type {number}
-   * @memberof FieldComponent
-   */
-  @Input() maxCharacters = 255;
-
-  /**
-   * Trim text on blur
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() trimOnBlur = false;
-  /**
-   * Trim text on submit
-   *
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() trimOnSubmit = false;
-  /**
-   * Max rows for multi-line type
-   *
-   * @type {number}
-   * @memberof FieldComponent
-   */
-  @Input() maxRows = 0;
-
-  /**
-   * Hide in build errors for Reactive Forms
-   *
-   * @type {number}
-   * @memberof FieldComponent
-   */
-  @Input() hideBuiltInErrors = false;
-
-  /**
-   * Hide label in errors
-   *
-   * @type {number}
-   * @memberof FieldComponent
-   */
-  @Input() hideLabelInErrors = false;
-
-  /**
-   * Set maximum number
-   *
-   * @type {number}
-   * @memberof FieldComponent
-   */
-  @Input() max: number | undefined;
-
-  /**
-   * Set minimum number
-   *
-   * @type {number}
-   * @memberof FieldComponent
-   */
-  @Input() min: number | undefined;
-
-  /**
-   * Sets textarea height. Default 110
-   *
-   * @type {number}
-   * @memberof FieldComponent
-   */
-  @Input() textareaHeight = 110;
-
-  /**
-   * 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 FieldComponent
-   */
-  @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 FieldComponent
-   */
-  @Input() ariaDescribedby = '';
-
-  /**
-   * Show state of error
-   * @type {boolean}
-   * @memberof FieldComponent
-   */
-  @Input() hasError = false;
-
-  @Output() validateEvent = new EventEmitter<string>();
-  @Output() fieldBlur = new EventEmitter<void>();
-
-  @ViewChild('inputElement', { read: ElementRef }) field: ElementRef<HTMLInputElement>;
-
-  get getPasswordIcon(): IconName {
-    if (this.applicationTheme === 'classic') {
-      return this.showPassword ? 'Eye-hide' : 'Eye-view';
-    } else {
-      if (!this.isActiveField && !this.isActiveHover) {
-        return this.showPassword ? 'View-in-line' : 'Hide-in-line';
-      } else {
-        return this.showPassword ? 'View-filled' : 'Hide-filled';
-      }
-    }
-  }
-
-  isActiveField = false;
-  isActiveHover = false;
-
-  keyboardFocused = signal(false);
-
-  protected readonly translationContext = 'FIELD.';
-
-  /**
-   * @ignore
-   */
-  onChange = (_: any) => {};
-
-  /**
-   * @ignore
-   */
-  onTouch = () => {};
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer,
-    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;
-    }
-
-  }
-
-  ngAfterViewInit(): void {
-    this.focusMonitor.monitor(this.field).pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(origin => this.ngZone.run(() => {
-        this.keyboardFocused.set(origin === 'keyboard')
-    }));
-  }
-
-  /**
-   * 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)
-   */
-  ngDoCheck(): void {
-    if (this.ngControl?.touched || this.ngControl?.errors) {
-      this.cdr.markForCheck();
-    }
-  }
-
-  showClose: boolean;
-  showPassword: boolean;
-  currentType: string;
-  errorsLength: boolean;
-
-  ngOnInit(): void {
-    this.setSearchInput();
-    this.currentType = this.getType();
-  }
-
-  validate(): void {
-    this.validateEvent.emit(this.value);
-  }
-
-  //set search input initial value
-  setSearchInput(): void {
-    if (this.type === 'search' || this.type === 'collapsed-search') {
-      this.matIconRegistry.addSvgIcon('Search', this.domSanitizer.bypassSecurityTrustResourceUrl('/icons/Search.svg'));
-    } else {
-      this.showClose = false;
-    }
-  }
-
-  //change type for reveal password
-  getType(): string {
-    if (this.type === 'password' && this.showPassword) {
-      return 'text';
-    }
-    return this.type;
-  }
-
-  //Clear input value
-  clearValue(): void {
-    this.value = '';
-    this.onChange(this.value);
-    this.onChangeInputSearch();
-  }
-
-  //toggle for password
-  showPasswordClick() {
-    this.showPassword = !this.showPassword;
-    this.currentType = this.getType();
-  }
-
-  //Set options for search input
-  onChangeInputSearch() {
-    if (this.type === 'search' || this.type === 'collapsed-search') {
-      if (!this.value) {
-        this.showClose = false;
-      }
-      if (this.value) {
-        this.showClose = true;
-      }
-    }
-  }
-
-  // Set errors length for validation
-  // Consider only those errors which which are not empty
-  setErrorsLength(): boolean {
-    if (!!this._errors) {
-      return this._errors.filter(err => !!err).length > 0 ? true : false;
-    }
-    return false;
-  }
-
-  //Save input value
-  onInput(event: any) {
-    this.value = event.target.value;
-    this.errorsLength = this.setErrorsLength();
-    if (!this.updateOnBlur) {
-      this.onTouch();
-    }
-    if (this.allowOnlyDigits && !this.allowNegative && +this.value < 0) {
-      this.value = '0';
-    } else {
-      this.onChange(this.type === 'number' ? +this.value : this.value);
-    }
-  }
-
-  writeValue(value?: any): void {
-    if (value) {
-      this.value = value || '';
-    } else {
-      this.value = '';
-    }
-    this.cdr.markForCheck();
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-
-  onFieldClick(event: MouseEvent): void {
-    if (this.type === 'collapsed-search') {
-      this.type = 'search';
-    } else {
-      event.stopPropagation();
-    }
-  }
-
-  onActive(state: boolean, action: string): void {
-    if (action === 'hover') {
-      this.isActiveHover = state;
-    } else if (action === 'focus') {
-      this.isActiveField = state;
-
-      if (!state && this.trimOnBlur) {
-        this.clearSpace();
-      }
-    }
-  }
-
-  onSubmit(): void {
-    if (this.trimOnSubmit) {
-      this.clearSpace();
-    }
-  }
-
-  private clearSpace(): void {
-    this.value = this.value.trim();
-    this.onChange(this.value);
-  }
-
-  onBlur(): void {
-    this.fieldBlur.emit();
-  }
-
-  trackByFn = (index: number, value: any) => value.changingThisBreaksApplicationSecurity;
-
-  focus(): void {
-    this.field.nativeElement.focus();
-  }
-
-  refocusPasswordButton(btn: any) {
-    setTimeout(() => {
-      btn.focus('keyboard');
-    }, 0);
-  }
-}

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

@@ -1,11 +0,0 @@
-export type FieldType =
-  | 'text'
-  | 'password'
-  | 'email'
-  | 'number'
-  | 'tel'
-  | 'search'
-  | 'collapsed-search'
-  | 'validation-text'
-  | 'textarea'
-  | 'multi-line';

package/projects/tgo-canopy-ui/components/file-upload/file-upload.component.html

@@ -1,110 +0,0 @@
-<ng-container>
-  <div
-    class="upload-file-container"
-    uiDragDrop
-    [attr.aria-label]="ariaLabel"
-    [attr.aria-required]="ariaRequired"
-    [attr.theme]="applicationTheme"
-    [ngClass]="{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }"
-    (fileDropped)="onFileDropped($event)"
-    [tabIndex]="0"
-    (keydown)="onKeydown($event)"
-    (click)="fileDrop.nativeElement.click()"
-  >
-    <span style="position: absolute; left: -9999px;" [attr.aria-live]="'polite'">
-      {{ success ? ('FILE_UPLOAD.FILE_UPLOADING_SUCCESS' | uiTranslate | async) : progress ? ('FILE_UPLOAD.UPLOADING' | uiTranslate | async) : '' }}
-    </span>
-    <div *ngIf="(browse && !(success && !!file && progress))" [@inOutAnimation] class="upload-files">
-      <div class="upload-browse">
-        <ng-container [ngTemplateOutlet]="iconTpl"></ng-container>
-
-        <div class="errors" *ngIf="!!errors || isMissedMinSize" role="alert">
-          <ng-container *ngIf="!!errors">
-            <span *ngFor="let error of errors"><ui-icon name="Error" class="error-icon"></ui-icon>
-              {{ error }}</span>
-          </ng-container>
-
-          <span *ngIf="isMissedMinSize">
-            <ui-icon name="Error" class="error-icon"></ui-icon>
-            {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : { min: minFileSizeMB } | async }}
-          </span>
-        </div>
-        <input
-          [attr.aria-labelledby]="success || progress ? '' : 'drag-and-drop'"
-          [attr.aria-describedby]="'upload-supported-files'"
-          [tabIndex]="-1"
-          class="form-control"
-          #fileDrop
-          type="file"
-          id="file"
-          [accept]="supportedFileTypes"
-          [disabled]="disabled"
-          (change)="onChangeUpload($event)"
-        />
-        <label for="file" class="transparent">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate | async }}</label>
-        <p
-          *ngIf="applicationTheme === 'classic'; else rebrandedDnDCopyTpl">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate | async }}
-          <span
-                 class="semibold"> {{ (translationContext + 'BROWSE') | uiTranslate | async | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate | async }}
-        </p>
-        <span class="upload-text">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate | async }}</span>
-        <span *ngIf="minFileSizeMB" class="upload-text">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate | async }}</span>
-      </div>
-    </div>
-    <div class="upload-change" [@inOutAnimationChange] *ngIf="!!success && !!file && !!progress">
-      <ng-container [ngTemplateOutlet]="iconTpl"></ng-container>
-      <input
-        [tabIndex]="-1"
-        [attr.aria-labelledby]="success || progress ? '' : 'drag-and-drop'"
-        [attr.aria-describedby]="success || progress ? '' : 'supported-file-types'"
-        class="form-control"
-        #fileDrop
-        type="file"
-        id="fileTest"
-        [accept]="supportedFileTypes"
-        (change)="onChangeUpload($event)"
-        [disabled]="disabled"
-      />
-      <label for="file" class="transparent">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate | async }}</label>
-      <p
-        *ngIf="applicationTheme === 'classic'; else rebrandedDnDCopyTpl">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate | async }}&nbsp;<span
-        class="semibold">{{ (translationContext + 'CHANGE') | uiTranslate | async | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate | async }}
-      </p>
-      <span class="upload-text"
-      ><strong>{{ file.name }}</strong></span
-      >
-    </div>
-    <div class="upload-progress" [@inOutAnimationProgress] *ngIf="!!progress && !!file && !success">
-      <p>{{ file.name }}</p>
-      <ui-progress-bar [progress]="uploadProgress"
-                       [companyColor]="compColor"
-                       [applicationTheme]="applicationTheme"></ui-progress-bar>
-      <p class="upload-text">
-        {{ (translationContext + 'UPLOADING') | uiTranslate | async }} <span>{{ uploadProgress }}</span
-      >%
-      </p>
-    </div>
-
-    <ng-template #iconTpl>
-      <ui-icon *ngIf="applicationTheme === 'classic'; else rebrandedIconTpl" class="upload-icon"
-               name="File-upload"></ui-icon>
-      <ng-template #rebrandedIconTpl>
-        <ui-icon class="upload-icon"
-                 name="Upload"
-                 [size]="'24'"
-                 [applicationTheme]="applicationTheme"></ui-icon>
-      </ng-template>
-    </ng-template>
-    <ng-template #rebrandedDnDCopyTpl>
-      <p id="'drag-and-drop'">{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate | async }}</p>
-    </ng-template>
-
-    <div
-      *ngIf="!!supportedFileTypes"
-      [attr.theme]="applicationTheme"
-      class="upload-supported-files"
-      id="upload-supported-files">
-      <span >{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate | async }}</span>{{ supportedFileTypes }}
-    </div>
-  </div>
-</ng-container>

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

@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { DragDropDirective } from '../../directives/drag-drop.directive';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { FileUploadComponent } from './file-upload.component';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-
-@NgModule({
-  declarations: [FileUploadComponent, DragDropDirective],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    IconComponentModule,
-    ProgressBarComponentModule,
-    UiTranslatePipe,
-  ],
-  exports: [FileUploadComponent],
-})
-export class FileUploadComponentModule {}