feat(timepicker): add custom placeholder (valor-software#3544)

demo/src/app/components/+timepicker/demos/index.ts

@@ -14,6 +14,7 @@ import { DemoTimepickerIsValidComponent } from './isvalid/isvalid';
 import { DemoTimepickerSpinnersComponent } from './spinners/spinners';
 import { DemoTimepickerReadonlyComponent } from './readonly/readonly';
 import { DemoTimepickerFormComponent } from './form/form';
+import { DemoTimepickerPlaceholderComponent } from './placeholder/placeholder';
 
 export const DEMO_COMPONENTS = [
   DemoTimepickerBasicComponent,
@@ -32,5 +33,6 @@ export const DEMO_COMPONENTS = [
   DemoTimepickerCustomValidationComponent,
   DemoTimepickerIsValidComponent,
   DemoTimepickerCustomValidationComponent,
-  DemoTimepickerSpinnersComponent
+  DemoTimepickerSpinnersComponent,
+  DemoTimepickerPlaceholderComponent
 ];

demo/src/app/components/+timepicker/demos/placeholder/placeholder.html

@@ -0,0 +1,4 @@
+<timepicker [hoursPlaceholder]="hoursPlaceholder"
+            [minutesPlaceholder]="minutesPlaceholder"
+            [secondsPlaceholder]="secondsPlaceholder" showSeconds="true"></timepicker>
+

demo/src/app/components/+timepicker/demos/placeholder/placeholder.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-placeholder',
+  templateUrl: './placeholder.html'
+})
+export class DemoTimepickerPlaceholderComponent {
+  hoursPlaceholder = 'hh';
+  minutesPlaceholder = 'mm';
+  secondsPlaceholder = 'ss';
+}
+

demo/src/app/components/+timepicker/timepicker-section.list.ts

@@ -2,6 +2,7 @@ import { DemoTimepickerBasicComponent } from './demos/basic/basic';
 import { DemoTimepickerMeridianComponent } from './demos/meridian/meridian';
 import { DemoTimepickerCustomMeridianComponent } from './demos/custom-meridian/custom-meridian';
 import { DemoTimepickerMinMaxComponent } from './demos/min-max/min-max';
+import { DemoTimepickerPlaceholderComponent } from './demos/placeholder/placeholder';
 import { DemoTimepickerToggleMinutesSecondsComponent } from './demos/toggle-minutes-seconds/toggle-minutes-seconds';
 import { DemoTimepickerDisabledComponent } from './demos/disabled/disabled';
 import { DemoTimepickerCustomComponent } from './demos/custom/custom';
@@ -147,6 +148,13 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader!./demos/spinners/spinners.html'),
         outlet: DemoTimepickerSpinnersComponent
       },
+      {
+        title: 'Placeholder',
+        anchor: 'placeholder',
+        component: require('!!raw-loader!./demos/placeholder/placeholder'),
+        html: require('!!raw-loader!./demos/placeholder/placeholder.html'),
+        outlet: DemoTimepickerPlaceholderComponent
+      },
       {
         title: 'Configuring defaults',
         anchor: 'config-defaults',

demo/src/ng-api-doc.ts

@@ -3225,6 +3225,21 @@ export const ngdoc: any = {
         "name": "showSpinners",
         "type": "boolean",
         "description": "<p>if true spinner arrows above and below the inputs will be shown</p>\n"
+      },
+      {
+        "name": "hoursPlaceholder",
+        "type": "string",
+        "description": "<p>placeholder for hours field</p>\n"
+      },
+      {
+        "name": "minutesPlacesholder",
+        "type": "string",
+        "description": "<p>placeholder for minutes field</p>\n"
+      },
+      {
+        "name": "secondsPlaceholder",
+        "type": "string",
+        "description": "<p>placeholder for seconds field</p>\n"
       }
     ],
     "outputs": [
@@ -3322,6 +3337,24 @@ export const ngdoc: any = {
         "defaultValue": "true",
         "type": "boolean",
         "description": "<p>if true spinner arrows above and below the inputs will be shown</p>\n"
+      },
+      {
+        "name": "hoursPlaceholder",
+        "defaultValue": "HH",
+        "type": "string",
+        "description": "<p>placeholder for hours field</p>\n"
+      },
+      {
+        "name": "minutesPlacesholder",
+        "defaultValue": "MM",
+        "type": "string",
+        "description": "<p>placeholder for minutes field</p>\n"
+      },
+      {
+        "name": "secondsPlaceholder",
+        "defaultValue": "SS",
+        "type": "string",
+        "description": "<p>placeholder for seconds field</p>\n"
       }
     ]
   },

