@apexara/ng-components 1.0.5 → 1.0.6-test.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/README.md +298 -25
  2. package/fesm2022/apexara-ng-components-checkbox.mjs +53 -11
  3. package/fesm2022/apexara-ng-components-checkbox.mjs.map +1 -1
  4. package/fesm2022/apexara-ng-components-chip.mjs +5 -2
  5. package/fesm2022/apexara-ng-components-chip.mjs.map +1 -1
  6. package/fesm2022/apexara-ng-components-datepicker.mjs +65 -70
  7. package/fesm2022/apexara-ng-components-datepicker.mjs.map +1 -1
  8. package/fesm2022/apexara-ng-components-dialog.mjs +2 -2
  9. package/fesm2022/apexara-ng-components-dialog.mjs.map +1 -1
  10. package/fesm2022/apexara-ng-components-drawer.mjs +12 -22
  11. package/fesm2022/apexara-ng-components-drawer.mjs.map +1 -1
  12. package/fesm2022/apexara-ng-components-expander.mjs +3 -15
  13. package/fesm2022/apexara-ng-components-expander.mjs.map +1 -1
  14. package/fesm2022/apexara-ng-components-image.mjs +3 -5
  15. package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
  16. package/fesm2022/apexara-ng-components-input.mjs +19 -19
  17. package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
  18. package/fesm2022/apexara-ng-components-listbox.mjs +41 -33
  19. package/fesm2022/apexara-ng-components-listbox.mjs.map +1 -1
  20. package/fesm2022/apexara-ng-components-more-options.mjs +132 -0
  21. package/fesm2022/apexara-ng-components-more-options.mjs.map +1 -0
  22. package/fesm2022/apexara-ng-components-radiobutton.mjs +2 -2
  23. package/fesm2022/apexara-ng-components-radiobutton.mjs.map +1 -1
  24. package/fesm2022/apexara-ng-components-select.mjs +96 -79
  25. package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
  26. package/fesm2022/apexara-ng-components-snackbar.mjs +2 -44
  27. package/fesm2022/apexara-ng-components-snackbar.mjs.map +1 -1
  28. package/fesm2022/apexara-ng-components-table.mjs +175 -102
  29. package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
  30. package/fesm2022/apexara-ng-components-textarea.mjs +20 -17
  31. package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
  32. package/package.json +5 -2
  33. package/types/apexara-ng-components-checkbox.d.ts +17 -8
  34. package/types/apexara-ng-components-chip.d.ts +7 -1
  35. package/types/apexara-ng-components-datepicker.d.ts +4 -6
  36. package/types/apexara-ng-components-drawer.d.ts +3 -4
  37. package/types/apexara-ng-components-image.d.ts +2 -3
  38. package/types/apexara-ng-components-input.d.ts +6 -8
  39. package/types/apexara-ng-components-listbox.d.ts +7 -8
  40. package/types/apexara-ng-components-more-options.d.ts +34 -0
  41. package/types/apexara-ng-components-select.d.ts +13 -10
  42. package/types/apexara-ng-components-snackbar.d.ts +0 -3
  43. package/types/apexara-ng-components-table.d.ts +46 -23
  44. package/types/apexara-ng-components-textarea.d.ts +6 -8
package/fesm2022/apexara-ng-components-chip.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { EventEmitter, Output, Input, Component } from '@angular/core';
3
+ import { ApexImageComponent } from '@apexara/ng-components/image';
3
4
 
4
5
  class ApexChipComponent {
5
6
  constructor() {
@@ -7,13 +8,15 @@ class ApexChipComponent {
7
8
  this.closeChange = new EventEmitter();
8
9
  }
9
10
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexChipComponent, isStandalone: true, selector: "apex-chip", inputs: { closeIcon: "closeIcon" }, outputs: { closeChange: "closeChange" }, ngImport: i0, template: "<div class=\"container\">\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:28px;display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border-radius:28px;padding:6px 12px}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"] }); }
11
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexChipComponent, isStandalone: true, selector: "apex-chip", inputs: { closeIcon: "closeIcon", options: "options" }, outputs: { closeChange: "closeChange" }, ngImport: i0, template: "<div class=\"container\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:var(--apex-chip-height, 28px);display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border:var(--apex-chip-border-width, 0px) solid var(--apex-chip-border-color, transparent);border-radius:var(--apex-chip-border-radius, 28px);padding:var(--apex-chip-padding, 6px 12px)}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.icon{width:var(--apex-chip-icon-size, 16px);height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.right{margin-left:var(--apex-chip-icon-spacing, 6px)}.icon.left{margin-right:var(--apex-chip-icon-spacing, 6px)}.icon apex-img{max-width:var(--apex-chip-icon-size, 16px);max-height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-chip-left-icon-fill, #FFFFFF);stroke:var(--apex-chip-left-icon-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-chip-right-icon-fill, #FFFFFF);stroke:var(--apex-chip-right-icon-stroke, #ffffff00)}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"], dependencies: [{ kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }] }); }
11
12
  }
