@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/components/alert-banner/alert-banner.component.ts

@@ -0,0 +1,130 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, Optional } from '@angular/core';
+import { IconName } from '../../components/icon/icon.model';
+import { AlertBarType, AlertVariant } from '../../utils/alert-bar.model';
+import { alertBarsUtil } from '../../utils/alert-bars.utils';
+import { LinkTargetType } from './alert-banner.model';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-alert-banner',
+  templateUrl: './alert-banner.component.html',
+  styleUrls: ['./alert-banner.component.scss'],
+  animations: [
+    trigger('openClose', [
+      transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
+      transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
+    ]),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertBannerComponent implements OnInit {
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private domSanitizer: DomSanitizer
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  /**
+   * Alert Banner type
+   *
+   * @type {AlertBarType}
+   * @memberof AlertBannerComponent
+   */
+  @Input() alertType: AlertBarType = 'success';
+
+  /**
+   * Alert Banner variant
+   *
+   * @type {AlertVariant}
+   * @memberof AlertBannerComponent
+   */
+  @Input() alertVariant: AlertVariant = 'banner';
+
+  /**
+   * Alert banner message
+   *
+   * @memberof AlertBannerComponent
+   */
+  @Input() set message(msg: string) {
+    this._message = this.domSanitizer.bypassSecurityTrustHtml(msg);
+  }
+
+  /**
+   * Include dismmiss button
+   *
+   * @memberof AlertBannerComponent
+   */
+  @Input() includeDismissButton = true;
+
+  /**
+   * Include shadow or not
+   *
+   * @memberof AlertBannerComponent
+   */
+  @Input() shadow = false;
+
+  /**
+   * Link text that will appended at the end of message
+   *
+   * @memberof AlertBannerComponent
+   */
+  @Input() linkText? = '';
+
+  /**
+   * Link url
+   *
+   * @memberof AlertBannerComponent
+   */
+  @Input() linkUrl?: string;
+
+  /**
+   * Link target
+   *
+   * @type {@type {LinkTargetType}}
+   * @memberof AlertBannerComponent
+   */
+  @Input() linkTarget?: LinkTargetType = '_blank';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof AlertBannerComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Sets the full width
+   *
+   * @type {boolean}
+   * @memberof AlertBannerComponent
+   */
+  @Input() isFullWidth: boolean | undefined;
+
+  iconName: IconName;
+  visible = true;
+  fullWidth: boolean;
+  fixed: boolean;
+  position: string;
+  cssClass: string;
+  _message: SafeHtml = '';
+
+  ngOnInit(): void {
+    this.iconName = alertBarsUtil.setIcon(this.alertType);
+    this.position = alertBarsUtil.setPosition(this.fixed);
+    this.fixed = this.alertVariant === 'banner' ? true : false;
+    this.fullWidth = this.isFullWidth ?? this.alertVariant === 'banner';
+    this.cssClass = alertBarsUtil.setCssClass(this.fullWidth, this.alertType, this.position, this.alertVariant);
+  }
+
+  //Hide snackbar when dismiss button is clicked
+  dismissClick() {
+    this.visible = false;
+  }
+}

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

@@ -0,0 +1,198 @@
+<ng-container>
+  <div class="autocomplete-wrapper" [ngClass]="{ 'full-width': fullWidth, disabled: disabled }">
+    <mat-form-field
+      [color]="(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'"
+      [appearance]="'outline'"
+      [ngClass]="{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }"
+    >
+      <mat-label *ngIf="label">{{ label }} <span *ngIf="required">*</span></mat-label>
+      <div #formField class="input-container">
+        <div
+          class="selected-items"
+          #tagContainer
+          *ngIf="
+            (type === autocompleteType.LARGE && this.value) ||
+            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)
+          "
+        >
+          <ui-tag
+            class="value-tag"
+            [id]="'ui-tag-' + i"
+            *ngFor="let valueItem of value; let i = index"
+            [label]="valueItem | transformItem: textField"
+            [allowClose]="true"
+            [applicationTheme]="applicationTheme"
+            [style.display]="isOverLapping && i >= overlapIndex ? 'none' : 'block'"
+            [ngClass]="{
+              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI
+            }"
+            (close)="onOptionRemoved(valueItem)"
+          ></ui-tag>
+          <ng-container *ngIf="isOverLapping">
+            <div *ngIf="!overlapIndex; else overlapTag" class="overlap-count">
+              {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}
+            </div>
+            <ng-template #overlapTag>
+              <ui-tag [applicationTheme]="applicationTheme" [readOnly]="true" [label]="'+' + (value | slice: overlapIndex).length"></ui-tag>
+            </ng-template>
+          </ng-container>
+        </div>
+        <input
+          #trigger="matAutocompleteTrigger"
+          [disabled]="disabled"
+          [ngClass]="{ 'unset-margin': this.value && type === autocompleteType.LARGE }"
+          (blur)="refillInput()"
+          (focusin)="onFocus()"
+          matInput
+          [type]="'text'"
+          [matAutocomplete]="autocomplete"
+          (input)="onInputChange($event)"
+          [(ngModel)]="inputValue"
+        />
+      </div>
+
+      <ui-icon
+        *ngIf="value && value.length"
+        class="remove-selected lalalal"
+        [ngClass]="{ 'large-input-icon': type === autocompleteType.LARGE }"
+        (click)="onClear()"
+        [size]="'24'"
+        [color]="applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'"
+        [name]="applicationTheme === 'classic' ? 'Close' : 'Close-in-line'"
+      ></ui-icon>
+
+      <ui-icon
+        class="arrow-state"
+        [ngClass]="{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }"
+        *ngIf="isDropdown"
+        [size]="'24'"
+        [name]="applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'"
+        (click)="onChevronClick(autocomplete)"
+      ></ui-icon>
+
+      <mat-autocomplete
+        #autocomplete
+        [class]="applicationTheme"
+        (optionSelected)="onOptionSelected($event)"
+        [disableRipple]="applicationTheme !== 'classic'"
+        [hideSingleSelectionIndicator]="false"
+        (opened)="gotoUp()"
+      >
+        <ng-container *ngIf="!(searchResult$ | async)">
+          <ng-container *ngIf="!isDropdown; else dropdownList">
+            <mat-optgroup [label]="(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase" *ngIf="suggestionsList.length">
+              <mat-option
+                [ngClass]="{ 'selected-option': suggested | includes: value }"
+                *ngFor="let suggested of suggestionsList"
+                [value]="suggested"
+              >
+                <span [selectText]="userInput$ | async">{{ suggested | transformItem: textField }}</span>
+                <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Check' : 'Check-in-line'"></ui-icon>
+              </mat-option>
+            </mat-optgroup>
+
+            <mat-optgroup [label]="(translationContext + 'SELECTED') | uiTranslate : language | uppercase" *ngIf="value?.length && type !== autocompleteType.SINGLE">
+              <mat-option
+                [ngClass]="{ 'selected-option': item | includes: value }"
+                *ngFor="let item of value"
+                [value]="item"
+              >
+                <span>{{ item | transformItem: textField }}</span>
+                <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Check' : 'Check-in-line'"></ui-icon>
+              </mat-option>
+            </mat-optgroup>
+
+            <mat-optgroup [label]="(translationContext + 'SELECTED') | uiTranslate : language | uppercase" *ngIf="value?.length && type === autocompleteType.SINGLE">
+              <mat-option
+                [class]="'selected-option'"
+                [value]="value"
+              >
+                <span [selectText]="userInput$ | async">{{ value | transformItem: textField }}</span>
+                <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Check' : 'Check-in-line'"></ui-icon>
+              </mat-option>
+            </mat-optgroup>
+          </ng-container>
+
+          <ng-template #dropdownList>
+            <cdk-virtual-scroll-viewport [itemSize]="48" [style.height]="'200px'" class="virtual-scroll">
+              <mat-option
+                [ngClass]="{ 'selected-option': item | includes: value }"
+                *cdkVirtualFor="let item of itemsList"
+                [value]="item"
+              >
+                <span [selectText]="userInput$ | async">{{ item | transformItem: textField }}</span>
+                <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Check' : 'Check-in-line'"></ui-icon>
+              </mat-option>
+            </cdk-virtual-scroll-viewport>
+
+          </ng-template>
+
+        </ng-container>
+
+        <ng-container *ngIf="filteredSuggestionList$ | async as filteredSuggestionList">
+          <ng-container *ngIf="filteredItemsList$ | async as filteredItemsList">
+            <mat-optgroup [label]="(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase" *ngIf="filteredSuggestionList.length">
+              <mat-option
+                [ngClass]="{ 'selected-option': item | includes: value }"
+                *ngFor="let item of filteredSuggestionList"
+                [value]="item"
+              >
+                <span [selectText]="userInput$ | async">{{ item | transformItem: textField }}</span>
+                <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Check' : 'Check-in-line'"></ui-icon>
+              </mat-option>
+            </mat-optgroup>
+
+            <ng-container *ngIf="!filteredSuggestionList.length; else showItemListWithGroup">
+              <mat-option
+                [ngClass]="{ 'selected-option': item | includes: value }"
+                *ngFor="let item of filteredItemsList"
+                [value]="item"
+              >
+                <span [selectText]="userInput$ | async">{{ item | transformItem: textField }}</span>
+                <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Check' : 'Check-in-line'"></ui-icon>
+              </mat-option>
+            </ng-container>
+
+            <ng-template #showItemListWithGroup>
+              <mat-optgroup [label]="(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase" *ngIf="filteredItemsList.length">
+                <mat-option
+                  [ngClass]="{ 'selected-option': item | includes: value }"
+                  *ngFor="let item of filteredItemsList"
+                  [value]="item"
+                >
+                  <span [selectText]="userInput$ | async">{{ item | transformItem: textField }}</span>
+                  <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Check' : 'Check-in-line'"></ui-icon>
+                </mat-option>
+              </mat-optgroup>
+            </ng-template>
+
+            <ng-container *ngIf="!filteredItemsList.length && !filteredSuggestionList.length && inputValue">
+              <ng-container *ngIf="allowAdd && !isDropdown; else notFound">
+                <mat-option [value]="inputValue">
+                  <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>
+                  <span class="add-suggestion">"{{ inputValue }}"</span>
+                </mat-option>
+              </ng-container>
+
+              <ng-template #notFound>
+                <mat-option [style.pointer-events]="'none'">
+                  <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>
+                </mat-option>
+              </ng-template>
+            </ng-container>
+          </ng-container>
+        </ng-container>
+      </mat-autocomplete>
+      <mat-hint class="error" *ngIf="safeErrors.length || (ngControl?.errors | hasValidationError)">
+        <ng-container *ngIf="safeErrors.length">
+          <div class="errors" *ngFor="let error of safeErrors; trackBy: trackByFn">
+            <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+            <span [innerHTML]="error"></span>
+          </div>
+        </ng-container>
+        <ui-validation-error *ngIf="ngControl && !hideBuiltInErrors" [ngControl]="ngControl" [label]="hideLabelInErrors ? null : label" [language]="language"></ui-validation-error>
+
+      </mat-hint>
+    </mat-form-field>
+  </div>
+</ng-container>

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

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AutocompleteComponent } from './autocomplete.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+import { TagComponentModule } from '../tag/tag.component.module';
+import { MatChipsModule } from '@angular/material/chips';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { TransformItemPipe } from './transform-Item.pipe';
+import { IncludesPipe } from './includes.pipe';
+import { SelectTextDirective } from '../../directives/select-text.directive';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { ValidationErrorModule } from '../validation-error/validation-error.module';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+
+@NgModule({
+  declarations: [AutocompleteComponent, TransformItemPipe, IncludesPipe, SelectTextDirective],
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    MatAutocompleteModule,
+    MatInputModule,
+    FormsModule,
+    TagComponentModule,
+    MatChipsModule,
+    IconComponentModule,
+    UiTranslatePipe,
+    ValidationErrorModule,
+    HasValidationErrorPipe,
+    CdkVirtualForOf,
+    CdkVirtualScrollViewport,
+    CdkFixedSizeVirtualScroll,
+  ],
+  exports: [AutocompleteComponent],
+  providers: [TransformItemPipe, IncludesPipe, SelectTextDirective],
+})
+export class AutocompleteComponentModule {}

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

