@ebrains/components 2.3.0 → 2.4.0

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

@@ -0,0 +1,481 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+export class EdsSteps {
+    constructor() {
+        this.handleTitleClick = (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;
+            }
+            // 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;
+            }
+            // 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.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.isStepDisabled(this.activeStep)) {
+                return;
+            }
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            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);
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
+            }
+        };
+        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() {
+        if (this.type === 'linear') {
+            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(() => {
+            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 },
+            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 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') {
+            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(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, { 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;
+                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
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-steps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Step[]",
+                    "resolved": "Step[] | string",
+                    "references": {
+                        "Step": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-steps/eds-steps.tsx",
+                            "id": "../../../packages/components/src/components/eds-steps/eds-steps.tsx::Step"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Steps data as array or JSON string."
+                },
+                "attribute": "steps",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'static' | 'linear'",
+                    "resolved": "\"linear\" | \"static\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Labels"
+                },
+                "attribute": "next-label",
+                "reflect": false,
+                "defaultValue": "'Next'"
+            },
+            "backLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "back-label",
+                "reflect": false,
+                "defaultValue": "'Back'"
+            },
+            "finishLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "finish-label",
+                "reflect": false,
+                "defaultValue": "'Finish'"
+            },
+            "disableNext": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean | boolean[] | string",
+                    "resolved": "boolean | boolean[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "attr",
+                            "text": "disable-next"
+                        }],
+                    "text": "Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string."
+                },
+                "attribute": "disable-next",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h3' | 'h4' | 'h5'",
+                    "resolved": "\"h3\" | \"h4\" | \"h5\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeStep": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "step",
+                "name": "step",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "finished",
+                "name": "finished",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "next",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "back",
+                "name": "back",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disableNext",
+                "methodName": "handleDisableNextChange"
+            }, {
+                "propName": "activeStep",
+                "methodName": "activeStepChanged"
+            }];
+    }
+}

package/dist/collection/{shared-ui → components}/eds-steps/eds-steps.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared Ui/Steps',
+    title: 'Components/Steps',
     component: 'eds-steps',
     argTypes: {
         type: {
@@ -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'