12
13
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexChipComponent, decorators: [{
13
14
  type: Component,
14
- args: [{ selector: 'apex-chip', template: "<div class=\"container\">\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:28px;display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border-radius:28px;padding:6px 12px}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"] }]
15
+ args: [{ selector: 'apex-chip', imports: [ApexImageComponent], template: "<div class=\"container\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{width:fit-content;max-width:100%;height:var(--apex-chip-height, 28px);display:flex;align-items:center;color:var(--apex-chip-color, #FFFFFF);background-color:var(--apex-chip-background-color, #0B1222);font-size:var(--apex-chip-font-size, 12px);font-weight:600;box-sizing:border-box;border:var(--apex-chip-border-width, 0px) solid var(--apex-chip-border-color, transparent);border-radius:var(--apex-chip-border-radius, 28px);padding:var(--apex-chip-padding, 6px 12px)}.container span{max-width:100%;display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.icon{width:var(--apex-chip-icon-size, 16px);height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.right{margin-left:var(--apex-chip-icon-spacing, 6px)}.icon.left{margin-right:var(--apex-chip-icon-spacing, 6px)}.icon apex-img{max-width:var(--apex-chip-icon-size, 16px);max-height:var(--apex-chip-icon-size, 16px);display:flex;justify-content:center;align-items:center}.icon.left apex-img path{fill:var(--apex-chip-left-icon-fill, #FFFFFF);stroke:var(--apex-chip-left-icon-stroke, #ffffff00)}.icon.right apex-img path{fill:var(--apex-chip-right-icon-fill, #FFFFFF);stroke:var(--apex-chip-right-icon-stroke, #ffffff00)}svg{min-width:16px;margin-left:6px;cursor:pointer}svg path{fill:var(--apex-chip-icon-color, #FFFFFF)}\n"] }]
15
16
  }], propDecorators: { closeIcon: [{
16
17
  type: Input
18
+ }], options: [{
19
+ type: Input
17
20
  }], closeChange: [{
18
21
  type: Output
19
22
  }] } });
package/fesm2022/apexara-ng-components-chip.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"apexara-ng-components-chip.mjs","sources":["../../../../projects/apexara/ng-components/chip/src/chip.component.ts","../../../../projects/apexara/ng-components/chip/src/chip.component.html","../../../../projects/apexara/ng-components/chip/apexara-ng-components-chip.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'apex-chip',\n templateUrl: './chip.component.html',\n styleUrls: ['./chip.component.css'],\n})\n\nexport class ApexChipComponent {\n\n @Input() closeIcon = false;\n\n @Output() closeChange = new EventEmitter<void>();\n\n}\n","<div class=\"container\">\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAQa,iBAAiB,CAAA;AAN9B,IAAA,WAAA,GAAA;QAQW,IAAA,CAAA,SAAS,GAAG,KAAK;AAEhB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAEjD,IAAA;8GANY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,kJCR9B,wcAWA,EAAA,MAAA,EAAA,CAAA,ojBAAA,CAAA,EAAA,CAAA,CAAA;;2FDHa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;+BACE,WAAW,EAAA,QAAA,EAAA,wcAAA,EAAA,MAAA,EAAA,CAAA,ojBAAA,CAAA,EAAA;;sBAOpB;;sBAEA;;;AEZH;;AAEG;;;;"}
1
+ {"version":3,"file":"apexara-ng-components-chip.mjs","sources":["../../../../projects/apexara/ng-components/chip/src/chip.component.ts","../../../../projects/apexara/ng-components/chip/src/chip.component.html","../../../../projects/apexara/ng-components/chip/apexara-ng-components-chip.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nimport { ApexImageComponent } from '@apexara/ng-components/image';\n\nexport interface ApexChipOptions {\n iconLeft?: string;\n iconRight?: string;\n}\n\n@Component({\n selector: 'apex-chip',\n templateUrl: './chip.component.html',\n styleUrls: ['./chip.component.css'],\n imports: [ApexImageComponent],\n})\n\nexport class ApexChipComponent {\n\n @Input() closeIcon = false;\n\n @Input() options!: ApexChipOptions;\n\n @Output() closeChange = new EventEmitter<void>();\n\n}\n","<div class=\"container\">\n @if (options && options.iconLeft) {\n <div class=\"icon left\">\n <apex-img [src]=\"'assets/img/' + options.iconLeft\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n <span>\n <ng-content></ng-content>\n </span>\n\n @if (options && options.iconRight) {\n <div class=\"icon right\">\n <apex-img [src]=\"'assets/img/' + options.iconRight\" [alt]=\"'Chip icon.'\"></apex-img>\n </div>\n }\n\n @if (closeIcon) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" (click)=\"closeChange.emit()\">\n <path d=\"m8.7 8 4.15-4.15a.5.5 0 0 0-.7-.7L8 7.29 3.85 3.15a.5.5 0 0 0-.7.7L7.29 8l-4.14 4.15a.5.5 0 1 0 .7.7L8 8.71l4.15 4.14a.5.5 0 0 0 .7-.7L8.71 8Z\" fill=\"#FFFFFF\"/>\n </svg>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAgBa,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,SAAS,GAAG,KAAK;AAIhB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAEjD,IAAA;8GARY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB9B,q3BAuBA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,kBAAkB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;+BACE,WAAW,EAAA,OAAA,EAGZ,CAAC,kBAAkB,CAAC,EAAA,QAAA,EAAA,q3BAAA,EAAA,MAAA,EAAA,CAAA,03CAAA,CAAA,EAAA;;sBAK5B;;sBAEA;;sBAEA;;;AEtBH;;AAEG;;;;"}
package/fesm2022/apexara-ng-components-datepicker.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, Injectable, ViewChild, HostListener } from '@angular/core';
3
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
2
+ import { EventEmitter, Output, Input, Component, Injectable, ViewChild, signal, HostListener } from '@angular/core';
3
+ import { FormsModule, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';
4
+ import { filter } from 'rxjs';
4
5
  import * as i1$1 from '@apexara/ng-components/services';
5
6
  import { MobileOS } from '@apexara/ng-components/services';
6
7
  import { ApexButtonComponent } from '@apexara/ng-components/button';
@@ -364,13 +365,13 @@ class CalendarBody {
364
365
  return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);
365
366
  }
