i-tech-shared-components 1.4.45 → 1.4.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/i-tech-shared-components.mjs +14 -6
- package/fesm2022/i-tech-shared-components.mjs.map +1 -1
- package/lib/components/autocomplete-select/autocomplete-select.component.d.ts +1 -0
- package/lib/interfaces/autocomplete-configs.interface.d.ts +1 -0
- package/package.json +1 -1
- package/theme/_mat-selects.scss +6 -1
|
@@ -728,6 +728,7 @@ class AutocompleteSelectComponent {
|
|
|
728
728
|
this.disabled = false;
|
|
729
729
|
this.blockRecallDefaultValueSetter = false;
|
|
730
730
|
this.requestLoading = false;
|
|
731
|
+
this.selectedValueForSearch = '';
|
|
731
732
|
this.ButtonType = ButtonType;
|
|
732
733
|
/*
|
|
733
734
|
* Custom error state matcher for mat-select to properly show error state in mat-form-field
|
|
@@ -901,6 +902,10 @@ class AutocompleteSelectComponent {
|
|
|
901
902
|
else {
|
|
902
903
|
this.showingValue = this.collectAndGetSelectionToShowForOneOption(data);
|
|
903
904
|
}
|
|
905
|
+
this.selectedValueForSearch = '';
|
|
906
|
+
if (this.showingValue && this.selectConfig.valueForDefaultSearchAsSelected) {
|
|
907
|
+
this.selectedValueForSearch = this.showingValue;
|
|
908
|
+
}
|
|
904
909
|
this.blockRecallDefaultValueSetter = true;
|
|
905
910
|
}
|
|
906
911
|
collectAndGetSelectionToShowForOneOption(data) {
|
|
@@ -965,6 +970,12 @@ class AutocompleteSelectComponent {
|
|
|
965
970
|
focusSearchInput() {
|
|
966
971
|
if (this.selectConfig.search && this.searchInput) {
|
|
967
972
|
this.searchInput.nativeElement.focus();
|
|
973
|
+
if (this.selectedValueForSearch) {
|
|
974
|
+
this.searchInput.nativeElement.value = this.selectedValueForSearch;
|
|
975
|
+
}
|
|
976
|
+
else {
|
|
977
|
+
this.searchInput.nativeElement.value = '';
|
|
978
|
+
}
|
|
968
979
|
}
|
|
969
980
|
}
|
|
970
981
|
inputFocusOut() {
|
|
@@ -1134,13 +1145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1134
1145
|
MatSelectModule,
|
|
1135
1146
|
ButtonComponent,
|
|
1136
1147
|
GetValueByKeyFromObjectPipe,
|
|
1137
|
-
ArrayToStringPipe,
|
|
1138
|
-
NgOptimizedImage,
|
|
1139
1148
|
MatIcon,
|
|
1140
1149
|
GenerateErrorMessagesPipe,
|
|
1141
1150
|
ClearValueComponent,
|
|
1142
|
-
MatFormFieldModule
|
|
1143
|
-
MatButton
|
|
1151
|
+
MatFormFieldModule
|
|
1144
1152
|
], 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"] }]
|
|
1145
1153
|
}], ctorParameters: () => [{ type: InputService }], propDecorators: { matSelect: [{
|
|
1146
1154
|
type: ViewChild,
|
|
@@ -1519,7 +1527,7 @@ class MenuComponent {
|
|
|
1519
1527
|
this.matMenuState = false;
|
|
1520
1528
|
}
|
|
1521
1529
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1522
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "i-tech-menu", inputs: { text: "text", dataName: "dataName", containerClass: "containerClass", icon: "icon", positionX: "positionX", testId: "testId", menuOptions: "menuOptions", loading: "loading" }, outputs: { emitEvent: "emitEvent" }, ngImport: i0, template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n [
|
|
1530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "i-tech-menu", inputs: { text: "text", dataName: "dataName", containerClass: "containerClass", icon: "icon", positionX: "positionX", testId: "testId", menuOptions: "menuOptions", loading: "loading" }, outputs: { emitEvent: "emitEvent" }, ngImport: i0, template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n [testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <ng-container *ngIf=\"loading\">\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n [submit]=\"true\"\n [disabled]=\"true\"\n [activated]=\"false\"\n [attr.data-testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n [attr.data-testId]=\"testId\"\n >\n <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n </button>\n </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"], dependencies: [{ kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
|
|
1523
1531
|
}
|
|
1524
1532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, decorators: [{
|
|
1525
1533
|
type: Component,
|
|
@@ -1534,7 +1542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1534
1542
|
NgClass,
|
|
1535
1543
|
ButtonComponent,
|
|
1536
1544
|
MatLabel
|
|
1537
|
-
], template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n [
|
|
1545
|
+
], template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n [testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <ng-container *ngIf=\"loading\">\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n [submit]=\"true\"\n [disabled]=\"true\"\n [activated]=\"false\"\n [attr.data-testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n [attr.data-testId]=\"testId\"\n >\n <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n </button>\n </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"] }]
|
|
1538
1546
|
}], propDecorators: { text: [{
|
|
1539
1547
|
type: Input
|
|
1540
1548
|
}], dataName: [{
|