@luzmo/ngx-lucero 2.4.2 → 2.5.1

package/esm/components/table-row.js

@@ -0,0 +1,111 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-table-row>
+ *
+ * @slot (default) - `luzmo-table-cell` elements of the row.
+ */
+export class LuzmoTableRow {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    role;
+    /** Selection value. Defaults to the row's position when empty. */
+    value;
+    /** Whether the row is selected. Mirrored from the table's `selected`. */
+    selected;
+    /** Whether the row can be selected. Set by the table while it `selects`. */
+    selectable;
+    /** Whether the row's details are shown. */
+    expanded;
+    /** Whether the row has a details sibling or data-mode details renderer. */
+    expandable;
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'role':
+                    this.setHostProperty('role', changes['role'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'selectable':
+                    this.setHostProperty('selectable', changes['selectable'].currentValue);
+                    break;
+                case 'expanded':
+                    this.setHostProperty('expanded', changes['expanded'].currentValue);
+                    break;
+                case 'expandable':
+                    this.setHostProperty('expandable', changes['expandable'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoTableRow_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTableRow)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTableRow, selectors: [["luzmo-table-row"]], inputs: { role: "role", value: "value", selected: "selected", selectable: "selectable", expanded: "expanded", expandable: "expandable" }, exportAs: ["luzmoTableRow"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTableRow_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTableRow, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-table-row',
+                exportAs: 'luzmoTableRow',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { role: [{
+            type: Input,
+            args: [{ alias: 'role' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], selectable: [{
+            type: Input,
+            args: [{ alias: 'selectable' }]
+        }], expanded: [{
+            type: Input,
+            args: [{ alias: 'expanded' }]
+        }], expandable: [{
+            type: Input,
+            args: [{ alias: 'expandable' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTableRow, { className: "LuzmoTableRow", filePath: "components/table-row.ts", lineNumber: 17 }); })();

package/esm/components/table.d.ts

@@ -0,0 +1,89 @@
+import { OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import '@luzmo/lucero/table';
+import type { LuzmoTable as LuzmoTableHostElement } from '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+export declare class LuzmoTable implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    private projectedTemplates?;
+    private readonly templateValues;
+    private readonly templateDefaults;
+    private readonly templateInputs;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoTableHostElement;
+    role?: string;
+    /** Row density. Unset is regular. */
+    density?: ('compact' | 'spacious');
+    /** Use the accent color for selected rows and checkboxes. */
+    emphasized?: boolean;
+    /** Remove the outer border and background. */
+    quiet?: boolean;
+    /** Scroll the body inside the table's block size, keeping the head in view. */
+    scroller?: boolean;
+    /** Row selection mode. Unset disables selection. */
+    selects?: ('single' | 'multiple');
+    /** Selected row values. */
+    selected?: string[];
+    /** Accessible name of the select-all checkbox. Overrides `labels.selectAll`. */
+    selectAllLabel?: string;
+    /** Row records. Setting an array switches the table to data mode. */
+    items?: (Record<string, unknown>)[];
+    /** Stable, unique selection value of a data-mode row. Defaults to the item index. */
+    itemValue?: unknown;
+    /** Accessible name of a data-mode row checkbox. Defaults to the first column's text, then `labels.selectRow`. */
+    itemLabel?: unknown;
+    /** Cell content of a data-mode row. Return `luzmo-table-cell` elements. */
+    renderItem?: LuzmoTableHostElement['renderItem'] | TemplateRef<{
+        item: Parameters<NonNullable<LuzmoTableHostElement['renderItem']>>[0];
+        index: Parameters<NonNullable<LuzmoTableHostElement['renderItem']>>[1];
+        $implicit: Parameters<NonNullable<LuzmoTableHostElement['renderItem']>>[0];
+    }> | null;
+    /** Expanded row values. Setting `renderDetails` enables data-mode disclosure. */
+    expanded?: string[];
+    /** Details content of a data-mode row. Its presence enables row disclosure for every non-information row. */
+    renderDetails?: LuzmoTableHostElement['renderDetails'] | TemplateRef<{
+        item: Parameters<NonNullable<LuzmoTableHostElement['renderDetails']>>[0];
+        index: Parameters<NonNullable<LuzmoTableHostElement['renderDetails']>>[1];
+        $implicit: Parameters<NonNullable<LuzmoTableHostElement['renderDetails']>>[0];
+    }> | null;
+    /** Resized column widths, in pixels, keyed by column id. A resize updates this map without changing `columns`. */
+    columnWidths?: Record<string, number>;
+    /** Data-mode columns, used when no `luzmo-table-head` is slotted. */
+    columns?: unknown;
+    /** Mount only the visible rows. Data mode only; needs a bounded block size. */
+    virtualized?: boolean;
+    /** Translatable copy. */
+    labels?: unknown;
+    size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
+    /** `selected` changed. Cancel it to keep the previous selection. */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    /** A sortable header was activated. `detail` is `{ sortKey, sortDirection }`. Cancel it in data mode to skip the client sort. */
+    readonly luzmoTableSorted: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** A row's details were expanded or collapsed. `detail` is `{ value, expanded }`. Cancel it to keep the previous state. */
+    readonly luzmoTableRowToggle: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** A column resize committed. `detail` is `{ columnId, width, columnWidths }`. */
+    readonly luzmoColumnResized: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** The mounted window of a virtualized table changed. `detail` is `{ first, last }`. */
+    readonly luzmoRangeChanged: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterContentChecked(): void;
+    private updateTemplateInputs;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    /** Moves focus to the grid's current cell. */
+    focus(options?: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTable, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTable, "luzmo-table", ["luzmoTable"], { "role": { "alias": "role"; "required": false; }; "density": { "alias": "density"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "scroller": { "alias": "scroller"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemValue": { "alias": "itemValue"; "required": false; }; "itemLabel": { "alias": "itemLabel"; "required": false; }; "renderItem": { "alias": "renderItem"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "renderDetails": { "alias": "renderDetails"; "required": false; }; "columnWidths": { "alias": "columnWidths"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "virtualized": { "alias": "virtualized"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "changeEvent"; "luzmoTableSorted": "luzmo-table-sorted"; "luzmoTableRowToggle": "luzmo-table-row-toggle"; "luzmoColumnResized": "luzmo-column-resized"; "luzmoRangeChanged": "luzmo-range-changed"; }, ["projectedTemplates"], ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoTable */
+export type LuzmoTableElement = LuzmoTableHostElement;

package/esm/components/table.js

@@ -0,0 +1,279 @@
+import { ApplicationRef, ChangeDetectionStrategy, Component, ContentChildren, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/table';
+import { AngularTemplateInput } from './template-input.js';
+import { LuzmoTemplate, collectTemplateSlots } from './template.js';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-table>
+ *
+ * @slot (default) - `luzmo-table-head` and `luzmo-table-body`.
+ */
+export class LuzmoTable {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    projectedTemplates;
+    templateValues = new Map();
+    templateDefaults = {
+        renderItem: this.host.renderItem,
+        renderDetails: this.host.renderDetails
+    };
+    templateInputs = {
+        renderItem: new AngularTemplateInput(inject(ApplicationRef)),
+        renderDetails: new AngularTemplateInput(inject(ApplicationRef))
+    };
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    role;
+    /** Row density. Unset is regular. */
+    density;
+    /** Use the accent color for selected rows and checkboxes. */
+    emphasized;
+    /** Remove the outer border and background. */
+    quiet;
+    /** Scroll the body inside the table's block size, keeping the head in view. */
+    scroller;
+    /** Row selection mode. Unset disables selection. */
+    selects;
+    /** Selected row values. */
+    selected;
+    /** Accessible name of the select-all checkbox. Overrides `labels.selectAll`. */
+    selectAllLabel;
+    /** Row records. Setting an array switches the table to data mode. */
+    items;
+    /** Stable, unique selection value of a data-mode row. Defaults to the item index. */
+    itemValue;
+    /** Accessible name of a data-mode row checkbox. Defaults to the first column's text, then `labels.selectRow`. */
+    itemLabel;
+    /** Cell content of a data-mode row. Return `luzmo-table-cell` elements. */
+    renderItem;
+    /** Expanded row values. Setting `renderDetails` enables data-mode disclosure. */
+    expanded;
+    /** Details content of a data-mode row. Its presence enables row disclosure for every non-information row. */
+    renderDetails;
+    /** Resized column widths, in pixels, keyed by column id. A resize updates this map without changing `columns`. */
+    columnWidths;
+    /** Data-mode columns, used when no `luzmo-table-head` is slotted. */
+    columns;
+    /** Mount only the visible rows. Data mode only; needs a bounded block size. */
+    virtualized;
+    /** Translatable copy. */
+    labels;
+    size;
+    /** `selected` changed. Cancel it to keep the previous selection. */
+    changeEvent = output();
+    /** A sortable header was activated. `detail` is `{ sortKey, sortDirection }`. Cancel it in data mode to skip the client sort. */
+    luzmoTableSorted = output({ alias: 'luzmo-table-sorted' });
+    /** A row's details were expanded or collapsed. `detail` is `{ value, expanded }`. Cancel it to keep the previous state. */
+    luzmoTableRowToggle = output({ alias: 'luzmo-table-row-toggle' });
+    /** A column resize committed. `detail` is `{ columnId, width, columnWidths }`. */
+    luzmoColumnResized = output({ alias: 'luzmo-column-resized' });
+    /** The mounted window of a virtualized table changed. `detail` is `{ first, last }`. */
+    luzmoRangeChanged = output({ alias: 'luzmo-range-changed' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const input of Object.values(this.templateInputs))
+                input.destroy();
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'role':
+                    this.setHostProperty('role', changes['role'].currentValue);
+                    break;
+                case 'density':
+                    this.setHostProperty('density', changes['density'].currentValue);
+                    break;
+                case 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'quiet':
+                    this.setHostProperty('quiet', changes['quiet'].currentValue);
+                    break;
+                case 'scroller':
+                    this.setHostProperty('scroller', changes['scroller'].currentValue);
+                    break;
+                case 'selects':
+                    this.setHostProperty('selects', changes['selects'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'selectAllLabel':
+                    this.setHostProperty('selectAllLabel', changes['selectAllLabel'].currentValue);
+                    break;
+                case 'items':
+                    this.setHostProperty('items', changes['items'].currentValue);
+                    break;
+                case 'itemValue':
+                    this.setHostProperty('itemValue', changes['itemValue'].currentValue);
+                    break;
+                case 'itemLabel':
+                    this.setHostProperty('itemLabel', changes['itemLabel'].currentValue);
+                    break;
+                case 'expanded':
+                    this.setHostProperty('expanded', changes['expanded'].currentValue);
+                    break;
+                case 'columnWidths':
+                    this.setHostProperty('columnWidths', changes['columnWidths'].currentValue);
+                    break;
+                case 'columns':
+                    this.setHostProperty('columns', changes['columns'].currentValue);
+                    break;
+                case 'virtualized':
+                    this.setHostProperty('virtualized', changes['virtualized'].currentValue);
+                    break;
+                case 'labels':
+                    this.setHostProperty('labels', changes['labels'].currentValue);
+                    break;
+                case 'size':
+                    this.setHostProperty('size', changes['size'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+        this.updateTemplateInputs();
+    }
+    ngAfterContentChecked() {
+        this.updateTemplateInputs();
+    }
+    updateTemplateInputs() {
+        const slots = collectTemplateSlots(this.projectedTemplates ?? [], ["row", "details"]);
+        {
+            const value = this.renderItem ?? slots.get("row") ?? this.templateDefaults.renderItem;
+            if (!this.templateValues.has('renderItem') || this.templateValues.get('renderItem') !== value) {
+                this.setHostProperty('renderItem', this.templateInputs.renderItem.set(value, { "context": ["item", "index"], "implicit": "item", "slot": "row" }));
+                this.templateValues.set('renderItem', value);
+            }
+        }
+        {
+            const value = this.renderDetails ?? slots.get("details") ?? this.templateDefaults.renderDetails;
+            if (!this.templateValues.has('renderDetails') || this.templateValues.get('renderDetails') !== value) {
+                this.setHostProperty('renderDetails', this.templateInputs.renderDetails.set(value, { "context": ["item", "index"], "implicit": "item", "slot": "details" }));
+                this.templateValues.set('renderDetails', value);
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
+            this.changeEvent.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-table-sorted', (event) => {
+            this.luzmoTableSorted.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-table-row-toggle', (event) => {
+            this.luzmoTableRowToggle.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-column-resized', (event) => {
+            this.luzmoColumnResized.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-range-changed', (event) => {
+            this.luzmoRangeChanged.emit(event);
+        }));
+    }
+    /** Moves focus to the grid's current cell. */
+    focus(options) {
+        return this.host.focus(options);
+    }
+    static ɵfac = function LuzmoTable_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTable)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTable, selectors: [["luzmo-table"]], contentQueries: function LuzmoTable_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, LuzmoTemplate, 4);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.projectedTemplates = _t);
+        } }, inputs: { role: "role", density: "density", emphasized: "emphasized", quiet: "quiet", scroller: "scroller", selects: "selects", selected: "selected", selectAllLabel: "selectAllLabel", items: "items", itemValue: "itemValue", itemLabel: "itemLabel", renderItem: "renderItem", expanded: "expanded", renderDetails: "renderDetails", columnWidths: "columnWidths", columns: "columns", virtualized: "virtualized", labels: "labels", size: "size" }, outputs: { changeEvent: "changeEvent", luzmoTableSorted: "luzmo-table-sorted", luzmoTableRowToggle: "luzmo-table-row-toggle", luzmoColumnResized: "luzmo-column-resized", luzmoRangeChanged: "luzmo-range-changed" }, exportAs: ["luzmoTable"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTable_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTable, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-table',
+                exportAs: 'luzmoTable',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { projectedTemplates: [{
+            type: ContentChildren,
+            args: [LuzmoTemplate, { descendants: false }]
+        }], role: [{
+            type: Input,
+            args: [{ alias: 'role' }]
+        }], density: [{
+            type: Input,
+            args: [{ alias: 'density' }]
+        }], emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], quiet: [{
+            type: Input,
+            args: [{ alias: 'quiet' }]
+        }], scroller: [{
+            type: Input,
+            args: [{ alias: 'scroller' }]
+        }], selects: [{
+            type: Input,
+            args: [{ alias: 'selects' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], selectAllLabel: [{
+            type: Input,
+            args: [{ alias: 'selectAllLabel' }]
+        }], items: [{
+            type: Input,
+            args: [{ alias: 'items' }]
+        }], itemValue: [{
+            type: Input,
+            args: [{ alias: 'itemValue' }]
+        }], itemLabel: [{
+            type: Input,
+            args: [{ alias: 'itemLabel' }]
+        }], renderItem: [{
+            type: Input,
+            args: [{ alias: 'renderItem' }]
+        }], expanded: [{
+            type: Input,
+            args: [{ alias: 'expanded' }]
+        }], renderDetails: [{
+            type: Input,
+            args: [{ alias: 'renderDetails' }]
+        }], columnWidths: [{
+            type: Input,
+            args: [{ alias: 'columnWidths' }]
+        }], columns: [{
+            type: Input,
+            args: [{ alias: 'columns' }]
+        }], virtualized: [{
+            type: Input,
+            args: [{ alias: 'virtualized' }]
+        }], labels: [{
+            type: Input,
+            args: [{ alias: 'labels' }]
+        }], size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], luzmoTableSorted: [{ type: i0.Output, args: ["luzmo-table-sorted"] }], luzmoTableRowToggle: [{ type: i0.Output, args: ["luzmo-table-row-toggle"] }], luzmoColumnResized: [{ type: i0.Output, args: ["luzmo-column-resized"] }], luzmoRangeChanged: [{ type: i0.Output, args: ["luzmo-range-changed"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTable, { className: "LuzmoTable", filePath: "components/table.ts", lineNumber: 19 }); })();

package/esm/components/template-input.d.ts

@@ -0,0 +1,11 @@
+import { ApplicationRef } from '@angular/core';
+import { type TemplatePropertyOptions } from '@luzmo/lucero/utils';
+export declare class AngularTemplateInput {
+    private readonly application;
+    private readonly views;
+    private generation;
+    constructor(application: ApplicationRef);
+    set(value: unknown, options: TemplatePropertyOptions): unknown;
+    destroy(): void;
+    private release;
+}

package/esm/components/template-input.js

@@ -0,0 +1,56 @@
+import { TemplateRef } from '@angular/core';
+import { createTemplateRenderer } from '@luzmo/lucero/utils';
+export class AngularTemplateInput {
+    application;
+    views = new Set();
+    generation = 0;
+    constructor(application) {
+        this.application = application;
+    }
+    set(value, options) {
+        this.destroy();
+        if (!(value instanceof TemplateRef))
+            return value;
+        const generation = this.generation;
+        return createTemplateRenderer((args) => {
+            if (generation !== this.generation) {
+                return { nodes: [], update() { }, destroy() { } };
+            }
+            const context = Object.fromEntries(options.context.map((name, index) => [name, args[index]]));
+            context['$implicit'] = context[options.implicit];
+            const view = value.createEmbeddedView(context);
+            this.views.add(view);
+            try {
+                this.application.attachView(view);
+                view.detectChanges();
+            }
+            catch (error) {
+                this.release(view);
+                throw error;
+            }
+            return {
+                nodes: view.rootNodes,
+                update: (next) => {
+                    if (view.destroyed)
+                        return;
+                    for (const [index, name] of options.context.entries())
+                        view.context[name] = next[index];
+                    view.context['$implicit'] = view.context[options.implicit];
+                    view.detectChanges();
+                },
+                destroy: () => this.release(view)
+            };
+        });
+    }
+    destroy() {
+        this.generation++;
+        for (const view of this.views)
+            this.release(view);
+    }
+    release(view) {
+        if (!this.views.delete(view))
+            return;
+        this.application.detachView(view);
+        view.destroy();
+    }
+}

package/esm/components/template.d.ts

@@ -0,0 +1,10 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/** A named template consumed by its direct parent Lucero wrapper. */
+export declare class LuzmoTemplate {
+    luzmoTemplate: string;
+    readonly template: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTemplate, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LuzmoTemplate, "ng-template[luzmoTemplate]", never, { "luzmoTemplate": { "alias": "luzmoTemplate"; "required": true; }; }, {}, never, never, true, never>;
+}
+export declare function collectTemplateSlots(templates: Iterable<LuzmoTemplate>, names: readonly string[]): Map<string, TemplateRef<unknown>>;

package/esm/components/template.js

@@ -0,0 +1,30 @@
+import { Directive, Input, TemplateRef, inject } from '@angular/core';
+import * as i0 from "@angular/core";
+/** A named template consumed by its direct parent Lucero wrapper. */
+export class LuzmoTemplate {
+    luzmoTemplate;
+    template = inject(TemplateRef);
+    static ɵfac = function LuzmoTemplate_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTemplate)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LuzmoTemplate, selectors: [["ng-template", "luzmoTemplate", ""]], inputs: { luzmoTemplate: "luzmoTemplate" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTemplate, [{
+        type: Directive,
+        args: [{ selector: 'ng-template[luzmoTemplate]', standalone: true }]
+    }], null, { luzmoTemplate: [{
+            type: Input,
+            args: [{ required: true }]
+        }] }); })();
+export function collectTemplateSlots(templates, names) {
+    const slots = new Map();
+    for (const directive of templates) {
+        const name = directive.luzmoTemplate;
+        if (!names.includes(name)) {
+            throw new Error(`Unknown Lucero template slot: ${name}. Expected: ${names.join(', ')}.`);
+        }
+        if (slots.has(name)) {
+            throw new Error(`Duplicate Lucero template slot: ${name}.`);
+        }
+        slots.set(name, directive.template);
+    }
+    return slots;
+}

package/esm/index.d.ts

@@ -66,6 +66,15 @@ import { LuzmoSwatchGroup } from './components/swatch-group.js';
 import { LuzmoSwitch } from './components/switch.js';
 import { LuzmoTab } from './components/tab.js';
 import { LuzmoTabPanel } from './components/tab-panel.js';
+import { LuzmoTable } from './components/table.js';
+import { LuzmoTableBody } from './components/table-body.js';
+import { LuzmoTableCell } from './components/table-cell.js';
+import { LuzmoTableCheckboxCell } from './components/table-checkbox-cell.js';
+import { LuzmoTableDisclosureCell } from './components/table-disclosure-cell.js';
+import { LuzmoTableHead } from './components/table-head.js';
+import { LuzmoTableHeadCell } from './components/table-head-cell.js';
+import { LuzmoTableRow } from './components/table-row.js';
+import { LuzmoTableRowDetails } from './components/table-row-details.js';
 import { LuzmoTabs } from './components/tabs.js';
 import { LuzmoTabsOverflow } from './components/tabs-overflow.js';
 import { LuzmoTag } from './components/tag.js';
@@ -143,6 +152,15 @@ export { LuzmoSwatchGroup, type LuzmoSwatchGroupElement } from './components/swa
 export { LuzmoSwitch, type LuzmoSwitchElement } from './components/switch.js';
 export { LuzmoTab, type LuzmoTabElement } from './components/tab.js';
 export { LuzmoTabPanel, type LuzmoTabPanelElement } from './components/tab-panel.js';
+export { LuzmoTable, type LuzmoTableElement } from './components/table.js';
+export { LuzmoTableBody, type LuzmoTableBodyElement } from './components/table-body.js';
+export { LuzmoTableCell, type LuzmoTableCellElement } from './components/table-cell.js';
+export { LuzmoTableCheckboxCell, type LuzmoTableCheckboxCellElement } from './components/table-checkbox-cell.js';
+export { LuzmoTableDisclosureCell, type LuzmoTableDisclosureCellElement } from './components/table-disclosure-cell.js';
+export { LuzmoTableHead, type LuzmoTableHeadElement } from './components/table-head.js';
+export { LuzmoTableHeadCell, type LuzmoTableHeadCellElement } from './components/table-head-cell.js';
+export { LuzmoTableRow, type LuzmoTableRowElement } from './components/table-row.js';
+export { LuzmoTableRowDetails, type LuzmoTableRowDetailsElement } from './components/table-row-details.js';
 export { LuzmoTabs, type LuzmoTabsElement } from './components/tabs.js';
 export { LuzmoTabsOverflow, type LuzmoTabsOverflowElement } from './components/tabs-overflow.js';
 export { LuzmoTag, type LuzmoTagElement } from './components/tag.js';
@@ -152,6 +170,7 @@ export { LuzmoToast, type LuzmoToastElement } from './components/toast.js';
 export { LuzmoTooltip, type LuzmoTooltipElement } from './components/tooltip.js';
 export { LuzmoTopNav, type LuzmoTopNavElement } from './components/top-nav.js';
 export { LuzmoTopNavItem, type LuzmoTopNavItemElement } from './components/top-nav-item.js';
-export declare const LUZMO_ANGULAR_COMPONENTS: readonly [typeof LuzmoAccordion, typeof LuzmoAccordionItem, typeof LuzmoActionBar, typeof LuzmoActionButton, typeof LuzmoActionGroup, typeof LuzmoActionMenu, typeof LuzmoAvatar, typeof LuzmoBadge, typeof LuzmoButton, typeof LuzmoButtonGroup, typeof LuzmoCalendar, typeof LuzmoChatMessage, typeof LuzmoChatMessageGroup, typeof LuzmoCheckbox, typeof LuzmoClearButton, typeof LuzmoCloseButton, typeof LuzmoColorArea, typeof LuzmoColorField, typeof LuzmoColorHandle, typeof LuzmoColorLoupe, typeof LuzmoColorMenu, typeof LuzmoColorPalette, typeof LuzmoColorPaletteGroup, typeof LuzmoColorPicker, typeof LuzmoColorSlider, typeof LuzmoDateRangePicker, typeof LuzmoDateTimePicker, typeof LuzmoDivider, typeof LuzmoFieldGroup, typeof LuzmoFieldLabel, typeof LuzmoHelpText, typeof LuzmoIcon, typeof LuzmoInfieldButton, typeof LuzmoLabel, typeof LuzmoMenu, typeof LuzmoMenuDivider, typeof LuzmoMenuGroup, typeof LuzmoMenuItem, typeof LuzmoMultiLanguageField, typeof LuzmoNotice, typeof LuzmoNumberField, typeof LuzmoOption, typeof LuzmoOptions, typeof LuzmoOptionsDivider, typeof LuzmoOverlay, typeof LuzmoOverlayTrigger, typeof LuzmoPicker, typeof LuzmoPickerButton, typeof LuzmoPopover, typeof LuzmoProgressBar, typeof LuzmoProgressCircle, typeof LuzmoProgressSteps, typeof LuzmoPromptBox, typeof LuzmoQuestionBox, typeof LuzmoRadio, typeof LuzmoRadioGroup, typeof LuzmoSearch, typeof LuzmoSelect, typeof LuzmoSkeletonLoader, typeof LuzmoSlider, typeof LuzmoSliderHandle, typeof LuzmoSplitView, typeof LuzmoStatusLight, typeof LuzmoSwatch, typeof LuzmoSwatchGroup, typeof LuzmoSwitch, typeof LuzmoTab, typeof LuzmoTabPanel, typeof LuzmoTabs, typeof LuzmoTabsOverflow, typeof LuzmoTag, typeof LuzmoTags, typeof LuzmoTextField, typeof LuzmoToast, typeof LuzmoTooltip, typeof LuzmoTopNav, typeof LuzmoTopNavItem];
-export declare const LUZMO_ANGULAR_COMPONENT_NAMES: readonly ["LuzmoAccordion", "LuzmoAccordionItem", "LuzmoActionBar", "LuzmoActionButton", "LuzmoActionGroup", "LuzmoActionMenu", "LuzmoAvatar", "LuzmoBadge", "LuzmoButton", "LuzmoButtonGroup", "LuzmoCalendar", "LuzmoChatMessage", "LuzmoChatMessageGroup", "LuzmoCheckbox", "LuzmoClearButton", "LuzmoCloseButton", "LuzmoColorArea", "LuzmoColorField", "LuzmoColorHandle", "LuzmoColorLoupe", "LuzmoColorMenu", "LuzmoColorPalette", "LuzmoColorPaletteGroup", "LuzmoColorPicker", "LuzmoColorSlider", "LuzmoDateRangePicker", "LuzmoDateTimePicker", "LuzmoDivider", "LuzmoFieldGroup", "LuzmoFieldLabel", "LuzmoHelpText", "LuzmoIcon", "LuzmoInfieldButton", "LuzmoLabel", "LuzmoMenu", "LuzmoMenuDivider", "LuzmoMenuGroup", "LuzmoMenuItem", "LuzmoMultiLanguageField", "LuzmoNotice", "LuzmoNumberField", "LuzmoOption", "LuzmoOptions", "LuzmoOptionsDivider", "LuzmoOverlay", "LuzmoOverlayTrigger", "LuzmoPicker", "LuzmoPickerButton", "LuzmoPopover", "LuzmoProgressBar", "LuzmoProgressCircle", "LuzmoProgressSteps", "LuzmoPromptBox", "LuzmoQuestionBox", "LuzmoRadio", "LuzmoRadioGroup", "LuzmoSearch", "LuzmoSelect", "LuzmoSkeletonLoader", "LuzmoSlider", "LuzmoSliderHandle", "LuzmoSplitView", "LuzmoStatusLight", "LuzmoSwatch", "LuzmoSwatchGroup", "LuzmoSwitch", "LuzmoTab", "LuzmoTabPanel", "LuzmoTabs", "LuzmoTabsOverflow", "LuzmoTag", "LuzmoTags", "LuzmoTextField", "LuzmoToast", "LuzmoTooltip", "LuzmoTopNav", "LuzmoTopNavItem"];
+export { LuzmoTemplate } from './components/template.js';
+export declare const LUZMO_ANGULAR_COMPONENTS: readonly [typeof LuzmoAccordion, typeof LuzmoAccordionItem, typeof LuzmoActionBar, typeof LuzmoActionButton, typeof LuzmoActionGroup, typeof LuzmoActionMenu, typeof LuzmoAvatar, typeof LuzmoBadge, typeof LuzmoButton, typeof LuzmoButtonGroup, typeof LuzmoCalendar, typeof LuzmoChatMessage, typeof LuzmoChatMessageGroup, typeof LuzmoCheckbox, typeof LuzmoClearButton, typeof LuzmoCloseButton, typeof LuzmoColorArea, typeof LuzmoColorField, typeof LuzmoColorHandle, typeof LuzmoColorLoupe, typeof LuzmoColorMenu, typeof LuzmoColorPalette, typeof LuzmoColorPaletteGroup, typeof LuzmoColorPicker, typeof LuzmoColorSlider, typeof LuzmoDateRangePicker, typeof LuzmoDateTimePicker, typeof LuzmoDivider, typeof LuzmoFieldGroup, typeof LuzmoFieldLabel, typeof LuzmoHelpText, typeof LuzmoIcon, typeof LuzmoInfieldButton, typeof LuzmoLabel, typeof LuzmoMenu, typeof LuzmoMenuDivider, typeof LuzmoMenuGroup, typeof LuzmoMenuItem, typeof LuzmoMultiLanguageField, typeof LuzmoNotice, typeof LuzmoNumberField, typeof LuzmoOption, typeof LuzmoOptions, typeof LuzmoOptionsDivider, typeof LuzmoOverlay, typeof LuzmoOverlayTrigger, typeof LuzmoPicker, typeof LuzmoPickerButton, typeof LuzmoPopover, typeof LuzmoProgressBar, typeof LuzmoProgressCircle, typeof LuzmoProgressSteps, typeof LuzmoPromptBox, typeof LuzmoQuestionBox, typeof LuzmoRadio, typeof LuzmoRadioGroup, typeof LuzmoSearch, typeof LuzmoSelect, typeof LuzmoSkeletonLoader, typeof LuzmoSlider, typeof LuzmoSliderHandle, typeof LuzmoSplitView, typeof LuzmoStatusLight, typeof LuzmoSwatch, typeof LuzmoSwatchGroup, typeof LuzmoSwitch, typeof LuzmoTab, typeof LuzmoTabPanel, typeof LuzmoTable, typeof LuzmoTableBody, typeof LuzmoTableCell, typeof LuzmoTableCheckboxCell, typeof LuzmoTableDisclosureCell, typeof LuzmoTableHead, typeof LuzmoTableHeadCell, typeof LuzmoTableRow, typeof LuzmoTableRowDetails, typeof LuzmoTabs, typeof LuzmoTabsOverflow, typeof LuzmoTag, typeof LuzmoTags, typeof LuzmoTextField, typeof LuzmoToast, typeof LuzmoTooltip, typeof LuzmoTopNav, typeof LuzmoTopNavItem];
+export declare const LUZMO_ANGULAR_COMPONENT_NAMES: readonly ["LuzmoAccordion", "LuzmoAccordionItem", "LuzmoActionBar", "LuzmoActionButton", "LuzmoActionGroup", "LuzmoActionMenu", "LuzmoAvatar", "LuzmoBadge", "LuzmoButton", "LuzmoButtonGroup", "LuzmoCalendar", "LuzmoChatMessage", "LuzmoChatMessageGroup", "LuzmoCheckbox", "LuzmoClearButton", "LuzmoCloseButton", "LuzmoColorArea", "LuzmoColorField", "LuzmoColorHandle", "LuzmoColorLoupe", "LuzmoColorMenu", "LuzmoColorPalette", "LuzmoColorPaletteGroup", "LuzmoColorPicker", "LuzmoColorSlider", "LuzmoDateRangePicker", "LuzmoDateTimePicker", "LuzmoDivider", "LuzmoFieldGroup", "LuzmoFieldLabel", "LuzmoHelpText", "LuzmoIcon", "LuzmoInfieldButton", "LuzmoLabel", "LuzmoMenu", "LuzmoMenuDivider", "LuzmoMenuGroup", "LuzmoMenuItem", "LuzmoMultiLanguageField", "LuzmoNotice", "LuzmoNumberField", "LuzmoOption", "LuzmoOptions", "LuzmoOptionsDivider", "LuzmoOverlay", "LuzmoOverlayTrigger", "LuzmoPicker", "LuzmoPickerButton", "LuzmoPopover", "LuzmoProgressBar", "LuzmoProgressCircle", "LuzmoProgressSteps", "LuzmoPromptBox", "LuzmoQuestionBox", "LuzmoRadio", "LuzmoRadioGroup", "LuzmoSearch", "LuzmoSelect", "LuzmoSkeletonLoader", "LuzmoSlider", "LuzmoSliderHandle", "LuzmoSplitView", "LuzmoStatusLight", "LuzmoSwatch", "LuzmoSwatchGroup", "LuzmoSwitch", "LuzmoTab", "LuzmoTabPanel", "LuzmoTable", "LuzmoTableBody", "LuzmoTableCell", "LuzmoTableCheckboxCell", "LuzmoTableDisclosureCell", "LuzmoTableHead", "LuzmoTableHeadCell", "LuzmoTableRow", "LuzmoTableRowDetails", "LuzmoTabs", "LuzmoTabsOverflow", "LuzmoTag", "LuzmoTags", "LuzmoTextField", "LuzmoToast", "LuzmoTooltip", "LuzmoTopNav", "LuzmoTopNavItem"];
 export type LuzmoAngularComponentName = (typeof LUZMO_ANGULAR_COMPONENT_NAMES)[number];