366
367
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CalendarBody, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
367
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CalendarBody, isStandalone: true, selector: "[calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", startValue: "startValue", endValue: "endValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", isRange: "isRange", cellAspectRatio: "cellAspectRatio", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", previewStart: "previewStart", previewEnd: "previewEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange", activeDateChange: "activeDateChange", dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { classAttribute: "calendar-body" }, usesOnChanges: true, ngImport: i0, template: "@if (firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
368
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CalendarBody, isStandalone: true, selector: "[calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", startValue: "startValue", endValue: "endValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", isRange: "isRange", cellAspectRatio: "cellAspectRatio", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", previewStart: "previewStart", previewEnd: "previewEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange", activeDateChange: "activeDateChange", dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { classAttribute: "calendar-body" }, usesOnChanges: true, ngImport: i0, template: "@if (firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"] }); }
368
369
  }
369
370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CalendarBody, decorators: [{
370
371
  type: Component,
371
372
  args: [{ selector: '[calendar-body]', host: {
372
373
  'class': 'calendar-body',
373
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"] }]
374
+ }, template: "@if (firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ label }}\n </td>\n </tr>\n}\n\n@for (row of rows; track trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (rowIndex === 0 && firstRowOffset) {\n <td\n class=\"calendar-body-label\"\n [attr.colspan]=\"firstRowOffset\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n {{ firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"calendar-body-cell-container\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\"\n [attr.data-row]=\"rowIndex\"\n [attr.data-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"calendar-body-cell\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.disabled]=\"!item.enabled\"\n [class.selected]=\"isSelected(item.compareValue)\"\n [class.active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.today]=\"todayValue === item.compareValue\"\n [class.range-start]=\"isRangeStart(item.compareValue)\"\n [class.range-end]=\"isRangeEnd(item.compareValue)\"\n [class.in-range]=\"isCellInRange(item.compareValue)\"\n [class.in-preview]=\"isInPreview(item.compareValue)\"\n [class.preview-start]=\"isPreviewStart(item.compareValue)\"\n [class.preview-end]=\"isPreviewEnd(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"getDescribedby(item.compareValue)\"\n (click)=\"cellClicked(item, $event)\"\n (focus)=\"emitActiveDateChange(item, $event)\">\n <span class=\"calendar-body-cell-content focus-indicator\">\n {{ item.displayValue }}\n </span>\n\n <span class=\"calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"startDateLabelId\" class=\"calendar-body-hidden-label\">{{ startDateAccessibleName }}</span>\n\n<span [id]=\"endDateLabelId\" class=\"calendar-body-hidden-label\">{{ endDateAccessibleName }}</span>\n", styles: ["tr{height:40px}.calendar-body-label{height:0;line-height:0;text-align:start}.calendar-body-cell{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;text-align:center;color:var(--apex-calendar-body-cell-color, #0B1222);background:var(--apex-datepicker-calendar-body-cell-background-color, none);border:var(--apex-calendar-body-cell-border, none);margin:0}.calendar-body-hidden-label{display:none}.calendar-body-cell-container{position:relative;height:0;line-height:0}.calendar-body-cell:before,.calendar-body-cell:after,.calendar-body-cell-preview{height:100%;width:100%;display:block;position:absolute;top:0;left:0;content:\"\";box-sizing:border-box;z-index:0}.calendar-body-cell{border-radius:4px;transition:border-radius .1s ease-out}.calendar-body-cell:hover{color:var(--apex-calendar-body-cell-hover-color, white);background-color:var(--apex-calendar-body-cell-hover-background-color, #FFD2C6)}.today{border:var(--apex-calendar-body-today-cell-border, 1px solid #FFD2C6)}.in-preview,.calendar-body-cell.in-preview,.calendar-body-cell.in-range.in-preview{background-color:var(--apex-calendar-body-cell-in-preview-background-color, #FFD2C6);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138);border-bottom:var(--apex-calendar-body-cell-in-preview-border, 1px dashed #F96138)}.calendar-body-cell.in-preview.preview-end{border-top-right-radius:20px;border-bottom-right-radius:20px;border-right:var(--apex-calendar-body-cell-preview-end-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-end-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-end-color, #FFFFFF)}.calendar-body-cell.in-preview.preview-start{border-top-left-radius:20px;border-bottom-left-radius:20px;border-left:var(--apex-calendar-body-cell-preview-start-border, 1px dashed #F96138);background-color:var(--apex-calendar-body-cell-preview-start-background-color, #FFD2C6);color:var(--apex-calendar-body-cell-preview-start-color, #FFFFFF)}.calendar-body-cell:hover .in-preview,.calendar-body-cell:hover .in-range{border-radius:0 20px 20px 0/0px 20px 20px 0px}.active:focus{background-color:var(--apex-calendar-body-active-cell-background-color, #FFD2C6)}.calendar-body-cell.in-range{background-color:var(--apex-calendar-body-cell-in-range-background-color, #FFF2EF);border-left:0px;border-right:0px;border-radius:0;border-top:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138);border-bottom:var(--apex-calendar-body-cell-in-range-border, 1px solid #F96138)}.in-range.active{background-color:var(--apex-calendar-body-cell-in-range-active-background-color, #FFD2C6)}.in-range.range-start{border-top-left-radius:20px;border-bottom-left-radius:20px;color:var(--apex-calendar-body-cell-range-start-color, #FFFFFF);border-left:var(--apex-calendar-body-cell-range-start-border, 1px solid #F96138);background-color:var(--apex-calendar-body-cell-range-start-background-color, #F96138)}.in-range.range-end{border-top-right-radius:20px;border-bottom-right-radius:20px;color:var(--apex-calendar-body-cell-range-end-color, #FFFFFF);border-right:var(--apex-datepicker-calendar-body-cell-end-start-border, 1px solid #F96138);background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.calendar-body-cell.in-range.range-end,.calendar-body-cell.in-range.range-start{background-color:var(--apex-datepicker-calendar-body-cell-end-start-background-color, #F96138)}.active.in-range.range-end,.active.in-range.range-start{background-color:var(--apex-calendar-body-cell-active-in-range-start-end-background-color, #FFD2C6)}.calendar-body-cell.selected{color:var(--apex-calendar-body-cell-selected-color, #FFFFFF);background-color:var(--apex-calendar-body-cell-selected-background-color, #F96138)}.disabled{cursor:none;border:none;border-radius:0;pointer-events:none;background-color:var(--apex-calendar-body-cell-disabled-background-color, #E0DFDE)}\n"] }]
374
375
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }, { type: i0.ElementRef }], propDecorators: { label: [{
375
376
  type: Input
376
377
  }], rows: [{
@@ -676,9 +677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
676
677
  }] });
