From b41e9f31e7965781f87bb7f189776d2455bf5a43 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Thu, 26 Jun 2025 14:46:37 +0000
Subject: [PATCH] add proper input demo page

---
 .gitignore                     |   1 -
 ts_web/pages/index.ts          |   2 +
 ts_web/pages/input-showcase.ts | 593 +++++++++++++++++++++++++++++++++
 ts_web/pages/mainpage.ts       |   6 +
 4 files changed, 601 insertions(+), 1 deletion(-)
 create mode 100644 ts_web/pages/index.ts
 create mode 100644 ts_web/pages/input-showcase.ts
 create mode 100644 ts_web/pages/mainpage.ts

diff --git a/.gitignore b/.gitignore
index ef13c79..352c177 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,6 @@
 # artifacts
 coverage/
 public/
-pages/
 
 # installs
 node_modules/
diff --git a/ts_web/pages/index.ts b/ts_web/pages/index.ts
new file mode 100644
index 0000000..081febb
--- /dev/null
+++ b/ts_web/pages/index.ts
@@ -0,0 +1,2 @@
+export * from './mainpage.js';
+export * from './input-showcase.js';
\ No newline at end of file
diff --git a/ts_web/pages/input-showcase.ts b/ts_web/pages/input-showcase.ts
new file mode 100644
index 0000000..3f37033
--- /dev/null
+++ b/ts_web/pages/input-showcase.ts
@@ -0,0 +1,593 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '../elements/index.js';
+
+export const inputShowcase = () => html`
+  <div class="page-wrapper">
+    <style>
+      ${css`
+        .page-wrapper {
+          display: block;
+          background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
+          min-height: 100%;
+          width: 100%;
+          box-sizing: border-box;
+          overflow-x: hidden;
+          overflow-y: auto;
+        }
+
+        .showcase-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 48px 24px;
+        }
+
+
+      .showcase-header {
+        text-align: center;
+        margin-bottom: 48px;
+      }
+
+      .showcase-title {
+        font-size: 48px;
+        font-weight: 700;
+        margin: 0 0 16px 0;
+        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+      }
+
+      .showcase-subtitle {
+        font-size: 20px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin: 0;
+        line-height: 1.6;
+      }
+
+      .showcase-section {
+        margin-bottom: 48px;
+      }
+      
+      .showcase-section:last-child {
+        margin-bottom: 0;
+        padding-bottom: 48px;
+      }
+
+      /* Ensure all headings are theme-aware */
+      h1, h2, h3, h4, h5, h6 {
+        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+        margin: 0;
+      }
+
+      p {
+        color: ${cssManager.bdTheme('#666', '#999')};
+      }
+
+      strong {
+        color: ${cssManager.bdTheme('#333', '#e0e0e0')};
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 32px;
+      }
+
+      .section-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
+      }
+
+      .section-icon.text { background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; }
+      .section-icon.selection { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; }
+      .section-icon.numeric { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; }
+      .section-icon.special { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; }
+      .section-icon.rich { background: ${cssManager.bdTheme('#fce4ec', '#880e4f')}; }
+      .section-icon.form { background: ${cssManager.bdTheme('#e0f2f1', '#004d40')}; }
+
+      .section-title {
+        font-size: 32px;
+        font-weight: 600;
+        margin: 0;
+        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+      }
+
+      .section-description {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin: 0 0 32px 64px;
+        font-size: 16px;
+        line-height: 1.6;
+      }
+
+      .demo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 24px;
+      }
+
+      @media (max-width: 900px) {
+        .demo-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .nav-menu {
+        position: sticky;
+        top: 24px;
+        float: right;
+        margin-left: 24px;
+        margin-bottom: 24px;
+        background: ${cssManager.bdTheme('white', '#1a1a1a')};
+        border-radius: 12px;
+        padding: 16px;
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.5)')};
+        z-index: 100;
+      }
+
+      @media (max-width: 1200px) {
+        .nav-menu {
+          display: none;
+        }
+      }
+
+      .nav-item {
+        display: block;
+        padding: 8px 12px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        text-decoration: none;
+        font-size: 14px;
+        border-radius: 6px;
+        transition: all 0.2s;
+      }
+
+      .nav-item:hover {
+        background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')};
+        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+      }
+
+      dees-form {
+        margin-top: 32px;
+      }
+
+      dees-panel {
+        margin-bottom: 24px;
+      }
+
+      dees-panel:last-child {
+        margin-bottom: 0;
+      }
+
+      .code-example {
+        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        border-radius: 8px;
+        padding: 16px;
+        margin-top: 16px;
+        font-family: 'Fira Code', monospace;
+        font-size: 14px;
+        overflow-x: auto;
+        color: ${cssManager.bdTheme('#333', '#e0e0e0')};
+      }
+
+      .feature-badge {
+        display: inline-block;
+        padding: 4px 12px;
+        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
+        color: ${cssManager.bdTheme('#1976d2', '#64b5f6')};
+        border-radius: 16px;
+        font-size: 12px;
+        font-weight: 500;
+        margin-left: 8px;
+      }
+
+      /* Form section specific styles */
+      .feature-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 16px;
+        margin-top: 16px;
+      }
+
+      .feature-card {
+        padding: 16px;
+        border-radius: 8px;
+      }
+
+      .feature-card p {
+        margin: 8px 0 0 0;
+        font-size: 14px;
+      }
+
+    `}
+  </style>
+
+  <div class="showcase-container">
+    <!-- Navigation Menu -->
+    <nav class="nav-menu">
+      <a href="#text-inputs" class="nav-item">📝 Text Inputs</a>
+      <a href="#selection-inputs" class="nav-item">☑️ Selection Inputs</a>
+      <a href="#numeric-inputs" class="nav-item">🔢 Numeric Inputs</a>
+      <a href="#special-inputs" class="nav-item">✨ Special Inputs</a>
+      <a href="#rich-editors" class="nav-item">📄 Rich Editors</a>
+      <a href="#form-integration" class="nav-item">📋 Form Integration</a>
+    </nav>
+    
+    <div class="showcase-header">
+      <h1 class="showcase-title">Input Components Showcase</h1>
+      <p class="showcase-subtitle">
+        A comprehensive collection of input components for building modern web forms and interfaces.
+        <br>All components support dark mode, validation, and integrate seamlessly with dees-form.
+      </p>
+    </div>
+
+    <!-- Text Inputs Section -->
+    <section id="text-inputs" class="showcase-section">
+      <div class="section-header">
+        <div class="section-icon text">📝</div>
+        <h2 class="section-title">Text Inputs</h2>
+      </div>
+      <p class="section-description">
+        Standard text input components for collecting various types of textual data. 
+        Includes password fields, validation, and specialized formatting.
+      </p>
+
+      <dees-panel .title=${'Basic Text Inputs'}>
+        <div class="demo-grid">
+          <dees-input-text 
+            .label=${'Username'}
+            .placeholder=${'Enter your username'}
+            .description=${'Choose a unique username'}
+            .required=${true}
+          ></dees-input-text>
+
+          <dees-input-text 
+            .label=${'Email Address'}
+            .inputType=${'email'}
+            .placeholder=${'user@example.com'}
+            .validationText=${'Please enter a valid email'}
+            .required=${true}
+          ></dees-input-text>
+
+          <dees-input-text 
+            .label=${'Password'}
+            .isPasswordBool=${true}
+            .placeholder=${'Enter secure password'}
+            .description=${'Must be at least 8 characters'}
+          ></dees-input-text>
+
+          <dees-input-text 
+            .label=${'Website URL'}
+            .inputType=${'url'}
+            .placeholder=${'https://example.com'}
+            .value=${'https://design.estate'}
+          ></dees-input-text>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Search Bar'} .subtitle=${'Advanced search with suggestions'}>
+        <dees-searchbar
+          .placeholder=${'Search for anything...'}
+        ></dees-searchbar>
+        
+        <div class="code-example">
+// Search with custom suggestions
+&lt;dees-searchbar
+  .placeholder="Search products..."
+  .suggestions=${['Laptop', 'Phone', 'Tablet']}
+&gt;&lt;/dees-searchbar&gt;
+        </div>
+      </dees-panel>
+    </section>
+
+    <!-- Selection Inputs Section -->
+    <section id="selection-inputs" class="showcase-section">
+      <div class="section-header">
+        <div class="section-icon selection">☑️</div>
+        <h2 class="section-title">Selection Inputs</h2>
+      </div>
+      <p class="section-description">
+        Components for selecting from predefined options. Includes checkboxes, radio buttons, 
+        dropdowns, and multi-select controls.
+      </p>
+
+      <dees-panel .title=${'Checkboxes and Radio Buttons'}>
+        <div class="demo-grid">
+          <div>
+            <dees-input-checkbox 
+              .label=${'Accept Terms & Conditions'}
+              .description=${'You must accept to continue'}
+              .required=${true}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox 
+              .label=${'Subscribe to Newsletter'}
+              .value=${true}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox 
+              .label=${'Enable Notifications'}
+              .disabled=${true}
+            ></dees-input-checkbox>
+          </div>
+
+          <div>
+            <dees-input-radio
+              .label=${'Select Plan'}
+              .options=${['Free', 'Pro', 'Enterprise']}
+              .selectedOption=${'Pro'}
+              .required=${true}
+            ></dees-input-radio>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Dropdown Selection'}>
+        <div class="demo-grid">
+          <dees-input-dropdown
+            .label=${'Country'}
+            .options=${[
+              {option: 'United States', key: 'us', payload: 'US'},
+              {option: 'Canada', key: 'ca', payload: 'CA'},
+              {option: 'United Kingdom', key: 'uk', payload: 'UK'},
+              {option: 'Germany', key: 'de', payload: 'DE'},
+              {option: 'France', key: 'fr', payload: 'FR'},
+              {option: 'Japan', key: 'jp', payload: 'JP'}
+            ]}
+            .placeholder=${'Select your country'}
+            .required=${true}
+          ></dees-input-dropdown>
+
+          <dees-input-dropdown
+            .label=${'Preferred Language'}
+            .options=${[
+              {option: 'English', key: 'en', payload: 'EN'},
+              {option: 'Spanish', key: 'es', payload: 'ES'},
+              {option: 'French', key: 'fr', payload: 'FR'},
+              {option: 'German', key: 'de', payload: 'DE'},
+              {option: 'Japanese', key: 'ja', payload: 'JA'}
+            ]}
+            .value=${{option: 'English', key: 'en', payload: 'EN'}}
+          ></dees-input-dropdown>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Multi Toggle'} .subtitle=${'Toggle between multiple options'}>
+        <dees-input-multitoggle
+          .label=${'Theme Preference'}
+          .options=${['Light', 'Dark', 'Auto']}
+          .value=${'Auto'}
+        ></dees-input-multitoggle>
+
+        <dees-input-multitoggle
+          .label=${'View Mode'}
+          .options=${['Grid', 'List', 'Cards']}
+          .value=${'Grid'}
+          .description=${'Choose how to display items'}
+        ></dees-input-multitoggle>
+      </dees-panel>
+
+      <dees-panel .title=${'Type List'} .subtitle=${'Dynamic list of typed items'}>
+        <dees-input-typelist
+          .label=${'Skills'}
+          .description=${'Add your technical skills'}
+          .placeholder=${'Type and press Enter'}
+        ></dees-input-typelist>
+      </dees-panel>
+    </section>
+
+    <!-- Numeric Inputs Section -->
+    <section id="numeric-inputs" class="showcase-section">
+      <div class="section-header">
+        <div class="section-icon numeric">🔢</div>
+        <h2 class="section-title">Numeric Inputs</h2>
+      </div>
+      <p class="section-description">
+        Specialized inputs for numeric values, including quantity selectors and formatted inputs.
+      </p>
+
+      <dees-panel .title=${'Quantity Selector'}>
+        <div class="demo-grid">
+          <dees-input-quantityselector
+            .label=${'Product Quantity'}
+            .value=${1}
+            .min=${1}
+            .max=${100}
+            .description=${'Select quantity (1-100)'}
+          ></dees-input-quantityselector>
+
+          <dees-input-quantityselector
+            .label=${'Team Size'}
+            .value=${5}
+            .min=${1}
+            .max=${50}
+            .step=${5}
+          ></dees-input-quantityselector>
+        </div>
+      </dees-panel>
+    </section>
+
+    <!-- Special Inputs Section -->
+    <section id="special-inputs" class="showcase-section">
+      <div class="section-header">
+        <div class="section-icon special">✨</div>
+        <h2 class="section-title">Special Inputs</h2>
+      </div>
+      <p class="section-description">
+        Specialized input components for specific data types like phone numbers, IBAN, and file uploads.
+      </p>
+
+      <dees-panel .title=${'Phone & IBAN'}>
+        <div class="demo-grid">
+          <dees-input-phone
+            .label=${'Phone Number'}
+            .placeholder=${'+1 (555) 123-4567'}
+            .required=${true}
+            .description=${'International format supported'}
+          ></dees-input-phone>
+
+          <dees-input-iban
+            .label=${'Bank Account (IBAN)'}
+            .placeholder=${'DE89 3704 0044 0532 0130 00'}
+            .description=${'European IBAN format'}
+          ></dees-input-iban>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'File Upload'} .subtitle=${'Drag & drop or click to upload'}>
+        <dees-input-fileupload
+          .label=${'Upload Documents'}
+          .description=${'PDF, DOC, DOCX up to 10MB'}
+          .accept=${'.pdf,.doc,.docx'}
+          .multiple=${true}
+        ></dees-input-fileupload>
+
+        <dees-input-fileupload
+          .label=${'Profile Picture'}
+          .description=${'JPG, PNG up to 5MB'}
+          .accept=${'image/*'}
+        ></dees-input-fileupload>
+      </dees-panel>
+    </section>
+
+    <!-- Rich Editors Section -->
+    <section id="rich-editors" class="showcase-section">
+      <div class="section-header">
+        <div class="section-icon rich">📄</div>
+        <h2 class="section-title">Rich Text Editors</h2>
+        <span class="feature-badge">New!</span>
+      </div>
+      <p class="section-description">
+        Advanced text editors for creating rich content with formatting, images, and structured blocks.
+      </p>
+
+      <dees-panel .title=${'Rich Text Editor'} .subtitle=${'TipTap-based rich text editing'}>
+        <dees-input-richtext
+          .label=${'Article Content'}
+          .placeholder=${'Start writing...'}
+          .description=${'Full formatting toolbar with markdown shortcuts'}
+          .minHeight=${300}
+          .showWordCount=${true}
+        ></dees-input-richtext>
+      </dees-panel>
+
+      <dees-panel .title=${'WYSIWYG Block Editor'} .subtitle=${'Block-based editor with slash commands'}>
+        <dees-input-wysiwyg
+          .label=${'Page Content'}
+          .description=${'Type "/" for commands or use markdown shortcuts'}
+          .outputFormat=${'html'}
+        ></dees-input-wysiwyg>
+      </dees-panel>
+    </section>
+
+    <!-- Form Integration Section -->
+    <section id="form-integration" class="showcase-section">
+      <div class="section-header">
+        <div class="section-icon form">📋</div>
+        <h2 class="section-title">Form Integration</h2>
+      </div>
+      <p class="section-description">
+        All input components integrate seamlessly with dees-form for validation, 
+        submission handling, and data management.
+      </p>
+
+      <dees-panel .title=${'Complete Form Example'} .subtitle=${'All inputs working together'}>
+        <dees-form>
+          <h3>User Registration</h3>
+          
+          <div class="demo-grid">
+            <dees-input-text
+              .label=${'First Name'}
+              .required=${true}
+              .key=${'firstName'}
+            ></dees-input-text>
+
+            <dees-input-text
+              .label=${'Last Name'}
+              .required=${true}
+              .key=${'lastName'}
+            ></dees-input-text>
+          </div>
+
+          <dees-input-text
+            .label=${'Email'}
+            .inputType=${'email'}
+            .required=${true}
+            .key=${'email'}
+          ></dees-input-text>
+
+          <dees-input-phone
+            .label=${'Phone Number'}
+            .required=${true}
+            .key=${'phone'}
+          ></dees-input-phone>
+
+          <dees-input-dropdown
+            .label=${'Country'}
+            .options=${[
+              {option: 'United States', key: 'us', payload: 'US'},
+              {option: 'Canada', key: 'ca', payload: 'CA'},
+              {option: 'United Kingdom', key: 'uk', payload: 'UK'},
+              {option: 'Germany', key: 'de', payload: 'DE'},
+              {option: 'France', key: 'fr', payload: 'FR'}
+            ]}
+            .required=${true}
+            .key=${'country'}
+          ></dees-input-dropdown>
+
+          <dees-input-radio
+            .label=${'Account Type'}
+            .options=${['Personal', 'Business']}
+            .required=${true}
+            .key=${'accountType'}
+          ></dees-input-radio>
+
+          <dees-input-richtext
+            .label=${'Bio'}
+            .placeholder=${'Tell us about yourself...'}
+            .minHeight=${150}
+            .key=${'bio'}
+          ></dees-input-richtext>
+
+          <dees-input-checkbox
+            .label=${'I agree to the Terms of Service'}
+            .required=${true}
+            .key=${'terms'}
+          ></dees-input-checkbox>
+
+          <dees-input-checkbox
+            .label=${'Subscribe to newsletter'}
+            .key=${'newsletter'}
+          ></dees-input-checkbox>
+
+          <dees-form-submit .text=${'Create Account'}></dees-form-submit>
+        </dees-form>
+      </dees-panel>
+
+      <dees-panel .title=${'Form Features'}>
+        <div class="feature-grid">
+          <div class="feature-card" style="background: rgba(0, 150, 136, 0.1);">
+            <strong>✅ Validation</strong>
+            <p>Built-in validation for all input types</p>
+          </div>
+          <div class="feature-card" style="background: rgba(33, 150, 243, 0.1);">
+            <strong>🔄 Two-way Binding</strong>
+            <p>Automatic data synchronization</p>
+          </div>
+          <div class="feature-card" style="background: rgba(156, 39, 176, 0.1);">
+            <strong>📊 Data Collection</strong>
+            <p>Easy form data extraction</p>
+          </div>
+          <div class="feature-card" style="background: rgba(255, 152, 0, 0.1);">
+            <strong>🎨 Theming</strong>
+            <p>Consistent styling across all inputs</p>
+          </div>
+        </div>
+      </dees-panel>
+    </section>
+  </div>
+  </div>
+`;
\ No newline at end of file
diff --git a/ts_web/pages/mainpage.ts b/ts_web/pages/mainpage.ts
new file mode 100644
index 0000000..51e66a4
--- /dev/null
+++ b/ts_web/pages/mainpage.ts
@@ -0,0 +1,6 @@
+import { html } from '@design.estate/dees-element';
+
+export const mainPage = () => html`
+  <dees-input-text label="my-test-label"></dees-input-text>
+  <dees-input-text label="my-test-label"></dees-input-text>
+`;
\ No newline at end of file