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

import { html, css } 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;
        }
        
        .payment-group {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
        <dees-input-iban 
          .label=${'Bank Account IBAN'} 
          .description=${'Enter your International Bank Account Number'}
        ></dees-input-iban>
        
        <dees-input-iban 
          .label=${'Verified IBAN'} 
          .description=${'This IBAN has been verified'}
          .value=${'DE89370400440532013000'}
        ></dees-input-iban>
      </dees-panel>
      
      <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
        <div class="payment-group">
          <dees-input-text 
            .label=${'Account Holder'} 
            .layoutMode=${'horizontal'}
            .value=${'John Doe'}
          ></dees-input-text>
          
          <dees-input-iban 
            .label=${'IBAN'} 
            .layoutMode=${'horizontal'}
            .value=${'GB82WEST12345698765432'}
          ></dees-input-iban>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
        <dees-input-iban 
          .label=${'Payment Account'} 
          .description=${'Required for processing payments'}
          .required=${true}
        ></dees-input-iban>
        
        <dees-input-iban 
          .label=${'Locked IBAN'} 
          .description=${'This IBAN cannot be changed'}
          .value=${'FR1420041010050500013M02606'}
          .disabled=${true}
        ></dees-input-iban>
      </dees-panel>
      
      <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
        <dees-form>
          <dees-input-text .label=${'Recipient Name'} .required=${true}></dees-input-text>
          <dees-input-iban .label=${'Recipient IBAN'} .required=${true}></dees-input-iban>
          <dees-input-text .label=${'Transfer Reference'} .description=${'Optional reference for the transfer'}></dees-input-text>
          <dees-input-text .label=${'Amount'} .inputType=${'number'} .required=${true}></dees-input-text>
        </dees-form>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;