Merge branch '11.0.x' into amarinov/datePickerStrictTemplate110

Author: Lipata

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/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') {

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>