igniteui-webcomponents 7.2.4 → 7.3.0-beta.0

package/components/calendar/base.js

@@ -7,12 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { CalendarResourceStringsEN, } from 'igniteui-i18n-core';
 import { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
-import { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.js';
-import { addI18nController } from '../common/i18n/i18n-controller.js';
-import { first } from '../common/util.js';
-import { convertToDate, convertToDates, getWeekDayNumber } from './helpers.js';
-import { CalendarDay } from './model.js';
+import { convertToDate, convertToDates } from '#internals/date/converters.js';
+import { CalendarDay } from '#internals/date/model.js';
+import { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';
+import { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';
+import { addI18nController } from '#internals/i18n/i18n-controller.js';
+import { firstOf } from '#internals/utils/arrays.js';
+import { getWeekDayNumber } from './helpers.js';
 let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -21,7 +22,6 @@ let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends LitElement
             resourceMapName: 'calendar',
         });
         this._initialActiveDateSet = false;
-        this._firstDayOfWeek = 0;
         this._activeDate = CalendarDay.today;
         this._value = null;
         this._values = [];
@@ -32,7 +32,10 @@ let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends LitElement
         this.weekStart = 'sunday';
     }
     get _hasValues() {
-        return this._values && this._values.length > 0;
+        return this._values.length > 0;
+    }
+    get _firstDayOfWeek() {
+        return getWeekDayNumber(this.weekStart);
     }
     get _isSingle() {
         return this.selection === 'single';
@@ -92,9 +95,6 @@ let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends LitElement
         return this._disabledDates.length ? this._disabledDates : undefined;
     }
     update(props) {
-        if (props.has('weekStart')) {
-            this._firstDayOfWeek = getWeekDayNumber(this.weekStart);
-        }
         if (props.has('selection') && this.hasUpdated) {
             this._rangePreviewDate = undefined;
             this._value = null;
@@ -110,16 +110,13 @@ let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends LitElement
             this.activeDate = this.value ?? this.activeDate;
         }
         else {
-            this.activeDate = first(this.values) ?? this.activeDate;
+            this.activeDate = firstOf(this.values) ?? this.activeDate;
         }
     }
 };
 __decorate([
     state()
 ], IgcCalendarBaseComponent.prototype, "_rangePreviewDate", void 0);
-__decorate([
-    state()
-], IgcCalendarBaseComponent.prototype, "_firstDayOfWeek", void 0);
 __decorate([
     state()
 ], IgcCalendarBaseComponent.prototype, "_activeDate", void 0);

