@dile/ui 2.1.19 → 2.1.20

package/components/drop-file/drop-file.js

@@ -0,0 +1,3 @@
+import { DileDropFile } from "./src/DileDropFile";
+
+customElements.define('dile-drop-file', DileDropFile);

package/components/drop-file/file-preview.js

@@ -0,0 +1,2 @@
+import { DileFilePreview } from "./src/DileFilePreview";
+customElements.define('dile-file-preview', DileFilePreview);

package/components/drop-file/index.js

@@ -0,0 +1,2 @@
+export { DileDropFile } from "./src/DileDropFile";
+export { DileFilePreview } from './src/DileFilePreview'

package/components/drop-file/src/DileDropFile.js

@@ -0,0 +1,211 @@
+import { LitElement, html, css } from 'lit';
+import '../file-preview.js';
+import '../../button/button.js';
+import { messageStyles } from '../../input/src/message-styles.js';
+
+export class DileDropFile extends LitElement {
+  static styles = [
+    messageStyles,
+    css`
+      * { box-sizing: border-box; }
+      :host {
+        margin-bottom: 10px;
+      }
+      #dropZone {
+        width: 100%;
+        min-height: var(--dile-drop-zone-min-height, auto);
+        border: 2px dashed #ccc;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #ccc;
+        font-size: 16px;
+        transition: border-color 0.3s, color 0.3s;
+        cursor: pointer;
+        padding: 1rem;
+      }
+
+      p {
+        margin: 0.5rem;
+      }
+      #dropZone.hover {
+        border-color: #333;
+        color: #333;
+      }
+
+      input[type="file"] {
+        display: none;
+      }
+
+      label {
+        display: block;
+        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+        font-size: var(--dile-input-label-font-size, 1em);
+        color: var(--dile-input-label-color, #59e);
+        font-weight: var(--dile-input-label-font-weight, normal);
+      }
+      main {
+        width: var(--dile-input-section-width, 100%);
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      label: { type: String },
+      message: { type: String },
+      errored: { type: Boolean },
+      dropLabel: { type: String },
+      buttonLabel: { type: String },
+      fileName: { type: String },
+      selectedFileLabel: { type: String },
+      allowedExtensions: { type: Array },
+      extensionErrorMessage: { type: String},
+    };
+  }
+  
+  constructor() {
+    super();
+    this.label = '';
+    this.fileName = '';
+    this.message = '';
+    this.dropLabel = "Drop here your file";
+    this.buttonLabel = "Select file";
+    this.selectedFileLabel = "Selected file";
+    this.extensionErrorMessage = "Only this file extensions are allowed: "
+    this.allowedExtensions = [];
+  } 
+
+  firstUpdated() {
+    this.firstMessage = this.message;
+  }
+
+  render() {
+    return html`
+      <main>
+        ${this.label
+          ? html`<label for="fileInput">${this.label}</label>`
+          : ""
+        }
+      </main>
+      <div
+        id="dropZone"
+        @click=${this.openFileDialog}
+        @dragenter=${this.dragHover}
+        @dragover=${this.dragHover}
+        @dragleave=${this.dragLeave}
+        @drop=${this.dragHandle}
+      >
+        ${this.dropLabelTemplate}
+      </div>
+      ${this.messageTemplate}
+      <input type="file" id="fileInput" @change=${this._handleFileInput}>
+      <dile-file-preview 
+        fileName="${this.fileName}"
+        selectedFileLabel="${this.selectedFileLabel}"
+        @dile-file-clear=${this.clearInput}
+      ></dile-file-preview>
+    `;
+  }
+
+  get messageTemplate() {
+    return html`
+      ${this.message 
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    `
+  }
+
+  get dropLabelTemplate() {
+    return html`
+      <p>${this.dropLabel}</p>
+      <p><dile-button>${this.buttonLabel}</dile-button></p>
+    `
+  }
+
+  get fileInput() {
+    return this.renderRoot.querySelector('#fileInput');
+  }
+
+  dragHover(e) {
+    this._preventDefaults(e); 
+    this._toggleHover(true);
+  }
+
+  dragLeave(e) {
+    this._preventDefaults(e); 
+    this._toggleHover(false);
+  }
+
+  dragHandle(e) {
+    this._handleDrop(e); 
+    this._toggleHover(false);
+  }
+
+  _preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  _handleDrop(e) {
+    this._preventDefaults(e);
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    this.fileInput.files = files;
+    this._processFile(files);
+  }
+
+  _processFile(files) {
+    if (files.length > 0) {
+      console.log("Mostramos el nombre del archivo",files);
+      this.fileName = files[0].name;
+      if(this._isValidExtension(this.fileName)) {
+        this.message = this.firstMessage || '';
+        this.errored = false;
+      } else {
+        this.clearInput();
+        this.message = `${this.extensionErrorMessage} ${this.allowedExtensions.join(', ')}`;
+        this.errored = true;
+      }
+    }
+  }
+
+  _isValidExtension(fileName) {
+    if(this.allowedExtensions.length === 0) {
+      return true;
+    }
+    const extension = fileName.split('.').pop().toLowerCase();
+    if(this.allowedExtensions.includes(extension)) {
+      return true;
+    }
+    return false;
+  }
+
+  _handleFileInput(e) {
+      this._processFile(this.fileInput.files);
+  }
+
+  _toggleHover(isHovering) {
+    const dropZone = this.renderRoot.querySelector('#dropZone');
+    if (isHovering) {
+      dropZone.classList.add('hover');
+    } else {
+      dropZone.classList.remove('hover');
+    }
+  }
+
+  openFileDialog() {
+    this.fileInput.click();
+  }
+  
+  clearInput() {
+    this.fileInput.value = "";
+    this.fileName = "";
+  }
+
+  getFiles() {
+    return this.fileInput.files;
+  }
+}

package/components/drop-file/src/DileFilePreview.js

@@ -0,0 +1,111 @@
+import { LitElement, html, css } from 'lit';
+import { clearIcon, imageIcon, pdfIcon, videocamIcon, draftIcon, folderZipIcon } from '@dile/icons';
+import '../../icon/icon.js';
+
+export class DileFilePreview extends LitElement {
+  static styles = [
+    css`
+      * { box-sizing: border-box }
+      :host {
+        display: block;
+        margin-top: var(--dile-file-preview-margin-top, 7px);
+      }
+      div {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        background-color: var(--dile-file-preview-background-color, #eee);
+        color: var(--dile-file-preview-color, #303030);
+        padding: var(--dile-file-preview-padding, 0.5rem 1rem);
+        border-radius: var(--dile-file-preview-border-radius, 1rem);
+        font-size: var(--dile-file-preview-font-size, 0.8rem);
+      }
+      div span {
+        flex-grow: 1;
+        margin: 0 0.75rem;
+      }
+      .clearicon {
+        --dile-icon-color: var(--dile-file-preview-clear-icon-color, #39f);
+      }
+      .fileicon {
+        --dile-icon-color: var(--dile-file-preview-file-icon-color, #303030);
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      fileName: { type: String },
+      fileExtension: { type: String },
+      fileIcon:  { type: Object },
+      selectedFileLabel: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.fileIcon = draftIcon;
+    this.availableExtensions = [
+      {
+        extensions: ['png', 'jpg', 'jpeg', 'gif'],
+        icon: imageIcon, 
+      },
+      {
+        extensions: ['pdf'],
+        icon: pdfIcon, 
+      },
+      {
+        extensions: ['mp4', 'avi', 'mkv', 'mov'],
+        icon: videocamIcon,
+      },
+      {
+        extensions: ['zip', 'gz', 'rar'],
+        icon: folderZipIcon,
+      },
+    ]
+  }
+
+  render() {
+    return html`
+      ${this.fileName
+        ? html`
+          <div>
+            <dile-icon class="fileicon" .icon=${this.fileIcon}></dile-icon>
+            <span>${this.selectedFileLabel}: ${this.fileName}</span>
+            <a href="#" @click=${this.dispatchClear}><dile-icon class="clearicon" .icon="${clearIcon}"></dile-icon></a>
+          </div>
+        `
+        : ''
+      }
+    `;
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('fileName')) {
+      this.fileExtension = this._getFileExtension(this.fileName);
+      this.fileIcon = this._getIconFromExtension(this.fileExtension);
+    }
+  }
+
+  _getFileExtension(fileName) {
+    return fileName.split('.').pop().toLowerCase();
+  }
+
+  _getIconFromExtension(fileExtension) {
+    const extensionMatch = this.availableExtensions.find(item =>
+      item.extensions.includes(fileExtension)
+    );
+    return extensionMatch ? extensionMatch.icon : draftIcon;
+  }
+
+  dispatchClear(e) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('dile-file-clear', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        fileName: this.fileName
+      }
+    }));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.1.19",
+  "version": "2.1.20",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -20,11 +20,11 @@
   },
   "homepage": "https://dile-components.polydile.com/",
   "dependencies": {
-    "@dile/icons": "^2.0.11",
+    "@dile/icons": "^2.0.12",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6f6fd44a9d3244f6f73e29d50a00a4eb8277286b"
+  "gitHead": "a80e638ff7147109adf302b8d86e0c0d7d2e7a32"
 }