@luzmo/ngx-lucero 2.5.0 → 2.5.1

package/README.md

@@ -86,6 +86,69 @@ Angular 17–19 do not recognize custom elements as anchor-like. On those
 versions, use `routerLink` without a separate `href` for client-side navigation,
 or upgrade to Angular 20+ when native link behavior is required.
 
+## Template inputs
+
+Properties marked with `@templateProperty` accept nested named templates through
+`LuzmoTemplate`. Import both the component and `LuzmoTemplate` into your standalone
+component's `imports` array:
+
+```ts
+import { LuzmoTable, LuzmoTableCell, LuzmoTemplate } from '@luzmo/ngx-lucero';
+```
+
+```html
+<luzmo-table [items]="rows" [columns]="columns">
+  <ng-template luzmoTemplate="row" let-item let-index="index">
+    <luzmo-table-cell>{{ index }}: {{ item.name }}</luzmo-table-cell>
+  </ng-template>
+  <ng-template luzmoTemplate="details" let-item>
+    Details: {{ item.name }}
+  </ng-template>
+</luzmo-table>
+```
+
+The directive must be a direct content child of the wrapper (Angular `@if` and
+`@for` blocks are supported). Templates inside nested components belong to those
+components. Duplicate or unknown slot names throw an error.
+
+Explicit inputs remain supported: `[renderItem]="callbackOrTemplate"` takes
+precedence over the `row` slot. A `null` or `undefined` input falls back to the
+nested template; removing that template restores the component's initial renderer.
+
+The table context exposes `$implicit`/`item` and the source `index`. Angular views
+refresh when their declaring component is checked, including bindings, events and
+control flow. Each mounted Lit render location owns one view. Changing templates,
+removing content or destroying the wrapper releases the affected views. Unchanged
+templates retain their views across Angular checks. Temporary Lit disconnection
+releases views; reconnecting creates them again.
+
+### Declaring a template property
+
+In a web component, replace the renderer's `@property({ attribute: false })`
+with the shared decorator:
+
+```ts
+@templateProperty({ slot: 'row', context: ['item', 'index'], implicit: 'item' })
+public renderItem: ((item: Item, index: number) => unknown) | undefined;
+```
+
+The optional `slot` names the projected template; without it, the property name
+is used. Slot names must be unique within a component.
+
+Import `templateProperty` from the core utilities. Continue calling the renderer
+inside a Lit child expression. The analyzer writes the literal context names and
+implicit argument to the Custom Elements Manifest; the Angular generator uses
+that metadata to produce its input and shared adapter. Neither layer branches on
+a component name. This contract requires the renderer result to reach a Lit child
+expression; it does not apply to callbacks that require a string or a DOM element.
+
+The wrappers generate typed `TemplateRef` inputs but do not generate
+component-specific context guards to infer `let-item` inside an `ng-template`,
+including templates marked with the generic `LuzmoTemplate` directive.
+The existing callback API remains typed. Decorator options must be literal
+`slot`, `context` and `implicit` values so the analyzer can read them without executing
+component code.
+
 ## Notes
 
 - This package depends on `@luzmo/lucero` for the underlying custom elements.

package/esm/components/action-button.d.ts

@@ -18,7 +18,7 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     holdAffordance?: boolean;
     /** Whether the Action Button should show in a quiet state */
     quiet?: boolean;
-    /** The surface treatment for neutral action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
+    /** The surface treatment for neutral and primary action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Primary fill uses primary surface and inverse content colors. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
     treatment?: ActionButtonTreatments;
     /** The role for the Action Button */
     role?: string;
@@ -28,7 +28,7 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     toggles?: boolean;
     /** The static color variant to use for the action button. */
     staticColor?: 'white' | 'black';
-    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
+    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline or filled action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
     variant?: ActionButtonVariants;
     /** The value of the Action Button */
     value?: string;

package/esm/components/action-button.js

