wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/upload-drag/vds-upload-drag.js

@@ -1,24 +1,291 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @component vds-upload-drag
+ * @description A drag-and-drop file upload component that allows users to upload files by clicking or dragging them into a designated area. Supports single or multiple file uploads, file type filtering, and camera capture.
+ *
+ * @example
+ * <!-- Basic upload with default settings -->
+ * <vds-upload-drag id="basic-upload">
+ *   <vds-icon slot="icon" name="upload" size="large"></vds-icon>
+ * </vds-upload-drag>
+ * <script>
+ *   const upload = document.getElementById('basic-upload');
+ *   upload.addEventListener('fileSelected', (e) => {
+ *     console.log('Files selected:', e.detail);
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Single file upload -->
+ * <vds-upload-drag
+ *   multiple="false"
+ *   title="Upload your profile picture"
+ *   description="Click or drag a single image file">
+ *   <vds-icon slot="icon" name="image" size="large"></vds-icon>
+ * </vds-upload-drag>
+ *
+ * @example
+ * <!-- Upload with custom title and description -->
+ * <vds-upload-drag
+ *   title="Upload Documents"
+ *   description="PDF, Word, and Excel files are supported. Maximum 10MB per file.">
+ *   <vds-icon slot="icon" name="document" size="large"></vds-icon>
+ * </vds-upload-drag>
+ *
+ * @example
+ * <!-- Accept only images -->
+ * <vds-upload-drag
+ *   accept="image/*"
+ *   title="Upload Images"
+ *   description="JPG, PNG, GIF files only">
+ *   <vds-icon slot="icon" name="image" size="large"></vds-icon>
+ * </vds-upload-drag>
+ *
+ * @example
+ * <!-- Accept specific file types -->
+ * <vds-upload-drag
+ *   accept=".pdf,.doc,.docx,.xls,.xlsx"
+ *   title="Upload Office Documents"
+ *   description="PDF and Microsoft Office files only">
+ *   <vds-icon slot="icon" name="folder" size="large"></vds-icon>
+ * </vds-upload-drag>
+ *
+ * @example
+ * <!-- Upload with camera capture -->
+ * <vds-upload-drag
+ *   capture="environment"
+ *   accept="image/*"
+ *   multiple="false"
+ *   title="Take a Photo"
+ *   description="Use your camera to capture an image">
+ *   <vds-icon slot="icon" name="camera" size="large"></vds-icon>
+ * </vds-upload-drag>
+ *
+ * @example
+ * <!-- Upload with file validation -->
+ * <vds-upload-drag id="validated-upload" accept="image/*">
+ *   <vds-icon slot="icon" name="upload" size="large"></vds-icon>
+ * </vds-upload-drag>
+ * <div id="file-list"></div>
+ * <script>
+ *   const upload = document.getElementById('validated-upload');
+ *   const fileList = document.getElementById('file-list');
+ *
+ *   upload.addEventListener('fileSelected', (e) => {
+ *     const files = e.detail;
+ *     const maxSize = 5 * 1024 * 1024; // 5MB
+ *
+ *     files.forEach(file => {
+ *       if (file.size > maxSize) {
+ *         alert(`${file.name} is too large. Maximum size is 5MB.`);
+ *       } else {
+ *         const item = document.createElement('div');
+ *         item.textContent = `${file.name} (${(file.size / 1024).toFixed(2)} KB)`;
+ *         fileList.appendChild(item);
+ *       }
+ *     });
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Upload with preview -->
+ * <vds-upload-drag id="preview-upload" accept="image/*">
+ *   <vds-icon slot="icon" name="image" size="large"></vds-icon>
+ * </vds-upload-drag>
+ * <div id="preview-container" style="display: flex; gap: 12px; margin-top: 16px;"></div>
+ * <script>
+ *   const upload = document.getElementById('preview-upload');
+ *   const preview = document.getElementById('preview-container');
+ *
+ *   upload.addEventListener('fileSelected', (e) => {
+ *     preview.innerHTML = '';
+ *     e.detail.forEach(file => {
+ *       const reader = new FileReader();
+ *       reader.onload = (evt) => {
+ *         const img = document.createElement('img');
+ *         img.src = evt.target.result;
+ *         img.style.width = '100px';
+ *         img.style.height = '100px';
+ *         img.style.objectFit = 'cover';
+ *         preview.appendChild(img);
+ *       };
+ *       reader.readAsDataURL(file);
+ *     });
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Upload with custom icon slot -->
+ * <vds-upload-drag
+ *   title="Drop your files here"
+ *   description="Any file type accepted">
+ *   <div slot="icon" style="display: flex; flex-direction: column; align-items: center;">
+ *     <vds-icon name="cloud-upload" size="xlarge" color="primary"></vds-icon>
+ *     <span style="margin-top: 8px; font-size: 0.875rem; color: var(--text-secondary);">Drag & Drop</span>
+ *   </div>
+ * </vds-upload-drag>
+ *
+ * @example
+ * <!-- Upload with file counter -->
+ * <vds-upload-drag id="counter-upload">
+ *   <vds-icon slot="icon" name="upload" size="large"></vds-icon>
+ * </vds-upload-drag>
+ * <div id="counter">Files uploaded: 0</div>
+ * <script>
+ *   const upload = document.getElementById('counter-upload');
+ *   const counter = document.getElementById('counter');
+ *   let count = 0;
+ *
+ *   upload.addEventListener('fileSelected', (e) => {
+ *     count += e.detail.length;
+ *     counter.textContent = `Files uploaded: ${count}`;
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Complete upload form with vds-upload-item -->
+ * <form id="upload-form">
+ *   <vds-field label="Attachments" helper-text="Upload supporting documents">
+ *     <vds-upload-drag
+ *       id="form-upload"
+ *       accept=".pdf,.doc,.docx"
+ *       title="Upload Documents"
+ *       description="PDF or Word documents only">
+ *       <vds-icon slot="icon" name="attach" size="large"></vds-icon>
+ *     </vds-upload-drag>
+ *   </vds-field>
+ *   <div id="uploaded-files"></div>
+ *   <vds-button type="submit" variant="primary">Submit</vds-button>
+ * </form>
+ * <script>
+ *   const formUpload = document.getElementById('form-upload');
+ *   const uploadedFiles = document.getElementById('uploaded-files');
+ *   const fileArray = [];
+ *
+ *   formUpload.addEventListener('fileSelected', (e) => {
+ *     fileArray.push(...e.detail);
+ *     e.detail.forEach((file) => {
+ *       const item = document.createElement('vds-upload-item');
+ *       item.value = file.name;
+ *       item.status = 'loading';
+ *       item.loadingValue = 0;
+ *       uploadedFiles.appendChild(item);
+ *
+ *       // Simulate upload progress
+ *       simulateUpload(file, item);
+ *
+ *       item.addEventListener('actionIconClick', () => {
+ *         item.remove();
+ *         const index = fileArray.indexOf(file);
+ *         if (index > -1) fileArray.splice(index, 1);
+ *       });
+ *     });
+ *   });
+ *
+ *   async function simulateUpload(file, item) {
+ *     for (let i = 0; i <= 100; i += 10) {
+ *       await new Promise(resolve => setTimeout(resolve, 200));
+ *       item.loadingValue = i;
+ *     }
+ *     item.status = 'default';
+ *   }
+ *
+ *   document.getElementById('upload-form').addEventListener('submit', (e) => {
+ *     e.preventDefault();
+ *     console.log('Submitting files:', fileArray);
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Upload with progress tracking using vds-upload-item -->
+ * <vds-upload-drag id="progress-upload">
+ *   <vds-icon slot="icon" name="upload" size="large"></vds-icon>
+ * </vds-upload-drag>
+ * <div id="progress-list"></div>
+ * <script>
+ *   const upload = document.getElementById('progress-upload');
+ *   const progressList = document.getElementById('progress-list');
+ *
+ *   upload.addEventListener('fileSelected', (e) => {
+ *     e.detail.forEach(file => {
+ *       const item = document.createElement('vds-upload-item');
+ *       item.value = file.name;
+ *       item.status = 'loading';
+ *       item.loadingValue = 0;
+ *       progressList.appendChild(item);
+ *
+ *       // Simulate upload progress
+ *       simulateUpload(file, item);
+ *
+ *       // Handle remove button
+ *       item.addEventListener('actionIconClick', () => {
+ *         item.remove();
+ *       });
+ *     });
+ *   });
+ *
+ *   async function simulateUpload(file, uploadItem) {
+ *     for (let i = 0; i <= 100; i += 10) {
+ *       await new Promise(resolve => setTimeout(resolve, 200));
+ *       uploadItem.loadingValue = i;
+ *     }
+ *     uploadItem.status = 'default';
+ *   }
+ * </script>
+ */
 export class VdsUploadDrag {
     constructor() {
-        /** The title of the upload area */
+        /**
+         * The title text displayed in the upload area
+         * @type {string}
+         * @default "Click or drag file to this area to upload"
+         */
         this.title = 'Click or drag file to this area to upload';
-        /** The description of the upload area */
+        /**
+         * The description text displayed below the title in the upload area
+         * @type {string}
+         * @default "Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files"
+         */
         this.description = 'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files';
-        /** Specifies the multiple prop in the input[type="file"] */
+        /**
+         * Enables multiple file selection. When false, only one file can be selected at a time.
+         * @type {boolean}
+         * @default true
+         */
         this.multiple = true;
+        /**
+         * Internal state tracking whether a file is currently being dragged over the component
+         * @private
+         * @type {boolean}
+         * @default false
+         */
         this.isDragging = false;
+        /**
+         * Handles the dragover event to enable file drop and update drag state
+         * @private
+         * @param {DragEvent} event - The drag event
+         */
         this.handleDragOver = (event) => {
             event.preventDefault();
             event.stopPropagation();
             event.dataTransfer.dropEffect = 'copy';
             this.isDragging = true;
         };
+        /**
+         * Handles the dragleave event to reset drag state
+         * @private
+         * @param {DragEvent} event - The drag event
+         */
         this.handleDragLeave = (event) => {
             event.preventDefault();
             event.stopPropagation();
             this.isDragging = false;
         };
+        /**
+         * Handles the drop event to receive files and emit fileSelected event
+         * @private
+         * @param {DragEvent} event - The drop event
+         */
         this.handleDrop = (event) => {
             var _a;
             event.preventDefault();
@@ -29,10 +296,18 @@ export class VdsUploadDrag {
                 this.handleFiles(Array.from(files));
             }
         };
+        /**
+         * Triggers the file input click when the upload area is clicked
+         * @private
+         */
         this.handleClick = () => {
             var _a;
             (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
         };
+        /**
+         * Handles file input change event when files are selected via click
+         * @private
+         */
         this.handleFileInputChange = () => {
             var _a;
             const files = (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files;
@@ -41,11 +316,20 @@ export class VdsUploadDrag {
             }
         };
     }
+    /**
+     * Processes and emits the selected files
+     * @private
+     * @param {File[]} files - Array of selected files
+     */
     handleFiles(files) {
         this.fileSelected.emit(files);
     }
+    /**
+     * Renders the upload drag component
+     * @returns The rendered upload drag element
+     */
     render() {
-        return (h(Host, { key: '3182c23c04af0a53868de282f93bcb48b8f8731c', onClick: this.handleClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'b433d96a591ddba5c9baa558b92bdc6f8de66c21', type: "file", ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, multiple: this.multiple, accept: this.accept, capture: this.capture, hidden: true }), h("vds-card", { key: '8484c4aa33412fceb784459c94bf4faea701feb5', padding: "spacing-09", shadowBox: "elevation-shadow-0", class: { 'vds-card--drag-active': this.isDragging } }, h("div", { key: '2de60a85e634e7ec5742564ba7b88c8a80d0168f', class: "vds-upload__content" }, h("slot", { key: '990b2aba63c5962c7f6ce4d72752519d72438ad4', name: "icon" }), h("div", { key: 'b49608d6262113792c73e2bed6d10fe8f478daac', class: "vds-upload__body" }, h("span", { key: '8ab3024dc21cb9017838e3158d59b85101f83d0a', class: "vds-upload__title" }, this.title), h("span", { key: '2a5ef09f29b464449fedece286a97ba067a78c5a', class: "vds-upload__description" }, this.description))))));
+        return (h(Host, { key: '15b002ee29d87b718fea777afe51d5f04c795b27', onClick: this.handleClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'f4357c3ccd3144ac4b8e90a2fc9838465cd96d83', type: "file", ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, multiple: this.multiple, accept: this.accept, capture: this.capture, hidden: true }), h("vds-card", { key: '5f481f7e563f67789197b7e45056c93ec62cae35', padding: "spacing-09", shadowBox: "elevation-shadow-0", class: { 'vds-card--drag-active': this.isDragging } }, h("div", { key: '92f480d23556b77ba2780aa975ee8b0e8e479f32', class: "vds-upload__content" }, h("slot", { key: '7b134e354362fafb3357531cb2629656928bb87a', name: "icon" }), h("div", { key: 'cbd965329d67e28c561b0b9bd9f7299cad227431', class: "vds-upload__body" }, h("span", { key: 'd483526ee6d276cef16b7501808172fa871afa37', class: "vds-upload__title" }, this.title), h("span", { key: '7354ec81cbbace434399643b23c95f707b849615', class: "vds-upload__description" }, this.description))))));
     }
     static get is() { return "vds-upload-drag"; }
     static get encapsulation() { return "shadow"; }
@@ -72,8 +356,14 @@ export class VdsUploadDrag {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The title of the upload area"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"Click or drag file to this area to upload\""
+                        }],
+                    "text": "The title text displayed in the upload area"
                 },
                 "getter": false,
                 "setter": false,
@@ -92,8 +382,14 @@ export class VdsUploadDrag {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The description of the upload area"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files\""
+                        }],
+                    "text": "The description text displayed below the title in the upload area"
                 },
                 "getter": false,
                 "setter": false,
@@ -112,8 +408,14 @@ export class VdsUploadDrag {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Specifies the multiple prop in the input[type=\"file\"]"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Enables multiple file selection. When false, only one file can be selected at a time."
                 },
                 "getter": false,
                 "setter": false,
@@ -132,8 +434,11 @@ export class VdsUploadDrag {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Specifies the accept prop in the input[type=\"file\"]"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Specifies the types of files that can be selected. Accepts MIME types or file extensions.\nExamples: \"image/*\", \".pdf,.doc,.docx\", \"video/*\""
                 },
                 "getter": false,
                 "setter": false,
@@ -151,8 +456,11 @@ export class VdsUploadDrag {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Specifies the capture prop in the input[type=\"file\"]"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"user\" | \"environment\"}"
+                        }],
+                    "text": "Indicates which camera to use for capturing images/videos on mobile devices"
                 },
                 "getter": false,
                 "setter": false,
@@ -174,8 +482,14 @@ export class VdsUploadDrag {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits the value of the selected files"
+                    "tags": [{
+                            "name": "event",
+                            "text": "fileSelected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<File[]>}"
+                        }],
+                    "text": "Emits the selected files when user selects files via click or drag-and-drop"
                 },
                 "complexType": {
                     "original": "File[]",
@@ -190,4 +504,3 @@ export class VdsUploadDrag {
             }];
     }
 }
-//# sourceMappingURL=vds-upload-drag.js.map

package/dist/collection/components/upload-drag/vds-upload-drag.stories.js

@@ -83,4 +83,3 @@ CustomUsage.args = {
     accept: '',
     capture: undefined,
 };
-//# sourceMappingURL=vds-upload-drag.stories.js.map

package/dist/collection/components/upload-item/vds-upload-item.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,21 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
-/* This mixing can be used to implement font styling. 
- * to do so, you need to import the scss file and used @include font-style(title, medium);
- * This will implement styling according to the $volt-font-styles map
- */
 .vds-base-item__label {
   flex: 1 0 0;
   word-break: break-word;
@@ -968,6 +969,12 @@ vds-checkbox::part(checkbox-container) {
   align-items: center;
 }
 
+.vds-base-item__informative-icon vds-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 :host {
   display: block;
 }
@@ -982,6 +989,9 @@ vds-checkbox::part(checkbox-container) {
   width: 100%;
   color: var(--color-text-high);
 }
+:host .vds-upload-item .highlighted-text {
+  font-weight: 600;
+}
 :host .vds-upload-item:focus:not(:focus-visible) {
   outline: none;
   border-radius: var(--radius-sharp);