iptdevs-design-system 3.1.916 → 3.1.917

package/fesm2020/iptdevs-design-system.mjs

@@ -211,6 +211,11 @@ class DatalistComponent {
         this.label = '';
         this.isChanged = new EventEmitter();
         this.clicked = false;
+        this.uniqueDatalistId = '';
+    }
+    ngOnInit() {
+        // Generar un ID único si no se proporciona datalistId
+        this.uniqueDatalistId = this.datalistId || `datalist-${DatalistComponent.idCounter++}-${Date.now()}`;
     }
     optionChanged(event) {
         let selectOption = this.datalistData.find(element => this.label === 'displayName' ? element.displayName === event.target.value : element.name === event.target.value);
@@ -237,6 +242,7 @@ class DatalistComponent {
         return this.clicked === false ? 'label' : 'labelUp';
     }
 }
+DatalistComponent.idCounter = 0; // Contador estático para generar IDs únicos
 DatalistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DatalistComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
 DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: DatalistComponent, selector: "ipt-datalist", inputs: { datalistId: "datalistId", datalistData: "datalistData", placeHolder: "placeHolder", validateText: "validateText", initalData: "initalData", disabledSel: "disabledSel", label: "label" }, outputs: { isChanged: "isChanged" }, ngImport: i0, template: `
     <div class="input-container">
@@ -245,15 +251,15 @@ DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         type="text"
         class="input"
         (click)="click($event)"
-        [attr.list]="datalistId"
+        [attr.list]="uniqueDatalistId"
         (change)="optionChanged($event)"
         [disabled]="disabledSel"
         [value]="setDataListValue()"
       />
 
-<datalist id="{{ datalistId }}">
+      <datalist [id]="uniqueDatalistId">
         <option *ngFor="let item of datalistData; index as i" [value]="label === 'displayName' ? item.displayName : item.name">
-          {{ label === 'displayName' ? item.displayName : (item.id_card + ' ' + item.name) }}
+          {{ label === 'displayName' ? item.displayName : (item.id_card ? item.id_card + ' ' : '') + item.name }}
         </option>
       </datalist>
     </div>
@@ -267,15 +273,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
         type="text"
         class="input"
         (click)="click($event)"
-        [attr.list]="datalistId"
+        [attr.list]="uniqueDatalistId"
         (change)="optionChanged($event)"
         [disabled]="disabledSel"
         [value]="setDataListValue()"
       />
 
-<datalist id="{{ datalistId }}">
+      <datalist [id]="uniqueDatalistId">
         <option *ngFor="let item of datalistData; index as i" [value]="label === 'displayName' ? item.displayName : item.name">
-          {{ label === 'displayName' ? item.displayName : (item.id_card + ' ' + item.name) }}
+          {{ label === 'displayName' ? item.displayName : (item.id_card ? item.id_card + ' ' : '') + item.name }}
         </option>
       </datalist>
     </div>