feat(structure): adjust

2025-12-05 10:19:11 +00:00
parent d07fec834f
commit 7adad49cb1
97 changed files with 0 additions and 0 deletions
--- a/ts_web/elements/dees-input-checkbox/dees-input-checkbox.demo.ts
+++ b/ts_web/elements/dees-input-checkbox/dees-input-checkbox.demo.ts
@@ -0,0 +1,307 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
+import type { DeesInputCheckbox } from './dees-input-checkbox.js';
+import './dees-button.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+    // Get all checkboxes for demo interactions
+    const checkboxes = elementArg.querySelectorAll('dees-input-checkbox');
+    
+    // Example of programmatic interaction
+    const selectAllBtn = elementArg.querySelector('#select-all-btn');
+    const clearAllBtn = elementArg.querySelector('#clear-all-btn');
+    
+    if (selectAllBtn && clearAllBtn) {
+      selectAllBtn.addEventListener('click', () => {
+        checkboxes.forEach((checkbox: DeesInputCheckbox) => {
+          if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
+            checkbox.value = true;
+          }
+        });
+      });
+      
+      clearAllBtn.addEventListener('click', () => {
+        checkboxes.forEach((checkbox: DeesInputCheckbox) => {
+          if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
+            checkbox.value = false;
+          }
+        });
+      });
+    }
+  }}>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        
+        dees-panel {
+          margin-bottom: 24px;
+        }
+        
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
+        
+        .checkbox-group {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        
+        .horizontal-checkboxes {
+          display: flex;
+          gap: 24px;
+          flex-wrap: wrap;
+        }
+        
+        .interactive-section {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 8px;
+          padding: 16px;
+          margin-top: 16px;
+        }
+        
+        .output-text {
+          font-family: monospace;
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
+          padding: 8px;
+          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+          border-radius: 4px;
+          min-height: 24px;
+        }
+        
+        .form-section {
+          background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          border-radius: 8px;
+          padding: 20px;
+          margin-top: 16px;
+        }
+        
+        .button-group {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+        
+        .feature-list {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+          padding: 16px;
+        }
+        
+        .section-title {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 16px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
+        <div class="checkbox-group">
+          <dees-input-checkbox 
+            .label=${'I agree to the Terms and Conditions'} 
+            .value=${true}
+            .key=${'terms'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Subscribe to newsletter'} 
+            .value=${false}
+            .key=${'newsletter'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Enable notifications'} 
+            .value=${false}
+            .description=${'Receive email updates about your account'}
+            .key=${'notifications'}
+          ></dees-input-checkbox>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
+        <div class="checkbox-group">
+          <dees-input-checkbox 
+            .label=${'Default state'} 
+            .value=${false}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Checked state'} 
+            .value=${true}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Disabled unchecked'} 
+            .value=${false}
+            .disabled=${true}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Disabled checked'} 
+            .value=${true}
+            .disabled=${true}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Required checkbox'} 
+            .required=${true}
+            .key=${'required'}
+          ></dees-input-checkbox>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
+        <div class="horizontal-checkboxes">
+          <dees-input-checkbox 
+            .label=${'Option A'} 
+            .value=${false}
+            .layoutMode=${'horizontal'}
+            .key=${'optionA'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Option B'} 
+            .value=${true}
+            .layoutMode=${'horizontal'}
+            .key=${'optionB'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Option C'} 
+            .value=${false}
+            .layoutMode=${'horizontal'}
+            .key=${'optionC'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Option D'} 
+            .value=${true}
+            .layoutMode=${'horizontal'}
+            .key=${'optionD'}
+          ></dees-input-checkbox>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
+        <div class="button-group">
+          <dees-button id="select-all-btn" type="secondary">Select All</dees-button>
+          <dees-button id="clear-all-btn" type="secondary">Clear All</dees-button>
+        </div>
+        
+        <div class="feature-list">
+          <div class="checkbox-group">
+            <dees-input-checkbox 
+              .label=${'Dark Mode Support'} 
+              .value=${true}
+              .key=${'feature1'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Email Notifications'} 
+              .value=${true}
+              .key=${'feature2'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Two-Factor Authentication'} 
+              .value=${false}
+              .key=${'feature3'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'API Access'} 
+              .value=${true}
+              .key=${'feature4'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Advanced Analytics'} 
+              .value=${false}
+              .key=${'feature5'}
+            ></dees-input-checkbox>
+          </div>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
+        <div class="form-section">
+          <h4 class="section-title">Privacy Preferences</h4>
+          
+          <div class="checkbox-group">
+            <dees-input-checkbox 
+              .label=${'Share analytics data'} 
+              .value=${true}
+              .description=${'Help us improve by sharing anonymous usage data'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Personalized recommendations'} 
+              .value=${true}
+              .description=${'Get suggestions based on your activity'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Marketing communications'} 
+              .value=${false}
+              .description=${'Receive promotional emails and special offers'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Third-party integrations'} 
+              .value=${false}
+              .description=${'Allow approved partners to access your data'}
+            ></dees-input-checkbox>
+          </div>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
+        <div class="checkbox-group">
+          <dees-input-checkbox 
+            .label=${'Feature toggle'} 
+            .value=${false}
+            @changeSubject=${(event: CustomEvent) => {
+              const output = document.querySelector('#checkbox-output');
+              if (output && event.detail) {
+                const isChecked = event.detail.getValue();
+                output.textContent = `Feature is ${isChecked ? 'enabled' : 'disabled'}`;
+              }
+            }}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Debug mode'} 
+            .value=${false}
+            @changeSubject=${(event: CustomEvent) => {
+              const output = document.querySelector('#debug-output');
+              if (output && event.detail) {
+                const isChecked = event.detail.getValue();
+                output.textContent = `Debug mode: ${isChecked ? 'ON' : 'OFF'}`;
+              }
+            }}
+          ></dees-input-checkbox>
+        </div>
+        
+        <div class="interactive-section">
+          <div id="checkbox-output" class="output-text">Feature is disabled</div>
+          <div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;
--- a/ts_web/elements/dees-input-checkbox/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox/dees-input-checkbox.ts
@@ -0,0 +1,226 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { DeesInputBase } from './dees-input-base.js';
+import { demoFunc } from './dees-input-checkbox.demo.js';
+import { cssGeistFontFamily } from './00fonts.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-checkbox': DeesInputCheckbox;
+  }
+}
+
+@customElement('dees-input-checkbox')
+export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+
+  @property({
+    type: Boolean,
+  })
+  accessor value: boolean = false;
+
+  @property({ type: Boolean })
+  accessor indeterminate: boolean = false;
+
+
+  constructor() {
+    super();
+    this.labelPosition = 'right'; // Checkboxes default to label on the right
+  }
+
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          cursor: default;
+          font-family: ${cssGeistFontFamily};
+        }
+
+        .maincontainer {
+          display: inline-flex;
+          align-items: flex-start;
+          gap: 8px;
+          cursor: pointer;
+          user-select: none;
+          transition: all 0.15s ease;
+        }
+
+        .checkbox {
+          position: relative;
+          height: 18px;
+          width: 18px;
+          flex-shrink: 0;
+          border-radius: 4px;
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+          transition: all 0.15s ease;
+          margin-top: 1px;
+        }
+
+        .maincontainer:hover .checkbox {
+          border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        }
+
+        .checkbox.selected {
+          background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+          border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        }
+
+        .checkbox:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+        }
+
+        /* Checkmark using Lucide icon style */
+        .checkbox .checkmark {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          opacity: 0;
+          transition: opacity 0.15s ease;
+        }
+
+        .checkbox.selected .checkmark {
+          opacity: 1;
+        }
+
+        .checkbox .checkmark svg {
+          width: 12px;
+          height: 12px;
+          stroke: white;
+          stroke-width: 3;
+        }
+
+        /* Disabled state */
+        .maincontainer.disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+
+        .checkbox.disabled {
+          background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+          border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        }
+
+        /* Label */
+        .label-container {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+          flex: 1;
+        }
+
+        .checkbox-label {
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+          transition: color 0.15s ease;
+          letter-spacing: -0.01em;
+        }
+
+        .maincontainer:hover .checkbox-label {
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        }
+
+        .maincontainer.disabled:hover .checkbox-label {
+          color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        }
+
+        /* Description */
+        .description-text {
+          font-size: 12px;
+          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+          line-height: 1.5;
+        }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.toggleSelected}">
+          <div 
+            class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" 
+            tabindex="${this.disabled ? '-1' : '0'}"
+            @keydown="${this.handleKeydown}"
+          >
+            ${this.value
+              ? html`
+                  <span class="checkmark">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                `
+              : this.indeterminate
+                ? html`
+                    <span class="checkmark">
+                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 12H19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </span>
+                  `
+                : html``}
+          </div>
+          <div class="label-container">
+            ${this.label ? html`<div class="checkbox-label">${this.label}</div>` : ''}
+            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected() {
+    if (this.disabled) {
+      return;
+    }
+    this.value = !this.value;
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+  }
+
+  public getValue(): boolean {
+    return this.value;
+  }
+
+  public setValue(value: boolean): void {
+    this.value = value;
+  }
+
+  public focus(): void {
+    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    if (checkboxDiv) {
+      (checkboxDiv as any).focus();
+    }
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.toggleSelected();
+    }
+  }
+}