@kato-lee/components 1.0.5 → 1.0.7

package/fesm2022/kato-lee-components-fields.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ViewChild, Input, EventEmitter, Self, Optional, Output, NgModule } from '@angular/core';
+import { Pipe, Component, ViewChild, Input, EventEmitter, Self, Optional, Output, NgModule, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { ESCAPE } from '@kato-lee/cdk/keycodes';
 import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
 import * as i2 from '@kato-lee/material/form-field';
 import { MatFormFieldModule } from '@kato-lee/material/form-field';
 import * as i7 from '@kato-lee/material/select';
@@ -22,13 +22,15 @@ import { MatDatepickerModule } from '@kato-lee/material/datepicker';
 import * as i8 from '@kato-lee/material/tooltip';
 import { MatTooltipModule } from '@kato-lee/material/tooltip';
 import { takeUntil } from 'rxjs/operators';
-import { Subject, takeUntil as takeUntil$1, map, debounceTime } from 'rxjs';
+import { Subject, takeUntil as takeUntil$1, map, debounceTime, distinctUntilChanged, firstValueFrom } from 'rxjs';
 import * as i9 from '@kato-lee/material/menu';
 import { MatMenuModule } from '@kato-lee/material/menu';
 import * as i2$1 from '@kato-lee/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@kato-lee/material/progress-spinner';
 import * as i5$1 from '@kato-lee/material/autocomplete';
 import { MatAutocompleteModule } from '@kato-lee/material/autocomplete';
+import * as i1$1 from '@angular/common/http';
+import * as i2$2 from '@kato-lee/components/toast';
 
 class TakErrorEqualsPipe {
     transform(errors, error, args) {
@@ -1383,6 +1385,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Output
             }] } });
 
