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

import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../dees-panel.js';
import './dees-input-profilepicture.js';
import type { DeesInputProfilePicture } from './dees-input-profilepicture.js';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      .demo-row {
        display: flex;
        gap: 48px;
        align-items: center;
        flex-wrap: wrap;
      }
      
      .demo-output {
        margin-top: 16px;
        padding: 12px;
        background: rgba(0, 105, 242, 0.1);
        border-radius: 4px;
        font-size: 14px;
        font-family: monospace;
        word-break: break-all;
        max-height: 100px;
        overflow-y: auto;
      }
      
      .feature-list {
        margin-top: 16px;
        padding-left: 20px;
      }
      
      .feature-list li {
        margin-bottom: 8px;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Basic demo with round profile picture
      const roundProfile = elementArg.querySelector('dees-input-profilepicture[shape="round"]');
      
      if (roundProfile) {
        roundProfile.addEventListener('change', (event: CustomEvent) => {
          const target = event.target as DeesInputProfilePicture;
          console.log('Round profile picture changed:', target.value?.substring(0, 50) + '...');
        });
      }
    }}>
      <dees-panel .title=${'Profile Picture Input'} .subtitle=${'Basic usage with round and square shapes'}>
        <div class="demo-row">
          <dees-input-profilepicture
            label="Profile Picture (Round)"
            description="Click to upload or drag & drop an image"
            shape="round"
            size="120"
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Profile Picture (Square)"
            description="Supports JPEG, PNG, and WebP formats"
            shape="square"
            size="120"
          ></dees-input-profilepicture>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Different sizes demo
      const profiles = elementArg.querySelectorAll('dees-input-profilepicture');
      profiles.forEach((profile) => {
        profile.addEventListener('change', (event: CustomEvent) => {
          const target = event.target as DeesInputProfilePicture;
          console.log(`Profile (size ${target.size}) changed`);
        });
      });
    }}>
      <dees-panel .title=${'Size Variations'} .subtitle=${'Profile pictures in different sizes'}>
        <div class="demo-row">
          <dees-input-profilepicture
            label="Small (80px)"
            shape="round"
            size="80"
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Medium (120px)"
            shape="round"
            size="120"
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Large (160px)"
            shape="round"
            size="160"
          ></dees-input-profilepicture>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Pre-filled profile with placeholder
      const sampleImageUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNjY3ZWVhIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NjRiYTIiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkaWVudCkiIC8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI4MCIgZmlsbD0id2hpdGUiPkpEPC90ZXh0Pgo8L3N2Zz4=';
      
      const prefilledProfile = elementArg.querySelector('#prefilled-profile') as DeesInputProfilePicture;
      if (prefilledProfile) {
        prefilledProfile.value = sampleImageUrl;
        
        prefilledProfile.addEventListener('change', (event: CustomEvent) => {
          const target = event.target as DeesInputProfilePicture;
          const output = elementArg.querySelector('#prefilled-output');
          if (output) {
            output.textContent = target.value ? 
              `Image data: ${target.value.substring(0, 80)}...` : 
              'No image selected';
          }
        });
      }
    }}>
      <dees-panel .title=${'Pre-filled and Value Binding'} .subtitle=${'Profile picture with initial value and change tracking'}>
        <dees-input-profilepicture
          id="prefilled-profile"
          label="Edit Existing Profile"
          description="Click the edit button to change or delete to remove"
          shape="round"
          size="150"
        ></dees-input-profilepicture>
        
        <div id="prefilled-output" class="demo-output">
          Image data will appear here when changed
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Disabled state demo
      const disabledProfile = elementArg.querySelector('#disabled-profile') as DeesInputProfilePicture;
      if (disabledProfile) {
        disabledProfile.value = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2NjY2NjYyIgLz4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjYwIiBmaWxsPSJ3aGl0ZSI+TkE8L3RleHQ+Cjwvc3ZnPg==';
      }
    }}>
      <dees-panel .title=${'Form States'} .subtitle=${'Different states and configurations'}>
        <div class="demo-row">
          <dees-input-profilepicture
            label="Required Field"
            description="This field is required"
            shape="round"
            .required=${true}
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            id="disabled-profile"
            label="Disabled State"
            description="Cannot be edited"
            shape="square"
            .disabled=${true}
          ></dees-input-profilepicture>
          
          <dees-input-profilepicture
            label="Upload Only"
            description="Delete not allowed"
            shape="round"
            .allowDelete=${false}
          ></dees-input-profilepicture>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper>
      <dees-panel .title=${'Features'} .subtitle=${'Complete feature set of the profile picture input'}>
        <ul class="feature-list">
          <li><strong>Image Upload:</strong> Click to upload or drag & drop images</li>
          <li><strong>Image Cropping:</strong> Interactive crop tool with resize handles</li>
          <li><strong>Shape Support:</strong> Round or square profile pictures</li>
          <li><strong>Size Customization:</strong> Adjustable dimensions</li>
          <li><strong>Preview & Edit:</strong> Hover overlay with edit and delete options</li>
          <li><strong>File Validation:</strong> Format and size restrictions</li>
          <li><strong>Responsive Design:</strong> Works on desktop and mobile devices</li>
          <li><strong>Form Integration:</strong> Standard form value binding and validation</li>
          <li><strong>Accessibility:</strong> Keyboard navigation and screen reader support</li>
          <li><strong>Z-Index Management:</strong> Proper modal stacking with registry</li>
        </ul>
        
        <div style="margin-top: 24px;">
          <strong>Supported Formats:</strong> JPEG, PNG, WebP<br>
          <strong>Max File Size:</strong> 5MB (configurable)<br>
          <strong>Output Format:</strong> Base64 encoded JPEG
        </div>
      </dees-panel>
    </dees-demowrapper>
  </div>
`;