dees-catalog/ts_web/elements/dees-input-quantityselector.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;
        }
        
        .shopping-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
          gap: 16px;
        }
        
        .product-card {
          padding: 16px;
          background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
          border-radius: 4px;
          box-shadow: 0 2px 4px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
        }
        
        .product-name {
          font-weight: 600;
          margin-bottom: 8px;
        }
        
        .product-price {
          color: #1976d2;
          margin-bottom: 16px;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
        <dees-input-quantityselector
          .label=${'Quantity'}
          .description=${'Select the desired quantity'}
          .value=${1}
        ></dees-input-quantityselector>
        
        <dees-input-quantityselector
          .label=${'Items in Cart'}
          .description=${'Adjust the quantity of items'}
          .value=${3}
        ></dees-input-quantityselector>
      </dees-panel>
      
      <dees-panel .title=${'Shopping Cart'} .subtitle=${'Product cards with quantity selectors'}>
        <div class="shopping-grid">
          <div class="product-card">
            <div class="product-name">Premium Headphones</div>
            <div class="product-price">$199.99</div>
            <dees-input-quantityselector
              .label=${'Quantity'}
              .layoutMode=${'horizontal'}
              .value=${1}
            ></dees-input-quantityselector>
          </div>
          
          <div class="product-card">
            <div class="product-name">Wireless Mouse</div>
            <div class="product-price">$49.99</div>
            <dees-input-quantityselector
              .label=${'Quantity'}
              .layoutMode=${'horizontal'}
              .value=${2}
            ></dees-input-quantityselector>
          </div>
          
          <div class="product-card">
            <div class="product-name">USB-C Cable</div>
            <div class="product-price">$19.99</div>
            <dees-input-quantityselector
              .label=${'Quantity'}
              .layoutMode=${'horizontal'}
              .value=${1}
            ></dees-input-quantityselector>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
        <dees-input-quantityselector
          .label=${'Number of Licenses'}
          .description=${'Select how many licenses you need'}
          .required=${true}
          .value=${1}
        ></dees-input-quantityselector>
        
        <dees-input-quantityselector
          .label=${'Fixed Quantity'}
          .description=${'This quantity cannot be changed'}
          .disabled=${true}
          .value=${5}
        ></dees-input-quantityselector>
      </dees-panel>
      
      <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
        <dees-form>
          <dees-input-text .label=${'Customer Name'} .required=${true}></dees-input-text>
          <dees-input-dropdown
            .label=${'Product'}
            .options=${['Basic Plan', 'Pro Plan', 'Enterprise Plan']}
            .required=${true}
          ></dees-input-dropdown>
          <dees-input-quantityselector
            .label=${'Quantity'}
            .description=${'Number of licenses'}
            .value=${1}
          ></dees-input-quantityselector>
          <dees-input-text
            .label=${'Special Instructions'}
            .inputType=${'textarea'}
          ></dees-input-text>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;