677
678
 
678
679
  class ApexCalendarYearView {
679
- constructor(datePickerService, changeDetectorRef) {
680
+ constructor(datePickerService) {
680
681
  this.datePickerService = datePickerService;
681
- this.changeDetectorRef = changeDetectorRef;
682
682
  /** Emits when a new month is selected. */
683
683
  this.selectedChange = new EventEmitter();
684
684
  /** Emits the selected month. This doesn't imply a change on the selected date */
@@ -745,7 +745,6 @@ class ApexCalendarYearView {
745
745
  // First row of months only contains 5 elements so we can fit the year label on the same row.
746
746
  this.months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]
747
747
  .map(row => row.map(month => this.createCellForMonth(month, monthNames[month])));
748
- this.changeDetectorRef.markForCheck();
749
748
  }
750
749
  /** Handles when a new month is selected. */
751
750
  onMonthSelected(event) {
@@ -903,17 +902,17 @@ class ApexCalendarYearView {
903
902
  this.selectedMonth = this.getMonthInCurrentYear(value);
904
903
  }
905
904
  }
906
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, deps: [{ token: ApexDatepickerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
907
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarYearView, isStandalone: true, selector: "apex-calendar-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "CalendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"yearLabel\"\n [rows]=\"months\"\n [todayValue]=\"todayMonth!\"\n [startValue]=\"selectedMonth!\"\n [endValue]=\"selectedMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"datePickerService.getMonth(activeDate)\"\n (selectedValueChange)=\"onMonthSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
905
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
906
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarYearView, isStandalone: true, selector: "apex-calendar-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "CalendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"yearLabel\"\n [rows]=\"months\"\n [todayValue]=\"todayMonth!\"\n [startValue]=\"selectedMonth!\"\n [endValue]=\"selectedMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"datePickerService.getMonth(activeDate)\"\n (selectedValueChange)=\"onMonthSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
908
907
  }
909
908
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarYearView, decorators: [{
910
909
  type: Component,
911
- args: [{ selector: 'apex-calendar-year-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
910
+ args: [{ selector: 'apex-calendar-year-view', imports: [
912
911
  FormsModule,
913
912
  CalendarBody,
914
913
  ReactiveFormsModule,
915
914
  ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"yearLabel\"\n [rows]=\"months\"\n [todayValue]=\"todayMonth!\"\n [startValue]=\"selectedMonth!\"\n [endValue]=\"selectedMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"datePickerService.getMonth(activeDate)\"\n (selectedValueChange)=\"onMonthSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
916
- }], ctorParameters: () => [{ type: ApexDatepickerService }, { type: i0.ChangeDetectorRef }], propDecorators: { CalendarBody: [{
915
+ }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { CalendarBody: [{
917
916
  type: ViewChild,
918
917
  args: [CalendarBody]
919
918
  }], activeDate: [{
@@ -1013,9 +1012,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1013
1012
  }], ctorParameters: () => [{ type: ApexDatepickerService }] });
1014
1013
 
1015
1014
  class ApexCalendarMonthView {
1016
- constructor(datepickerService, changeDetectorRef, rangeSelectionStartegy) {
1015
+ constructor(datepickerService, rangeSelectionStartegy) {
1017
1016
  this.datepickerService = datepickerService;
1018
- this.changeDetectorRef = changeDetectorRef;
1019
1017
  this.rangeSelectionStartegy = rangeSelectionStartegy;
1020
1018
  this.activeDrag = null;
1021
1019
  this.dragStarted = new EventEmitter();
@@ -1190,7 +1188,6 @@ class ApexCalendarMonthView {
1190
1188
  this.previewEnd = this.getCellCompareValue(dragRange.end);
1191
1189
  }
1192
1190
  }
1193
- this.changeDetectorRef.markForCheck();
1194
1191
  }
1195
1192
  }
1196
1193
  handleCalendarBodyKeyup(event) {
@@ -1309,15 +1306,15 @@ class ApexCalendarMonthView {
1309
1306
  getDateFromDayOfMonth(dayOfMonth) {
1310
1307
  return this.datepickerService.createDate(this.datepickerService.getYear(this.activeDate), this.datepickerService.getMonth(this.activeDate), dayOfMonth);
1311
1308
  }
1312
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMonthView, deps: [{ token: ApexDatepickerService }, { token: i0.ChangeDetectorRef }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
1313
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarMonthView, isStandalone: true, selector: "apex-calendar-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", activeDrag: "activeDrag" }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange", userSelection: "userSelection", selectedChange: "selectedChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead class=\"calendar-table-header\">\n <tr>\n @for (day of weekdays; track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n\n <span aria-hidden=\"true\">{{ day.narrow }}</span>\n </th>\n }\n </tr>\n\n <tr aria-hidden=\"true\">\n <th class=\"calendar-table-header-divider\" colspan=\"7\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"monthLabel\"\n [rows]=\"weeks\"\n [todayValue]=\"todayDate!\"\n [startValue]=\"rangeStart!\"\n [endValue]=\"rangeEnd!\"\n [previewStart]=\"previewStart\"\n [previewEnd]=\"previewEnd\"\n [isRange]=\"isRange\"\n [activeCell]=\"getActiveCell()\"\n [labelMinRequiredCells]=\"2\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"onDragEnded($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (selectedValueChange)=\"dateSelected($event)\"\n (previewChange)=\"previewChanged($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0px 4px;border-collapse:separate;padding:6px}th{color:var(--apex-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--apex-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1309
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMonthView, deps: [{ token: ApexDatepickerService }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
1310
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexCalendarMonthView, isStandalone: true, selector: "apex-calendar-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", activeDrag: "activeDrag" }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange", userSelection: "userSelection", selectedChange: "selectedChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead class=\"calendar-table-header\">\n <tr>\n @for (day of weekdays; track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n\n <span aria-hidden=\"true\">{{ day.narrow }}</span>\n </th>\n }\n </tr>\n\n <tr aria-hidden=\"true\">\n <th class=\"calendar-table-header-divider\" colspan=\"7\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"monthLabel\"\n [rows]=\"weeks\"\n [todayValue]=\"todayDate!\"\n [startValue]=\"rangeStart!\"\n [endValue]=\"rangeEnd!\"\n [previewStart]=\"previewStart\"\n [previewEnd]=\"previewEnd\"\n [isRange]=\"isRange\"\n [activeCell]=\"getActiveCell()\"\n [labelMinRequiredCells]=\"2\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"onDragEnded($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (selectedValueChange)=\"dateSelected($event)\"\n (previewChange)=\"previewChanged($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0px 4px;border-collapse:separate;padding:6px}th{color:var(--apex-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--apex-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }] }); }
1314
1311
  }
1315
1312
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMonthView, decorators: [{
1316
1313
  type: Component,
1317
- args: [{ selector: 'apex-calendar-month-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
1314
+ args: [{ selector: 'apex-calendar-month-view', imports: [
1318
1315
  CalendarBody,
1319
1316
  ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead class=\"calendar-table-header\">\n <tr>\n @for (day of weekdays; track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{ day.long }}</span>\n\n <span aria-hidden=\"true\">{{ day.narrow }}</span>\n </th>\n }\n </tr>\n\n <tr aria-hidden=\"true\">\n <th class=\"calendar-table-header-divider\" colspan=\"7\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [label]=\"monthLabel\"\n [rows]=\"weeks\"\n [todayValue]=\"todayDate!\"\n [startValue]=\"rangeStart!\"\n [endValue]=\"rangeEnd!\"\n [previewStart]=\"previewStart\"\n [previewEnd]=\"previewEnd\"\n [isRange]=\"isRange\"\n [activeCell]=\"getActiveCell()\"\n [labelMinRequiredCells]=\"2\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"onDragEnded($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (selectedValueChange)=\"dateSelected($event)\"\n (previewChange)=\"previewChanged($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0px 4px;border-collapse:separate;padding:6px}th{color:var(--apex-calendar-month-view-table-header-color, #C6C6C6)}.calendar-table-header-divider{border-bottom:1px solid var(--apex-datepicker-calendar-month-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
1320
- }], ctorParameters: () => [{ type: ApexDatepickerService }, { type: i0.ChangeDetectorRef }, { type: DefaultCalendarRangeStrategy }], propDecorators: { calendarBody: [{
1317
+ }], ctorParameters: () => [{ type: ApexDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { calendarBody: [{
1321
1318
  type: ViewChild,
1322
1319
  args: [CalendarBody]
1323
1320
  }], activeDate: [{
@@ -1343,8 +1340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1343
1340
  }] } });
1344
1341
 
1345
1342
  class ApexCalendarMultiYearView {
1346
- constructor(changeDetectorRef, datePickerService) {
1347
- this.changeDetectorRef = changeDetectorRef;
1343
+ constructor(datePickerService) {
1348
1344
  this.datePickerService = datePickerService;
1349
1345
  /** Emits when a new year is selected. */
1350
1346
  this.selectedChange = new EventEmitter();
@@ -1413,7 +1409,6 @@ class ApexCalendarMultiYearView {
1413
1409
  row = [];
1414
1410
  }
1415
1411
  }
1416
- this.changeDetectorRef.markForCheck();
1417
1412
  }
1418
1413
  /** Handles when a new year is selected. */
1419
1414
  onYearSelected(event) {
@@ -1564,17 +1559,17 @@ class ApexCalendarMultiYearView {
1564
1559
  }
1565
1560
  return startingYear;
1566
1561
  }
1567
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, deps: [{ token: i0.ChangeDetectorRef }, { token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
1568
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarMultiYearView, isStandalone: true, selector: "apex-calendar-multi-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [startValue]=\"selectedYear!\"\n [endValue]=\"selectedYear!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"getActiveCell()\"\n (selectedValueChange)=\"onYearSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1562
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, deps: [{ token: ApexDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
1563
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ApexCalendarMultiYearView, isStandalone: true, selector: "apex-calendar-multi-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: CalendarBody, descendants: true }], ngImport: i0, template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [startValue]=\"selectedYear!\"\n [endValue]=\"selectedYear!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"getActiveCell()\"\n (selectedValueChange)=\"onYearSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CalendarBody, selector: "[calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
1569
1564
  }
1570
1565
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexCalendarMultiYearView, decorators: [{
1571
1566
  type: Component,
1572
- args: [{ selector: 'apex-calendar-multi-year-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
1567
+ args: [{ selector: 'apex-calendar-multi-year-view', imports: [
1573
1568
  FormsModule,
1574
1569
  CalendarBody,
1575
1570
  ReactiveFormsModule,
1576
1571
  ], template: "<table class=\"calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"calendar-table-header\">\n <tr>\n <th class=\"calendar-table-header-divider\" colspan=\"4\"></th>\n </tr>\n </thead>\n\n <tbody calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [startValue]=\"selectedYear!\"\n [endValue]=\"selectedYear!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"getActiveCell()\"\n (selectedValueChange)=\"onYearSelected($event)\"\n (activeDateChange)=\"updateActiveDate($event)\"\n (keyup)=\"handleCalendarBodyKeyup($event)\"\n (keydown)=\"handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", styles: [":host{display:block}table{width:100%;padding:6px;border-collapse:separate}.calendar-table-header-divider{border-bottom:1px solid var(--apex-calendar-multi-year-view-table-header-border-bottom-color, #C6C6C6)}\n"] }]
1577
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ApexDatepickerService }], propDecorators: { activeDate: [{
1572
+ }], ctorParameters: () => [{ type: ApexDatepickerService }], propDecorators: { activeDate: [{
1578
1573
  type: Input
1579
1574
  }], selected: [{
1580
1575
  type: Input
@@ -1838,29 +1833,31 @@ class DateRangeFormControls {
1838
1833
  }
1839
1834
  }
1840
1835
  class ApexDatepickerComponent {
1841
- constructor(ngZone, osService, elementRef, overlayService, changeDetectorRef, datepickerService, rangeSelectionStrategy) {
1836
+ constructor(ngZone, osService, elementRef, overlayService, datepickerService, rangeSelectionStrategy) {
1842
1837
  this.ngZone = ngZone;
1843
1838
  this.osService = osService;
1844
1839
  this.elementRef = elementRef;
1845
1840
  this.overlayService = overlayService;
1846
- this.changeDetectorRef = changeDetectorRef;
1847
1841
  this.datepickerService = datepickerService;
1848
1842
  this.rangeSelectionStrategy = rangeSelectionStrategy;
1843
+ this.shouldShowCalendar = signal(false, ...(ngDevMode ? [{ debugName: "shouldShowCalendar" }] : []));
1849
1844
  this.closeButtonFocused = false;
1850
- this.formErrorMessage = null;
1845
+ this.formErrorMessage = signal(null, ...(ngDevMode ? [{ debugName: "formErrorMessage" }] : []));
1846
+ this._activeDate = signal(null, ...(ngDevMode ? [{ debugName: "_activeDate" }] : []));
1847
+ this._selected = signal(null, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
1851
1848
  this._minDate = this.options?.min ? this.options.min : null;
1852
1849
  this._maxDate = this.options?.max ? this.options.max : null;
1853
1850
  this.formControlSubscriptions = [];
1854
1851
  }
1855
1852
  get activeDate() {
1856
- return this._activeDate;
1853
+ return this._activeDate();
1857
1854
  }
1858
1855
  set activeDate(value) {
1859
1856
  const validDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)) ||
1860
1857
  this.datepickerService.today();
1861
- this._activeDate = this.datepickerService.clampDate(validDate, this.minDate, this.maxDate);
1862
- this._activeDate = value;
1863
- this.shouldShowCalendar = false;
1858
+ this._activeDate.set(this.datepickerService.clampDate(validDate, this.minDate, this.maxDate));
1859
+ this._activeDate.set(value);
1860
+ this.shouldShowCalendar.set(false);
1864
1861
  }
1865
1862
  get minDate() {
1866
1863
  return this._minDate;
@@ -1875,33 +1872,32 @@ class ApexDatepickerComponent {
1875
1872
  this._maxDate = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
1876
1873
  }
1877
1874
  get selectedDate() {
1878
- return this._selected;
1875
+ return this._selected();
1879
1876
  }
1880
1877
  set selectedDate(value) {
1881
1878
  if (this.options.formControlName instanceof DateRangeFormControls) {
1882
1879
  if (value instanceof DateRange) {
1883
- this._selected = value;
1880
+ this._selected.set(value);
1884
1881
  }
1885
1882
  else {
1886
- this._selected = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), null);
1883
+ this._selected.set(new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), null));
1887
1884
  }
1888
- this.options.formGroup.controls[this.options.formControlName.start].setValue(this._selected.start, { emitEvent: false });
1889
- this.options.formGroup.controls[this.options.formControlName.end].setValue(this._selected.end, { emitEvent: false });
1885
+ const selected = this._selected();
1886
+ this.options.formGroup.controls[this.options.formControlName.start].setValue(selected.start, { emitEvent: false });
1887
+ this.options.formGroup.controls[this.options.formControlName.end].setValue(selected.end, { emitEvent: false });
1890
1888
  }
1891
1889
  else {
1892
- this._selected = this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value));
1893
- this.options.formGroup.controls[this.options.formControlName].setValue(this._selected, { emitEvent: false });
1890
+ this._selected.set(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)));
1891
+ this.options.formGroup.controls[this.options.formControlName].setValue(this._selected(), { emitEvent: false });
1894
1892
  }
1895
1893
  }
1896
1894
  ngOnInit() {
1897
- this._selected =
1898
- this.options.formControlName instanceof DateRangeFormControls
1899
- ? new DateRange(this.options.formGroup.value[this.options.formControlName.start], this.options.formGroup.value[this.options.formControlName.end])
1900
- : this.options.formGroup.value[this.options.formControlName];
1895
+ this._selected.set(this.options.formControlName instanceof DateRangeFormControls
1896
+ ? new DateRange(this.options.formGroup.value[this.options.formControlName.start], this.options.formGroup.value[this.options.formControlName.end])
1897
+ : this.options.formGroup.value[this.options.formControlName]);
1901
1898
  this.maxDate = this.options.max ? this.options.max : null;
1902
1899
  this.minDate = this.options.min ? this.options.min : null;
1903
1900
  this.initDefaultErrors();
1904
- this.changeDetectorRef.detectChanges();
1905
1901
  this.ngZone.runOutsideAngular(() => {
1906
1902
  if (this.datepicker) {
1907
1903
  this.datepicker.nativeElement.addEventListener('focus', () => this.activateControl());
@@ -1921,25 +1917,21 @@ class ApexDatepickerComponent {
1921
1917
  if (this.calendar) {
1922
1918
  return;
1923
1919
  }
1924
- this.ngZone.run(() => {
1925
- this.shouldShowCalendar = true;
1926
- });
1927
- this.changeDetectorRef.markForCheck();
1920
+ this.shouldShowCalendar.set(true);
1928
1921
  setTimeout(() => {
1929
1922
  this.generateCalendarPosition(this.calendar);
1930
1923
  this.overlayService.appendToOverlay(this.calendar.nativeElement, true);
1931
- this.changeDetectorRef.detectChanges();
1932
1924
  });
1933
1925
  }
1934
1926
  onClick(event) {
1935
- if (!this.shouldShowCalendar) {
1927
+ if (!this.shouldShowCalendar()) {
1936
1928
  return;
1937
1929
  }
1938
1930
  if (this.datepicker) {
1939
1931
  const isIputClicked = this.checkPosition(event, this.elementRef.nativeElement.getBoundingClientRect());
1940
1932
  if (isIputClicked) {
1941
- this.shouldShowCalendar = isIputClicked;
1942
- if (!this.shouldShowCalendar) {
1933
+ this.shouldShowCalendar.set(isIputClicked);
1934
+ if (!this.shouldShowCalendar()) {
1943
1935
  this.overlayService.removeFromOverlay(this.calendar.nativeElement);
1944
1936
  }
1945
1937
  return;
@@ -1948,17 +1940,15 @@ class ApexDatepickerComponent {
1948
1940
  if (this.calendar) {
1949
1941
  const isCalendarClicked = this.checkPosition(event, this.calendar.nativeElement.getBoundingClientRect());
1950
1942
  if (isCalendarClicked) {
1951
- this.ngZone.run(() => {
1952
- this.shouldShowCalendar = isCalendarClicked;
1953
- });
1954
- if (!this.shouldShowCalendar) {
1943
+ this.shouldShowCalendar.set(isCalendarClicked);
1944
+ if (!this.shouldShowCalendar()) {
1955
1945
  this.overlayService.removeFromOverlay(this.calendar.nativeElement);
1956
1946
  }
1957
1947
  return;
1958
1948
  }
1959
1949
  }
1960
1950
  this.closeCalendar();
1961
- if (!this.shouldShowCalendar) {
1951
+ if (!this.shouldShowCalendar()) {
1962
1952
  this.overlayService.removeFromOverlay(this.calendar.nativeElement);
1963
1953
  }
1964
1954
  }
@@ -1979,10 +1969,6 @@ class ApexDatepickerComponent {
1979
1969
  }
1980
1970
  return 'No date selected.';
1981
1971
  }
1982
- getformErrorMessage() {
1983
- this.formErrorMessage = this.getErrorIfControlInvalid();
1984
- return this.formErrorMessage ? this.formErrorMessage : null;
1985
- }
1986
1972
  onCloseClick() {
1987
1973
  this.closeCalendar();
1988
1974
  if (this.datepicker) {
@@ -2020,7 +2006,7 @@ class ApexDatepickerComponent {
2020
2006
  }
2021
2007
  }
2022
2008
  closeCalendar() {
2023
- this.shouldShowCalendar = false;
2009
+ this.shouldShowCalendar.set(false);
2024
2010
  if (this.options.formControlName instanceof DateRangeFormControls) {
2025
2011
  this.options.formGroup.controls[this.options.formControlName.start].markAsTouched();
2026
2012
  this.options.formGroup.controls[this.options.formControlName.end].markAsTouched();
@@ -2053,12 +2039,18 @@ class ApexDatepickerComponent {
2053
2039
  if (value && this.selectedDate instanceof DateRange) {
2054
2040
  this.selectedDate = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(this.selectedDate.end)));
2055
2041
  }
2056
- this.changeDetectorRef.detectChanges();
2057
2042
  }), endControl.valueChanges.subscribe((value) => {
2058
2043
  if (value && this.selectedDate instanceof DateRange) {
2059
2044
  this.selectedDate = new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(this.selectedDate.start)), this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)));
2060
- this.changeDetectorRef.detectChanges();
2061
2045
  }
2046
+ }), startControl.events
2047
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
2048
+ .subscribe(() => {
2049
+ this.formErrorMessage.set(this.getErrorIfControlInvalid());
2050
+ }), endControl.events
2051
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
2052
+ .subscribe(() => {
2053
+ this.formErrorMessage.set(this.getErrorIfControlInvalid());
2062
2054
  }));
2063
2055
  return;
2064
2056
  }
@@ -2066,7 +2058,10 @@ class ApexDatepickerComponent {
2066
2058
  const control = this.options.formGroup.controls[this.options.formControlName];
2067
2059
  this.formControlSubscriptions.push(control.valueChanges.subscribe(() => {
2068
2060
  this.selectedDate = control.value;
2069
- this.changeDetectorRef.detectChanges();
2061
+ }), control.events
2062
+ .pipe(filter(event => event instanceof TouchedChangeEvent))
2063
+ .subscribe(() => {
2064
+ this.formErrorMessage.set(this.getErrorIfControlInvalid());
2070
2065
  }));
2071
2066
  }
2072
2067
  }
@@ -2145,16 +2140,16 @@ class ApexDatepickerComponent {
2145
2140
  this.options.formGroup.controls[this.options.formControlName].addValidators(maxValidator);
2146
2141
  }
2147
2142
  }
2148
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDatepickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.OSService }, { token: i0.ElementRef }, { token: i1$1.OverlayService }, { token: i0.ChangeDetectorRef }, { token: ApexDatepickerService }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
2149
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDatepickerComponent, isStandalone: true, selector: "apex-datepicker", inputs: { options: "options" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ getformErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ApexCalendarComponent, selector: "apex-calendar", inputs: ["activeDate", "minDate", "selected", "maxDate", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["monthSelected", "yearSelected", "activeDateChange", "userDragDrop", "selectedChange", "userSelection", "calendarClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2143
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDatepickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.OSService }, { token: i0.ElementRef }, { token: i1$1.OverlayService }, { token: ApexDatepickerService }, { token: DefaultCalendarRangeStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
2144
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexDatepickerComponent, isStandalone: true, selector: "apex-datepicker", inputs: { options: "options" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage()\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ formErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar()) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ApexCalendarComponent, selector: "apex-calendar", inputs: ["activeDate", "minDate", "selected", "maxDate", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["monthSelected", "yearSelected", "activeDateChange", "userDragDrop", "selectedChange", "userSelection", "calendarClose"] }] }); }
2150
2145
  }
2151
2146
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexDatepickerComponent, decorators: [{
2152
2147
  type: Component,
2153
- args: [{ selector: 'apex-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
2148
+ args: [{ selector: 'apex-datepicker', imports: [
2154
2149
  FormsModule,
2155
2150
  ApexCalendarComponent,
2156
- ], template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ getformErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"] }]
2157
- }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.OSService }, { type: i0.ElementRef }, { type: i1$1.OverlayService }, { type: i0.ChangeDetectorRef }, { type: ApexDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { datepicker: [{
2151
+ ], template: "@if (options) {\n @if (options.formControlName && options.formGroup) {\n <div class=\"label-wrapper\">\n @if (options.label !== '') {\n <label>{{ options.label }}</label>\n }\n </div>\n\n <div tabindex=\"0\" \n #datepicker \n class=\"datepicker\"\n [class.datepicker-error]=\"formErrorMessage()\"\n (click)=\"this.activateControl()\">\n <span\n class=\"datepicker-value\"\n role=\"textbox\" \n aria-readonly=\"true\" \n aria-label=\"Selected date\"\n aria-live=\"polite\">\n {{ getDisplayValue() }}\n </span>\n\n <div class=\"svg-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#f1f1f1\" \n viewBox=\"0 0 256 256\"><path d=\"M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z\"></path>\n </svg>\n </div>\n </div>\n\n <div class=\"footer\">\n <div>{{ formErrorMessage() }}</div>\n </div>\n\n @if (shouldShowCalendar()) {\n <div #calendar class=\"calendar\">\n <apex-calendar\n [(activeDate)]=\"activeDate\"\n [(selected)]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (calendarClose)=\"onCloseKeyDown($event)\"\n (userSelection)=\"handleUserSelection($event)\"\n (userDragDrop)=\"handleDragAndDropEnd($event)\">\n </apex-calendar>\n </div>\n }\n }\n}\n", styles: [":host{width:296px;display:block;touch-action:manipulation}apex-calendar{width:100%;height:358px}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.label-wrapper label{font-size:14px;font-weight:600;margin-right:4px}.datepicker{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;border:var(--apex-datepicker-border, 1px solid #E9E9E9);border-radius:4px 24px 24px 4px;transition:border .3s ease}.datepicker-error{border:var(--apex-datepicker-error-border, 1px solid #F96138)}.datepicker-value{width:100%;text-align:center}.datepicker:hover,.datepicker:focus{outline:none;border-color:var(--apex-datepicker-border-hover-color, #FF7955)}.svg-wrapper{height:40px}.svg-wrapper svg{background-color:var(--apex-datepicker-svg-background-color, #FF7955);fill:var(--apex-datepicker-svg-fill-color, #FFFFFF);border-radius:50%;padding:8px}.svg-wrapper svg:hover{background-color:var(--apex-datepicker-svg-background-hover-color, #F96138)}.calendar{width:296px;display:flex;position:fixed;flex-direction:column;justify-content:center;align-items:center;pointer-events:all;border-radius:4px;background-color:var(--apex-calendar-background-color, #ffffff);box-shadow:var(--apex-calendar-box-shadow, 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12));z-index:98;animation:fadeIn .3s}.footer{height:14px;font-size:12px;margin-top:2px;color:var(--apex-datepicker-error-color, #F96138)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::ng-deep .cdk-visually-hidden{width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;position:absolute;white-space:nowrap;outline:0;border:0;left:0;padding:0;margin:-1px}\n"] }]
2152
+ }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.OSService }, { type: i0.ElementRef }, { type: i1$1.OverlayService }, { type: ApexDatepickerService }, { type: DefaultCalendarRangeStrategy }], propDecorators: { datepicker: [{
2158
2153
  type: ViewChild,
2159
2154
  args: ['datepicker']
2160
2155
  }], calendar: [{