03315db863
- Added dropdown and radio input components to the demo for application settings. - Introduced horizontal layout for display preferences and notification settings. - Implemented checkbox demo with programmatic selection and clear functionality. - Created file upload and quantity selector demos with various states and configurations. - Added comprehensive radio input demo showcasing group behavior and various states. - Developed text input demo with validation states and advanced features like password visibility. - Introduced a new panel component for better content organization in demos.
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
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>
|
|
`; |