@ebrains/components 0.9.2-beta → 1.0.0

package/dist/esm/eds-pagination_2.entry.js

@@ -0,0 +1,398 @@
+import { r as registerInstance, h, g as getElement } from './index-fdb33359.js';
+import { s as sendAnalytics } from './analytics-d99780e3.js';
+import { p as parseData } from './sharedUtils-a550989c.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 EdsPaginationStyle0 = edsPaginationCss;
+
+const EdsPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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');
+        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.
+     * 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('page', {
+                detail: newPage,
+                bubbles: true,
+                composed: true
+            });
+            this.hostEl.dispatchEvent(pageChangeEvent);
+            this.currentPage = newPage;
+        }
+    }
+    render() {
+        return (h("div", { key: '1d53f69179791434224f152503c0b81c4cfc7cd3' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '00ae324b49d62a74feee9d1cde21d67cd726ecf0', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'dedf2ce2700eae9d1386b305ec1d1904b133f992', 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 getElement(this); }
+    static get watchers() { return {
+        "currentPage": ["onPageOrLastPageChange"],
+        "lastPage": ["onPageOrLastPageChange"]
+    }; }
+};
+EdsPagination.style = EdsPaginationStyle0;
+
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.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)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const EdsTableStyle0 = edsTableCss;
+
+const EdsTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.handleResize = () => {
+            this.updateContainerWidth();
+        };
+        this.data = null;
+        this.endpoint = null;
+        this.config = {};
+        this.rowsPerPage = 10;
+        this.paginationEnabled = true;
+        this.searchEnabled = false;
+        this.hostWidth = undefined;
+        this.columnSize = 'default';
+        this.tbData = [];
+        this.columns = [];
+        this.currentPage = 1;
+        this.parsedConfig = {};
+        this.totalRows = 0;
+        this.searchQuery = '';
+        this.containerWidth = 0;
+    }
+    handleDataChange() {
+        this.parseData();
+    }
+    handleConfigChange() {
+        this.parseConfig();
+    }
+    componentWillLoad() {
+        this.parseConfig();
+        this.data ? this.parseData() : this.endpoint && this.fetchData();
+    }
+    componentDidLoad() {
+        this.updateContainerWidth();
+        window.addEventListener('resize', this.handleResize);
+        this.setupPaginationListener();
+    }
+    componentDidUpdate() {
+        this.setupPaginationListener();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    updateContainerWidth() {
+        // Use hostWidth prop if provided; otherwise, measure parent element
+        if (this.hostWidth && this.hostWidth.trim() !== '') {
+            this.containerWidth = Number(this.hostWidth);
+        }
+        else if (this.hostEl.parentElement instanceof HTMLElement) {
+            this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
+        }
+        else {
+            this.containerWidth = 400;
+        }
+    }
+    parseData() {
+        try {
+            this.tbData = parseData(this.data);
+            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.totalRows = this.tbData.length;
+            this.updateColumns();
+            this.currentPage = 1;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse data:', error);
+            this.tbData = [];
+        }
+    }
+    parseConfig() {
+        try {
+            //this.parsedConfig = parseData(this.config);
+            this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse config:', error);
+            this.parsedConfig = {};
+        }
+    }
+    async fetchData() {
+        try {
+            const response = await fetch(this.endpoint);
+            const data = await response.json();
+            this.data = data;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to fetch data:', error);
+        }
+    }
+    setupPaginationListener() {
+        if (!this.shouldEnablePagination()) {
+            return;
+        }
+        const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
+        if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
+            paginationEl.setAttribute('listener-attached', 'true');
+        }
+    }
+    getFilteredRows() {
+        return this.tbData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+    }
+    getPaginatedRows() {
+        const filteredRows = this.getFilteredRows();
+        this.totalRows = filteredRows.length;
+        const start = (this.currentPage - 1) * this.rowsPerPage;
+        return filteredRows.slice(start, start + this.rowsPerPage);
+    }
+    handlePageChange(newPage) {
+        this.currentPage = newPage;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
+            name: `${newPage}` || '',
+            action: 'page'
+        });
+    }
+    handleSearch(event) {
+        this.searchQuery = event.target.value;
+        this.currentPage = 1;
+        /*sendAnalytics({
+          category: 'ui-component',
+          parentContext: null,
+          tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
+          name: `${this.searchQuery}` || '',
+          action: 'page'
+        });*/
+    }
+    renderCell(value, column) {
+        var _a;
+        const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
+        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
+    }
+    shouldEnablePagination() {
+        return this.paginationEnabled && this.totalRows > this.rowsPerPage;
+    }
+    updateColumns() {
+        this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+    }
+    getVisibleColumnsCount() {
+        return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
+    }
+    divisionFactor() {
+        let divisionFactor = 1;
+        if (this.columnSize === 'medium') {
+            divisionFactor = 2;
+        }
+        else if (this.columnSize === 'large') {
+            divisionFactor = 4;
+        }
+        return divisionFactor;
+    }
+    render() {
+        // Use containerWidth state that is updated on resize.
+        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+        // Calculate the number of visible columns and the column width.
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
+        const paginatedRows = this.getPaginatedRows();
+        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+        return (h("div", { key: '81735ac374853c8c92b3f50e26263ff9d71b326c' }, this.searchEnabled && (h("div", { key: '0b2ab8dbb343033f605e2028890bd963cd650998' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+            // @ts-ignore
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'eb3eebe6fb124d4e1983b2fb7e636707817d36bd', class: "mt-20" }, h("table", { key: '03b312ac20bdec28843a46907a3cc4fba69f62ae', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'ccab58dc46ae765df28da97ded6b1dd14d45d7f1' }, h("tr", { key: '904a125aad610cebe42b0bce46615be38f0ee17a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            var _a;
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
+        }))), h("tbody", { key: 'a4c54c9c89d15546020dbb684e5486decde33f30' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            var _a;
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '2a248cbbe81ac8c1ad4dfbb49a9615f15931bac6', class: "mt-20" }, h("eds-pagination", { key: '11701d81922ca4c8b36fe82be32316a175eddbcd', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+    }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "data": ["handleDataChange", "parseData"],
+        "config": ["handleConfigChange"]
+    }; }
+};
+EdsTable.style = EdsTableStyle0;
+
+export { EdsPagination as eds_pagination, EdsTable as eds_table };

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

@@ -0,0 +1,52 @@
+import { r as registerInstance, h } from './index-fdb33359.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)}.absolute{position:absolute}.relative{position:relative}.z-0{z-index:0}.z-10{z-index:10}.inset-0{inset:0rem}.pointer-events-none{pointer-events:none}";
+const EdsProgressBarStyle0 = edsProgressBarCss;
+
+const EdsProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = 0;
+        this.rounded = true;
+    }
+    /**
+     * 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 0–100
+    }
+    render() {
+        const progressValue = Math.min(100, Math.max(0, this.value));
+        // Outer container classes (conditionally rounded)
+        const outerClasses = [
+            'outer',
+            'w-full',
+            'h-24',
+            'bg-default',
+            'border',
+            'border-softer',
+            'overflow-hidden',
+            this.rounded ? 'rounded-lg' : '',
+            'relative'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        // Fill bar classes (conditionally rounded only when >0)
+        const fillClasses = [
+            'inner',
+            'h-full',
+            'transition-all',
+            'duration-300',
+            'bg-accent',
+            progressValue > 0 && this.rounded ? 'rounded-lg' : '',
+            'z-0'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h("div", { key: '8760afff9f85f05fec52b0a7fb668661e49dc06f', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '06165b69fe7e170f4f61d9f95b5a44342d4ee67a', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '0c48e65c5a6cb0b4dff7a7e3e248052cdc29957d', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'fc6f7396cf741ba18d1b5d065bdd1b7bfff12abe', class: "text-default f-body-02" }, progressValue, "%"))));
+    }
+};
+EdsProgressBar.style = EdsProgressBarStyle0;
+
+export { EdsProgressBar as eds_progress_bar };

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, a as createEvent, h, g as getElement } from './index-9d277061.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fdb33359.js';
 
 const edsRatingCss = ":host{display:inline-block}.block{display:block}.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)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
+const EdsRatingStyle0 = edsRatingCss;
 
 const EdsRating = class {
     constructor(hostRef) {
@@ -44,7 +45,7 @@ const EdsRating = class {
         this.rating.emit(rating);
     }
     render() {
-        return (h("div", { key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '685ac01e4db577b07d00030b0c25e10b9b0defa8', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
@@ -54,6 +55,6 @@ const EdsRating = class {
     }
     get el() { return getElement(this); }
 };
-EdsRating.style = edsRatingCss;
+EdsRating.style = EdsRatingStyle0;
 
 export { EdsRating as eds_rating };

package/dist/{components/eds-section-heading.entry.js → esm/eds-section-core_2.entry.js}

@@ -1,4 +1,21 @@
-import { r as registerInstance, h } from './index-9d277061.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
+
+const edsSectionCoreCss = "";
+const EdsSectionCoreStyle0 = 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: 'ff0b28dffb8aca2ad0ac1ee3eea7ebda75078f96' }, h("eds-section-heading", { key: '23e9bb2b084c6b8a534dd310fbe10e0de0211187', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9cae6378bdb5304191d393967025570f94fdcdb2' })));
+    }
+};
+EdsSectionCore.style = EdsSectionCoreStyle0;
 
 const EdsSectionHeading = class {
     constructor(hostRef) {
@@ -25,13 +42,13 @@ const EdsSectionHeading = class {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '346654c0118e056276162b42723c6c163712ab4f', class: {
+        return (h(TagType, { key: 'bb32f87fd944ebf08ebcde3980c18cd4bed18783', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: 'c7d17fc22b3926495c799da0bc8bde7dc949e46a', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '0cd8ea8aada58e30675579c82ba130b40257c7c6', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 };
 
-export { EdsSectionHeading as eds_section_heading };
+export { EdsSectionCore as eds_section_core, EdsSectionHeading as eds_section_heading };

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, h, e as Host } from './index-9d277061.js';
+import { r as registerInstance, h, H as Host } from './index-fdb33359.js';
 
 const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}";
+const EdsSpinnerStyle0 = edsSpinnerCss;
 
 const EdsSpinner = class {
     constructor(hostRef) {
@@ -41,9 +42,9 @@ const EdsSpinner = class {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '1e1e4ea2734fff8a680e55ca5163e69d2000a55d' }, h("div", { key: 'acf09f69d43404f317240c0d24e644ec0d046cd7', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '3728629fdff738a0b753cd499dc26052b1e3cb7b', class: "spinner", style: spinnerStyle }))));
+        return (h(Host, { key: '214876a56949c147e74c1a7072406234c2fb1a02' }, h("div", { key: 'b75b639fa38aafaf13e1eb727e28c5e67f3edafe', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '87ba2ef7e1e9601ac0ae8132e9c891b4149a20b5', class: "spinner", style: spinnerStyle }))));
     }
 };
-EdsSpinner.style = edsSpinnerCss;
+EdsSpinner.style = EdsSpinnerStyle0;
 
 export { EdsSpinner as eds_spinner };

package/dist/{components → esm}/eds-splash-screen.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, a as createEvent, h, e as Host } from './index-9d277061.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-fdb33359.js';
 
 const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:200px;height:200px;margin-bottom:1rem}.content-container{position:relative;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}";
+const EdsSplashScreenStyle0 = edsSplashScreenCss;
 
 const EdsSplashScreen = class {
     constructor(hostRef) {
@@ -50,6 +51,6 @@ const EdsSplashScreen = class {
         "initPromise": ["watchInitPromise"]
     }; }
 };
-EdsSplashScreen.style = edsSplashScreenCss;
+EdsSplashScreen.style = EdsSplashScreenStyle0;
 
 export { EdsSplashScreen as eds_splash_screen };

package/dist/esm/eds-switch.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fdb33359.js';
+import { s as sendAnalytics } from './analytics-d99780e3.js';
+
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{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)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}";
+const EdsSwitchStyle0 = edsSwitchCss;
+
+const EdsSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uiswitch = createEvent(this, "uiswitch", 7);
+        this.toggleSwitch = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.uiswitch.emit(this.checked);
+            sendAnalytics({
+                category: 'ui-component',
+                tag: this.el.tagName.toLowerCase(),
+                name: this.checked ? this.labelOn : this.labelOff || '',
+                action: 'checked'
+            });
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.labelOn = '';
+        this.labelOff = '';
+    }
+    render() {
+        // Compute an accessible name based on state.
+        const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
+        return (h("div", { key: '442876be1bad7ea8c9e383bc68b192a2744c38f9', class: "switch-container" }, this.labelOff && h("span", { key: 'e4a7b01c0188d26e5b6524741b1c8ef66e357e35', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'f56b3762622671acf793568a96567193c38999c7', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+                switch: true,
+                'switch--checked': this.checked,
+                'switch--disabled': this.disabled
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: 'b76e89a1e37130542dd86ce3aed8c5690aeeda63', class: "switch-handle" })), this.labelOn && h("span", { key: '4e5d4f8a2f19bb612a17fa73e441e7e718b71508', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
+    }
+    get el() { return getElement(this); }
+};
+EdsSwitch.style = EdsSwitchStyle0;
+
+export { EdsSwitch as eds_switch };