@ebrains/components 0.9.2-beta → 0.9.3-beta

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

@@ -0,0 +1,252 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsImg` is a flexible image component with support for lazy loading, responsive image formats, and background effects during loading.
+ *
+ * Key Features:
+ * - Allows responsive images using the `srcset` and `sizes` attributes, with additional support for various formats.
+ * - Supports lazy loading and optimized loading behavior through `loading="lazy"` and `decoding="async"`.
+ * - Displays a background effect (`effect-bg-pattern`) while the image is loading, which fades once loading is complete.
+ *
+ * Props:
+ * - `src` (string): Required URL for the image source.
+ * - `alt` (string): Alternative text for accessibility.
+ * - `width`, `height` (number): Dimensions for the image in pixels.
+ * - `srcset` (string), `sizes` (string): Support for responsive image handling.
+ * - `formats` (Array): Array of objects for multiple image formats (e.g., `webp` or `jpeg`).
+ * - `lazyload` (boolean): Enables lazy loading; defaults to true.
+ * - `withBg` (boolean): Adds a background effect while the image is loading.
+ *
+ * This component is suitable for scenarios requiring optimized image loading and responsive images with smooth visual effects during loading.
+ */
+export class EdsImg {
+    constructor() {
+        this.img = null;
+        this.handleLoad = () => {
+            this.loaded = true;
+            this.showBg = false;
+        };
+        // On error, remove the background effect so users know the image failed to load.
+        this.handleError = () => {
+            this.loaded = true;
+            this.showBg = false;
+        };
+        this.handleTransitionEnd = () => {
+            this.showBg = false;
+        };
+        this.src = undefined;
+        this.alt = '';
+        this.width = undefined;
+        this.height = undefined;
+        this.srcset = undefined;
+        this.sizes = undefined;
+        this.formats = [];
+        this.lazyload = true;
+        this.withBg = true;
+        this.loaded = !this.lazyload;
+        this.showBg = this.withBg;
+    }
+    componentDidLoad() {
+        if (this.img && this.img.complete) {
+            this.loaded = true;
+            this.showBg = false;
+        }
+    }
+    render() {
+        const imgOpts = {};
+        if (this.lazyload) {
+            imgOpts['loading'] = 'lazy';
+            imgOpts['decoding'] = 'async';
+        }
+        return (h("div", { key: 'de3328e21b2b038984e74c08cd757cd85c7a7e01', class: {
+                'items-center justify-center': true,
+                'effect-bg-pattern': this.lazyload && this.showBg
+            } }, h("picture", { key: '4e623a25c64ce1b2c09adf3519f12bde04280ba3' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '6d87af22189017aa1e158c01a8295c98381a1ba1', ref: (el) => (this.img = el), class: {
+                'effect-opacity object-cover object-center': true,
+                'opacity-100': this.loaded,
+                'opacity-0': !this.loaded
+            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onError: this.handleError, onTransitionEnd: this.handleTransitionEnd })))));
+    }
+    static get is() { return "eds-img"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-img.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-img.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source URL of the image."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alternative text for the image.\nDefaults to an empty string so that decorative images are ignored by assistive technologies."
+                },
+                "attribute": "alt",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The width of the image in pixels."
+                },
+                "attribute": "width",
+                "reflect": false
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The height of the image in pixels."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "srcset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The srcset attribute for responsive images."
+                },
+                "attribute": "srcset",
+                "reflect": false
+            },
+            "sizes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The sizes attribute for responsive images."
+                },
+                "attribute": "sizes",
+                "reflect": false
+            },
+            "formats": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ type: string; srcset: string; media?: string }>",
+                    "resolved": "{ type: string; srcset: string; media?: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of image formats for different sources (e.g., webp, jpeg).\nExpects objects with `type`, `srcset`, and optional `media` attributes."
+                },
+                "defaultValue": "[]"
+            },
+            "lazyload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables lazy loading for the image. Defaults to true."
+                },
+                "attribute": "lazyload",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "withBg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a background effect while the image is loading."
+                },
+                "attribute": "with-bg",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loaded": {},
+            "showBg": {}
+        };
+    }
+    static get elementRef() { return "imgElement"; }
+}

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

@@ -0,0 +1,101 @@
+export default {
+    title: 'Components/Image',
+    component: 'eds-img',
+    argTypes: {
+        src: {
+            control: 'text',
+            description: 'The source URL of the image'
+        },
+        alt: {
+            control: 'text',
+            description: 'Alternative text for the image'
+        },
+        width: {
+            control: 'number',
+            description: 'Width of the image in pixels'
+        },
+        height: {
+            control: 'number',
+            description: 'Height of the image in pixels'
+        },
+        srcset: {
+            control: 'text',
+            description: 'Srcset attribute for responsive images'
+        },
+        sizes: {
+            control: 'text',
+            description: 'Sizes attribute for responsive images'
+        },
+        formats: {
+            control: 'object',
+            description: 'Image formats with type, srcset, and media attributes'
+        },
+        lazyload: {
+            control: 'boolean',
+            description: 'Whether the image should be lazy-loaded'
+        },
+        withBg: {
+            control: 'boolean',
+            description: 'Whether to show a background effect while loading'
+        }
+    },
+    args: {
+        src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+        alt: 'EBRAINS Bernstein Conference',
+        width: 400,
+        height: 300,
+        srcset: '',
+        sizes: '(max-width: 749px) 120px, 230px',
+        formats: [
+            {
+                type: 'image/webp',
+                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=webp&crop=2269%2C2268%2C924%2C0&w=200 200w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=webp&crop=2269%2C2268%2C924%2C0&w=400 400w, ...',
+                media: '(max-width: 899px)'
+            },
+            {
+                type: 'image/jpeg',
+                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=jpg&crop=2269%2C2268%2C924%2C0&w=200 200w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=jpg&crop=2269%2C2268%2C924%2C0&w=400 400w, ...',
+                media: '(min-width: 900px)'
+            }
+        ],
+        lazyload: true,
+        withBg: true
+    },
+    parameters: {}
+};
+export const Default = {
+    render: (args) => {
+        const edsImg = document.createElement('eds-img');
+        edsImg.src = args.src;
+        edsImg.alt = args.alt;
+        edsImg.width = args.width;
+        edsImg.height = args.height;
+        edsImg.srcset = args.srcset;
+        edsImg.sizes = args.sizes;
+        edsImg.formats = args.formats;
+        edsImg.lazyload = args.lazyload;
+        edsImg.withBg = args.withBg;
+        return edsImg;
+    },
+    args: {
+        src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+        alt: 'EBRAINS Bernstein Conference',
+        width: 400,
+        height: 300,
+        sizes: '(max-width: 749px) 120px, 230px',
+        formats: [
+            {
+                type: 'image/webp',
+                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?...',
+                media: '(max-width: 899px)'
+            },
+            {
+                type: 'image/jpeg',
+                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?...',
+                media: '(min-width: 900px)'
+            }
+        ],
+        lazyload: true,
+        withBg: true
+    }
+};

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

@@ -0,0 +1,317 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsInput {
+    constructor() {
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.innerVal = target.value;
+            if (this.maxLength && this.type === 'textarea') {
+                this.maxLengthReached = target.value.length >= this.maxLength;
+            }
+        };
+        this.name = undefined;
+        this.inputId = undefined;
+        this.placeholder = undefined;
+        this.disabled = false;
+        this.hasMessage = false;
+        this.error = false;
+        this.checked = undefined;
+        this.type = 'text';
+        this.required = false;
+        this.value = undefined;
+        this.icon = undefined;
+        this.maxLength = undefined;
+        this.options = [];
+        this.extraClass = undefined;
+        this.innerVal = '';
+        this.maxLengthReached = false;
+    }
+    onValueChanged(newValue) {
+        this.innerVal = newValue;
+    }
+    componentWillLoad() {
+        // Initialize innerVal with the value prop if it's set
+        if (this.value) {
+            this.innerVal = this.value;
+        }
+        else if (this.type === 'select' && this.options.length > 0) {
+            // If the type is select and there are options, set the initial value to the first option
+            this.innerVal = this.options[0].value;
+        }
+    }
+    getInputElement() {
+        return this.el.querySelector('input');
+    }
+    render() {
+        const withIcon = !!this.icon;
+        const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
+        return (h("div", { key: 'bb88b782042a37d2fcbd8a93f03056199d822559', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
+              ${this.extraClass || ''} 
+              input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
+              ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
+              ${this.error ? 'input-error' : ''}
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (h("span", { key: '7b1cc490731455d00d500308458e6b2cd320fccf', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'ce4d5548bc0fa1e681e3b74b03d071d73d8372d5', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+    }
+    static get is() { return "eds-input"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-id",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasMessage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-message",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checked",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ label: string; value: string }[]",
+                    "resolved": "{ label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "extraClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "extra-class",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "innerVal": {},
+            "maxLengthReached": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChanged"
+            }];
+    }
+}