design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(demo-inputs): wrap input component demos in dees-form containers for consistent form integration

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 19:04:43 +00:00
parent eb3d396c68
commit 7c2635fc13
15 changed files with 469 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
View File

@@ -30,7 +30,7 @@ export const demoFunc = () => html`
<div class="demo-container">
<dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
<div class="input-group">
<dees-form>
<dees-input-phone
.label=${'Phone Number'}
.infoText=${'Enter your phone number with country code'}
@@ -44,27 +44,29 @@ export const demoFunc = () => html`
.required=${true}
.placeholder=${'+1 (555) 000-0000'}
></dees-input-phone>
</div>
</dees-form>
</dees-panel>
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
<div class="horizontal-group">
<dees-input-phone
.label=${'Mobile'}
.layoutMode=${'horizontal'}
.value=${'4155551234'}
></dees-input-phone>
<dees-input-phone
.label=${'Office'}
.layoutMode=${'horizontal'}
.placeholder=${'+1 (800) 555-0000'}
></dees-input-phone>
</div>
<dees-form>
<div class="horizontal-group">
<dees-input-phone
.label=${'Mobile'}
.layoutMode=${'horizontal'}
.value=${'4155551234'}
></dees-input-phone>
<dees-input-phone
.label=${'Office'}
.layoutMode=${'horizontal'}
.placeholder=${'+1 (800) 555-0000'}
></dees-input-phone>
</div>
</dees-form>
</dees-panel>
<dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
<div class="input-group">
<dees-form>
<dees-input-phone
.label=${'International Contact'}
.infoText=${'Automatically formats international numbers'}
@@ -76,7 +78,7 @@ export const demoFunc = () => html`
.value=${'911'}
.disabled=${true}
></dees-input-phone>
</div>
</dees-form>
</dees-panel>
<dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>