+class TakRemoteAutocompleteFieldComponent {
+    constructor(_http, _cd, _toast) {
+        this._http = _http;
+        this._cd = _cd;
+        this._toast = _toast;
+        this.remoteUrl = '';
+        this.params = {};
+        this.option = 'option';
+        this.extraInfo = '';
+        this.justOneLoad = false;
+        this.onSelect = new EventEmitter();
+        this.suggestions = [];
+        this.autocomplete = new FormControl();
+        this._isLoading = false;
+        this.isValueSelected = false;
+        this._unsubscribe$ = new Subject();
+        this._isLoadingItem = false;
+        this._isRequired = true;
+        this._value = '';
+        this._notSuggestions = false;
+        this.wasLoaded = false;
+    }
+    async ngOnInit() {
+        if (!this.justOneLoad) {
+            this.autocomplete.valueChanges
+                .pipe(takeUntil$1(this._unsubscribe$), debounceTime(500), distinctUntilChanged())
+                .subscribe(async (value) => {
+                if (value &&
+                    !this.suggestions.filter(suggestion => suggestion.getNombre() === value).length) {
+                    this._isLoading = true;
+                    this._cd.markForCheck();
+                    try {
+                        const result = await firstValueFrom(this._http.get(this.remoteUrl, {
+                            params: this.params,
+                        }));
+                        if (result.length !== 0) {
+                            this.suggestions = result;
+                            if (`${value}`.toLocaleLowerCase() ===
+                                `${this.suggestions[0][this.option]}`.toLocaleLowerCase()) {
+                                this.autocomplete.setValue(`${this.suggestions[0][this.option]}`, {
+                                    emitEvent: false,
+                                });
+                                this.onSelect.emit(this.suggestions[0]);
+                                document.body.dispatchEvent(TAK_PRESS_ESC_KEY);
+                            }
+                        }
+                        else {
+                            this._toast.notification('No existen items que contengan esta palabra clave');
+                        }
+                    }
+                    catch (error) {
+                        this._toast.danger(error.error.message);
+                    }
+                    this._isLoading = false;
+                    this._cd.markForCheck();
+                }
+            });
+        }
+        else {
+            try {
+                const result = await firstValueFrom(this._http.get(this.remoteUrl, {
+                    params: this.params,
+                }));
+                this.suggestions = result;
+                this.wasLoaded = true;
+                this._cd.markForCheck();
+                this._filteredOptions = this.autocomplete.valueChanges.pipe(takeUntil$1(this._unsubscribe$), map(() => this._filter()));
+            }
+            catch (error) {
+                this._toast.danger(error.error.message);
+            }
+        }
+    }
+    _filter() {
+        const value = typeof `${this.autocomplete.value}` === 'string'
+            ? `${this.autocomplete.value}`.toLowerCase()
+            : `${this.autocomplete.value[this.option]}`.toLowerCase();
+        const option = this.suggestions.filter(res => `${res[this.option]}`.toLowerCase().includes(value));
+        if (!option.length)
+            this._notSuggestions = true;
+        else
+            this._notSuggestions = false;
+        return option;
+    }
+    async refresh() {
+        try {
+            const result = await firstValueFrom(this._http.get(this.remoteUrl, {
+                params: this.params,
+            }));
+            this.suggestions = result;
+            this.autocomplete.setValue('');
+            this._toast.notification('Data actualizada correctamente');
+            this._cd.markForCheck();
+        }
+        catch (error) {
+            this._toast.danger(error.error.message);
+        }
+    }
+    reset() {
+        if (!this.justOneLoad) {
+            this.autocomplete.reset();
+        }
+        else {
+            this.autocomplete.setValue('');
+        }
+        this.onSelect.emit(null);
+    }
+    emit(el, option) {
+        if (el.isUserInput) {
+            this.onSelect.emit(option);
+        }
+    }
+    ngOnDestroy() {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get isRequired() {
+        return this._isRequired;
+    }
+    get isLoadingItem() {
+        return this._isLoadingItem;
+    }
+    get filteredOptions() {
+        return this._filteredOptions;
+    }
+    get value() {
+        return `${this._value}`;
+    }
+    get notSuggestions() {
+        return this._notSuggestions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakRemoteAutocompleteFieldComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i2$2.TakToast }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakRemoteAutocompleteFieldComponent, isStandalone: true, selector: "tak-remote-autocomplete-field", inputs: { remoteUrl: "remoteUrl", params: "params", option: "option", extraInfo: "extraInfo", justOneLoad: "justOneLoad" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "@if (!justOneLoad || (justOneLoad && wasLoaded)) {\r\n  <mat-form-field appearance=\"standard\">\r\n    <mat-label>\r\n      <ng-content></ng-content>{{ ' ' }}\r\n      @if (isRequired) {\r\n        <span class=\"gcm-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input matInput [formControl]=\"autocomplete\" [matAutocomplete]=\"auto\" />\r\n\r\n    @if (isLoading || (autocomplete.value === null && isLoadingItem)) {\r\n      <mat-spinner\r\n        mat-icon-button\r\n        [diameter]=\"15\"\r\n        mode=\"indeterminate\"\r\n        class=\"spinner-loading\"\r\n      ></mat-spinner>\r\n    }\r\n    <!---->\r\n\r\n    @if (autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"reset()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (justOneLoad && !autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"refresh()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @if (!justOneLoad) {\r\n        @for (suggestion of suggestions; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      } @else {\r\n        @for (suggestion of filteredOptions | async; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n}\r\n", styles: ["mat-spinner.spinner-loading{display:inline;margin-left:-10px}mat-spinner.spinner-loading>svg{margin-top:-5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakRemoteAutocompleteFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        MatProgressSpinnerModule,
+                        MatFormFieldModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        CommonModule,
+                    ], selector: 'tak-remote-autocomplete-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!justOneLoad || (justOneLoad && wasLoaded)) {\r\n  <mat-form-field appearance=\"standard\">\r\n    <mat-label>\r\n      <ng-content></ng-content>{{ ' ' }}\r\n      @if (isRequired) {\r\n        <span class=\"gcm-field__danger-x\">*</span>\r\n      }\r\n    </mat-label>\r\n    <input matInput [formControl]=\"autocomplete\" [matAutocomplete]=\"auto\" />\r\n\r\n    @if (isLoading || (autocomplete.value === null && isLoadingItem)) {\r\n      <mat-spinner\r\n        mat-icon-button\r\n        [diameter]=\"15\"\r\n        mode=\"indeterminate\"\r\n        class=\"spinner-loading\"\r\n      ></mat-spinner>\r\n    }\r\n    <!---->\r\n\r\n    @if (autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"reset()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n    @if (justOneLoad && !autocomplete.value) {\r\n      <button mat-icon-button matSuffix (click)=\"refresh()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @if (!justOneLoad) {\r\n        @for (suggestion of suggestions; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      } @else {\r\n        @for (suggestion of filteredOptions | async; track $index) {\r\n          <mat-option\r\n            [value]=\"suggestion[option]\"\r\n            title=\"{{ suggestion[option] }} {{\r\n              extraInfo ? '(' + suggestion[extraInfo] + ')' : ''\r\n            }}\"\r\n            (onSelectionChange)=\"emit($event, suggestion)\"\r\n          >\r\n            <span>{{ suggestion[option] }}</span>\r\n            @if (extraInfo) {\r\n              <span class=\"mat-option-span-extra\">{{ suggestion[extraInfo] }}</span>\r\n            }\r\n          </mat-option>\r\n        }\r\n        @if (notSuggestions) {\r\n          <mat-option>\r\n            <span class=\"tak-autocomplete-not-records\"> No se encuentran resultados </span>\r\n          </mat-option>\r\n        }\r\n      }\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n}\r\n", styles: ["mat-spinner.spinner-loading{display:inline;margin-left:-10px}mat-spinner.spinner-loading>svg{margin-top:-5px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$2.TakToast }], propDecorators: { remoteUrl: [{
+                type: Input
+            }], params: [{
+                type: Input
+            }], option: [{
+                type: Input
+            }], extraInfo: [{
+                type: Input
+            }], justOneLoad: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }] } });
+
 const components = [
     TakSelectFieldComponent,
     TakDateFieldComponent,
@@ -1417,10 +1584,12 @@ class TakFieldsModule {
             MatOptionModule,
             MatSelectModule,
             MatTooltipModule,
-            MatMenuModule], exports: [ReactiveFormsModule,
+            MatMenuModule,
+            TakRemoteAutocompleteFieldComponent], exports: [ReactiveFormsModule,
             MatAutocompleteModule,
             FormsModule,
-            MatNativeDateModule, TakSelectFieldComponent,
+            MatNativeDateModule,
+            TakRemoteAutocompleteFieldComponent, TakSelectFieldComponent,
             TakDateFieldComponent,
             TakAutocompleteFieldComponent,
             TakDateRangeFieldComponent,
@@ -1443,7 +1612,8 @@ class TakFieldsModule {
             MatOptionModule,
             MatSelectModule,
             MatTooltipModule,
-            MatMenuModule, ReactiveFormsModule,
+            MatMenuModule,
+            TakRemoteAutocompleteFieldComponent, ReactiveFormsModule,
             MatAutocompleteModule,
             FormsModule,
             MatNativeDateModule] }); }
