chore(*): merge master #3126

Author: SAndreeva

CHANGELOG.md

@@ -104,6 +104,12 @@ All notable changes for each version of this project will be documented in this
     - `igxOverlay.attach(component, settings?)` method added. Use this method to obtain an unique Id of the created overlay where the provided component will be shown. Then call `igxOverlay.show(id, settings?)` method to show the component in overlay.
     - `igxOverlay.show(component, settings)` is **depricated**. Use `igxOverlay.attach(component, settings?)` method to obtain an Id, and then call `igxOverlay.show(id, settings)` method to show a component in the overlay.
 
+- `igx-date-picker`
+    - **Feature** Added editable `mode` to enable the input field value editing and spinning of the date parts. Example:
+    ```html
+      <igx-date-picker #editableDatePicker1 mode="editable" [value]="date" format="dd.MM.y" mask="M/d/y">
+      </igx-date-picker>
+     ```
  **Components roundness**
 - Ignite UI for Angular now allows you to change the shape of components by changing their border-radius.
 

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

@@ -356,8 +356,9 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
         return `url(${this.src})`;
     }
 }
+
 /**
- * The `IgxAvatarModule` provides the {@link IgxAvatarComponent} inside your application.
+ * @hidden
  */
 @NgModule({
     declarations: [IgxAvatarComponent],

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

@@ -182,9 +182,8 @@ export class IgxBadgeComponent {
 }
 
 /**
- * The IgxBadgeComponent provides the {@link IgxBadgeComponent} inside your application.
+ * @hidden
  */
-
 @NgModule({
     declarations: [IgxBadgeComponent],
     exports: [IgxBadgeComponent],

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

@@ -258,6 +258,10 @@ export class IgxBannerComponent implements IToggleView {
         this.onClosed.emit(this._bannerEvent);
     }
 }
+
+/**
+ * @hidden
+ */
 @NgModule({
     declarations: [IgxBannerComponent, IgxBannerActionsDirective],
     exports: [IgxBannerComponent, IgxBannerActionsDirective],

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

@@ -412,7 +412,7 @@ export interface IButtonGroupEventArgs {
 }
 
 /**
- * The IgxButtonGroupModule provides the {@link IgxButtonGroupComponent} inside your application.
+ * @hidden
  */
 @NgModule({
     declarations: [IgxButtonGroupComponent],

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -4,25 +4,29 @@
 </ng-template>
 
 <ng-template let-result #defaultMonth>
-    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()" class="igx-calendar-picker__date">
+    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
+        class="igx-calendar-picker__date">
         {{ formattedMonth(viewDate) }}
     </span>
-    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()" class="igx-calendar-picker__date">
+    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
+        class="igx-calendar-picker__date">
         {{ formattedYear(viewDate) }}
     </span>
 </ng-template>
 
-<div *ngIf="selection === 'single'" class="igx-calendar__header">
+<div *ngIf="selection === 'single' && hasHeader" class="igx-calendar__header">
     <h5 class="igx-calendar__header-year">{{ formattedYear(headerDate) }}</h5>
     <h2 class="igx-calendar__header-date">
         <ng-container *ngTemplateOutlet="headerTemplate ? headerTemplate : defaultHeader; context: headerContext">
         </ng-container>
     </h2>
 </div>
 
-<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()" (swipeleft)="nextMonth()">
+<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()"
+    (swipeleft)="nextMonth()">
     <div class="igx-calendar-picker">
-        <div tabindex="0" class="igx-calendar-picker__prev" (keydown)="previousMonthKB($event)" (click)="previousMonth()">
+        <div tabindex="0" class="igx-calendar-picker__prev" (keydown)="previousMonthKB($event)"
+            (click)="previousMonth()">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
         <div>
@@ -49,16 +53,10 @@ <h2 class="igx-calendar__header-date">
     </igx-days-view>
 </div>
 
-<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
-                                    [date]="viewDate"
-                                    [locale]="locale"
-                                    [monthFormat]="formatOptions.month"
-                                    (onSelection)="changeMonth($event)" >
+<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months [date]="viewDate" [locale]="locale"
+    [monthFormat]="formatOptions.month" (onSelection)="changeMonth($event)">
 </igx-months-view>
 
-<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
-                                     [date]="viewDate"
-                                     [locale]="locale"
-                                     [yearFormat]="formatOptions.year"
-                                     (onSelection)="changeYear($event)">
-</igx-years-view>
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade [date]="viewDate" [locale]="locale"
+    [yearFormat]="formatOptions.year" (onSelection)="changeYear($event)">
+</igx-years-view>

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

@@ -72,6 +72,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
     @Input()
     public id = `igx-calendar-${NEXT_ID++}`;
 
+    @Input()
+    public hasHeader = true;
+
     /**
      * Sets/gets whether the calendar header will be in vertical position.
      * Default value is `false`.
@@ -130,7 +133,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
     /**
      * @hidden
      */
-    @ViewChild('months', {read: IgxMonthsViewComponent})
+    @ViewChild('months', { read: IgxMonthsViewComponent })
     public monthsView: IgxMonthsViewComponent;
 
     /**

projects/igniteui-angular/src/lib/calendar/calendar.module.ts

@@ -15,6 +15,9 @@ import { IgxDaysViewComponent } from './days-view/days-view.component';
 import { IgxDayItemComponent } from './days-view/day-item.component';
 import { IgxMonthPickerComponent } from './month-picker/month-picker.component';
 
+/**
+ * @hidden
+ */
 @NgModule({
     declarations: [
         IgxDayItemComponent,

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts

@@ -244,17 +244,17 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
     /**
      * @hidden
      */
-    public writeValue(value: Date) {
-        if (value) {
-            this.date = value;
-        }
+    public yearTracker(index, item): string {
+        return `${item.getFullYear()}}`;
     }
 
     /**
      * @hidden
      */
-    public yearTracker(index, item): string {
-        return `${item.getFullYear()}}`;
+    public writeValue(value: Date) {
+        if (value) {
+            this.date = value;
+        }
     }
 
     /**

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

@@ -89,8 +89,9 @@ export class IgxCardComponent {
     @Input()
     public id = `igx-card-${NEXT_ID++}`;
 }
+
 /**
- * The `IgxCardModule` provides the {@link IgxCardComponent} inside your application.
+ * @hidden
  */
 @NgModule({
     declarations: [IgxCardComponent, IgxCardHeaderDirective,

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

@@ -562,8 +562,9 @@ export interface ISlideEventArgs {
     carousel: IgxCarouselComponent;
     slide: IgxSlideComponent;
 }
+
 /**
- * The `IgxCarouselModule` provides the {@link IgxCarouselComponent} inside your application.
+ * @hidden
  */
 @NgModule({
     declarations: [IgxCarouselComponent, IgxSlideComponent],

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

@@ -403,8 +403,9 @@ export const IGX_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
     providers: [IGX_CHECKBOX_REQUIRED_VALIDATOR]
 })
 export class IgxCheckboxRequiredDirective extends CheckboxRequiredValidator { }
+
 /**
- *The IgxCheckboxModule provides the {@link IgxCheckboxComponent} inside your application.
+ * @hidden
  */
 @NgModule({
     declarations: [IgxCheckboxComponent, IgxCheckboxRequiredDirective],

projects/igniteui-angular/src/lib/core/navigation/directives.ts

@@ -51,6 +51,9 @@ export class IgxNavigationCloseDirective {
     }
 }
 
+/**
+ * @hidden
+ */
 @NgModule({
     declarations: [IgxNavigationCloseDirective, IgxNavigationToggleDirective],
     exports: [IgxNavigationCloseDirective, IgxNavigationToggleDirective],

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss

@@ -9,13 +9,17 @@
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
 
-    .igx-dialog__window {
-        @extend %date-picker-display !optional;
+    @extend %date-picker !optional;
+
+    @include e(buttons) {
+        @extend %date-picker__buttons !optional;
     }
 
     @include m(vertical) {
-        .igx-dialog__window {
-            @extend %date-picker-display--vertical !optional;
-        }
+        @extend %date-picker--vertical !optional;
+    }
+
+    @include m(dropdown) {
+        @extend %date-picker--dropdown !optional;
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss

@@ -5,31 +5,116 @@
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
-/// Date Picker
-/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
-///
-/// @requires $default-palette
-/// @requires $light-schema
-/// @requires apply-palette
-/// @requires extend
-@function igx-date-picker-theme(
-    $palette: $default-palette,
-    $schema: $light-schema
-) {
-    $name: 'igx-date-picker';
-    $theme: apply-palette(map-get($schema, $name), $palette);
-    @return extend($theme, (name: $name, palette: $palette));
-}
-
-/// @param {Map} $theme - The theme used to style the component.
+/// @param {Map} $theme - The calendar theme used to style the component.
+/// @requires $elevations
+/// @requires igx-elevation
+/// @requires rem
 @mixin igx-date-picker($theme) {
-    %date-picker-display {
-        width: 340px;
+    %date-picker {
+        min-width: 200px;
+        max-width: 340px;
+        box-shadow: igx-elevation($elevations, 24);
+        border-radius: rem(4px);
+        background: --var($theme, 'content-background');
+        overflow: hidden;
+
+        %cal-display {
+            background: --var($theme, 'content-background');
+        }
+
+        %cal-header-display {
+            background-color: --var($theme, 'header-background');
+            color: --var($theme, 'header-text-color');
+        }
+
+        %cal-picker-arrow {
+            color: --var($theme, 'picker-arrow-color');
+
+            &:hover {
+                color: --var($theme, 'picker-arrow-hover-color');
+            }
+        }
+
+        %cal-picker-date {
+            color: --var($theme, 'picker-text-color');
+
+            &:hover,
+            &:focus {
+                color: --var($theme, 'picker-text-hover-color');
+            }
+        }
+
+        %cal-value {
+            color: --var($theme, 'content-text-color');
+        }
+
+        %cal-value--label {
+            color: --var($theme, 'inactive-text-color');
+        }
+
+        %cal-value--weekend {
+            color: --var($theme, 'weekend-text-color');
+        }
+
+        %cal-value--special {
+            color: --var($theme, 'date-special-text-color');
+            background: --var($theme, 'date-special-background');
+        }
+
+        %cal-value--disabled {
+            color: --var($theme, 'date-disabled-text-color');
+        }
+
+        %cal-value--year-current {
+            color: --var($theme, 'year-current-text-color');
+        }
+
+        %cal-value--year-hover {
+            color: --var($theme, 'year-hover-text-color');
+        }
+
+        %cal-value--month-hover {
+            color: --var($theme, 'month-hover-text-color');
+        }
+
+        %cal-value--month-current {
+            color: --var($theme, 'month-current-text-color');
+        }
+
+        %cal-value--inactive {
+            color: --var($theme, 'inactive-text-color');
+        }
+
+        %cal-value--selected {
+            color: --var($theme, 'date-selected-text-color');
+            background-color: --var($theme, 'date-selected-background') !important;
+        }
+
+        %cal-value--current {
+            color: --var($theme, 'date-current-text-color');
+        }
+
+        %cal-value--hover {
+            background-color: --var($theme, 'date-hover-background');
+        }
     }
 
-    %date-picker-display--vertical {
-        width: 540px;
+    %date-picker--vertical {
+        min-width: 368px; /* 168px for header + 200px for the content */
+        max-width: 540px;
+    }
+
+    %date-picker--dropdown {
+        display: flex;
+        flex: 1 0 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        box-shadow: igx-elevation($elevations, 3);
     }
-}
 
+    %date-picker__buttons {
+        display: flex;
+        justify-content: flex-end;
+        padding: rem(8px);
+    }
+}

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -165,7 +165,7 @@
     }
 
     @if not(index($exclude, 'igx-date-picker')) {
-        @include igx-date-picker(igx-date-picker-theme($palette, $schema));
+        @include igx-date-picker(igx-calendar-theme($palette, $schema));
     }
 
     @if not(index($exclude, 'igx-dialog')) {