@@ -25,7 +25,7 @@ export class LuzmoActionButton {
     holdAffordance;
     /** Whether the Action Button should show in a quiet state */
     quiet;
-    /** The surface treatment for neutral action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
+    /** The surface treatment for neutral and primary action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Primary fill uses primary surface and inverse content colors. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
     treatment;
     /** The role for the Action Button */
     role;
@@ -35,7 +35,7 @@ export class LuzmoActionButton {
     toggles;
     /** The static color variant to use for the action button. */
     staticColor;
-    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
+    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline or filled action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
     variant;
     /** The value of the Action Button */
     value;

package/esm/components/action-menu.d.ts

@@ -1,8 +1,9 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import '@luzmo/lucero/action-menu';
-import type { LuzmoActionMenu as LuzmoActionMenuHostElement } from '@luzmo/lucero/action-menu';
+import type { LuzmoActionMenu as LuzmoActionMenuHostElement, ActionButtonTreatments, ActionButtonVariants } from '@luzmo/lucero/action-menu';
 import * as i0 from "@angular/core";
+export type { ActionButtonTreatments, ActionButtonVariants } from '@luzmo/lucero/action-menu';
 export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor {
     private readonly elementRef;
     private readonly renderer;
@@ -13,6 +14,10 @@ export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor
     get nativeElement(): LuzmoActionMenuHostElement;
     selects?: never | 'single';
     staticColor?: 'white' | 'black';
+    /** The appearance preset for the trigger, independent of the menu variant. When omitted, the trigger uses its neutral variant. */
+    buttonVariant?: ActionButtonVariants;
+    /** The surface treatment for the trigger, including primary filled actions. When omitted, the trigger uses its outline treatment. */
+    buttonTreatment?: ActionButtonTreatments;
     handleSlottableRequest?: unknown;
     managePresenceObservedSlot?: unknown;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
@@ -76,7 +81,7 @@ export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor
     toggle(target?: boolean): void;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionMenu, "luzmo-action-menu", ["luzmoActionMenu"], { "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "handleSlottableRequest": { "alias": "handleSlottableRequest"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appliedLabel": { "alias": "appliedLabel"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "labelAlignment"; "required": false; }; "optionsMenu": { "alias": "optionsMenu"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "dependencyManager": { "alias": "dependencyManager"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "isTouchDevice": { "alias": "isTouchDevice"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "scrollEvent": "scrollEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionMenu, "luzmo-action-menu", ["luzmoActionMenu"], { "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "buttonTreatment": { "alias": "buttonTreatment"; "required": false; }; "handleSlottableRequest": { "alias": "handleSlottableRequest"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appliedLabel": { "alias": "appliedLabel"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "labelAlignment"; "required": false; }; "optionsMenu": { "alias": "optionsMenu"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "dependencyManager": { "alias": "dependencyManager"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "isTouchDevice": { "alias": "isTouchDevice"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "scrollEvent": "scrollEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionMenu */
 export type LuzmoActionMenuElement = LuzmoActionMenuHostElement;

package/esm/components/action-menu.js

@@ -24,6 +24,10 @@ export class LuzmoActionMenu {
     }
     selects;
     staticColor;
+    /** The appearance preset for the trigger, independent of the menu variant. When omitted, the trigger uses its neutral variant. */
+    buttonVariant;
+    /** The surface treatment for the trigger, including primary filled actions. When omitted, the trigger uses its outline treatment. */
+    buttonTreatment;
     handleSlottableRequest;
     managePresenceObservedSlot;
     size;
@@ -82,6 +86,12 @@ export class LuzmoActionMenu {
                 case 'staticColor':
                     this.setHostProperty('staticColor', changes['staticColor'].currentValue);
                     break;
+                case 'buttonVariant':
+                    this.setHostProperty('buttonVariant', changes['buttonVariant'].currentValue);
+                    break;
+                case 'buttonTreatment':
+                    this.setHostProperty('buttonTreatment', changes['buttonTreatment'].currentValue);
+                    break;
                 case 'handleSlottableRequest':
                     this.setHostProperty('handleSlottableRequest', changes['handleSlottableRequest'].currentValue);
                     break;
@@ -249,7 +259,7 @@ export class LuzmoActionMenu {
         return this.host.close();
     }
     static ɵfac = function LuzmoActionMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionMenu)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionMenu, selectors: [["luzmo-action-menu"]], inputs: { selects: "selects", staticColor: "staticColor", handleSlottableRequest: "handleSlottableRequest", managePresenceObservedSlot: "managePresenceObservedSlot", size: "size", appliedLabel: "appliedLabel", button: "button", disabled: "disabled", focused: "focused", icons: "icons", variant: "variant", invalid: "invalid", pending: "pending", pendingLabel: "pendingLabel", label: "label", open: "open", readonly: "readonly", labelAlignment: "labelAlignment", optionsMenu: "optionsMenu", overlayElement: "overlayElement", placement: "placement", quiet: "quiet", value: "value", selectedItem: "selectedItem", dependencyManager: "dependencyManager", isMobile: "isMobile", isTouchDevice: "isTouchDevice", strategy: "strategy", pendingStateController: "pendingStateController", applyFocusElementLabel: "applyFocusElementLabel", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", scrollEvent: "scrollEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoActionMenu"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionMenu, selectors: [["luzmo-action-menu"]], inputs: { selects: "selects", staticColor: "staticColor", buttonVariant: "buttonVariant", buttonTreatment: "buttonTreatment", handleSlottableRequest: "handleSlottableRequest", managePresenceObservedSlot: "managePresenceObservedSlot", size: "size", appliedLabel: "appliedLabel", button: "button", disabled: "disabled", focused: "focused", icons: "icons", variant: "variant", invalid: "invalid", pending: "pending", pendingLabel: "pendingLabel", label: "label", open: "open", readonly: "readonly", labelAlignment: "labelAlignment", optionsMenu: "optionsMenu", overlayElement: "overlayElement", placement: "placement", quiet: "quiet", value: "value", selectedItem: "selectedItem", dependencyManager: "dependencyManager", isMobile: "isMobile", isTouchDevice: "isTouchDevice", strategy: "strategy", pendingStateController: "pendingStateController", applyFocusElementLabel: "applyFocusElementLabel", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", scrollEvent: "scrollEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoActionMenu"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoActionMenu),
@@ -282,6 +292,12 @@ export class LuzmoActionMenu {
         }], staticColor: [{
             type: Input,
             args: [{ alias: 'staticColor' }]
+        }], buttonVariant: [{
+            type: Input,
+            args: [{ alias: 'buttonVariant' }]
+        }], buttonTreatment: [{
+            type: Input,
+            args: [{ alias: 'buttonTreatment' }]
         }], handleSlottableRequest: [{
             type: Input,
             args: [{ alias: 'handleSlottableRequest' }]
@@ -370,4 +386,4 @@ export class LuzmoActionMenu {
             type: Input,
             args: [{ alias: 'tabIndex' }]
         }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], scrollEvent: [{ type: i0.Output, args: ["scrollEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionMenu, { className: "LuzmoActionMenu", filePath: "components/action-menu.ts", lineNumber: 29 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionMenu, { className: "LuzmoActionMenu", filePath: "components/action-menu.ts", lineNumber: 30 }); })();

package/esm/components/progress-steps.d.ts

@@ -19,7 +19,6 @@ export declare class LuzmoProgressSteps implements OnChanges {
     collapsed?: boolean;
     /** 'detailed' (default): the history lists main steps with their substeps - 'compact': the history lists main steps only */
     displayMode?: ProgressStepsDisplayMode;
-    condensed?: boolean;
     /** Visible and announced copy. Partial overrides are merged over the English defaults. `{{count}}` is replaced in the count labels. */
     labels?: Partial<ProgressStepsLabels>;
     /** Disables the shimmer and transitions. */
@@ -42,7 +41,7 @@ export declare class LuzmoProgressSteps implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoProgressSteps, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoProgressSteps, "luzmo-progress-steps", ["luzmoProgressSteps"], { "progress": { "alias": "progress"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "displayMode": { "alias": "displayMode"; "required": false; }; "condensed": { "alias": "condensed"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "noAnimate": { "alias": "noAnimate"; "required": false; }; "open": { "alias": "open"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoStepExpanded": "luzmo-step-expanded"; "luzmoStepCollapsed": "luzmo-step-collapsed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoProgressSteps, "luzmo-progress-steps", ["luzmoProgressSteps"], { "progress": { "alias": "progress"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "displayMode": { "alias": "displayMode"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "noAnimate": { "alias": "noAnimate"; "required": false; }; "open": { "alias": "open"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoStepExpanded": "luzmo-step-expanded"; "luzmoStepCollapsed": "luzmo-step-collapsed"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoProgressSteps */
 export type LuzmoProgressStepsElement = LuzmoProgressStepsHostElement;

package/esm/components/progress-steps.js

@@ -23,7 +23,6 @@ export class LuzmoProgressSteps {
     collapsed;
     /** 'detailed' (default): the history lists main steps with their substeps - 'compact': the history lists main steps only */
     displayMode;
-    condensed;
     /** Visible and announced copy. Partial overrides are merged over the English defaults. `{{count}}` is replaced in the count labels. */
     labels;
     /** Disables the shimmer and transitions. */
@@ -58,9 +57,6 @@ export class LuzmoProgressSteps {
                 case 'displayMode':
                     this.setHostProperty('displayMode', changes['displayMode'].currentValue);
                     break;
-                case 'condensed':
-                    this.setHostProperty('condensed', changes['condensed'].currentValue);
-                    break;
                 case 'labels':
                     this.setHostProperty('labels', changes['labels'].currentValue);
                     break;
@@ -96,7 +92,7 @@ export class LuzmoProgressSteps {
         }));
     }
     static ɵfac = function LuzmoProgressSteps_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoProgressSteps)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoProgressSteps, selectors: [["luzmo-progress-steps"]], inputs: { progress: "progress", locale: "locale", collapsed: "collapsed", displayMode: "displayMode", condensed: "condensed", labels: "labels", noAnimate: "noAnimate", open: "open", size: "size" }, outputs: { luzmoStepExpanded: "luzmo-step-expanded", luzmoStepCollapsed: "luzmo-step-collapsed" }, exportAs: ["luzmoProgressSteps"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoProgressSteps_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoProgressSteps, selectors: [["luzmo-progress-steps"]], inputs: { progress: "progress", locale: "locale", collapsed: "collapsed", displayMode: "displayMode", labels: "labels", noAnimate: "noAnimate", open: "open", size: "size" }, outputs: { luzmoStepExpanded: "luzmo-step-expanded", luzmoStepCollapsed: "luzmo-step-collapsed" }, exportAs: ["luzmoProgressSteps"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoProgressSteps_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -122,9 +118,6 @@ export class LuzmoProgressSteps {
         }], displayMode: [{
             type: Input,
             args: [{ alias: 'displayMode' }]
-        }], condensed: [{
-            type: Input,
-            args: [{ alias: 'condensed' }]
         }], labels: [{
             type: Input,
             args: [{ alias: 'labels' }]

package/esm/components/table.d.ts

@@ -1,4 +1,4 @@
-import { OnChanges, SimpleChanges } from '@angular/core';
+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";
@@ -8,6 +8,10 @@ export declare class LuzmoTable implements OnChanges {
     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;
@@ -32,11 +36,19 @@ export declare class LuzmoTable implements OnChanges {
     /** 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?: unknown;
+    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?: unknown;
+    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. */
@@ -58,6 +70,8 @@ export declare class LuzmoTable implements OnChanges {
     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).
@@ -69,7 +83,7 @@ export declare class LuzmoTable implements OnChanges {
     /** 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"; }, never, ["*"], true, 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

@@ -1,5 +1,7 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+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 = ["*"];
 /**
@@ -13,6 +15,16 @@ export class LuzmoTable {
     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;
@@ -66,6 +78,8 @@ export class LuzmoTable {
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
+            for (const input of Object.values(this.templateInputs))
+                input.destroy();
             for (const cleanup of this.listenerCleanup) {
                 cleanup();
             }
@@ -107,15 +121,9 @@ export class LuzmoTable {
                 case 'itemLabel':
                     this.setHostProperty('itemLabel', changes['itemLabel'].currentValue);
                     break;
-                case 'renderItem':
-                    this.setHostProperty('renderItem', changes['renderItem'].currentValue);
-                    break;
                 case 'expanded':
                     this.setHostProperty('expanded', changes['expanded'].currentValue);
                     break;
-                case 'renderDetails':
-                    this.setHostProperty('renderDetails', changes['renderDetails'].currentValue);
-                    break;
                 case 'columnWidths':
                     this.setHostProperty('columnWidths', changes['columnWidths'].currentValue);
                     break;
@@ -135,6 +143,27 @@ export class LuzmoTable {
                     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
@@ -167,7 +196,12 @@ export class LuzmoTable {
         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"]], 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) {
+    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 });
@@ -181,7 +215,10 @@ export class LuzmoTable {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: '<ng-content />'
             }]
-    }], () => [], { role: [{
+    }], () => [], { projectedTemplates: [{
+            type: ContentChildren,
+            args: [LuzmoTemplate, { descendants: false }]
+        }], role: [{
             type: Input,
             args: [{ alias: 'role' }]
         }], density: [{
@@ -239,4 +276,4 @@ export class LuzmoTable {
             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: 17 }); })();
+(() => { (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

@@ -170,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 { 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];

package/esm/index.js

@@ -171,6 +171,7 @@ export { LuzmoToast } from './components/toast.js';
 export { LuzmoTooltip } from './components/tooltip.js';
 export { LuzmoTopNav } from './components/top-nav.js';
 export { LuzmoTopNavItem } from './components/top-nav-item.js';
+export { LuzmoTemplate } from './components/template.js';
 export const LUZMO_ANGULAR_COMPONENTS = [
     LuzmoAccordion,
     LuzmoAccordionItem,

package/package.json

@@ -29,9 +29,9 @@
   "peerDependencies": {
     "@angular/core": "^17.3.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
     "@angular/forms": "^17.3.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
-    "@luzmo/lucero": "2.5.0"
+    "@luzmo/lucero": "2.5.1"
   },
-  "version": "2.5.0",
+  "version": "2.5.1",
   "peerDependenciesMeta": {
     "@angular/forms": {
       "optional": true