feat(pickers): add custom styling ability #4647

Author: SAndreeva

Diff for: projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html

@@ -8,7 +8,7 @@
 </ng-template>
 <div>
     <igx-calendar #calendar></igx-calendar>
-    <div class="igx-date-picker__buttons">
+    <div [class]="datePickerActions && datePickerActions.cssClasses ? datePickerActions.cssClasses : 'igx-date-picker__buttons'">
         <ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
     </div>
 </div>

Diff for: projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts

@@ -1,4 +1,4 @@
-import { Directive, TemplateRef } from '@angular/core';
+import { Directive, TemplateRef, Input } from '@angular/core';
 
 @Directive({
     selector: '[igxDatePickerTemplate]'
@@ -21,4 +21,7 @@ export class IgxDatePickerTemplateDirective {
 })
 export class IgxDatePickerActionsDirective {
     constructor(public template: TemplateRef<any>) { }
+
+    @Input()
+    public cssClasses = '';
 }

Diff for: projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts

@@ -352,6 +352,11 @@ export class IgxTimePickerTemplateDirective {
     selector: 'igx-time-picker-actions,[igxTimePickerActions]'
 })
 export class IgxTimePickerActionsDirective {
-    @HostBinding('class.igx-time-picker__buttons')
-    public defaultClass = true;
+    @HostBinding('class')
+    get defaultClass(): string {
+        return this.cssClasses ? this.cssClasses : 'igx-time-picker__buttons';
+    };
+
+    @Input()
+    public cssClasses = '';
 }

Diff for: src/app/date-picker/date-picker.sample.html

@@ -55,7 +55,7 @@ <h4 class="sample-title">DropDown Date Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
-                    <ng-template igxDatePickerActions>
+                    <ng-template igxDatePickerActions [cssClasses]="actionBtnCss">
                         <button igxButton="flat" (click)="selectToday(retemplated)">Today</button>
                     </ng-template>
                 </igx-date-picker>

Diff for: src/app/date-picker/date-picker.sample.css renamed to src/app/date-picker/date-picker.sample.scss

@@ -6,3 +6,11 @@
     margin: 16px;
     width: 200px;
 }
+
+:host ::ng-deep {
+    .action-buttons {
+        display: flex;
+        flex-flow: column;
+        margin: 10px;
+    }
+}

Diff for: src/app/date-picker/date-picker.sample.ts

@@ -8,12 +8,13 @@ import { DatePipe, formatDate } from '@angular/common';
 
 @Component({
     selector: 'app-date-picker-sample',
-    styleUrls: ['date-picker.sample.css'],
+    styleUrls: ['date-picker.sample.scss'],
     templateUrl: 'date-picker.sample.html'
 })
 
 export class DatePickerSampleComponent {
     date = new Date('10/3/2018');
+    actionBtnCss = "action-buttons";
 
     public formatOptions = {
         day: 'numeric',

Diff for: src/app/time-picker/time-picker.sample.html

@@ -101,7 +101,7 @@ <h4 class="sample-title">Templated Time Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
-                    <igx-time-picker-actions>
+                    <igx-time-picker-actions [cssClasses]="actionBtnCss">
                         <button igxButton="flat" (click)="selectToday(picker)">Today</button>
                     </igx-time-picker-actions>
                 </igx-time-picker>

Diff for: src/app/time-picker/time-picker.sample.css renamed to src/app/time-picker/time-picker.sample.scss

@@ -5,4 +5,10 @@
     align-content: flex-start;
     margin: 16px;
     width: 200px;
+}
+
+.action-buttons {
+    display: flex;
+    flex-flow: column;
+    margin: 10px;
 }

Diff for: src/app/time-picker/time-picker.sample.ts

@@ -3,13 +3,15 @@ import { IgxTimePickerComponent, InteractionMode, IgxInputDirective, AutoPositio
 
 @Component({
     selector: 'app-time-picker-sample',
-    styleUrls: ['time-picker.sample.css'],
+    styleUrls: ['time-picker.sample.scss'],
     templateUrl: 'time-picker.sample.html'
 })
 export class TimePickerSampleComponent implements AfterViewInit {
     max = '19:00';
     min = '09:00';
 
+    actionBtnCss = 'action-buttons';
+
     itemsDelta = { hours: 1, minutes: 5 };
     format = 'hh:mm tt';
     isSpinLoop = true;