Merge branch 'ddincheva/activeNode-11.0.x' of https://github.com/IgniteUI/igniteui-angular into ddincheva/activeNode-11.0.x

Author: ddincheva

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -24,8 +24,17 @@ import { IgxIconModule } from '../icon/public_api';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { IBaseEventArgs } from '../core/utils';
+import { mkenum } from '../core/utils';
+
+/**
+ * Determines the Button Group alignment
+ */
+export const ButtonGroupAlignment = mkenum({
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+});
+export type ButtonGroupAlignment = (typeof ButtonGroupAlignment)[keyof typeof ButtonGroupAlignment];
 
-export enum ButtonGroupAlignment { horizontal, vertical }
 let NEXT_ID = 0;
 
 /**

projects/igniteui-angular/src/lib/core/enums.ts

@@ -1,8 +1,10 @@
+import { mkenum } from './utils';
 /**
  * This enumeration is used to configure whether the date/time picker has an editable input with drop down
  * or is readonly - the date/time is selected only through a dialog.
  */
-export enum InteractionMode {
-    DropDown = 'dropdown',
-    Dialog = 'dialog'
-}
+export const InteractionMode = mkenum({
+    DropDown: 'dropdown',
+    Dialog: 'dialog'
+});
+export type InteractionMode = (typeof InteractionMode)[keyof typeof InteractionMode];

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -107,6 +107,11 @@
     @include e(date, 'weekend') {
         @extend %cal-value !optional;
         @extend %cal-value--weekend !optional;
+
+        &:hover,
+        &:focus {
+            @extend %cal-value--hover !optional;
+        }
     }
 
     @include e(date, 'special') {

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

@@ -562,7 +562,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```
      */
     @Input()
-    public mode = InteractionMode.Dialog;
+    public mode: InteractionMode = InteractionMode.Dialog;
 
     /**
      * Gets/Sets whether date should spin continuously or stop when min/max is reached.

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

@@ -365,7 +365,7 @@ export class IgxTimePickerComponent implements
      * @memberof IgxTimePickerComponent
      */
     @Input()
-    public mode = InteractionMode.Dialog;
+    public mode: InteractionMode = InteractionMode.Dialog;
 
     /**
      * Determines the container the popup element should be attached to.

src/app/buttonGroup/buttonGroup.sample.html

@@ -20,7 +20,7 @@ <h4 class="sample-title">Multiple Selection <i class="light">Horizontal Disabled
 
     <article class="sample-column">
         <h4 class="sample-title">Exclusive Selection <i class="light">Vertical</i></h4>
-        <igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment">
+        <igx-buttongroup [multiSelection]="false" [values]="cities" alignment="vertical">
         </igx-buttongroup>
     </article>