@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-copy-button.mjs

@@ -0,0 +1,230 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, booleanAttribute, output, signal, computed, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbIcon } from '@caribeng/ui/icon';
+import { DOCUMENT } from '@angular/common';
+
+/**
+ * Portapapeles de CaribeNG. Usa la API asíncrona del navegador y, si no está
+ * disponible (HTTP sin contexto seguro, navegadores antiguos), un textarea
+ * temporal con `execCommand('copy')`.
+ */
+class CbClipboard {
+    constructor() {
+        this.doc = inject(DOCUMENT);
+    }
+    /** Copia `text`. Resuelve `true` si se copió y `false` si el navegador lo impidió. */
+    async copy(text) {
+        const clipboard = this.doc.defaultView?.navigator?.clipboard;
+        if (clipboard?.writeText) {
+            try {
+                await clipboard.writeText(text);
+                return true;
+            }
+            catch {
+                // Sin permiso o sin foco: se intenta el método clásico.
+            }
+        }
+        return this.copyWithTextarea(text);
+    }
+    copyWithTextarea(text) {
+        const doc = this.doc;
+        if (!doc.body || typeof doc.execCommand !== 'function')
+            return false;
+        const active = doc.activeElement;
+        const area = doc.createElement('textarea');
+        area.value = text;
+        area.setAttribute('readonly', '');
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        area.style.pointerEvents = 'none';
+        doc.body.appendChild(area);
+        area.select();
+        let ok = false;
+        try {
+            ok = doc.execCommand('copy');
+        }
+        catch {
+            ok = false;
+        }
+        area.remove();
+        active?.focus?.();
+        return ok;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbClipboard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbClipboard, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbClipboard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Botón que copia un texto al portapapeles y confirma con un ✓ durante unos
+ * segundos. El resultado se anuncia a los lectores de pantalla.
+ *
+ * @example
+ * ```html
+ * <span>0012 3456 7890</span> <cb-copy-button value="001234567890" />
+ * <cb-copy-button [value]="apiKey" showLabel variant="outlined" />
+ * ```
+ */
+class CbCopyButton {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.clipboard = inject(CbClipboard);
+        this.timer = null;
+        /** Texto que se copia. */
+        this.value = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Muestra el texto ("Copiar" / "Copiado") junto al icono. */
+        this.showLabel = input(false, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Texto del botón y nombre accesible. Por defecto, "Copiar" del idioma activo. */
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Texto tras copiar. Por defecto, "Copiado". */
+        this.copiedLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []));
+        /** Milisegundos que dura la confirmación. */
+        this.timeout = input(2000, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeout" }] : /* istanbul ignore next */ []));
+        this.variant = input('text', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.severity = input('secondary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        this.size = input('sm', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Texto copiado. */
+        this.copied = output();
+        /** El navegador no permitió copiar. */
+        this.copyError = output();
+        this.state = signal('idle', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.buttonLabel = computed(() => this.label() ?? this.t().copy, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+        this.visibleLabel = computed(() => this.state() === 'copied' ? (this.copiedLabel() ?? this.t().copied) : this.buttonLabel(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleLabel" }] : /* istanbul ignore next */ []));
+        this.announcement = computed(() => {
+            const state = this.state();
+            if (state === 'copied')
+                return this.copiedLabel() ?? this.t().copied;
+            if (state === 'error')
+                return this.t().copyFailed;
+            return '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.iconSize = computed(() => (this.size() === 'lg' ? 18 : this.size() === 'sm' ? 14 : 16), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        inject(DestroyRef).onDestroy(() => this.clearTimer());
+    }
+    /** Copia el valor y muestra la confirmación. Resuelve `true` si lo consiguió. */
+    async copy() {
+        if (this.disabled())
+            return false;
+        const text = String(this.value() ?? '');
+        const ok = await this.clipboard.copy(text);
+        this.state.set(ok ? 'copied' : 'error');
+        if (ok)
+            this.copied.emit(text);
+        else
+            this.copyError.emit(text);
+        this.clearTimer();
+        this.timer = setTimeout(() => this.state.set('idle'), Math.max(0, this.timeout()));
+        return ok;
+    }
+    clearTimer() {
+        if (this.timer !== null)
+            clearTimeout(this.timer);
+        this.timer = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCopyButton, isStandalone: true, selector: "cb-copy-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyError: "copyError" }, host: { classAttribute: "cb-copy-button" }, ngImport: i0, template: `
+    <cb-button
+      [variant]="variant()"
+      [severity]="state() === 'copied' ? 'success' : severity()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [ariaLabel]="showLabel() ? undefined : buttonLabel()"
+      (click)="copy()"
+    >
+      <cb-icon [name]="state() === 'copied' ? 'check' : 'copy'" [size]="iconSize()" aria-hidden="true" />
+      @if (showLabel()) {
+        <span>{{ visibleLabel() }}</span>
+      }
+    </cb-button>
+    <span class="cb-copy-button__status" role="status">{{ announcement() }}</span>
+  `, isInline: true, styles: [":host{display:inline-flex;vertical-align:middle}.cb-copy-button__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCopyButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-copy-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbButton, CbIcon], host: { class: 'cb-copy-button' }, template: `
+    <cb-button
+      [variant]="variant()"
+      [severity]="state() === 'copied' ? 'success' : severity()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [ariaLabel]="showLabel() ? undefined : buttonLabel()"
+      (click)="copy()"
+    >
+      <cb-icon [name]="state() === 'copied' ? 'check' : 'copy'" [size]="iconSize()" aria-hidden="true" />
+      @if (showLabel()) {
+        <span>{{ visibleLabel() }}</span>
+      }
+    </cb-button>
+    <span class="cb-copy-button__status" role="status">{{ announcement() }}</span>
+  `, styles: [":host{display:inline-flex;vertical-align:middle}.cb-copy-button__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
+
+/**
+ * Copia un texto al portapapeles al pulsar el elemento (botón, enlace, icono…).
+ * Para el aviso visual usa `cb-copy-button`, o reacciona a `copied`.
+ *
+ * @example
+ * ```html
+ * <button type="button" [cbCopy]="cuenta" (copied)="toast.add({ summary: 'Copiado' })">Copiar</button>
+ * ```
+ */
+class CbCopy {
+    constructor() {
+        this.clipboard = inject(CbClipboard);
+        /** Texto que se copia. */
+        this.cbCopy = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cbCopy" }] : /* istanbul ignore next */ []));
+        /** Texto copiado. */
+        this.copied = output();
+        /** El navegador no permitió copiar. */
+        this.copyError = output();
+    }
+    /** Copia el texto. Resuelve `true` si lo consiguió. */
+    async copy() {
+        const text = String(this.cbCopy() ?? '');
+        const ok = await this.clipboard.copy(text);
+        if (ok)
+            this.copied.emit(text);
+        else
+            this.copyError.emit(text);
+        return ok;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCopy, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbCopy, isStandalone: true, selector: "[cbCopy]", inputs: { cbCopy: { classPropertyName: "cbCopy", publicName: "cbCopy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyError: "copyError" }, host: { listeners: { "click": "copy()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCopy, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cbCopy]',
+                    host: { '(click)': 'copy()' },
+                }]
+        }], propDecorators: { cbCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbCopy", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/copy-button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbClipboard, CbCopy, CbCopyButton };

package/fesm2022/caribeng-ui-dataview.mjs

@@ -1,27 +1,235 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, input, model, contentChild, linkedSignal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbPaginator } from '@caribeng/ui/paginator';
 
+/** Plantilla de cada elemento de un `<cb-dataview>`. */
+class CbDataViewItemTemplate {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataViewItemTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbDataViewItemTemplate, isStandalone: true, selector: "ng-template[cbDataViewItem]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataViewItemTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbDataViewItem]' }]
+        }] });
+/** Contenido de la cabecera de un `<cb-dataview>` (título, filtros, acciones…). */
+class CbDataViewHeader {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataViewHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbDataViewHeader, isStandalone: true, selector: "[cbDataViewHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataViewHeader, decorators: [{
+            type: Directive,
+            args: [{ selector: '[cbDataViewHeader]' }]
+        }] });
+/**
+ * DataView de CaribeNG: muestra una colección en lista o cuadrícula con la
+ * plantilla que definas, paginación opcional y botones para cambiar la vista.
+ * Sin plantilla, usa una tarjeta con título, categoría, descripción y botón
+ * de selección.
+ *
+ * @example
+ * ```html
+ * <cb-dataview [value]="productos" [(layout)]="vista" [rows]="6" showLayoutToggle>
+ *   <h3 cbDataViewHeader>Productos</h3>
+ *   <ng-template cbDataViewItem let-producto let-layout="layout">
+ *     <app-producto [producto]="producto" [compacto]="layout === 'list'" />
+ *   </ng-template>
+ * </cb-dataview>
+ * ```
+ */
 class CbDataView {
     constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        /** Colección a mostrar. */
         this.value = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Vista: cuadrícula o lista (two-way). */
         this.layout = model('grid', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /** Muestra los botones para cambiar entre lista y cuadrícula. */
+        this.showLayoutToggle = input(false, { ...(ngDevMode ? { debugName: "showLayoutToggle" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Elementos por página; 0 (por defecto) muestra todos sin paginador. */
+        this.rows = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        /** Propiedad que identifica cada elemento (para el seguimiento y la selección). */
+        this.dataKey = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+        /** Elemento seleccionado con la presentación por defecto (two-way). */
         this.selection = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        this.emptyMessage = input('Sin resultados', /* @ts-ignore */
+        /** Mensaje cuando no hay elementos. Por defecto, el del idioma activo. */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(CbDataViewItemTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.header = contentChild(CbDataViewHeader, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        /** Índice del primer elemento de la página actual; vuelve a 0 si cambia la colección. */
+        this.first = linkedSignal({ ...(ngDevMode ? { debugName: "first" } : /* istanbul ignore next */ {}), source: this.value, computation: () => 0 });
+        this.page = computed(() => {
+            const rows = this.rows();
+            return rows > 0 ? this.value().slice(this.first(), this.first() + rows) : this.value();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    }
+    trackKey(item, index) {
+        const key = item?.[this.dataKey()];
+        return key ?? index;
+    }
+    isSelected(item) {
+        const sel = this.selection();
+        return !!sel && this.trackKey(sel, -1) === this.trackKey(item, -2);
+    }
+    asItem(item) {
+        return item;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDataView, isStandalone: true, selector: "cb-dataview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", selection: "selectionChange" }, ngImport: i0, template: `<div class="cb-dataview" [attr.data-layout]="layout()" role="list">@for (item of value(); track item.id) {<article role="listitem" class="cb-dataview__item"><strong>{{item.title}}</strong>@if(item.category){<small>{{item.category}}</small>}@if(item.description){<p>{{item.description}}</p>}<button type="button" (click)="selection.set(item)" [attr.aria-pressed]="selection()?.id===item.id">Seleccionar</button></article>} @empty {<p>{{emptyMessage()}}</p>}</div>`, isInline: true, styles: [":host{display:block}.cb-dataview{display:grid;gap:1rem}.cb-dataview[data-layout=grid]{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.cb-dataview__item{padding:1rem;border:1px solid var(--cb-color-border,#d1d5db);border-radius:var(--cb-border-radius,.5rem);background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827)}small{display:block;color:var(--cb-color-text-muted,#6b7280)}p{margin:.5rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDataView, isStandalone: true, selector: "cb-dataview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showLayoutToggle: { classPropertyName: "showLayoutToggle", publicName: "showLayoutToggle", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", selection: "selectionChange" }, host: { classAttribute: "cb-dataview-host" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CbDataViewItemTemplate, descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: CbDataViewHeader, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (showLayoutToggle() || header()) {
+      <div class="cb-dataview__header">
+        <div class="cb-dataview__title"><ng-content select="[cbDataViewHeader]" /></div>
+        @if (showLayoutToggle()) {
+          <div class="cb-dataview__layouts" role="group" [attr.aria-label]="t().changeLayout">
+            <button
+              type="button"
+              class="cb-dataview__layout-btn"
+              [attr.aria-pressed]="layout() === 'list'"
+              [attr.aria-label]="t().listView"
+              (click)="layout.set('list')"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" /><line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" /></svg>
+            </button>
+            <button
+              type="button"
+              class="cb-dataview__layout-btn"
+              [attr.aria-pressed]="layout() === 'grid'"
+              [attr.aria-label]="t().gridView"
+              (click)="layout.set('grid')"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></svg>
+            </button>
+          </div>
+        }
+      </div>
+    }
+
+    <div class="cb-dataview" [attr.data-layout]="layout()" role="list">
+      @for (item of page(); track trackKey(item, $index); let i = $index) {
+        <div class="cb-dataview__cell" role="listitem">
+          @if (itemTemplate(); as tpl) {
+            <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, layout: layout(), index: first() + i }" />
+          } @else {
+            <article class="cb-dataview__item">
+              <strong class="cb-dataview__item-title">{{ asItem(item).title }}</strong>
+              @if (asItem(item).category) {
+                <small>{{ asItem(item).category }}</small>
+              }
+              @if (asItem(item).description) {
+                <p>{{ asItem(item).description }}</p>
+              }
+              <button
+                type="button"
+                class="cb-dataview__select"
+                [attr.aria-pressed]="isSelected(item)"
+                [attr.aria-label]="fmt(t().selectItem, asItem(item).title)"
+                (click)="selection.set(asItem(item))"
+              >
+                {{ t().select }}
+              </button>
+            </article>
+          }
+        </div>
+      } @empty {
+        <p class="cb-dataview__empty">{{ emptyMessage() ?? t().noResults }}</p>
+      }
+    </div>
+
+    @if (rows() > 0 && value().length > rows()) {
+      <cb-paginator class="cb-dataview__paginator" [totalRecords]="value().length" [rows]="rows()" [(first)]="first" />
+    }
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text)}.cb-dataview__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);margin-bottom:var(--cb-space-3, .75rem)}.cb-dataview__title{min-width:0}.cb-dataview__layouts{display:inline-flex;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);overflow:hidden}.cb-dataview__layout-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-dataview__layout-btn+.cb-dataview__layout-btn{border-inline-start:1px solid var(--cb-color-border)}.cb-dataview__layout-btn[aria-pressed=true]{color:var(--cb-color-primary-600);background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-dataview__layout-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:-2px}.cb-dataview{display:grid;gap:var(--cb-space-3, .75rem)}.cb-dataview[data-layout=grid]{grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr))}.cb-dataview__item{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised)}.cb-dataview[data-layout=list] .cb-dataview__item{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--cb-space-3, .75rem)}.cb-dataview__item-title{color:var(--cb-color-text-strong)}.cb-dataview__item small{color:var(--cb-color-text-muted)}.cb-dataview__item p{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-dataview[data-layout=list] .cb-dataview__item p{flex:1 1 12rem}.cb-dataview__select{align-self:flex-start;margin-top:auto;padding:.35rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm, .875rem);cursor:pointer}.cb-dataview[data-layout=list] .cb-dataview__select{margin-top:0;margin-inline-start:auto}.cb-dataview__select[aria-pressed=true]{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-dataview__empty{grid-column:1 / -1;margin:0;padding:var(--cb-space-6, 1.5rem);text-align:center;color:var(--cb-color-text-muted)}.cb-dataview__paginator{margin-top:var(--cb-space-3, .75rem)}:host-context([data-theme=\"dark\"]) .cb-dataview__select[aria-pressed=true]{color:var(--cb-color-primary-300)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbPaginator, selector: "cb-paginator", inputs: ["totalRecords", "rows", "first", "rowsPerPageOptions", "showReport", "maxPageLinks"], outputs: ["rowsChange", "firstChange", "pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDataView, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-dataview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div class="cb-dataview" [attr.data-layout]="layout()" role="list">@for (item of value(); track item.id) {<article role="listitem" class="cb-dataview__item"><strong>{{item.title}}</strong>@if(item.category){<small>{{item.category}}</small>}@if(item.description){<p>{{item.description}}</p>}<button type="button" (click)="selection.set(item)" [attr.aria-pressed]="selection()?.id===item.id">Seleccionar</button></article>} @empty {<p>{{emptyMessage()}}</p>}</div>`, styles: [":host{display:block}.cb-dataview{display:grid;gap:1rem}.cb-dataview[data-layout=grid]{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.cb-dataview__item{padding:1rem;border:1px solid var(--cb-color-border,#d1d5db);border-radius:var(--cb-border-radius,.5rem);background:var(--cb-color-surface,#fff);color:var(--cb-color-text,#111827)}small{display:block;color:var(--cb-color-text-muted,#6b7280)}p{margin:.5rem 0}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }] } });
+            args: [{ selector: 'cb-dataview', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet, CbPaginator], host: { class: 'cb-dataview-host' }, template: `
+    @if (showLayoutToggle() || header()) {
+      <div class="cb-dataview__header">
+        <div class="cb-dataview__title"><ng-content select="[cbDataViewHeader]" /></div>
+        @if (showLayoutToggle()) {
+          <div class="cb-dataview__layouts" role="group" [attr.aria-label]="t().changeLayout">
+            <button
+              type="button"
+              class="cb-dataview__layout-btn"
+              [attr.aria-pressed]="layout() === 'list'"
+              [attr.aria-label]="t().listView"
+              (click)="layout.set('list')"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" /><line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" /></svg>
+            </button>
+            <button
+              type="button"
+              class="cb-dataview__layout-btn"
+              [attr.aria-pressed]="layout() === 'grid'"
+              [attr.aria-label]="t().gridView"
+              (click)="layout.set('grid')"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></svg>
+            </button>
+          </div>
+        }
+      </div>
+    }
+
+    <div class="cb-dataview" [attr.data-layout]="layout()" role="list">
+      @for (item of page(); track trackKey(item, $index); let i = $index) {
+        <div class="cb-dataview__cell" role="listitem">
+          @if (itemTemplate(); as tpl) {
+            <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: item, layout: layout(), index: first() + i }" />
+          } @else {
+            <article class="cb-dataview__item">
+              <strong class="cb-dataview__item-title">{{ asItem(item).title }}</strong>
+              @if (asItem(item).category) {
+                <small>{{ asItem(item).category }}</small>
+              }
+              @if (asItem(item).description) {
+                <p>{{ asItem(item).description }}</p>
+              }
+              <button
+                type="button"
+                class="cb-dataview__select"
+                [attr.aria-pressed]="isSelected(item)"
+                [attr.aria-label]="fmt(t().selectItem, asItem(item).title)"
+                (click)="selection.set(asItem(item))"
+              >
+                {{ t().select }}
+              </button>
+            </article>
+          }
+        </div>
+      } @empty {
+        <p class="cb-dataview__empty">{{ emptyMessage() ?? t().noResults }}</p>
+      }
+    </div>
+
+    @if (rows() > 0 && value().length > rows()) {
+      <cb-paginator class="cb-dataview__paginator" [totalRecords]="value().length" [rows]="rows()" [(first)]="first" />
+    }
+  `, styles: [":host{display:block;color:var(--cb-color-text)}.cb-dataview__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3, .75rem);margin-bottom:var(--cb-space-3, .75rem)}.cb-dataview__title{min-width:0}.cb-dataview__layouts{display:inline-flex;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);overflow:hidden}.cb-dataview__layout-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-dataview__layout-btn+.cb-dataview__layout-btn{border-inline-start:1px solid var(--cb-color-border)}.cb-dataview__layout-btn[aria-pressed=true]{color:var(--cb-color-primary-600);background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-dataview__layout-btn:focus-visible{outline:2px solid var(--cb-color-focus-ring, var(--cb-color-primary-500));outline-offset:-2px}.cb-dataview{display:grid;gap:var(--cb-space-3, .75rem)}.cb-dataview[data-layout=grid]{grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr))}.cb-dataview__item{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cb-space-1, .25rem);padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-color-surface-raised)}.cb-dataview[data-layout=list] .cb-dataview__item{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--cb-space-3, .75rem)}.cb-dataview__item-title{color:var(--cb-color-text-strong)}.cb-dataview__item small{color:var(--cb-color-text-muted)}.cb-dataview__item p{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-dataview[data-layout=list] .cb-dataview__item p{flex:1 1 12rem}.cb-dataview__select{align-self:flex-start;margin-top:auto;padding:.35rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm, .875rem);cursor:pointer}.cb-dataview[data-layout=list] .cb-dataview__select{margin-top:0;margin-inline-start:auto}.cb-dataview__select[aria-pressed=true]{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-dataview__empty{grid-column:1 / -1;margin:0;padding:var(--cb-space-6, 1.5rem);text-align:center;color:var(--cb-color-text-muted)}.cb-dataview__paginator{margin-top:var(--cb-space-3, .75rem)}:host-context([data-theme=\"dark\"]) .cb-dataview__select[aria-pressed=true]{color:var(--cb-color-primary-300)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], showLayoutToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLayoutToggle", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbDataViewItemTemplate), { isSignal: true }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbDataViewHeader), { isSignal: true }] }] } });
+function toBoolean(value) {
+    return value !== false && value != null && `${value}` !== 'false';
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbDataView };
+export { CbDataView, CbDataViewHeader, CbDataViewItemTemplate };