@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

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

@@ -1,40 +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";
-
-@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

@@ -1,283 +0,0 @@
-@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;
-  }
-}