@ebrains/components 0.2.0-alpha.0 → 0.4.0-alpha.0

package/dist/collection/components/eds-input-elements/eds-input-select/eds-input-select.js

@@ -1,9 +1,34 @@
 import { h } from "@stencil/core";
+import { toast } from "../../../utils/toastManager";
+/**
+ * A custom select input component that supports both static and dynamic options.
+ *
+ * Options can be provided in two formats:
+ * 1. Dynamic fetch configuration:
+ *    [
+ *      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }
+ *    ]
+ * 2. Static options:
+ *    [
+ *      { value: "react", label: "React" },
+ *      { value: "angular", label: "Angular" },
+ *      { value: "vue", label: "Vue.js" },
+ *      // etc.
+ *    ]
+ *
+ * The component will automatically fetch data if a dynamic configuration is provided.
+ */
 /**
  * @internal
  */
 export class EdsInputSelect {
     constructor() {
+        /**
+         * Event handler for the select input's change event.
+         * Emits the selected value.
+         *
+         * @param event The change event from the select input.
+         */
         this.handleChange = (event) => {
             const target = event.target;
             this.changeEvent.emit(target.value);
@@ -16,10 +41,60 @@ export class EdsInputSelect {
         this.error = false;
         this.required = false;
         this.options = [];
+        this.labelKey = 'label';
+        this.valueKey = 'value';
         this.value = undefined;
+        this.dynamicOptions = [];
+        this.loading = false;
+        this.dynamicValueKey = 'value';
+        this.dynamicLabelKey = 'label';
+    }
+    componentWillLoad() {
+        this.loadOptions();
+    }
+    /**
+     * Watches for changes in the `options` prop and loads the options accordingly.
+     *
+     * If the first object in the options array contains an "endpoint" key,
+     * the component will fetch options from the specified endpoint using the configured keys.
+     * Otherwise, it will treat the options as static.
+     *
+     * @async
+     */
+    async loadOptions() {
+        // If the first option contains an "endpoint" key, assume dynamic fetch mode.
+        if (this.options && this.options.length > 0 && this.options[0].endpoint) {
+            const config = this.options[0];
+            const endpoint = config.endpoint;
+            this.dynamicValueKey = config.value || 'value';
+            this.dynamicLabelKey = config.label || 'label';
+            this.loading = true;
+            try {
+                const response = await fetch(endpoint);
+                if (!response.ok) {
+                    toast.show(`<eds-input-select> HTTP error! Status: ${response.status}`, 'error');
+                }
+                const data = await response.json();
+                // Assume the API returns an array of objects.
+                this.dynamicOptions = data;
+            }
+            catch (error) {
+                //console.error('Error fetching dynamic options:', error);
+                toast.show(`<eds-input-select> Error fetching dynamic options ${error}`, 'error');
+            }
+            finally {
+                this.loading = false;
+            }
+        }
+        else {
+            // No dynamic configuration found, assume static options.
+            this.dynamicOptions = this.options;
+            this.dynamicValueKey = this.valueKey;
+            this.dynamicLabelKey = this.labelKey;
+        }
     }
     render() {
-        return (h("div", { key: '9aaa3bf4491078f5b5df6f5f0d3d5f3739f25716', class: "relative" }, h("select", { key: '5f860de772d8d92eb36648bdaaca0c93146e8a68', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '2d1e8fa6c5583e0580cbd92d731b731cdd7ecca8', value: "", disabled: true, hidden: true }, "Please select ", this.name), this.options.map((option, index) => (h("option", { key: index, value: option.value }, option.label)))), h("span", { key: 'f62edaae154ce443c964849689b5dc92d9303958', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '07d186b6e0a6742a4f6ce39dd275ff1a6f905927', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (h("div", { key: 'd37107564a86281b3a3920a5eb128f47f6fd4ceb', class: "relative" }, h("select", { key: 'a69cd907ef6732ec42a99fd46bbf9a52ef03735a', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '8b84a2b7edd7e989411908b16f35c46853889d8e', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: option[this.dynamicValueKey] }, option[this.dynamicLabelKey])))), h("span", { key: 'dbccb6161aafc2dc31cc6dd5b3d8c812545eab9a', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: 'b0fd24cb54185d8558dfabcb94d05b6257caacd1', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {
@@ -36,7 +111,7 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Optional id for the input. If not provided, the component uses the `name` property."
                 },
                 "attribute": "input-id",
                 "reflect": false
@@ -53,7 +128,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name attribute of the select input. Also used as the fallback id."
                 },
                 "attribute": "name",
                 "reflect": false
@@ -70,7 +145,7 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text (not used in the native select, but can be used for custom implementations)."
                 },
                 "attribute": "placeholder",
                 "reflect": false
@@ -87,7 +162,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the select input will be disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -105,7 +180,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, indicates that there is an associated message (help or error)."
                 },
                 "attribute": "has-message",
                 "reflect": false,
@@ -123,7 +198,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the select input is in an error state."
                 },
                 "attribute": "error",
                 "reflect": false,
@@ -141,7 +216,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the select input is marked as required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -151,18 +226,54 @@ export class EdsInputSelect {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ label: string; value: string }[]",
-                    "resolved": "{ label: string; value: string; }[]",
+                    "original": "{ [key: string]: any }[]",
+                    "resolved": "{ [key: string]: any; }[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Options can be provided in two formats:\n\n1. Dynamic fetch configuration:\n   [\n     { endpoint: \"http://localhost/api/applications\", value: \"_id\", label: \"title\" }\n   ]\n\n2. Static options:\n   [\n     { value: \"react\", label: \"React\" },\n     { value: \"angular\", label: \"Angular\" },\n     { value: \"vue\", label: \"Vue.js\" },\n     // etc.\n   ]"
                 },
                 "defaultValue": "[]"
             },
+            "labelKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For static options, this property defines the key used to retrieve the display label."
+                },
+                "attribute": "label-key",
+                "reflect": false,
+                "defaultValue": "'label'"
+            },
+            "valueKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For static options, this property defines the key used to retrieve the option value."
+                },
+                "attribute": "value-key",
+                "reflect": false,
+                "defaultValue": "'value'"
+            },
             "value": {
                 "type": "any",
                 "mutable": false,
@@ -175,13 +286,21 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The currently selected value."
                 },
                 "attribute": "value",
                 "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "dynamicOptions": {},
