@luzmo/ngx-lucero 2.3.0-beta.0 → 2.4.0

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

@@ -1,8 +1,8 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/lucero/progress-steps';
-import type { LuzmoProgressSteps as LuzmoProgressStepsHostElement, ProgressStepsLabels, ProgressTreeNode } from '@luzmo/lucero/progress-steps';
+import type { LuzmoProgressSteps as LuzmoProgressStepsHostElement, ProgressStepsDisplayMode, ProgressStepsLabels, ProgressTreeNode } from '@luzmo/lucero/progress-steps';
 import * as i0 from "@angular/core";
-export type { LocalizedString, ProgressStepsLabels, ProgressStepsStatuses, ProgressTreeNode, ProgressTreeNodeDescriptionMetadata } from '@luzmo/lucero/progress-steps';
+export type { LocalizedString, ProgressStepsDisplayMode, ProgressStepsLabels, ProgressStepsStatuses, ProgressStepsToggleDetail, ProgressTreeNode, ProgressTreeNodeDescriptionMetadata } from '@luzmo/lucero/progress-steps';
 export declare class LuzmoProgressSteps implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -11,25 +11,26 @@ export declare class LuzmoProgressSteps implements OnChanges {
     private readonly listenerCleanup;
     /** The underlying custom element instance. Use to call imperative methods. */
     get nativeElement(): LuzmoProgressStepsHostElement;
-    /** The progress tree from the backend. The root node's children are rendered as main steps. */
+    /** The progress tree. The root's children are the main steps. Replace the whole tree on every update; keep the root `id` for the same run. */
     progress?: ProgressTreeNode | null;
-    /** Locale for resolving localized strings in description metadata. Defaults to 'en'. */
+    /** Locale for resolving localized strings in description metadata. */
     locale?: string;
-    /** When true, collapses all auto-expanded steps. Manually expanded steps remain open. */
+    /** Signals that the run has finished. The summary line then settles as soon as no step is running, instead of after a short quiet period. */
     collapsed?: boolean;
-    /** Display mode for the progress steps. - 'detailed' (default): Shows full descriptions and substeps with expand/collapse - 'compact': Shows only step names without substeps or expand/collapse */
-    displayMode?: ('detailed' | 'compact');
-    /** When true, hides all steps behind a single "{n} steps completed" toggle line. Clicking the toggle expands/collapses the full step list. */
+    /** 'detailed' (default): the history lists main steps with their substeps - 'compact': the history lists main steps only */
+    displayMode?: ProgressStepsDisplayMode;
     condensed?: boolean;
-    /** Labels used for visible text and screen readers. The default values are in English and can be overridden to localize the content. Use `{{count}}` in `stepCompleted` / `stepsCompleted` as a placeholder for the step count. */
-    labels?: ProgressStepsLabels;
-    /** When true, disables all entry animations (stepFadeIn, substepFadeIn). */
+    /** 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. */
     noAnimate?: boolean;
+    /** Whether the step history is shown. Closes when a run with another root `id` starts. */
+    open?: boolean;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
-    /** Fired when a step is collapsed */
-    readonly luzmoStepCollapsed: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
-    /** Fired when a step is expanded */
+    /** The user opened the step history. `detail.nodeId` is the progress root id. */
     readonly luzmoStepExpanded: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** The user closed the step history. `detail.nodeId` is the progress root id. */
+    readonly luzmoStepCollapsed: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -41,7 +42,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; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoStepCollapsed": "luzmo-step-collapsed"; "luzmoStepExpanded": "luzmo-step-expanded"; }, 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; }; "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>;
 }
 /** The underlying custom element type for LuzmoProgressSteps */
 export type LuzmoProgressStepsElement = LuzmoProgressStepsHostElement;

package/esm/components/progress-steps.js

