design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-30 11:35:38 +00:00
parent 7d1e06701b
commit 1c25554c38
7 changed files with 1340 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
ts_web/elements/profilepicture/dees-input-profilepicture.demo.ts Normal file
View File

@ -0,0 +1,208 @@
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>
`;