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

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

@@ -125,7 +125,6 @@ export class EdsForm {
                 this.formSubmitting.emit(this.isSubmitting);
             }
         };
-        this.smallAlert = false;
         this.setFormUrl = true;
         this.submitBtn = true;
         this.submitBtnLabel = 'Submit';
@@ -134,7 +133,7 @@ export class EdsForm {
         this.submitBtnHintMessage = 'To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.';
         this.endpoint = undefined;
         this.name = 'form';
-        this.fields = undefined;
+        this.fields = [];
         this.values = {};
         this.coupleAuth = false;
         this.formSubmitted = false;
@@ -144,6 +143,7 @@ export class EdsForm {
         this.alertMessage = null;
         this.isAuthenticated = false;
         this.authUser = undefined;
+        this.parsedFields = [];
     }
     onAuthStatusChanged(event) {
         var _a;
@@ -151,6 +151,7 @@ export class EdsForm {
         this.authUser = event.detail.user;
     }
     componentDidLoad() {
+        this.parseFields(this.fields);
         // Emit context for each eds-link element after the component is fully loaded
         const links = this.el.querySelectorAll('eds-button');
         links.forEach((link) => {
@@ -223,7 +224,7 @@ export class EdsForm {
     validateForm() {
         this.errors = {};
         this.hasError = false;
-        this.parseFields.forEach((field) => {
+        this.parsedFields.forEach((field) => {
             if (field.type !== 'hidden') {
                 if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
                     // Single checkbox validation
@@ -305,19 +306,38 @@ export class EdsForm {
         });
         return formData;
     }
-    get parseFields() {
-        return JSON.parse(this.fields);
+    parseFields(newValue) {
+        try {
+            if (typeof newValue === 'string') {
+                this.parsedFields = JSON.parse(newValue);
+            }
+            else if (Array.isArray(newValue)) {
+                this.parsedFields = newValue;
+            }
+            else if (newValue && typeof newValue === 'object') {
+                // In case a single object is passed, wrap it in an array.
+                this.parsedFields = newValue;
+            }
+            else {
+                this.parsedFields = [];
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Error parsing fields prop:', error);
+            this.parsedFields = [];
+        }
     }
     render() {
-        const hiddenFields = this.parseFields.filter((field) => field.type === 'hidden');
-        const otherFields = this.parseFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: 'fdb974998dfd27c0d857d0fbfbbe9e769e55d7bb', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: 'dfbe5adce9e5685736169e88408590088aba5b1e' }, h("slot", { key: 'f5c5356a8b87bf63fdd21901da81291c596f1487' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
+        const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
+        return (h("form", { key: '0a106caa8aa9f056b55acf6fecfbc7090c4411d2', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: '3478d82640378d9a1c0c09394453e2118b1b3ca9' }, h("slot", { key: '9bc37f54c03b2b0f831da917b6ce6bab2ec11084' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
             return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.submitBtn && (h("div", { key: '2c3165a56d5bec9135a8695cae1b87981167c949', class: "mt-20" }, h("eds-button", { key: 'f311628ff58cd03ebbd0f7ccb0623df817d416da', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '1c7adc93081294eb86b71e808933215fe04fa033', class: "mt-20" }, h("eds-alert", { key: 'd221dd0674be734a8b7382ea2eeb97509f6bc3a6', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
+        })), this.submitBtn && (h("div", { key: 'ca221e8c5c18cf4a107581736728f84cea7831d0', class: "mt-20" }, h("eds-button", { key: 'eef3cf052beb62703c1df74d142650194d60c501', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '69861c8776b99e26a08585a5a8c893c85a2d9999', class: "mt-20" }, h("eds-alert", { key: 'b4d225d8efcbe6cde95789c367f0ecf94f217c9c', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
     }
     static get is() { return "eds-form"; }
     static get originalStyleUrls() {
@@ -332,24 +352,6 @@ export class EdsForm {
     }
     static get properties() {
         return {
-            "smallAlert": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, displays a small alert for messages."
-                },
-                "attribute": "small-alert",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "setFormUrl": {
                 "type": "boolean",
                 "mutable": false,
@@ -497,8 +499,8 @@ export class EdsForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
                     "references": {}
                 },
                 "required": false,
@@ -508,7 +510,8 @@ export class EdsForm {
                     "text": "A JSON string representing the fields in the form.\nExample:\n```json\n[\n  { \"name\": \"email\", \"label\": \"Email\", \"type\": \"text\", \"required\": true },\n  { \"name\": \"password\", \"label\": \"Password\", \"type\": \"password\", \"required\": true }\n]\n```"
                 },
                 "attribute": "fields",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "[]"
             },
             "coupleAuth": {
                 "type": "boolean",
@@ -539,7 +542,8 @@ export class EdsForm {
             "isSubmitting": {},
             "alertMessage": {},
             "isAuthenticated": {},
-            "authUser": {}
+            "authUser": {},
+            "parsedFields": {}
         };
     }
     static get events() {
@@ -561,6 +565,12 @@ export class EdsForm {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fields",
+                "methodName": "parseFields"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "authStatusChanged",

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

@@ -17,7 +17,6 @@ export default {
             defaultValue: 'Please fix the errors in the form.'
         },
         submitBtn: { control: 'boolean', description: 'Show submit button', defaultValue: true },
-        smallAlert: { control: 'boolean', description: 'Show small alert message', defaultValue: false },
         setFormUrl: { control: 'boolean', description: 'Include the current URL in the form data', defaultValue: true }
     }
 };
@@ -29,7 +28,6 @@ const Template = (args) => html `
     success-message="${args.successMessage}"
     error-message="${args.errorMessage}"
     ?submit-btn="${args.submitBtn}"
-    ?small-alert="${args.smallAlert}"
     ?set-form-url="${args.setFormUrl}"
   ></eds-form>
 `;
@@ -84,6 +82,5 @@ Default.args = {
     successMessage: 'Form submitted successfully!',
     errorMessage: 'Please fix the errors in the form.',
     submitBtn: true,
-    smallAlert: false,
     setFormUrl: true
 };

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

@@ -43,25 +43,26 @@ Default.args = {
     bg: true,
     withHover: true
 };
-export const SmallFrame = Template.bind({});
+/*export const SmallFrame = Template.bind({});
 SmallFrame.args = {
-    frameLabel: 'Small Frame',
-    urlLabel: 'Small Frame Link',
-    urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
-    src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
-    intent: 'secondary',
-    tiny: true,
-    bg: true,
-    withHover: false
+  frameLabel: 'Small Frame',
+  urlLabel: 'Small Frame Link',
+  urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
+  src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
+  intent: 'secondary',
+  tiny: true,
+  bg: true,
+  withHover: false
 };
+
 export const ErrorState = Template.bind({});
 ErrorState.args = {
-    frameLabel: 'Error Frame',
-    urlLabel: 'Error Link',
-    urlLink: 'https://errorframe.com',
-    src: 'https://invalid-url.com', // Simulating a broken URL to trigger the error state
-    intent: 'inverse',
-    tiny: false,
-    bg: false,
-    withHover: true
-};
+  frameLabel: 'Error Frame',
+  urlLabel: 'Error Link',
+  urlLink: 'https://errorframe.com',
+  src: 'https://invalid-url.com', // Simulating a broken URL to trigger the error state
+  intent: 'inverse',
+  tiny: false,
+  bg: false,
+  withHover: true
+};*/

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

@@ -18,6 +18,9 @@ import { toast } from "../../../utils/toastManager";
  *
  * The component will automatically fetch data if a dynamic configuration is provided.
  */
+/**
+ * @internal
+ */
 export class EdsInputSelect {
     constructor() {
         /**
@@ -91,7 +94,7 @@ export class EdsInputSelect {
         }
     }
     render() {
-        return (h("div", { key: '0b45eaae992171cd9795f7bf01883b0f3efbcc13', class: "relative" }, h("select", { key: '0ee8bccb24f7bd65e9347c0b79905154db39dca7', 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: 'b1b53dcf8dd3155e8dba28327f05b4725a013435', 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: '3f652e7ed7570b602565af3f0e3c5c91506e4089', 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: '2237727060af6286c346f749d2e8e3f7f86c7c70', 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() {

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,