package/components/calendar/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/calendar/base.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  type ICalendarResourceStrings,\n} from 'igniteui-i18n-core';\nimport { LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.js';\nimport type { IgcCalendarResourceStrings } from '../common/i18n/EN/calendar.resources.js';\nimport { addI18nController } from '../common/i18n/i18n-controller.js';\nimport { first } from '../common/util.js';\nimport { convertToDate, convertToDates, getWeekDayNumber } from './helpers.js';\nimport { CalendarDay } from './model.js';\nimport type {\n  CalendarSelection,\n  DateRangeDescriptor,\n  WeekDays,\n} from './types.js';\n\n@blazorIndirectRender\n@blazorDeepImport\nexport class IgcCalendarBaseComponent extends LitElement {\n  protected readonly _i18nController = addI18nController<\n    IgcCalendarResourceStrings | ICalendarResourceStrings\n  >(this, {\n    defaultEN: CalendarResourceStringsEN,\n    resourceMapName: 'calendar',\n  });\n\n  private _initialActiveDateSet = false;\n\n  protected get _hasValues(): boolean {\n    return this._values && this._values.length > 0;\n  }\n\n  protected get _isSingle(): boolean {\n    return this.selection === 'single';\n  }\n\n  protected get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  protected get _isRange(): boolean {\n    return this.selection === 'range';\n  }\n\n  @state()\n  protected _rangePreviewDate?: CalendarDay;\n\n  @state()\n  protected _firstDayOfWeek = 0;\n\n  @state()\n  protected _activeDate = CalendarDay.today;\n\n  @state()\n  protected _value: CalendarDay | null = null;\n\n  @state()\n  protected _values: CalendarDay[] = [];\n\n  @state()\n  protected _specialDates: DateRangeDescriptor[] = [];\n\n  @state()\n  protected _disabledDates: DateRangeDescriptor[] = [];\n\n  /* blazorSuppress */\n  /**\n   * The current value of the calendar.\n   * Used when selection is set to single\n   *\n   * @attr value\n   */\n  @property({ converter: convertToDate })\n  public set value(value: Date | string | null | undefined) {\n    const converted = convertToDate(value);\n    this._value = converted ? CalendarDay.from(converted) : null;\n  }\n\n  public get value(): Date | null {\n    return this._value ? this._value.native : null;\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current values of the calendar.\n   * Used when selection is set to multiple of range.\n   *\n   * @attr values\n   */\n  @property({ converter: convertToDates })\n  public set values(values: (Date | string)[] | string | null | undefined) {\n    const converted = convertToDates(values);\n    this._values = converted ? converted.map((v) => CalendarDay.from(v)) : [];\n  }\n\n  public get values(): Date[] {\n    return this._values ? this._values.map((v) => v.native) : [];\n  }\n\n  /* blazorSuppress */\n  /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */\n  @property({ attribute: 'active-date', converter: convertToDate })\n  public set activeDate(value: Date | string | null | undefined) {\n    this._initialActiveDateSet = true;\n    const converted = convertToDate(value);\n    this._activeDate = converted\n      ? CalendarDay.from(converted)\n      : CalendarDay.today;\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate.native;\n  }\n\n  /**\n   * Sets the type of selection in the component.\n   * @attr selection\n   * @default single\n   */\n  @property()\n  public selection: CalendarSelection = 'single';\n\n  /**\n   * Whether to show the week numbers.\n   * @attr show-week-numbers\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /**\n   * Gets/Sets the first day of the week.\n   * @attr week-start\n   * @default sunday\n   */\n  @property({ attribute: 'week-start' })\n  public weekStart: WeekDays = 'sunday';\n\n  /**\n   * Gets/Sets the locale used for formatting and displaying the dates in the component.\n   * @attr locale\n   */\n  @property()\n  public set locale(value: string) {\n    this._i18nController.locale = value;\n  }\n\n  public get locale() {\n    return this._i18nController.locale;\n  }\n\n  /**\n   * The resource strings for localization.\n   */\n  @property({ attribute: false })\n  public set resourceStrings(\n    value: IgcCalendarResourceStrings | ICalendarResourceStrings\n  ) {\n    this._i18nController.resourceStrings = value;\n  }\n\n  public get resourceStrings(): IgcCalendarResourceStrings &\n    ICalendarResourceStrings {\n    return this._i18nController.resourceStrings;\n  }\n\n  /** Gets/Sets the special dates for the component. */\n  @property({ attribute: false })\n  public set specialDates(value: DateRangeDescriptor[]) {\n    this._specialDates = value ?? [];\n  }\n\n  public get specialDates(): DateRangeDescriptor[] | undefined {\n    return this._specialDates.length ? this._specialDates : undefined;\n  }\n\n  /** Gets/Sets the disabled dates for the component. */\n  @property({ attribute: false })\n  public set disabledDates(value: DateRangeDescriptor[]) {\n    this._disabledDates = value ?? [];\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] | undefined {\n    return this._disabledDates.length ? this._disabledDates : undefined;\n  }\n\n  /** @internal */\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('weekStart')) {\n      this._firstDayOfWeek = getWeekDayNumber(this.weekStart);\n    }\n\n    if (props.has('selection') && this.hasUpdated) {\n      this._rangePreviewDate = undefined;\n      this._value = null;\n      this._values = [];\n    }\n\n    super.update(props);\n  }\n\n  /** @internal */\n  protected override firstUpdated(): void {\n    if (this._initialActiveDateSet) {\n      return;\n    }\n\n    if (this._isSingle) {\n      this.activeDate = this.value ?? this.activeDate;\n    } else {\n      this.activeDate = first(this.values) ?? this.activeDate;\n    }\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/calendar/base.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  type ICalendarResourceStrings,\n} from 'igniteui-i18n-core';\nimport { LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { convertToDate, convertToDates } from '#internals/date/converters.js';\nimport { CalendarDay } from '#internals/date/model.js';\nimport { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';\nimport { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';\nimport type { IgcCalendarResourceStrings } from '#internals/i18n/EN/calendar.resources.js';\nimport { addI18nController } from '#internals/i18n/i18n-controller.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { getWeekDayNumber } from './helpers.js';\nimport type {\n  CalendarSelection,\n  DateRangeDescriptor,\n  WeekDays,\n} from './types.js';\n\n@blazorIndirectRender\n@blazorDeepImport\nexport class IgcCalendarBaseComponent extends LitElement {\n  protected readonly _i18nController = addI18nController<\n    IgcCalendarResourceStrings | ICalendarResourceStrings\n  >(this, {\n    defaultEN: CalendarResourceStringsEN,\n    resourceMapName: 'calendar',\n  });\n\n  private _initialActiveDateSet = false;\n\n  protected get _hasValues(): boolean {\n    return this._values.length > 0;\n  }\n\n  /**\n   * The index of the first day of the week (Sunday = 0) as derived from {@link weekStart}.\n   *\n   * @remarks\n   * Derived on access instead of in `update()`, so that its consumers are not sensitive\n   * to the order in which the base class and its descendants update.\n   */\n  protected get _firstDayOfWeek(): number {\n    return getWeekDayNumber(this.weekStart);\n  }\n\n  protected get _isSingle(): boolean {\n    return this.selection === 'single';\n  }\n\n  protected get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  protected get _isRange(): boolean {\n    return this.selection === 'range';\n  }\n\n  @state()\n  protected _rangePreviewDate?: CalendarDay;\n\n  @state()\n  protected _activeDate = CalendarDay.today;\n\n  @state()\n  protected _value: CalendarDay | null = null;\n\n  @state()\n  protected _values: CalendarDay[] = [];\n\n  @state()\n  protected _specialDates: DateRangeDescriptor[] = [];\n\n  @state()\n  protected _disabledDates: DateRangeDescriptor[] = [];\n\n  /* blazorSuppress */\n  /**\n   * The current value of the calendar.\n   * Used when selection is set to single\n   *\n   * @attr value\n   */\n  @property({ converter: convertToDate })\n  public set value(value: Date | string | null | undefined) {\n    const converted = convertToDate(value);\n    this._value = converted ? CalendarDay.from(converted) : null;\n  }\n\n  public get value(): Date | null {\n    return this._value ? this._value.native : null;\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current values of the calendar.\n   * Used when selection is set to multiple or range.\n   *\n   * @attr values\n   */\n  @property({ converter: convertToDates })\n  public set values(values: (Date | string)[] | string | null | undefined) {\n    const converted = convertToDates(values);\n    this._values = converted ? converted.map((v) => CalendarDay.from(v)) : [];\n  }\n\n  public get values(): Date[] {\n    return this._values ? this._values.map((v) => v.native) : [];\n  }\n\n  /* blazorSuppress */\n  /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */\n  @property({ attribute: 'active-date', converter: convertToDate })\n  public set activeDate(value: Date | string | null | undefined) {\n    this._initialActiveDateSet = true;\n    const converted = convertToDate(value);\n    this._activeDate = converted\n      ? CalendarDay.from(converted)\n      : CalendarDay.today;\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate.native;\n  }\n\n  /**\n   * Sets the type of selection in the component.\n   * @attr selection\n   * @default single\n   */\n  @property()\n  public selection: CalendarSelection = 'single';\n\n  /**\n   * Whether to show the week numbers.\n   * @attr show-week-numbers\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /**\n   * Gets/Sets the first day of the week.\n   * @attr week-start\n   * @default sunday\n   */\n  @property({ attribute: 'week-start' })\n  public weekStart: WeekDays = 'sunday';\n\n  /**\n   * Gets/Sets the locale used for formatting and displaying the dates in the component.\n   * @attr locale\n   */\n  @property()\n  public set locale(value: string) {\n    this._i18nController.locale = value;\n  }\n\n  public get locale() {\n    return this._i18nController.locale;\n  }\n\n  /**\n   * The resource strings for localization.\n   */\n  @property({ attribute: false })\n  public set resourceStrings(\n    value: IgcCalendarResourceStrings | ICalendarResourceStrings\n  ) {\n    this._i18nController.resourceStrings = value;\n  }\n\n  public get resourceStrings(): IgcCalendarResourceStrings &\n    ICalendarResourceStrings {\n    return this._i18nController.resourceStrings;\n  }\n\n  /**\n   * Gets/Sets the special dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set specialDates(value: DateRangeDescriptor[] | undefined) {\n    this._specialDates = value ?? [];\n  }\n\n  public get specialDates(): DateRangeDescriptor[] | undefined {\n    return this._specialDates.length ? this._specialDates : undefined;\n  }\n\n  /**\n   * Gets/Sets the disabled dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set disabledDates(value: DateRangeDescriptor[] | undefined) {\n    this._disabledDates = value ?? [];\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] | undefined {\n    return this._disabledDates.length ? this._disabledDates : undefined;\n  }\n\n  /** @internal */\n  protected override update(props: PropertyValues): void {\n    if (props.has('selection') && this.hasUpdated) {\n      this._rangePreviewDate = undefined;\n      this._value = null;\n      this._values = [];\n    }\n\n    super.update(props);\n  }\n\n  /** @internal */\n  protected override firstUpdated(): void {\n    if (this._initialActiveDateSet) {\n      return;\n    }\n\n    if (this._isSingle) {\n      this.activeDate = this.value ?? this.activeDate;\n    } else {\n      this.activeDate = firstOf(this.values) ?? this.activeDate;\n    }\n  }\n}\n"]}

package/components/calendar/calendar.d.ts

@@ -1,11 +1,11 @@
 import { nothing, type TemplateResult } from 'lit';
-import type { Constructor } from '../common/mixins/constructor.js';
+import { CalendarDay } from '#internals/date/model.js';
+import type { Constructor } from '#internals/mixins/constructor.js';
 import type { ContentOrientation } from '../types.js';
 import { IgcCalendarBaseComponent } from './base.js';
-import { CalendarDay } from './model.js';
 import type { CalendarActiveView, CalendarHeaderOrientation, IgcCalendarComponentEventMap } from './types.js';
 export declare const focusActiveDate: unique symbol;
-declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCalendarComponentEventMap>> & Constructor<IgcCalendarBaseComponent>;
+declare const IgcCalendarComponent_base: Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcCalendarComponentEventMap>> & Constructor<IgcCalendarBaseComponent>;
 /**
  * Represents a calendar that lets users
  * to select a date value in a variety of different ways.
@@ -34,13 +34,18 @@ declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/ev
  * @csspart months-view - The months view element of the calendar.
  * @csspart years-view - The years view element of the calendar.
  * @csspart days-row - Days row element of the calendar.
+ * @csspart months-row - Months row element of the calendar.
+ * @csspart years-row - Years row element of the calendar.
  * @csspart label - Week header label element of the calendar.
+ * @csspart label-inner - Week header label inner element of the calendar.
  * @csspart week-number - Week number element of the calendar.
  * @csspart week-number-inner - Week number inner element of the calendar.
  * @csspart date - Date element of the calendar.
  * @csspart date-inner - Date inner element of the calendar.
  * @csspart first - The first selected date element of the calendar in range selection.
+ * Also applies to the week numbers header cell.
  * @csspart last - The last selected date element of the calendar in range selection.
+ * Also applies to the week number of the last rendered week.
  * @csspart inactive - Inactive date element of the calendar.
  * @csspart hidden - Hidden date element of the calendar.
  * @csspart weekend - Weekend date element of the calendar.
@@ -64,14 +69,16 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
     private get _isDayView();
     private get _isMonthView();
     private get _isYearView();
-    private get _previousButtonLabel();
-    private get _nextButtonLabel();
+    /** The accessible name of a navigation button, based on what it pages through. */
+    private _getNavigationLabel;
+    /** The unit and the amount a single navigation step covers in the current view. */
+    private _getPageStep;
     private _activeDaysViewIndex;
     private readonly _daysViews;
     private readonly _monthsView;
     private readonly _yearsView;
     /**
-     * Whether to show the dates that do not belong to the current active month.
+     * Whether to hide the dates that do not belong to the current active month.
      * @attr hide-outside-days
      * @default false
      */
@@ -118,28 +125,52 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
     private _handleShiftPageKeys;
     private _handleHomeKey;
     private _handleEndKey;
+    /**
+     * Moves the active date to the first or the last date of the current view, skipping
+     * over the disabled dates towards the middle of it.
+     */
+    private _activateEdgeOfView;
     private _handleMonthChange;
     private _handleYearChange;
     private _handleValueChange;
     private _handleActiveDateChange;
     private _handleRangePreviewChange;
+    /** Makes the month rendered by the view at `viewIndex` the active one. */
     private _setActiveDaysView;
     private _navigate;
     private _navigatePrevious;
     private _navigateNext;
     private _navigateToMonthView;
     private _navigateToYearView;
-    /** @private @hidden @internal */
+    /** @hidden @internal */
     [focusActiveDate](options?: FocusOptions): Promise<void>;
     private _updateViewIndex;
     private _getActiveDates;
+    /**
+     * Returns the first enabled date starting from `start` and moving day by day in the
+     * direction of `delta`.
+     *
+     * @remarks
+     * The search is bounded, since the disabled dates can describe an open-ended range
+     * which no date in the given direction satisfies. The current active date is returned
+     * when nothing is reachable.
+     */
     private _getNextEnabledDate;
     protected _renderNavigationButtons(): TemplateResult<1>;
     protected _renderMonthButtonNavigation(active: CalendarDay, viewIndex: number): TemplateResult;
     protected _renderYearButtonNavigation(active: CalendarDay, viewIndex: number): TemplateResult;
+    /**
+     * Renders the off screen live region announcing the period the calendar navigated to.
+     *
+     * @remarks
+     * A single region for the whole calendar - one per rendered month would announce the
+     * same navigation several times over. The years view has its visible years range as a
+     * live region of its own.
+     */
+    protected _renderActivePeriod(): TemplateResult<1> | typeof nothing;
     protected _renderYearRangeNavigation(active: CalendarDay): TemplateResult;
     protected _renderNavigation(date?: CalendarDay, showButtons?: boolean, viewIndex?: number): TemplateResult;
-    protected _renderHeader(): typeof nothing | TemplateResult<1>;
+    protected _renderHeader(): TemplateResult<1> | typeof nothing;
     protected _renderHeaderDateSingle(): TemplateResult;
     protected _renderHeaderDateRange(): TemplateResult;
     protected _renderHeaderDate(): TemplateResult;

package/components/calendar/calendar.js

@@ -9,22 +9,27 @@ import { html, nothing } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, pageDownKey, pageUpKey, shiftKey, } from '../common/controllers/key-bindings.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { partMap } from '../common/part-map.js';
-import { clamp, first, formatString, getElementFromPath, last, } from '../common/util.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, pageDownKey, pageUpKey, shiftKey, } from '#internals/controllers/key-bindings.js';
+import { CalendarDay } from '#internals/date/model.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { partMap } from '#internals/part-map.js';
+import { firstOf, lastOf } from '#internals/utils/arrays.js';
+import { getElementFromPath } from '#internals/utils/events.js';
+import { clamp } from '#internals/utils/math.js';
+import { formatString } from '#internals/utils/strings.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconComponent from '../icon/icon.js';
 import { IgcCalendarBaseComponent } from './base.js';
 import IgcDaysViewComponent from './days-view/days-view.js';
 import { areSameMonth, getYearRange, isDateInRanges, MONTHS_PER_ROW, YEARS_PER_PAGE, YEARS_PER_ROW, } from './helpers.js';
