@ebrains/components 0.9.2-beta → 1.0.0

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

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+export class EdsProgressBar {
+    constructor() {
+        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, "%"))));
+    }
+    static get is() { return "eds-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-progress-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The progress value (0-100)."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render with rounded corners."
+                },
+                "attribute": "rounded",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "updateValue": {
+                "complexType": {
+                    "signature": "(newValue: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "newValue",
+                            "type": "number",
+                            "docs": "The new progress value (0-100)."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to update the progress value externally.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "newValue The new progress value (0-100)."
+                        }]
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,24 @@
+export default {
+    title: 'Components/Progress Bar',
+    component: 'eds-progress-bar',
+    argTypes: {
+        value: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 100
+            },
+            description: 'The progress value (0-100)'
+        },
+        rounded: { control: 'boolean' }
+    },
+    args: {
+        value: 50 // Default value
+    }
+};
+export const Default = {
+    render: (args) => `<eds-progress-bar value="${args.value}" rounded="${args.rounded}"></eds-progress-bar>`,
+    args: {
+        value: 50 // Default progress value for the story
+    }
+};

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

@@ -0,0 +1,79 @@
+:host {
+    display: inline-block;
+}
+
+.block {
+    display: block;
+}
+
+.stars {
+    display: flex;
+    gap: 0.25rem;
+    cursor: pointer;
+}
+
+.star {
+    color: var(--star-empty-color, #ccc);
+    /* Default empty star color */
+    transition: color 0.2s ease-in-out;
+}
+
+.star.filled {
+    color: var(--green-500);
+    /* Default filled star color */
+}
+
+.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)));
+}

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

@@ -0,0 +1,126 @@
+import { h } from "@stencil/core";
+export class EdsRating {
+    constructor() {
+        this.ratingType = 'star';
+        this.ratingCount = 5;
+        this.selectedRating = 0;
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((btn) => {
+            this.emitContext(btn);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb 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: this.selectedRating
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
+    /**
+     * Handles the click event on a star.
+     * @param rating - The selected rating value.
+     */
+    handleClick(rating) {
+        this.selectedRating = rating;
+        this.rating.emit(rating);
+    }
+    render() {
+        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.
+            return (h("eds-button", { icon: this.ratingType, role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": this.ratingType, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            }));
+        })));
+    }
+    static get is() { return "eds-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-rating.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ratingType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'star' | 'thumbs-up' | 'thumbs-down'",
+                    "resolved": "\"star\" | \"thumbs-down\" | \"thumbs-up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of icon to display. Can be \"stars\" or \"thumbs\"."
+                },
+                "attribute": "rating-type",
+                "reflect": false,
+                "defaultValue": "'star'"
+            },
+            "ratingCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars in the rating system."
+                },
+                "attribute": "rating-count",
+                "reflect": false,
+                "defaultValue": "5"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rating",
+                "name": "rating",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the rating is changed."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,43 @@
+export default {
+    title: 'Components/Rating',
+    component: 'eds-rating',
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['star', 'thumbs-up', 'thumbs-down'],
+            description: 'The type of rating icon to display.'
+        },
+        count: {
+            control: { type: 'number', min: 1 },
+            description: 'The total number of rating items.'
+        }
+    },
+    args: {
+        type: 'star',
+        count: 5
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-rating
+        rating-type="${args.type}"
+        rating-count="${args.count}"
+      ></eds-rating>
+    `,
+    args: {
+        type: 'star',
+        count: 5
+    }
+};
+export const TenItems = {
+    render: (args) => `
+      <eds-rating
+        type="${args.type}"
+        count="${args.count}"
+      ></eds-rating>
+    `,
+    args: {
+        type: 'star',
+        count: 10
+    }
+};

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

@@ -0,0 +1,75 @@
+export default {
+    title: 'Components/Section/Section Core',
+    component: 'eds-section-core',
+    argTypes: {
+        tag: {
+            control: 'select',
+            options: ['div', 'section'],
+            description: 'The HTML tag used for the section. Can be either "div" or "section".',
+            defaultValue: 'section'
+        },
+        sectionTitle: {
+            control: 'text',
+            description: 'The title of the section, displayed as the section heading.',
+            defaultValue: 'Section Title'
+        },
+        headingLevel: {
+            control: 'select',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            description: 'The heading level for the section title, such as "h1", "h2", etc.',
+            defaultValue: 'h2'
+        }
+    }
+};
+const Template = (args) => `
+    <eds-section-core
+      tag="${args.tag}"
+      section-title="${args.sectionTitle}"
+      heading-level="${args.headingLevel}"
+    >
+      <p>This is the content inside the section.</p>
+    </eds-section-core>
+  `;
+export const Default = Template.bind({});
+Default.args = {
+    tag: 'section',
+    sectionTitle: 'Default Section Title',
+    headingLevel: 'h2'
+};
+/*const TemplateForm = (args) => `
+  <eds-section-core
+    tag="${args.tag}"
+    section-title="${args.sectionTitle}"
+    heading-level="${args.headingLevel}"
+  >
+      <eds-form
+        name="extended-form"
+        endpoint="https://example.com/api/submit"
+        fields='[
+          {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
+          {"name": "email", "label": "Email", "type": "email", "required": true},
+          {"name": "password", "label": "Password", "type": "password", "required": true, "maxlength": 50},
+          {"name": "bio", "label": "Biography", "type": "textarea", "required": true, "maxlength": 300},
+          {"name": "role", "label": "Role", "type": "select", "required": true, "options": [
+            {"label": "Admin", "value": "admin"},
+            {"label": "Editor", "value": "editor"},
+            {"label": "Viewer", "value": "viewer"}
+          ]},
+          {"name": "hiddenField", "type": "hidden", "value": "hiddenValue"}
+        ]'
+        success-message="Form submitted successfully!"
+        error-message="Please fix the errors in the form."
+        submit-btn="true"
+        small-alert="false"
+        set-form-url="true"
+      ></eds-form>
+
+  </eds-section-core>
+`;
+
+export const WithForm = TemplateForm.bind({});
+WithForm.args = {
+  tag: 'section',
+  sectionTitle: 'This a slotted Form',
+  headingLevel: 'h2'
+};*/

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

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
+ *
+ * Key Features:
+ * - Allows dynamic selection of HTML tag (`div` or `section`) for the wrapper.
+ * - Configurable section title and heading level for accessibility and hierarchy.
+ * - Passes section title to an internal heading component (`eds-section-heading`).
+ *
+ * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
+ */
+/**
+ * @internal
+ */
+export class EdsSectionCore {
+    constructor() {
+        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' })));
+    }
+    static get is() { return "eds-section-core"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-section-core.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-section-core.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'div' | 'section'",
+                    "resolved": "\"div\" | \"section\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML tag to be used for the section. Can be either 'div' or 'section'.\nDefault is 'section'."
+                },
+                "attribute": "tag",
+                "reflect": false,
+                "defaultValue": "'section'"
+            },
+            "sectionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the section. This will be passed to the section heading component.\nDefault is an empty string."
+                },
+                "attribute": "section-title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading level for the section title, such as 'h1', 'h2', etc.\nDefault is 'h2'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h2'"
+            }
+        };
+    }
+}