@xosue-utils/helpers 0.2.0

package/README.md

@@ -0,0 +1,24 @@
+# @xosue-utils/helpers
+
+Helpers UI Angular 19 standalone (paginación, empty/error states, headers) con estética **Cupertino**.
+
+Peer: `@xosue-utils/actions` (text-btn, lucide-icon).
+
+## Componentes
+
+| Selector | Uso |
+|----------|-----|
+| `smart-pagination` | Paginación por query params |
+| `empty-state` | Estado vacío con acciones |
+| `load-error` | Error de carga + retry |
+| `section-header` | Título + trailing actions |
+| `key-value-list` | Filas label/value |
+
+## Build
+
+```bash
+cd D:\apps\xosue-utils\actions && npm run build
+cd ../helpers
+npm install
+npm run build
+```

package/fesm2022/xosue-utils-helpers.mjs

@@ -0,0 +1,372 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, signal, computed, effect, Input, Component, input, output } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { LucideIconComponent, TextBtnComponent } from '@xosue-utils/actions';
+
+class SmartPaginationComponent {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    injector = inject(Injector);
+    resetOnChanges = false;
+    paramName = 'page';
+    /** Label when total === 0. */
+    emptyLabel = 'No hay resultados.';
+    /** Label when last_page === 1. */
+    singlePageLabel = 'Página única';
+    set data(value) {
+        if (value) {
+            this.paginationData.set(value);
+        }
+        else {
+            this.paginationData.set({
+                total: 0,
+                per_page: 10,
+                current_page: 1,
+                last_page: 1,
+                from: 0,
+                to: 0,
+            });
+        }
+    }
+    paginationData = signal({
+        total: 0,
+        per_page: 10,
+        current_page: 1,
+        last_page: 1,
+        from: 0,
+        to: 0,
+    });
+    currentPage = computed(() => this.paginationData().current_page);
+    lastPage = computed(() => this.paginationData().last_page);
+    pagesToDisplay = computed(() => {
+        const current = this.currentPage();
+        const last = this.lastPage();
+        const pages = [];
+        if (last <= 5) {
+            for (let i = 1; i <= last; i++)
+                pages.push(i);
+            return pages;
+        }
+        pages.push(1);
+        if (current <= 4) {
+            for (let i = 2; i <= 5; i++)
+                pages.push(i);
+            pages.push('...');
+        }
+        else if (current >= last - 3) {
+            pages.push('...');
+            for (let i = last - 4; i < last; i++)
+                pages.push(i);
+        }
+        else {
+            pages.push('...');
+            pages.push(current - 1, current, current + 1);
+            pages.push('...');
+        }
+        pages.push(last);
+        return pages;
+    });
+    queryParamsSub = Subscription.EMPTY;
+    queryParams = signal({});
+    isPage(p) {
+        return typeof p === 'number';
+    }
+    goToPage(page) {
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: { [this.paramName]: page },
+            queryParamsHandling: 'merge',
+        });
+    }
+    generateHref(page) {
+        const base = this.router.url.split('?')[0];
+        const params = new URLSearchParams({
+            ...this.queryParams(),
+            [this.paramName]: String(page),
+        });
+        return `${base}?${params}`;
+    }
+    updateFilter(params) {
+        const queryParams = {};
+        for (const key in params) {
+            queryParams[key] = params[key] != null ? String(params[key]) : null;
+        }
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams,
+            queryParamsHandling: 'merge',
+        });
+    }
+    ngOnInit() {
+        const queryPage = +(this.route.snapshot.queryParamMap.get(this.paramName) || '1');
+        if (!queryPage || queryPage < 1) {
+            this.goToPage(1);
+        }
+        this.queryParamsSub = this.route.queryParamMap.subscribe((params) => {
+            const newParams = {};
+            params.keys.forEach((key) => {
+                if (key !== this.paramName) {
+                    newParams[key] = params.get(key) ?? '';
+                }
+            });
+            this.queryParams.set(newParams);
+            const page = +(params.get(this.paramName) || '1');
+            if (!page || page < 1) {
+                this.goToPage(1);
+            }
+        });
+        effect(() => {
+            const pag = this.paginationData();
+            if (!pag)
+                return;
+            const currentParam = +(this.route.snapshot.queryParamMap.get(this.paramName) || '1');
+            if (this.resetOnChanges) {
+                if (currentParam !== 1) {
+                    this.goToPage(1);
+                }
+                return;
+            }
+            if (pag.last_page && currentParam > pag.last_page && pag.last_page >= 1) {
+                this.goToPage(pag.last_page);
+            }
+        }, { injector: this.injector });
+    }
+    ngOnDestroy() {
+        this.queryParamsSub.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SmartPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SmartPaginationComponent, isStandalone: true, selector: "smart-pagination", inputs: { resetOnChanges: "resetOnChanges", paramName: "paramName", emptyLabel: "emptyLabel", singlePageLabel: "singlePageLabel", data: "data" }, ngImport: i0, template: "@if (paginationData() && paginationData().total === 0) {\r\n  <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n  <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n    @if (currentPage() > 1) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n        <lucide-icon name=\"chevron-left\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n\r\n    @for (p of pagesToDisplay(); track $index) {\r\n      @if (isPage(p)) {\r\n        <a\r\n          [class.active]=\"p === currentPage()\"\r\n          [href]=\"generateHref(p)\"\r\n          (click)=\"goToPage(p); $event.preventDefault()\"\r\n        >\r\n          {{ p }}\r\n        </a>\r\n      } @else {\r\n        <span class=\"ellipsis\">\u2026</span>\r\n      }\r\n    }\r\n\r\n    @if (currentPage() < lastPage()) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n        <lucide-icon name=\"chevron-right\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n  </nav>\r\n} @else {\r\n  <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--border)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;background-color:transparent;color:var(--text-muted);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--surface) 80%,var(--border));color:var(--text-base)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--surface);color:var(--text-base);font-weight:700;box-shadow:0 1px 2px color-mix(in srgb,var(--text-base) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--text-muted)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--border);color:var(--text-muted);margin:0;font-size:.8125rem}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SmartPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-pagination', standalone: true, imports: [LucideIconComponent, CommonModule], template: "@if (paginationData() && paginationData().total === 0) {\r\n  <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n  <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n    @if (currentPage() > 1) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n        <lucide-icon name=\"chevron-left\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n\r\n    @for (p of pagesToDisplay(); track $index) {\r\n      @if (isPage(p)) {\r\n        <a\r\n          [class.active]=\"p === currentPage()\"\r\n          [href]=\"generateHref(p)\"\r\n          (click)=\"goToPage(p); $event.preventDefault()\"\r\n        >\r\n          {{ p }}\r\n        </a>\r\n      } @else {\r\n        <span class=\"ellipsis\">\u2026</span>\r\n      }\r\n    }\r\n\r\n    @if (currentPage() < lastPage()) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n        <lucide-icon name=\"chevron-right\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n  </nav>\r\n} @else {\r\n  <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--border)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;background-color:transparent;color:var(--text-muted);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--surface) 80%,var(--border));color:var(--text-base)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--surface);color:var(--text-base);font-weight:700;box-shadow:0 1px 2px color-mix(in srgb,var(--text-base) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--text-muted)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--border);color:var(--text-muted);margin:0;font-size:.8125rem}\n"] }]
+        }], propDecorators: { resetOnChanges: [{
+                type: Input
+            }], paramName: [{
+                type: Input
+            }], emptyLabel: [{
+                type: Input
+            }], singlePageLabel: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class EmptyStateComponent {
+    title = input('Sin datos');
+    message = input(null);
+    icon = input('inbox');
+    primaryLabel = input(null);
+    primaryIcon = input(null);
+    secondaryLabel = input(null);
+    primary = output();
+    secondary = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: EmptyStateComponent, isStandalone: true, selector: "empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primary: "primary", secondary: "secondary" }, ngImport: i0, template: `
+    <div class="EmptyState">
+      @if (icon()) {
+        <div class="EmptyState__Icon">
+          <lucide-icon [name]="icon()!" [size]="36"></lucide-icon>
+        </div>
+      }
+      <h3 class="EmptyState__Title">{{ title() }}</h3>
+      @if (message()) {
+        <p class="EmptyState__Message">{{ message() }}</p>
+      }
+      @if (primaryLabel() || secondaryLabel()) {
+        <div class="EmptyState__Actions">
+          @if (secondaryLabel()) {
+            <text-btn
+              [label]="secondaryLabel()!"
+              color="cancel"
+              variant="ghost"
+              (clicked)="secondary.emit($event)"
+            ></text-btn>
+          }
+          @if (primaryLabel()) {
+            <text-btn
+              [label]="primaryLabel()!"
+              [icon]="primaryIcon()"
+              color="primary"
+              (clicked)="primary.emit($event)"
+            ></text-btn>
+          }
+        </div>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--surface-2, var(--surface));border:1px solid var(--border)}.EmptyState__Icon{display:flex;color:var(--text-muted)}.EmptyState__Icon lucide-icon{--lucide-stroke: var(--text-muted)}.EmptyState__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.EmptyState__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.EmptyState__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'empty-state', standalone: true, imports: [LucideIconComponent, TextBtnComponent], template: `
+    <div class="EmptyState">
+      @if (icon()) {
+        <div class="EmptyState__Icon">
+          <lucide-icon [name]="icon()!" [size]="36"></lucide-icon>
+        </div>
+      }
+      <h3 class="EmptyState__Title">{{ title() }}</h3>
+      @if (message()) {
+        <p class="EmptyState__Message">{{ message() }}</p>
+      }
+      @if (primaryLabel() || secondaryLabel()) {
+        <div class="EmptyState__Actions">
+          @if (secondaryLabel()) {
+            <text-btn
+              [label]="secondaryLabel()!"
+              color="cancel"
+              variant="ghost"
+              (clicked)="secondary.emit($event)"
+            ></text-btn>
+          }
+          @if (primaryLabel()) {
+            <text-btn
+              [label]="primaryLabel()!"
+              [icon]="primaryIcon()"
+              color="primary"
+              (clicked)="primary.emit($event)"
+            ></text-btn>
+          }
+        </div>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block;width:100%}.EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--surface-2, var(--surface));border:1px solid var(--border)}.EmptyState__Icon{display:flex;color:var(--text-muted)}.EmptyState__Icon lucide-icon{--lucide-stroke: var(--text-muted)}.EmptyState__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.EmptyState__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.EmptyState__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:4px}\n"] }]
+        }] });
+
+class LoadErrorComponent {
+    title = input('No se pudo cargar');
+    message = input('Revisá tu conexión e intentá de nuevo.');
+    icon = input('triangle-alert');
+    retryLabel = input('Reintentar');
+    retry = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: LoadErrorComponent, isStandalone: true, selector: "load-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, ngImport: i0, template: `
+    <div class="LoadError">
+      <div class="LoadError__Icon">
+        <lucide-icon [name]="icon()" [size]="36"></lucide-icon>
+      </div>
+      <h3 class="LoadError__Title">{{ title() }}</h3>
+      @if (message()) {
+        <p class="LoadError__Message">{{ message() }}</p>
+      }
+      <div class="LoadError__Actions">
+        <text-btn
+          [label]="retryLabel()"
+          icon="refresh-cw"
+          color="primary"
+          (clicked)="retry.emit($event)"
+        ></text-btn>
+      </div>
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.LoadError{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:color-mix(in srgb,var(--error-bg, var(--surface)) 70%,var(--surface));border:1px solid var(--error-border, var(--border))}.LoadError__Icon{display:flex}.LoadError__Icon lucide-icon{--lucide-stroke: var(--error-text, var(--text-base))}.LoadError__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.LoadError__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.LoadError__Actions{display:flex;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'load-error', standalone: true, imports: [LucideIconComponent, TextBtnComponent], template: `
+    <div class="LoadError">
+      <div class="LoadError__Icon">
+        <lucide-icon [name]="icon()" [size]="36"></lucide-icon>
+      </div>
+      <h3 class="LoadError__Title">{{ title() }}</h3>
+      @if (message()) {
+        <p class="LoadError__Message">{{ message() }}</p>
+      }
+      <div class="LoadError__Actions">
+        <text-btn
+          [label]="retryLabel()"
+          icon="refresh-cw"
+          color="primary"
+          (clicked)="retry.emit($event)"
+        ></text-btn>
+      </div>
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block;width:100%}.LoadError{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:color-mix(in srgb,var(--error-bg, var(--surface)) 70%,var(--surface));border:1px solid var(--error-border, var(--border))}.LoadError__Icon{display:flex}.LoadError__Icon lucide-icon{--lucide-stroke: var(--error-text, var(--text-base))}.LoadError__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.LoadError__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.LoadError__Actions{display:flex;margin-top:4px}\n"] }]
+        }] });
+
+class SectionHeaderComponent {
+    title = input.required();
+    subtitle = input(null);
+    eyebrow = input(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SectionHeaderComponent, isStandalone: true, selector: "section-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <header class="SectionHeader">
+      <div class="SectionHeader__Text">
+        @if (eyebrow()) {
+          <p class="SectionHeader__Eyebrow">{{ eyebrow() }}</p>
+        }
+        <h2 class="SectionHeader__Title">{{ title() }}</h2>
+        @if (subtitle()) {
+          <p class="SectionHeader__Subtitle">{{ subtitle() }}</p>
+        }
+      </div>
+      <div class="SectionHeader__Actions">
+        <ng-content></ng-content>
+      </div>
+    </header>
+  `, isInline: true, styles: [":host{display:block;width:100%}.SectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.SectionHeader__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.SectionHeader__Eyebrow{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.SectionHeader__Title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-base);line-height:1.25}.SectionHeader__Subtitle{margin:0;font-size:.875rem;color:var(--text-muted);line-height:1.4}.SectionHeader__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SectionHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'section-header', standalone: true, template: `
+    <header class="SectionHeader">
+      <div class="SectionHeader__Text">
+        @if (eyebrow()) {
+          <p class="SectionHeader__Eyebrow">{{ eyebrow() }}</p>
+        }
+        <h2 class="SectionHeader__Title">{{ title() }}</h2>
+        @if (subtitle()) {
+          <p class="SectionHeader__Subtitle">{{ subtitle() }}</p>
+        }
+      </div>
+      <div class="SectionHeader__Actions">
+        <ng-content></ng-content>
+      </div>
+    </header>
+  `, styles: [":host{display:block;width:100%}.SectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.SectionHeader__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.SectionHeader__Eyebrow{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.SectionHeader__Title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-base);line-height:1.25}.SectionHeader__Subtitle{margin:0;font-size:.875rem;color:var(--text-muted);line-height:1.4}.SectionHeader__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}\n"] }]
+        }] });
+
+class KeyValueListComponent {
+    items = input([]);
+    emptyValue = input('—');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: KeyValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: KeyValueListComponent, isStandalone: true, selector: "key-value-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <dl class="KvList">
+      @for (item of items(); track item.label + '-' + $index) {
+        <div class="KvList__Row">
+          <dt class="KvList__Label">{{ item.label }}</dt>
+          <dd class="KvList__Value">{{ item.value ?? emptyValue() }}</dd>
+        </div>
+      }
+    </dl>
+  `, isInline: true, styles: [":host{display:block;width:100%}.KvList{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg, 12px);overflow:hidden;background:var(--surface)}.KvList__Row{display:grid;grid-template-columns:minmax(6rem,40%) 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}.KvList__Row:last-child{border-bottom:none}.KvList__Label{margin:0;font-size:.8125rem;color:var(--text-muted);font-weight:500}.KvList__Value{margin:0;font-size:.875rem;color:var(--text-base);word-break:break-word}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: KeyValueListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'key-value-list', standalone: true, template: `
+    <dl class="KvList">
+      @for (item of items(); track item.label + '-' + $index) {
+        <div class="KvList__Row">
+          <dt class="KvList__Label">{{ item.label }}</dt>
+          <dd class="KvList__Value">{{ item.value ?? emptyValue() }}</dd>
+        </div>
+      }
+    </dl>
+  `, styles: [":host{display:block;width:100%}.KvList{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg, 12px);overflow:hidden;background:var(--surface)}.KvList__Row{display:grid;grid-template-columns:minmax(6rem,40%) 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}.KvList__Row:last-child{border-bottom:none}.KvList__Label{margin:0;font-size:.8125rem;color:var(--text-muted);font-weight:500}.KvList__Value{margin:0;font-size:.875rem;color:var(--text-base);word-break:break-word}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of @xosue-utils/helpers
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EmptyStateComponent, KeyValueListComponent, LoadErrorComponent, SectionHeaderComponent, SmartPaginationComponent };
+//# sourceMappingURL=xosue-utils-helpers.mjs.map

package/fesm2022/xosue-utils-helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xosue-utils-helpers.mjs","sources":["../../src/lib/smart-pagination/smart-pagination.component.ts","../../src/lib/smart-pagination/smart-pagination.component.html","../../src/lib/empty-state/empty-state.component.ts","../../src/lib/load-error/load-error.component.ts","../../src/lib/section-header/section-header.component.ts","../../src/lib/key-value-list/key-value-list.component.ts","../../src/public-api.ts","../../src/xosue-utils-helpers.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  signal,\r\n  effect,\r\n  computed,\r\n  inject,\r\n  OnInit,\r\n  OnDestroy,\r\n  Injector,\r\n} from '@angular/core';\r\nimport { Router, ActivatedRoute } from '@angular/router';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Subscription } from 'rxjs';\r\nimport { LucideIconComponent } from '@xosue-utils/actions';\r\n\r\nexport interface PaginationData {\r\n  total: number;\r\n  per_page: number;\r\n  current_page: number;\r\n  last_page: number;\r\n  from: number;\r\n  to: number;\r\n}\r\n\r\n@Component({\r\n  selector: 'smart-pagination',\r\n  standalone: true,\r\n  imports: [LucideIconComponent, CommonModule],\r\n  templateUrl: './smart-pagination.component.html',\r\n  styleUrl: './smart-pagination.component.sass',\r\n})\r\nexport class SmartPaginationComponent implements OnInit, OnDestroy {\r\n  private router = inject(Router);\r\n  private route = inject(ActivatedRoute);\r\n  private injector = inject(Injector);\r\n\r\n  @Input() resetOnChanges = false;\r\n  @Input() paramName = 'page';\r\n  /** Label when total === 0. */\r\n  @Input() emptyLabel = 'No hay resultados.';\r\n  /** Label when last_page === 1. */\r\n  @Input() singlePageLabel = 'Página única';\r\n\r\n  @Input() set data(value: PaginationData | null | undefined) {\r\n    if (value) {\r\n      this.paginationData.set(value);\r\n    } else {\r\n      this.paginationData.set({\r\n        total: 0,\r\n        per_page: 10,\r\n        current_page: 1,\r\n        last_page: 1,\r\n        from: 0,\r\n        to: 0,\r\n      });\r\n    }\r\n  }\r\n\r\n  paginationData = signal<PaginationData>({\r\n    total: 0,\r\n    per_page: 10,\r\n    current_page: 1,\r\n    last_page: 1,\r\n    from: 0,\r\n    to: 0,\r\n  });\r\n\r\n  readonly currentPage = computed(() => this.paginationData().current_page);\r\n  readonly lastPage = computed(() => this.paginationData().last_page);\r\n\r\n  readonly pagesToDisplay = computed(() => {\r\n    const current = this.currentPage();\r\n    const last = this.lastPage();\r\n    const pages: (number | string)[] = [];\r\n\r\n    if (last <= 5) {\r\n      for (let i = 1; i <= last; i++) pages.push(i);\r\n      return pages;\r\n    }\r\n\r\n    pages.push(1);\r\n\r\n    if (current <= 4) {\r\n      for (let i = 2; i <= 5; i++) pages.push(i);\r\n      pages.push('...');\r\n    } else if (current >= last - 3) {\r\n      pages.push('...');\r\n      for (let i = last - 4; i < last; i++) pages.push(i);\r\n    } else {\r\n      pages.push('...');\r\n      pages.push(current - 1, current, current + 1);\r\n      pages.push('...');\r\n    }\r\n\r\n    pages.push(last);\r\n    return pages;\r\n  });\r\n\r\n  private queryParamsSub = Subscription.EMPTY;\r\n  readonly queryParams = signal<{ [key: string]: string }>({});\r\n\r\n  isPage(p: number | string): p is number {\r\n    return typeof p === 'number';\r\n  }\r\n\r\n  goToPage(page: number): void {\r\n    this.router.navigate([], {\r\n      relativeTo: this.route,\r\n      queryParams: { [this.paramName]: page },\r\n      queryParamsHandling: 'merge',\r\n    });\r\n  }\r\n\r\n  generateHref(page: number): string {\r\n    const base = this.router.url.split('?')[0];\r\n    const params = new URLSearchParams({\r\n      ...this.queryParams(),\r\n      [this.paramName]: String(page),\r\n    });\r\n    return `${base}?${params}`;\r\n  }\r\n\r\n  updateFilter(params: { [key: string]: unknown }): void {\r\n    const queryParams: { [key: string]: string | null } = {};\r\n    for (const key in params) {\r\n      queryParams[key] = params[key] != null ? String(params[key]) : null;\r\n    }\r\n    this.router.navigate([], {\r\n      relativeTo: this.route,\r\n      queryParams,\r\n      queryParamsHandling: 'merge',\r\n    });\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    const queryPage = +(this.route.snapshot.queryParamMap.get(this.paramName) || '1');\r\n    if (!queryPage || queryPage < 1) {\r\n      this.goToPage(1);\r\n    }\r\n\r\n    this.queryParamsSub = this.route.queryParamMap.subscribe((params) => {\r\n      const newParams: { [key: string]: string } = {};\r\n      params.keys.forEach((key) => {\r\n        if (key !== this.paramName) {\r\n          newParams[key] = params.get(key) ?? '';\r\n        }\r\n      });\r\n      this.queryParams.set(newParams);\r\n\r\n      const page = +(params.get(this.paramName) || '1');\r\n      if (!page || page < 1) {\r\n        this.goToPage(1);\r\n      }\r\n    });\r\n\r\n    effect(\r\n      () => {\r\n        const pag = this.paginationData();\r\n        if (!pag) return;\r\n\r\n        const currentParam = +(this.route.snapshot.queryParamMap.get(this.paramName) || '1');\r\n\r\n        if (this.resetOnChanges) {\r\n          if (currentParam !== 1) {\r\n            this.goToPage(1);\r\n          }\r\n          return;\r\n        }\r\n\r\n        if (pag.last_page && currentParam > pag.last_page && pag.last_page >= 1) {\r\n          this.goToPage(pag.last_page);\r\n        }\r\n      },\r\n      { injector: this.injector },\r\n    );\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.queryParamsSub.unsubscribe();\r\n  }\r\n}\r\n","@if (paginationData() && paginationData().total === 0) {\r\n  <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n  <nav class=\"pagination\" aria-label=\"Paginación\">\r\n    @if (currentPage() > 1) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n        <lucide-icon name=\"chevron-left\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n\r\n    @for (p of pagesToDisplay(); track $index) {\r\n      @if (isPage(p)) {\r\n        <a\r\n          [class.active]=\"p === currentPage()\"\r\n          [href]=\"generateHref(p)\"\r\n          (click)=\"goToPage(p); $event.preventDefault()\"\r\n        >\r\n          {{ p }}\r\n        </a>\r\n      } @else {\r\n        <span class=\"ellipsis\">…</span>\r\n      }\r\n    }\r\n\r\n    @if (currentPage() < lastPage()) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n        <lucide-icon name=\"chevron-right\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n  </nav>\r\n} @else {\r\n  <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n","import { Component, input, output } from '@angular/core';\r\nimport { LucideIconComponent, TextBtnComponent } from '@xosue-utils/actions';\r\n\r\n@Component({\r\n  selector: 'empty-state',\r\n  standalone: true,\r\n  imports: [LucideIconComponent, TextBtnComponent],\r\n  template: `\r\n    <div class=\"EmptyState\">\r\n      @if (icon()) {\r\n        <div class=\"EmptyState__Icon\">\r\n          <lucide-icon [name]=\"icon()!\" [size]=\"36\"></lucide-icon>\r\n        </div>\r\n      }\r\n      <h3 class=\"EmptyState__Title\">{{ title() }}</h3>\r\n      @if (message()) {\r\n        <p class=\"EmptyState__Message\">{{ message() }}</p>\r\n      }\r\n      @if (primaryLabel() || secondaryLabel()) {\r\n        <div class=\"EmptyState__Actions\">\r\n          @if (secondaryLabel()) {\r\n            <text-btn\r\n              [label]=\"secondaryLabel()!\"\r\n              color=\"cancel\"\r\n              variant=\"ghost\"\r\n              (clicked)=\"secondary.emit($event)\"\r\n            ></text-btn>\r\n          }\r\n          @if (primaryLabel()) {\r\n            <text-btn\r\n              [label]=\"primaryLabel()!\"\r\n              [icon]=\"primaryIcon()\"\r\n              color=\"primary\"\r\n              (clicked)=\"primary.emit($event)\"\r\n            ></text-btn>\r\n          }\r\n        </div>\r\n      }\r\n      <ng-content></ng-content>\r\n    </div>\r\n  `,\r\n  styleUrl: './empty-state.component.sass',\r\n})\r\nexport class EmptyStateComponent {\r\n  readonly title = input('Sin datos');\r\n  readonly message = input<string | null>(null);\r\n  readonly icon = input<string | null>('inbox');\r\n  readonly primaryLabel = input<string | null>(null);\r\n  readonly primaryIcon = input<string | null>(null);\r\n  readonly secondaryLabel = input<string | null>(null);\r\n\r\n  readonly primary = output<MouseEvent>();\r\n  readonly secondary = output<MouseEvent>();\r\n}\r\n","import { Component, input, output } from '@angular/core';\r\nimport { LucideIconComponent, TextBtnComponent } from '@xosue-utils/actions';\r\n\r\n@Component({\r\n  selector: 'load-error',\r\n  standalone: true,\r\n  imports: [LucideIconComponent, TextBtnComponent],\r\n  template: `\r\n    <div class=\"LoadError\">\r\n      <div class=\"LoadError__Icon\">\r\n        <lucide-icon [name]=\"icon()\" [size]=\"36\"></lucide-icon>\r\n      </div>\r\n      <h3 class=\"LoadError__Title\">{{ title() }}</h3>\r\n      @if (message()) {\r\n        <p class=\"LoadError__Message\">{{ message() }}</p>\r\n      }\r\n      <div class=\"LoadError__Actions\">\r\n        <text-btn\r\n          [label]=\"retryLabel()\"\r\n          icon=\"refresh-cw\"\r\n          color=\"primary\"\r\n          (clicked)=\"retry.emit($event)\"\r\n        ></text-btn>\r\n      </div>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  `,\r\n  styleUrl: './load-error.component.sass',\r\n})\r\nexport class LoadErrorComponent {\r\n  readonly title = input('No se pudo cargar');\r\n  readonly message = input<string | null>('Revisá tu conexión e intentá de nuevo.');\r\n  readonly icon = input('triangle-alert');\r\n  readonly retryLabel = input('Reintentar');\r\n\r\n  readonly retry = output<MouseEvent>();\r\n}\r\n","import { Component, input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'section-header',\r\n  standalone: true,\r\n  template: `\r\n    <header class=\"SectionHeader\">\r\n      <div class=\"SectionHeader__Text\">\r\n        @if (eyebrow()) {\r\n          <p class=\"SectionHeader__Eyebrow\">{{ eyebrow() }}</p>\r\n        }\r\n        <h2 class=\"SectionHeader__Title\">{{ title() }}</h2>\r\n        @if (subtitle()) {\r\n          <p class=\"SectionHeader__Subtitle\">{{ subtitle() }}</p>\r\n        }\r\n      </div>\r\n      <div class=\"SectionHeader__Actions\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </header>\r\n  `,\r\n  styleUrl: './section-header.component.sass',\r\n})\r\nexport class SectionHeaderComponent {\r\n  readonly title = input.required<string>();\r\n  readonly subtitle = input<string | null>(null);\r\n  readonly eyebrow = input<string | null>(null);\r\n}\r\n","import { Component, input } from '@angular/core';\r\n\r\nexport interface KeyValueItem {\r\n  label: string;\r\n  value: string | number | null | undefined;\r\n}\r\n\r\n@Component({\r\n  selector: 'key-value-list',\r\n  standalone: true,\r\n  template: `\r\n    <dl class=\"KvList\">\r\n      @for (item of items(); track item.label + '-' + $index) {\r\n        <div class=\"KvList__Row\">\r\n          <dt class=\"KvList__Label\">{{ item.label }}</dt>\r\n          <dd class=\"KvList__Value\">{{ item.value ?? emptyValue() }}</dd>\r\n        </div>\r\n      }\r\n    </dl>\r\n  `,\r\n  styleUrl: './key-value-list.component.sass',\r\n})\r\nexport class KeyValueListComponent {\r\n  readonly items = input<KeyValueItem[]>([]);\r\n  readonly emptyValue = input('—');\r\n}\r\n","/*\r\n * Public API Surface of @xosue-utils/helpers\r\n */\r\n\r\nexport * from './lib/index';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@xosue-utils/helpers" />
+export * from './public-api';

package/lib/empty-state/empty-state.component.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class EmptyStateComponent {
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly message: import("@angular/core").InputSignal<string>;
+    readonly icon: import("@angular/core").InputSignal<string>;
+    readonly primaryLabel: import("@angular/core").InputSignal<string>;
+    readonly primaryIcon: import("@angular/core").InputSignal<string>;
+    readonly secondaryLabel: import("@angular/core").InputSignal<string>;
+    readonly primary: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    readonly secondary: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "empty-state", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "primaryLabel": { "alias": "primaryLabel"; "required": false; "isSignal": true; }; "primaryIcon": { "alias": "primaryIcon"; "required": false; "isSignal": true; }; "secondaryLabel": { "alias": "secondaryLabel"; "required": false; "isSignal": true; }; }, { "primary": "primary"; "secondary": "secondary"; }, never, ["*"], true, never>;
+}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { SmartPaginationComponent, type PaginationData, } from './smart-pagination/smart-pagination.component';
+export { EmptyStateComponent } from './empty-state/empty-state.component';
+export { LoadErrorComponent } from './load-error/load-error.component';
+export { SectionHeaderComponent } from './section-header/section-header.component';
+export { KeyValueListComponent, type KeyValueItem, } from './key-value-list/key-value-list.component';

package/lib/key-value-list/key-value-list.component.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export interface KeyValueItem {
+    label: string;
+    value: string | number | null | undefined;
+}
+export declare class KeyValueListComponent {
+    readonly items: import("@angular/core").InputSignal<KeyValueItem[]>;
+    readonly emptyValue: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KeyValueListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KeyValueListComponent, "key-value-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "emptyValue": { "alias": "emptyValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/load-error/load-error.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class LoadErrorComponent {
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly message: import("@angular/core").InputSignal<string>;
+    readonly icon: import("@angular/core").InputSignal<string>;
+    readonly retryLabel: import("@angular/core").InputSignal<string>;
+    readonly retry: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoadErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadErrorComponent, "load-error", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; }, { "retry": "retry"; }, never, ["*"], true, never>;
+}

package/lib/section-header/section-header.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SectionHeaderComponent {
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly subtitle: import("@angular/core").InputSignal<string>;
+    readonly eyebrow: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionHeaderComponent, "section-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "eyebrow": { "alias": "eyebrow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/smart-pagination/smart-pagination.component.d.ts

@@ -0,0 +1,40 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface PaginationData {
+    total: number;
+    per_page: number;
+    current_page: number;
+    last_page: number;
+    from: number;
+    to: number;
+}
+export declare class SmartPaginationComponent implements OnInit, OnDestroy {
+    private router;
+    private route;
+    private injector;
+    resetOnChanges: boolean;
+    paramName: string;
+    /** Label when total === 0. */
+    emptyLabel: string;
+    /** Label when last_page === 1. */
+    singlePageLabel: string;
+    set data(value: PaginationData | null | undefined);
+    paginationData: import("@angular/core").WritableSignal<PaginationData>;
+    readonly currentPage: import("@angular/core").Signal<number>;
+    readonly lastPage: import("@angular/core").Signal<number>;
+    readonly pagesToDisplay: import("@angular/core").Signal<(string | number)[]>;
+    private queryParamsSub;
+    readonly queryParams: import("@angular/core").WritableSignal<{
+        [key: string]: string;
+    }>;
+    isPage(p: number | string): p is number;
+    goToPage(page: number): void;
+    generateHref(page: number): string;
+    updateFilter(params: {
+        [key: string]: unknown;
+    }): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmartPaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartPaginationComponent, "smart-pagination", never, { "resetOnChanges": { "alias": "resetOnChanges"; "required": false; }; "paramName": { "alias": "paramName"; "required": false; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; }; "singlePageLabel": { "alias": "singlePageLabel"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@xosue-utils/helpers",
+  "version": "0.2.0",
+  "description": "Angular standalone helper UI (pagination, empty-state, load-error, section-header, key-value) with Cupertino aesthetic.",
+  "license": "UNLICENSED",
+  "private": false,
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YOUR_ORG/xosue-utils.git"
+  },
+  "keywords": [
+    "angular",
+    "helpers",
+    "pagination",
+    "cupertino",
+    "xosue-utils"
+  ],
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0 <21.0.0",
+    "@angular/core": ">=19.0.0 <21.0.0",
+    "@angular/router": ">=19.0.0 <21.0.0",
+    "@lucide/angular": ">=0.500.0 <2.0.0",
+    "@xosue-utils/actions": ">=0.2.0 <1.0.0",
+    "rxjs": ">=7.8.0 <8.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/xosue-utils-helpers.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/xosue-utils-helpers.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib/index';