@ebrains/components 0.0.1-alpha.0 → 0.3.0-alpha.0

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

@@ -1,53 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
-
-const edsImgCss = "/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n    display: block;\n    /* 1 */\n    vertical-align: middle;\n    /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n    max-width: 100%;\n    height: auto;\n}\n\n.items-center {\n    align-items: center;\n}\n\n.justify-center {\n    justify-content: center;\n}\n\n.justify-between {\n    justify-content: space-between;\n}\n\n/* endregion */\n/* region BG */\n.effect-bg-pattern {\n    position: relative;\n    z-index: 1;\n\n    &::before {\n        position: absolute;\n        content: '';\n        z-index: -1;\n        inset: 0;\n        background-color: rgba(208, 208, 208, 0.75);\n        opacity: 0.75;\n        background-image: repeating-linear-gradient(45deg, #F5F5F5 25%, transparent 25%, transparent 75%, #F5F5F5 75%, #F5F5F5), repeating-linear-gradient(45deg, #F5F5F5 25%, #D0D0D0 25%, #D0D0D0 75%, #F5F5F5 75%, #F5F5F5);\n        background-position: 0 0, 8px 8px;\n        background-size: 16px 16px;\n    }\n}\n\n.effect-opacity {\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 300ms;\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.object-cover {\n    -o-object-fit: cover;\n    object-fit: cover;\n}\n\n.object-center {\n    -o-object-position: center;\n    object-position: center;\n}\n\n.opacity-0 {\n    opacity: 0;\n}\n\n.opacity-100 {\n    opacity: 1;\n}";
-
-const EdsImg = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.img = null;
-        this.handleLoad = () => {
-            this.loaded = true;
-            this.showBg = false;
-        };
-        this.handleTransitionEnd = () => {
-            this.showBg = false;
-        };
-        this.src = undefined;
-        this.alt = undefined;
-        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: 'fde8a77bb251e3be2ec3a42b8d83f585eae65b2c', class: {
-                'items-center justify-center': true,
-                'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'e512cbd9134f14f5418856cf451cddfb93ca1760' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '98339035b8d055d8bb8de654ce1f4ba410ef3865', 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, onTransitionEnd: this.handleTransitionEnd })))));
-    }
-    get imgElement() { return getElement(this); }
-};
-EdsImg.style = edsImgCss;
-
-export { EdsImg as eds_img };

package/dist/components/eds-input-footer.entry.js

@@ -1,17 +0,0 @@
-import { r as registerInstance, h } from './index-b384416e.js';
-
-const EdsInputFooter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.name = undefined;
-        this.errorMessage = undefined;
-        this.message = undefined;
-        this.error = false;
-        this.link = undefined;
-    }
-    render() {
-        return (h("div", { key: '9ce8da179446c0302754f1285b3733d928da042f', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: 'aab7e8ded78e48864b2245603c3987a6ec3f3959', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '152a06328c6cbb40f0d52310ac3ce761de21a26c', icon: "warning" }), h("p", { key: '658825aa4649ad83a150a0dc92d37f1b078de4c3', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '378ae9ef876e087f66302547958af4543262a441', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'cd396f03bdbd12a47544a44de17cfce35b8d206a', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
-    }
-};
-
-export { EdsInputFooter as eds_input_footer };

package/dist/components/eds-input-label.entry.js

@@ -1,16 +0,0 @@
-import { r as registerInstance, h } from './index-b384416e.js';
-
-const EdsInputLabel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.label = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.disabled = false;
-    }
-    render() {
-        return (h("label", { key: 'd83f8267317c2d5ef500460e938b166c0e6517b1', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '85ad9e44af342c191d8aa7aeb7e4c6288c544d6d' }, h("span", { key: 'b350ee023f80bc9d5f24ef2fac9f74b2461d27b9', "aria-hidden": "true" }, "*"), h("span", { key: 'af55a83d8998ac70817cb2f7cebfb74f276a6387', class: "sr-only" }, "required")))));
-    }
-};
-
-export { EdsInputLabel as eds_input_label };

package/dist/components/eds-input-range.entry.js

