tailjng 0.0.62 → 0.1.0

package/src/lib/components/menu/options-coach-menu/options-coach-menu.component.html

@@ -7,6 +7,7 @@
     coachPosition="bottom-left"
     coachTrigger="click"
     [coachMaxWidth]="'170px'"
+    [coachWidth]="'170px'"
     [coachSpotlight]="false"
     [icon]="iconsService.icons.ellipsisVertical"
     [iconSize]="20"
@@ -15,28 +16,30 @@
   />
 
   <ng-template #customTemplateActions>
-    <div class="flex flex-col gap-2">
+    <div class="menu-options-list flex flex-col gap-2 w-full min-w-full">
       @if (optionsTable.length > 0) {
         @for (option of optionsTable; track $index) {
           @if (getIsVisible(option, group)) {
             <div
-              class="w-full hover:bg-primary/10 dark:hover:bg-dark-primary/10 text-[10px]"
+              class="menu-option-item w-full hover:bg-primary/10 dark:hover:bg-dark-primary/10 text-[10px]"
             >
               <JButton
                 onKeyPress
+                size="sm"
                 [icon]="getIcon(option.icon, group)"
-                [iconSize]="20"
+                [iconSize]="16"
                 (clicked)="handleClick(option, group)"
                 [tooltip]="getTooltip(option.tooltip ?? '', group)"
                 [tooltipPosition]="option.tooltipPosition ?? 'top'"
                 [disabled]="getDisabled(option, group)"
                 [isLoading]="false"
                 [classes]="
-                  'w-full text-left justify-start ' + (option.classes ?? '')
+                  'w-full min-w-full text-left justify-start h-[30px] ' +
+                  (option.classes ?? '')
                 "
                 [ngClasses]="mergeNgClasses(option.ngClass, group)"
               >
-                {{ getTooltip(option.text ?? "", group) }}
+                {{ getTooltip(option.text ?? '', group) }}
               </JButton>
             </div>
           }

package/src/lib/components/menu/options-coach-menu/options-coach-menu.component.scss

@@ -0,0 +1,12 @@
+.menu-options-list,
+.menu-option-item {
+  width: 100%;
+  min-width: 100%;
+}
+
+:host ::ng-deep .menu-option-item j-button,
+:host ::ng-deep .menu-option-item jbutton {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}

package/src/lib/components/select/select-dropdown/dropdown-select.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}

package/src/lib/components/select/select-dropdown/dropdown-select.component.html

@@ -1,4 +1,4 @@
-<div class="relative w-full h-full">
+<div class="relative w-full">
   <div #selectButton class="w-auto">
     <button
       type="button"

package/src/lib/components/select/select-dropdown/dropdown-select.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit, OnInit, SimpleChanges, OnChanges, } from "@angular/core"
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit, OnInit, SimpleChanges, OnChanges, Optional, } from "@angular/core"
 import { FormsModule, ControlValueAccessor, ReactiveFormsModule, NG_VALUE_ACCESSOR } from "@angular/forms"
 import { CommonModule } from "@angular/common"
 import { LucideAngularModule } from "lucide-angular"
@@ -123,7 +123,7 @@ export class JDropdownSelectComponent implements ControlValueAccessor, AfterView
     public readonly iconsService: JIconsService,
     private readonly cdr: ChangeDetectorRef,
     private readonly elementRef: ElementRef,
-    private readonly genericService: JGenericCrudService,
+    @Optional() private readonly genericService: JGenericCrudService | null,
   ) { }
 
   ngOnInit() {
@@ -270,7 +270,7 @@ export class JDropdownSelectComponent implements ControlValueAccessor, AfterView
    * @returns 
    */
   loadData() {
-    if (!this.endpoint) return
+    if (!this.endpoint || !this.genericService) return
 
     this.isLoading = true
     const params: any = {}

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.html

@@ -1,4 +1,4 @@
-<div class="relative w-full h-full">
+<div class="relative w-full">
   <div class="w-auto" #selectButton>
     <button
       type="button"

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit, OnInit, SimpleChanges, OnChanges, } from "@angular/core"
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, OnDestroy, ChangeDetectorRef, AfterViewInit, OnInit, SimpleChanges, OnChanges, Optional, } from "@angular/core"
 import { FormsModule, type ControlValueAccessor, ReactiveFormsModule, NG_VALUE_ACCESSOR } from "@angular/forms"
 import { CommonModule } from "@angular/common"
 import { LucideAngularModule } from "lucide-angular"
