npm - @litigiovirtual/ius-design-components - Versions diffs - 2.0.0 → 2.0.2 - Mend

@litigiovirtual/ius-design-components 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/litigiovirtual-ius-design-components.mjs +145 -46
package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
package/package.json +1 -1
package/types/litigiovirtual-ius-design-components.d.ts +48 -13

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@litigiovirtual/ius-design-components",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "peerDependencies": {
     "@angular/cdk": ">=22.0.0 <23.0.0",
     "@angular/common": ">=22.0.0 <23.0.0",

package/types/litigiovirtual-ius-design-components.d.ts CHANGED Viewed

@@ -2396,8 +2396,13 @@ interface VisibleModel {
  * - El golden compone `OptionItem` (filas) y `Chip` (chips de múltiple): ya
  *   portados como `ius-option-item` / `ius-chip`, se componen aquí directamente
  *   (sin CSS inlineado). Los chips de múltiple usan `ius-chip removable`.
- * - El menú se posiciona con `position: fixed` + medición manual (flip abajo/
- *   arriba, iguala ancho del campo), espejo de `updatePosition` del golden.
+ * - El menú se portalea a `document.body` vía **CDK Overlay**
+ *   (`flexibleConnectedTo` el trigger + `scrollStrategy: reposition`), con
+ *   flip abajo/arriba e igualando el ancho del campo — espejo de
+ *   `updatePosition` del golden. Encapsulation por defecto (Emulated): los
+ *   estilos del menú siguen aplicando dentro del overlay porque Angular
+ *   inyecta el `<style>` scopeado en el `<head>` global (mismo patrón que
+ *   `ius-modal`, ver `src/lib/modal/modal.component.ts`).
  */
 declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy {
     private readonly optionsState;
@@ -2486,21 +2491,24 @@ declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy
     private readonly internalOpen;
     protected readonly query: _angular_core.WritableSignal<string>;
     protected readonly activeIndex: _angular_core.WritableSignal<number>;
-    protected readonly menuPos: _angular_core.WritableSignal<{
-        x: number;
-        y: number;
-        width: number;
-        placement: "bottom" | "top";
-    }>;
+    /** Ancho del menú (portal CDK) — igualado al ancho del campo. */
+    protected readonly menuWidth: _angular_core.WritableSignal<number>;
     private readonly field;
     private readonly menu;
     private readonly search;
+    private readonly menuTpl;
     protected readonly baseId: string;
     protected readonly helpId: string;
+    /** `id` único del menú — target de `aria-controls` en el trigger. */
+    protected readonly menuId: string;
     private onChange;
     private onTouched;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private overlayRef;
     private raf;
-    private readonly repositionBound;
+    private typeaheadBuffer;
+    private typeaheadTimer;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly isError: _angular_core.Signal<boolean>;
     protected readonly isOpen: _angular_core.Signal<boolean>;
@@ -2515,6 +2523,16 @@ declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy
     protected get showHint(): boolean;
     protected get showClearComputed(): boolean;
     protected get helpIconTitle(): string | undefined;
+    /**
+     * Alto de fila usado para `maxVisible × itemH` — deriva del box-model real
+     * de `OptionItem` (`option-item.component.scss`): `--_opt-py` (padding
+     * vertical, top+bottom) + `--ius-lh-base` (line-height, fija en 20px, no
+     * cambia por tamaño — solo el font-size lo hace). small py=6px → 32px ·
+     * medium py=8px (`--ius-space-xs`) → 36px · large py=11px → 42px. No
+     * incluye el `gap` entre filas de `.ius-selectmenu__list`
+     * (`--ius-space-xxs`) — constante estructural documentada, no medida en
+     * runtime.
+     */
     protected get listMaxH(): number;
     protected labelFor(val: IusSelectValue): string;
     protected isChosen(val: IusSelectValue): boolean;
@@ -2532,13 +2550,30 @@ declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy
     private setOpen;
     protected onSearch(event: Event): void;
     private moveActive;
+    /**
+     * ¿Es una tecla imprimible de una sola posición (typeahead)? Se ignora
+     * cuando el foco está en la caja de búsqueda (ahí escribir filtra, no
+     * hace typeahead) y cuando hay modificadores (Ctrl/Alt/Meta).
+     */
+    private isTypeaheadKey;
+    /** Quita diacríticos y normaliza a minúsculas para comparar etiquetas. */
+    private normalizeLabel;
+    /**
+     * Typeahead: acumula el carácter en un buffer (expira a los ~700ms) y
+     * salta el resaltado/apertura a la primera opción habilitada cuya etiqueta
+     * empiece por el buffer. Con el menú abierto solo mueve el resaltado; con
+     * el menú cerrado (single) lo abre y resalta el match (sin seleccionar).
+     */
+    private handleTypeahead;
     protected onTriggerKeyDown(event: KeyboardEvent): void;
     protected onDocumentMouseDown(event: MouseEvent): void;
     protected onEscape(): void;
-    private scheduleReposition;
-    private reposition;
-    private attachListeners;
-    private teardownListeners;
+    /** Difiere el attach un frame (deja que `@if`/inputs terminen de asentarse). */
+    private scheduleOpen;
+    private attachOverlay;
+    private detachOverlay;
+    private updateMenuWidth;
+    private readonly onWindowResize;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "ius-select", never, { "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "state": { "alias": "state"; "required": false; }; "open": { "alias": "open"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "maxVisible": { "alias": "maxVisible"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "showHelpText": { "alias": "showHelpText"; "required": false; }; "showIconHelp": { "alias": "showIconHelp"; "required": false; }; "iconHelpTitle": { "alias": "iconHelpTitle"; "required": false; }; "iconHelpContent": { "alias": "iconHelpContent"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "valueChange": "valueChange"; "cleared": "cleared"; "openChange": "openChange"; }, never, never, true, never>;
     static ngAcceptInputType_multiple: unknown;