@@ -1469,12 +1639,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         MatSelectModule,
                         MatTooltipModule,
                         MatMenuModule,
+                        TakRemoteAutocompleteFieldComponent,
                     ],
                     exports: [
                         ReactiveFormsModule,
                         MatAutocompleteModule,
                         FormsModule,
                         MatNativeDateModule,
+                        TakRemoteAutocompleteFieldComponent,
                         ...components,
                     ],
                     providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }],
@@ -1498,5 +1670,5 @@ const email = Validators.pattern(TAK_PTRN_EMAIL);
  * Generated bundle index. Do not edit.
  */
 
-export { TAK_DEFAULT_APPEARANCE_FORM, TAK_PRESS_ESC_KEY, TAK_PTRN_EMAIL, TAK_PTRN_NONSP, TAK_PTRN_NUMRC, TakAutocompleteFieldComponent, TakDateFieldComponent, TakDateRangeFieldComponent, TakErrorComponent, TakErrorEqualsPipe, TakErrorMsgPipe, TakFieldsModule, TakGeneralFieldComponent, TakMoneyFieldComponent, TakNumberFieldComponent, TakSelectFieldComponent, TakTextareaComponent, email, max, maxLength, min, minLength, onlyNumber, required, withOutSpaces };
+export { TAK_DEFAULT_APPEARANCE_FORM, TAK_PRESS_ESC_KEY, TAK_PTRN_EMAIL, TAK_PTRN_NONSP, TAK_PTRN_NUMRC, TakAutocompleteFieldComponent, TakDateFieldComponent, TakDateRangeFieldComponent, TakErrorComponent, TakErrorEqualsPipe, TakErrorMsgPipe, TakFieldsModule, TakGeneralFieldComponent, TakMoneyFieldComponent, TakNumberFieldComponent, TakRemoteAutocompleteFieldComponent, TakSelectFieldComponent, TakTextareaComponent, email, max, maxLength, min, minLength, onlyNumber, required, withOutSpaces };
 //# sourceMappingURL=kato-lee-components-fields.mjs.map