@@ -124,7 +124,7 @@ export class JMultiDropdownSelectComponent implements ControlValueAccessor, Afte
     public readonly iconsService: JIconsService,
     private readonly cdr: ChangeDetectorRef,
     private readonly elementRef: ElementRef,
-    private readonly genericService: JGenericCrudService,
+    @Optional() private readonly genericService: JGenericCrudService | null,
   ) { }
 
   ngOnInit() {
@@ -187,9 +187,10 @@ export class JMultiDropdownSelectComponent implements ControlValueAccessor, Afte
         const text = Array.isArray(this.optionLabel)
           ? this.optionLabel.map((k) => this.getNestedValue(option, k)).join(this.labelSeparator)
           : this.getNestedValue(option, this.optionLabel);
-        return { value: option[this.optionValue], text, original: option };
+        return { value: this.normalizeOptionValue(option[this.optionValue]), text, original: option };
       });
-    } else {
+    } else if (!(this.type === 'searchable' && this.endpoint)) {
+      // No vaciar opciones ya cargadas desde API (modo remoto)
       this.processedOptions = [];
     }
 
@@ -204,7 +205,7 @@ export class JMultiDropdownSelectComponent implements ControlValueAccessor, Afte
   //  Carga desde API
   // ============================
   loadData() {
-    if (!this._finalEndpoint) return;
+    if (!this._finalEndpoint || !this.genericService) return;
 
     this.isLoading = true;
 
@@ -226,16 +227,16 @@ export class JMultiDropdownSelectComponent implements ControlValueAccessor, Afte
     this.genericService.findAll<any>({ endpoint: this._finalEndpoint, params }).subscribe({
       next: (resp) => {
         const data = resp?.data?.[this.mainEndpoint] ?? resp?.data ?? [];
-        // mapea a processedOptions
-        this.processedOptions = Array.isArray(data)
-          ? data.map((option: any) => ({
-            value: option?.[this.optionValue],
-            text: Array.isArray(this.optionLabel)
-              ? this.optionLabel.map((k) => this.getNestedValue(option, k)).filter(Boolean).join(this.labelSeparator)
-              : this.getNestedValue(option, this.optionLabel),
-            original: option,
-          }))
-          : [];
+        const list = Array.isArray(data) ? data : [];
+        // Mantener @Input options sincronizado (igual que JDropdownSelect) para processOptions()
+        this.options = list;
+        this.processedOptions = list.map((option: any) => ({
+          value: this.normalizeOptionValue(option?.[this.optionValue]),
+          text: Array.isArray(this.optionLabel)
+            ? this.optionLabel.map((k) => this.getNestedValue(option, k)).filter(Boolean).join(this.labelSeparator)
+            : this.getNestedValue(option, this.optionLabel),
+          original: option,
+        }));
 
         this.filteredProcessedOptions = [...this.processedOptions];
         this.fullData.emit(data);
@@ -367,7 +368,7 @@ export class JMultiDropdownSelectComponent implements ControlValueAccessor, Afte
       this.onTouched();
       this.updateDropdownPosition();
 
-      if (this.type === 'searchable' && (this.loadOpen || (!this.loadOnInit && this.processedOptions.length === 0))) {
+      if (this.type === 'searchable' && (this.loadOpen || this.processedOptions.length === 0)) {
         this.loadData();
       }
     }
@@ -588,10 +589,19 @@ export class JMultiDropdownSelectComponent implements ControlValueAccessor, Afte
    * Write the value to the component
    * @param value
    */
-  writeValue(value: any[]): void {
-    this.selectedValues = Array.isArray(value) ? value : []
-    this.updateDisplayLabel()
-    this.cdr.markForCheck()
+  writeValue(value: any[] | null): void {
+    this.selectedValues = Array.isArray(value)
+      ? value.map((item) => this.normalizeOptionValue(item))
+      : [];
+    this.updateDisplayLabel();
+    this.cdr.markForCheck();
+  }
+
+  private normalizeOptionValue(value: unknown): unknown {
+    if (typeof value === 'string' && value.trim() !== '' && !Number.isNaN(Number(value))) {
+      return Number(value);
+    }
+    return value;
   }