@angular/material 14.1.0-next.1 → 14.1.0-rc.0

package/fesm2020/datepicker.mjs

@@ -2141,10 +2141,6 @@ class MatDatepickerContent extends _MatDatepickerContentBase {
         this._closeButtonText = intl.closeCalendarLabel;
     }
     ngOnInit() {
-        // If we have actions, clone the model so that we have the ability to cancel the selection,
-        // otherwise update the global model directly. Note that we want to assign this as soon as
-        // possible, but `_actionsPortal` isn't available in the constructor so we do it in `ngOnInit`.
-        this._model = this._actionsPortal ? this._globalModel.clone() : this._globalModel;
         this._animationState = this.datepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';
     }
     ngAfterViewInit() {
@@ -2192,6 +2188,23 @@ class MatDatepickerContent extends _MatDatepickerContentBase {
             this._globalModel.updateSelection(this._model.selection, this);
         }
     }
+    /**
+     * Assigns a new portal containing the datepicker actions.
+     * @param portal Portal with the actions to be assigned.
+     * @param forceRerender Whether a re-render of the portal should be triggered. This isn't
+     * necessary if the portal is assigned during initialization, but it may be required if it's
+     * added at a later point.
+     */
+    _assignActions(portal, forceRerender) {
+        // If we have actions, clone the model so that we have the ability to cancel the selection,
+        // otherwise update the global model directly. Note that we want to assign this as soon as
+        // possible, but `_actionsPortal` isn't available in the constructor so we do it in `ngOnInit`.
+        this._model = portal ? this._globalModel.clone() : this._globalModel;
+        this._actionsPortal = portal;
+        if (forceRerender) {
+            this._changeDetectorRef.detectChanges();
+        }
+    }
 }
 MatDatepickerContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MatDatepickerContent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MatDateSelectionModel }, { token: i1$1.DateAdapter }, { token: MAT_DATE_RANGE_SELECTION_STRATEGY, optional: true }, { token: MatDatepickerIntl }], target: i0.ɵɵFactoryTarget.Component });
 MatDatepickerContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: MatDatepickerContent, selector: "mat-datepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "@transformPanel": "_animationState", "class.mat-datepicker-content-touch": "datepicker.touchUi" }, classAttribute: "mat-datepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatCalendar, descendants: true }], exportAs: ["matDatepickerContent"], usesInheritance: true, ngImport: i0, template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n  class=\"mat-datepicker-content-container\"\n  [class.mat-datepicker-content-container-with-custom-header]=\"datepicker.calendarHeaderComponent\"\n  [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\">\n  <mat-calendar\n    [id]=\"datepicker.id\"\n    [ngClass]=\"datepicker.panelClass\"\n    [startAt]=\"datepicker.startAt\"\n    [startView]=\"datepicker.startView\"\n    [minDate]=\"datepicker._getMinDate()\"\n    [maxDate]=\"datepicker._getMaxDate()\"\n    [dateFilter]=\"datepicker._getDateFilter()\"\n    [headerComponent]=\"datepicker.calendarHeaderComponent\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker.dateClass\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [@fadeInCalendar]=\"'enter'\"\n    (yearSelected)=\"datepicker._selectYear($event)\"\n    (monthSelected)=\"datepicker._selectMonth($event)\"\n    (viewChanged)=\"datepicker._viewChanged($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\"></mat-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-datepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"datepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n", styles: [".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mat-datepicker-content-touch{display:block;max-height:80vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:788px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection"], exportAs: ["matCalendar"] }], animations: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -2398,6 +2411,7 @@ class MatDatepickerBase {
             throw Error('A MatDatepicker can only be associated with a single actions row.');
         }
         this._actionsPortal = portal;
+        this._componentRef?.instance._assignActions(portal, true);
     }
     /**
      * Removes a portal containing action buttons from the datepicker.
@@ -2406,6 +2420,7 @@ class MatDatepickerBase {
     removeActions(portal) {
         if (portal === this._actionsPortal) {
             this._actionsPortal = null;
+            this._componentRef?.instance._assignActions(null, true);
         }
     }
     /** Open the calendar. */
@@ -2463,8 +2478,8 @@ class MatDatepickerBase {
     _forwardContentValues(instance) {
         instance.datepicker = this;
         instance.color = this.color;
-        instance._actionsPortal = this._actionsPortal;
         instance._dialogLabelId = this.datepickerInput.getOverlayLabelId();
+        instance._assignActions(this._actionsPortal, false);
     }
     /** Opens the overlay with the calendar. */
     _openOverlay() {