tailjng 0.0.61 → 0.1.0

package/src/lib/components/form/form-sidebar/sidebar-form.component.html

@@ -1,101 +1,134 @@
 <section class="content_form">
-
-    <!-- Overlay -->
-    @if (openForm) {
-        <div onKeyPress class="fixed top-0 left-0 w-full h-full bg-black/50 z-[998] transition duration-300" (click)="canCloseOverlay ? onClose() : null"></div>
-    }
-
-    <!-- Sidebar personalizado -->
-    @if (openForm) {
-        <div @sidebarTransition
-            class="fixed top-0 right-0 h-full max-w-full border border-border dark:border-dark-border rounded-tl-[15px] rounded-bl-[15px] text-white shadow-lg z-[999] flex flex-col"
-            [style]="style"
-            [ngClass]="bgColor"
-            [class.w-[22em]]="size==='small'"
-            [class.w-[30em]]="size==='medium'"
-            [class.w-[47em]]="size==='large'"
-            [class.w-[65em]]="size==='xlarge'"
+  <!-- Overlay -->
+  @if (openForm) {
+    <div
+      onKeyPress
+      class="fixed top-0 left-0 w-full h-full bg-black/50 z-[999] transition duration-300"
+      (click)="canCloseOverlay ? onClose() : null"
+    ></div>
+  }
+
+  <!-- Sidebar personalizado -->
+  @if (openForm) {
+    <div
+      @sidebarTransition
+      class="fixed top-0 right-0 h-full max-w-full border border-border dark:border-dark-border rounded-tl-[15px] rounded-bl-[15px] text-white shadow-lg z-[999] flex flex-col"
+      [style]="style"
+      [ngClass]="bgColor"
+      [class.w-[22em]]="size === 'small'"
+      [class.w-[30em]]="size === 'medium'"
+      [class.w-[47em]]="size === 'large'"
+      [class.w-[65em]]="size === 'xlarge'"
+    >
+      <!-- Header -->
+      <div
+        class="flex p-2 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-tl-[15px] font-semibold text-2sm"
+      >
+        <div class="flex items-center gap-2">
+          <span>
+            {{
+              typeForm !== "none"
+                ? typeForm === "create"
+                  ? "AGREGAR"
+                  : "ACTUALIZAR"
+                : "REGISTROS"
+            }}
+            {{ typeForm !== "none" ? titleForm : "" }}
+          </span>
+
+          <JButton
+            jTooltip="Información"
+            jTooltipPosition="bottom"
+            jCoachMark
+            [coachContent]="coachContentChangePassword"
+            coachPosition="bottom"
+            coachTrigger="click"
+            [icon]="iconsService.icons.info"
+            classes="border-none shadow-none p-0 m-0 h-5 w-5 text-white"
+          />
+        </div>
+
+        <ng-template #coachContentChangePassword>
+          <div class="text-[12px] leading-[15px]">
+            <span>
+              Las etiquetas con <span class="text-[10px]">✱</span> indican
+              campos requeridos.
+            </span>
+            <br />
+            <span>
+              <span class="text-red-600 dark:text-red-300">✱</span>
+              Obligatorio
+            </span>
+            <br />
+            <span>
+              <span class="text-blue-600 dark:text-blue-300">✱</span>
+              Condicionado
+            </span>
+            <br />
+            <span>
+              <span class="text-purple-600 dark:text-purple-300">✱</span>
+              Automático
+            </span>
+          </div>
+        </ng-template>
+
+        <div class="flex gap-2">
+          @for (cb of checkboxes; track $index) {
+            @if (cb.isVisible) {
+              <JSwitchCheckbox
+                onKeyPress
+                [title]="cb.title"
+                [isChecked]="cb.isChecked"
+                [isLoading]="cb.isLoading"
+                (click)="cb.onClick(!cb.isChecked, $index)"
+              />
+            }
+          }
+        </div>
+
+        <button
+          type="button"
+          (click)="onClose()"
+          class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer"
         >
-            <!-- Header -->
-            <div class="flex p-2 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-tl-[15px] font-semibold text-2sm">
-                <div class="flex items-center gap-2">
-                    <span>
-                        {{ typeForm !== 'none' ? typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR' : 'REGISTROS' }} {{ typeForm !== 'none' ? titleForm : '' }}
-                    </span>
-
-                    <div class="cursor-pointer"
-                        [jTooltip]="tooltipContentChangePassword"
-                        [jTooltipPosition]="'bottom'"
-                        [jTooltipOffsetX]="25"
-                        [jTooltipOffsetY]="-20"
-                    >
-                        <lucide-icon [name]="iconsService.icons.info" [size]="15"></lucide-icon>
-                    </div>
-                </div>
-
-
-                <ng-template #tooltipContentChangePassword>
-                    <div class="text-[12px] leading-[15px]">
-                        <span>Las etiquetas con ✱ indican campos requeridos.</span> <br>
-                        <span><span class="text-red-600 dark:text-red-300">✱</span> Obligatorio</span> <br>
-                        <span><span class="text-blue-600 dark:text-blue-300">✱</span> Condicionado</span> <br>
-                        <span><span class="text-purple-600 dark:text-purple-300">✱</span> Automático</span> <br>
-                    </div>
-                </ng-template>
-
-
-                <div class="flex gap-2">
-                    @for (cb of checkboxes; track $index) {
-                        @if (cb.isVisible) {
-                            <JSwitchCheckbox onKeyPress
-                                [title]="cb.title"
-                                [isChecked]="cb.isChecked"
-                                [isLoading]="cb.isLoading"
-                                (click)="cb.onClick(!cb.isChecked, $index)"
-                            />
-                        }
-                    }
-                </div>
-
-                <button type="button" (click)="onClose()" class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer">
-                    <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
-                </button>
-            </div>
-
-
-            <!-- Content -->
-            <div class="p-4 flex-1 overflow-x-hidden overflow-y-auto scroll-element">
-                @if (formTemplate) {
-                    <ng-container [ngTemplateOutlet]="formTemplate"></ng-container>
-                }
-            </div>
-
-
-            <!-- Footer -->
-            @if (typeForm !== 'none') {
-            <div class="p-4 border-t border-border dark:border-dark-border rounded-bl-[15px] flex justify-center gap-3">
-
-                <JButton
-                    type="submit"
-                    (clicked)="onSubmit()"
-                    classes="primary"
-                    [icon]="iconsService.icons.save"
-                    [isLoading]="isLoading"
-                >
-                    {{typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR'}}
-                </JButton>
-
-                <JButton
-                    type="button"
-                    (clicked)="onClose()"
-                    classes="secondary"
-                    [icon]="iconsService.icons.error"
-                    text="CANCELAR"
-                />
-
-            </div>
+          <lucide-icon
+            [name]="iconsService.icons.close"
+            size="16"
+          ></lucide-icon>
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="p-4 flex-1 overflow-x-hidden overflow-y-auto scroll-element">
+        @if (formTemplate) {
+          <ng-container [ngTemplateOutlet]="formTemplate"></ng-container>
         }
-    </div>
-    }
+      </div>
 
-</section>
+      <!-- Footer -->
+      @if (typeForm !== "none") {
+        <div
+          class="p-4 border-t border-border dark:border-dark-border rounded-bl-[15px] flex justify-center gap-3"
+        >
+          <JButton
+            type="submit"
+            (clicked)="onSubmit()"
+            classes="primary"
+            [icon]="iconsService.icons.save"
+            [isLoading]="isLoading"
+          >
+            {{ typeForm === "create" ? "AGREGAR" : "ACTUALIZAR" }}
+          </JButton>
+
+          <JButton
+            type="button"
+            (clicked)="onClose()"
+            classes="secondary"
+            [icon]="iconsService.icons.error"
+            text="CANCELAR"
+          />
+        </div>
+      }
+    </div>
+  }
+</section>

package/src/lib/components/form/form-sidebar/sidebar-form.component.ts

@@ -7,11 +7,12 @@ import { DynamicCheckbox, FormType, JIconsService } from 'tailjng';
 import { JTooltipDirective } from '../../tooltip/tooltip.directive';
 import { JButtonComponent } from '../../button/button.component';
 import { JSwitchCheckboxComponent } from '../../checkbox/checkbox-switch/switch-checkbox.component';
+import { JCoachMarkDirective } from '../../coach-mark/coach-mark.directive';
 
 @Component({
   selector: 'JSidebarForm',
   standalone: true,
-  imports: [LucideAngularModule, JButtonComponent, JTooltipDirective, ReactiveFormsModule, FormsModule, CommonModule, JSwitchCheckboxComponent],
+  imports: [LucideAngularModule, JButtonComponent, JTooltipDirective, ReactiveFormsModule, FormsModule, CommonModule, JSwitchCheckboxComponent, JCoachMarkDirective],
   templateUrl: './sidebar-form.component.html',
   styleUrl: './sidebar-form.component.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -61,4 +62,4 @@ export class JSidebarFormComponent {
       this.onClose();
     }
   }
-}
+}

package/src/lib/components/input/input/input.component.css

@@ -0,0 +1,35 @@
+@media (max-width: 400px) {
+  .input-container {
+    width: 100%;
+  }
+
+  input[type="date"] {
+    appearance: none !important;
+    -webkit-appearance: none !important;
+  }
+
+  input[type="date"]::-webkit-calendar-picker-indicator {
+    opacity: 0 !important;
+    display: none !important;
+    -webkit-appearance: none !important;
+  }
+
+  input[type="date"]:not(:valid) {
+    color: transparent !important;
+  }
+
+  input[type="date"]:not(:valid)::before {
+    content: attr(placeholder) !important;
+    color: rgb(148 163 184) !important;
+  }
+}
+
+.date-fake-placeholder {
+  display: none;
+}
+
+@media (pointer: coarse) {
+  .date-fake-placeholder {
+    display: block;
+  }
+}

package/src/lib/components/input/input/input.component.html

@@ -1,29 +1,39 @@
 <div class="relative w-full">
-    <input
-        [type]="type"
-        [id]="id"
-        [name]="name ?? ''"
-        [placeholder]="placeholder"
-        [value]="value"
-        (input)="onInput($event)"
-        [required]="required"
-        [disabled]="isDisabled"
-        (blur)="onTouched()"
-        [ngClass]="combinedNgClass"
-        [class]="classes"
-        class="input w-full h-[40px] max-[400px]:h-[35px] text-[12px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed" 
-    />
+@if (type === 'date' && !value && placeholder) {
+  <span
+    class="date-fake-placeholder pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[12px] text-muted-foreground/70 dark:text-dark-muted-foreground/70 z-[1]"
+  >
+    {{ placeholder }}
+  </span>
+}
 
-    @if (value && clearButton) {
-        <button type="button"
-          class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
-          (click)="clearInput()"
-          [disabled]="isDisabled"
-          [ngClass]="{
-            'cursor-not-allowed opacity-50': isDisabled
-          }"
-        >
-            <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
-        </button>
-    }
-</div>
+  <input
+    [type]="type"
+    [id]="id"
+    [name]="name ?? ''"
+    [placeholder]="placeholder"
+    [value]="value"
+    (input)="onInput($event)"
+    [required]="required"
+    [disabled]="isDisabled"
+    [readonly]="isReadonly"
+    (blur)="onTouched()"
+    [ngClass]="combinedNgClass"
+    [class]="classes"
+    class="input w-full h-[40px] max-[400px]:h-[35px] text-[12px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
+  />
+
+  @if (value && clearButton) {
+    <button
+      type="button"
+      class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+      (click)="clearInput()"
+      [disabled]="isDisabled"
+      [ngClass]="{
+        'cursor-not-allowed opacity-50': isDisabled,
+      }"
+    >
+      <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+    </button>
+  }
+</div>

package/src/lib/components/input/input/input.component.ts

@@ -26,6 +26,7 @@ export class JInputComponent implements ControlValueAccessor {
   @Input() placeholder: string = '';
 
   @Input() isDisabled: boolean = false;
+  @Input() isReadonly: boolean = false;
   @Input() required: boolean = false;
   @Input() clearButton: boolean = false;
 

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

@@ -0,0 +1,56 @@
+<div class="relative isolate">
+  <JButton
+    onKeyPress
+    jCoachMark
+    [contentTemplate]="customTemplateActions"
+    [isDescriptionFormatted]="true"
+    coachPosition="bottom-left"
+    coachTrigger="click"
+    [coachMaxWidth]="'170px'"
+    [coachWidth]="'170px'"
+    [coachSpotlight]="false"
+    [icon]="iconsService.icons.ellipsisVertical"
+    [iconSize]="20"
+    classes="secondary w-[35px] h-[35px] rounded-full"
+    (clicked)="handleClickGeneral()"
+  />
+
+  <ng-template #customTemplateActions>
+    <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="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]="16"
+                (clicked)="handleClick(option, group)"
+                [tooltip]="getTooltip(option.tooltip ?? '', group)"
+                [tooltipPosition]="option.tooltipPosition ?? 'top'"
+                [disabled]="getDisabled(option, group)"
+                [isLoading]="false"
+                [classes]="
+                  'w-full min-w-full text-left justify-start h-[30px] ' +
+                  (option.classes ?? '')
+                "
+                [ngClasses]="mergeNgClasses(option.ngClass, group)"
+              >
+                {{ getTooltip(option.text ?? '', group) }}
+              </JButton>
+            </div>
+          }
+        }
+      } @else {
+        <div
+          class="text-center text-gray-500 dark:text-dark-text-secondary text-xs"
+        >
+          No hay opciones disponibles
+        </div>
+      }
+    </div>
+  </ng-template>
+</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/menu/options-coach-menu/options-coach-menu.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter, ElementRef, OnDestroy, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+import { JButtonComponent } from '../../button/button.component';
+import { JIconsService } from 'tailjng';
+import { JCoachMarkDirective } from '../../coach-mark/coach-mark.directive';
+
+@Component({
+  selector: 'JOptionsCoachMenu',
+  imports: [LucideAngularModule, JButtonComponent, JCoachMarkDirective],
+  templateUrl: './options-coach-menu.component.html',
+  styleUrl: './options-coach-menu.component.scss'
+})
+export class JOptionsCoachMenuComponent {
+
+  @Input() optionsTable: any[] = [];
+  @Input() group: any;
+  @Input() rowId: string | number | null = null;
+
+  @Input() getIcon: (icon: any, group: any) => any = () => null;
+  @Input() getTooltip: (tooltip: string, group: any) => string = () => '';
+  @Input() getDisabled: (option: any, group: any) => boolean = () => false;
+  @Input() getIsVisible: (option: any, group: any) => boolean = () => true;
+  @Input() mergeNgClasses: (ngClass: any, group: any) => any = () => '';
+  @Input() isAditionalButtonLoading: (type: string, id: any) => boolean = () => false;
+
+  @Output() clicked = new EventEmitter<{ option: any; group: any }>();
+
+  
+  constructor(
+    public readonly iconsService: JIconsService,
+  ) { }
+
+  handleClick(option: any, group: any): void {
+    this.clicked.emit({ option, group });
+    this.handleClickGeneral();
+  }
+  
+  handleClickGeneral(): void {
+    document.body.click();
+  }
+}

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;
   }