@xosue-utils/inputs 0.1.5 → 0.1.8

package/lib/index.d.ts

@@ -42,6 +42,7 @@ export { OtpEntryComponent } from './otp-entry/otp-entry.component';
 export { RichTextEntryComponent } from './rich-text-entry/rich-text-entry.component';
 export { SignatureEntryComponent } from './signature-entry/signature-entry.component';
 export { MediaEntryComponent } from './media-entry/media-entry.component';
+export { ListReorder, type ListReorderOptions, type ListReorderEndEvent, } from './list-reorder/list-reorder';
 export { INPUT_MODAL_SERVICE_COMPONENTS, OnlySelectModalServiceComponent, MultiselectComboboxModalServiceComponent, SearchEntryModalServiceComponent, PhoneEntryModalServiceComponent, DatePickerModalServiceComponent, TimePickerModalServiceComponent, DatetimePickerModalServiceComponent, MonthPickerModalServiceComponent, ColorPickerModalServiceComponent, } from './input-modal-service-components';
 export { InputModalServicesComponent } from './input-modal-services.component';
 import { TextEntryComponent } from './text-entry/text-entry.component';
@@ -84,4 +85,4 @@ import { MediaEntryComponent } from './media-entry/media-entry.component';
  *   imports: [...ALL_INPUT_COMPONENTS]
  * })
  */
-export declare const ALL_INPUT_COMPONENTS: (typeof MediaEntryComponent | typeof SignatureEntryComponent | typeof RichTextEntryComponent | typeof OtpEntryComponent | typeof ColorPickerComponent | typeof PhoneEntryComponent | typeof SwitchEntryComponent | typeof OnlychoiceEntryComponent | typeof MultichoiceEntryComponent | typeof BooleanEntryComponent | typeof MultiselectComboboxComponent | typeof OnlySelectComponent | typeof DatetimePickerComponent | typeof MonthPickerComponent | typeof TimePickerComponent | typeof DatePickerComponent | typeof RatingEntryComponent | typeof SliderEntryComponent | typeof RangeEntryComponent | typeof PriceEntryComponent | typeof CounterEntryComponent | typeof DecimalEntryComponent | typeof IntegerEntryComponent | typeof TagsEntryComponent | typeof SearchEntryComponent | typeof PasswordEntryComponent | typeof UrlEntryComponent | typeof EmailEntryComponent | typeof TextAreaEntryComponent | typeof TextEntryComponent)[];
+export declare const ALL_INPUT_COMPONENTS: (typeof TextEntryComponent | typeof TextAreaEntryComponent | typeof EmailEntryComponent | typeof UrlEntryComponent | typeof PasswordEntryComponent | typeof SearchEntryComponent | typeof TagsEntryComponent | typeof IntegerEntryComponent | typeof DecimalEntryComponent | typeof CounterEntryComponent | typeof PriceEntryComponent | typeof RangeEntryComponent | typeof SliderEntryComponent | typeof RatingEntryComponent | typeof DatePickerComponent | typeof TimePickerComponent | typeof MonthPickerComponent | typeof DatetimePickerComponent | typeof OnlySelectComponent | typeof MultiselectComboboxComponent | typeof BooleanEntryComponent | typeof MultichoiceEntryComponent | typeof OnlychoiceEntryComponent | typeof SwitchEntryComponent | typeof PhoneEntryComponent | typeof ColorPickerComponent | typeof OtpEntryComponent | typeof RichTextEntryComponent | typeof SignatureEntryComponent | typeof MediaEntryComponent)[];

package/lib/list-reorder/list-reorder.d.ts