@@ -15,25 +15,26 @@ export class LuzmoProgressSteps {
     get nativeElement() {
         return this.host;
     }
-    /** The progress tree from the backend. The root node's children are rendered as main steps. */
+    /** The progress tree. The root's children are the main steps. Replace the whole tree on every update; keep the root `id` for the same run. */
     progress;
-    /** Locale for resolving localized strings in description metadata. Defaults to 'en'. */
+    /** Locale for resolving localized strings in description metadata. */
     locale;
-    /** When true, collapses all auto-expanded steps. Manually expanded steps remain open. */
+    /** Signals that the run has finished. The summary line then settles as soon as no step is running, instead of after a short quiet period. */
     collapsed;
-    /** Display mode for the progress steps. - 'detailed' (default): Shows full descriptions and substeps with expand/collapse - 'compact': Shows only step names without substeps or expand/collapse */
+    /** 'detailed' (default): the history lists main steps with their substeps - 'compact': the history lists main steps only */
     displayMode;
-    /** When true, hides all steps behind a single "{n} steps completed" toggle line. Clicking the toggle expands/collapses the full step list. */
     condensed;
-    /** Labels used for visible text and screen readers. The default values are in English and can be overridden to localize the content. Use `{{count}}` in `stepCompleted` / `stepsCompleted` as a placeholder for the step count. */
+    /** Visible and announced copy. Partial overrides are merged over the English defaults. `{{count}}` is replaced in the count labels. */
     labels;
-    /** When true, disables all entry animations (stepFadeIn, substepFadeIn). */
+    /** Disables the shimmer and transitions. */
     noAnimate;
+    /** Whether the step history is shown. Closes when a run with another root `id` starts. */
+    open;
     size;
-    /** Fired when a step is collapsed */
-    luzmoStepCollapsed = output({ alias: 'luzmo-step-collapsed' });
-    /** Fired when a step is expanded */
+    /** The user opened the step history. `detail.nodeId` is the progress root id. */
     luzmoStepExpanded = output({ alias: 'luzmo-step-expanded' });
+    /** The user closed the step history. `detail.nodeId` is the progress root id. */
+    luzmoStepCollapsed = output({ alias: 'luzmo-step-collapsed' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -66,6 +67,9 @@ export class LuzmoProgressSteps {
                 case 'noAnimate':
                     this.setHostProperty('noAnimate', changes['noAnimate'].currentValue);
                     break;
+                case 'open':
+                    this.setHostProperty('open', changes['open'].currentValue);
+                    break;
                 case 'size':
                     this.setHostProperty('size', changes['size'].currentValue);
                     break;
@@ -84,15 +88,15 @@ export class LuzmoProgressSteps {
         this.renderer.setProperty(this.host, key, value);
     }
     bindEvents() {
-        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-step-collapsed', (event) => {
-            this.luzmoStepCollapsed.emit(event);
-        }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-step-expanded', (event) => {
             this.luzmoStepExpanded.emit(event);
         }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-step-collapsed', (event) => {
+            this.luzmoStepCollapsed.emit(event);
+        }));
     }
     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", size: "size" }, outputs: { luzmoStepCollapsed: "luzmo-step-collapsed", luzmoStepExpanded: "luzmo-step-expanded" }, 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", 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) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -127,8 +131,11 @@ export class LuzmoProgressSteps {
         }], noAnimate: [{
             type: Input,
             args: [{ alias: 'noAnimate' }]
+        }], open: [{
+            type: Input,
+            args: [{ alias: 'open' }]
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], luzmoStepCollapsed: [{ type: i0.Output, args: ["luzmo-step-collapsed"] }], luzmoStepExpanded: [{ type: i0.Output, args: ["luzmo-step-expanded"] }] }); })();
+        }], luzmoStepExpanded: [{ type: i0.Output, args: ["luzmo-step-expanded"] }], luzmoStepCollapsed: [{ type: i0.Output, args: ["luzmo-step-collapsed"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoProgressSteps, { className: "LuzmoProgressSteps", filePath: "components/progress-steps.ts", lineNumber: 16 }); })();

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.3.0-beta.0"
+    "@luzmo/lucero": "2.4.0"
   },
-  "version": "2.3.0-beta.0",
+  "version": "2.4.0",
   "peerDependenciesMeta": {
     "@angular/forms": {
       "optional": true