Merge branch 'master' into ikitanov/divider

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - Banner component [#1174](https://github.com/IgniteUI/igniteui-webcomponents/issues/1174)
 - Divider component [#1237](https://github.com/IgniteUI/igniteui-webcomponents/issues/1237)
+- Date picker component [#174](https://github.com/IgniteUI/igniteui-webcomponents/issues/174)
 ### Fixed
 - Input, Textarea - passing `undefined` to **value** sets the underlying input value to undefined [#1206](https://github.com/IgniteUI/igniteui-webcomponents/issues/1206)
 - Mask input - after a form `reset` call correctly update underlying input value and placeholder state

src/components/calendar/calendar.ts

@@ -32,6 +32,8 @@ import { styles } from './themes/calendar.base.css.js';
 import { all } from './themes/calendar.js';
 import IgcYearsViewComponent from './years-view/years-view.js';
 
+export const focusActiveDate = Symbol();
+
 /**
  * Represents a calendar that lets users
  * to select a date value in a variety of different ways.
@@ -211,7 +213,7 @@ export default class IgcCalendarComponent extends SizableMixin(
         }
 
         if (this.activeView === 'days') {
-          this.focusActiveDate();
+          this[focusActiveDate]();
         }
         break;
       case 'PageUp':
@@ -224,7 +226,7 @@ export default class IgcCalendarComponent extends SizableMixin(
         }
 
         if (this.activeView === 'days') {
-          this.focusActiveDate();
+          this[focusActiveDate]();
         }
         break;
       case 'Home':
@@ -253,7 +255,7 @@ export default class IgcCalendarComponent extends SizableMixin(
           this.activeDate = date;
         }
 
-        this.focusActiveDate();
+        this[focusActiveDate]();
         break;
       case 'End':
         event.preventDefault();
@@ -284,7 +286,7 @@ export default class IgcCalendarComponent extends SizableMixin(
           this.activeDate = date;
         }
 
-        this.focusActiveDate();
+        this[focusActiveDate]();
         break;
       case 'ArrowLeft':
         event.preventDefault();
@@ -314,7 +316,7 @@ export default class IgcCalendarComponent extends SizableMixin(
           this.previousYear();
         }
 
-        this.focusActiveDate();
+        this[focusActiveDate]();
         break;
       case 'ArrowRight':
         event.preventDefault();
@@ -346,7 +348,7 @@ export default class IgcCalendarComponent extends SizableMixin(
           this.nextYear();
         }
 
-        this.focusActiveDate();
+        this[focusActiveDate]();
         break;
       case 'ArrowUp':
         event.preventDefault();
@@ -384,7 +386,7 @@ export default class IgcCalendarComponent extends SizableMixin(
           );
         }
 
-        this.focusActiveDate();
+        this[focusActiveDate]();
         break;
       case 'ArrowDown':
         event.preventDefault();
@@ -424,12 +426,12 @@ export default class IgcCalendarComponent extends SizableMixin(
           );
         }
 
-        this.focusActiveDate();
+        this[focusActiveDate]();
         break;
     }
   };
 
-  private async focusActiveDate() {
+  public async [focusActiveDate]() {
     await this.updateComplete;
 
     if (this.activeView === 'days') {
@@ -483,23 +485,23 @@ export default class IgcCalendarComponent extends SizableMixin(
     this.activeDate = (event.target as IgcMonthsViewComponent).value;
     this.activeView = 'days';
 
-    this.focusActiveDate();
+    this[focusActiveDate]();
   }
 
   private changeYear(event: CustomEvent<void>) {
     event.stopPropagation();
     this.activeDate = (event.target as IgcYearsViewComponent).value;
     this.activeView = 'months';
 
-    this.focusActiveDate();
+    this[focusActiveDate]();
   }
 
   private async switchToMonths(daysViewIndex: number) {
     this.activateDaysView(daysViewIndex);
     this.activeView = 'months';
 
     await this.updateComplete;
-    this.focusActiveDate();
+    this[focusActiveDate]();
   }
 
   private async switchToYears(daysViewIndex: number) {
@@ -509,7 +511,7 @@ export default class IgcCalendarComponent extends SizableMixin(
     this.activeView = 'years';
 
     await this.updateComplete;
-    this.focusActiveDate();
+    this[focusActiveDate]();
   }
 
   private activateDaysView(daysViewIndex: number) {
@@ -528,7 +530,7 @@ export default class IgcCalendarComponent extends SizableMixin(
     this.activeDate = day.date;
 
     if (!day.isCurrentMonth) {
-      this.focusActiveDate();
+      this[focusActiveDate]();
     }
   }
 

src/components/common/definitions/defineAllComponents.ts

@@ -16,6 +16,7 @@ import IgcCheckboxComponent from '../../checkbox/checkbox.js';
 import IgcSwitchComponent from '../../checkbox/switch.js';
 import IgcChipComponent from '../../chip/chip.js';
 import IgcComboComponent from '../../combo/combo.js';
+import IgcDatePickerComponent from '../../date-picker/date-picker.js';
 import IgcDateTimeInputComponent from '../../date-time-input/date-time-input.js';
 import IgcDialogComponent from '../../dialog/dialog.js';
 import IgcDividerComponent from '../../divider/divider.js';
@@ -81,6 +82,7 @@ const allComponents: IgniteComponent[] = [
   IgcCheckboxComponent,
   IgcChipComponent,
   IgcComboComponent,
+  IgcDatePickerComponent,
   IgcDropdownComponent,
   IgcDropdownGroupComponent,
   IgcDropdownHeaderComponent,

src/components/common/localization/validation-en.ts

@@ -8,4 +8,5 @@ export default {
   max: 'A value no more than {0} should be entered',
   email: 'A valid email address should be entered',
   url: 'A valid url address should be entered',
+  disabledDate: 'The entered value {0} is within the disabled dates range',
 } as const;

src/components/common/util.ts

@@ -8,6 +8,8 @@ export const partNameMap = (partNameInfo: PartNameInfo) => {
     .join(' ');
 };
 
+export function noop() {}
+
 export const asPercent = (part: number, whole: number) => (part / whole) * 100;
 
 export const clamp = (number: number, min: number, max: number) =>

src/components/common/validators.ts

@@ -1,3 +1,4 @@
+import { DateTimeUtil } from '../date-time-input/date-util.js';
 import validatorMessages from './localization/validation-en.js';
 import { asNumber, formatString, isDefined } from './util.js';
 
@@ -10,9 +11,12 @@ export interface Validator<T = any> {
   isValid: ValidatorHandler<T>;
 }
 
+const emailRegex =
+  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
 export const requiredValidator: Validator<{
   required: boolean;
-  value?: string;
+  value?: unknown;
 }> = {
   key: 'valueMissing',
   message: validatorMessages.required,
@@ -103,9 +107,6 @@ export const stepValidator: Validator<{
       : true,
 };
 
-const emailRegex =
-  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-
 export const emailValidator: Validator<{ value: string }> = {
   key: 'typeMismatch',
   message: validatorMessages.email,
@@ -117,3 +118,27 @@ export const urlValidator: Validator<{ value: string }> = {
   message: validatorMessages.url,
   isValid: ({ value }) => URL.canParse(value),
 };
+
+export const minDateValidator: Validator<{
+  value?: Date | null;
+  min?: Date | null;
+}> = {
+  key: 'rangeUnderflow',
+  message: ({ min }) => formatString(validatorMessages.min, min),
+  isValid: ({ value, min }) =>
+    min
+      ? !DateTimeUtil.lessThanMinValue(value ?? new Date(), min, false, true)
+      : true,
+};
+
+export const maxDateValidator: Validator<{
+  value?: Date | null;
+  max?: Date | null;
+}> = {
+  key: 'rangeOverflow',
+  message: ({ max }) => formatString(validatorMessages.max, max),
+  isValid: ({ value, max }) =>
+    max
+      ? !DateTimeUtil.greaterThanMaxValue(value ?? new Date(), max, false, true)
+      : true,
+};