@duskmoon-dev/el-file-upload 0.4.0

package/dist/esm/register.js

@@ -0,0 +1,463 @@
+// src/el-dm-file-upload.ts
+import { BaseElement, css } from "@duskmoon-dev/el-core";
+import { css as fileUploadCSS } from "@duskmoon-dev/core/components/file-upload";
+var SIZE_CLASSES = {
+  sm: "file-upload-sm",
+  md: "",
+  lg: "file-upload-lg"
+};
+var coreStyles = fileUploadCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
+var styles = css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  ${coreStyles}
+
+  /* Web component specific adjustments */
+  .file-upload {
+    font-family: inherit;
+  }
+
+  .file-upload-dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 150px;
+    padding: 2rem;
+    border: 2px dashed var(--color-outline, #ccc);
+    border-radius: 0.5rem;
+    background-color: var(--color-surface-container, #f5f5f5);
+    cursor: pointer;
+    transition:
+      border-color 0.2s,
+      background-color 0.2s;
+  }
+
+  .file-upload-dropzone:hover {
+    border-color: var(--color-primary);
+    background-color: var(--color-surface-container-high, #e8e8e8);
+  }
+
+  .file-upload-dropzone.dragging {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
+    background-color: rgba(var(--color-primary-rgb, 98, 0, 238), 0.1);
+  }
+
+  .file-upload-input {
+    display: none;
+  }
+
+  .file-upload-icon {
+    font-size: 2.5rem;
+    color: var(--color-on-surface);
+    opacity: 0.5;
+  }
+
+  .file-upload-text {
+    text-align: center;
+  }
+
+  .file-upload-title {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--color-on-surface);
+  }
+
+  .file-upload-subtitle {
+    font-size: 0.875rem;
+    color: var(--color-on-surface);
+    opacity: 0.7;
+  }
+
+  .file-upload-browse {
+    color: var(--color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  /* File list */
+  .file-upload-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+
+  .file-upload-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background-color: var(--color-surface-container, #f5f5f5);
+    border-radius: 0.375rem;
+  }
+
+  .file-upload-item-icon {
+    font-size: 1.5rem;
+    color: var(--color-on-surface);
+    opacity: 0.7;
+  }
+
+  .file-upload-item-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .file-upload-item-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-upload-item-size {
+    font-size: 0.75rem;
+    color: var(--color-on-surface);
+    opacity: 0.7;
+  }
+
+  .file-upload-item-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--color-on-surface);
+    opacity: 0.5;
+    cursor: pointer;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
+  }
+
+  .file-upload-item-remove:hover {
+    opacity: 1;
+    background-color: var(--color-error);
+    color: var(--color-on-error, white);
+  }
+
+  /* Preview grid */
+  .file-upload-preview {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
+
+  .file-upload-preview-item {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: 0.375rem;
+    overflow: hidden;
+    background-color: var(--color-surface-container, #f5f5f5);
+  }
+
+  .file-upload-preview-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .file-upload-preview-remove {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .file-upload-preview-item:hover .file-upload-preview-remove {
+    opacity: 1;
+  }
+
+  /* Size variants */
+  .file-upload-sm .file-upload-dropzone {
+    min-height: 100px;
+    padding: 1rem;
+  }
+
+  .file-upload-lg .file-upload-dropzone {
+    min-height: 200px;
+    padding: 3rem;
+  }
+
+  /* Compact variant */
+  .file-upload-compact .file-upload-dropzone {
+    flex-direction: row;
+    min-height: auto;
+    padding: 1rem;
+  }
+
+  /* Disabled state */
+  :host([disabled]) .file-upload-dropzone {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;
+
+class ElDmFileUpload extends BaseElement {
+  static properties = {
+    accept: { type: String, reflect: true },
+    multiple: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    maxSize: { type: Number, reflect: true, attribute: "max-size" },
+    maxFiles: { type: Number, reflect: true, attribute: "max-files" },
+    showPreview: { type: Boolean, reflect: true, attribute: "show-preview" },
+    compact: { type: Boolean, reflect: true },
+    size: { type: String, reflect: true }
+  };
+  _files = [];
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  get files() {
+    return this._files;
+  }
+  _getClasses() {
+    const classes = ["file-upload"];
+    if (this.size && SIZE_CLASSES[this.size]) {
+      classes.push(SIZE_CLASSES[this.size]);
+    }
+    if (this.compact) {
+      classes.push("file-upload-compact");
+    }
+    return classes.join(" ");
+  }
+  _formatFileSize(bytes) {
+    if (bytes === 0)
+      return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+  _generateId() {
+    return Math.random().toString(36).substring(2, 11);
+  }
+  _handleDragOver(e) {
+    e.preventDefault();
+    if (this.disabled)
+      return;
+    const dropzone = this.shadowRoot?.querySelector(".file-upload-dropzone");
+    dropzone?.classList.add("dragging");
+  }
+  _handleDragLeave(e) {
+    e.preventDefault();
+    const dropzone = this.shadowRoot?.querySelector(".file-upload-dropzone");
+    dropzone?.classList.remove("dragging");
+  }
+  _handleDrop(e) {
+    e.preventDefault();
+    if (this.disabled)
+      return;
+    const dropzone = this.shadowRoot?.querySelector(".file-upload-dropzone");
+    dropzone?.classList.remove("dragging");
+    const files = e.dataTransfer?.files;
+    if (files) {
+      this._processFiles(files);
+    }
+  }
+  _handleClick() {
+    if (this.disabled)
+      return;
+    const input = this.shadowRoot?.querySelector(".file-upload-input");
+    input?.click();
+  }
+  _handleInputChange(e) {
+    const input = e.target;
+    if (input.files) {
+      this._processFiles(input.files);
+    }
+    input.value = "";
+  }
+  _processFiles(fileList) {
+    const newFiles = [];
+    for (let i = 0;i < fileList.length; i++) {
+      const file = fileList[i];
+      if (this.maxFiles && this._files.length + newFiles.length >= this.maxFiles) {
+        break;
+      }
+      if (this.maxSize && file.size > this.maxSize) {
+        continue;
+      }
+      const uploadedFile = {
+        file,
+        id: this._generateId()
+      };
+      if (this.showPreview && file.type.startsWith("image/")) {
+        uploadedFile.preview = URL.createObjectURL(file);
+      }
+      newFiles.push(uploadedFile);
+    }
+    if (this.multiple) {
+      this._files = [...this._files, ...newFiles];
+    } else {
+      this._files.forEach((f) => {
+        if (f.preview)
+          URL.revokeObjectURL(f.preview);
+      });
+      this._files = newFiles.slice(0, 1);
+    }
+    this._updateFileList();
+    this.emit("change", { files: this._files.map((f) => f.file) });
+  }
+  _removeFile(id) {
+    const file = this._files.find((f) => f.id === id);
+    if (file?.preview) {
+      URL.revokeObjectURL(file.preview);
+    }
+    this._files = this._files.filter((f) => f.id !== id);
+    this._updateFileList();
+    this.emit("remove", { files: this._files.map((f) => f.file) });
+    this.emit("change", { files: this._files.map((f) => f.file) });
+  }
+  _updateFileList() {
+    const listContainer = this.shadowRoot?.querySelector(".file-upload-list");
+    const previewContainer = this.shadowRoot?.querySelector(".file-upload-preview");
+    if (this.showPreview && previewContainer) {
+      previewContainer.innerHTML = this._files.map((f) => `
+          <div class="file-upload-preview-item" data-id="${f.id}">
+            ${f.preview ? `<img class="file-upload-preview-image" src="${f.preview}" alt="${f.file.name}">` : ""}
+            <button class="file-upload-preview-remove" type="button" aria-label="Remove file">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+        `).join("");
+      previewContainer.querySelectorAll(".file-upload-preview-remove").forEach((btn, index) => {
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this._removeFile(this._files[index].id);
+        });
+      });
+    } else if (listContainer) {
+      listContainer.innerHTML = this._files.map((f) => `
+          <div class="file-upload-item" data-id="${f.id}">
+            <span class="file-upload-item-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                <polyline points="14 2 14 8 20 8"></polyline>
+              </svg>
+            </span>
+            <div class="file-upload-item-info">
+              <div class="file-upload-item-name">${f.file.name}</div>
+              <div class="file-upload-item-size">${this._formatFileSize(f.file.size)}</div>
+            </div>
+            <button class="file-upload-item-remove" type="button" aria-label="Remove file">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+        `).join("");
+      listContainer.querySelectorAll(".file-upload-item-remove").forEach((btn, index) => {
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this._removeFile(this._files[index].id);
+        });
+      });
+    }
+  }
+  clear() {
+    this._files.forEach((f) => {
+      if (f.preview)
+        URL.revokeObjectURL(f.preview);
+    });
+    this._files = [];
+    this._updateFileList();
+    this.emit("change", { files: [] });
+  }
+  render() {
+    const classes = this._getClasses();
+    return `
+      <div class="${classes}" part="file-upload">
+        <input
+          type="file"
+          class="file-upload-input"
+          ${this.accept ? `accept="${this.accept}"` : ""}
+          ${this.multiple ? "multiple" : ""}
+          ${this.disabled ? "disabled" : ""}
+        >
+        <div class="file-upload-dropzone" part="dropzone">
+          <span class="file-upload-icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+              <polyline points="17 8 12 3 7 8"></polyline>
+              <line x1="12" y1="3" x2="12" y2="15"></line>
+            </svg>
+          </span>
+          <div class="file-upload-text">
+            <div class="file-upload-title">
+              Drag & drop files here or <span class="file-upload-browse">browse</span>
+            </div>
+            <div class="file-upload-subtitle">
+              ${this.accept ? `Accepted: ${this.accept}` : "All file types accepted"}
+              ${this.maxSize ? ` • Max ${this._formatFileSize(this.maxSize)}` : ""}
+            </div>
+          </div>
+        </div>
+        ${this.showPreview ? '<div class="file-upload-preview" part="preview"></div>' : '<div class="file-upload-list" part="file-list"></div>'}
+      </div>
+    `;
+  }
+  update() {
+    super.update();
+    const dropzone = this.shadowRoot?.querySelector(".file-upload-dropzone");
+    const input = this.shadowRoot?.querySelector(".file-upload-input");
+    dropzone?.addEventListener("dragover", (e) => this._handleDragOver(e));
+    dropzone?.addEventListener("dragleave", (e) => this._handleDragLeave(e));
+    dropzone?.addEventListener("drop", (e) => this._handleDrop(e));
+    dropzone?.addEventListener("click", () => this._handleClick());
+    input?.addEventListener("change", (e) => this._handleInputChange(e));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this._files.forEach((f) => {
+      if (f.preview)
+        URL.revokeObjectURL(f.preview);
+    });
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-file-upload")) {
+    customElements.define("el-dm-file-upload", ElDmFileUpload);
+  }
+}
+
+// src/register.ts
+register();
+
+//# debugId=36890F53CDC0524C64756E2164756E21
+//# sourceMappingURL=register.js.map

package/dist/esm/register.js.map

@@ -0,0 +1,12 @@
+{
+  "version": 3,
+  "sources": ["../../src/el-dm-file-upload.ts", "../../src/index.ts", "../../src/register.ts"],
+  "sourcesContent": [
+    "/**\n * DuskMoon File Upload Element\n *\n * A drag-and-drop file upload component with file list and preview support.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-file-upload\n *\n * @attr {string} accept - File type filter (e.g., \"image/*,.pdf\")\n * @attr {boolean} multiple - Allow multiple files\n * @attr {boolean} disabled - Whether the upload is disabled\n * @attr {number} max-size - Maximum file size in bytes\n * @attr {number} max-files - Maximum number of files\n * @attr {boolean} show-preview - Show image previews\n * @attr {boolean} compact - Use compact layout\n * @attr {string} size - Size: sm, md, lg\n *\n * @slot - Default slot for custom dropzone content\n *\n * @csspart dropzone - The dropzone area\n * @csspart file-list - The file list container\n *\n * @fires change - Fired when files are selected\n * @fires remove - Fired when a file is removed\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\nimport { css as fileUploadCSS } from '@duskmoon-dev/core/components/file-upload';\n\nexport type FileUploadSize = 'sm' | 'md' | 'lg';\n\nexport interface UploadedFile {\n  file: File;\n  id: string;\n  preview?: string;\n}\n\nconst SIZE_CLASSES: Record<string, string> = {\n  sm: 'file-upload-sm',\n  md: '',\n  lg: 'file-upload-lg',\n};\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = fileUploadCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  ${coreStyles}\n\n  /* Web component specific adjustments */\n  .file-upload {\n    font-family: inherit;\n  }\n\n  .file-upload-dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    min-height: 150px;\n    padding: 2rem;\n    border: 2px dashed var(--color-outline, #ccc);\n    border-radius: 0.5rem;\n    background-color: var(--color-surface-container, #f5f5f5);\n    cursor: pointer;\n    transition:\n      border-color 0.2s,\n      background-color 0.2s;\n  }\n\n  .file-upload-dropzone:hover {\n    border-color: var(--color-primary);\n    background-color: var(--color-surface-container-high, #e8e8e8);\n  }\n\n  .file-upload-dropzone.dragging {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    background-color: rgba(var(--color-primary-rgb, 98, 0, 238), 0.1);\n  }\n\n  .file-upload-input {\n    display: none;\n  }\n\n  .file-upload-icon {\n    font-size: 2.5rem;\n    color: var(--color-on-surface);\n    opacity: 0.5;\n  }\n\n  .file-upload-text {\n    text-align: center;\n  }\n\n  .file-upload-title {\n    font-size: 1rem;\n    font-weight: 500;\n    color: var(--color-on-surface);\n  }\n\n  .file-upload-subtitle {\n    font-size: 0.875rem;\n    color: var(--color-on-surface);\n    opacity: 0.7;\n  }\n\n  .file-upload-browse {\n    color: var(--color-primary);\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  /* File list */\n  .file-upload-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    margin-top: 1rem;\n  }\n\n  .file-upload-item {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.75rem;\n    background-color: var(--color-surface-container, #f5f5f5);\n    border-radius: 0.375rem;\n  }\n\n  .file-upload-item-icon {\n    font-size: 1.5rem;\n    color: var(--color-on-surface);\n    opacity: 0.7;\n  }\n\n  .file-upload-item-info {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .file-upload-item-name {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--color-on-surface);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .file-upload-item-size {\n    font-size: 0.75rem;\n    color: var(--color-on-surface);\n    opacity: 0.7;\n  }\n\n  .file-upload-item-remove {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background-color: transparent;\n    color: var(--color-on-surface);\n    opacity: 0.5;\n    cursor: pointer;\n    transition:\n      opacity 0.2s,\n      background-color 0.2s;\n  }\n\n  .file-upload-item-remove:hover {\n    opacity: 1;\n    background-color: var(--color-error);\n    color: var(--color-on-error, white);\n  }\n\n  /* Preview grid */\n  .file-upload-preview {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    gap: 0.75rem;\n    margin-top: 1rem;\n  }\n\n  .file-upload-preview-item {\n    position: relative;\n    aspect-ratio: 1;\n    border-radius: 0.375rem;\n    overflow: hidden;\n    background-color: var(--color-surface-container, #f5f5f5);\n  }\n\n  .file-upload-preview-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .file-upload-preview-remove {\n    position: absolute;\n    top: 0.25rem;\n    right: 0.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background-color: rgba(0, 0, 0, 0.5);\n    color: white;\n    cursor: pointer;\n    opacity: 0;\n    transition: opacity 0.2s;\n  }\n\n  .file-upload-preview-item:hover .file-upload-preview-remove {\n    opacity: 1;\n  }\n\n  /* Size variants */\n  .file-upload-sm .file-upload-dropzone {\n    min-height: 100px;\n    padding: 1rem;\n  }\n\n  .file-upload-lg .file-upload-dropzone {\n    min-height: 200px;\n    padding: 3rem;\n  }\n\n  /* Compact variant */\n  .file-upload-compact .file-upload-dropzone {\n    flex-direction: row;\n    min-height: auto;\n    padding: 1rem;\n  }\n\n  /* Disabled state */\n  :host([disabled]) .file-upload-dropzone {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport class ElDmFileUpload extends BaseElement {\n  static properties = {\n    accept: { type: String, reflect: true },\n    multiple: { type: Boolean, reflect: true },\n    disabled: { type: Boolean, reflect: true },\n    maxSize: { type: Number, reflect: true, attribute: 'max-size' },\n    maxFiles: { type: Number, reflect: true, attribute: 'max-files' },\n    showPreview: { type: Boolean, reflect: true, attribute: 'show-preview' },\n    compact: { type: Boolean, reflect: true },\n    size: { type: String, reflect: true },\n  };\n\n  declare accept: string;\n  declare multiple: boolean;\n  declare disabled: boolean;\n  declare maxSize: number;\n  declare maxFiles: number;\n  declare showPreview: boolean;\n  declare compact: boolean;\n  declare size: FileUploadSize;\n\n  private _files: UploadedFile[] = [];\n\n  constructor() {\n    super();\n    this.attachStyles(styles);\n  }\n\n  get files(): UploadedFile[] {\n    return this._files;\n  }\n\n  private _getClasses(): string {\n    const classes = ['file-upload'];\n\n    if (this.size && SIZE_CLASSES[this.size]) {\n      classes.push(SIZE_CLASSES[this.size]);\n    }\n\n    if (this.compact) {\n      classes.push('file-upload-compact');\n    }\n\n    return classes.join(' ');\n  }\n\n  private _formatFileSize(bytes: number): string {\n    if (bytes === 0) return '0 Bytes';\n    const k = 1024;\n    const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n  }\n\n  private _generateId(): string {\n    return Math.random().toString(36).substring(2, 11);\n  }\n\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    const dropzone = this.shadowRoot?.querySelector('.file-upload-dropzone');\n    dropzone?.classList.add('dragging');\n  }\n\n  private _handleDragLeave(e: DragEvent): void {\n    e.preventDefault();\n    const dropzone = this.shadowRoot?.querySelector('.file-upload-dropzone');\n    dropzone?.classList.remove('dragging');\n  }\n\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n\n    const dropzone = this.shadowRoot?.querySelector('.file-upload-dropzone');\n    dropzone?.classList.remove('dragging');\n\n    const files = e.dataTransfer?.files;\n    if (files) {\n      this._processFiles(files);\n    }\n  }\n\n  private _handleClick(): void {\n    if (this.disabled) return;\n    const input = this.shadowRoot?.querySelector('.file-upload-input') as HTMLInputElement;\n    input?.click();\n  }\n\n  private _handleInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (input.files) {\n      this._processFiles(input.files);\n    }\n    // Reset input so the same file can be selected again\n    input.value = '';\n  }\n\n  private _processFiles(fileList: FileList): void {\n    const newFiles: UploadedFile[] = [];\n\n    for (let i = 0; i < fileList.length; i++) {\n      const file = fileList[i];\n\n      // Check max files\n      if (this.maxFiles && this._files.length + newFiles.length >= this.maxFiles) {\n        break;\n      }\n\n      // Check file size\n      if (this.maxSize && file.size > this.maxSize) {\n        continue;\n      }\n\n      const uploadedFile: UploadedFile = {\n        file,\n        id: this._generateId(),\n      };\n\n      // Generate preview for images\n      if (this.showPreview && file.type.startsWith('image/')) {\n        uploadedFile.preview = URL.createObjectURL(file);\n      }\n\n      newFiles.push(uploadedFile);\n    }\n\n    if (this.multiple) {\n      this._files = [...this._files, ...newFiles];\n    } else {\n      // Clean up old previews\n      this._files.forEach((f) => {\n        if (f.preview) URL.revokeObjectURL(f.preview);\n      });\n      this._files = newFiles.slice(0, 1);\n    }\n\n    this._updateFileList();\n    this.emit('change', { files: this._files.map((f) => f.file) });\n  }\n\n  private _removeFile(id: string): void {\n    const file = this._files.find((f) => f.id === id);\n    if (file?.preview) {\n      URL.revokeObjectURL(file.preview);\n    }\n\n    this._files = this._files.filter((f) => f.id !== id);\n    this._updateFileList();\n    this.emit('remove', { files: this._files.map((f) => f.file) });\n    this.emit('change', { files: this._files.map((f) => f.file) });\n  }\n\n  private _updateFileList(): void {\n    const listContainer = this.shadowRoot?.querySelector('.file-upload-list');\n    const previewContainer = this.shadowRoot?.querySelector('.file-upload-preview');\n\n    if (this.showPreview && previewContainer) {\n      previewContainer.innerHTML = this._files\n        .map(\n          (f) => `\n          <div class=\"file-upload-preview-item\" data-id=\"${f.id}\">\n            ${f.preview ? `<img class=\"file-upload-preview-image\" src=\"${f.preview}\" alt=\"${f.file.name}\">` : ''}\n            <button class=\"file-upload-preview-remove\" type=\"button\" aria-label=\"Remove file\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          </div>\n        `,\n        )\n        .join('');\n\n      previewContainer.querySelectorAll('.file-upload-preview-remove').forEach((btn, index) => {\n        btn.addEventListener('click', (e) => {\n          e.stopPropagation();\n          this._removeFile(this._files[index].id);\n        });\n      });\n    } else if (listContainer) {\n      listContainer.innerHTML = this._files\n        .map(\n          (f) => `\n          <div class=\"file-upload-item\" data-id=\"${f.id}\">\n            <span class=\"file-upload-item-icon\">\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n                <polyline points=\"14 2 14 8 20 8\"></polyline>\n              </svg>\n            </span>\n            <div class=\"file-upload-item-info\">\n              <div class=\"file-upload-item-name\">${f.file.name}</div>\n              <div class=\"file-upload-item-size\">${this._formatFileSize(f.file.size)}</div>\n            </div>\n            <button class=\"file-upload-item-remove\" type=\"button\" aria-label=\"Remove file\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          </div>\n        `,\n        )\n        .join('');\n\n      listContainer.querySelectorAll('.file-upload-item-remove').forEach((btn, index) => {\n        btn.addEventListener('click', (e) => {\n          e.stopPropagation();\n          this._removeFile(this._files[index].id);\n        });\n      });\n    }\n  }\n\n  /**\n   * Clear all files\n   */\n  clear(): void {\n    this._files.forEach((f) => {\n      if (f.preview) URL.revokeObjectURL(f.preview);\n    });\n    this._files = [];\n    this._updateFileList();\n    this.emit('change', { files: [] });\n  }\n\n  render(): string {\n    const classes = this._getClasses();\n\n    return `\n      <div class=\"${classes}\" part=\"file-upload\">\n        <input\n          type=\"file\"\n          class=\"file-upload-input\"\n          ${this.accept ? `accept=\"${this.accept}\"` : ''}\n          ${this.multiple ? 'multiple' : ''}\n          ${this.disabled ? 'disabled' : ''}\n        >\n        <div class=\"file-upload-dropzone\" part=\"dropzone\">\n          <span class=\"file-upload-icon\">\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n              <polyline points=\"17 8 12 3 7 8\"></polyline>\n              <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n            </svg>\n          </span>\n          <div class=\"file-upload-text\">\n            <div class=\"file-upload-title\">\n              Drag & drop files here or <span class=\"file-upload-browse\">browse</span>\n            </div>\n            <div class=\"file-upload-subtitle\">\n              ${this.accept ? `Accepted: ${this.accept}` : 'All file types accepted'}\n              ${this.maxSize ? ` • Max ${this._formatFileSize(this.maxSize)}` : ''}\n            </div>\n          </div>\n        </div>\n        ${this.showPreview ? '<div class=\"file-upload-preview\" part=\"preview\"></div>' : '<div class=\"file-upload-list\" part=\"file-list\"></div>'}\n      </div>\n    `;\n  }\n\n  update(): void {\n    super.update();\n\n    const dropzone = this.shadowRoot?.querySelector('.file-upload-dropzone');\n    const input = this.shadowRoot?.querySelector('.file-upload-input');\n\n    dropzone?.addEventListener('dragover', ((e: DragEvent) =>\n      this._handleDragOver(e)) as EventListener);\n    dropzone?.addEventListener('dragleave', ((e: DragEvent) =>\n      this._handleDragLeave(e)) as EventListener);\n    dropzone?.addEventListener('drop', ((e: DragEvent) => this._handleDrop(e)) as EventListener);\n    dropzone?.addEventListener('click', () => this._handleClick());\n    input?.addEventListener('change', ((e: Event) => this._handleInputChange(e)) as EventListener);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    // Clean up object URLs\n    this._files.forEach((f) => {\n      if (f.preview) URL.revokeObjectURL(f.preview);\n    });\n  }\n}\n",
+    "/**\n * @duskmoon-dev/el-file-upload\n *\n * DuskMoon File Upload custom element\n */\n\nimport { ElDmFileUpload } from './el-dm-file-upload.js';\n\nexport { ElDmFileUpload };\nexport type { FileUploadSize, UploadedFile } from './el-dm-file-upload.js';\n\n/**\n * Register the el-dm-file-upload custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-file-upload';\n * register();\n * ```\n */\nexport function register(): void {\n  if (!customElements.get('el-dm-file-upload')) {\n    customElements.define('el-dm-file-upload', ElDmFileUpload);\n  }\n}\n",
+    "import { register } from './index.js';\nregister();\n"
+  ],
+  "mappings": ";AA0BA;AACA,gBAAS;AAUT,IAAM,eAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,IAAM,aAAa,cAAc,QAAQ,4BAA4B,EAAE,EAAE,QAAQ,UAAU,EAAE;AAE7F,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6MG,MAAM,uBAAuB,YAAY;AAAA,SACvC,aAAa;AAAA,IAClB,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,IACtC,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACzC,UAAU,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACzC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,WAAW;AAAA,IAC9D,UAAU,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,YAAY;AAAA,IAChE,aAAa,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,eAAe;AAAA,IACvE,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK;AAAA,IACxC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,EACtC;AAAA,EAWQ,SAAyB,CAAC;AAAA,EAElC,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,MAAM;AAAA;AAAA,MAGtB,KAAK,GAAmB;AAAA,IAC1B,OAAO,KAAK;AAAA;AAAA,EAGN,WAAW,GAAW;AAAA,IAC5B,MAAM,UAAU,CAAC,aAAa;AAAA,IAE9B,IAAI,KAAK,QAAQ,aAAa,KAAK,OAAO;AAAA,MACxC,QAAQ,KAAK,aAAa,KAAK,KAAK;AAAA,IACtC;AAAA,IAEA,IAAI,KAAK,SAAS;AAAA,MAChB,QAAQ,KAAK,qBAAqB;AAAA,IACpC;AAAA,IAEA,OAAO,QAAQ,KAAK,GAAG;AAAA;AAAA,EAGjB,eAAe,CAAC,OAAuB;AAAA,IAC7C,IAAI,UAAU;AAAA,MAAG,OAAO;AAAA,IACxB,MAAM,IAAI;AAAA,IACV,MAAM,QAAQ,CAAC,SAAS,MAAM,MAAM,IAAI;AAAA,IACxC,MAAM,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC,CAAC;AAAA,IAClD,OAAO,YAAY,QAAQ,KAAK,IAAI,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,MAAM,MAAM;AAAA;AAAA,EAG/D,WAAW,GAAW;AAAA,IAC5B,OAAO,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AAAA;AAAA,EAG3C,eAAe,CAAC,GAAoB;AAAA,IAC1C,EAAE,eAAe;AAAA,IACjB,IAAI,KAAK;AAAA,MAAU;AAAA,IACnB,MAAM,WAAW,KAAK,YAAY,cAAc,uBAAuB;AAAA,IACvE,UAAU,UAAU,IAAI,UAAU;AAAA;AAAA,EAG5B,gBAAgB,CAAC,GAAoB;AAAA,IAC3C,EAAE,eAAe;AAAA,IACjB,MAAM,WAAW,KAAK,YAAY,cAAc,uBAAuB;AAAA,IACvE,UAAU,UAAU,OAAO,UAAU;AAAA;AAAA,EAG/B,WAAW,CAAC,GAAoB;AAAA,IACtC,EAAE,eAAe;AAAA,IACjB,IAAI,KAAK;AAAA,MAAU;AAAA,IAEnB,MAAM,WAAW,KAAK,YAAY,cAAc,uBAAuB;AAAA,IACvE,UAAU,UAAU,OAAO,UAAU;AAAA,IAErC,MAAM,QAAQ,EAAE,cAAc;AAAA,IAC9B,IAAI,OAAO;AAAA,MACT,KAAK,cAAc,KAAK;AAAA,IAC1B;AAAA;AAAA,EAGM,YAAY,GAAS;AAAA,IAC3B,IAAI,KAAK;AAAA,MAAU;AAAA,IACnB,MAAM,QAAQ,KAAK,YAAY,cAAc,oBAAoB;AAAA,IACjE,OAAO,MAAM;AAAA;AAAA,EAGP,kBAAkB,CAAC,GAAgB;AAAA,IACzC,MAAM,QAAQ,EAAE;AAAA,IAChB,IAAI,MAAM,OAAO;AAAA,MACf,KAAK,cAAc,MAAM,KAAK;AAAA,IAChC;AAAA,IAEA,MAAM,QAAQ;AAAA;AAAA,EAGR,aAAa,CAAC,UAA0B;AAAA,IAC9C,MAAM,WAA2B,CAAC;AAAA,IAElC,SAAS,IAAI,EAAG,IAAI,SAAS,QAAQ,KAAK;AAAA,MACxC,MAAM,OAAO,SAAS;AAAA,MAGtB,IAAI,KAAK,YAAY,KAAK,OAAO,SAAS,SAAS,UAAU,KAAK,UAAU;AAAA,QAC1E;AAAA,MACF;AAAA,MAGA,IAAI,KAAK,WAAW,KAAK,OAAO,KAAK,SAAS;AAAA,QAC5C;AAAA,MACF;AAAA,MAEA,MAAM,eAA6B;AAAA,QACjC;AAAA,QACA,IAAI,KAAK,YAAY;AAAA,MACvB;AAAA,MAGA,IAAI,KAAK,eAAe,KAAK,KAAK,WAAW,QAAQ,GAAG;AAAA,QACtD,aAAa,UAAU,IAAI,gBAAgB,IAAI;AAAA,MACjD;AAAA,MAEA,SAAS,KAAK,YAAY;AAAA,IAC5B;AAAA,IAEA,IAAI,KAAK,UAAU;AAAA,MACjB,KAAK,SAAS,CAAC,GAAG,KAAK,QAAQ,GAAG,QAAQ;AAAA,IAC5C,EAAO;AAAA,MAEL,KAAK,OAAO,QAAQ,CAAC,MAAM;AAAA,QACzB,IAAI,EAAE;AAAA,UAAS,IAAI,gBAAgB,EAAE,OAAO;AAAA,OAC7C;AAAA,MACD,KAAK,SAAS,SAAS,MAAM,GAAG,CAAC;AAAA;AAAA,IAGnC,KAAK,gBAAgB;AAAA,IACrB,KAAK,KAAK,UAAU,EAAE,OAAO,KAAK,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;AAAA;AAAA,EAGvD,WAAW,CAAC,IAAkB;AAAA,IACpC,MAAM,OAAO,KAAK,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE;AAAA,IAChD,IAAI,MAAM,SAAS;AAAA,MACjB,IAAI,gBAAgB,KAAK,OAAO;AAAA,IAClC;AAAA,IAEA,KAAK,SAAS,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AAAA,IACnD,KAAK,gBAAgB;AAAA,IACrB,KAAK,KAAK,UAAU,EAAE,OAAO,KAAK,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;AAAA,IAC7D,KAAK,KAAK,UAAU,EAAE,OAAO,KAAK,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;AAAA;AAAA,EAGvD,eAAe,GAAS;AAAA,IAC9B,MAAM,gBAAgB,KAAK,YAAY,cAAc,mBAAmB;AAAA,IACxE,MAAM,mBAAmB,KAAK,YAAY,cAAc,sBAAsB;AAAA,IAE9E,IAAI,KAAK,eAAe,kBAAkB;AAAA,MACxC,iBAAiB,YAAY,KAAK,OAC/B,IACC,CAAC,MAAM;AAAA,2DAC0C,EAAE;AAAA,cAC/C,EAAE,UAAU,+CAA+C,EAAE,iBAAiB,EAAE,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAStG,EACC,KAAK,EAAE;AAAA,MAEV,iBAAiB,iBAAiB,6BAA6B,EAAE,QAAQ,CAAC,KAAK,UAAU;AAAA,QACvF,IAAI,iBAAiB,SAAS,CAAC,MAAM;AAAA,UACnC,EAAE,gBAAgB;AAAA,UAClB,KAAK,YAAY,KAAK,OAAO,OAAO,EAAE;AAAA,SACvC;AAAA,OACF;AAAA,IACH,EAAO,SAAI,eAAe;AAAA,MACxB,cAAc,YAAY,KAAK,OAC5B,IACC,CAAC,MAAM;AAAA,mDACkC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mDAQF,EAAE,KAAK;AAAA,mDACP,KAAK,gBAAgB,EAAE,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU3E,EACC,KAAK,EAAE;AAAA,MAEV,cAAc,iBAAiB,0BAA0B,EAAE,QAAQ,CAAC,KAAK,UAAU;AAAA,QACjF,IAAI,iBAAiB,SAAS,CAAC,MAAM;AAAA,UACnC,EAAE,gBAAgB;AAAA,UAClB,KAAK,YAAY,KAAK,OAAO,OAAO,EAAE;AAAA,SACvC;AAAA,OACF;AAAA,IACH;AAAA;AAAA,EAMF,KAAK,GAAS;AAAA,IACZ,KAAK,OAAO,QAAQ,CAAC,MAAM;AAAA,MACzB,IAAI,EAAE;AAAA,QAAS,IAAI,gBAAgB,EAAE,OAAO;AAAA,KAC7C;AAAA,IACD,KAAK,SAAS,CAAC;AAAA,IACf,KAAK,gBAAgB;AAAA,IACrB,KAAK,KAAK,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC;AAAA;AAAA,EAGnC,MAAM,GAAW;AAAA,IACf,MAAM,UAAU,KAAK,YAAY;AAAA,IAEjC,OAAO;AAAA,oBACS;AAAA;AAAA;AAAA;AAAA,YAIR,KAAK,SAAS,WAAW,KAAK,YAAY;AAAA,YAC1C,KAAK,WAAW,aAAa;AAAA,YAC7B,KAAK,WAAW,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAezB,KAAK,SAAS,aAAa,KAAK,WAAW;AAAA,gBAC3C,KAAK,UAAU,UAAS,KAAK,gBAAgB,KAAK,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,UAIrE,KAAK,cAAc,2DAA2D;AAAA;AAAA;AAAA;AAAA,EAKtF,MAAM,GAAS;AAAA,IACb,MAAM,OAAO;AAAA,IAEb,MAAM,WAAW,KAAK,YAAY,cAAc,uBAAuB;AAAA,IACvE,MAAM,QAAQ,KAAK,YAAY,cAAc,oBAAoB;AAAA,IAEjE,UAAU,iBAAiB,YAAa,CAAC,MACvC,KAAK,gBAAgB,CAAC,CAAmB;AAAA,IAC3C,UAAU,iBAAiB,aAAc,CAAC,MACxC,KAAK,iBAAiB,CAAC,CAAmB;AAAA,IAC5C,UAAU,iBAAiB,QAAS,CAAC,MAAiB,KAAK,YAAY,CAAC,CAAmB;AAAA,IAC3F,UAAU,iBAAiB,SAAS,MAAM,KAAK,aAAa,CAAC;AAAA,IAC7D,OAAO,iBAAiB,UAAW,CAAC,MAAa,KAAK,mBAAmB,CAAC,CAAmB;AAAA;AAAA,EAG/F,oBAAoB,GAAS;AAAA,IAC3B,MAAM,uBAAuB;AAAA,IAE7B,KAAK,OAAO,QAAQ,CAAC,MAAM;AAAA,MACzB,IAAI,EAAE;AAAA,QAAS,IAAI,gBAAgB,EAAE,OAAO;AAAA,KAC7C;AAAA;AAEL;;;AC7gBO,SAAS,QAAQ,GAAS;AAAA,EAC/B,IAAI,CAAC,eAAe,IAAI,mBAAmB,GAAG;AAAA,IAC5C,eAAe,OAAO,qBAAqB,cAAc;AAAA,EAC3D;AAAA;;;ACtBF,SAAS;",
+  "debugId": "36890F53CDC0524C64756E2164756E21",
+  "names": []
+}