@clr/angular 13.5.0 → 13.8.0

package/fesm2020/clr-angular.mjs

@@ -328,6 +328,7 @@ const commonStringsDefault = {
     datepickerCurrentDecade: 'Current decade',
     datepickerSelectMonthText: 'Select month, the current month is {CALENDAR_MONTH}',
     datepickerSelectYearText: 'Select year, the current year is {CALENDAR_YEAR}',
+    datepickerSelectedLabel: '{FULL_DATE} - Selected',
     // Stack View
     stackViewChanged: 'Value changed.',
     // Responsive Nav
@@ -8085,21 +8086,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDay {
-    constructor(_dateNavigationService, _toggleService, dateFormControlService) {
+    constructor(_dateNavigationService, _toggleService, dateFormControlService, commonStrings) {
         this._dateNavigationService = _dateNavigationService;
         this._toggleService = _toggleService;
         this.dateFormControlService = dateFormControlService;
+        this.commonStrings = commonStrings;
     }
     /**
      * DayViewModel input which is used to build the Day View.
      */
     set dayView(day) {
         this._dayView = day;
-        this.dayString = this._dayView.dayModel.toDateString();
     }
     get dayView() {
         return this._dayView;
     }
+    get dayString() {
+        return this.dayView.isSelected
+            ? this.commonStrings.parse(this.commonStrings.keys.datepickerSelectedLabel, {
+                FULL_DATE: this._dayView.dayModel.toDateString(),
+            })
+            : this._dayView.dayModel.toDateString();
+    }
     /**
      * Updates the focusedDay in the DateNavigationService when the ClrDay is focused.
      */
@@ -8116,7 +8124,7 @@ class ClrDay {
         this._toggleService.open = false;
     }
 }
-ClrDay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDay, deps: [{ token: DateNavigationService }, { token: ClrPopoverToggleService }, { token: DateFormControlService }], target: i0.ɵɵFactoryTarget.Component });
+ClrDay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDay, deps: [{ token: DateNavigationService }, { token: ClrPopoverToggleService }, { token: DateFormControlService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
 ClrDay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDay, selector: "clr-day", inputs: { dayView: ["clrDayView", "dayView"] }, host: { properties: { "class.day": "true" } }, ngImport: i0, template: `
     <button
       class="day-btn"
@@ -8128,6 +8136,7 @@ ClrDay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.
       [attr.tabindex]="dayView.tabIndex"
       (click)="selectDay()"
       (focus)="onDayViewFocus()"
+      [attr.aria-current]="dayView.isTodaysDate ? 'date' : 'false'"
       [attr.aria-label]="dayString"
       [attr.aria-selected]="dayView.isSelected"
     >
@@ -8149,6 +8158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
       [attr.tabindex]="dayView.tabIndex"
       (click)="selectDay()"
       (focus)="onDayViewFocus()"
+      [attr.aria-current]="dayView.isTodaysDate ? 'date' : 'false'"
       [attr.aria-label]="dayString"
       [attr.aria-selected]="dayView.isSelected"
     >
@@ -8157,7 +8167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
   `,
                     host: { '[class.day]': 'true' },
                 }]
-        }], ctorParameters: function () { return [{ type: DateNavigationService }, { type: ClrPopoverToggleService }, { type: DateFormControlService }]; }, propDecorators: { dayView: [{
+        }], ctorParameters: function () { return [{ type: DateNavigationService }, { type: ClrPopoverToggleService }, { type: DateFormControlService }, { type: ClrCommonStringsService }]; }, propDecorators: { dayView: [{
                 type: Input,
                 args: ['clrDayView']
             }] } });
@@ -17189,6 +17199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 class ClrDatagridPageSize {
     constructor(page) {
         this.page = page;
+        this.pageSizeOptionsId = uniqueIdFactory();
     }
     ngOnInit() {
         if (!this.pageSizeOptions || this.pageSizeOptions.length === 0) {
@@ -17197,10 +17208,10 @@ class ClrDatagridPageSize {
     }
 }
 ClrDatagridPageSize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ClrDatagridPageSize, deps: [{ token: Page }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridPageSize.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridPageSize, selector: "clr-dg-page-size", inputs: { pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"] }, ngImport: i0, template: `
+ClrDatagridPageSize.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ClrDatagridPageSize, selector: "clr-dg-page-size", inputs: { pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeOptionsId: ["clrPageSizeOptionsId", "pageSizeOptionsId"] }, ngImport: i0, template: `
     <ng-content></ng-content>
     <div class="clr-select-wrapper">
-      <select [class.clr-page-size-select]="true" [(ngModel)]="page.size">
+      <select [id]="pageSizeOptionsId" [class.clr-page-size-select]="true" [(ngModel)]="page.size">
         <option *ngFor="let option of pageSizeOptions" [ngValue]="option">{{ option }}</option>
       </select>
     </div>
@@ -17212,7 +17223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     template: `
     <ng-content></ng-content>
     <div class="clr-select-wrapper">
-      <select [class.clr-page-size-select]="true" [(ngModel)]="page.size">
+      <select [id]="pageSizeOptionsId" [class.clr-page-size-select]="true" [(ngModel)]="page.size">
         <option *ngFor="let option of pageSizeOptions" [ngValue]="option">{{ option }}</option>
       </select>
     </div>
@@ -17221,6 +17232,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }], ctorParameters: function () { return [{ type: Page }]; }, propDecorators: { pageSizeOptions: [{
                 type: Input,
                 args: ['clrPageSizeOptions']
+            }], pageSizeOptionsId: [{
+                type: Input,
+                args: ['clrPageSizeOptionsId']
             }] } });
 
 /*