@ebrains/components 2.3.1 → 2.4.1

package/dist/collection/components/eds-steps/eds-steps.js

@@ -3,47 +3,63 @@ import { parseData } from "../../utils/sharedUtils";
 export class EdsSteps {
     constructor() {
         this.handleTitleClick = (index) => {
-            // 1) If clicking the current title, keep your existing toggle behavior
-            if (index === this.activeStep) {
-                this.activeStep = this.activeStep === index ? -1 : index;
+            // In linear mode, do NOT collapse; only navigate if allowed.
+            if (this.type === 'linear') {
+                // prevent jumping forward over disabled steps
+                if (index > this.activeStep) {
+                    for (let i = this.activeStep; i < index; i++) {
+                        if (this.isStepDisabled(i)) {
+                            return;
+                        }
+                    }
+                }
+                this.activeStep = index;
                 this.step.emit(this.activeStep);
                 return;
             }
-            // 2) In linear mode, block jumping *forward* when current step is gated
-            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledFor(this.activeStep);
-            if (forwardBlocked) {
+            // Non-linear vertical mode: support optional collapse/expand on current title
+            if (this.orientation === 'vertical' && index === this.activeStep && this.collapsibleTitles) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
                 return;
-            } // do nothing when Next/Finish would be disabled
-            // 3) Allow jumping back or forward when not gated
+            }
+            // Otherwise, just set
             this.activeStep = index;
             this.step.emit(this.activeStep);
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
+            // On last step
             if (this.activeStep >= lastIndex) {
-                this.activeStep = -1;
                 this.finished.emit();
+                this.activeStep = -1; // collapse the content
+                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
             this.next.emit(target);
-            if (this.isNextDisabledFor(this.activeStep)) {
+            if (this.isStepDisabled(this.activeStep)) {
                 return;
-            } // block advance only if current is disabled
+            }
             this.activeStep = target;
             this.step.emit(this.activeStep);
-            // 2) if using the boolean form, clear it when moving away from a step
             if (!Array.isArray(this.disableNext)) {
                 this.disableNext = false;
             }
         };
         this.handleBack = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            // If somehow collapsed, recover to last visible step first
+            if (this.activeStep < 0) {
+                this.activeStep = lastIndex;
+                this.step.emit(this.activeStep);
+                return;
+            }
             if (this.activeStep > 0) {
                 const target = this.activeStep - 1;
                 this.back.emit(target);
                 this.activeStep = target;
                 this.step.emit(this.activeStep);
-                // also clear boolean form on back
                 if (!Array.isArray(this.disableNext)) {
                     this.disableNext = false;
                 }
@@ -51,52 +67,91 @@ export class EdsSteps {
         };
         this.steps = [];
         this.type = 'static';
+        this.orientation = 'vertical';
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
         this.disableNext = false;
         this.headingLevel = 'h4';
+        this.collapsibleTitles = false;
         this.activeStep = 0;
     }
+    handleDisableNextChange(newValue) {
+        if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
+            try {
+                this.disableNext = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Failed to parse disable-next array:', e);
+            }
+        }
+    }
+    componentWillLoad() {
+        this.handleDisableNextChange(this.disableNext);
+    }
     componentDidLoad() {
-        var _a;
         if (this.type === 'linear') {
-            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
+            const root = this.el.shadowRoot || this.el;
+            const btns = root.querySelectorAll('eds-button');
             btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
+        // Clamp to valid range or collapsed sentinel
+        const max = Math.max(0, this.parsedSteps.length - 1);
+        if (newValue > max) {
+            this.activeStep = max;
+            return;
+        }
+        if (newValue < -1) {
+            this.activeStep = -1;
+            return;
+        }
+        // If collapsed (only possible in non-linear mode), do not emit context
+        if (newValue < 0) {
+            return;
+        }
         setTimeout(() => {
-            var _a;
-            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
-            if (activeStepContainer) {
-                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
-            }
+            const root = this.el.shadowRoot || this.el;
+            const all = root.querySelectorAll('.step');
+            const active = all && newValue < all.length ? all[newValue] : undefined;
+            active === null || active === void 0 ? void 0 : active.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
         }, 50);
     }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: this.activeStep
-            }
+            detail: { componentName: this.el.tagName.toLowerCase(), identifier: this.activeStep },
+            bubbles: true,
+            composed: true
         });
         linkElement.dispatchEvent(event);
     }
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isStepDisabled(index) {
+        if (Array.isArray(this.disableNext)) {
+            return index < this.disableNext.length ? !!this.disableNext[index] : false;
+        }
+        return index === this.activeStep && !!this.disableNext;
+    }
     isNextDisabledFor(index) {
-        return Array.isArray(this.disableNext)
-            ? !!this.disableNext[index] // per-step
-            : index === this.activeStep && !!this.disableNext; // only active step
+        return this.isStepDisabled(index);
     }
     /** Render the semantic heading element as a clickable control only in linear mode */
     renderHeading(title, index) {
         const Tag = this.headingLevel;
         const isOpen = this.activeStep === index;
         if (this.type === 'linear') {
-            const forwardBlocked = index > this.activeStep && this.isNextDisabledFor(this.activeStep);
+            let forwardBlocked = false;
+            if (index > this.activeStep) {
+                for (let i = this.activeStep; i < index; i++) {
+                    if (this.isStepDisabled(i)) {
+                        forwardBlocked = true;
+                        break;
+                    }
+                }
+            }
             const onKey = (e) => {
                 if (forwardBlocked) {
                     return;
@@ -108,18 +163,55 @@ export class EdsSteps {
             };
             return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
         }
-        return h(Tag, null, title);
+        return (h(Tag, { class: `eds-steps__title ${this.collapsibleTitles && index !== this.activeStep ? '' : ''}`, onClick: () => this.handleTitleClick(index) }, title));
+    }
+    /** Render horizontal step indicator */
+    renderHorizontalIndicator(step, index) {
+        const isActive = this.activeStep === index;
+        const isCompleted = this.activeStep > index;
+        let forwardBlocked = false;
+        if (index > this.activeStep) {
+            for (let i = this.activeStep; i < index; i++) {
+                if (this.isStepDisabled(i)) {
+                    forwardBlocked = true;
+                    break;
+                }
+            }
+        }
+        const onKey = (e) => {
+            if (forwardBlocked) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleTitleClick(index);
+            }
+        };
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
+        // Horizontal Linear
+        if (this.type === 'linear' && this.orientation === 'horizontal') {
+            return (h("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+                if (this.activeStep !== index) {
+                    return null;
+                }
+                const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })));
+            })));
+        }
+        // Vertical Linear
         if (this.type === 'linear') {
             return (h("div", { class: "steps" }, steps.map((step, index) => {
                 const isLast = index === steps.length - 1;
-                return (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: isLast ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center mt-16" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: "ml-8" })), h("slot", { name: `actions-${index}` })))));
+                const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })))));
             })));
         }
