feat(date-picker): Rewiriting the label, #8086

Author: valadzhov

projects/igniteui-angular/src/lib/date-picker/README.md

@@ -123,8 +123,6 @@ The DatePicker action buttons could be retemplated.
 | `weekStart`| `Number \| WEEKDAYS` | Sets on which day will the week start. |
 | `locale` | `string` | Sets the locale used for formatting and displaying the dates in the calendar. For more information check out [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) page for valid formats. |
 | `formatOptions` | `Object` | The format options passed along with the `locale` property used for formatting the dates. |
-| `label` | `string` | Configure the input label text. |
-| `labelVisibility` | `string` | Configure the input label text visibility. |
 | `format` | `string` | Configure the date display format when in edit mode. Accepts formats using the d, M and y symbols, custom separators and the following pre-defined format options - shortDate, mediumDate, longDate and fullDate. |
 | `mask` | `string` | Configure the date editor mask. Accepts the d, M and y symbols as mask - for example dd-MM-y. |
 | `disabledDates` | `DateRangeDescriptor[]` | Configure the disabled dates. |
@@ -154,4 +152,4 @@ The DatePicker action buttons could be retemplated.
 | `selectDate` | `date: Date` | `void` | Change the calendar selection. Calling this method will emit the `onSelection` event. |
 | `deselectDate` | `void` | Deselects the calendar date and clear input field value. |
 | `triggerTodaySelection` | `void` | Selects today's date in calendar and change the input field value. |
-| `openDialog` | `target?: HTMLElement` | `void` | Opens the dialog or drop down, depending on the mode. |
+| `openDialog` | `target?: HTMLElement` | `void` | Opens the dialog or drop down, depending on the mode. |

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -1,9 +1,14 @@
+<ng-template #labelTemplate>
+    <ng-content select="[igxLabel]"></ng-content>
+</ng-template>
+
 <ng-template #readOnlyDatePickerTemplate>
     <igx-input-group (click)="openDialog()">
+        <label igxLabel *ngIf="!labelDirective">Date</label>
+        <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix>
             <igx-icon>today</igx-icon>
         </igx-prefix>
-        <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
         <input
             class="igx-date-picker__input-date"
             igxInput
@@ -18,10 +23,11 @@
 
 <ng-template #editableDatePickerTemplate>
     <igx-input-group #editableInputGroup>
+        <label igxLabel *ngIf="!labelDirective">Date</label>
+        <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix (click)="onOpenClick($event)">
             <igx-icon>today</igx-icon>
         </igx-prefix>
-        <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
         <input
             class="igx-date-picker__input-date"
             igxInput

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -50,7 +50,7 @@ describe('IgxDatePicker', () => {
         UIInteractions.clearOverlay();
     });
 
-    describe('Base Tests', () => {
+    fdescribe('Base Tests', () => {
         // configureTestSuite();
         let fixture: ComponentFixture<IgxDatePickerTestComponent>;
         let datePicker: IgxDatePickerComponent;
@@ -149,42 +149,32 @@ describe('IgxDatePicker', () => {
             expect(datePicker.value).toEqual(date);
         });
 
-        it('When labelVisability is set to false the label should not be visible', () => {
-            let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
+        fit('should display default and custom label', () => {
+            const dom = fixture.debugElement;
+            const testComponent = fixture.componentInstance;
 
-            expect(label.nativeElement.innerText).toBe(datePicker.label);
+            let label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual(testComponent.customLabel);
 
-            fixture.componentInstance.labelVisibility = false;
+            testComponent.customLabelVisibility = false;
             fixture.detectChanges();
 
-            label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label).toBeNull();
-        });
-
-        it('When update label property it should reflect on the label text of the datepicker', () => {
-            let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label.nativeElement.innerText).toEqual(datePicker.label);
+            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual('Date');
 
-            const expectedResult = 'new label';
-            datePicker.label = expectedResult;
+            testComponent.customLabelVisibility = false;
             fixture.detectChanges();
+            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual('Date');
 
-            label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label.nativeElement.innerText).toEqual(expectedResult);
-        });
-
-        it('Visualize the label of the datepicker when initially is hidden', () => {
-            fixture.componentInstance.labelVisibility = false;
             fixture.detectChanges();
+            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual('Date');
 
-            let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label).toBeNull();
-
-            fixture.componentInstance.labelVisibility = true;
+            testComponent.customLabelVisibility = true;
             fixture.detectChanges();
-
-            label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label).not.toBeNull();
+            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            expect(label).toEqual(testComponent.customLabel);
         });
 
         it('Handling keyboard navigation with `space`(open) and `esc`(close) buttons', fakeAsync(() => {
@@ -1522,13 +1512,16 @@ export class IgxDatePickerWithWeekStartComponent {
 
 @Component({
     template: `
-        <igx-date-picker [labelVisibility]="labelVisibility"></igx-date-picker>
+        <igx-date-picker>
+        <label igxLabel *ngIf="customLabelVisibility">{{ customLabel }}</label>
+        </igx-date-picker>
     `
 })
 export class IgxDatePickerTestComponent {
     @ViewChild(IgxDatePickerComponent, { static: true }) public datePicker: IgxDatePickerComponent;
 
-    public labelVisibility = true;
+    public customLabelVisibility = true;
+    public customLabel = 'Custom label';
 }
 
 @Component({

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -61,6 +61,7 @@ import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from '.
 import { IgxCalendarContainerComponent } from './calendar-container.component';
 import { InteractionMode } from '../core/enums';
 import { fadeIn, fadeOut } from '../animations/fade';
+import { IgxLabelDirective } from '../directives/label/label.directive';
 
 let NEXT_ID = 0;
 
@@ -153,28 +154,6 @@ const noop = () => { };
 })
 export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor,
     EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
-    /**
-     * Gets/Sets the `IgxDatePickerComponent` label.
-     * @remarks
-     * The default label is 'Date'.
-     * @example
-     * ```html
-     * <igx-date-picker [label]="Calendar"></igx-date-picker>
-     * ```
-     */
-    @Input()
-    public label = 'Date';
-
-    /**
-     * Gets/Sets the `IgxDatePickerComponent` label visibility.
-     * @remarks
-     * By default the visibility is set to true.
-     * @example
-     * <igx-date-picker [labelVisibility]="false"></igx-date-picker>
-     */
-    @Input()
-    public labelVisibility = true;
-
     /**
      * Gets/Sets the locales.
      * @remarks Default locale is en.
@@ -420,8 +399,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             displayData: this.displayData,
             format: this.format,
             isSpinLoop: this.isSpinLoop,
-            label: this.label,
-            labelVisibility: this.labelVisibility,
             locale: this.locale,
             mask: this.mask,
             mode: this.mode,
@@ -620,6 +597,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @ViewChild('readOnlyDatePickerTemplate', { read: TemplateRef, static: true })
     protected readOnlyDatePickerTemplate: TemplateRef<any>;
 
+    /*
+     * @hidden @internal
+     */
+    @ContentChild(IgxLabelDirective)
+    public labelDirective: IgxLabelDirective;
+
     /*
      * @hidden
      */

src/app/date-picker/date-picker.sample.html

@@ -4,6 +4,7 @@ <h4 class="sample-title">Default Date Picker - dialog mode</h4>
         <p class="sample-description">Added buttons - today and cancel</p>
         <div class="preview">
             <igx-date-picker #datePicker cancelButtonLabel="cancel" todayButtonLabel="today">
+                <label igxLabel>Custom Label</label>
             </igx-date-picker>
             <igx-buttongroup class="datepicker-actions">
                 <button igxButton igxRipple (click)="d()">Today</button>