i-tech-shared-components 1.4.45 → 1.4.46

package/fesm2022/i-tech-shared-components.mjs

@@ -728,6 +728,7 @@ class AutocompleteSelectComponent {
         this.disabled = false;
         this.blockRecallDefaultValueSetter = false;
         this.requestLoading = false;
+        this.selectedValueForSearch = '';
         this.ButtonType = ButtonType;
         /*
         * Custom error state matcher for mat-select to properly show error state in mat-form-field
@@ -901,6 +902,10 @@ class AutocompleteSelectComponent {
         else {
             this.showingValue = this.collectAndGetSelectionToShowForOneOption(data);
         }
+        this.selectedValueForSearch = '';
+        if (this.showingValue && this.selectConfig.valueForDefaultSearchAsSelected) {
+            this.selectedValueForSearch = this.showingValue;
+        }
         this.blockRecallDefaultValueSetter = true;
     }
     collectAndGetSelectionToShowForOneOption(data) {
@@ -965,6 +970,12 @@ class AutocompleteSelectComponent {
     focusSearchInput() {
         if (this.selectConfig.search && this.searchInput) {
             this.searchInput.nativeElement.focus();
+            if (this.selectedValueForSearch) {
+                this.searchInput.nativeElement.value = this.selectedValueForSearch;
+            }
+            else {
+                this.searchInput.nativeElement.value = '';
+            }
         }
     }
     inputFocusOut() {
@@ -1134,13 +1145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatSelectModule,
                         ButtonComponent,
                         GetValueByKeyFromObjectPipe,
-                        ArrayToStringPipe,
-                        NgOptimizedImage,
                         MatIcon,
                         GenerateErrorMessagesPipe,
                         ClearValueComponent,
-                        MatFormFieldModule,
-                        MatButton
+                        MatFormFieldModule
                     ], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n     [ngClass]=\"{\n            'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n            'mat-select-with-search': selectConfig.search,\n            'without-label': selectConfig.hideLabel,\n            'invalid_field': ngControl.control.errors && submitValue,\n            'readonly-field': isDisabled,\n            'select-with-prefix': selectConfig['iconPrefixSvg'] || selectConfig['iconPrefix']\n         }\"\n     [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n     [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n     [matTooltipPosition]=\"'above'\"\n     *ngIf=\"selectConfig && ngControl\">\n\n  <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : isDisabled,\n          'invalid-label-color': !!(ngControl.control.errors && submitValue)\n        }\">\n      {{ selectConfig.label | translate }}\n    </mat-label>\n    <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n  </div>\n\n\n  <!-- Search Input -->\n  <div class=\"search-input w-100\"\n       (click)=\"$event.stopPropagation();$event.preventDefault()\"\n       [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n       *ngIf=\"selectConfig.search\"\n  >\n    <input autocomplete=\"off\"\n           id=\"searchInput\"\n           type=\"text\"\n           [attr.data-testId]=\"selectConfig.testId + '-autocomplete-input'\"\n           [ngClass]=\"{'pr-25': !selectConfig.iconUrl, 'readonly-color': isDisabled}\"\n           #searchInput\n           [disabled]=\"isDisabled\"\n           [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n           (focus)=\"openSelection()\"\n           (keydown)=\"$event.stopPropagation()\"\n           (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n  </div>\n\n  <!-- Placeholder/Selected Value Display -->\n  <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n    <div class=\"custom-placeholder\"\n         *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n                 (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n         [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n    >\n      {{ ((selectConfig.placeholder || '') | translate) }}\n    </div>\n    <div class=\"custom-placeholder custom-value ellipsis\"\n         [ngClass]=\"{\n                'pr-42': selectConfig.iconUrl,\n                'readonly-color': isDisabled,\n                'default-form-icon-color': !(isDisabled)\n                }\"\n         *ngIf=\"ngControl?.value\"\n    >\n      {{showingValue}}\n    </div>\n  </ng-container>\n\n  <!-- Custom Icon -->\n  <img class=\"left_icon_new pointer\"\n       alt=\"Toggle Selection\"\n       (click)=\"iconClick(matSelect, searchInput)\"\n       *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n       [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n                                                selectConfig.activeStateIconUrl\n                                                : selectConfig.iconUrl)\">\n\n  <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n    <!-- Material Select -->\n    <mat-select #matSelect=\"matSelect\"\n                [attr.data-testId]=\"selectConfig.testId + '-autocomplete-select'\"\n                [panelClass]=\"'autocomplete-transform-panel-location'\"\n                [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [aria-label]=\"selectConfig.label | translate\"\n                [id]=\"selectConfig.filtrationKey || ''\"\n                (opened)=\"registerPanelScrollEvent(matSelect)\"\n                (openedChange)=\"openedChange($event)\"\n                [formControl]=\"ngControl.control\"\n                [multiple]=\"selectConfig.multiple\"\n                (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n                [errorStateMatcher]=\"customErrorStateMatcher\"\n                [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n    >\n\n      <!-- Loading State -->\n      <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n        <div class=\"request_loading\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n               style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n            <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n                                dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n            </circle>\n          </svg>\n        </div>\n      </mat-option>\n\n      <!-- Options -->\n      <ng-container *ngIf=\"data?.length && !pending\">\n        <!-- Add New Option -->\n        <mat-option *ngIf=\"selectConfig.actions\"\n                    class=\"pointer add_new\"\n                    disabled\n                    (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n          <!--(click)=\"ngControl.control.reset(null);\n              matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n          <i-tech-button\n            [type]=\"ButtonType.OUTLINE\"\n            [fontIcon]=\"'add'\"\n            [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n            [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n          </i-tech-button>\n        </mat-option>\n\n        <!-- Regular Options -->\n        <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (click)=\"optionClick(item)\"\n          >\n            @if (selectConfig.needTranslateOptions) {\n              {{\n                ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n                  : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n              }}\n            }@else {\n              {{\n                ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n                  : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n              }}\n            }\n            <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n              {{\n                ((selectConfig.subValueToShow | getValueByKeyFromObject\n                  : item : null : '' ) || '')\n              }}\n            </div>\n          </mat-option>\n        </ng-container>\n\n        <!-- Custom Text Options -->\n        <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (click)=\"optionClick(item)\"\n                      [disabled]=\"selectConfig.changeText[item].disabled\"\n          >\n            {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n          </mat-option>\n        </ng-container>\n      </ng-container>\n\n      <!-- Empty State -->\n      <ng-container *ngIf=\"!pending && !data.length\">\n        <mat-option disabled class=\"empty_selection_state\">\n          <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n            <span>{{ 'dropdown_no_items' | translate }}</span>\n            <div class=\"mt-10\">\n              <i-tech-button\n                *ngIf=\"selectConfig?.actions\"\n                [type]=\"ButtonType.OUTLINE\"\n                (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n                [customClass]=\"'mat-autocomplete-select-button'\"\n                [fontIcon]=\"'add'\"\n                [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n              </i-tech-button>\n            </div>\n          </div>\n        </mat-option>\n      </ng-container>\n    </mat-select>\n    <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !selectConfig['iconPrefixColor']\n                                        && (isDisabled),\n                    'default-form-icon-color' : !selectConfig['iconPrefixColor']\n                                        && !(isDisabled)\n                    }\"\n              [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n    >{{ selectConfig.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n              matPrefix\n              [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n              [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n    ></mat-icon>\n\n    <i-tech-icon-button\n      *ngIf=\"selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n      iconName=\"cancel\"\n      matSuffix\n      [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"clearSelectedValue($event)\"\n    >\n    </i-tech-icon-button>\n    <mat-icon\n      matSuffix\n      class=\"select-arrow\"\n      [class.open]=\"matSelect.panelOpen\"\n      [ngClass]=\"{\n            'readonly-color': isDisabled,\n            'default-form-icon-color': !(isDisabled),\n            'mt-8': !!ngControl.control.value && selectConfig.clearable\n         }\"\n    >\n      keyboard_arrow_down\n    </mat-icon>\n    <!-- Error Message -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n      {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Reset Button -->\n  <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}.new-mat-autocomplete.without-label .custom-placeholder{top:12px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading 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}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .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}}\n"] }]
         }], ctorParameters: () => [{ type: InputService }], propDecorators: { matSelect: [{
                 type: ViewChild,