-        // Static: no navigation buttons
-        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
+        // Static
+        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }))))))));
     }
     static get is() { return "eds-steps"; }
     static get encapsulation() { return "shadow"; }
@@ -152,11 +244,8 @@ export class EdsSteps {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "[]"
-                        }],
-                    "text": "Steps data as an **array** or **JSON string** of objects:\n`{ title: string; content?: string }`.\n\nIn static mode, all steps and their content render.\nIn linear mode, only the active step renders its content."
+                    "tags": [],
+                    "text": "Steps data as array or JSON string."
                 },
                 "attribute": "steps",
                 "reflect": false,
@@ -173,16 +262,31 @@ export class EdsSteps {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"static\""
-                        }],
-                    "text": "Stepper mode.\n- `static`: all steps are visible (no navigation controls)\n- `linear`: one step at a time with Back/Next/Finish controls"
+                    "tags": [],
+                    "text": "Stepper mode."
                 },
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'static'"
             },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation (applies to linear mode visuals)."
+                },
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
             "nextLabel": {
                 "type": "string",
                 "mutable": false,
@@ -194,14 +298,8 @@ export class EdsSteps {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"Next\""
-                        }, {
-                            "name": "attr",
-                            "text": "next-label"
-                        }],
-                    "text": "Label for the **Next** button (linear mode)."
+                    "tags": [],
+                    "text": "Labels"
                 },
                 "attribute": "next-label",
                 "reflect": false,
@@ -218,14 +316,8 @@ export class EdsSteps {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"Back\""
-                        }, {
-                            "name": "attr",
-                            "text": "back-label"
-                        }],
-                    "text": "Label for the **Back** button (linear mode)."
+                    "tags": [],
+                    "text": ""
                 },
                 "attribute": "back-label",
                 "reflect": false,
@@ -242,38 +334,29 @@ export class EdsSteps {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"Finish\""
-                        }, {
-                            "name": "attr",
-                            "text": "finish-label"
-                        }],
-                    "text": "Label for the **Finish** button on the **last step** (linear mode)."
+                    "tags": [],
+                    "text": ""
                 },
                 "attribute": "finish-label",
                 "reflect": false,
                 "defaultValue": "'Finish'"
             },
             "disableNext": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean | boolean[]",
-                    "resolved": "boolean | boolean[]",
+                    "original": "boolean | boolean[] | string",
+                    "resolved": "boolean | boolean[] | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }, {
                             "name": "attr",
                             "text": "disable-next"
                         }],
-                    "text": "If `true`, disables **Next/Finish** and prevents advancing.\nUseful for gating progression until validation passes."
+                    "text": "Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string."
                 },
                 "attribute": "disable-next",
                 "reflect": false,