-import { CalendarDay } from './model.js';
 import IgcMonthsViewComponent from './months-view/months-view.js';
+import { selectDate } from './selection.js';
 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();
+const MAX_DISABLED_DATE_SKIP = 1000;
 export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarBaseComponent) {
     static { this.tagName = 'igc-calendar'; }
     static { this.styles = styles; }
@@ -40,29 +45,29 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
     get _isYearView() {
         return this.activeView === 'years';
     }
-    get _previousButtonLabel() {
+    _getNavigationLabel(direction) {
+        const isPrevious = direction === 'previous';
+        const strings = this.resourceStrings;
         switch (this.activeView) {
             case 'days':
-                return this.resourceStrings.calendar_previous_month;
+                return (isPrevious
+                    ? strings.calendar_previous_month
+                    : strings.calendar_next_month);
             case 'months':
-                return this.resourceStrings.calendar_previous_year;
+                return (isPrevious
+                    ? strings.calendar_previous_year
+                    : strings.calendar_next_year);
             case 'years':
-                return formatString(this.resourceStrings.calendar_previous_years, YEARS_PER_PAGE);
-            default:
-                return '';
+                return formatString((isPrevious
+                    ? strings.calendar_previous_years
+                    : strings.calendar_next_years), YEARS_PER_PAGE);
         }
     }
-    get _nextButtonLabel() {
-        switch (this.activeView) {
-            case 'days':
-                return this.resourceStrings.calendar_next_month;
-            case 'months':
-                return this.resourceStrings.calendar_next_year;
-            case 'years':
-                return formatString(this.resourceStrings.calendar_next_years, YEARS_PER_PAGE);
-            default:
-                return '';
-        }
+    _getPageStep(delta) {
+        return {
+            unit: this._isDayView ? 'month' : 'year',
+            increment: (this._isYearView ? YEARS_PER_PAGE : 1) * delta,
+        };
     }
     constructor() {
         super();
@@ -109,8 +114,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
         this[focusActiveDate]();
     }
     _handlePageKeys(delta) {
-        const unit = this._isDayView ? 'month' : 'year';
-        const increment = (this._isYearView ? YEARS_PER_PAGE : 1) * delta;
+        const { unit, increment } = this._getPageStep(delta);
         this._activeDate = this._getNextEnabledDate(this._activeDate.add(unit, increment), increment);
         this[focusActiveDate]();
     }
@@ -121,42 +125,36 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
         }
     }
     _handleHomeKey() {
-        switch (this.activeView) {
-            case 'days': {
-                const firstView = CalendarDay.from(this._daysViews.item(0).activeDate);
-                this._activeDate = this._getNextEnabledDate(firstView.set({ date: 1 }), 1);
-                this._activeDaysViewIndex = 0;
-                break;
-            }
-            case 'months':
-                this._activeDate = this._getNextEnabledDate(this._activeDate.set({ month: 0 }), 1);
-                break;
-            case 'years':
-                this._activeDate = this._getNextEnabledDate(this._activeDate.set({
-                    year: getYearRange(this._activeDate, YEARS_PER_PAGE).start,
-                }), 1);
-                break;
-        }
-        this[focusActiveDate]();
+        this._activateEdgeOfView('start');
     }
     _handleEndKey() {
+        this._activateEdgeOfView('end');
+    }
+    _activateEdgeOfView(edge) {
+        const isStart = edge === 'start';
+        const delta = isStart ? 1 : -1;
+        let target;
         switch (this.activeView) {
             case 'days': {
-                const index = this._daysViews.length - 1;
-                const lastView = CalendarDay.from(this._daysViews.item(index).activeDate);
-                this._activeDate = this._getNextEnabledDate(lastView.set({ month: lastView.month + 1, date: 0 }), -1);
+                const months = this._getActiveDates();
+                const index = isStart ? 0 : months.length - 1;
+                const month = months[index];
+                target = isStart
+                    ? month.set({ date: 1 })
+                    : month.set({ month: month.month + 1, date: 0 });
                 this._activeDaysViewIndex = index;
                 break;
             }
             case 'months':
-                this._activeDate = this._getNextEnabledDate(this._activeDate.set({ month: 11 }), -1);
+                target = this._activeDate.set({ month: isStart ? 0 : 11 });
                 break;
-            case 'years':
-                this._activeDate = this._getNextEnabledDate(this._activeDate.set({
-                    year: getYearRange(this._activeDate, YEARS_PER_PAGE).end,
-                }), -1);
+            case 'years': {
+                const { start, end } = getYearRange(this._activeDate, YEARS_PER_PAGE);
+                target = this._activeDate.set({ year: isStart ? start : end });
                 break;
+            }
         }
+        this._activeDate = this._getNextEnabledDate(target, delta);
         this[focusActiveDate]();
     }
     _handleMonthChange(event) {
@@ -173,23 +171,26 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
     }
     _handleValueChange(event) {
         event.stopPropagation();
-        const view = event.target;
-        if (this._isSingle) {
-            this.value = view.value;
-        }
-        else {
-            this.values = view.values;
+        const selection = selectDate({ value: this._value, values: this._values }, CalendarDay.from(event.detail), { selection: this.selection, disabledDates: this._disabledDates });
+        if (!selection) {
+            return;
         }
+        this._value = selection.value;
+        this._values = selection.values;
         this.emitEvent('igcChange', {
             detail: this._isSingle ? this.value : this.values,
         });
     }
     _handleActiveDateChange(event) {
         const view = event.target;
-        const views = Array.from(this._daysViews);
-        this._activeDaysViewIndex = views.indexOf(view);
+        const index = Array.from(this._daysViews).indexOf(view);
+        if (index < 0) {
+            return;
+        }
+        const renderedMonth = this._getActiveDates()[index];
+        this._activeDaysViewIndex = index;
         this.activeDate = event.detail;
-        if (!areSameMonth(this.activeDate, view.activeDate)) {
+        if (!areSameMonth(this._activeDate, renderedMonth)) {
             this[focusActiveDate]();
         }
     }
@@ -199,13 +200,11 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
             : undefined;
     }
     _setActiveDaysView(viewIndex) {
-        const view = this._daysViews.item(viewIndex);
-        this.activeDate = view.activeDate;
+        this.activeDate = this._getActiveDates()[viewIndex].native;
         this._activeDaysViewIndex = viewIndex;
     }
     _navigate(delta) {
-        const unit = this._isDayView ? 'month' : 'year';
-        const increment = (this._isYearView ? YEARS_PER_PAGE : 1) * delta;
+        const { unit, increment } = this._getPageStep(delta);
         this._activeDate = this._activeDate.add(unit, increment);
     }
     _navigatePrevious() {
@@ -256,11 +255,15 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
     }
     _getNextEnabledDate(start, delta) {
         const disabled = this._disabledDates;
-        let beginning = start.clone();
-        while (isDateInRanges(beginning, disabled)) {
-            beginning = beginning.add('day', delta);
+        const step = Math.sign(delta) || 1;
+        let current = start;
+        for (let i = 0; i <= MAX_DISABLED_DATE_SKIP; i++) {
+            if (!isDateInRanges(current, disabled)) {
+                return current;
+            }
+            current = current.add('day', step);
         }
-        return beginning;
+        return this._activeDate;
     }
     _renderNavigationButtons() {
         const parts = {
@@ -271,7 +274,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       <div part="navigation-buttons">
         <button
           part=${partMap(parts)}
-          aria-label=${this._previousButtonLabel}
+          aria-label=${this._getNavigationLabel('previous')}
           @click=${this._navigatePrevious}
         >
           <igc-icon
@@ -283,7 +286,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
 
         <button
           part=${partMap(parts)}
-          aria-label=${this._nextButtonLabel}
+          aria-label=${this._getNavigationLabel('next')}
           @click=${this._navigateNext}
         >
           <igc-icon
@@ -315,14 +318,8 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
     `;
     }
     _renderYearButtonNavigation(active, viewIndex) {
-        const { format } = getDateFormatter().getIntlFormatter(this.locale, {
-            month: 'long',
-            year: 'numeric',
-        });
         const ariaLabel = `${active.year}, ${this.resourceStrings.calendar_select_year}`;
-        const ariaSkip = this._isDayView ? format(active.native) : active.year;
         return html `
-      <span class="aria-off-screen" aria-live="polite">${ariaSkip}</span>
       <button
         part="years-navigation"
         aria-label=${ariaLabel}
@@ -332,6 +329,20 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       </button>
     `;
     }
+    _renderActivePeriod() {
+        if (this._isYearView) {
+            return nothing;
+        }
+        const { format } = getDateFormatter().getIntlFormatter(this.locale, {
+            month: 'long',
+            year: 'numeric',
+        });
+        return html `
+      <span class="aria-off-screen" aria-live="polite">
+        ${this._isDayView ? format(this._activeDate.native) : this._activeDate.year}
+      </span>
+    `;
+    }
     _renderYearRangeNavigation(active) {
         const { start, end } = getYearRange(active, YEARS_PER_PAGE);
         return html `
@@ -366,10 +377,10 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
             : this.resourceStrings.calendar_range_placeholder;
         return html `
       <div part="header">
-        <h5 part="header-title">
+        <div part="header-title">
           <slot name="title">${title}</slot>
-        </h5>
-        <h2 part="header-date">${this._renderHeaderDate()}</h2>
+        </div>
+        <div part="header-date">${this._renderHeaderDate()}</div>
       </div>
     `;
     }
@@ -395,10 +406,10 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
         });
         const { calendar_range_label_start, calendar_range_label_end } = this.resourceStrings;
         const start = this._hasValues
-            ? format(first(values))
+            ? format(firstOf(values))
             : calendar_range_label_start;
         const end = this._hasValues && values.length > 1
-            ? format(last(values))
+            ? format(lastOf(values))
             : calendar_range_label_end;
         return html `
       <slot name="header-date">
@@ -427,7 +438,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
             @igcActiveDateChange=${this._handleActiveDateChange}
             @igcRangePreviewDateChange=${this._handleRangePreviewChange}
             part="days-view"
-            exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, content-vertical, weekend, range, special, disabled, single, preview"
+            exportparts="days-row, label, label-inner, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, content-vertical, weekend, range, special, disabled, single, preview"
             .active=${this._activeDaysViewIndex === idx}
             .activeDate=${date.native}
             .disabledDates=${this.disabledDates}
@@ -454,7 +465,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       ${this._renderNavigation()}
       <igc-months-view
         part="months-view"
-        exportparts="month, selected, month-inner, current"
+        exportparts="months-row, month, selected, month-inner, current"
         @igcChange=${this._handleMonthChange}
         .value=${this.activeDate}
         .locale=${this.locale}
@@ -467,7 +478,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       ${this._renderNavigation()}
       <igc-years-view
         part="years-view"
-        exportparts="year, selected, year-inner, current"
+        exportparts="years-row, year, selected, year-inner, current"
         @igcChange=${this._handleYearChange}
         .value=${this.activeDate}
         .yearsPerPage=${YEARS_PER_PAGE}
@@ -480,7 +491,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
             'content-vertical': this._isDayView && this.orientation === 'vertical',
         };
         return html `
-      ${this._renderHeader()}
+      ${this._renderHeader()} ${this._renderActivePeriod()}
       <div ${ref(this._contentRef)} part=${partMap(parts)}>
         ${choose(this.activeView, [
             ['days', () => this._renderDaysView()],