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

feat(input): separate label info tooltips from description text across input components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 18:50:54 +00:00
parent 961b811b7a
commit 13ba5670f0
35 changed files with 128 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
View File

@@ -33,12 +33,13 @@ export const demoFunc = () => html`
<div class="input-group">
<dees-input-iban
.label=${'Bank Account IBAN'}
.description=${'Enter your International Bank Account Number'}
.infoText=${'Enter your International Bank Account Number'}
.description=${'Your IBAN can be found on your bank statement'}
></dees-input-iban>
<dees-input-iban
.label=${'Verified IBAN'}
.description=${'This IBAN has been verified'}
.infoText=${'This IBAN has been verified'}
.value=${'DE89370400440532013000'}
></dees-input-iban>
</div>
@@ -64,13 +65,13 @@ export const demoFunc = () => html`
<div class="input-group">
<dees-input-iban
.label=${'Payment Account'}
.description=${'Required for processing payments'}
.infoText=${'Required for processing payments'}
.required=${true}
></dees-input-iban>
<dees-input-iban
.label=${'Locked IBAN'}
.description=${'This IBAN cannot be changed'}
.infoText=${'This IBAN cannot be changed'}
.value=${'FR1420041010050500013M02606'}
.disabled=${true}
></dees-input-iban>
@@ -81,7 +82,7 @@ export const demoFunc = () => html`
<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=${'Transfer Reference'} .infoText=${'Optional reference for the transfer'}></dees-input-text>
<dees-input-text .label=${'Amount'} .inputType=${'number'} .required=${true}></dees-input-text>
</dees-form>
</dees-panel>

3
ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
View File

@@ -44,7 +44,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
public render(): TemplateResult {
return html`
<div class="input-wrapper">
<dees-label .label=${this.label || 'IBAN'} .description=${this.description}></dees-label>
<dees-label .label=${this.label || 'IBAN'} .infoText=${this.infoText}></dees-label>
<dees-input-text
.value=${this.value}
.disabled=${this.disabled}
@@ -64,6 +64,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
this.validateIban(eventArg);
}}
></dees-input-text>
${this.renderDescription()}
</div>
`;
}