@ebrains/components 0.0.1-alpha.0

package/dist/components/eds-pagination2.js

@@ -0,0 +1,249 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$1 } from './eds-link2.js';
+
+const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+
+const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.currentPage = undefined;
+        this.lastPage = undefined;
+        this.perPage = 10;
+        this.total = 0;
+        this.url = '';
+        this.mode = 'default';
+        this.prevLabel = 'Prev';
+        this.nextLabel = 'Next';
+        this.prevUrl = '';
+        this.nextUrl = '';
+        this.links = [];
+    }
+    /** Lifecycle hook to generate pagination links on component load */
+    componentWillLoad() {
+        if (this.mode === 'default') {
+            this.generateLinks();
+        }
+    }
+    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]);
+            }
+        }
+    }
+    /**
+     * 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.hostEl.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    onPageOrLastPageChange() {
+        if (this.mode === 'default') {
+            this.generateLinks();
+        }
+    }
+    /**
+     * Checks if the current page is the first page
+     * @returns {boolean} - true if current page is the first page
+     */
+    isFirstPage() {
+        return this.currentPage === 1;
+    }
+    /**
+     * Checks if the current page is the last page
+     * @returns {boolean} - true if current page is the last page
+     */
+    isLastPage() {
+        return this.currentPage === this.lastPage;
+    }
+    /**
+     * Generates a pagination link object
+     * @param {number} page - Page number for the link
+     * @returns {Link} - Link object with page details
+     */
+    generateLink(page) {
+        const urlHasQuery = this.url.includes('?');
+        return {
+            ariaLabel: `Page ${page}`,
+            url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
+            label: page.toString(),
+            current: this.currentPage === page,
+            disabled: false
+        };
+    }
+    /** Generates pagination links based on the last page and current page */
+    generateLinks() {
+        if (this.lastPage && this.lastPage > 5) {
+            this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map((page) => typeof page === 'number' ? this.generateLink(page) : page);
+        }
+        else if (this.lastPage) {
+            this.links = Array.from({ length: this.lastPage }).map((_, i) => this.generateLink(i + 1));
+        }
+    }
+    /**
+     * Creates a pagination range based on delta, current, and total pages
+     * @param {number} current - Current page number
+     * @param {number} total - Total number of pages
+     * @param {number} delta - Range of pages to display around the current page
+     * @returns {(number | string)[]} - Range of page numbers or ellipses
+     */
+    getPaginationGenerator(current, total) {
+        const delta = 1; // Show one page before and one after the current page
+        const range = [];
+        if (total <= 5) {
+            // If total pages are 5 or less, show all pages
+            for (let i = 1; i <= total; i++) {
+                range.push(i);
+            }
+        }
+        else {
+            // Always show the first page
+            range.push(1);
+            // Add ellipsis if there’s a gap between the first page and the current range start
+            if (current - delta > 2) {
+                range.push('...');
+            }
+            // Determine range for pages around the current page
+            for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
+                range.push(i);
+            }
+            // Add ellipsis if there’s a gap between the current range end and the last page
+            if (current + delta < total - 1) {
+                range.push('...');
+            }
+            // Always show the last page
+            range.push(total);
+        }
+        return range;
+    }
+    /**
+     * Formats the current page results information for display
+     * @returns {string} - Formatted page result information
+     */
+    pageResults() {
+        if (this.total > 0) {
+            return this.total > this.perPage
+                ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}`
+                : `${this.total}`;
+        }
+        return '';
+    }
+    /**
+     * Handles a page click event, updating the current page and dispatching an event
+     * @param {MouseEvent} event - Click event
+     * @param {number} newPage - New page number
+     */
+    handlePageClick(event, newPage) {
+        if (this.mode === 'navigator') {
+            return; // No page clicking logic for navigator mode
+        }
+        event.preventDefault(); // Prevent default link navigation
+        if (newPage !== this.currentPage) {
+            this.links = this.links.map((link) => typeof link === 'object' ? Object.assign(Object.assign({}, link), { current: parseInt(link.label) === newPage }) : link);
+            const pageChangeEvent = new CustomEvent('pageChange', {
+                detail: newPage,
+                bubbles: true,
+                composed: true
+            });
+            this.hostEl.dispatchEvent(pageChangeEvent);
+            this.currentPage = newPage;
+        }
+    }
+    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'
+                ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
+                : this.isFirstPage()
+                    ? '#'
+                    : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator'
+                ? !this.prevUrl // Disable if prevUrl is not provided
+                : this.isFirstPage(), "aria-label": "Previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12", onClick: (event) => {
+                if (this.mode === 'default') {
+                    if (this.isFirstPage()) {
+                        event.preventDefault(); // Prevent click if disabled
+                    }
+                    else {
+                        this.handlePageClick(event, (this.currentPage || 1) - 1);
+                    }
+                }
+            } })), this.mode === 'default' &&
+            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center" }, link)) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, size: "small", class: "!p-8", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, h("eds-link", { label: this.nextLabel, url: this.mode === 'navigator'
+                ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
+                : this.isLastPage()
+                    ? '#'
+                    : this.generateLink(this.currentPage + 1).url, disabled: this.mode === 'navigator'
+                ? !this.nextUrl // Disable if nextUrl is not provided
+                : this.isLastPage(), "aria-label": "Next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors", onClick: (event) => {
+                if (this.mode === 'default') {
+                    if (this.isLastPage()) {
+                        event.preventDefault(); // Prevent click if disabled
+                    }
+                    else {
+                        this.handlePageClick(event, (this.currentPage || 1) + 1);
+                    }
+                }
+            } }))))) : null));
+    }
+    get hostEl() { return this; }
+    static get watchers() { return {
+        "currentPage": ["onPageOrLastPageChange"],
+        "lastPage": ["onPageOrLastPageChange"]
+    }; }
+    static get style() { return edsPaginationCss; }
+}, [1, "eds-pagination", {
+        "currentPage": [2, "current-page"],
+        "lastPage": [2, "last-page"],
+        "perPage": [2, "per-page"],
+        "total": [2],
+        "url": [1],
+        "mode": [1],
+        "prevLabel": [1, "prev-label"],
+        "nextLabel": [1, "next-label"],
+        "prevUrl": [1, "prev-url"],
+        "nextUrl": [1, "next-url"],
+        "links": [32]
+    }, undefined, {
+        "currentPage": ["onPageOrLastPageChange"],
+        "lastPage": ["onPageOrLastPageChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-pagination", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsPagination);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsPagination as E, defineCustomElement as d };

package/dist/components/eds-progress-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsProgressBar extends Components.EdsProgressBar, HTMLElement {}
+export const EdsProgressBar: {
+    prototype: EdsProgressBar;
+    new (): EdsProgressBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-progress-bar.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}";
+
+const EdsProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = 0;
+    }
+    /**
+     * Method to update the progress value externally.
+     * @param newValue The new progress value (0-100).
+     */
+    async updateValue(newValue) {
+        this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
+    }
+    render() {
+        const progressValue = this.value;
+        return (h("div", { key: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+    }
+};
+EdsProgressBar.style = edsProgressBarCss;
+
+export { EdsProgressBar as eds_progress_bar };

package/dist/components/eds-progress-bar.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}";
+
+const EdsProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.value = 0;
+    }
+    /**
+     * Method to update the progress value externally.
+     * @param newValue The new progress value (0-100).
+     */
+    async updateValue(newValue) {
+        this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
+    }
+    render() {
+        const progressValue = this.value;
+        return (h("div", { key: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+    }
+    static get style() { return edsProgressBarCss; }
+}, [1, "eds-progress-bar", {
+        "value": [1026],
+        "updateValue": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-progress-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsProgressBar$1);
+            }
+            break;
+    } });
+}
+
+const EdsProgressBar = EdsProgressBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsProgressBar, defineCustomElement };

package/dist/components/eds-rating.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsRating extends Components.EdsRating, HTMLElement {}
+export const EdsRating: {
+    prototype: EdsRating;
+    new (): EdsRating;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,53 @@
+import { r as registerInstance, a as createEvent, h } from './index-b384416e.js';
+
+const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.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-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}";
+
+const EdsRating = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ratingChange = createEvent(this, "ratingChange", 7);
+        this.stars = 5;
+        this.label = 'Rate your experience';
+        this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+        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
+     */
+    get parsedMappings() {
+        if (typeof this.textMapping === 'object') {
+            return this.textMapping;
+        }
+        else if (typeof this.textMapping === 'string') {
+            try {
+                return JSON.parse(this.textMapping);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    /**
+     * Handles the click event on a star.
+     * @param rating - The selected rating value.
+     */
+    handleClick(rating) {
+        this.selectedRating = rating;
+        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: {
+                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]))));
+    }
+};
+EdsRating.style = edsRatingCss;
+
+export { EdsRating as eds_rating };

package/dist/components/eds-rating.js

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.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-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}";
+
+const EdsRating$1 = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ratingChange = createEvent(this, "ratingChange", 7);
+        this.stars = 5;
+        this.label = 'Rate your experience';
+        this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+        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
+     */
+    get parsedMappings() {
+        if (typeof this.textMapping === 'object') {
+            return this.textMapping;
+        }
+        else if (typeof this.textMapping === 'string') {
+            try {
+                return JSON.parse(this.textMapping);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    /**
+     * Handles the click event on a star.
+     * @param rating - The selected rating value.
+     */
+    handleClick(rating) {
+        this.selectedRating = rating;
+        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: {
+                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]))));
+    }
+    static get style() { return edsRatingCss; }
+}, [1, "eds-rating", {
+        "stars": [2],
+        "label": [1],
+        "textMapping": [8, "text-mapping"],
+        "selectedRating": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-rating"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-rating":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsRating$1);
+            }
+            break;
+    } });
+}
+
+const EdsRating = EdsRating$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsRating, defineCustomElement };

package/dist/components/eds-section-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsSectionCore extends Components.EdsSectionCore, HTMLElement {}
+export const EdsSectionCore: {
+    prototype: EdsSectionCore;
+    new (): EdsSectionCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-section-core.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const edsSectionCoreCss = "";
+
+const EdsSectionCore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tag = 'section';
+        this.sectionTitle = '';
+        this.headingLevel = 'h2';
+    }
+    render() {
+        const TagType = this.tag; // Set dynamic tag type (div or section)
+        return (h(TagType, { key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2' }, h("eds-section-heading", { key: '7ed4486fcf6e7c653026869c9468be9471db1775', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2' })));
+    }
+};
+EdsSectionCore.style = edsSectionCoreCss;
+
+export { EdsSectionCore as eds_section_core };

package/dist/components/eds-section-core.js

@@ -0,0 +1,6 @@
+import { E as EdsSectionCore$1, d as defineCustomElement$1 } from './eds-section-core2.js';
+
+const EdsSectionCore = EdsSectionCore$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsSectionCore, defineCustomElement };

package/dist/components/eds-section-core2.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './eds-section-heading2.js';
+
+const edsSectionCoreCss = "";
+
+const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.tag = 'section';
+        this.sectionTitle = '';
+        this.headingLevel = 'h2';
+    }
+    render() {
+        const TagType = this.tag; // Set dynamic tag type (div or section)
+        return (h(TagType, { key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2' }, h("eds-section-heading", { key: '7ed4486fcf6e7c653026869c9468be9471db1775', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2' })));
+    }
+    static get style() { return edsSectionCoreCss; }
+}, [4, "eds-section-core", {
+        "tag": [1],
+        "sectionTitle": [1, "section-title"],
+        "headingLevel": [1, "heading-level"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-section-core", "eds-section-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-section-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSectionCore);
+            }
+            break;
+        case "eds-section-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsSectionCore as E, defineCustomElement as d };

package/dist/components/eds-section-heading.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsSectionHeading extends Components.EdsSectionHeading, HTMLElement {}
+export const EdsSectionHeading: {
+    prototype: EdsSectionHeading;
+    new (): EdsSectionHeading;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-section-heading.entry.js

@@ -0,0 +1,37 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const EdsSectionHeading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sectionTitle = undefined;
+        this.withContainer = true;
+        this.headingLevel = 'h2';
+        this.tag = 'div';
+        this.spacingLarge = false;
+    }
+    getHeadingClass() {
+        // Map heading levels to their respective classes
+        const headingClasses = {
+            h1: 'f-heading-01',
+            h2: 'f-heading-02',
+            h3: 'f-heading-03',
+            h4: 'f-heading-04',
+            h5: 'f-heading-05',
+            h6: 'f-heading-06'
+        };
+        // Return the class based on the heading level
+        return headingClasses[this.headingLevel];
+    }
+    render() {
+        const TagType = this.tag; // Dynamically set tag type for the container
+        const HeadingTag = this.headingLevel; // Dynamically set heading level
+        return (h(TagType, { key: '2c6466c0a02bf8598153c18eafb37affc3dac395', class: {
+                'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+                container: this.withContainer,
+                'pt-48': this.spacingLarge,
+                'pt-28': !this.spacingLarge
+            } }, h(HeadingTag, { key: 'fc7f0f09e02e8c63697e46811c465792497126e0', class: this.getHeadingClass() }, this.sectionTitle)));
+    }
+};
+
+export { EdsSectionHeading as eds_section_heading };

package/dist/components/eds-section-heading.js

@@ -0,0 +1,6 @@
+import { E as EdsSectionHeading$1, d as defineCustomElement$1 } from './eds-section-heading2.js';
+
+const EdsSectionHeading = EdsSectionHeading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsSectionHeading, defineCustomElement };