@teranga-ds/components 0.1.0

package/dist/collection/components/tg-file-upload/tg-file-upload.css

@@ -0,0 +1,172 @@
+:host {
+  display: block;
+}
+
+.tg-file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-sm, 12px);
+  font-family: var(--tg-font-family, sans-serif);
+}
+
+/* Drop zone */
+.tg-file-upload__dropzone {
+  border: 2px dashed var(--tg-color-neutral-300, #d1d5db);
+  border-radius: var(--tg-radius-lg, 12px);
+  padding: var(--tg-spacing-xl, 32px) var(--tg-spacing-lg, 24px);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color var(--tg-duration-fast, 150ms), background var(--tg-duration-fast, 150ms);
+  background: var(--tg-color-neutral-50, #f9fafb);
+}
+
+.tg-file-upload__dropzone:hover {
+  border-color: var(--tg-color-primary, #00853F);
+  background: var(--tg-color-primary-50, #ecfdf5);
+}
+
+.tg-file-upload__dropzone--active {
+  border-color: var(--tg-color-primary, #00853F);
+  background: var(--tg-color-primary-50, #ecfdf5);
+  border-style: solid;
+}
+
+.tg-file-upload__dropzone--error {
+  border-color: var(--tg-color-danger, #dc2626);
+  background: #fef2f2;
+}
+
+.tg-file-upload__icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto var(--tg-spacing-sm, 12px);
+  color: var(--tg-color-neutral-400, #9ca3af);
+  transition: color var(--tg-duration-fast, 150ms);
+}
+
+.tg-file-upload__dropzone:hover .tg-file-upload__icon,
+.tg-file-upload__dropzone--active .tg-file-upload__icon {
+  color: var(--tg-color-primary, #00853F);
+}
+
+.tg-file-upload__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.tg-file-upload__text {
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  color: var(--tg-color-text-secondary, #6b7280);
+}
+
+.tg-file-upload__text strong {
+  color: var(--tg-color-primary, #00853F);
+  font-weight: var(--tg-font-weight-semibold, 600);
+}
+
+.tg-file-upload__hint {
+  font-size: 0.75rem;
+  color: var(--tg-color-neutral-400, #9ca3af);
+  margin-top: var(--tg-spacing-2xs, 4px);
+}
+
+/* File list */
+.tg-file-upload__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-xs, 8px);
+}
+
+.tg-file-upload__file {
+  display: flex;
+  align-items: center;
+  gap: var(--tg-spacing-sm, 12px);
+  padding: var(--tg-spacing-sm, 12px);
+  background: var(--tg-color-surface, #fff);
+  border: 1px solid var(--tg-color-neutral-200, #e5e7eb);
+  border-radius: var(--tg-radius-md, 8px);
+  animation: tg-file-upload-in var(--tg-duration-normal, 200ms) var(--tg-ease-out, ease-out);
+}
+
+@keyframes tg-file-upload-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.tg-file-upload__file-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--tg-radius-md, 8px);
+  background: var(--tg-color-primary-50, #ecfdf5);
+  color: var(--tg-color-primary, #00853F);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tg-file-upload__file-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.tg-file-upload__file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.tg-file-upload__file-name {
+  font-size: var(--tg-font-size-sm, 0.8125rem);
+  font-weight: var(--tg-font-weight-medium, 500);
+  color: var(--tg-color-text, #111827);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tg-file-upload__file-size {
+  font-size: 0.75rem;
+  color: var(--tg-color-text-secondary, #6b7280);
+}
+
+.tg-file-upload__file-remove {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--tg-color-text-secondary, #6b7280);
+  padding: var(--tg-spacing-2xs, 4px);
+  border-radius: var(--tg-radius-sm, 4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--tg-duration-fast, 150ms), background var(--tg-duration-fast, 150ms);
+  flex-shrink: 0;
+}
+
+.tg-file-upload__file-remove:hover {
+  color: var(--tg-color-danger, #dc2626);
+  background: #fef2f2;
+}
+
+.tg-file-upload__file-remove:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-file-upload__file-remove svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Error message */
+.tg-file-upload__error {
+  font-size: 0.75rem;
+  color: var(--tg-color-danger, #dc2626);
+  padding: 0 var(--tg-spacing-2xs, 4px);
+}
+
+/* Hidden input */
+.tg-file-upload__input {
+  display: none;
+}

package/dist/collection/components/tg-file-upload/tg-file-upload.js

@@ -0,0 +1,240 @@
+import { h, Host } from "@stencil/core";
+export class TgFileUpload {
+    constructor() {
+        this.multiple = false;
+        this.maxSize = 10; // MB
+        this.maxFiles = 5;
+        this.label = 'Déposez vos fichiers ici';
+        this.files = [];
+        this.dragActive = false;
+        this.error = null;
+        this.addFiles = (fileList) => {
+            if (!fileList)
+                return;
+            const arr = Array.from(fileList);
+            const err = this.validate(arr);
+            if (err) {
+                this.error = err;
+                return;
+            }
+            this.error = null;
+            const newFiles = arr.map(f => ({
+                file: f,
+                id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            }));
+            this.files = [...this.files, ...newFiles];
+            this.tgFilesChange.emit(this.files.map(f => f.file));
+        };
+        this.removeFile = (id) => {
+            this.files = this.files.filter(f => f.id !== id);
+            this.error = null;
+            this.tgFilesChange.emit(this.files.map(f => f.file));
+        };
+        this.handleDrop = (e) => {
+            var _a, _b;
+            e.preventDefault();
+            this.dragActive = false;
+            this.addFiles((_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : null);
+        };
+        this.handleDragOver = (e) => {
+            e.preventDefault();
+            this.dragActive = true;
+        };
+        this.handleDragLeave = () => {
+            this.dragActive = false;
+        };
+    }
+    formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1048576)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / 1048576).toFixed(1)} MB`;
+    }
+    validate(fileList) {
+        for (const f of fileList) {
+            if (f.size > this.maxSize * 1048576) {
+                return `Le fichier "${f.name}" dépasse la taille maximale de ${this.maxSize} Mo`;
+            }
+        }
+        if (this.files.length + fileList.length > this.maxFiles) {
+            return `Maximum ${this.maxFiles} fichier${this.maxFiles > 1 ? 's' : ''} autorisé${this.maxFiles > 1 ? 's' : ''}`;
+        }
+        return null;
+    }
+    render() {
+        const uploadIcon = `<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 32l0 4a4 4 0 004 4h24a4 4 0 004-4v-4"/><polyline points="16 16 24 8 32 16"/><line x1="24" y1="8" x2="24" y2="32"/></svg>`;
+        const fileIcon = `<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M10 2H5a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7l-5-5z"/><polyline points="10 2 10 7 15 7"/></svg>`;
+        const removeIcon = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>`;
+        return (h(Host, { key: '77cf3751962242d553184585a76a7f87bf736df7' }, h("div", { key: '552c2b59d032b752bd6d6924e21ec7700a3da16e', class: "tg-file-upload" }, h("div", { key: 'e26907046c0bda2fe4a2c5a490248d55b7e340bf', class: {
+                'tg-file-upload__dropzone': true,
+                'tg-file-upload__dropzone--active': this.dragActive,
+                'tg-file-upload__dropzone--error': !!this.error,
+            }, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onClick: () => this.inputRef.click() }, h("div", { key: 'affad26d9f57aaca4abc5e71810cf80d98272807', class: "tg-file-upload__icon", innerHTML: uploadIcon }), h("div", { key: 'be3e1fdc89bed47844e280d8116c4d3b9c11e342', class: "tg-file-upload__text" }, h("strong", { key: '7fa44dba9212c9622eab4a35e7d6e1e78985c222' }, "Cliquez pour choisir"), " ou glissez-d\u00E9posez"), this.hint && h("div", { key: '7be94286d4723c79738348b7a18f29de48df8365', class: "tg-file-upload__hint" }, this.hint)), h("input", Object.assign({ key: '176b2e8ec8cd4fa436de45e6d1b94e482c8359c6', class: "tg-file-upload__input", type: "file" }, (this.accept ? { accept: this.accept } : {}), { multiple: this.multiple, ref: el => (this.inputRef = el), onChange: e => this.addFiles(e.target.files) })), this.error && h("div", { key: '8fffd203e887c00f9574b39477104d3237285bd6', class: "tg-file-upload__error" }, this.error), this.files.length > 0 && (h("div", { key: '686f996491f2a54ed8c2ae760d88337abd77cdb9', class: "tg-file-upload__list" }, this.files.map(f => (h("div", { class: "tg-file-upload__file", key: f.id }, h("div", { class: "tg-file-upload__file-icon", innerHTML: fileIcon }), h("div", { class: "tg-file-upload__file-info" }, h("div", { class: "tg-file-upload__file-name" }, f.file.name), h("div", { class: "tg-file-upload__file-size" }, this.formatSize(f.file.size))), h("button", { class: "tg-file-upload__file-remove", onClick: () => this.removeFile(f.id), "aria-label": "Supprimer", innerHTML: removeIcon })))))))));
+    }
+    static get is() { return "tg-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size",
+                "defaultValue": "10"
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-files",
+                "defaultValue": "5"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'D\u00E9posez vos fichiers ici'"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "files": {},
+            "dragActive": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgFilesChange",
+                "name": "tgFilesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/tg-global-loader/tg-global-loader.css

@@ -0,0 +1,8 @@
+:host { display: contents; }
+.tg-gl-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999; overflow: hidden; }
+.tg-gl-bar__track { width: 40%; height: 100%; background: var(--tg-color-primary); border-radius: var(--tg-radius-full); animation: tg-gl-slide 1.2s ease-in-out infinite; }
+@keyframes tg-gl-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
+.tg-gl-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tg-spacing-3); font-family: var(--tg-font-family-sans); }
+.tg-gl-overlay__spinner { width: 2.5rem; height: 2.5rem; border: 3px solid var(--tg-color-border); border-top-color: var(--tg-color-primary); border-radius: 50%; animation: tg-gl-spin 0.7s linear infinite; }
+@keyframes tg-gl-spin { to { transform: rotate(360deg); } }
+.tg-gl-overlay__label { font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); }

package/dist/collection/components/tg-global-loader/tg-global-loader.js

@@ -0,0 +1,90 @@
+import { h, Host } from "@stencil/core";
+export class TgGlobalLoader {
+    constructor() {
+        this.active = false;
+        this.variant = 'bar';
+    }
+    render() {
+        if (!this.active)
+            return h(Host, null);
+        if (this.variant === 'bar') {
+            return (h(Host, null, h("div", { class: "tg-gl-bar" }, h("div", { class: "tg-gl-bar__track" }))));
+        }
+        return (h(Host, null, h("div", { class: "tg-gl-overlay" }, h("div", { class: "tg-gl-overlay__spinner" }), this.label && h("span", { class: "tg-gl-overlay__label" }, this.label))));
+    }
+    static get is() { return "tg-global-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-global-loader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-global-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bar' | 'overlay'",
+                    "resolved": "\"bar\" | \"overlay\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'bar'"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-heatmap/tg-heatmap.css

@@ -0,0 +1,9 @@
+:host { display: block; }
+.tg-heatmap { font-family: var(--tg-font-family-sans); }
+.tg-heatmap__title { margin: 0 0 var(--tg-spacing-3); font-size: var(--tg-font-size-md); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-primary); }
+.tg-heatmap__grid { display: grid; gap: 2px; }
+.tg-heatmap__corner { background: transparent; }
+.tg-heatmap__xlabel { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); text-align: center; padding: var(--tg-spacing-1); }
+.tg-heatmap__ylabel { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); display: flex; align-items: center; padding-right: var(--tg-spacing-2); }
+.tg-heatmap__cell { display: flex; align-items: center; justify-content: center; padding: var(--tg-spacing-2); font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); border-radius: var(--tg-radius-sm); min-height: 2rem; transition: transform var(--tg-duration-fast); }
+.tg-heatmap__cell:hover { transform: scale(1.05); }