@caribeng/ui 22.1.1 → 22.2.0

package/fesm2022/caribeng-ui-dataview.mjs

@@ -1,27 +1,232 @@
+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 } 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();
+        /** 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)"
+                (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)"
+                (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 };