@ebrains/components 0.7.0-alpha.0 → 0.8.0-alpha.0

package/dist/collection/components/eds-steps/eds-vertical-stepper.css

@@ -1,78 +0,0 @@
-:host {
-    display: block;
-  }
-  
-  .stepper-container {
-    /*max-width: 400px;*/
-    margin: 0 auto;
-  }
-  
-  .stepper {
-    position: sticky;
-    margin-left: 16px;
-    margin-bottom: 12px;
-    border-left: 1px solid var(--soft-color, #ddd); /* replace var() with your color if needed */
-    padding-left: 24px;
-    counter-reset: step;
-  }
-  
-  .step {
-    margin-bottom: 24px;
-  }
-  
-  .step-label {
-    counter-increment: step;
-    /* Example font style; adjust to your design */
-    font-size: 1.25rem;
-    font-weight: 600;
-    position: relative;
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-  
-  /* Numbering similar to CSS counters */
-  .step-label::before {
-    content: counter(step);
-    position: absolute;
-    left: -40px;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    font-size: 1rem;
-    border: 1px solid #ccc; /* adjust border style as needed */
-    background:var(--grey-900); /* adjust background color as needed */
-    color: #fff;      /* adjust text color as needed */
-    border-radius: 50%;
-  }
-  
-  .optional {
-    font-size: 0.8rem;
-    color: #888;
-    margin-left: 8px;
-  }
-  
-  .step-content {
-    /*margin-left: 16px;*/
-    margin-top: 8px;
-  }
-  
-  .step-buttons {
-    margin-top: 12px;
-  }
-  
-  .step-buttons button {
-    margin-right: 8px;
-    padding: 6px 12px;
-    font-size: 0.875rem;
-  }
-  
-  .completed {
-    padding: 16px;
-    border: 1px solid #ddd;
-    margin-top: 16px;
-    text-align: center;
-  }
-  

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

@@ -1,72 +0,0 @@
-import { h } from "@stencil/core";
-export class EdsVerticalStepper {
-    constructor() {
-        this.handleNext = () => {
-            if (this.activeStep < this.parsedSteps.length) {
-                this.activeStep = this.activeStep + 1;
-            }
-        };
-        this.handleBack = () => {
-            if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
-            }
-        };
-        this.handleReset = () => {
-            this.activeStep = 0;
-        };
-        this.steps = '[]';
-        this.activeStep = 0;
-    }
-    get parsedSteps() {
-        try {
-            return JSON.parse(this.steps);
-        }
-        catch (error) {
-            //console.error('Invalid steps JSON', error);
-            return [];
-        }
-    }
-    render() {
-        const steps = this.parsedSteps;
-        return (h("div", { key: '89344ad340f9eb8d20f463d3990ec4832cbdc900', class: "stepper-container" }, h("div", { key: 'da8d7fae2b30cfc93d04d5d8c3a61d95ccf91383', class: "stepper" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("div", { class: "step-label" }, h("span", null, step.label), index === steps.length - 1 && h("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index && (h("div", { class: "step-content" }, h("p", null, step.description), h("div", { class: "step-buttons" }, h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))), this.activeStep === steps.length && (h("div", { key: '1e3272723281d9a10603b4d1e79badfdd6591cc5', class: "" }, h("eds-alert", { key: '7cc81e7e7097891364ff9894d383fd7bb9f7fce4', intent: "success", message: "All steps completed - you're finished!" }), h("eds-button", { key: 'a4d68698fa7831c7e2b6afae435979ccac46a726', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
-    }
-    static get is() { return "eds-vertical-stepper"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-vertical-stepper.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-vertical-stepper.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "steps": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "JSON string containing an array of steps.\nExample:\n'[\n  { \"label\": \"Select campaign settings\", \"description\": \"For each ad campaign...\" },\n  { \"label\": \"Create an ad group\", \"description\": \"An ad group contains one or more ads...\" },\n  { \"label\": \"Create an ad\", \"description\": \"Try out different ad text...\" }\n]'"
-                },
-                "attribute": "steps",
-                "reflect": false,
-                "defaultValue": "'[]'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "activeStep": {}
-        };
-    }
-}