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

package/dist/types/components/topbar/vds-topbar.d.ts

@@ -0,0 +1,204 @@
+/**
+ * @component vds-topbar
+ * @description A flexible topbar component that provides a consistent navigation header layout. Supports content organization in left, center, right, and bottom sections through slots. Commonly used for application headers with branding, navigation, and user actions.
+ *
+ * @example
+ * <!-- Basic topbar with logo and navigation -->
+ * <vds-topbar>
+ *   <div slot="left">
+ *     <img src="logo.svg" alt="Company Logo" height="32">
+ *   </div>
+ *   <nav slot="center">
+ *     <vds-link href="/home">Home</vds-link>
+ *     <vds-link href="/products">Products</vds-link>
+ *     <vds-link href="/about">About</vds-link>
+ *   </nav>
+ *   <div slot="right">
+ *     <vds-avatar name="John Doe"></vds-avatar>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar without border -->
+ * <vds-topbar hide-border="true">
+ *   <div slot="left">
+ *     <h1>My Application</h1>
+ *   </div>
+ *   <div slot="right">
+ *     <vds-icon-button icon="hamburger" aria-label="Menu"></vds-icon-button>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar with search in center -->
+ * <vds-topbar>
+ *   <div slot="left">
+ *     <img src="logo.svg" alt="Logo" height="32">
+ *   </div>
+ *   <div slot="center">
+ *     <vds-basic-input
+ *       placeholder="Search..."
+ *       type="search"
+ *       width="400px">
+ *     </vds-basic-input>
+ *   </div>
+ *   <div slot="right">
+ *     <vds-icon-button icon="bell" aria-label="Notifications"></vds-icon-button>
+ *     <vds-icon-button icon="module-settings" aria-label="Settings"></vds-icon-button>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar with bottom navigation -->
+ * <vds-topbar>
+ *   <div slot="left">
+ *     <img src="logo.svg" alt="Logo" height="32">
+ *   </div>
+ *   <div slot="right">
+ *     <vds-button>Sign In</vds-button>
+ *   </div>
+ *   <vds-tabs-group slot="bottom" active-tab-index="0">
+ *     <vds-tab slot="tab-list" value="Dashboard"></vds-tab>
+ *     <vds-tab slot="tab-list" value="Analytics"></vds-tab>
+ *     <vds-tab slot="tab-list" value="Reports"></vds-tab>
+ *   </vds-tabs-group>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar with menu and actions -->
+ * <vds-topbar>
+ *   <div slot="left" style="display: flex; align-items: center; gap: 16px;">
+ *     <vds-icon-button icon="hamburger" aria-label="Open menu"></vds-icon-button>
+ *     <span style="font-size: 1.25rem; font-weight: 600;">Dashboard</span>
+ *   </div>
+ *   <div slot="right" style="display: flex; gap: 8px;">
+ *     <vds-icon-button icon="information" aria-label="Help"></vds-icon-button>
+ *     <vds-icon-button icon="bell" aria-label="Notifications"></vds-icon-button>
+ *     <vds-avatar name="Jane Smith"></vds-avatar>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar with breadcrumbs in bottom -->
+ * <vds-topbar>
+ *   <div slot="left">
+ *     <h2>Project Management</h2>
+ *   </div>
+ *   <div slot="right">
+ *     <vds-button variant="primary">New Project</vds-button>
+ *   </div>
+ *   <nav slot="bottom" aria-label="Breadcrumb">
+ *     <vds-breadcrumb-item href="/">Home</vds-breadcrumb-item>
+ *     <vds-breadcrumb-item href="/projects">Projects</vds-breadcrumb-item>
+ *     <vds-breadcrumb-item>Current Project</vds-breadcrumb-item>
+ *   </nav>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Simple topbar with only left and right content -->
+ * <vds-topbar>
+ *   <div slot="left">
+ *     <img src="brand.svg" alt="Brand" height="40">
+ *   </div>
+ *   <div slot="right" style="display: flex; gap: 12px;">
+ *     <vds-link href="/login">Login</vds-link>
+ *     <vds-button variant="primary">Sign Up</vds-button>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar with dropdown menu -->
+ * <vds-topbar>
+ *   <div slot="left">
+ *     <img src="logo.svg" alt="Logo" height="32">
+ *   </div>
+ *   <nav slot="center" style="display: flex; gap: 24px;">
+ *     <vds-link href="/home">Home</vds-link>
+ *     <vds-basic-dropdown label="Products">
+ *       <vds-dropdown-item>Product 1</vds-dropdown-item>
+ *       <vds-dropdown-item>Product 2</vds-dropdown-item>
+ *       <vds-dropdown-item>Product 3</vds-dropdown-item>
+ *     </vds-basic-dropdown>
+ *     <vds-link href="/contact">Contact</vds-link>
+ *   </nav>
+ *   <div slot="right">
+ *     <vds-icon-button icon="container" aria-label="Shopping cart"></vds-icon-button>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Mobile-friendly topbar -->
+ * <vds-topbar hide-border="true">
+ *   <div slot="left" style="display: flex; align-items: center; gap: 12px;">
+ *     <vds-icon-button icon="hamburger" aria-label="Menu"></vds-icon-button>
+ *     <span style="font-weight: 600;">App Name</span>
+ *   </div>
+ *   <div slot="right">
+ *     <vds-icon-button icon="magnify" aria-label="Search"></vds-icon-button>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar with user profile and notifications -->
+ * <vds-topbar>
+ *   <div slot="left">
+ *     <img src="company-logo.svg" alt="Company" height="36">
+ *   </div>
+ *   <div slot="right" style="display: flex; align-items: center; gap: 16px;">
+ *     <vds-basic-input
+ *       placeholder="Quick search..."
+ *       type="search"
+ *       size="small"
+ *       width="200px">
+ *     </vds-basic-input>
+ *     <vds-tooltip text="Notifications" position="bottom">
+ *       <vds-badge-dot slot="tooltip-trigger" variant="error" position="top-right">
+ *         <vds-icon-button icon="bell" aria-label="Notifications"></vds-icon-button>
+ *       </vds-badge-dot>
+ *     </vds-tooltip>
+ *     <vds-basic-dropdown trigger-type="custom">
+ *       <vds-avatar slot="custom-trigger" name="User Name"></vds-avatar>
+ *       <vds-dropdown-item>Profile</vds-dropdown-item>
+ *       <vds-dropdown-item>Settings</vds-dropdown-item>
+ *       <vds-dropdown-item>Logout</vds-dropdown-item>
+ *     </vds-basic-dropdown>
+ *   </div>
+ * </vds-topbar>
+ *
+ * @example
+ * <!-- Topbar with all sections populated -->
+ * <vds-topbar>
+ *   <div slot="left" style="display: flex; gap: 16px; align-items: center;">
+ *     <img src="logo.svg" alt="Logo" height="32">
+ *     <span style="font-size: 1.5rem; font-weight: bold;">Enterprise App</span>
+ *   </div>
+ *   <nav slot="center" style="display: flex; gap: 20px;">
+ *     <vds-link href="/dashboard">Dashboard</vds-link>
+ *     <vds-link href="/reports">Reports</vds-link>
+ *     <vds-link href="/analytics">Analytics</vds-link>
+ *   </nav>
+ *   <div slot="right" style="display: flex; gap: 12px; align-items: center;">
+ *     <vds-chip>Trial: 14 days left</vds-chip>
+ *     <vds-icon-button icon="information" aria-label="Help"></vds-icon-button>
+ *     <vds-avatar name="Admin User"></vds-avatar>
+ *   </div>
+ *   <div slot="bottom" style="padding: 8px 0;">
+ *     <vds-notification variant="info" dismissible="true">
+ *       New features are available! Check out our latest updates.
+ *     </vds-notification>
+ *   </div>
+ * </vds-topbar>
+ */
+export declare class VdsTopbar {
+    /**
+     * Hide or show the border bottom of the topbar component
+     * @type {boolean}
+     * @default false
+     */
+    hideBorder: boolean;
+    /**
+     * Renders the topbar component
+     * @returns The rendered topbar element
+     */
+    render(): any;
+}