@@ -290,18 +373,30 @@ export class EdsSteps {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"h4\""
-                        }, {
-                            "name": "attr",
-                            "text": "heading-level"
-                        }],
-                    "text": "Semantic heading tag used for each step title.\nAccepted values: `\"h3\" | \"h4\" | \"h5\"`."
+                    "tags": [],
+                    "text": "Heading level for step titles."
                 },
                 "attribute": "heading-level",
                 "reflect": true,
                 "defaultValue": "'h4'"
+            },
+            "collapsibleTitles": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow collapsing the active title (accordion-like) in **non-linear** vertical mode.\nIgnored in linear mode to prevent content hiding."
+                },
+                "attribute": "collapsible-titles",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -318,11 +413,8 @@ export class EdsSteps {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "event",
-                            "text": "step"
-                        }],
-                    "text": "Fired whenever the active step changes.\nPayload: the **current step index**."
+                    "tags": [],
+                    "text": ""
                 },
                 "complexType": {
                     "original": "number",
@@ -336,11 +428,8 @@ export class EdsSteps {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "event",
-                            "text": "finished"
-                        }],
-                    "text": "Fired when the user clicks **Finish** on the **last** step."
+                    "tags": [],
+                    "text": ""
                 },
                 "complexType": {
                     "original": "void",
@@ -354,11 +443,8 @@ export class EdsSteps {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "event",
-                            "text": "next"
-                        }],
-                    "text": "Fired when the user clicks **Next** (before advancing),\nwith the **target** step index (current + 1)."
+                    "tags": [],
+                    "text": ""
                 },
                 "complexType": {
                     "original": "number",
@@ -372,11 +458,8 @@ export class EdsSteps {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "event",
-                            "text": "back"
-                        }],
-                    "text": "Fired when the user clicks **Back** (before going back),\nwith the **target** step index (current - 1)."
+                    "tags": [],
+                    "text": ""
                 },
                 "complexType": {
                     "original": "number",
@@ -388,6 +471,9 @@ export class EdsSteps {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disableNext",
+                "methodName": "handleDisableNextChange"
+            }, {
                 "propName": "activeStep",
                 "methodName": "activeStepChanged"
             }];

package/dist/collection/components/eds-steps/eds-steps.stories.js

@@ -11,6 +11,11 @@ export default {
             },
             description: 'The type of stepper: "static" shows all steps simultaneously, while "linear" shows one step at a time with navigation controls.'
         },
+        orientation: {
+            control: { type: 'select' },
+            options: ['vertical', 'horizontal'],
+            description: 'Stepper orientation (applies to **linear** mode only). "vertical" stacks steps; "horizontal" shows numbered indicators above content.'
+        },
         steps: {
             control: { type: 'object' },
             description: 'An array of step objects. Each object should include a "title" and an optional "content" property.'
@@ -40,6 +45,7 @@ export default {
     },
     args: {
         type: 'static',
+        orientation: 'vertical',
         steps: [
             { title: 'Introduction', content: 'Begin by familiarizing yourself with the overall process.' },
             { title: 'Process Overview', content: 'Review the detailed steps and understand the workflow.' },
@@ -53,7 +59,9 @@ export default {
     }
 };
 const renderSteps = (args) => {
-    const disableAttr = args.disableNext ? ' disable-next' : '';
+    const disableAttr = typeof args.disableNext === 'boolean' && args.disableNext ? ' disable-next' : '';
+    // orientation only matters in linear mode
+    const orientationAttr = args.type === 'linear' && args.orientation ? ` orientation="${args.orientation}"` : '';
     return `
     <eds-steps
       type="${args.type}"
@@ -61,7 +69,7 @@ const renderSteps = (args) => {
       heading-level="${args.headingLevel}"
       next-label="${args.nextLabel}"
       back-label="${args.backLabel}"
-      finish-label="${args.finishLabel}"${disableAttr}
+      finish-label="${args.finishLabel}"${disableAttr}${orientationAttr}
     ></eds-steps>
   `;
 };
@@ -70,13 +78,22 @@ export const Default = {
 };
 export const Linear = {
     args: {
-        type: 'linear'
+        type: 'linear',
+        orientation: 'vertical'
+    },
+    render: (args) => renderSteps(args)
+};
+export const LinearHorizontal = {
+    args: {
+        type: 'linear',
+        orientation: 'horizontal'
     },
     render: (args) => renderSteps(args)
 };
 export const LinearBlocked = {
     args: {
         type: 'linear',
+        orientation: 'vertical',
         disableNext: true
     },
     render: (args) => renderSteps(args)
@@ -84,6 +101,7 @@ export const LinearBlocked = {
 export const CustomLabels = {
     args: {
         type: 'linear',
+        orientation: 'vertical',
         nextLabel: 'Continue',
         backLabel: 'Previous',
         finishLabel: 'Create form'