i-tech-shared-components 1.1.6 → 1.1.9

package/docs/services/input.service/classes/InputService.md

@@ -1,31 +0,0 @@
-[**i-tech-shared-components**](../../../README.md)
-
-***
-
-[i-tech-shared-components](../../../README.md) / [services/input.service](../README.md) / InputService
-
-# Class: InputService
-
-## Constructors
-
-### new InputService()
-
-> **new InputService**(): [`InputService`](InputService.md)
-
-#### Returns
-
-[`InputService`](InputService.md)
-
-## Methods
-
-### injectNgControl()
-
-> **injectNgControl**(): `FormControlName`
-
-#### Returns
-
-`FormControlName`
-
-#### Defined in
-
-[services/input.service.ts:16](https://gitlab.com/a.karapetyan/t3_ui_kit/-/blob/ad829a3d5be01b5efd166d86cddc623dce305e4d/projects/shared-components/src/lib/services/input.service.ts#L16)

package/ng-package.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/shared-components",
-  "lib": {
-    "entryFile": "src/public-api.ts",
-    "styleIncludePaths": [
-      "src"
-    ]
-  },
-  "assets": [
-    "theme.scss",
-    "theme/**/*.scss"
-  ],
-  "allowedNonPeerDependencies": [
-    "src"
-  ]
-}

package/src/lib/components/autocomplete-select/autocomplete-select.component.html