@@ -0,0 +1,86 @@
+import { NgZone } from '@angular/core';
+export interface ListReorderEndEvent {
+    oldIndex: number;
+    newIndex: number;
+}
+export interface ListReorderOptions {
+    /** Items relative to the container. Default: `:scope > *`. */
+    itemSelector?: string;
+    /** Pointer-down on a matching target does not start a reorder. */
+    filter?: string;
+    /** Class applied to the item being dragged (placeholder in the list). */
+    ghostClass?: string;
+    /** FLIP / settle animation in ms. `0` disables. */
+    animation?: number;
+    disabled?: boolean;
+    onEnd?: (event: ListReorderEndEvent) => void;
+    /** Keep pointer handling off Angular CD so *ngFor does not reset DOM mid-drag. */
+    ngZone?: NgZone;
+}
+/**
+ * Pointer-based list/grid reorder. No external libraries.
+ * Lifts a floating clone, keeps a dimmed slot, and FLIP-animates siblings.
+ */
+export declare class ListReorder {
+    private readonly container;
+    static attach(container: HTMLElement, options?: ListReorderOptions): ListReorder;
+    private readonly itemSelector;
+    private readonly itemMatch;
+    private readonly filter;
+    private readonly ghostClass;
+    private readonly animationMs;
+    private disabled;
+    private readonly onEnd?;
+    private readonly ngZone?;
+    private pointerId;
+    private dragEl;
+    private ghostEl;
+    private startX;
+    private startY;
+    private grabOffsetX;
+    private grabOffsetY;
+    private dragging;
+    private settling;
+    private oldIndex;
+    private lastClientX;
+    private lastClientY;
+    private scrollFrame;
+    private ghostFrame;
+    private destroyed;
+    private settleGuard;
+    private readonly flipGen;
+    private readonly onPointerDown;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
+    private readonly suppressClick;
+    private constructor();
+    isActive(): boolean;
+    setDisabled(disabled: boolean): void;
+    destroy(): void;
+    private listen;
+    private emitEnd;
+    private findItem;
+    private items;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private beginDrag;
+    private spawnGhost;
+    private scheduleGhostMove;
+    private positionGhost;
+    private placeDraggedItem;
+    /**
+     * Stable insert index: how many siblings have their center before the pointer.
+     * Ignores the placeholder, so a swap cannot immediately reverse.
+     */
+    private indexFromPointer;
+    private isHorizontalPair;
+    private endReference;
+    private animateSiblings;
+    private ensureAutoScrollLoop;
+    private autoScroll;
+    private closestScrollable;
+    private finishDrag;
+    private cancelDrag;
+    private teardownPointer;
+}

package/lib/lucide-icon/lucide-icon.component.d.ts

@@ -7,8 +7,8 @@ import * as i0 from "@angular/core";
  *   <lucide-icon name="heart" filled></lucide-icon>  // relleno + trazo
  *
  * SASS — variables CSS (heredan del padre):
