Pickers refactoring

CHANGELOG.md

@@ -31,6 +31,9 @@ All notable changes for each version of this project will be documented in this
     - `onDataPreLoad` -> `dataPreLoad`
 
 ### New Features
+- `IgxDateTimeEditor`
+    - `spinDelta` input property which allows a user to provide different delta values that will be used for spinning. All parts default to `1`.
+    - `increment` and `decrement` methods now accept an optional `delta` parameter which targets the currently spun date portion. It takes precedence over the values set in `spinDelta`.
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

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

@@ -5,7 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IgxCalendarComponent, IgxCalendarModule } from './public_api';
-import { IgxDatePickerComponent, IgxDatePickerModule } from '../date-picker/date-picker.component';
+import { IgxDatePickerComponent, IgxDatePickerModule } from '../date-picker/public_api';
 import { DateRangeType } from '../core/dates';
 import { HelperTestFunctions } from './calendar-helper-utils';
 
@@ -1284,7 +1284,7 @@ describe('Multi-View Calendar - ', () => {
             fixture.detectChanges();
 
             datePicker.mode = 'dropdown';
-            datePicker.monthsViewNumber = 2;
+            datePicker.displayMonthsCount = 2;
             tick();
             fixture.detectChanges();
 
@@ -1346,7 +1346,7 @@ export class MultiViewCalendarSampleComponent {
 
 @Component({
     template: `
-        <igx-date-picker [value]="date" [monthsViewNumber]="monthViews" [hideOutsideDays]="true"></igx-date-picker>
+        <igx-date-picker [value]="date" [displayMonthsCount]="monthViews" [hideOutsideDays]="true"></igx-date-picker>
     `
 })
 export class MultiViewDatePickerSampleComponent {

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

@@ -156,7 +156,7 @@ export const isObject = (value: any): boolean => value && value.toString() === '
  * @returns true if provided variable is Date
  * @hidden
  */
-export const isDate = (value: any): boolean => value instanceof Date;
+export const isDate = (value: any): value is Date => value instanceof Date;
 
 /**
  * Checks if the two passed arguments are equal

projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html

@@ -0,0 +1,18 @@
+<ng-template #defaultPickerActions>
+    <div *ngIf="this.closeButtonLabel || this.todayButtonLabel" class="igx-date-picker__buttons">
+        <button #closeButton *ngIf="this.closeButtonLabel" igxButton="flat" igxRipple
+            (click)="this.calendarClose.emit()">
+            {{ this.closeButtonLabel }}
+        </button>
+        <button #todayButton *ngIf="this.todayButtonLabel" igxButton="flat" igxRipple
+            (click)="this.todaySelection.emit()">
+            {{ this.todayButtonLabel }}
+        </button>
+    </div>
+</ng-template>
+
+<igx-calendar></igx-calendar>
+<ng-container *ngTemplateOutlet="this.pickerActions 
+    ? this.pickerActions.template 
+    : defaultPickerActions">
+</ng-container>

projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts

@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { NgModule, Component, ViewChild, Output, EventEmitter, HostListener, HostBinding } from '@angular/core';
+import { IgxCalendarComponent, IgxCalendarModule } from '../../calendar/public_api';
+import { PickerInteractionMode } from '../../date-common/types';
+import { IgxButtonModule } from '../../directives/button/button.directive';
+import { IgxRippleModule } from '../../directives/ripple/ripple.directive';
+import { IgxPickerActionsDirective } from '../picker-icons.common';
+
+/** @hidden */
+@Component({
+    selector: 'igx-calendar-container',
+    styles: [':host {display: block;}'],
+    templateUrl: 'calendar-container.component.html'
+})
+export class IgxCalendarContainerComponent {
+    @ViewChild(IgxCalendarComponent, { static: true })
+    public calendar: IgxCalendarComponent;
+
+    @Output()
+    public calendarClose = new EventEmitter();
+
+    @Output()
+    public todaySelection = new EventEmitter();
+
+    @HostBinding('class.igx-date-picker')
+    public styleClass = 'igx-date-picker';
+
+    @HostBinding('class.igx-date-picker--dropdown')
+    public get dropdownCSS(): boolean {
+        return this.mode === PickerInteractionMode.DropDown;
+    }
+
+    @HostBinding('class.igx-date-picker--vertical')
+    public get verticalCSS(): boolean {
+        return this.vertical && this.mode === PickerInteractionMode.Dialog;
+    }
+
+    public vertical = false;
+    public closeButtonLabel: string;
+    public todayButtonLabel: string;
+    public mode = PickerInteractionMode.DropDown;
+    public pickerActions: IgxPickerActionsDirective;
+
+    @HostListener('keydown.alt.arrowup', ['$event'])
+    public onEscape(event) {
+        event.preventDefault();
+        this.calendarClose.emit();
+    }
+
+    public get isReadonly() {
+        return this.mode === PickerInteractionMode.Dialog;
+    }
+}
+
+/** @hidden */
+@NgModule({
+    declarations: [IgxCalendarContainerComponent],
+    entryComponents: [IgxCalendarContainerComponent],
+    imports: [
+        CommonModule,
+        IgxButtonModule,
+        IgxRippleModule,
+        IgxCalendarModule
+    ],
+    exports: [IgxCalendarContainerComponent]
+})
+export class IgxCalendarContainerModule { }

projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

@@ -0,0 +1,233 @@
+import { ElementRef, EventEmitter, Inject, LOCALE_ID, Optional, Input, Directive, Output } from '@angular/core';
+import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
+import { EditorProvider } from '../core/edit-provider';
+import { PickerInteractionMode } from './types';
+import { IToggleView } from '../core/navigation';
+import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
+import { DateRange } from '../date-range-picker/public_api';
+import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
+import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
+import { OverlaySettings } from '../services/overlay/utilities';
+
+@Directive()
+export abstract class PickerBaseDirective extends DisplayDensityBase implements IToggleView, EditorProvider {
+    /**
+     * The editor's input mask.
+     *
+     * @remarks
+     * Also used as a placeholder when none is provided.
+     * Default is `"'MM/dd/yyyy'"`
+     *
+     * @example
+     * ```html
+     * <igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public inputFormat: string;
+
+    /**
+     * The format used to display the picker's value when it's not being edited.
+     *
+     * @remarks
+     * Uses Angular's DatePipe.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>
+     * ```
+     *
+     */
+    @Input()
+    public displayFormat: string;
+
+    /**
+     * Sets the `placeholder` of the picker's input.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public placeholder = '';
+
+    /**
+     * Can be `dropdown` with editable input field or `dialog` with readonly input field.
+     *
+     * @remarks
+     * Default mode is `dropdown`
+     *
+     * @example
+     * ```html
+     * <igx-date-picker mode="dialog"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
+
+    /**
+     * Overlay settings used to display the pop-up element.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public overlaySettings: OverlaySettings;
+
+    /**
+     * Enables or disables the picker.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker [disabled]="'true'"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public disabled = false;
+
+    /**
+     * Locale settings used for value formatting and calendar or time spinner.
+     *
+     * @remarks
+     * Uses Angular's `LOCALE_ID` by default. Affects both input mask and display format if those are not set.
+     * If a `locale` is set, it must be registered via `registerLocaleData`.
+     * Please refer to https://angular.io/guide/i18n#i18n-pipes.
+     * If it is not registered, `Intl` will be used for formatting.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker locale="jp"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public locale: string;
+
+    /**
+     * The container used for the pop-up element.
+     *
+     * @example
+     * ```html
+     * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
+     * <!-- ... -->
+     * <igx-date-picker [outlet]="outlet"></igx-date-picker>
+     * <!-- ... -->
+     * ```
+     */
+    @Input()
+    public outlet: IgxOverlayOutletDirective | ElementRef;
+
+    /**
+     * Determines how the picker's input will be styled.
+     *
+     * @remarks
+     * Default is `box`.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker [type]="'line'"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public set type(val: IgxInputGroupType) {
+        this._type = val;
+    }
+    public get type(): IgxInputGroupType {
+        return this._type || this._inputGroupType || 'box';
+    }
+
+    /**
+     * Gets/Sets the default template editor's tabindex.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker [tabIndex]="1"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public tabIndex: number | string;
+
+    /**
+     * Emitted when the calendar has started opening, cancelable.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
+     * ```
+     */
+    @Output()
+    public opening = new EventEmitter<IBaseCancelableBrowserEventArgs>();
+
+    /**
+     * Emitted after the calendar has opened.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
+     * ```
+     */
+    @Output()
+    public opened = new EventEmitter<IBaseEventArgs>();
+
+    /**
+     * Emitted when the calendar has started closing, cancelable.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
+     * ```
+     */
+    @Output()
+    public closing = new EventEmitter<IBaseCancelableBrowserEventArgs>();
+
+    /**
+     * Emitted after the calendar has closed.
+     *
+     * @example
+     * ```html
+     * <igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
+     * ```
+     */
+    @Output()
+    public closed = new EventEmitter<IBaseEventArgs>();
+
+    protected _collapsed = true;
+    protected _type: IgxInputGroupType;
+    protected _minValue: Date | string;
+    protected _maxValue: Date | string;
+
+    /**
+     * Gets the picker's pop-up state.
+     *
+     * @example
+     * ```typescript
+     * const state = this.picker.collapsed;
+     * ```
+     */
+    public get collapsed(): boolean {
+        return this._collapsed;
+    }
+
+    /** @hidden @internal */
+    public get isDropdown(): boolean {
+        return this.mode === PickerInteractionMode.DropDown;
+    }
+
+    public abstract valueChange: EventEmitter<string | Date | DateRange | null>;
+
+    constructor(public element: ElementRef,
+        @Inject(LOCALE_ID) protected _localeId: string,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions,
+        @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) {
+        super(_displayDensityOptions || { displayDensity: 'comfortable' });
+        this.locale = this.locale || this._localeId;
+    }
+
+    public abstract select(value: Date | DateRange): void;
+    public abstract open(settings?: OverlaySettings): void;
+    public abstract toggle(settings?: OverlaySettings): void;
+    public abstract close(): void;
+    public abstract getEditElement(): HTMLInputElement;
+}