igniteui-angular 17.2.0 → 17.2.1

package/fesm2022/igniteui-angular.mjs

@@ -394,10 +394,12 @@ class PlatformUtil {
         this.platformId = platformId;
         this.isBrowser = isPlatformBrowser(this.platformId);
         this.isIOS = this.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+        this.isSafari = this.isBrowser && /Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent);
         this.isFirefox = this.isBrowser && /Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent);
         this.isEdge = this.isBrowser && /Edge[\/\s](\d+\.\d+)/.test(navigator.userAgent);
         this.isChromium = this.isBrowser && (/Chrom|e?ium/g.test(navigator.userAgent) ||
             /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent);
+        this.browserVersion = this.isBrowser ? parseFloat(navigator.userAgent.match(/Version\/([\d.]+)/)?.at(1)) : 0;
         this.KEYMAP = mkenum({
             ENTER: 'Enter',
             SPACE: ' ',
@@ -8355,6 +8357,14 @@ class IgxButtonBaseDirective extends DisplayDensityBase {
      */
     onClick(ev) {
         this.buttonClick.emit(ev);
+        this.focused = false;
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    onBlur() {
+        this.focused = false;
     }
     /**
      * @hidden
@@ -8381,6 +8391,17 @@ class IgxButtonBaseDirective extends DisplayDensityBase {
          * ```
          */
         this.role = 'button';
+        /**
+         * Sets/gets whether the button component is on focus.
+         * Default value is `false`.
+         * ```typescript
+         * this.button.focus = true;
+         * ```
+         * ```typescript
+         * let isFocused =  this.button.focused;
+         * ```
+         */
+        this.focused = false;
         /**
           * Enables/disables the button.
           *
@@ -8391,6 +8412,15 @@ class IgxButtonBaseDirective extends DisplayDensityBase {
           */
         this.disabled = false;
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    updateOnKeyUp(event) {
+        if (event.key === "Tab") {
+            this.focused = true;
+        }
+    }
     /**
      * Returns the underlying DOM element.
      */
@@ -8398,7 +8428,7 @@ class IgxButtonBaseDirective extends DisplayDensityBase {
         return this.element.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxButtonBaseDirective, deps: [{ token: i0.ElementRef }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.4", type: IgxButtonBaseDirective, inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.role": "this.role", "class.igx-button--disabled": "this.disabled", "attr.disabled": "this.disabledAttribute" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.4", type: IgxButtonBaseDirective, inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "click": "onClick($event)", "blur": "onBlur()", "keyup": "updateOnKeyUp($event)" }, properties: { "attr.role": "this.role", "class.igx-button--focused": "this.focused", "class.igx-button--disabled": "this.disabled", "attr.disabled": "this.disabledAttribute" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxButtonBaseDirective, decorators: [{
             type: Directive
@@ -8415,6 +8445,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], focused: [{
+                type: HostBinding,
+                args: ['class.igx-button--focused']
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -8424,6 +8460,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }], disabledAttribute: [{
                 type: HostBinding,
                 args: ['attr.disabled']
+            }], updateOnKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
             }] } });
 
 const IgxButtonType = /*@__PURE__*/ mkenum({
@@ -8569,6 +8608,7 @@ class IgxButtonDirective extends IgxButtonBaseDirective {
      */
     deselect() {
         this.selected = false;
+        this.focused = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxButtonDirective, deps: [{ token: i0.ElementRef }, { token: DisplayDensityToken, optional: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.4", type: IgxButtonDirective, isStandalone: true, selector: "[igxButton]", inputs: { selected: ["selected", "selected", booleanAttribute], type: ["igxButton", "type"], label: ["igxLabel", "label"] }, outputs: { buttonSelected: "buttonSelected" }, host: { properties: { "class.igx-button": "this._cssClass", "class.igx-button--flat": "this.flat", "class.igx-button--contained": "this.contained", "class.igx-button--outlined": "this.outlined", "class.igx-button--fab": "this.fab", "style.--component-size": "this.componentSize" } }, usesInheritance: true, ngImport: i0 }); }
@@ -17447,6 +17487,11 @@ class IgxToggleDirective {
     get hiddenClass() {
         return this.collapsed;
     }
+    get hiddenWebkitClass() {
+        const isSafari = this.platform?.isSafari;
+        const browserVersion = this.platform?.browserVersion;
+        return this.collapsed && isSafari && !!browserVersion && browserVersion < 17.5;
+    }
     /**
      * @hidden
      */
@@ -17456,11 +17501,12 @@ class IgxToggleDirective {
     /**
      * @hidden
      */
-    constructor(elementRef, cdr, overlayService, navigationService) {
+    constructor(elementRef, cdr, overlayService, navigationService, platform) {
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.overlayService = overlayService;
         this.navigationService = navigationService;
+        this.platform = platform;
         /**
          * Emits an event after the toggle container is opened.
          *
@@ -17737,8 +17783,8 @@ class IgxToggleDirective {
             subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxOverlayService }, { token: IgxNavigationService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: IgxToggleDirective, isStandalone: true, selector: "[igxToggle]", inputs: { id: "id" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing", appended: "appended" }, host: { properties: { "class.igx-toggle--hidden": "this.hiddenClass", "attr.aria-hidden": "this.hiddenClass", "class.igx-toggle": "this.defaultClass" } }, exportAs: ["toggle"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxOverlayService }, { token: IgxNavigationService, optional: true }, { token: PlatformUtil, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: IgxToggleDirective, isStandalone: true, selector: "[igxToggle]", inputs: { id: "id" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing", appended: "appended" }, host: { properties: { "class.igx-toggle--hidden": "this.hiddenClass", "attr.aria-hidden": "this.hiddenClass", "class.igx-toggle--hidden-webkit": "this.hiddenWebkitClass", "class.igx-toggle": "this.defaultClass" } }, exportAs: ["toggle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxToggleDirective, decorators: [{
             type: Directive,
@@ -17752,6 +17798,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     args: [IgxOverlayService]
                 }] }, { type: IgxNavigationService, decorators: [{
                     type: Optional
+                }] }, { type: PlatformUtil, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { opened: [{
                 type: Output
             }], opening: [{
@@ -17770,6 +17818,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }, {
                 type: HostBinding,
                 args: ['attr.aria-hidden']
+            }], hiddenWebkitClass: [{
+                type: HostBinding,
+                args: ['class.igx-toggle--hidden-webkit']
             }], defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-toggle']
@@ -31649,6 +31700,26 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
             this.viewDate = CalendarDay.from(this.viewDate).add('year', 15).native;
         }
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    onActiveViewDecadeKB(date, event, activeViewIdx) {
+        super.activeViewDecadeKB(event, activeViewIdx);
+        if (this.platform.isActivationKey(event)) {
+            this.viewDate = date;
+            this.wrapper.nativeElement.focus();
+        }
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    onActiveViewDecade(event, date, activeViewIdx) {
+        event.preventDefault();
+        super.activeViewDecade(activeViewIdx);
+        this.viewDate = date;
+    }
     /**
      * @hidden
      */
@@ -31690,7 +31761,8 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
     selectYear(event) {
         this.previousViewDate = this.viewDate;
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
-        this.activeView = IgxCalendarView.Month;
+        this.activeView = IgxCalendarView.Year;
+        this.wrapper.nativeElement.focus();
     }
     /**
      * @hidden
@@ -31737,13 +31809,202 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
             });
         }
     }
+    onMouseDown(event) {
+        event.stopPropagation();
+        this.wrapper.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    set showActiveDay(value) {
+        this._showActiveDay = value;
+        this.cdr.detectChanges();
+    }
+    get showActiveDay() {
+        return this._showActiveDay;
+    }
+    get activeDescendant() {
+        if (this.activeView === 'month') {
+            return this.value?.getTime();
+        }
+        return this._activeDescendant ?? this.viewDate.getTime();
+    }
+    set activeDescendant(date) {
+        this._activeDescendant = date.getTime();
+    }
+    get isDefaultView() {
+        return this.activeView === IgxCalendarView.Year;
+    }
+    ngOnInit() {
+        this.activeView = IgxCalendarView.Year;
+    }
     ngAfterViewInit() {
+        this.keyboardNavigation
+            .attachKeyboardHandlers(this.wrapper, this)
+            .set("ArrowUp", this.onArrowUp)
+            .set("ArrowDown", this.onArrowDown)
+            .set("ArrowLeft", this.onArrowLeft)
+            .set("ArrowRight", this.onArrowRight)
+            .set("Enter", this.onEnter)
+            .set(" ", this.onEnter)
+            .set("Home", this.onHome)
+            .set("End", this.onEnd)
+            .set("PageUp", this.handlePageUp)
+            .set("PageDown", this.handlePageDown);
+        this.wrapper.nativeElement.addEventListener('focus', (event) => this.onWrapperFocus(event));
+        this.wrapper.nativeElement.addEventListener('blur', (event) => this.onWrapperBlur(event));
         this.activeView$.subscribe((view) => {
             this.activeViewChanged.emit(view);
+            this.viewDateChanged.emit({
+                previousValue: this.previousViewDate,
+                currentValue: this.viewDate
+            });
         });
     }
+    onWrapperFocus(event) {
+        event.stopPropagation();
+        this.showActiveDay = true;
+    }
+    onWrapperBlur(event) {
+        event.stopPropagation();
+        this.showActiveDay = false;
+        this._onTouchedCallback();
+    }
+    handlePageUpDown(event, delta) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDefaultView && event.shiftKey) {
+            this.viewDate = CalendarDay.from(this.viewDate).add('year', delta).native;
+            this.cdr.detectChanges();
+        }
+        else {
+            delta > 0 ? this.nextPage() : this.previousPage();
+        }
+    }
+    handlePageUp(event) {
+        this.handlePageUpDown(event, -1);
+    }
+    handlePageDown(event) {
+        this.handlePageUpDown(event, 1);
+    }
+    onArrowUp(event) {
+        if (this.isDefaultView) {
+            this.monthsView.onKeydownArrowUp(event);
+        }
+        if (this.isDecadeView) {
+            this.dacadeView.onKeydownArrowUp(event);
+        }
+    }
+    onArrowDown(event) {
+        if (this.isDefaultView) {
+            this.monthsView.onKeydownArrowDown(event);
+        }
+        if (this.isDecadeView) {
+            this.dacadeView.onKeydownArrowDown(event);
+        }
+    }
+    onArrowLeft(event) {
+        if (this.isDefaultView) {
+            this.monthsView.onKeydownArrowLeft(event);
+        }
+        if (this.isDecadeView) {
+            this.dacadeView.onKeydownArrowLeft(event);
+        }
+    }
+    onArrowRight(event) {
+        if (this.isDefaultView) {
+            this.monthsView.onKeydownArrowRight(event);
+        }
+        if (this.isDecadeView) {
+            this.dacadeView.onKeydownArrowRight(event);
+        }
+    }
+    onEnter(event) {
+        event.stopPropagation();
+        if (this.isDefaultView) {
+            this.monthsView.onKeydownEnter(event);
+        }
+        if (this.isDecadeView) {
+            this.dacadeView.onKeydownEnter(event);
+        }
+    }
+    onHome(event) {
+        event.stopPropagation();
+        if (this.isDefaultView) {
+            this.monthsView.onKeydownHome(event);
+        }
+        if (this.isDecadeView) {
+            this.dacadeView.onKeydownHome(event);
+        }
+    }
+    onEnd(event) {
+        event.stopPropagation();
+        if (this.isDefaultView) {
+            this.monthsView.onKeydownEnd(event);
+        }
+        if (this.isDecadeView) {
+            this.dacadeView.onKeydownEnd(event);
+        }
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    ngOnDestroy() {
+        this.keyboardNavigation.detachKeyboardHandlers();
+        this.wrapper?.nativeElement.removeEventListener('focus', this.onWrapperFocus);
+        this.wrapper?.nativeElement.removeEventListener('blur', this.onWrapperBlur);
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    getPrevYearDate(date) {
+        return CalendarDay.from(date).add('year', -1).native;
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    getNextYearDate(date) {
+        return CalendarDay.from(date).add('year', 1).native;
+    }
+    /**
+     * Getter for the context object inside the calendar templates.
+     *
+     * @hidden
+     * @internal
+     */
+    getContext(i) {
+        const date = CalendarDay.from(this.viewDate).add('month', i).native;
+        return this.generateContext(date, i);
+    }
+    /**
+     * Helper method building and returning the context object inside the calendar templates.
+     *
+     * @hidden
+     * @internal
+     */
+    generateContext(value, i) {
+        const construct = (date, index) => ({
+            index: index,
+            date,
+            ...formatToParts(date, this.locale, this.formatOptions, [
+                "era",
+                "year",
+                "month",
+                "day",
+                "weekday",
+            ]),
+        });
+        const formatObject = Array.isArray(value)
+            ? value.map((date, index) => construct(date, index))
+            : construct(value, i);
+        return { $implicit: formatObject };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxMonthPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxMonthPickerComponent, isStandalone: true, selector: "igx-month-picker", inputs: { id: "id" }, host: { listeners: { "keydown.pageup": "previousPage($event)", "keydown.pagedown": "nextPage($event)" }, properties: { "attr.id": "this.id", "class.igx-month-picker": "this.styleClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: IgxMonthPickerComponent, isStandalone: true, selector: "igx-month-picker", inputs: { id: "id" }, host: { listeners: { "keydown.pageup": "previousPage($event)", "keydown.pagedown": "nextPage($event)", "mousedown": "onMouseDown($event)" }, properties: { "attr.id": "this.id", "class.igx-month-picker": "this.styleClass" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -31753,7 +32014,7 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService
             },
-        ], viewQueries: [{ propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Picker Info -->\n\n<!-- Month -->\n<ng-template #defaultMonth>\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        aria-live=\"polite\"\n        class=\"igx-calendar-picker__date\"\n        (keydown)=\"activeViewDecadeKB($event)\"\n        (click)=\"activeViewDecade()\"\n    >\n        {{ formattedYear(viewDate) }}\n    </span>\n</ng-template>\n\n<!-- Years -->\n<ng-template #defaultYears>\n    <span>{{ getDecadeRange().start }}</span>\n    <span>&nbsp;-&nbsp;</span>\n    <span>{{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Picker Arrows -->\n\n<!-- Months -->\n<ng-template #calendarMonthPicker>\n    <section class=\"igx-calendar-picker\">\n        <div [style.width.%]=\"100\">\n            <ng-container *ngTemplateOutlet=\"defaultMonth\"></ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <div\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__prev\"\n                [attr.aria-label]=\"'Previous Year ' + getPreviousYear()\"\n                (click)=\"previousPage()\"\n                (keydown)=\"changePageKB($event, false)\"\n                data-action=\"prev\"\n            >\n                <igx-icon>keyboard_arrow_left</igx-icon>\n            </div>\n            <div\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__next\"\n                [attr.aria-label]=\"'Next Year ' + getNextYear()\"\n                (click)=\"nextPage()\"\n                (keydown)=\"changePageKB($event)\"\n                data-action=\"next\"\n            >\n                <igx-icon>keyboard_arrow_right</igx-icon>\n            </div>\n        </div>\n    </section>\n</ng-template>\n\n<!-- Years -->\n<ng-template #calendarYearsPicker>\n    <section class=\"igx-calendar-picker\">\n        <div [style.width.%]=\"100\">\n            <ng-container *ngTemplateOutlet=\"defaultYears\"></ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__prev\"\n                role=\"button\"\n                data-action=\"prev\"\n                (click)=\"previousPage()\"\n                (keydown)=\"changePageKB($event, false)\"\n                data-action=\"prev\"\n            >\n                <igx-icon aria-hidden=\"true\">keyboard_arrow_left</igx-icon>\n            </div>\n            <div\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__next\"\n                role=\"button\"\n                data-action=\"next\"\n                (click)=\"nextPage()\"\n                (keydown)=\"changePageKB($event)\"\n                data-action=\"next\"\n            >\n                <igx-icon aria-hidden=\"true\">keyboard_arrow_right</igx-icon>\n            </div>\n        </div>\n    </section>\n</ng-template>\n\n<!-- Outlets -->\n\n<!-- Months -->\n<div\n    *ngIf=\"isDefaultView\"\n    class=\"igx-months-view__body\"\n    (swiperight)=\"previousPage()\"\n    (swipeleft)=\"nextPage()\"\n>\n    <ng-container *ngTemplateOutlet=\"calendarMonthPicker\"></ng-container>\n    <igx-months-view\n        #months\n        [date]=\"viewDate\"\n        [locale]=\"locale\"\n        [formatView]=\"formatViews.month\"\n        [monthFormat]=\"formatOptions.month\"\n        (selected)=\"selectMonth($event)\"\n        (pageChanged)=\"updateDate($event)\"\n    >\n    </igx-months-view>\n</div>\n\n<!-- Years -->\n<div *ngIf=\"isDecadeView\">\n    <ng-container *ngTemplateOutlet=\"calendarYearsPicker\"></ng-container>\n    <igx-years-view\n        #decade\n        *ngIf=\"isDecadeView\"\n        [date]=\"viewDate\"\n        [locale]=\"locale\"\n        [formatView]=\"formatViews.year\"\n        [yearFormat]=\"formatOptions.year\"\n        (selected)=\"selectYear($event)\"\n        (pageChanged)=\"updateDate($event)\"\n    >\n    </igx-years-view>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }] }); }
+        ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\">keyboard_arrow_left</igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\">keyboard_arrow_right</igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    <span *ngIf=\"activeView === 'year'\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isDecadeView\">\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        </ng-container>\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        <ng-container *ngIf=\"isDefaultView\">\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        </ng-container>\n\n        <ng-container *ngIf=\"isDecadeView\">\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        </ng-container>\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
             type: Component,
@@ -31771,15 +32032,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgIf,
                         NgStyle,
                         NgTemplateOutlet,
+                        DatePipe,
                         IgxIconComponent,
                         IgxMonthsViewComponent,
                         IgxYearsViewComponent,
-                    ], template: "<!-- Picker Info -->\n\n<!-- Month -->\n<ng-template #defaultMonth>\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        aria-live=\"polite\"\n        class=\"igx-calendar-picker__date\"\n        (keydown)=\"activeViewDecadeKB($event)\"\n        (click)=\"activeViewDecade()\"\n    >\n        {{ formattedYear(viewDate) }}\n    </span>\n</ng-template>\n\n<!-- Years -->\n<ng-template #defaultYears>\n    <span>{{ getDecadeRange().start }}</span>\n    <span>&nbsp;-&nbsp;</span>\n    <span>{{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Picker Arrows -->\n\n<!-- Months -->\n<ng-template #calendarMonthPicker>\n    <section class=\"igx-calendar-picker\">\n        <div [style.width.%]=\"100\">\n            <ng-container *ngTemplateOutlet=\"defaultMonth\"></ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <div\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__prev\"\n                [attr.aria-label]=\"'Previous Year ' + getPreviousYear()\"\n                (click)=\"previousPage()\"\n                (keydown)=\"changePageKB($event, false)\"\n                data-action=\"prev\"\n            >\n                <igx-icon>keyboard_arrow_left</igx-icon>\n            </div>\n            <div\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__next\"\n                [attr.aria-label]=\"'Next Year ' + getNextYear()\"\n                (click)=\"nextPage()\"\n                (keydown)=\"changePageKB($event)\"\n                data-action=\"next\"\n            >\n                <igx-icon>keyboard_arrow_right</igx-icon>\n            </div>\n        </div>\n    </section>\n</ng-template>\n\n<!-- Years -->\n<ng-template #calendarYearsPicker>\n    <section class=\"igx-calendar-picker\">\n        <div [style.width.%]=\"100\">\n            <ng-container *ngTemplateOutlet=\"defaultYears\"></ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__prev\"\n                role=\"button\"\n                data-action=\"prev\"\n                (click)=\"previousPage()\"\n                (keydown)=\"changePageKB($event, false)\"\n                data-action=\"prev\"\n            >\n                <igx-icon aria-hidden=\"true\">keyboard_arrow_left</igx-icon>\n            </div>\n            <div\n                tabindex=\"0\"\n                class=\"igx-calendar-picker__next\"\n                role=\"button\"\n                data-action=\"next\"\n                (click)=\"nextPage()\"\n                (keydown)=\"changePageKB($event)\"\n                data-action=\"next\"\n            >\n                <igx-icon aria-hidden=\"true\">keyboard_arrow_right</igx-icon>\n            </div>\n        </div>\n    </section>\n</ng-template>\n\n<!-- Outlets -->\n\n<!-- Months -->\n<div\n    *ngIf=\"isDefaultView\"\n    class=\"igx-months-view__body\"\n    (swiperight)=\"previousPage()\"\n    (swipeleft)=\"nextPage()\"\n>\n    <ng-container *ngTemplateOutlet=\"calendarMonthPicker\"></ng-container>\n    <igx-months-view\n        #months\n        [date]=\"viewDate\"\n        [locale]=\"locale\"\n        [formatView]=\"formatViews.month\"\n        [monthFormat]=\"formatOptions.month\"\n        (selected)=\"selectMonth($event)\"\n        (pageChanged)=\"updateDate($event)\"\n    >\n    </igx-months-view>\n</div>\n\n<!-- Years -->\n<div *ngIf=\"isDecadeView\">\n    <ng-container *ngTemplateOutlet=\"calendarYearsPicker\"></ng-container>\n    <igx-years-view\n        #decade\n        *ngIf=\"isDecadeView\"\n        [date]=\"viewDate\"\n        [locale]=\"locale\"\n        [formatView]=\"formatViews.year\"\n        [yearFormat]=\"formatOptions.year\"\n        (selected)=\"selectYear($event)\"\n        (pageChanged)=\"updateDate($event)\"\n    >\n    </igx-years-view>\n</div>\n" }]
+                    ], template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\">keyboard_arrow_left</igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\">keyboard_arrow_right</igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    <span *ngIf=\"activeView === 'year'\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isDecadeView\">\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        </ng-container>\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        <ng-container *ngIf=\"isDefaultView\">\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        </ng-container>\n\n        <ng-container *ngIf=\"isDecadeView\">\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        </ng-container>\n    </section>\n</div>\n" }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ["attr.id"]
             }, {
                 type: Input
+            }], wrapper: [{
+                type: ViewChild,
+                args: ["wrapper"]
             }], styleClass: [{
                 type: HostBinding,
                 args: ["class.igx-month-picker"]
@@ -31801,6 +32066,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }], nextPage: [{
                 type: HostListener,
                 args: ["keydown.pagedown", ["$event"]]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
             }] } });
 
 /* NOTE: Calendar directives collection for ease-of-use import in standalone components scenario */