src/spec/timepicker/timepicker.component.spec.ts

@@ -93,6 +93,18 @@ describe('Component: TimepickerComponent', () => {
     it('should visible meridian button', () => {
       expect(buttonMeridian).toBeTruthy();
     });
+
+    it('hours placeholder should be \'HH\' ', () => {
+      expect(component.hoursPlaceholder).toEqual('HH');
+    });
+
+    it('minutes placeholder should be \'MM\' ', () => {
+      expect(component.minutesPlaceholder).toEqual('MM');
+    });
+
+    it('seconds placeholder should be \'SS\' ', () => {
+      expect(component.secondsPlaceholder).toEqual('SS');
+    });
   });
 
   describe('validate input fields with default state', () => {
@@ -1107,4 +1119,34 @@ describe('Component: TimepickerComponent', () => {
       });
     }));
   });
+
+  describe('custom placeholders', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TimepickerComponent);
+      component = fixture.componentInstance;
+      component.showSeconds = true;
+      component.hoursPlaceholder = 'hh';
+      component.minutesPlaceholder = 'mm';
+      component.secondsPlaceholder = 'ss';
+
+      fixture.detectChanges();
+
+      inputHours = getInputElements(fixture)[0];
+      inputMinutes = getInputElements(fixture)[1];
+      inputSeconds = getInputElements(fixture)[2];
+    });
+
+    it('should use \'hh\' for hours placeholder', () => {
+      expect(inputHours.getAttribute('placeholder')).toEqual('hh');
+    });
+
+    it('should use \'mm\' for minutes placeholder', () => {
+      expect(inputMinutes.getAttribute('placeholder')).toEqual('mm');
+    });
+
+    it('should use \'ss\' for seconds placeholder', () => {
+      expect(inputSeconds.getAttribute('placeholder')).toEqual('ss');
+    });
+
+  });
 });

src/timepicker/timepicker.component.html

@@ -34,7 +34,7 @@
     <td class="form-group" [class.has-error]="invalidHours">
       <input type="text" [class.is-invalid]="invalidHours"
              class="form-control text-center bs-timepicker-field"
-             placeholder="HH"
+             [placeholder]="hoursPlaceholder"
              maxlength="2"
              [readonly]="readonlyInput"
              [disabled]="disabled"
@@ -49,7 +49,7 @@
     <td class="form-group" *ngIf="showMinutes" [class.has-error]="invalidMinutes">
       <input type="text" [class.is-invalid]="invalidMinutes"
              class="form-control text-center bs-timepicker-field"
-             placeholder="MM"
+             [placeholder]="minutesPlaceholder"
              maxlength="2"
              [readonly]="readonlyInput"
              [disabled]="disabled"
@@ -65,7 +65,7 @@
     <td class="form-group" *ngIf="showSeconds" [class.has-error]="invalidSeconds">
       <input type="text" [class.is-invalid]="invalidSeconds"
              class="form-control text-center bs-timepicker-field"
-             placeholder="SS"
+             [placeholder]="secondsPlaceholder"
              maxlength="2"
              [readonly]="readonlyInput"
              [disabled]="disabled"

src/timepicker/timepicker.component.ts

@@ -115,6 +115,12 @@ export class TimepickerComponent
   @Input() min: Date;
   /** maximum time user can select */
   @Input() max: Date;
+  /** placeholder for hours field in timepicker */
+  @Input() hoursPlaceholder: string;
+  /** placeholder for minutes field in timepicker */
+  @Input() minutesPlaceholder: string;
+  /** placeholder for seconds field in timepicker */
+  @Input() secondsPlaceholder: string;
 
   /** emits true if value is a valid date */
   @Output() isValid = new EventEmitter<boolean>();

src/timepicker/timepicker.config.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import {Injectable, Input} from '@angular/core';
 
 /** Provides default configuration values for timepicker */
 @Injectable()
@@ -31,4 +31,10 @@ export class TimepickerConfig {
   min: Date;
   /** maximum time user can select */
   max: Date;
+  /** placeholder for hours field in timepicker */
+  hoursPlaceholder = 'HH';
+  /** placeholder for minutes field in timepicker */
+  minutesPlaceholder = 'MM';
+  /** placeholder for seconds field in timepicker */
+  secondsPlaceholder = 'SS';
 }