@ebrains/components 0.9.1-beta → 0.9.2-beta

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

@@ -1,252 +0,0 @@
-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: '41ae7d59a508fd792b536729e538b6b0ecd1b0ad', class: {
-                'items-center justify-center': true,
-                'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'eb242c3fa4f202ffd0cdc503bbb1d21736ea6190' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '3145595f53cf765234588e8c6efa038f21b29873', 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

@@ -1,101 +0,0 @@
-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

@@ -1,317 +0,0 @@
-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: 'c097f72ac45c1c15347a975fc72e07a6d6324c10', 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: 'dce957c8bad999f72e896710d465075c063e5a42', 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: 'b3037e2d393a2f0758049c2e9eec63879e0f71df', 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"
-            }];
-    }
-}