@neural-ui/core 1.2.1 → 1.3.0

package/fesm2022/neural-ui-core-virtual-list.mjs

@@ -0,0 +1,126 @@
+import * as i0 from '@angular/core';
+import { afterNextRender, input, output, computed, TemplateRef, ContentChild, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import * as i1 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * NeuralUI VirtualList
+ *
+ * Wrapper sobre CDK VirtualScrollViewport para listas de miles de ítems.
+ * Proyecta contenido mediante `ng-template` con let-item.
+ *
+ * Uso:
+ *   <neu-virtual-list [items]="bigArray" [itemSize]="40">
+ *     <ng-template neuVirtualItem let-item>
+ *       <div class="my-row">{{ item.name }}</div>
+ *     </ng-template>
+ *   </neu-virtual-list>
+ */
+class NeuVirtualListComponent {
+    /** Referencia al viewport CDK — para forzar remeasure tras render / CDK viewport ref — to force remeasure after render */
+    _viewport;
+    constructor() {
+        // Fuerza checkViewportSize() tras el primer paint completo (necesario en modo zoneless)
+        // Forces checkViewportSize() after the first full paint (needed in zoneless mode)
+        afterNextRender(() => this._viewport?.checkViewportSize());
+    }
+    ngAfterViewInit() {
+        // Segundo intento de medición sincrona por si afterNextRender no cubre todos los casos
+        // Second synchronous measurement pass as a fallback
+        this._viewport?.checkViewportSize();
+    }
+    /** Array de ítems / Item array */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Altura de cada fila en px / Row height in px */
+    itemSize = input(48, ...(ngDevMode ? [{ debugName: "itemSize" }] : /* istanbul ignore next */ []));
+    /** Número de filas visibles / Visible row count (sets container height) */
+    visibleRows = input(10, ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
+    /** Texto cuando la lista está vacía / Empty state text */
+    emptyLabel = input('Sin resultados', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    /** Función de tracking / Tracking function */
+    trackBy = input((i) => i, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    /** Emitido al hacer click en un ítem / Emitted on item click */
+    itemClick = output();
+    itemTemplate = null;
+    _containerHeight = computed(() => `${this.itemSize() * this.visibleRows()}px`, ...(ngDevMode ? [{ debugName: "_containerHeight" }] : /* istanbul ignore next */ []));
+    _isEmpty = computed(() => this.items().length === 0, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+    _trackBy = (index, item) => this.trackBy()(index, item);
+    _itemTemplateOrDefault(fallback) {
+        return this.itemTemplate ?? fallback;
+    }
+    _itemContext(item, index) {
+        return { $implicit: item, index };
+    }
+    _defaultItemLabel(item) {
+        return String(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuVirtualListComponent, isStandalone: true, selector: "neu-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, visibleRows: { classPropertyName: "visibleRows", publicName: "visibleRows", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height": "_containerHeight()" }, classAttribute: "neu-virtual-list" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "_viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: `
+    <ng-template #defaultItem let-item>
+      <div class="neu-virtual-list__item-default" [style.height.px]="itemSize()">
+        {{ _defaultItemLabel(item) }}
+      </div>
+    </ng-template>
+
+    <cdk-virtual-scroll-viewport
+      class="neu-virtual-list__viewport"
+      [itemSize]="itemSize()"
+      [style.height]="_containerHeight()"
+      tabindex="0"
+    >
+      <ng-container *cdkVirtualFor="let item of items(); let index = index; trackBy: _trackBy">
+        <ng-container
+          [ngTemplateOutlet]="_itemTemplateOrDefault(defaultItem)"
+          [ngTemplateOutletContext]="_itemContext(item, index)"
+        />
+      </ng-container>
+    </cdk-virtual-scroll-viewport>
+    @if (_isEmpty()) {
+      <div class="neu-virtual-list__empty" role="status">{{ emptyLabel() }}</div>
+    }
+  `, isInline: true, styles: [".neu-virtual-list{display:block;overflow:hidden}.neu-virtual-list__viewport{width:100%;overflow-y:auto}.neu-virtual-list__item-default{display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--neu-border-color, #e5e7eb);font-size:.875rem;color:var(--neu-text-primary, #111)}.neu-virtual-list__empty{display:flex;align-items:center;justify-content:center;padding:32px;color:var(--neu-text-secondary, #6b7280);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuVirtualListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-virtual-list', imports: [ScrollingModule, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'neu-virtual-list',
+                        '[style.height]': '_containerHeight()',
+                    }, template: `
+    <ng-template #defaultItem let-item>
+      <div class="neu-virtual-list__item-default" [style.height.px]="itemSize()">
+        {{ _defaultItemLabel(item) }}
+      </div>
+    </ng-template>
+
+    <cdk-virtual-scroll-viewport
+      class="neu-virtual-list__viewport"
+      [itemSize]="itemSize()"
+      [style.height]="_containerHeight()"
+      tabindex="0"
+    >
+      <ng-container *cdkVirtualFor="let item of items(); let index = index; trackBy: _trackBy">
+        <ng-container
+          [ngTemplateOutlet]="_itemTemplateOrDefault(defaultItem)"
+          [ngTemplateOutletContext]="_itemContext(item, index)"
+        />
+      </ng-container>
+    </cdk-virtual-scroll-viewport>
+    @if (_isEmpty()) {
+      <div class="neu-virtual-list__empty" role="status">{{ emptyLabel() }}</div>
+    }
+  `, styles: [".neu-virtual-list{display:block;overflow:hidden}.neu-virtual-list__viewport{width:100%;overflow-y:auto}.neu-virtual-list__item-default{display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--neu-border-color, #e5e7eb);font-size:.875rem;color:var(--neu-text-primary, #111)}.neu-virtual-list__empty{display:flex;align-items:center;justify-content:center;padding:32px;color:var(--neu-text-secondary, #6b7280);font-size:.875rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _viewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], visibleRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleRows", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NeuVirtualListComponent };
+//# sourceMappingURL=neural-ui-core-virtual-list.mjs.map

package/fesm2022/neural-ui-core-virtual-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"neural-ui-core-virtual-list.mjs","sources":["../../../../projects/ui-core/virtual-list/neu-virtual-list.component.ts","../../../../projects/ui-core/virtual-list/neural-ui-core-virtual-list.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  input,\n  output,\n} from '@angular/core';\nimport { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * NeuralUI VirtualList\n *\n * Wrapper sobre CDK VirtualScrollViewport para listas de miles de ítems.\n * Proyecta contenido mediante `ng-template` con let-item.\n *\n * Uso:\n *   <neu-virtual-list [items]=\"bigArray\" [itemSize]=\"40\">\n *     <ng-template neuVirtualItem let-item>\n *       <div class=\"my-row\">{{ item.name }}</div>\n *     </ng-template>\n *   </neu-virtual-list>\n */\n@Component({\n  selector: 'neu-virtual-list',\n  imports: [ScrollingModule, NgTemplateOutlet],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'neu-virtual-list',\n    '[style.height]': '_containerHeight()',\n  },\n  template: `\n    <ng-template #defaultItem let-item>\n      <div class=\"neu-virtual-list__item-default\" [style.height.px]=\"itemSize()\">\n        {{ _defaultItemLabel(item) }}\n      </div>\n    </ng-template>\n\n    <cdk-virtual-scroll-viewport\n      class=\"neu-virtual-list__viewport\"\n      [itemSize]=\"itemSize()\"\n      [style.height]=\"_containerHeight()\"\n      tabindex=\"0\"\n    >\n      <ng-container *cdkVirtualFor=\"let item of items(); let index = index; trackBy: _trackBy\">\n        <ng-container\n          [ngTemplateOutlet]=\"_itemTemplateOrDefault(defaultItem)\"\n          [ngTemplateOutletContext]=\"_itemContext(item, index)\"\n        />\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n    @if (_isEmpty()) {\n      <div class=\"neu-virtual-list__empty\" role=\"status\">{{ emptyLabel() }}</div>\n    }\n  `,\n  styleUrl: './neu-virtual-list.component.scss',\n})\nexport class NeuVirtualListComponent<T = unknown> implements AfterViewInit {\n  /** Referencia al viewport CDK — para forzar remeasure tras render / CDK viewport ref — to force remeasure after render */\n  @ViewChild(CdkVirtualScrollViewport) private readonly _viewport?: CdkVirtualScrollViewport;\n\n  constructor() {\n    // Fuerza checkViewportSize() tras el primer paint completo (necesario en modo zoneless)\n    // Forces checkViewportSize() after the first full paint (needed in zoneless mode)\n    afterNextRender(() => this._viewport?.checkViewportSize());\n  }\n\n  ngAfterViewInit(): void {\n    // Segundo intento de medición sincrona por si afterNextRender no cubre todos los casos\n    // Second synchronous measurement pass as a fallback\n    this._viewport?.checkViewportSize();\n  }\n  /** Array de ítems / Item array */\n  readonly items = input<T[]>([]);\n\n  /** Altura de cada fila en px / Row height in px */\n  readonly itemSize = input<number>(48);\n\n  /** Número de filas visibles / Visible row count (sets container height) */\n  readonly visibleRows = input<number>(10);\n\n  /** Texto cuando la lista está vacía / Empty state text */\n  readonly emptyLabel = input<string>('Sin resultados');\n\n  /** Función de tracking / Tracking function */\n  readonly trackBy = input<(index: number, item: T) => unknown>((i) => i);\n\n  /** Emitido al hacer click en un ítem / Emitted on item click */\n  readonly itemClick = output<{ item: T; index: number }>();\n\n  @ContentChild(TemplateRef) itemTemplate: TemplateRef<{ $implicit: T; index: number }> | null =\n    null;\n\n  readonly _containerHeight = computed(() => `${this.itemSize() * this.visibleRows()}px`);\n  readonly _isEmpty = computed(() => this.items().length === 0);\n\n  _trackBy = (index: number, item: T) => this.trackBy()(index, item);\n\n  protected _itemTemplateOrDefault(\n    fallback: TemplateRef<{ $implicit: T; index: number }>,\n  ): TemplateRef<{ $implicit: T; index: number }> {\n    return this.itemTemplate ?? fallback;\n  }\n\n  protected _itemContext(item: T, index: number): { $implicit: T; index: number } {\n    return { $implicit: item, index };\n  }\n\n  protected _defaultItemLabel(item: T): string {\n    return String(item);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}