@ebrains/components 2.4.0 → 3.0.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: 'a2dd7d5f2d615999cd5e7970a96117ed90bdcda3', class: this.class, innerHTML: youtube });
+        return h("span", { key: 'e07946107d2e0e5a0705bc52d27a436e0f4d5956', 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: '1ff909ca6fe3fe40ca5659cea033b404a45580fb', class: {
+        return (h("div", { key: '401f46b1ba986cbab6ef1617039f2315fb9d5e6b', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '92c92a5aaebd84d96a7bf8c291542d6a8cf4d896' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'ac8eb664987b1205d5a96c723840ac3ccd779ac1', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: 'cf2b2803efd4f8f0abb40cd427b1b29eff591b15' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'a256bcf9c87284391fdeebcf6dcdb1e95b7fc1f8', 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: 'a5f1b90a46927fc9b6396c7aa46b6871233f543a', class: "eds-input-dropzone-container" }, h("input", { key: '3eefd790de82dc7686f1eaeb70f974155830d0e1', 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: 'e9f2a824fd9df33e943b6b4ab80dff9b6b0c031d', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("svg", { key: 'f7535c3bb5e80e894520176de395da72732fa714', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'c16c8692d38cf348ec967b2a3617422afff7909a', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '13d7a4c1ae764156957c86c03dbeb4e18f4df227', points: "17 8 12 3 7 8" }), h("line", { key: 'ddd716e98d7defa01360ecaa726696141116c860', x1: "12", y1: "3", x2: "12", y2: "15" })), h("div", { key: '2ab160b911248c5db33b00100b2dbacfeebd6145', class: "dropzone-text" }, h("p", { key: '4dc47aaa591673211e7b6b2fbd84565a3986bf8e', class: "dropzone-primary" }, this.primaryText), h("p", { key: '92d44b3198860ad6509743a7c55a7c1f949fab70', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (h("div", { key: '84b2403ba93872292c4d15206d9fcbe1a71a21a5', 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 };