@telcomdev/ui 0.1.16 → 0.1.17

package/README.md

@@ -76,8 +76,64 @@ el borde outline permanecen visibles en todos los estados.
 />
 ```
 
-Ambos controles usan `TdSelectOption<T>`, son compatibles con formularios
-Angular y muestran su panel mediante Angular CDK Overlay.
+Ambos controles son compatibles con formularios Angular y muestran su panel
+mediante Angular CDK Overlay.
+
+`td-autocomplete-select` soporta dos formas de trabajo:
+
+### Modo estándar
+
+Usa `TdSelectOption<T>` cuando ya tienes opciones normalizadas:
+
+```ts
+readonly proveedores = [
+  { value: 1, label: 'AMERICA MOVIL PERU S.A.C.', description: '20467534026' },
+];
+
+proveedorId: number | null = 1;
+```
+
+```html
+<td-autocomplete-select
+  label="Proveedor"
+  [options]="proveedores"
+  [(ngModel)]="proveedorId"
+/>
+```
+
+### Modo mapeado
+
+Usa `valueKey`, `labelKey` y, opcionalmente, `descriptionKey`, `iconKey` o
+`disabledKey` cuando quieres consumir DTOs reales sin mapearlos manualmente:
+
+```ts
+readonly proveedores = [
+  {
+    proveedorId: 1,
+    tipoDocumentoIdentidadId: 4,
+    numeroDocumento: '20467534026',
+    nombre: 'AMERICA MOVIL PERU S.A.C.',
+  },
+];
+
+proveedorId: number | null = 1;
+```
+
+```html
+<td-autocomplete-select
+  label="Proveedor"
+  [options]="proveedores"
+  valueKey="proveedorId"
+  labelKey="nombre"
+  descriptionKey="numeroDocumento"
+  [(ngModel)]="proveedorId"
+/>
+```
+
+Si el valor llega antes que las opciones, o las opciones llegan antes que el
+valor, el texto visible se sincroniza automáticamente. Esta sincronización no
+emite `selectionChange`; ese evento se reserva para selección o limpieza
+realizada por el usuario.
 
 El comportamiento predeterminado durante el scroll es `reposition`, por lo que
 el panel permanece unido al control. Puede cambiarse con

package/fesm2022/telcomdev-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, EventEmitter, booleanAttribute, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, EnvironmentInjector, DestroyRef, TemplateRef, ViewChildren, ContentChildren, effect } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, EventEmitter, booleanAttribute, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, EnvironmentInjector, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { FORM_FIELD } from '@angular/forms/signals';
@@ -4157,14 +4157,28 @@ class TdAutocompleteSelect {
     destroyRef = inject(DestroyRef);
     scrollStrategies = inject(ScrollStrategyOptions);
     generatedId = `td-autocomplete-${++autocompleteSequence}`;
+    rawOptions = [];
+    normalizedOptions = [];
     searchInput;
     connectedOverlay;
     panel;
     label = 'Buscar y seleccionar';
     placeholder = 'Escribe para buscar...';
-    options = [];
+    set options(value) {
+        this.rawOptions = value ?? [];
+        this.normalizedOptions = this.normalizeOptions(this.rawOptions);
+        this.syncSearchWithValue();
+    }
+    get options() {
+        return this.normalizedOptions;
+    }
     hint = '';
     hideLabel = false;
+    valueKey = null;
+    labelKey = null;
+    descriptionKey = null;
+    iconKey = null;
+    disabledKey = null;
     name = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
@@ -4277,11 +4291,31 @@ class TdAutocompleteSelect {
         };
         this.document.addEventListener('scroll', scrollListener, true);
         this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
+        effect(() => {
+            this.value();
+            this.syncSearchWithValue();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['valueKey'] ||
+            changes['labelKey'] ||
+            changes['descriptionKey'] ||
+            changes['iconKey'] ||
+            changes['disabledKey']) {
+            this.normalizedOptions = this.normalizeOptions(this.rawOptions);
+        }
+        if (changes['valueKey'] ||
+            changes['labelKey'] ||
+            changes['descriptionKey'] ||
+            changes['iconKey'] ||
+            changes['disabledKey'] ||
+            changes['compareWith']) {
+            this.syncSearchWithValue();
+        }
     }
     writeValue(value) {
         this.value.set(value ?? null);
-        this.search =
-            this.options.find((option) => this.compare(option.value, this.value()))?.label ?? '';
+        this.syncSearchWithValue();
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
@@ -4327,9 +4361,7 @@ class TdAutocompleteSelect {
         if (!this.open)
             return;
         this.open = false;
-        const selected = this.options.find((option) => this.compare(option.value, this.value()));
-        if (selected)
-            this.search = selected.label;
+        this.syncSearchWithValue();
         this.formBridge.markTouched(this.touched, this.touch);
         this.cdr.markForCheck();
     }
@@ -4417,6 +4449,82 @@ class TdAutocompleteSelect {
     firstEnabledIndex() {
         return this.filteredOptions.findIndex((option) => !option.disabled);
     }
+    syncSearchWithValue() {
+        const currentValue = this.value();
+        if (currentValue === null) {
+            if (!this.focused() && !this.open) {
+                this.search = '';
+            }
+            this.cdr.markForCheck();
+            return;
+        }
+        const selected = this.options.find((option) => this.compare(option.value, currentValue));
+        if (selected) {
+            this.search = selected.label;
+        }
+        this.cdr.markForCheck();
+    }
+    normalizeOptions(options) {
+        return options.map((option) => this.normalizeOption(option));
+    }
+    normalizeOption(option) {
+        if (this.isSelectOption(option) && !this.valueKey && !this.labelKey) {
+            return option;
+        }
+        const value = this.valueKey ? this.readOptionValue(option, this.valueKey) : this.readOptionValue(option, 'value');
+        const label = this.labelKey ? this.readOptionText(option, this.labelKey) : this.readOptionText(option, 'label');
+        const description = this.descriptionKey
+            ? this.readOptionText(option, this.descriptionKey)
+            : this.readOptionText(option, 'description');
+        const icon = this.iconKey ? this.readOptionText(option, this.iconKey) : this.readOptionText(option, 'icon');
+        const disabled = this.disabledKey
+            ? !!this.readOptionUnknown(option, this.disabledKey)
+            : !!this.readOptionUnknown(option, 'disabled');
+        return {
+            value,
+            label: label || this.fallbackOptionLabel(option, value),
+            ...(description ? { description } : {}),
+            ...(icon ? { icon } : {}),
+            ...(disabled ? { disabled } : {}),
+        };
+    }
+    isSelectOption(option) {
+        if (!option || typeof option !== 'object')
+            return false;
+        return 'value' in option && 'label' in option;
+    }
+    readOptionValue(option, accessor) {
+        if (typeof accessor === 'function') {
+            return accessor(option);
+        }
+        return this.readPath(option, accessor);
+    }
+    readOptionText(option, accessor) {
+        const value = typeof accessor === 'function' ? accessor(option) : this.readPath(option, accessor);
+        return value === null || value === undefined ? '' : String(value);
+    }
+    readOptionUnknown(option, accessor) {
+        return typeof accessor === 'function' ? accessor(option) : this.readPath(option, accessor);
+    }
+    readPath(source, path) {
+        if (!path.trim())
+            return undefined;
+        return path.split('.').reduce((current, key) => {
+            if (current === null || current === undefined || typeof current !== 'object') {
+                return undefined;
+            }
+            return current[key];
+        }, source);
+    }
+    fallbackOptionLabel(option, value) {
+        if (typeof option === 'string' || typeof option === 'number' || typeof option === 'boolean') {
+            return String(option);
+        }
+        if (value !== null && value !== undefined) {
+            return String(value);
+        }
+        return '';
+    }
     scrollActiveOptionIntoView() {
         const panel = this.panel?.nativeElement;
         if (!panel || this.activeIndex < 0)
@@ -4473,13 +4581,13 @@ class TdAutocompleteSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", isSignal: false, isRequired: false, transformFunction: null }, iconKey: { classPropertyName: "iconKey", publicName: "iconKey", isSignal: false, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdAutocompleteSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
       cdkOverlayOrigin
       #origin="cdkOverlayOrigin"
@@ -4734,6 +4842,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], hideLabel: [{
                 type: Input
+            }], valueKey: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
+            }], descriptionKey: [{
+                type: Input
+            }], iconKey: [{
+                type: Input
+            }], disabledKey: [{
+                type: Input
             }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
                 type: Input
             }], clearable: [{