@@ -1,35 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
-
-const EdsInputRange = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.onInput = (e) => {
-            const target = e.target;
-            this.sliderVal = parseInt(target.value, 10); // Update the slider value dynamically
-        };
-        this.name = undefined;
-        this.inputId = 'range';
-        this.disabled = false;
-        this.required = false;
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
-        this.sliderVal = this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
-    }
-    componentDidLoad() {
-        // Assign the native input element after the component loads
-        this.inputElement = this.el.querySelector('input');
-    }
-    async getInputElement() {
-        // Return the native input element
-        return this.inputElement;
-    }
-    render() {
-        return (h("div", { key: '8927f714cae6dd2237202190eade7b31cc7adc03', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '1b3ba13453992c84e00d3b3261a9d2008f45634f', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input",
-            //aria-describedby={describedBy}
-            onInput: this.onInput }), h("p", { key: 'e04c275e51710ae09eec1603911446e1e65bf648', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
-    }
-    get el() { return getElement(this); }
-};
-
-export { EdsInputRange as eds_input_range };

package/dist/components/eds-input-search.entry.js

@@ -1,37 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
-
-const EdsInputSearch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.onInput = (e) => {
-            // eslint-disable-next-line
-            console.log('on input:', e);
-        };
-        this.onChange = (e) => {
-            // eslint-disable-next-line
-            console.log('on change:', e.target.value);
-        };
-        this.name = undefined;
-        this.inputId = 'search';
-        this.placeholder = 'Search...';
-        this.value = undefined;
-        this.disabled = false;
-        this.required = false;
-    }
-    componentDidLoad() {
-        // Assign the native input element after the component loads
-        this.inputElement = this.el.querySelector('input');
-    }
-    async getInputElement() {
-        // Return the native input element
-        return this.inputElement;
-    }
-    render() {
-        return (h("div", { key: '4a6a629fcaefa3ec3bbfb577e1a1f85e8d4f0ee0', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '7cb203fabdf6f1160d95d7ca125f0ca33affd1c6', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'fe32c40b6e438526b8ef6a74783a6455fb91a467', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
-            //aria-describedby={describedBy}
-            onInput: this.onInput, onChange: this.onChange })));
-    }
-    get el() { return getElement(this); }
-};
-
-export { EdsInputSearch as eds_input_search };

package/dist/components/eds-input-select.entry.js

@@ -1,26 +0,0 @@
-import { r as registerInstance, a as createEvent, h } from './index-b384416e.js';
-
-const EdsInputSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.changeEvent = createEvent(this, "changeEvent", 7);
-        this.handleChange = (event) => {
-            const target = event.target;
-            this.changeEvent.emit(target.value);
-        };
-        this.inputId = undefined;
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.disabled = false;
-        this.hasMessage = false;
-        this.error = false;
-        this.required = false;
-        this.options = [];
-        this.value = undefined;
-    }
-    render() {
-        return (h("div", { key: '9aaa3bf4491078f5b5df6f5f0d3d5f3739f25716', class: "relative" }, h("select", { key: '5f860de772d8d92eb36648bdaaca0c93146e8a68', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '2d1e8fa6c5583e0580cbd92d731b731cdd7ecca8', value: "", disabled: true, hidden: true }, "Please select ", this.name), this.options.map((option, index) => (h("option", { key: index, value: option.value }, option.label)))), h("span", { key: 'f62edaae154ce443c964849689b5dc92d9303958', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '07d186b6e0a6742a4f6ce39dd275ff1a6f905927', class: "w-20 h-20", icon: "chevron-right" }))));
-    }
-};
-
-export { EdsInputSelect as eds_input_select };

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

@@ -1,64 +0,0 @@
-import { r as registerInstance, a as createEvent, h, g as getElement } from './index-b384416e.js';
-
-const EdsInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.changeEvent = createEvent(this, "changeEvent", 7);
-        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.changeEvent.emit(e);
-        };
-        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: 'aed6c5b0bc70ed712c74041b1bafce771c0da2d3', 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: '2a95bcd05820c60e428c9e5de3cc2c3fc6ceb3db', 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: 'd20b1b17f45c77e1e7ad63ca5cb12db777074601', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["onValueChanged"]
-    }; }
-};
-
-export { EdsInput as eds_input };