@ebrains/components 2.4.1 → 3.1.0

package/dist/components/eds-icon-youtube.js

@@ -8,7 +8,7 @@ const EdsIconYoutube$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconYoutube e
         this.class = '';
     }
     render() {
-        return h("span", { key: '3a868a9858e68a534e7eab57a7887dfc636d8b95', class: this.class, innerHTML: youtube });
+        return h("span", { key: '7ebb80fd84ed9ed7c227b1f1ddf213d0502160f9', class: this.class, innerHTML: youtube });
     }
 }, [0, "eds-icon-youtube", {
         "class": [1]

package/dist/components/eds-img2.js

@@ -45,10 +45,10 @@ const EdsImg = /*@__PURE__*/ proxyCustomElement(class EdsImg extends HTMLElement
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: '20e754d7535484aedde364592c7a08a68e760b7d', class: {
+        return (h("div", { key: '122ae0673a7a2c9afd88cdcf8a83b52c11f0643e', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'c6b1561f51587341af50b4129242424961b13788' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '136c7a183750f61d237fd0845750e70f38603f48', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: 'b0bb1af0c95375db18bd45453016ee2fd78a6e2a' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '2a8500ea92db1a846f0f6dbb41fa664c3d514f19', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded

package/dist/components/{eds-icon-chevron-up.d.ts → eds-input-dropzone.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsIconChevronUp extends Components.EdsIconChevronUp, HTMLElement {}
-export const EdsIconChevronUp: {
-    prototype: EdsIconChevronUp;
-    new (): EdsIconChevronUp;
+interface EdsInputDropzone extends Components.EdsInputDropzone, HTMLElement {}
+export const EdsInputDropzone: {
+    prototype: EdsInputDropzone;
+    new (): EdsInputDropzone;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,6 @@
+import { E as EdsInputDropzone$1, d as defineCustomElement$1 } from './eds-input-dropzone2.js';
+
+const EdsInputDropzone = EdsInputDropzone$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsInputDropzone, defineCustomElement };

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

@@ -0,0 +1,133 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const edsInputDropzoneCss = ".eds-input-dropzone-container{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;max-width:100%}.eds-input-dropzone-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.eds-input-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%;min-height:200px;padding:2rem;border:2px dashed var(--color-border-soft, #d0d0d0);border-radius:8px;background-color:var(--color-bg-inverse, #ffffff);cursor:pointer;transition:all 0.2s ease;outline:none;box-sizing:border-box}.eds-input-dropzone:hover:not(.disabled){border-color:var(--color-border-strong, #07140D);background-color:var(--color-bg-softer, #ECECEC)}.eds-input-dropzone.dragging:not(.disabled){border-color:var(--color-accent, #00FF9D);background-color:var(--color-bg-softest, #F8F8F8);border-width:3px}.eds-input-dropzone.disabled{opacity:0.5;cursor:not-allowed;background-color:var(--color-bg-disabled, #f5f5f5)}.eds-input-dropzone:focus-visible{outline:2px solid var(--color-accent, #00FF9D);outline-offset:2px}.dropzone-icon{width:48px;height:48px;color:var(--color-text-light, #7A7B7A);flex-shrink:0}.eds-input-dropzone.dragging .dropzone-icon{color:var(--color-accent, #00FF9D)}.dropzone-text{display:flex;flex-direction:column;align-items:center;gap:0.25rem;text-align:center}.dropzone-primary{font-family:var(--font-family, 'IBM Plex Sans', sans-serif);font-size:1rem;font-weight:500;color:var(--color-text-default, #07140D);margin:0}.dropzone-secondary{font-family:var(--font-family, 'IBM Plex Sans', sans-serif);font-size:0.875rem;font-weight:400;color:var(--color-text-light, #7A7B7A);margin:0}.eds-input-dropzone-chips{display:flex;flex-wrap:wrap;gap:0.5rem;width:100%}.eds-input-dropzone-chip{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.75rem;background-color:var(--color-bg-softer, #ECECEC);border-radius:100px;font-size:0.75rem;color:var(--color-text-default, #07140D)}.file-chip-icon{width:14px;height:14px;color:var(--color-text-light, #7A7B7A);flex-shrink:0}.eds-input-dropzone-chip-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.eds-input-dropzone-chip-size{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-size:0.625rem;color:var(--color-text-light, #7A7B7A);flex-shrink:0}.eds-input-dropzone-chip-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;color:var(--color-text-light, #7A7B7A);cursor:pointer;transition:color 0.2s ease;flex-shrink:0}.eds-input-dropzone-chip-remove:hover:not(:disabled){color:var(--color-error, #e53935)}.eds-input-dropzone-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.eds-input-dropzone-chip-remove svg{width:14px;height:14px}@media (max-width: 640px){.eds-input-dropzone{min-height:160px;padding:1.5rem}.dropzone-icon{width:40px;height:40px}.dropzone-primary{font-size:0.875rem}.dropzone-secondary{font-size:0.75rem}.eds-input-dropzone-chip-name{max-width:120px}}";
+const EdsInputDropzoneStyle0 = edsInputDropzoneCss;
+
+const EdsInputDropzone = /*@__PURE__*/ proxyCustomElement(class EdsInputDropzone extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.edsfile = createEvent(this, "edsfile", 7);
+        this.handleDropzoneClick = () => {
+            var _a;
+            if (!this.disabled) {
+                (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
+        this.handleFileSelect = (event) => {
+            const input = event.target;
+            if (!input.files)
+                return;
+            this.addFiles(Array.from(input.files));
+        };
+        this.handleDragOver = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!this.disabled) {
+                this.isDragging = true;
+            }
+        };
+        this.handleDragLeave = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isDragging = false;
+        };
+        this.handleDrop = (event) => {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            this.isDragging = false;
+            if (this.disabled)
+                return;
+            const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+            if (files && files.length > 0) {
+                this.addFiles(Array.from(files));
+            }
+        };
+        this.handleRemoveFile = (id) => {
+            this.selectedFiles = this.selectedFiles.filter((item) => item.id !== id);
+            this.emitFileChange();
+        };
+        this.name = undefined;
+        this.inputId = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.multiple = true;
+        this.accept = undefined;
+        this.maxFileSize = undefined;
+        this.primaryText = 'Drag and drop files here';
+        this.secondaryText = 'or click to browse';
+        this.selectedFiles = [];
+        this.isDragging = false;
+    }
+    addFiles(newFiles) {
+        const fileItems = newFiles.map((file) => ({
+            file,
+            id: `${file.name}-${Date.now()}-${Math.random()}`
+        }));
+        if (this.multiple) {
+            this.selectedFiles = [...this.selectedFiles, ...fileItems];
+        }
+        else {
+            this.selectedFiles = fileItems.slice(0, 1);
+        }
+        this.emitFileChange();
+    }
+    emitFileChange() {
+        const files = this.selectedFiles.map((item) => item.file);
+        this.edsfile.emit({ files });
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+    }
+    getFileIcon(filename) {
+        var _a;
+        const ext = (_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'];
+        if (imageExts.includes(ext || '')) {
+            // Image icon
+            return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })));
+        }
+        // Document icon (default)
+        return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" })));
+    }
+    render() {
+        const dropzoneClass = `eds-input-dropzone ${this.isDragging ? 'dragging' : ''} ${this.disabled ? 'disabled' : ''}`;
+        return (h("div", { key: '8c6d9cdd919e72f5e85a7b01a2db3cb6fadface0', class: "eds-input-dropzone-container" }, h("input", { key: 'fb643c39fa588971f825a01b20e8da6ac2da7d36', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-dropzone-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("div", { key: 'fd000cfb95b10eb54798ea5575810692c8cce65d', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("svg", { key: 'ed7588f87e4182351f5301992ae582df1f21be5e', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '9977271ac6bb26c6d642708eb6a7d2f2ca242dcc', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: 'f32b1ff2bea2718e075d78985837ba71acf23ce9', points: "17 8 12 3 7 8" }), h("line", { key: '326bc6f0e24c191a26859567653f807c81745a77', x1: "12", y1: "3", x2: "12", y2: "15" })), h("div", { key: 'f880855ecf537d527663101a5348591f975e7074', class: "dropzone-text" }, h("p", { key: '4747da3e157c6b1c3e56774867fc0258e2e77059', class: "dropzone-primary" }, this.primaryText), h("p", { key: '7852be7ecdcdfabf5fed632065b14128941461ee', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (h("div", { key: '36347980293d2ea800a845a4ab5bb9c28fedc485', class: "eds-input-dropzone-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-dropzone-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-dropzone-chip-name" }, item.file.name), h("span", { class: "eds-input-dropzone-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-dropzone-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+    }
+    get hostEl() { return this; }
+    static get style() { return EdsInputDropzoneStyle0; }
+}, [1, "eds-input-dropzone", {
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "disabled": [4],
+        "required": [4],
+        "multiple": [4],
+        "accept": [1],
+        "maxFileSize": [2, "max-file-size"],
+        "primaryText": [1, "primary-text"],
+        "secondaryText": [1, "secondary-text"],
+        "selectedFiles": [32],
+        "isDragging": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-input-dropzone"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-input-dropzone":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsInputDropzone);
+            }
+            break;
+    } });
+}
+
+export { EdsInputDropzone as E, defineCustomElement as d };