package/dist/types/components/topbar/vds-topbar.stories.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            toc: boolean;
+        };
+    };
+};
+export default _default;
+export declare const BasicUsage: any;
+export declare const basicFilterUsage: any;
+export declare const basicTabUsage: any;
+export declare const basicNavigation: any;
+export declare const navigationWithFilters: any;
+export declare const navigationWithTabs: any;

package/dist/types/components/upload-drag/vds-upload-drag.d.ts

@@ -1,24 +1,319 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @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 declare class VdsUploadDrag {
-    /** 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"
+     */
     title: string;
-    /** 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"
+     */
     description: string;
-    /** 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
+     */
     multiple: boolean;
-    /** Specifies the accept prop in the input[type="file"] */
+    /**
+     * Specifies the types of files that can be selected. Accepts MIME types or file extensions.
+     * Examples: "image/*", ".pdf,.doc,.docx", "video/*"
+     * @type {string}
+     */
     accept?: string;
-    /** Specifies the capture prop in the input[type="file"] */
+    /**
+     * Indicates which camera to use for capturing images/videos on mobile devices
+     * @type {"user" | "environment"}
+     */
     capture?: 'user' | 'environment';
-    /** Emits the value of the selected files */
+    /**
+     * Emits the selected files when user selects files via click or drag-and-drop
+     * @event fileSelected
+     * @type {EventEmitter<File[]>}
+     */
     fileSelected: EventEmitter<File[]>;
+    /**
+     * Internal state tracking whether a file is currently being dragged over the component
+     * @private
+     * @type {boolean}
+     * @default false
+     */
     isDragging: boolean;
     private fileInput?;
+    /**
+     * Handles the dragover event to enable file drop and update drag state
+     * @private
+     * @param {DragEvent} event - The drag event
+     */
     private handleDragOver;
+    /**
+     * Handles the dragleave event to reset drag state
+     * @private
+     * @param {DragEvent} event - The drag event
+     */
     private handleDragLeave;
+    /**
+     * Handles the drop event to receive files and emit fileSelected event
+     * @private
+     * @param {DragEvent} event - The drop event
+     */
     private handleDrop;
+    /**
+     * Triggers the file input click when the upload area is clicked
+     * @private
+     */
     private handleClick;
+    /**
+     * Handles file input change event when files are selected via click
+     * @private
+     */
     private handleFileInputChange;
+    /**
+     * Processes and emits the selected files
+     * @private
+     * @param {File[]} files - Array of selected files
+     */
     private handleFiles;
+    /**
+     * Renders the upload drag component
+     * @returns The rendered upload drag element
+     */
     render(): any;
 }