@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/{esm/eds-steps.entry.js → components/eds-steps2.js}

@@ -1,12 +1,16 @@
-import { r as registerInstance, c as createEvent, h } from './index-8a71b9a7.js';
-import { p as parseData } from './sharedUtils-a550989c.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
+import { d as defineCustomElement$2 } from './eds-button2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
 const EdsStepsStyle0 = edsStepsCss;
 
-const EdsSteps = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.step = createEvent(this, "step", 7);
         this.handleNext = () => {
             this.activeStep = this.activeStep + 1;
@@ -24,6 +28,46 @@ const EdsSteps = class {
         this.type = 'static';
         this.activeStep = 0;
     }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        var _a;
+        if (this.type === 'linear') {
+            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
+                this.emitContext(btn);
+            });
+        }
+    }
+    activeStepChanged(newValue) {
+        setTimeout(() => {
+            var _a;
+            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
+            if (activeStepContainer) {
+                const btns = activeStepContainer.querySelectorAll('eds-button');
+                btns.forEach((btn) => {
+                    this.emitContext(btn);
+                });
+            }
+        }, 50);
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.activeStep
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
     handleStepClick(index) {
         this.step.emit(index);
         // In linear mode, update the active step on header click.
@@ -40,12 +84,45 @@ const EdsSteps = class {
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", 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", { class: "completed" }, h("eds-alert", { intent: "success", message: "All steps completed - you're finished!" })))));
+            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", 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' })))))))));
         }
         // Static mode: show all steps with their content, no navigation buttons.
         return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content)))))));
     }