@@ -0,0 +1,283 @@
+@use "../../theme/variables" as *;
+
+.large-size {
+  input {
+    margin: 10px 0;
+  }
+
+  .selected-items {
+    margin: 5px 0;
+    flex-wrap: wrap;
+  }
+
+  .input-container {
+    display: block;
+  }
+
+  ::ng-deep .mat-mdc-form-field-infix, .mat-mdc-form-field-flex {
+    align-items: unset !important;
+  }
+}
+
+.disabled {
+  * {
+    pointer-events: none;
+  }
+  opacity: 0.5;
+}
+
+.input-container {
+  width: 100%;
+  margin: auto;
+  display: flex;
+
+
+  .selected-items {
+    display: flex;
+
+    .overlap-count {
+      font-size: 14px;
+      line-height: 20px;
+      width: 80px;
+    }
+
+    .overlap-tag {
+      position: absolute;
+      opacity: 0;
+    }
+  }
+
+  input {
+    margin-left: 4px;
+
+    &.unset-margin {
+      margin-top: unset;
+    }
+  }
+}
+
+
+.add-suggestion {
+  margin: 0 5px;
+  color: black;
+  font-weight: 700;
+}
+
+.remove-selected {
+  cursor: pointer;
+
+  &.large-input-icon {
+    margin-top: 10px;
+  }
+}
+
+
+.arrow-state {
+  margin-left: 8px;
+  height: 24px;
+  cursor: pointer;
+
+  &.large-input-icon {
+    margin-top: 10px;
+  }
+
+  &.opened {
+    transform: rotateX(180deg);
+  }
+}
+
+::ng-deep.autocomplete-wrapper {
+  .mat-mdc-form-field {
+    max-width: 330px;
+    min-width: 330px !important;
+
+    .mat-mdc-form-field-hint.error,
+    .mat-mdc-form-field-hint.error svg {
+      color: $tgo-error-default;
+    }
+
+    .mat-mdc-form-field-hint.error {
+      display: flex;
+    }
+
+    .mat-mdc-form-field-hint.error {
+      display: flex;
+      flex-flow: column;
+      row-gap: 4px;
+
+      .errors {
+        ui-icon {
+          margin-right: 8px;
+        }
+
+        display: flex;
+      }
+    }
+
+    .mat-mdc-form-field-hint.error {
+      color: $error-50 !important;
+
+      svg {
+        color: $error-50 !important;
+      }
+    }
+
+    .mat-mdc-form-field-bottom-align::before {
+      height: 0;
+    }
+
+    .mat-mdc-form-field-hint-wrapper {
+      padding: 0 0 12px 0;
+      font-size: 12px;
+      line-height: 16px;
+      position: relative;
+
+      .mat-form-field-hint-spacer {
+        display: none;
+      }
+    }
+
+    &.hide-bottom-content {
+      .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+      }
+    }
+
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+      top: 28px !important;
+    }
+
+    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+      top: 22px !important;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      padding-left: 12px !important;
+      height: unset !important;
+      max-height: unset !important;
+    }
+
+    .mat-focused {
+      .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+        color: $tgo-petrol-default !important;
+      }
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch {
+      border-bottom: 2px solid $tgo-petrol-default !important;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading {
+      border-left: 2px solid $tgo-petrol-default !important;
+      border-bottom: 2px solid $tgo-petrol-default !important;
+      border-top: 2px solid $tgo-petrol-default !important;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
+      border: 2px solid $tgo-petrol-default !important;
+      border-left: unset !important;
+    }
+
+    .mat-mdc-form-field-infix, .mat-mdc-form-field-flex {
+      min-height: 48px !important;
+      max-height: 184px !important;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0 !important;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      align-items: center;
+      flex-direction: row;
+      width: 100%
+    }
+
+    .mdc-line-ripple {
+      display: none !important;
+    }
+  }
+
+  &.full-width {
+    .mat-mdc-form-field {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}
+
+::ng-deep.mat-mdc-autocomplete-panel {
+  box-shadow: 0 8px 24px 4px $box-shadow;
+  max-height: 312px !important;
+
+  .mat-mdc-option:hover:not(.mdc-list-item--disabled),
+  .mat-mdc-option:focus:not(.mdc-list-item--disabled),
+  .mat-mdc-option.mat-mdc-option-active,
+  .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
+    background: $tgo-petrol-90w !important;
+  }
+
+  .mat-mdc-option {
+    padding-right: 32px;
+    padding-left: 12px !important;
+
+    ui-icon {
+      display: none;
+      position: absolute;
+      right: 0;
+      bottom: calc(50% - 8px);
+      margin: 0 10px;
+    }
+
+    &.selected-option {
+      background: $tgo-petrol-90w;
+
+      ui-icon {
+        display: block;
+      }
+    }
+
+    &.mdc-list-item--selected .mdc-list-item__primary-text,
+    .mdc-list-item--activated .mdc-list-item__primary-text {
+      color: $tgo-black !important;
+    }
+
+    .mat-pseudo-checkbox {
+      display: none;
+    }
+  }
+
+  .mat-mdc-optgroup {
+    .mat-mdc-optgroup-label {
+      font-weight: 700 !important;
+    }
+
+    .mdc-list-item {
+      &__primary-text {
+        color: $tgo-black;
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+
+.active-field {
+  .mdc-notched-outline__leading {
+    border-left-width: 2px;
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__notch {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__trailing {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+    border-right-width: 2px;
+  }
+}