+            "loading": {},
+            "dynamicValueKey": {},
+            "dynamicLabelKey": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "changeEvent",
@@ -190,8 +309,11 @@ export class EdsInputSelect {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeEvent"
+                        }],
+                    "text": "Emitted when the value of the select input changes."
                 },
                 "complexType": {
                     "original": "string | number",
@@ -200,4 +322,10 @@ export class EdsInputSelect {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "loadOptions"
+            }];
+    }
 }

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

@@ -149,12 +149,11 @@ export class EdsLink {
         this.hideLabelOnSmallScreen = false;
         this.extraClass = undefined;
     }
-    handleBreadcrumbContext(event) {
+    handleParentContext(event) {
         if (event.target !== this.el) {
             // Ignore the event if it's not targeted at this specific instance
             return;
         }
-        //console.log(event.detail);
         this.parentContext = event.detail;
         event.stopPropagation();
     }
@@ -205,7 +204,7 @@ export class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: '287497bf5ba99fe467ba08d59f65d24204fbecbc', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.disabled ? 'true' : null, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'a244b21dffaad38cb149a925df1feb3d78beed03', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '2ef69a91351ea622d6425699b90b45a0bd5989b1', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: '58eb3c1c5c192c2855424864c9e3e9c7a5fe3378', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.disabled ? 'true' : null, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'd4033ba589552f60f8dc7559434a3c035d226de4', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: 'ca520cc66febaf8c8ddfd2fd8ee8a13b71a3078d', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -473,7 +472,7 @@ export class EdsLink {
     static get listeners() {
         return [{
                 "name": "parentContext",
-                "method": "handleBreadcrumbContext",
+                "method": "handleParentContext",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/eds-modal/eds-modal.css

@@ -92,10 +92,26 @@
     left: 50%;
 }
 
+.left-20 {
+    left: 1.25rem;
+}
+
+.right-20 {
+    right: 1.25rem;
+}
+
 .top-1\/2 {
     top: 50%;
 }
 
+.top-20 {
+    top: 1.25rem;
+}
+
+.bottom-20 {
+    bottom: 1.25rem;
+}
+
 .grow {
     flex-grow: 1;
 }

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

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
 import { h } from "@stencil/core";
 //import { sendAnalytics } from '@ebrains/utils';
 /**
@@ -16,33 +17,59 @@ export class EdsModal {
         this.title = '';
         this.truncate = true;
         this.truncateLines = '1';
+        this.position = 'middle';
     }
     getTruncateClass() {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
+    /**
+     * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+     *
+     * @private
+     * @returns {string} The concatenated CSS classes for modal positioning.
+     */
+    getModalPositionClasses() {
+        switch (this.position) {
+            case 'top':
+                return 'left-1/2 top-20 -translate-x-1/2';
+            case 'bottom':
+                return 'left-1/2 bottom-20 -translate-x-1/2';
+            case 'left':
+                return 'left-20 top-1/2 -translate-y-1/2';
+            case 'right':
+                return 'right-20 top-1/2 -translate-y-1/2';
+            case 'middle':
+            default:
+                return 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
+        }
+    }
     /**
      * Opens the modal.
      */
     async open() {
+        var _a;
         this.isOpen = true;
-        /*sendAnalytics({
-          category: 'ui-component',
-          tag: this.el.tagName.toLowerCase(),
-          name: this.title,
-          action: 'show'
-        });*/
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'opened'
+        });
     }
     /**
      * Closes the modal.
      */
     async close() {
+        var _a;
         this.isOpen = false;
-        /*sendAnalytics({
-          category: 'ui-component',
-          tag: this.el.tagName.toLowerCase(),
-          name: this.title,
-          action: 'hide'
-        });*/
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'closed'
+        });
     }
     /**
      * Toggles the modal open or closed.
@@ -56,30 +83,27 @@ export class EdsModal {
      */
     componentDidLoad() {
         // Emit context for each eds-link element after the component is fully loaded
-        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
-        btns.forEach((btn) => {
-            this.emitContext(btn);
-        });
+        //const btn = this.el.shadowRoot.querySelector('eds-button');
+        //this.emitContext(btn);
     }
     /**
      * Emits a custom event called `parentContext` for a given button element.
      * This event provides context information about the eds-modal component.
-     *
-     * @param btnElement - The link element to which the event will be dispatched.
      */
