feat(duration): allow overriding defaults; use placeholder vs supporting text

Author: aarondrabeck

packages/web/titanium/duration-input/duration-input.ts

@@ -29,10 +29,10 @@ export class TitaniumDurationInput extends ExtendableOutlinedTextField {
 
   @property({ reflect: true, type: Boolean }) accessor spellcheck: boolean = false;
 
-  firstUpdated() {
-    this.label = 'Duration';
-    this.supportingText = 'Enter a duration ex. "3 hours and 30 minutes"';
+  @property({ reflect: true, type: String }) accessor placeholder: string = '3 hours and 30 minutes';
+  @property({ reflect: true, type: String }) accessor label: string = 'Duration';
 
+  firstUpdated() {
     this.addEventListener('change', () => {
       this.#customReportValidity(this.input.value);
 

packages/web/titanium/duration-input/filled-duration-input.ts

@@ -24,9 +24,9 @@ export class TitaniumFilledDurationInput extends MdFilledTextField {
    *  want to work with. When changed a duration-change event will be dispatched.
    */
   @property({ type: Object }) accessor duration: duration.Duration | null = null;
-  @property({ type: String }) label: string = 'Duration';
-  @property({ type: String }) supportingText: string = 'Enter a duration ex. "3 hours and 30 minutes"';
-  @property({ type: String }) autocomplete: string = 'off';
+  @property({ type: String })  label: string = 'Duration';
+  @property({ type: String })  placeholder: string = '3 hours and 30 minutes';
+  @property({ type: String })  autocomplete: string = 'off';
   @property({ type: Boolean }) spellcheck: boolean = false;
 
   updated(changedProps: PropertyValues<this>) {