@testgorilla/tgo-ui 2.31.0 → 2.31.1

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

@@ -0,0 +1,184 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Inject,
+  Input,
+  OnInit,
+  Optional
+} from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { IconName } from '../../components/icon/icon.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { AlertBarType, AlertVariant } from '../../utils/alert-bar.model';
+import { alertBarsUtil } from '../../utils/alert-bars.utils';
+import { LinkTargetType } from './alert-banner.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}
+   * @default 'success'
+   * @memberof AlertBannerComponent
+   */
+  @Input() alertType: AlertBarType = 'success';
+
+  /**
+   * Alert Banner variant
+   *
+   * @type {AlertVariant}
+   * @default 'banner'
+   * @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
+   *
+   * @default true
+   * @memberof AlertBannerComponent
+   */
+  @Input() includeDismissButton = true;
+
+  /**
+   * Include shadow or not
+   *
+   * @default false
+   * @memberof AlertBannerComponent
+   */
+  @Input() shadow = false;
+
+  /**
+   * Link text that will appended at the end of message
+   *
+   * @default ''
+   * @memberof AlertBannerComponent
+   */
+  @Input() linkText? = '';
+
+  /**
+   * Link url
+   *
+   * @memberof AlertBannerComponent
+   */
+  @Input() linkUrl?: string;
+
+  /**
+   * Link target
+   *
+   * @type {@type {LinkTargetType}}
+   * @default '_blank'
+   * @memberof AlertBannerComponent
+   */
+  @Input() linkTarget?: LinkTargetType = '_blank';
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @default 'light'
+   * @memberof AlertBannerComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Sets the full width
+   *
+   * @type {boolean}
+   * @memberof AlertBannerComponent
+   */
+  @Input() isFullWidth: boolean | undefined;
+
+  /**
+   * Close button tooltip
+   *
+   * @type {string}
+   * @default ''
+   * @memberof AlertBannerComponent
+   */
+  @Input() closeButtonTooltip = '';
+
+  /**
+   * Shows icon
+   *
+   * @type {boolean}
+   * @default true
+   * @memberof AlertBannerComponent
+   */
+  @Input() hasIcon = true;
+
+  /**
+   * 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 AlertBannerComponent
+   */
+  @Input() ariaDescribedby = '';
+
+  @Input() set secondaryAlerts(alerts:string[]){
+    this._secondaryAlerts = alerts.map( alert => this.domSanitizer.bypassSecurityTrustHtml(alert));
+  }
+
+  @HostBinding('class.display-none') get isDismissed() {
+    return this.dismissAlertBanner;
+  }
+
+  iconName: IconName;
+  visible = true;
+  fullWidth: boolean;
+  fixed: boolean;
+  position: string;
+  cssClass: string;
+  _message: SafeHtml = '';
+  _secondaryAlerts: SafeHtml[] = [];
+  dismissAlertBanner = false;
+
+  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;
+    setTimeout(() => {
+      this.dismissAlertBanner = true;
+    }, 200);
+  }
+}

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