-    emitContext(btnElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        btnElement.dispatchEvent(event);
-    }
+    /*emitContext(btnElement: HTMLElement) {
+      const event = new CustomEvent<ParentContextDetail>('parentContext', {
+        detail: {
+          componentName: this.el.tagName.toLowerCase(),
+          identifier: null
+        }
+      });
+  
+      btnElement.dispatchEvent(event);
+    }*/
     render() {
-        return (h("div", { key: '00816ecb900bd9b68b31fdf6e48bef0223f9e10a', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex` }, this.isOpen && (h("div", { key: '570fa8625f9ad4b1ea82633f11e2b289ab01b853', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: 'eedcdc49c9f4a16ef4537ec02335757aa1143bd9', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex` }, this.isOpen && (h("div", { key: '2b24903b85895fd5eca389d6897aa85c892e762f', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: 'ff658c763e3fbc98123f13483076399966b10515', class: "max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center " }, h("div", { key: 'd8b72acd90cc59ab1f82384aee4e311319f75aa9', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'ee61fc505c5a3eb93541d3762d37f28a5a788bae', class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '3832772417d05a162eb5f2c4d0733f0ee845ed1c', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'f71b38be8284a37d0d198df0a9858c64202b3d91', class: "pt-8" }, h("slot", { key: '1f80948334e5b4e9fc00a3bf01c6fc402d8220c3' })))));
+            onClick: () => this.close() })), h("div", { key: 'd135a2d9eff1764b6335b9b16be54d8fec7d4112', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'bc8ea6f95443f01d3e5b88953581e1f2eae4009c', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '872b9a4bf44db478d38f18d3459a816c119f352d', class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: 'bdf27a3f564d295383985cb1f0ce7df7f13a97fb', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: '600cc4d544d0a41d9d2be74aedbb0d2fe2028141', class: "pt-8" }, h("slot", { key: '8ce560804a6d960b4075e4b6d1607dda6530c08d' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -148,6 +172,24 @@ export class EdsModal {
                 "attribute": "truncate-lines",
                 "reflect": false,
                 "defaultValue": "'1'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'middle' | 'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"middle\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the position of the modal.\n\nAcceptable values are:\n- `\"middle\"` (default): The modal is centered both vertically and horizontally.\n- `\"top\"`: The modal is positioned near the top of the viewport.\n- `\"bottom\"`: The modal is positioned near the bottom of the viewport.\n- `\"left\"`: The modal is positioned on the left side of the viewport, centered vertically.\n- `\"right\"`: The modal is positioned on the right side of the viewport, centered vertically."
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'middle'"
             }
         };
     }

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

@@ -7,41 +7,55 @@ export default {
             control: 'text',
             description: 'Title of the modal',
             defaultValue: 'Default Modal Title'
+        },
+        position: {
+            control: 'select',
+            options: ['middle', 'top', 'bottom', 'left', 'right'],
+            description: 'Position of the modal in the viewport'
         }
+    },
+    args: {
+        title: 'Default Modal Title',
+        position: 'middle'
     }
 };
