From 70bf63291cb3f652d264831ad5c91d5acd482093 Mon Sep 17 00:00:00 2001 From: GiftLanga Date: Thu, 15 Aug 2024 14:19:33 +0200 Subject: [PATCH] fix(material/datepicker): Add a custom icon template for the calendar header Adds an ng-template in the mat header period button icon. Fixes #29515. --- src/dev-app/datepicker/datepicker-demo.ts | 7 ++++++- src/material/datepicker/calendar-header.html | 14 ++++++++++---- src/material/datepicker/calendar.ts | 16 +++++++++++++++- src/material/datepicker/datepicker-module.ts | 4 +++- tools/public_api_guard/material/datepicker.md | 17 +++++++++++++++-- 5 files changed, 49 insertions(+), 9 deletions(-) diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts index c086e7d2935c..5155bbee6176 100644 --- a/src/dev-app/datepicker/datepicker-demo.ts +++ b/src/dev-app/datepicker/datepicker-demo.ts @@ -151,10 +151,15 @@ export class CustomHeader implements OnDestroy { template: ` + + arrow_drop_down + `, standalone: true, - imports: [MatDatepickerModule], + imports: [MatDatepickerModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CustomHeaderNgContent { diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html index d6cc038e68ed..95a09d34d5d5 100644 --- a/src/material/datepicker/calendar-header.html +++ b/src/material/datepicker/calendar-header.html @@ -8,10 +8,16 @@ (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel" [attr.aria-describedby]="_periodButtonLabelId"> - + @if(!_customPeriodButtonIcon) { + + } @else { + + } +
diff --git a/src/material/datepicker/calendar.ts b/src/material/datepicker/calendar.ts index 44aa938c3147..a3ff7b8795cf 100644 --- a/src/material/datepicker/calendar.ts +++ b/src/material/datepicker/calendar.ts @@ -13,6 +13,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + ContentChild, + Directive, EventEmitter, forwardRef, Inject, @@ -23,6 +25,7 @@ import { Output, SimpleChange, SimpleChanges, + TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core'; @@ -42,6 +45,7 @@ import {MatYearView} from './year-view'; import {MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from './date-selection-model'; import {MatIconButton, MatButton} from '@angular/material/button'; import {CdkMonitorFocus} from '@angular/cdk/a11y'; +import {CommonModule} from '@angular/common'; let calendarHeaderId = 1; @@ -51,6 +55,14 @@ let calendarHeaderId = 1; */ export type MatCalendarView = 'month' | 'year' | 'multi-year'; +@Directive({ + selector: '[periodButtonIcon]', + standalone: true, +}) +export class MatCalendarHeaderPeriodButtonIcon { + constructor(public templateRef: TemplateRef) {} +} + /** Default header for MatCalendar */ @Component({ selector: 'mat-calendar-header', @@ -59,9 +71,11 @@ export type MatCalendarView = 'month' | 'year' | 'multi-year'; encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, - imports: [MatButton, MatIconButton], + imports: [MatButton, MatIconButton, CommonModule], }) export class MatCalendarHeader { + @ContentChild(MatCalendarHeaderPeriodButtonIcon) + _customPeriodButtonIcon: MatCalendarHeaderPeriodButtonIcon; constructor( private _intl: MatDatepickerIntl, @Inject(forwardRef(() => MatCalendar)) public calendar: MatCalendar, diff --git a/src/material/datepicker/datepicker-module.ts b/src/material/datepicker/datepicker-module.ts index 80beececef5f..953887ddeba7 100644 --- a/src/material/datepicker/datepicker-module.ts +++ b/src/material/datepicker/datepicker-module.ts @@ -14,7 +14,7 @@ import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {CdkScrollableModule} from '@angular/cdk/scrolling'; import {MatCommonModule} from '@angular/material/core'; -import {MatCalendar, MatCalendarHeader} from './calendar'; +import {MatCalendar, MatCalendarHeader, MatCalendarHeaderPeriodButtonIcon} from './calendar'; import {MatCalendarBody} from './calendar-body'; import {MatDatepicker} from './datepicker'; import { @@ -51,6 +51,7 @@ import {MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel} from './d MatYearView, MatMultiYearView, MatCalendarHeader, + MatCalendarHeaderPeriodButtonIcon, MatDateRangeInput, MatStartDate, MatEndDate, @@ -72,6 +73,7 @@ import {MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel} from './d MatYearView, MatMultiYearView, MatCalendarHeader, + MatCalendarHeaderPeriodButtonIcon, MatDateRangeInput, MatStartDate, MatEndDate, diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md index 8b1ed1385618..109027b2712f 100644 --- a/tools/public_api_guard/material/datepicker.md +++ b/tools/public_api_guard/material/datepicker.md @@ -292,6 +292,8 @@ export class MatCalendarHeader { // (undocumented) calendar: MatCalendar; currentPeriodClicked(): void; + // (undocumented) + _customPeriodButtonIcon: MatCalendarHeaderPeriodButtonIcon; get nextButtonLabel(): string; nextClicked(): void; nextEnabled(): boolean; @@ -304,11 +306,22 @@ export class MatCalendarHeader { previousClicked(): void; previousEnabled(): boolean; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-calendar-header", ["matCalendarHeader"], {}, {}, never, ["*"], true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-calendar-header", ["matCalendarHeader"], {}, {}, ["_customPeriodButtonIcon"], ["*"], true, never>; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration, [null, null, { optional: true; }, { optional: true; }, null]>; } +// @public (undocumented) +export class MatCalendarHeaderPeriodButtonIcon { + constructor(templateRef: TemplateRef); + // (undocumented) + templateRef: TemplateRef; + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + // @public export interface MatCalendarUserEvent { // (undocumented) @@ -516,7 +529,7 @@ export class MatDatepickerModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public