- *   --lucide-stroke: var(--primary)
- *   --lucide-fill: var(--accent)
+ *   --lucide-stroke: var(--color-brand)
+ *   --lucide-fill: var(--color-accent)
  *   --lucide-stroke-width: 2
  */
 export declare class LucideIconComponent {

package/lib/media-entry/media-entry.component.d.ts

@@ -1,9 +1,10 @@
-import { ElementRef, AfterViewInit } from '@angular/core';
+import { ElementRef, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
 interface FileInfo {
     name: string;
-    size: number;
+    /** Bytes. `null` = aún no medido / desconocido. */
+    size: number | null;
     progress: number;
     status: 'loading' | 'success' | 'error';
     type?: string;
@@ -17,10 +18,11 @@ interface FileInfo {
     uploadedBytes?: number;
 }
 type MediaMode = 'file' | 'image' | 'card';
-export declare class MediaEntryComponent implements ControlValueAccessor, AfterViewInit {
+export declare class MediaEntryComponent implements ControlValueAccessor, AfterViewInit, AfterViewChecked, OnDestroy {
     private cdr;
     private elementRef;
     private sanitizer;
+    private zone;
     private readonly inputsConfig;
     private mediaPreview;
     /** Visor de previsualización global (consumido desde la plantilla vía `openGeneralMediaPreview`). */
@@ -42,6 +44,8 @@ export declare class MediaEntryComponent implements ControlValueAccessor, AfterV
     /** Tamaño de cada chunk en MB. Por defecto 1.5 MB para no superar upload_max_filesize=2M en muchos servidores. */
     chunkSizeMB: number;
     sortable: boolean;
+    /** Tamaños conocidos por URL o nombre de archivo (bytes). Se usa si el HEAD no aplica. */
+    set fileSizes(value: Record<string, number> | null);
     primaryTag: boolean;
     previewEndpoint?: string;
     /** Ancho máximo en px para imágenes (opcional). Si no se envía, se conserva el tamaño original. */
@@ -51,9 +55,10 @@ export declare class MediaEntryComponent implements ControlValueAccessor, AfterV
     get hostDisabledClass(): boolean;
     set disabled(value: boolean);
     uploadFormRef?: ElementRef<HTMLFormElement>;
-    sortableContainer?: ElementRef;
-    private sortableInstance?;
-    private sortableInitialized;
+    sortableContainer?: ElementRef<HTMLElement>;
+    private listReorder?;
+    private listReorderHost?;
+    private knownSizes;
     pending: FileInfo[];
     uploaded: FileInfo[];
     failed: FileInfo[];
@@ -74,11 +79,17 @@ export declare class MediaEntryComponent implements ControlValueAccessor, AfterV
     get maxSizeText(): string;
     ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
+    trackUploaded(_index: number, item: FileInfo): string;
+    ngOnDestroy(): void;
+    private teardownListReorder;
     private onChange;
     private onTouched;
     writeValue(value: string[] | string | null): void;
+    private applyKnownSizes;
+    private knownFileSize;
     /**
-     * Obtiene el tamaño del archivo con HEAD. En modo imagen con hash usa CDN (Cloudflare).
+     * Obtiene el tamaño del archivo (HEAD, Range o blob/data).
+     * En modo imagen con hash usa CDN (Cloudflare).
      */
     private fetchFileSize;
     /**
@@ -129,15 +140,15 @@ export declare class MediaEntryComponent implements ControlValueAccessor, AfterV
      */
     openGeneralMediaPreview(fileInfo: FileInfo): Promise<void>;
     /**
-     * Determina si el archivo se puede previsualizar en el navegador
-     * El backend maneja todo, así que solo verificamos si tenemos tipo o nombre
+     * Imagen, video, audio, PDF y texto plano: el navegador los muestra.
+     * Office, zips y similares no: ahí va descarga.
      */
+    canPreviewInBrowser(fileInfo: Pick<FileInfo, 'type' | 'name'>): boolean;
     canPreview(fileType?: string | null, fileName?: string | null): boolean;
+    downloadUploaded(fileInfo: FileInfo): Promise<void>;
+    private resolvePlayableUrl;
     private viewerModeFor;
-    /**
-     * Determina si el archivo debe mostrarse en iframe (PDFs y documentos)
-     * El backend sirve estos archivos directamente, así que usamos iframe para PDFs y documentos Office
-     */
+    /** Solo tipos que el navegador pinta nativo (PDF y texto). Office no. */
     shouldUseIframe(fileType?: string | null, fileName?: string | null): boolean;
     private moveToUploaded;
     private moveToFailed;
@@ -156,8 +167,9 @@ export declare class MediaEntryComponent implements ControlValueAccessor, AfterV
     statusTimeout?: any;
     showStatusMessage(msg: string, durationMs?: number): void;
     private reorderUploadedFromDOM;
+    getFileIconName(type: string | undefined): string;
     getFileIcon(type: string | undefined): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MediaEntryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MediaEntryComponent, "media-entry", never, { "label": { "alias": "label"; "required": false; }; "opcional": { "alias": "opcional"; "required": false; }; "description": { "alias": "description"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "display": { "alias": "display"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxItems": { "alias": "maxItems"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "types": { "alias": "types"; "required": false; }; "extensions": { "alias": "extensions"; "required": false; }; "endpointUpload": { "alias": "endpointUpload"; "required": false; }; "chunkSizeMB": { "alias": "chunkSizeMB"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "primaryTag": { "alias": "primaryTag"; "required": false; }; "previewEndpoint": { "alias": "previewEndpoint"; "required": false; }; "imageMaxWidth": { "alias": "imageMaxWidth"; "required": false; }; "imageMaxHeight": { "alias": "imageMaxHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MediaEntryComponent, "media-entry", never, { "label": { "alias": "label"; "required": false; }; "opcional": { "alias": "opcional"; "required": false; }; "description": { "alias": "description"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "display": { "alias": "display"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxItems": { "alias": "maxItems"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "types": { "alias": "types"; "required": false; }; "extensions": { "alias": "extensions"; "required": false; }; "endpointUpload": { "alias": "endpointUpload"; "required": false; }; "chunkSizeMB": { "alias": "chunkSizeMB"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "fileSizes": { "alias": "fileSizes"; "required": false; }; "primaryTag": { "alias": "primaryTag"; "required": false; }; "previewEndpoint": { "alias": "previewEndpoint"; "required": false; }; "imageMaxWidth": { "alias": "imageMaxWidth"; "required": false; }; "imageMaxHeight": { "alias": "imageMaxHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xosue-utils/inputs",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Angular standalone form inputs (text, select, date, media, rich-text, ...) shared across apps.",
   "license": "UNLICENSED",
   "private": false,
@@ -32,8 +32,7 @@
     "@lucide/angular": ">=0.500.0 <2.0.0",
     "lexical": ">=0.42.0 <1.0.0",
     "luxon": "^3.0.0",
-    "rxjs": ">=7.8.0 <8.0.0",
-    "sortablejs": "^1.15.0"
+    "rxjs": ">=7.8.0 <8.0.0"
   },
   "dependencies": {
     "tslib": "^2.6.0"
@@ -71,9 +70,6 @@
     },
     "luxon": {
       "optional": true
-    },
-    "sortablejs": {
-      "optional": true
     }
   },
   "module": "fesm2022/xosue-utils-inputs.mjs",

package/vendor/context-menu-service/context-menu-service.component.d.ts

@@ -6,6 +6,7 @@ export declare class ContextMenuServiceComponent implements OnInit, OnDestroy {
     private platformId;
     private static readonly VIEWPORT_EDGE_INSET;
     private static readonly ANCHOR_OFFSET;
+    private static readonly COMPACT_MAX_WIDTH;
     private readonly cdr;
     panelRef?: ElementRef<HTMLElement>;
     active: ContextMenuRequest | null;
@@ -14,6 +15,7 @@ export declare class ContextMenuServiceComponent implements OnInit, OnDestroy {
         y: number;
     };
     panelVisible: boolean;
+    compact: boolean;
     private anchor;
     /** Timestamp hasta el cual ignoramos cierres (evita que el gesto de apertura cierre el menú). */
     private ignoreOutsideUntil;
@@ -29,8 +31,11 @@ export declare class ContextMenuServiceComponent implements OnInit, OnDestroy {
     onEscape(event: KeyboardEvent): void;
     selectOption(option: ContextMenuOption): void;
     private handleOutsideEvent;
+    onBackdropClick(event: Event): void;
+    private swallowFollowingClick;
     private dismissCurrent;
     private clearMenu;
+    private isCompactViewport;
     private applyClampedPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextMenuServiceComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ContextMenuServiceComponent, "context-menu-service", never, {}, {}, never, never, true, never>;

package/vendor/file-size.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class FileSizePipe implements PipeTransform {
-    transform(bytes: number | null | undefined, decimals?: number): string;
+    transform(bytes: number | string | null | undefined, decimals?: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FileSizePipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<FileSizePipe, "fileSize", true>;
 }