@apexara/ng-components 1.0.6-test.1 → 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.
- package/fesm2022/apexara-ng-components-checkbox.mjs +19 -15
- package/fesm2022/apexara-ng-components-checkbox.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-datepicker.mjs +65 -70
- package/fesm2022/apexara-ng-components-datepicker.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-drawer.mjs +9 -11
- package/fesm2022/apexara-ng-components-drawer.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-image.mjs +3 -5
- package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-input.mjs +19 -19
- package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-listbox.mjs +41 -33
- package/fesm2022/apexara-ng-components-listbox.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-select.mjs +96 -79
- package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-table.mjs +120 -99
- package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-textarea.mjs +20 -17
- package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
- package/package.json +1 -1
- package/types/apexara-ng-components-checkbox.d.ts +6 -8
- package/types/apexara-ng-components-datepicker.d.ts +4 -6
- package/types/apexara-ng-components-drawer.d.ts +3 -4
- package/types/apexara-ng-components-image.d.ts +2 -3
- package/types/apexara-ng-components-input.d.ts +6 -8
- package/types/apexara-ng-components-listbox.d.ts +7 -8
- package/types/apexara-ng-components-select.d.ts +12 -10
- package/types/apexara-ng-components-table.d.ts +19 -18
- package/types/apexara-ng-components-textarea.d.ts +6 -8
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input,
|
|
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"]
|
|
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
|
-
},
|
|
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
|
|
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 }
|
|
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 }]
|
|
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',
|
|
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 }
|
|
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,
|
|
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:
|
|
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"] }]
|
|
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',
|
|
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:
|
|
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(
|
|
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:
|
|
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 }]
|
|
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',
|
|
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:
|
|
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,
|
|
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
|
|
1862
|
-
this._activeDate
|
|
1863
|
-
this.shouldShowCalendar
|
|
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
|
|
1880
|
+
this._selected.set(value);
|
|
1884
1881
|
}
|
|
1885
1882
|
else {
|
|
1886
|
-
this._selected
|
|
1883
|
+
this._selected.set(new DateRange(this.datepickerService.getValidDateOrNull(this.datepickerService.deserialize(value)), null));
|
|
1887
1884
|
}
|
|
1888
|
-
this.
|
|
1889
|
-
this.options.formGroup.controls[this.options.formControlName.
|
|
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
|
|
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
|
|
1899
|
-
|
|
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.
|
|
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
|
|
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.
|
|
1952
|
-
|
|
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
|
|
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
|
-
|
|
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:
|
|
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>{{
|
|
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',
|
|
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>{{
|
|
2157
|
-
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.OSService }, { type: i0.ElementRef }, { type: i1$1.OverlayService }, { type:
|
|
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: [{
|