@@ -1,211 +0,0 @@
-<div class="new-mat-autocomplete" id="mat_autocomplete"
-     [ngClass]="{
-            'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,
-            'mat-select-with-search': selectConfig.search,
-            'without-label': selectConfig.hideLabel,
-            'invalid_field': ngControl.control.errors && submitValue,
-            'readonly-field': selectConfig.readOnly || ngControl.control.disabled
-         }"
-     [matTooltip]="(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')"
-     [matTooltipClass]="'mat-mdc-tooltip big-td-mat-tooltip'"
-     [matTooltipPosition]="'above'"
-     *ngIf="selectConfig && ngControl">
-
-  <div class="w-100" *ngIf="!selectConfig.hideLabel">
-    <mat-label [ngClass]="{
-          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,
-          'invalid-label-color': !!(ngControl.control.errors && submitValue)
-        }">
-      {{ selectConfig.label | translate }}
-    </mat-label>
-    <span *ngIf="selectConfig.required" class="required-input"
-          [ngClass]="{'readonly-color' : ngControl.control.disabled}">*</span>
-  </div>
-
-
-  <!-- Search Input -->
-  <div class="search-input w-100"
-       (click)="$event.stopPropagation();$event.preventDefault()"
-       [ngClass]="{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }"
-       *ngIf="selectConfig.search"
-  >
-    <input autocomplete="off"
-           id="searchInput"
-           type="text"
-           [ngClass]="{'pr-25': !selectConfig.iconUrl}"
-           #searchInput
-           [disabled]="ngControl.control.disabled || selectConfig.hover"
-           [placeholder]="(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'"
-           (focusout)="inputFocusOut()"
-           (focus)="openSelection()"
-           (keydown)="$event.stopPropagation()"
-           (keyup)="getDataWithSearch(searchInput.value,$event)">
-
-    <!-- Search Icon -->
-    <span class="search-icon">
-            <i-tech-icon-button
-              class="mr-10"
-              [ngClass]="selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
-              *ngIf="selectConfig.iconPrefix && !showPlaceholder"
-              [iconName]="selectConfig.iconPrefix || ''"
-              [disabled]="selectConfig.readOnly || false"
-              matPrefix
-            >
-            </i-tech-icon-button>
-        </span>
-  </div>
-
-  <!-- Placeholder/Selected Value Display -->
-  <ng-container *ngIf="showPlaceholder && selectConfig.search">
-    <div class="custom-placeholder"
-         *ngIf="(!ngControl?.value && !ngControl?.value?.length) ||
-                 (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)"
-         [ngClass]="selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
-    >
-      {{ ((selectConfig.placeholder || '') | translate) }}
-    </div>
-    <div class="custom-placeholder custom-value ellipsis"
-         [ngClass]="{
-                'pr-42': selectConfig.iconUrl,
-                'readonly-color': selectConfig.readOnly || ngControl.control.disabled,
-                'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)
-                }"
-         *ngIf="ngControl?.value"
-    >
-      {{ selectConfig?.multiple ? (ngControl.value | arrayToString) : showingValue }}
-    </div>
-  </ng-container>
-
-  <!-- Custom Icon -->
-  <img class="left_icon_new pointer"
-       (click)="iconClick(matSelect, searchInput)"
-       *ngIf="!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)"
-       [src]="'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ? selectConfig.activeStateIconUrl : selectConfig.iconUrl)">
-
-  <mat-form-field appearance="outline" class="w-100" (click)="selectConfig?.search ? focusSearchInput() : null">
-    <!-- Material Select -->
-    <mat-select #matSelect="matSelect"
-                [panelClass]="'autocomplete-transform-panel-location'"
-                [attr.aria-placeholder]="(selectConfig.placeholder || '') | translate"
-                [aria-label]="selectConfig.label | translate"
-                [id]="selectConfig.filtrationKey || ''"
-                (opened)="registerPanelScrollEvent(matSelect)"
-                (openedChange)="openedChange($event)"
-                [formControl]="ngControl.control"
-                [multiple]="selectConfig.multiple"
-                (selectionChange)="emitSelectionChangeAndClose($event)"
-                [errorStateMatcher]="customErrorStateMatcher"
-                [placeholder]="(selectConfig.placeholder || '') | translate"
-                [disabled]="ngControl.control.disabled"
-    >
-
-      <!-- Loading State -->
-      <mat-option *ngIf="pending" class="option_loading relative">
-        <div class="request_loading">
-          <img ngSrc="./loader.svg" alt="" height="200" width="200"/>
-        </div>
-      </mat-option>
-
-      <!-- Options -->
-      <ng-container *ngIf="data?.length && !pending">
-        <!-- Add New Option -->
-        <mat-option *ngIf="selectConfig.actions"
-                    class="pointer add_new"
-                    disabled
-                    (click)="closePanelAndUnsetFocus();addNewItemEvent()">
-          <!--                            (click)="ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()">-->
-          <i-tech-button
-            [type]="ButtonType.OUTLINE"
-            [fontIcon]="'add'"
-            [text]="('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) "
-            [customClass]="'w-100 mat-autocomplete-select-button'">
-          </i-tech-button>
-        </mat-option>
-
-        <!-- Regular Options -->
-        <ng-container *ngIf="!selectConfig?.changeText && data.length">
-          <mat-option *ngFor="let item of data"
-                      [value]="selectConfig.valueByKey | getValueByKeyFromObject : item"
-                      (mouseup)="optionClick(item)"
-                      (mousedown)="preventDefault($event)">
-            {{ ((selectConfig.valueToShowByKey | getValueByKeyFromObject : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate }}
-          </mat-option>
-        </ng-container>
-
-        <!-- Custom Text Options -->
-        <ng-container *ngIf="selectConfig?.changeText && data.length">
-          <mat-option *ngFor="let item of data"
-                      [value]="selectConfig.valueByKey | getValueByKeyFromObject : item"
-                      (mouseup)="optionClick(item)"
-                      (mousedown)="preventDefault($event)"
-                      [disabled]="selectConfig?.changeText[item].disabled">
-            {{ selectConfig?.changeText[item].text | translate }}
-          </mat-option>
-        </ng-container>
-      </ng-container>
-
-      <!-- Empty State -->
-      <ng-container *ngIf="!pending && !data.length">
-        <mat-option disabled class="empty_selection_state">
-          <div class="actions_and_tile add_new flex_column w-100 flex_center_align_center">
-            <span>{{ 'dropdown_no_items' | translate }}</span>
-            <div class="mt-10">
-              <i-tech-button
-                *ngIf="selectConfig?.actions"
-                [type]="ButtonType.OUTLINE"
-                (buttonClick)="closePanelAndUnsetFocus();addNewItemEvent()"
-                [customClass]="'mat-autocomplete-select-button'"
-                [fontIcon]="'add'"
-                [text]="('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) ">
-              </i-tech-button>
-            </div>
-          </div>
-        </mat-option>
-      </ng-container>
-    </mat-select>
-    <mat-icon *ngIf="selectConfig.iconPrefix"
-              matPrefix
-              [ngClass]="{
-                    'readonly-color' : !selectConfig['iconPrefixColor'] && (selectConfig.readOnly || ngControl.control.disabled),
-                    'default-form-icon-color' : !selectConfig['iconPrefixColor'] && !(selectConfig.readOnly || ngControl.control.disabled)
-                    }"
-              [matTooltip]="((selectConfig?.['iconPrefixTooltip'] || '') | translate)"
-    >{{ selectConfig.iconPrefix }}
-    </mat-icon>
-
-    <mat-icon *ngIf="selectConfig['iconPrefixSvg']"
-              matPrefix
-              [matTooltip]="((selectConfig?.['iconPrefixTooltip'] || '') | translate)"
-              [svgIcon]="selectConfig['iconPrefixSvg'] || ''"
-    ></mat-icon>
-
-    <i-tech-icon-button
-      *ngIf="selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value"
-      iconName="cancel"
-      matSuffix
-      [disabled]="selectConfig.readOnly || false"
-      [ngClass]="selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
-      (click)="$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus()"
-    >
-    </i-tech-icon-button>
-    <mat-icon
-      matSuffix
-      class="select-arrow"
-      [class.open]="matSelect.panelOpen"
-      [ngClass]="{
-            'readonly-color': selectConfig.readOnly || ngControl.control.disabled,
-            'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),
-            'mt-8': !!ngControl.control.value && selectConfig.clearable
-         }"
-    >
-      keyboard_arrow_down
-    </mat-icon>
-    <!-- Error Message -->
-    <mat-error *ngIf="!!(ngControl.control.errors && submitValue)">
-      {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}
-    </mat-error>
-  </mat-form-field>
-
-  <!-- Reset Button -->
-  <i-tech-clear-value *ngIf="selectConfig.reset" (reset)="resetValue()"></i-tech-clear-value>
-</div>

package/src/lib/components/autocomplete-select/autocomplete-select.component.scss

@@ -1,58 +0,0 @@
-.left_icon_new {
-  position: absolute;
-  right: 2px;
-  top: 1px;
-}
-
-::ng-deep {
-  .request_loading {
-    width: 40px;
-    height: 40px;
-    background-color: white !important;
-    &:hover {
-      background-color: var(--primary99) !important;
-    }
-    &:focus {
-      background-color: var(--primary99) !important;
-    }
-    img {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 100%;
-      height: 100%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}
-
-::ng-deep {
-  .mat-mdc-option.add_new {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-
-    .mat-pseudo-checkbox {
-      display: none !important;
-    }
-
-    .mdc-list-item__primary-text {
-      display: inline-block !important;
-      width: 100% !important;
-    }
-
-  }
-
-  .mat-mdc-option.add_new  span {
-    color: unset !important;
-    font-size: unset !important;
-    margin: unset !important;
-    opacity: 1 !important;
-  }
-}
-
-@media (min-width: 1920px) and (max-width: 2500px) {
-  .mat-autocomplete  {
-    height: 90px !important;
-  }
-}
-