-const Template = ({ title }) => {
+const Template = ({ title, position }) => {
     const openModal = () => {
-        document.querySelector('eds-modal').open();
+        var _a;
+        // Open the first instance of eds-modal on the page
+        (_a = document.querySelector('eds-modal')) === null || _a === void 0 ? void 0 : _a.open();
     };
     return html `
-    <!-- Modal component with dynamic title -->
-    <eds-modal title="${title}">
+    <!-- Modal component with dynamic title and position -->
+    <eds-modal title="${title}" position="${position}">
       <p>This is the content inside the modal.</p>
     </eds-modal>
 
-    <!-- Buttons to control modal -->
-    <eds-button intent="primary" label="Open Modal with Form" @click="${openModal}"></eds-button>
+    <!-- Button to control modal -->
+    <eds-button intent="primary" label="Open Modal" @click="${openModal}"></eds-button>
   `;
 };
 export const Default = Template.bind({});
 Default.args = {
-    title: 'Default Modal Title'
+    title: 'Default Modal Title',
+    position: 'middle'
 };
-const TemplateWithForm = ({ title }) => {
+const TemplateWithForm = ({ title, position }) => {
     const openModal = () => {
-        document.querySelector('eds-modal').open();
+        var _a;
+        (_a = document.querySelector('eds-modal')) === null || _a === void 0 ? void 0 : _a.open();
     };
-    return html ` <!-- Modal with eds-form inside the slot -->
-    <eds-modal title="${title}">
+    return html `
+    <!-- Modal with eds-form inside the slot -->
+    <eds-modal title="${title}" position="${position}">
       <eds-form
         name="extended-form"
         endpoint="http://127.0.0.1:5000/api/data"
         fields='[
-            {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
-            {"name": "email", "label": "Email", "type": "email", "required": true},
-            {"name": "number", "label": "Number", "type": "number", "required": true}
-          ]'
+          {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
+          {"name": "email", "label": "Email", "type": "email", "required": true},
+          {"name": "number", "label": "Number", "type": "number", "required": true}
+        ]'
         success-message="Form submitted successfully!"
         error-message="Please fix the errors in the form."
         submit-btn="true"
@@ -50,15 +64,17 @@ const TemplateWithForm = ({ title }) => {
       ></eds-form>
     </eds-modal>
 
-    <!-- Buttons to control modal -->
+    <!-- Button to control modal -->
     <eds-button
       intent="primary"
       label="Open Modal with Form"
       @click="${openModal}"
       style="margin-right: 10px;"
-    ></eds-button>`;
+    ></eds-button>
+  `;
 };
 export const ModalWithForm = TemplateWithForm.bind({});
 ModalWithForm.args = {
-    title: 'Extended Form Modal'
+    title: 'Extended Form Modal',
+    position: 'middle'
 };

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

@@ -32,14 +32,18 @@ export class EdsPagination {
     componentDidLoad() {
         // Emit context for each eds-link element after the component is fully loaded
         const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
-        if (links.length > 0) {
-            // Emit context for the first link
-            this.emitContext(links[0]);
-            // Emit context for the last link, if it's different from the first
-            if (links.length > 1) {
-                this.emitContext(links[links.length - 1]);
-            }
-        }
+        links.forEach((lnk) => {
+            this.emitContext(lnk);
+        });
+        /*if (links.length > 0) {
+          // Emit context for the first link
+          this.emitContext(links[0]);
+    
+          // Emit context for the last link, if it's different from the first
+          if (links.length > 1) {
+            this.emitContext(links[links.length - 1]);
+          }
+        }*/
     }
     /**
      * Emits a custom event called `parentContext` for a given link element.
@@ -169,7 +173,7 @@ export class EdsPagination {
         }
     }
     render() {
-        return (h("div", { key: '2385b59b0a8b2bbdc40bfc5032b846c0ec20065e' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '6aea281a4df247874f354469bbabae039424ad9e', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'eeb5f0ea902505c3853a30d51026cef9d9785e48', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (h("div", { key: '584e0918b070eac25a7c4bfceff59b000b60076c' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'c688bd8e1f1d15904fc274454093f03213f59e38', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'c2472919bad41f76e26d518da27509e545ed9db6', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'

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

@@ -7,10 +7,8 @@ export class EdsRating {
         this.selectedRating = 0;
     }
     /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
+     * Parses the `textMapping` prop into an array of strings.
+     * Returns an empty array if parsing fails.
      */
     get parsedMappings() {
         if (typeof this.textMapping === 'object') {
@@ -22,7 +20,7 @@ export class EdsRating {
             }
             catch (e) {
                 // eslint-disable-next-line
-                console.error('Error parsing links prop:', e);
+                console.error('Error parsing textMapping prop:', e);
                 return [];
             }
         }
@@ -37,10 +35,10 @@ export class EdsRating {
         this.ratingChange.emit(rating);
     }
     render() {
-        return (h("div", { key: '4ca6d5e0fb35d8ebce1acd5c1a7c6c857ba4f463', class: "relative w-full flex flex-col" }, h("span", { key: '784b77f84098b8d88cd3872004b0208a4437c51b', class: "f-body-01" }, this.label), h("div", { key: '6780db58d3c96046a99d383518cfe1db1e3f1c68', class: "stars" }, Array.from({ length: this.stars }, (_, index) => (h("span", { class: {
+        return (h("div", { key: 'c9147c2635f091d93f329d2b56a5fee8dce9126c', class: "relative w-full flex flex-col" }, h("span", { key: '39a84bc3d9bcd4b729a35737c883eca7144d13ac', class: "f-body-01" }, this.label), h("div", { key: '3cb84acf399cac0b23393c71df2f2b36aab4f43e', class: "stars" }, Array.from({ length: this.stars }, (_, index) => (h("span", { class: {
                 star: true,
                 filled: index < this.selectedRating
-            }, onClick: () => this.handleClick(index + 1) }, "\u2605")))), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'ce0eec3c29cf27bff86e3307a29a2c39c2167087', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+            }, onClick: () => this.handleClick(index + 1) }, "\u2605")))), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '60605ec21b542825da0dad629fc1618d9cf63b25', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-rating"; }
     static get encapsulation() { return "shadow"; }
@@ -93,11 +91,11 @@ export class EdsRating {
                 "defaultValue": "'Rate your experience'"
             },
             "textMapping": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | any",
-                    "resolved": "any",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,