-};
-EdsSteps.style = EdsStepsStyle0;
+    get el() { return this; }
+    static get watchers() { return {
+        "activeStep": ["activeStepChanged"]
+    }; }
+    static get style() { return EdsStepsStyle0; }
+}, [1, "eds-steps", {
+        "steps": [1],
+        "type": [1],
+        "activeStep": [32]
+    }, undefined, {
+        "activeStep": ["activeStepChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-steps", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-steps":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSteps);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { EdsSteps as eds_steps };
+export { EdsSteps as E, defineCustomElement as d };

package/dist/components/eds-switch.js

@@ -24,11 +24,11 @@ const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTM
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: '624776d666ada7b31cb8e84b08380b888451b1a5', class: "switch-container" }, this.labelOff && h("span", { key: 'ced31e91b88f4cb032744bd846811dd012cb9dcd', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '8cb4594687313076f18f30fc26062e1440ae0ab9', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (h("div", { key: '842d7ecb771ab848481c9f1f6a1aa2f5f04505a7', class: "switch-container" }, this.labelOff && h("span", { key: 'f20f4293896dcbde94346e82d10ed748bdeae0f6', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: 'ac485fe118bae7f6a42ddb9f7edeccba2224312c', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '88897b4368c337ea2dc4a017a8503171117a2070', class: "switch-handle" })), this.labelOn && h("span", { key: 'bb66f4fd1d09935598d3e9485d3cdf28e182620e', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '3701615162b3b8946fa5b9040e77dfa20b7de3fe', class: "switch-handle" })), this.labelOn && h("span", { key: 'b57bd428c7d6818bcec1f069a920a7aa2a2e776d', class: "switch-label switch-label--on" }, this.labelOn)));
     }
     static get style() { return EdsSwitchStyle0; }
 }, [1, "eds-switch", {

package/dist/components/eds-table2.js

@@ -20,6 +20,9 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.handleResize = () => {
+            this.updateContainerWidth();
+        };
         this.data = null;
         this.endpoint = null;
         this.config = {};
@@ -28,12 +31,13 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         this.searchEnabled = false;
         this.hostWidth = undefined;
         this.columnSize = 'default';
-        this.tableData = [];
+        this.tbData = [];
         this.columns = [];
         this.currentPage = 1;
         this.parsedConfig = {};
         this.totalRows = 0;
         this.searchQuery = '';
+        this.containerWidth = 0;
     }
     handleDataChange() {
         this.parseData();
@@ -46,23 +50,40 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         this.data ? this.parseData() : this.endpoint && this.fetchData();
     }
     componentDidLoad() {
+        this.updateContainerWidth();
+        window.addEventListener('resize', this.handleResize);
         this.setupPaginationListener();
     }
     componentDidUpdate() {
         this.setupPaginationListener();
     }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    updateContainerWidth() {
+        // Use hostWidth prop if provided; otherwise, measure parent element
+        if (this.hostWidth && this.hostWidth.trim() !== '') {
+            this.containerWidth = Number(this.hostWidth);
+        }
+        else if (this.hostEl.parentElement instanceof HTMLElement) {
+            this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
+        }
+        else {
+            this.containerWidth = 400;
+        }
+    }
     parseData() {
         try {
-            this.tableData = parseData(this.data);
-            //this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
-            this.totalRows = this.tableData.length;
+            this.tbData = parseData(this.data);
+            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.totalRows = this.tbData.length;
             this.updateColumns();
             this.currentPage = 1;
         }
         catch (error) {
             // eslint-disable-next-line
             console.error('Failed to parse data:', error);
-            this.tableData = [];
+            this.tbData = [];
         }
     }
     parseConfig() {
@@ -98,7 +119,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         }
     }
     getFilteredRows() {
-        return this.tableData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+        return this.tbData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
     }
     getPaginatedRows() {
         const filteredRows = this.getFilteredRows();
@@ -136,7 +157,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         return this.paginationEnabled && this.totalRows > this.rowsPerPage;
     }
     updateColumns() {
-        this.columns = this.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
+        this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
     }
     getVisibleColumnsCount() {
         return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
@@ -152,29 +173,22 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         return divisionFactor;
     }
     render() {
-        // Get the paginated rows and calculate the last page.
+        // Use containerWidth state that is updated on resize.
+        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+        // Calculate the number of visible columns and the column width.
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        // Determine the number of visible columns (i.e., those not hidden via config)
-        const visibleColumnsCount = this.getVisibleColumnsCount();
-        /// Calculate container width based on the optional prop or parent's measured width.
-        const containerWidth = this.hostWidth && this.hostWidth.trim() !== ''
-            ? Number(this.hostWidth)
-            : this.hostEl.parentElement instanceof HTMLElement
-                ? this.hostEl.parentElement.getBoundingClientRect().width
-                : this.hostEl.getRootNode().host instanceof HTMLElement
-                    ? this.hostEl.getRootNode().host.getBoundingClientRect().width
-                    : 400;
-        const columnWidth = visibleColumnsCount > 0 ? Math.floor((containerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
-        return (h("div", { key: 'b77c9a601d3c8c0eae3cf7754839fdf4ca9b3ad4' }, this.searchEnabled && (h("div", { key: 'a1e652ce7b75f17527b6d1c83968a3c50ee50e23' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (h("div", { key: '43add2309d8e2c85c98676709cd87fc07e4de017' }, this.searchEnabled && (h("div", { key: '1213d8aaa8a2402bd1705e03375d17f570877d5e' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
             // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'fd3de252d0ae287cea5409c4e7f651fc557a8fc9', class: "mt-20" }, h("table", { key: '80f767759a6049fae588e150e0ff166db4bc20b4', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'd7c39c1b36c9e247896082647372125d7cf11680' }, h("tr", { key: 'f32ca0941e118f89934c44dcad77a27880ea9e53', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'a2ec6392ed99a527e4de46a9018bc1ea9b383ecb', class: "mt-20" }, h("table", { key: 'ef79ce872f0cb1439dd6a7987f24cac005ac23ea', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '0853a09e45f748b4bc85e319cbb08efd97426617' }, h("tr", { key: '64e114ae3661a027e9ab744ba45801d98f2faee9', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
             return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: '85a9c3e55d12c6f62f0175613a4ff84e703dc4c5' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        }))), h("tbody", { key: '1afd468551bab11221bbfc70d0f19f4e105e7432' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
             return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '093e13235ad0041096f05e476e6199575bdb3265', class: "mt-20" }, h("eds-pagination", { key: 'a86d91875a3847d1b4735fe76910367ed1fd7875', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: 'c415ded700580eec2464a72a1659bd8be5bcacb3', class: "mt-20" }, h("eds-pagination", { key: '81088574b7c7fd254e07761ceed6cd1d69c2f2ed', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -183,7 +197,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     }; }
     static get style() { return EdsTableStyle0; }
 }, [1, "eds-table", {
-        "data": [1],
+        "data": [1, "table-data"],
         "endpoint": [1],
         "config": [1],
         "rowsPerPage": [2, "rows-per-page"],
@@ -191,12 +205,13 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         "searchEnabled": [4, "search-enabled"],
         "hostWidth": [1, "host-width"],
         "columnSize": [1, "column-size"],
-        "tableData": [32],
+        "tbData": [32],
         "columns": [32],
         "currentPage": [32],
         "parsedConfig": [32],
         "totalRows": [32],
-        "searchQuery": [32]
+        "searchQuery": [32],
+        "containerWidth": [32]
     }, undefined, {
         "data": ["handleDataChange", "parseData"],
         "config": ["handleConfigChange"]