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

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

@@ -33,13 +33,14 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-phone
             .label=${'Phone Number'}
-            .description=${'Enter your phone number with country code'}
+            .infoText=${'Enter your phone number with country code'}
+            .description=${'Include country code for international numbers'}
             .value=${'5551234567'}
           ></dees-input-phone>
 
           <dees-input-phone
             .label=${'Contact Phone'}
-            .description=${'Required for account verification'}
+            .infoText=${'Required for account verification'}
             .required=${true}
             .placeholder=${'+1 (555) 000-0000'}
           ></dees-input-phone>
@@ -66,7 +67,7 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-phone
             .label=${'International Contact'}
-            .description=${'Automatically formats international numbers'}
+            .infoText=${'Automatically formats international numbers'}
             .value=${'441234567890'}
           ></dees-input-phone>
 

ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts

@@ -47,7 +47,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText}></dees-label>
         <dees-input-text
           .value=${this.formattedPhone}
           .disabled=${this.disabled}
@@ -55,6 +55,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
           .placeholder=${this.placeholder}
           @input=${(event: InputEvent) => this.handlePhoneInput(event)}
         ></dees-input-text>
+        ${this.renderDescription()}
       </div>
     `;
   }