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

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

@@ -1,391 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-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 {}