dees-catalog/ts_web/elements/dees-input-fileupload.demo.ts

import { html, css, cssManager } from '@design.estate/dees-element';

export const demoFunc = () => html`
  <dees-demowrapper>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .upload-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        
        @media (max-width: 768px) {
          .upload-grid {
            grid-template-columns: 1fr;
          }
        }
        
        .upload-box {
          padding: 16px;
          background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
          border-radius: 4px;
          border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444')};
        }
        
        .upload-box h4 {
          margin-top: 0;
          margin-bottom: 16px;
          color: ${cssManager.bdTheme('#333', '#fff')};
          font-size: 16px;
        }
        
        .info-section {
          margin-top: 32px;
          padding: 16px;
          background: ${cssManager.bdTheme('#fff3cd', '#332701')};
          border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#664400')};
          border-radius: 4px;
          color: ${cssManager.bdTheme('#856404', '#ffecb5')};
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'1. Basic File Upload'} .subtitle=${'Simple file upload with drag and drop support'}>
        <dees-input-fileupload
          .label=${'Attachments'}
          .description=${'Upload any files by clicking or dragging them here'}
        ></dees-input-fileupload>
        
        <dees-input-fileupload
          .label=${'Single File Only'}
          .description=${'Only one file can be uploaded at a time'}
          .multiple=${false}
          .buttonText=${'Choose File'}
        ></dees-input-fileupload>
      </dees-panel>
      
      <dees-panel .title=${'2. File Type Restrictions'} .subtitle=${'Upload areas with specific file type requirements'}>
        <div class="upload-grid">
          <div class="upload-box">
            <h4>Images Only</h4>
            <dees-input-fileupload
              .label=${'Profile Picture'}
              .description=${'JPG, PNG or GIF (max 5MB)'}
              .accept=${'image/jpeg,image/png,image/gif'}
              .maxSize=${5 * 1024 * 1024}
              .multiple=${false}
              .buttonText=${'Select Image'}
            ></dees-input-fileupload>
          </div>
          
          <div class="upload-box">
            <h4>Documents Only</h4>
            <dees-input-fileupload
              .label=${'Resume'}
              .description=${'PDF or Word documents only'}
              .accept=${".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"}
              .buttonText=${'Select Document'}
            ></dees-input-fileupload>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'3. Validation & Limits'} .subtitle=${'File size limits and validation examples'}>
        <dees-input-fileupload
          .label=${'Small Files Only'}
          .description=${'Maximum file size: 1MB'}
          .maxSize=${1024 * 1024}
          .buttonText=${'Upload Small File'}
        ></dees-input-fileupload>
        
        <dees-input-fileupload
          .label=${'Limited Upload'}
          .description=${'Maximum 3 files, each up to 2MB'}
          .maxFiles=${3}
          .maxSize=${2 * 1024 * 1024}
        ></dees-input-fileupload>
        
        <dees-input-fileupload
          .label=${'Required Upload'}
          .description=${'This field is required'}
          .required=${true}
        ></dees-input-fileupload>
      </dees-panel>
      
      <dees-panel .title=${'4. States & Styling'} .subtitle=${'Different states and validation feedback'}>
        <dees-input-fileupload
          .label=${'Disabled Upload'}
          .description=${'File upload is currently disabled'}
          .disabled=${true}
        ></dees-input-fileupload>
        
        <dees-input-fileupload
          .label=${'Pre-filled Example'}
          .description=${'Component with pre-loaded files'}
          .value=${[
            new File(['Hello World'], 'example.txt', { type: 'text/plain' }),
            new File(['Test Data'], 'data.json', { type: 'application/json' })
          ]}
        ></dees-input-fileupload>
      </dees-panel>
      
      <dees-panel .title=${'5. Form Integration'} .subtitle=${'Complete form with various file upload scenarios'}>
        <dees-form>
          <h3 style="margin-top: 0; margin-bottom: 24px; color: ${cssManager.bdTheme('#333', '#fff')};">Job Application Form</h3>
          
          <dees-input-text 
            .label=${'Full Name'} 
            .required=${true}
            .key=${'fullName'}
          ></dees-input-text>
          
          <dees-input-text 
            .label=${'Email'} 
            .inputType=${'email'} 
            .required=${true}
            .key=${'email'}
          ></dees-input-text>
          
          <dees-input-fileupload
            .label=${'Resume'}
            .description=${'Required: PDF format only (max 10MB)'}
            .required=${true}
            .accept=${'application/pdf'}
            .maxSize=${10 * 1024 * 1024}
            .multiple=${false}
            .key=${'resume'}
          ></dees-input-fileupload>
          
          <dees-input-fileupload
            .label=${'Portfolio'}
            .description=${'Optional: Upload up to 5 work samples (images or PDFs, max 5MB each)'}
            .accept=${'image/*,application/pdf'}
            .maxFiles=${5}
            .maxSize=${5 * 1024 * 1024}
            .key=${'portfolio'}
          ></dees-input-fileupload>
          
          <dees-input-fileupload
            .label=${'References'}
            .description=${'Upload reference letters (optional)'}
            .accept=${".pdf,.doc,.docx"}
            .key=${'references'}
          ></dees-input-fileupload>
          
          <dees-input-text
            .label=${'Additional Comments'}
            .inputType=${'textarea'}
            .description=${'Any additional information you would like to share'}
            .key=${'comments'}
          ></dees-input-text>
          
          <dees-form-submit .text=${'Submit Application'}></dees-form-submit>
        </dees-form>
        
        <div class="info-section">
          <h4 style="margin-top: 0;">Enhanced Features:</h4>
          <ul style="margin: 0; padding-left: 20px;">
            <li>Drag & drop with visual feedback</li>
            <li>File type restrictions via accept attribute</li>
            <li>File size validation with custom limits</li>
            <li>Maximum file count restrictions</li>
            <li>Image preview thumbnails</li>
            <li>File type-specific icons</li>
            <li>Clear all button for multiple files</li>
            <li>Proper validation states and messages</li>
            <li>Keyboard accessible</li>
            <li>Single or multiple file modes</li>
          </ul>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;