@@ -0,0 +1,391 @@
+<ng-container>
+  <div class="autocomplete-wrapper" [ngClass]="{ 'full-width': fullWidth, disabled: disabled }">
+    <mat-form-field
+      [color]="(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'"
+      [appearance]="'outline'"
+      [ngClass]="{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }"
+    >
+      <mat-label *ngIf="label">{{ label }} <span *ngIf="required">*</span></mat-label>
+      <div #formField class="input-container">
+        <span style="position: absolute; left: -9999px" *ngIf="textField ? value?.[textField] : value === inputValue"
+              aria-live="polite">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>
+
+        <input
+          #trigger="matAutocompleteTrigger"
+          #matInput
+          [uiPreventInput]="!allowUserInput"
+          [disabled]="disabled"
+          [ngClass]="{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }"
+          (blur)="refillInput()"
+          (focusin)="onFocus()"
+          [attr.aria-label]="((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)"
+          [style.opacity]="type === autocompleteType.MULTI ? inputOpacity : 1"
+          matInput
+          [placeholder]="value && value.length ? '': placeholder"
+          [type]="'text'"
+          [matAutocomplete]="autocomplete"
+          (input)="onInputChange($event)"
+          [(ngModel)]="inputValue"
+        />
+        <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.opacity]="type === autocompleteType.MULTI ? inputOpacity : 1"
+            [style.display]="(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)  ? 'none' : 'block'"
+            [ngStyle]="{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }"
+            [ngClass]="{
+              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI
+            }"
+            (close)="onOptionRemoved(valueItem)"
+          ></ui-tag>
+          @if (size === 'small') {
+            <div class="selected-count" *ngIf="value.length > 1">
+              {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}
+            </div>
+          } @else {
+            <div *ngIf="value.length > 1 && isOverLapping" class="overlap-count">
+              <ui-tag [applicationTheme]="applicationTheme"
+                      [label]="'+' + (value.length - overlapIndex)"></ui-tag>
+            </div>
+          }
+        </div>
+      </div>
+
+      <ui-icon
+        *ngIf="clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))"
+        class="remove-selected"
+        [tabIndex]="disabled ? -1 : 0"
+        (keydown.enter)="onClear();$event.preventDefault();$event.stopPropagation()"
+        (keydown.space)="onClear();$event.preventDefault();$event.stopPropagation()"
+        [ngClass]="{ 'large-input-icon': type === autocompleteType.LARGE }"
+        (click)="onClear();$event.preventDefault();$event.stopPropagation()"
+        [size]="'24'"
+        [color]="applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'"
+        [attr.aria-label]="('COMMON.CLEAR') | uiTranslate | async"
+        [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 + ' ' + dropdownPanelClass"
+        (optionSelected)="onOptionSelected($event)"
+        [disableRipple]="applicationTheme !== 'classic'"
+        [hideSingleSelectionIndicator]="false"
+        (opened)="gotoUp()"
+      >
+        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {
+          <ng-container *ngIf="!(searchResult$ | async)">
+            <ng-container *ngIf="!isDropdown; else dropdownList">
+              <mat-optgroup [label]="((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase"
+                            *ngIf="suggestionsList.length">
+                <mat-option
+                  (mousedown)=$event.preventDefault()
+                  [ngClass]="{ 'selected-option': suggested | includes: value : valueField }"
+                  *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 | async)! | uppercase"
+                            *ngIf="value?.length && type !== autocompleteType.SINGLE">
+                <mat-option
+                  (mousedown)=$event.preventDefault()
+                  [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                  *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>
+
+
+              @if (isGrouped) {
+                @for (group of itemsList; track group) {
+
+                  @if (group.groupName) {
+                    <mat-optgroup [label]="group.groupName">
+                      <mat-option
+                        (mousedown)=$event.preventDefault()
+                        [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                        *ngFor="let item of group.items"
+                        [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>
+                  } @else {
+                    <mat-option
+                      (mousedown)=$event.preventDefault()
+                      [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                      *ngFor="let item of group.items"
+                      [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 [label]="((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase"
+                            *ngIf="value?.length && type === autocompleteType.SINGLE">
+                <mat-option
+                  (mousedown)=$event.preventDefault()
+                  [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 *ngIf="virtualScroll || infiniteScroll; else defaultViewPort" [itemSize]="48"
+                                           [style.height]="'200px'" class="virtual-scroll">
+                @if (!isGrouped) {
+                  <mat-option
+                    (mousedown)=$event.preventDefault()
+                    [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                    *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>
+
+                  @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {
+                    <mat-option class="loading-option" [style.pointer-events]="'none'">
+                      <div class="loading-container">
+                        <ui-spinner size="small" [isLoader]="false"></ui-spinner>
+                      </div>
+                    </mat-option>
+                  }
+                } @else {
+                  @for (group of itemsList; track group) {
+                    @if (group.groupName) {
+                      <mat-optgroup [label]="group.groupName">
+                        <mat-option
+                          (mousedown)=$event.preventDefault()
+                          [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                          *cdkVirtualFor="let item of group.items"
+                          [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>
+                    } @else {
+                      <mat-option
+                        (mousedown)=$event.preventDefault()
+                        [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                        *cdkVirtualFor="let item of group.items"
+                        [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 #defaultViewPort>
+                @if (!isGrouped) {
+                  <mat-option
+                    (mousedown)=$event.preventDefault()
+                    [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                    *ngFor="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>
+                } @else {
+                  @for (group of itemsList; track group) {
+                    @if (group.groupName) {
+                      <mat-optgroup [label]="group.groupName">
+                        <mat-option
+                          (mousedown)=$event.preventDefault()
+                          [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                          *ngFor="let item of group.items"
+                          [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>
+                    } @else {
+                      <mat-option
+                        (mousedown)=$event.preventDefault()
+                        [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                        *ngFor="let item of group.items"
+                        [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-template>
+
+            </ng-template>
+
+          </ng-container>
+
+          <ng-container *ngIf="filteredSuggestionList$ | async as filteredSuggestionList">
+            <ng-container *ngIf="filteredItemsList$ | async as filteredItemsList">
+              @if (isGrouped && filteredItemsList.length) {
+                @for (group of filteredItemsList; track group) {
+                  @if (group.groupName) {
+                    <mat-optgroup [label]="group.groupName">
+                      <mat-option
+                        (mousedown)=$event.preventDefault()
+                        [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                        *ngFor="let item of group.filteredItems"
+                        [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>
+                  } @else {
+                    <mat-option
+                      (mousedown)=$event.preventDefault()
+                      [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                      *ngFor="let item of group.filteredItems"
+                      [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 [label]="((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase"
+                            *ngIf="filteredSuggestionList.length">
+                <mat-option
+                  (mousedown)=$event.preventDefault()
+                  [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                  *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 && !isGrouped; else showItemListWithGroup">
+                <mat-option
+                  (mousedown)=$event.preventDefault()
+                  [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                  *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 | async)! | uppercase"
+                              *ngIf="filteredItemsList.length && !isGrouped">
+                  <mat-option
+                    (mousedown)=$event.preventDefault()
+                    [ngClass]="{ 'selected-option': item | includes: value : valueField }"
+                    *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>
+
+              @if(isDynamicFilteringEnabled && dynamicFilterLoading) {
+                <mat-option class="loading-option" [style.pointer-events]="'none'">
+                  <div class="loading-container">
+                    <ui-spinner size="small" [isLoader]="false"></ui-spinner>
+                  </div>
+                </mat-option>
+              } @else if(!filteredItemsList.length && !filteredSuggestionList.length && inputValue) {
+                @if (allowAdd) {
+                  <mat-option (mousedown)=$event.preventDefault() [value]="inputValue">
+                    <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>
+                    <span class="add-suggestion">"{{ inputValue }}"</span>
+                  </mat-option>
+                } @else {
+                  <mat-option [style.pointer-events]="'none'">
+                    <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>
+                  </mat-option>
+                }
+              }
+            </ng-container>
+          </ng-container>
+        }
+      </mat-autocomplete>
+      <mat-hint class="error"
+                *ngIf="safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))">
+        <div class="errors"
+             *ngIf="(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))">
+          <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+          <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>
+        </div>
+        <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"></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,44 @@
+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";
+import { PreventInputDirective } from "./prevent-input.directive";
+import { SpinnerComponentModule } from '../spinner/spinner.module';
+
+@NgModule({
+  declarations: [AutocompleteComponent, TransformItemPipe, IncludesPipe, SelectTextDirective],
+    imports: [
+        CommonModule,
+        MatFormFieldModule,
+        MatAutocompleteModule,
+        MatInputModule,
+        FormsModule,
+        TagComponentModule,
+        MatChipsModule,
+        IconComponentModule,
+        UiTranslatePipe,
+        ValidationErrorModule,
+        HasValidationErrorPipe,
+        CdkVirtualForOf,
+        CdkVirtualScrollViewport,
+        CdkFixedSizeVirtualScroll,
+        PreventInputDirective,
+        SpinnerComponentModule
+    ],
+  exports: [AutocompleteComponent],
+  providers: [TransformItemPipe, IncludesPipe, SelectTextDirective],
+})
+export class AutocompleteComponentModule {}