@ifsworld/granite-components 10.0.1 → 11.0.1
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/date-picker/lib/date-picker-base.d.ts +1 -1
- package/date-picker/lib/date-picker-trigger-for.directive.d.ts +1 -1
- package/date-picker/lib/date-picker.component.d.ts +1 -1
- package/date-picker/lib/date-range-picker.component.d.ts +1 -1
- package/{esm2020 → esm2022}/date-picker/lib/date-picker-base.mjs +4 -4
- package/{esm2020 → esm2022}/date-picker/lib/date-picker-trigger-for.directive.mjs +4 -4
- package/esm2022/date-picker/lib/date-picker.component.mjs +30 -0
- package/{esm2020 → esm2022}/date-picker/lib/date-picker.module.mjs +21 -21
- package/esm2022/date-picker/lib/date-range-picker.component.mjs +46 -0
- package/{esm2020 → esm2022}/lib/arrange-grid/arrange-grid-item.component.mjs +12 -12
- package/{esm2020 → esm2022}/lib/arrange-grid/arrange-grid.component.mjs +7 -7
- package/{esm2020 → esm2022}/lib/arrange-grid/arrange-grid.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/badge/badge.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/badge/badge.module.mjs +5 -5
- package/esm2022/lib/badge/testing/badge.harness.mjs +25 -0
- package/esm2022/lib/button/button.component.mjs +87 -0
- package/{esm2020 → esm2022}/lib/button/button.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/checkbox/checkbox-group.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/checkbox/checkbox.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/checkbox/checkbox.module.mjs +5 -5
- package/esm2022/lib/chips/chip-input.mjs +195 -0
- package/esm2022/lib/chips/chip-list.component.mjs +567 -0
- package/esm2022/lib/chips/chip.component.mjs +287 -0
- package/{esm2020 → esm2022}/lib/chips/chips.module.mjs +9 -9
- package/{esm2020 → esm2022}/lib/core/common-behaviors/disabled.mjs +4 -4
- package/{esm2020 → esm2022}/lib/core/core.module.mjs +11 -11
- package/esm2022/lib/core/devices/client-input-desktop.directive.mjs +29 -0
- package/esm2022/lib/core/devices/client-input-touch.directive.mjs +29 -0
- package/esm2022/lib/core/devices/client-output-desktop.directive.mjs +29 -0
- package/esm2022/lib/core/devices/client-output-touch.directive.mjs +29 -0
- package/{esm2020 → esm2022}/lib/core/pipes/pure-pipes.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/core/pipes/title.pipe.mjs +4 -4
- package/{esm2020 → esm2022}/lib/core/radio-checkbox-base.mjs +4 -4
- package/{esm2020 → esm2022}/lib/grid/grid.component.mjs +7 -7
- package/{esm2020 → esm2022}/lib/grid/grid.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/icon/icon.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/icon/icon.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/input-field/input-field.component.mjs +5 -5
- package/{esm2020 → esm2022}/lib/input-field/input-field.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/label/label.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/label/label.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/menu/divider.directive.mjs +4 -4
- package/{esm2020 → esm2022}/lib/menu/menu-base.mjs +4 -4
- package/{esm2020 → esm2022}/lib/menu/menu-item.component.mjs +6 -6
- package/{esm2020 → esm2022}/lib/menu/menu-touch-close.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/menu/menu-touch-title.component.mjs +6 -6
- package/{esm2020 → esm2022}/lib/menu/menu-trigger-for.directive.mjs +4 -4
- package/{esm2020 → esm2022}/lib/menu/menu.component.mjs +10 -10
- package/{esm2020 → esm2022}/lib/menu/menu.module.mjs +17 -17
- package/esm2022/lib/menu/testing/menu.harness.mjs +109 -0
- package/{esm2020 → esm2022}/lib/menu/title.directive.mjs +4 -4
- package/{esm2020 → esm2022}/lib/radio-button/radio-button.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/radio-button/radio-button.module.mjs +5 -5
- package/{esm2020 → esm2022}/lib/radio-button/radio-group.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/toggle-switch/toggle-switch.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/toggle-switch/toggle-switch.module.mjs +5 -5
- package/{esm2020 → esm2022}/table/lib/cell/cell-align/cell-align-classes.directive.mjs +4 -4
- package/{esm2020 → esm2022}/table/lib/cell/cell.mjs +4 -4
- package/{esm2020 → esm2022}/table/lib/cell/table-data-cell.component.mjs +5 -5
- package/{esm2020 → esm2022}/table/lib/cell/table-header-cell.component.mjs +4 -4
- package/{esm2020 → esm2022}/table/lib/column/table-column.directive.mjs +4 -4
- package/esm2022/table/lib/table-constants.library.mjs +9 -0
- package/{esm2020 → esm2022}/table/lib/table.component.mjs +4 -4
- package/{esm2020 → esm2022}/table/lib/table.module.mjs +9 -9
- package/{esm2020 → esm2022}/tooltip/lib/tooltip-constants.library.mjs +2 -2
- package/{esm2020 → esm2022}/tooltip/lib/tooltip-trigger-for.directive.mjs +4 -4
- package/{esm2020 → esm2022}/tooltip/lib/tooltip.component.mjs +4 -4
- package/{esm2020 → esm2022}/tooltip/lib/tooltip.module.mjs +5 -5
- package/fesm2022/ifsworld-granite-components-date-picker.mjs +396 -0
- package/{fesm2020 → fesm2022}/ifsworld-granite-components-date-picker.mjs.map +1 -1
- package/fesm2022/ifsworld-granite-components-table.mjs +190 -0
- package/{fesm2015 → fesm2022}/ifsworld-granite-components-table.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/ifsworld-granite-components-tooltip.mjs +11 -11
- package/{fesm2020 → fesm2022}/ifsworld-granite-components-tooltip.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/ifsworld-granite-components.mjs +337 -337
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -0
- package/lib/arrange-grid/arrange-grid-item.component.d.ts +5 -5
- package/lib/arrange-grid/arrange-grid.component.d.ts +3 -3
- package/lib/badge/badge.component.d.ts +1 -1
- package/lib/button/button.component.d.ts +2 -2
- package/lib/checkbox/checkbox.component.d.ts +1 -1
- package/lib/chips/chip-input.d.ts +9 -9
- package/lib/chips/chip-list.component.d.ts +33 -33
- package/lib/chips/chip.component.d.ts +22 -22
- package/lib/core/radio-checkbox-base.d.ts +1 -1
- package/lib/grid/grid.component.d.ts +2 -2
- package/lib/icon/icon.component.d.ts +1 -1
- package/lib/input-field/input-field.component.d.ts +1 -1
- package/lib/label/label.component.d.ts +1 -1
- package/lib/menu/divider.directive.d.ts +1 -1
- package/lib/menu/menu-base.d.ts +1 -1
- package/lib/menu/menu-item.component.d.ts +1 -1
- package/lib/menu/menu-trigger-for.directive.d.ts +1 -1
- package/lib/radio-button/radio-button.component.d.ts +1 -1
- package/lib/toggle-switch/toggle-switch.component.d.ts +1 -1
- package/package.json +21 -40
- package/table/lib/cell/cell-align/cell-align-classes.directive.d.ts +1 -1
- package/table/lib/cell/cell.d.ts +1 -1
- package/table/lib/cell/table-data-cell.component.d.ts +1 -1
- package/table/lib/column/table-column.directive.d.ts +1 -1
- package/table/lib/table.component.d.ts +1 -1
- package/tooltip/lib/tooltip-trigger-for.directive.d.ts +1 -1
- package/esm2020/date-picker/lib/date-picker.component.mjs +0 -30
- package/esm2020/date-picker/lib/date-range-picker.component.mjs +0 -46
- package/esm2020/lib/badge/testing/badge.harness.mjs +0 -25
- package/esm2020/lib/button/button.component.mjs +0 -87
- package/esm2020/lib/chips/chip-input.mjs +0 -195
- package/esm2020/lib/chips/chip-list.component.mjs +0 -567
- package/esm2020/lib/chips/chip.component.mjs +0 -287
- package/esm2020/lib/core/devices/client-input-desktop.directive.mjs +0 -29
- package/esm2020/lib/core/devices/client-input-touch.directive.mjs +0 -29
- package/esm2020/lib/core/devices/client-output-desktop.directive.mjs +0 -29
- package/esm2020/lib/core/devices/client-output-touch.directive.mjs +0 -29
- package/esm2020/lib/menu/testing/menu.harness.mjs +0 -109
- package/esm2020/table/lib/table-constants.library.mjs +0 -9
- package/fesm2015/ifsworld-granite-components-date-picker.mjs +0 -401
- package/fesm2015/ifsworld-granite-components-date-picker.mjs.map +0 -1
- package/fesm2015/ifsworld-granite-components-table.mjs +0 -190
- package/fesm2015/ifsworld-granite-components-tooltip.mjs +0 -169
- package/fesm2015/ifsworld-granite-components-tooltip.mjs.map +0 -1
- package/fesm2015/ifsworld-granite-components.mjs +0 -4132
- package/fesm2015/ifsworld-granite-components.mjs.map +0 -1
- package/fesm2020/ifsworld-granite-components-date-picker.mjs +0 -396
- package/fesm2020/ifsworld-granite-components-table.mjs +0 -190
- package/fesm2020/ifsworld-granite-components-table.mjs.map +0 -1
- package/fesm2020/ifsworld-granite-components.mjs.map +0 -1
- /package/{esm2020 → esm2022}/date-picker/ifsworld-granite-components-date-picker.mjs +0 -0
- /package/{esm2020 → esm2022}/date-picker/index.mjs +0 -0
- /package/{esm2020 → esm2022}/ifsworld-granite-components.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/core/animation.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/core/client-environment.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/core/theme.library.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/core/types.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/menu/menu-desktop-animations.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/menu/menu-errors.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/menu/menu-panel.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/menu/menu-positions.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/menu/menu-touch-animations.mjs +0 -0
- /package/{esm2020 → esm2022}/table/ifsworld-granite-components-table.mjs +0 -0
- /package/{esm2020 → esm2022}/table/index.mjs +0 -0
- /package/{esm2020 → esm2022}/table/lib/table.types.mjs +0 -0
- /package/{esm2020 → esm2022}/tooltip/ifsworld-granite-components-tooltip.mjs +0 -0
- /package/{esm2020 → esm2022}/tooltip/index.mjs +0 -0
|
@@ -1,396 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, TemplateRef, Directive, Input, Output, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1$1 from '@angular/common';
|
|
4
|
-
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i3 from '@angular/forms';
|
|
6
|
-
import { FormsModule } from '@angular/forms';
|
|
7
|
-
import * as i1$2 from '@angular/cdk/overlay';
|
|
8
|
-
import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
9
|
-
import * as i1 from 'primeng/api';
|
|
10
|
-
import * as i2 from 'primeng/calendar';
|
|
11
|
-
import { CalendarModule } from 'primeng/calendar';
|
|
12
|
-
import * as i4 from '@angular/cdk/a11y';
|
|
13
|
-
import { A11yModule } from '@angular/cdk/a11y';
|
|
14
|
-
import { GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteIconModule, GraniteButtonModule } from '@ifsworld/granite-components';
|
|
15
|
-
import * as i2$1 from '@angular/cdk/bidi';
|
|
16
|
-
import { TemplatePortal } from '@angular/cdk/portal';
|
|
17
|
-
import { Subscription, merge } from 'rxjs';
|
|
18
|
-
|
|
19
|
-
let pickerPanelUid = 0;
|
|
20
|
-
/** Base class with common functionality for date/date-range pickers. */
|
|
21
|
-
// eslint-disable-next-line @angular-eslint/directive-class-suffix
|
|
22
|
-
class _DatePickerBase {
|
|
23
|
-
constructor(_elementRef, config) {
|
|
24
|
-
this._elementRef = _elementRef;
|
|
25
|
-
this.config = config;
|
|
26
|
-
this.minDate = null;
|
|
27
|
-
this.maxDate = null;
|
|
28
|
-
this.firstDayOfWeek = 0;
|
|
29
|
-
this.pickerClosed = new EventEmitter();
|
|
30
|
-
this.xPosition = 'before';
|
|
31
|
-
this.yPosition = 'below';
|
|
32
|
-
/**
|
|
33
|
-
* Used for locating the panel in tests and setting the aria-control attribute
|
|
34
|
-
* for the picker trigger.
|
|
35
|
-
*/
|
|
36
|
-
this.panelId = `granite-date-picker-panel-${pickerPanelUid++}`;
|
|
37
|
-
}
|
|
38
|
-
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
39
|
-
ngOnInit() {
|
|
40
|
-
this.config.setTranslation({
|
|
41
|
-
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
_handleKeydown(event) {
|
|
45
|
-
if (event.key === 'Escape') {
|
|
46
|
-
this.pickerClosed.emit();
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
_DatePickerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: _DatePickerBase, deps: [{ token: i0.ElementRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Directive });
|
|
51
|
-
_DatePickerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: _DatePickerBase, inputs: { minDate: "minDate", maxDate: "maxDate", firstDayOfWeek: "firstDayOfWeek" }, outputs: { pickerClosed: "pickerClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: _DatePickerBase, decorators: [{
|
|
53
|
-
type: Directive
|
|
54
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PrimeNGConfig }]; }, propDecorators: { minDate: [{
|
|
55
|
-
type: Input
|
|
56
|
-
}], maxDate: [{
|
|
57
|
-
type: Input
|
|
58
|
-
}], firstDayOfWeek: [{
|
|
59
|
-
type: Input
|
|
60
|
-
}], pickerClosed: [{
|
|
61
|
-
type: Output
|
|
62
|
-
}], templateRef: [{
|
|
63
|
-
type: ViewChild,
|
|
64
|
-
args: [TemplateRef]
|
|
65
|
-
}] } });
|
|
66
|
-
|
|
67
|
-
class GraniteDatePickerComponent extends _DatePickerBase {
|
|
68
|
-
constructor() {
|
|
69
|
-
super(...arguments);
|
|
70
|
-
this.selectedDate = undefined;
|
|
71
|
-
this.selectionChanged = new EventEmitter();
|
|
72
|
-
}
|
|
73
|
-
dateSelectionChanged(newDate) {
|
|
74
|
-
this.selectedDate = newDate;
|
|
75
|
-
this.selectionChanged.emit(newDate);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
GraniteDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
-
GraniteDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteDatePickerComponent, selector: "granite-date-picker", inputs: { selectedDate: "selectedDate" }, outputs: { selectionChanged: "selectionChanged" }, usesInheritance: true, ngImport: i0, template: "<ng-template>\n <div class=\"granite-date-picker\" cdkTrapFocus>\n <div *ngIf=\"selectedDate; else notSelected\">\n <p-calendar\n [(ngModel)]=\"selectedDate\"\n [focusTrap]=\"true\"\n [showButtonBar]=\"true\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </div>\n <ng-template #notSelected>\n <p-calendar\n [focusTrap]=\"true\"\n [showButtonBar]=\"true\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </ng-template>\n </div>\n</ng-template>\n", styles: ["@import\"~primeicons/primeicons.css\";.granite-date-picker{width:256px}.granite-date-picker .p-component{font-size:var(--granite-font-size-body);font-weight:400;border:0 none solid var(--granite-color-text)}.granite-date-picker .p-datepicker{padding:var(--granite-spacing-16);background:var(--granite-color-background);color:var(--granite-color-text);border:0 solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td>span{width:2rem;height:2rem;border-radius:50%;transition:none;border:1px solid transparent}.granite-date-picker .p-datepicker table th{border-bottom:1px solid var(--granite-color-background-selected);color:var(--granite-color-text);font-weight:400;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td.p-datepicker-today>span{box-shadow:0 0;background:var(--granite-color-background);color:var(--granite-color-text);border-color:var(--granite-color-background-active-hover);width:2rem;height:2rem;outline-offset:-1px}.granite-date-picker .p-datepicker .p-datepicker-header{padding:0;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0 solid rgba(0,0,0,.12);border-top-right-radius:var(--granite-spacing-4);border-top-left-radius:var(--granite-spacing-4);font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-yearpicker-year{width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{box-shadow:0 0;background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-monthpicker-month{font-size:var(--granite-font-size-body-small);width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text);box-shadow:0 0}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-button{color:var(--granite-color-text);background:var(--granite-color-background);padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);transition:0;font-weight:400;border-radius:var(--granite-spacing-4);min-width:0;border:1px solid var(--granite-color-background-selected)}.granite-date-picker .p-button-label{font-weight:400}.granite-date-picker .p-datepicker .p-datepicker-buttonbar{margin-top:var(--granite-spacing-16);padding:0;border-top:0}.granite-date-picker .p-button.p-button-text{background-color:transparent;color:var(--granite-color-text);border-color:var(--granite-color-background-selected)}.granite-date-picker .p-button.p-button-text:enabled:hover,.granite-date-picker .p-button.p-button-outlined:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:enabled:active,.granite-date-picker .p-button.p-button-outlined:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:focus,.granite-date-picker .p-button.p-button-outlined:focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker.granite-date-range-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-info);color:var(--granite-color-text);border:none}.granite-date-picker .p-datepicker table td>span.p-highlight:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:0 0}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--granite-color-background-selected)}.granite-date-picker .pi{font-family:primeicons;font-style:normal;font-size:var(--granite-font-size-body-small);font-weight:200;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:0;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:0 none;outline:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;border:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .p-datepicker-prev,.granite-date-picker .p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--granite-color-text);border:0 none;background:transparent;border-radius:var(--granite-spacing-4);font-weight:300;padding:var(--granite-spacing-8)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev :focus-visible,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next :focus-visible{outline:-webkit-focus-ring-color auto 1px}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--granite-color-text);font-weight:400;padding:var(--granite-spacing-8);background-color:transparent;border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{background:var(--granite-color-background-active-hover);outline:0 none;color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:active{outline:0 none;background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:0rem}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-inline-end:var(--granite-spacing-8)}.granite-date-picker .p-link{outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px;padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);border-radius:var(--granite-spacing-4)}.granite-date-picker .p-link:focus{outline-offset:-2px;outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .hideClearButton{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerComponent, decorators: [{
|
|
81
|
-
type: Component,
|
|
82
|
-
args: [{ selector: 'granite-date-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div class=\"granite-date-picker\" cdkTrapFocus>\n <div *ngIf=\"selectedDate; else notSelected\">\n <p-calendar\n [(ngModel)]=\"selectedDate\"\n [focusTrap]=\"true\"\n [showButtonBar]=\"true\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </div>\n <ng-template #notSelected>\n <p-calendar\n [focusTrap]=\"true\"\n [showButtonBar]=\"true\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </ng-template>\n </div>\n</ng-template>\n", styles: ["@import\"~primeicons/primeicons.css\";.granite-date-picker{width:256px}.granite-date-picker .p-component{font-size:var(--granite-font-size-body);font-weight:400;border:0 none solid var(--granite-color-text)}.granite-date-picker .p-datepicker{padding:var(--granite-spacing-16);background:var(--granite-color-background);color:var(--granite-color-text);border:0 solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td>span{width:2rem;height:2rem;border-radius:50%;transition:none;border:1px solid transparent}.granite-date-picker .p-datepicker table th{border-bottom:1px solid var(--granite-color-background-selected);color:var(--granite-color-text);font-weight:400;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td.p-datepicker-today>span{box-shadow:0 0;background:var(--granite-color-background);color:var(--granite-color-text);border-color:var(--granite-color-background-active-hover);width:2rem;height:2rem;outline-offset:-1px}.granite-date-picker .p-datepicker .p-datepicker-header{padding:0;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0 solid rgba(0,0,0,.12);border-top-right-radius:var(--granite-spacing-4);border-top-left-radius:var(--granite-spacing-4);font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-yearpicker-year{width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{box-shadow:0 0;background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-monthpicker-month{font-size:var(--granite-font-size-body-small);width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text);box-shadow:0 0}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-button{color:var(--granite-color-text);background:var(--granite-color-background);padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);transition:0;font-weight:400;border-radius:var(--granite-spacing-4);min-width:0;border:1px solid var(--granite-color-background-selected)}.granite-date-picker .p-button-label{font-weight:400}.granite-date-picker .p-datepicker .p-datepicker-buttonbar{margin-top:var(--granite-spacing-16);padding:0;border-top:0}.granite-date-picker .p-button.p-button-text{background-color:transparent;color:var(--granite-color-text);border-color:var(--granite-color-background-selected)}.granite-date-picker .p-button.p-button-text:enabled:hover,.granite-date-picker .p-button.p-button-outlined:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:enabled:active,.granite-date-picker .p-button.p-button-outlined:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:focus,.granite-date-picker .p-button.p-button-outlined:focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker.granite-date-range-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-info);color:var(--granite-color-text);border:none}.granite-date-picker .p-datepicker table td>span.p-highlight:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:0 0}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--granite-color-background-selected)}.granite-date-picker .pi{font-family:primeicons;font-style:normal;font-size:var(--granite-font-size-body-small);font-weight:200;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:0;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:0 none;outline:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;border:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .p-datepicker-prev,.granite-date-picker .p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--granite-color-text);border:0 none;background:transparent;border-radius:var(--granite-spacing-4);font-weight:300;padding:var(--granite-spacing-8)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev :focus-visible,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next :focus-visible{outline:-webkit-focus-ring-color auto 1px}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--granite-color-text);font-weight:400;padding:var(--granite-spacing-8);background-color:transparent;border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{background:var(--granite-color-background-active-hover);outline:0 none;color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:active{outline:0 none;background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:0rem}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-inline-end:var(--granite-spacing-8)}.granite-date-picker .p-link{outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px;padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);border-radius:var(--granite-spacing-4)}.granite-date-picker .p-link:focus{outline-offset:-2px;outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .hideClearButton{display:none}\n"] }]
|
|
83
|
-
}], propDecorators: { selectedDate: [{
|
|
84
|
-
type: Input
|
|
85
|
-
}], selectionChanged: [{
|
|
86
|
-
type: Output
|
|
87
|
-
}] } });
|
|
88
|
-
|
|
89
|
-
class GraniteDateRangePickerComponent extends _DatePickerBase {
|
|
90
|
-
constructor() {
|
|
91
|
-
super(...arguments);
|
|
92
|
-
this.selectedDateRange = null;
|
|
93
|
-
this.selectionChanged = new EventEmitter();
|
|
94
|
-
this._selectedDateRangeInternal = null;
|
|
95
|
-
}
|
|
96
|
-
ngOnChanges(changes) {
|
|
97
|
-
if (changes.selectedDateRange) {
|
|
98
|
-
this._selectedDateRangeInternal =
|
|
99
|
-
this.selectedDateRange?.length > 0 ? this.selectedDateRange : null;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
dateRangeSelectionChanged(date) {
|
|
103
|
-
if (this._selectedDateRangeInternal == null ||
|
|
104
|
-
this._selectedDateRangeInternal.length === 0) {
|
|
105
|
-
this._selectedDateRangeInternal = [date];
|
|
106
|
-
}
|
|
107
|
-
else if (this._selectedDateRangeInternal.length === 1) {
|
|
108
|
-
this._selectedDateRangeInternal.push(date);
|
|
109
|
-
}
|
|
110
|
-
else if (this._selectedDateRangeInternal.length === 2 &&
|
|
111
|
-
this._selectedDateRangeInternal[1] != null) {
|
|
112
|
-
this.selectionChanged.emit(this._selectedDateRangeInternal);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
GraniteDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
117
|
-
GraniteDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteDateRangePickerComponent, selector: "granite-date-range-picker", inputs: { selectedDateRange: "selectedDateRange" }, outputs: { selectionChanged: "selectionChanged" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n <div\n class=\"granite-date-picker\"\n [class.granite-date-range-picker]=\"true\"\n cdkTrapFocus\n >\n <div *ngIf=\"_selectedDateRangeInternal !== null; else rangeNotSelected\">\n <p-calendar\n selectionMode=\"range\"\n [(ngModel)]=\"_selectedDateRangeInternal\"\n [focusTrap]=\"true\"\n [showButtonBar]=\"false\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateRangeSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </div>\n <ng-template #rangeNotSelected>\n <p-calendar\n selectionMode=\"range\"\n [focusTrap]=\"true\"\n [showButtonBar]=\"false\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateRangeSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </ng-template>\n </div>\n</ng-template>\n", styles: ["@import\"~primeicons/primeicons.css\";.granite-date-picker{width:256px}.granite-date-picker .p-component{font-size:var(--granite-font-size-body);font-weight:400;border:0 none solid var(--granite-color-text)}.granite-date-picker .p-datepicker{padding:var(--granite-spacing-16);background:var(--granite-color-background);color:var(--granite-color-text);border:0 solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td>span{width:2rem;height:2rem;border-radius:50%;transition:none;border:1px solid transparent}.granite-date-picker .p-datepicker table th{border-bottom:1px solid var(--granite-color-background-selected);color:var(--granite-color-text);font-weight:400;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td.p-datepicker-today>span{box-shadow:0 0;background:var(--granite-color-background);color:var(--granite-color-text);border-color:var(--granite-color-background-active-hover);width:2rem;height:2rem;outline-offset:-1px}.granite-date-picker .p-datepicker .p-datepicker-header{padding:0;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0 solid rgba(0,0,0,.12);border-top-right-radius:var(--granite-spacing-4);border-top-left-radius:var(--granite-spacing-4);font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-yearpicker-year{width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{box-shadow:0 0;background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-monthpicker-month{font-size:var(--granite-font-size-body-small);width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text);box-shadow:0 0}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-button{color:var(--granite-color-text);background:var(--granite-color-background);padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);transition:0;font-weight:400;border-radius:var(--granite-spacing-4);min-width:0;border:1px solid var(--granite-color-background-selected)}.granite-date-picker .p-button-label{font-weight:400}.granite-date-picker .p-datepicker .p-datepicker-buttonbar{margin-top:var(--granite-spacing-16);padding:0;border-top:0}.granite-date-picker .p-button.p-button-text{background-color:transparent;color:var(--granite-color-text);border-color:var(--granite-color-background-selected)}.granite-date-picker .p-button.p-button-text:enabled:hover,.granite-date-picker .p-button.p-button-outlined:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:enabled:active,.granite-date-picker .p-button.p-button-outlined:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:focus,.granite-date-picker .p-button.p-button-outlined:focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker.granite-date-range-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-info);color:var(--granite-color-text);border:none}.granite-date-picker .p-datepicker table td>span.p-highlight:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:0 0}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--granite-color-background-selected)}.granite-date-picker .pi{font-family:primeicons;font-style:normal;font-size:var(--granite-font-size-body-small);font-weight:200;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:0;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:0 none;outline:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;border:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .p-datepicker-prev,.granite-date-picker .p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--granite-color-text);border:0 none;background:transparent;border-radius:var(--granite-spacing-4);font-weight:300;padding:var(--granite-spacing-8)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev :focus-visible,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next :focus-visible{outline:-webkit-focus-ring-color auto 1px}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--granite-color-text);font-weight:400;padding:var(--granite-spacing-8);background-color:transparent;border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{background:var(--granite-color-background-active-hover);outline:0 none;color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:active{outline:0 none;background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:0rem}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-inline-end:var(--granite-spacing-8)}.granite-date-picker .p-link{outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px;padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);border-radius:var(--granite-spacing-4)}.granite-date-picker .p-link:focus{outline-offset:-2px;outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .hideClearButton{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDateRangePickerComponent, decorators: [{
|
|
119
|
-
type: Component,
|
|
120
|
-
args: [{ selector: 'granite-date-range-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"granite-date-picker\"\n [class.granite-date-range-picker]=\"true\"\n cdkTrapFocus\n >\n <div *ngIf=\"_selectedDateRangeInternal !== null; else rangeNotSelected\">\n <p-calendar\n selectionMode=\"range\"\n [(ngModel)]=\"_selectedDateRangeInternal\"\n [focusTrap]=\"true\"\n [showButtonBar]=\"false\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateRangeSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </div>\n <ng-template #rangeNotSelected>\n <p-calendar\n selectionMode=\"range\"\n [focusTrap]=\"true\"\n [showButtonBar]=\"false\"\n [inline]=\"true\"\n [showIcon]=\"false\"\n [clearButtonStyleClass]=\"'hideClearButton'\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [showWeek]=\"false\"\n [touchUI]=\"clientOutput.device === 'touch'\"\n (onSelect)=\"dateRangeSelectionChanged($event)\"\n (keydown)=\"_handleKeydown($event)\"\n ></p-calendar>\n </ng-template>\n </div>\n</ng-template>\n", styles: ["@import\"~primeicons/primeicons.css\";.granite-date-picker{width:256px}.granite-date-picker .p-component{font-size:var(--granite-font-size-body);font-weight:400;border:0 none solid var(--granite-color-text)}.granite-date-picker .p-datepicker{padding:var(--granite-spacing-16);background:var(--granite-color-background);color:var(--granite-color-text);border:0 solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td>span{width:2rem;height:2rem;border-radius:50%;transition:none;border:1px solid transparent}.granite-date-picker .p-datepicker table th{border-bottom:1px solid var(--granite-color-background-selected);color:var(--granite-color-text);font-weight:400;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td.p-datepicker-today>span{box-shadow:0 0;background:var(--granite-color-background);color:var(--granite-color-text);border-color:var(--granite-color-background-active-hover);width:2rem;height:2rem;outline-offset:-1px}.granite-date-picker .p-datepicker .p-datepicker-header{padding:0;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0 solid rgba(0,0,0,.12);border-top-right-radius:var(--granite-spacing-4);border-top-left-radius:var(--granite-spacing-4);font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-yearpicker-year{width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{box-shadow:0 0;background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-monthpicker-month{font-size:var(--granite-font-size-body-small);width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text);box-shadow:0 0}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-button{color:var(--granite-color-text);background:var(--granite-color-background);padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);transition:0;font-weight:400;border-radius:var(--granite-spacing-4);min-width:0;border:1px solid var(--granite-color-background-selected)}.granite-date-picker .p-button-label{font-weight:400}.granite-date-picker .p-datepicker .p-datepicker-buttonbar{margin-top:var(--granite-spacing-16);padding:0;border-top:0}.granite-date-picker .p-button.p-button-text{background-color:transparent;color:var(--granite-color-text);border-color:var(--granite-color-background-selected)}.granite-date-picker .p-button.p-button-text:enabled:hover,.granite-date-picker .p-button.p-button-outlined:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:enabled:active,.granite-date-picker .p-button.p-button-outlined:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:focus,.granite-date-picker .p-button.p-button-outlined:focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker.granite-date-range-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-info);color:var(--granite-color-text);border:none}.granite-date-picker .p-datepicker table td>span.p-highlight:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:0 0}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--granite-color-background-selected)}.granite-date-picker .pi{font-family:primeicons;font-style:normal;font-size:var(--granite-font-size-body-small);font-weight:200;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:0;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:0 none;outline:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;border:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .p-datepicker-prev,.granite-date-picker .p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--granite-color-text);border:0 none;background:transparent;border-radius:var(--granite-spacing-4);font-weight:300;padding:var(--granite-spacing-8)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev :focus-visible,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next :focus-visible{outline:-webkit-focus-ring-color auto 1px}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--granite-color-text);font-weight:400;padding:var(--granite-spacing-8);background-color:transparent;border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{background:var(--granite-color-background-active-hover);outline:0 none;color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:active{outline:0 none;background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:0rem}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-inline-end:var(--granite-spacing-8)}.granite-date-picker .p-link{outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px;padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);border-radius:var(--granite-spacing-4)}.granite-date-picker .p-link:focus{outline-offset:-2px;outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .hideClearButton{display:none}\n"] }]
|
|
121
|
-
}], propDecorators: { selectedDateRange: [{
|
|
122
|
-
type: Input
|
|
123
|
-
}], selectionChanged: [{
|
|
124
|
-
type: Output
|
|
125
|
-
}] } });
|
|
126
|
-
|
|
127
|
-
class GraniteDatePickerTriggerForDirective {
|
|
128
|
-
constructor(_overlay, _element, _viewContainerRef, _outsideClickDispatcher,
|
|
129
|
-
/** Client input device information */
|
|
130
|
-
_clientInput,
|
|
131
|
-
/** Client output device information */
|
|
132
|
-
_clientOutput, _dir, _focusMonitor) {
|
|
133
|
-
this._overlay = _overlay;
|
|
134
|
-
this._element = _element;
|
|
135
|
-
this._viewContainerRef = _viewContainerRef;
|
|
136
|
-
this._outsideClickDispatcher = _outsideClickDispatcher;
|
|
137
|
-
this._clientInput = _clientInput;
|
|
138
|
-
this._clientOutput = _clientOutput;
|
|
139
|
-
this._dir = _dir;
|
|
140
|
-
this._focusMonitor = _focusMonitor;
|
|
141
|
-
/** Whether the associated picker is open */
|
|
142
|
-
this._isPickerOpen = false;
|
|
143
|
-
this._pickerCloseSubscription = Subscription.EMPTY;
|
|
144
|
-
this._portal = null;
|
|
145
|
-
this._overlayRef = null;
|
|
146
|
-
}
|
|
147
|
-
ngAfterContentInit() {
|
|
148
|
-
const selectionChanged = this.picker.selectionChanged;
|
|
149
|
-
const closed = this.picker.pickerClosed;
|
|
150
|
-
this._pickerCloseSubscription = merge(selectionChanged, closed).subscribe(() => {
|
|
151
|
-
this.closePicker();
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
ngOnDestroy() {
|
|
155
|
-
if (this._overlayRef) {
|
|
156
|
-
this._overlayRef.dispose();
|
|
157
|
-
this._overlayRef = null;
|
|
158
|
-
}
|
|
159
|
-
this._pickerCloseSubscription.unsubscribe();
|
|
160
|
-
}
|
|
161
|
-
isOpen() {
|
|
162
|
-
return this._isPickerOpen;
|
|
163
|
-
}
|
|
164
|
-
openPicker() {
|
|
165
|
-
if (this._isPickerOpen) {
|
|
166
|
-
return;
|
|
167
|
-
}
|
|
168
|
-
this.picker.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
|
|
169
|
-
this.picker.clientInput = this._clientInput;
|
|
170
|
-
this.picker.clientOutput = this._clientOutput;
|
|
171
|
-
const panelClass = [];
|
|
172
|
-
if (this._clientOutput?.device === 'touch') {
|
|
173
|
-
panelClass.push('granite-overlay-pane-center');
|
|
174
|
-
}
|
|
175
|
-
const scrollStrategy = this._clientOutput?.device !== 'touch'
|
|
176
|
-
? this._overlay.scrollStrategies.reposition()
|
|
177
|
-
: this._overlay.scrollStrategies.block();
|
|
178
|
-
const hasBackdrop = this._clientOutput?.device === 'touch';
|
|
179
|
-
if (!this._overlayRef) {
|
|
180
|
-
const config = new OverlayConfig({
|
|
181
|
-
positionStrategy: this._positionStrategy(),
|
|
182
|
-
backdropClass: 'granite-overlay-dark-glass-backdrop',
|
|
183
|
-
scrollStrategy,
|
|
184
|
-
direction: this._dir,
|
|
185
|
-
panelClass,
|
|
186
|
-
hasBackdrop,
|
|
187
|
-
});
|
|
188
|
-
this._overlayRef = this._overlay.create(config);
|
|
189
|
-
}
|
|
190
|
-
if (!this._portal || this._portal.templateRef !== this.picker.templateRef) {
|
|
191
|
-
this._portal = new TemplatePortal(this.picker.templateRef, this._viewContainerRef);
|
|
192
|
-
}
|
|
193
|
-
// Attach portal to overlay ref (which is a portal outlet)
|
|
194
|
-
this._overlayRef.attach(this._portal);
|
|
195
|
-
this._outsideClickDispatcher.add(this._overlayRef);
|
|
196
|
-
this._overlayRef.outsidePointerEvents().subscribe((event) => {
|
|
197
|
-
event.stopPropagation();
|
|
198
|
-
this.closePicker();
|
|
199
|
-
});
|
|
200
|
-
this._isPickerOpen = true;
|
|
201
|
-
}
|
|
202
|
-
/** Toggles the picker between the open and closed states. */
|
|
203
|
-
togglePicker() {
|
|
204
|
-
if (this._isPickerOpen) {
|
|
205
|
-
this.closePicker();
|
|
206
|
-
}
|
|
207
|
-
else {
|
|
208
|
-
this.openPicker();
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
/** Close the associated picker */
|
|
212
|
-
closePicker() {
|
|
213
|
-
if (!this._overlayRef || !this._isPickerOpen) {
|
|
214
|
-
return;
|
|
215
|
-
}
|
|
216
|
-
this._outsideClickDispatcher.remove(this._overlayRef);
|
|
217
|
-
this._overlayRef.detach();
|
|
218
|
-
this._restoreFocus();
|
|
219
|
-
this._isPickerOpen = false;
|
|
220
|
-
}
|
|
221
|
-
/** Handles key presses on the trigger. */
|
|
222
|
-
_handleKeydown(event) {
|
|
223
|
-
if (event.key === 'Enter') {
|
|
224
|
-
event.preventDefault();
|
|
225
|
-
this.togglePicker();
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
/** Handles click events on the trigger. */
|
|
229
|
-
_handleClick() {
|
|
230
|
-
this.togglePicker();
|
|
231
|
-
}
|
|
232
|
-
/**
|
|
233
|
-
* Restores focus to the element that was focused before the picker was open.
|
|
234
|
-
*/
|
|
235
|
-
_restoreFocus(origin = 'program', options) {
|
|
236
|
-
if (this._focusMonitor) {
|
|
237
|
-
this._focusMonitor.focusVia(this._element, origin, options);
|
|
238
|
-
}
|
|
239
|
-
else {
|
|
240
|
-
this._element.nativeElement.focus(options);
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
/**
|
|
244
|
-
* Returns strategy for positioning the overlay for desktop devices:
|
|
245
|
-
*/
|
|
246
|
-
_desktopPositionStrategy() {
|
|
247
|
-
const positionStrategy = this._overlay
|
|
248
|
-
.position()
|
|
249
|
-
.flexibleConnectedTo(this._element)
|
|
250
|
-
.withLockedPosition()
|
|
251
|
-
.withTransformOriginOn('.granite-date-picker')
|
|
252
|
-
.withPush(false);
|
|
253
|
-
this._setPosition(positionStrategy);
|
|
254
|
-
return positionStrategy;
|
|
255
|
-
}
|
|
256
|
-
/**
|
|
257
|
-
* Sets the appropriate positions on a position strategy
|
|
258
|
-
* so the overlay connects with the trigger correctly.
|
|
259
|
-
* @param positionStrategy Strategy whose position to update.
|
|
260
|
-
*/
|
|
261
|
-
_setPosition(positionStrategy) {
|
|
262
|
-
const [originX, originFallbackX] = this.picker.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
|
|
263
|
-
const [overlayY, overlayFallbackY] = this.picker.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
|
|
264
|
-
let [originY, originFallbackY] = [overlayY, overlayFallbackY];
|
|
265
|
-
const [overlayX, overlayFallbackX] = [originX, originFallbackX];
|
|
266
|
-
const offsetY = 0;
|
|
267
|
-
originY = overlayY === 'top' ? 'bottom' : 'top';
|
|
268
|
-
originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
|
|
269
|
-
positionStrategy.withPositions([
|
|
270
|
-
{ originX, originY, overlayX, overlayY, offsetY },
|
|
271
|
-
{
|
|
272
|
-
originX: originFallbackX,
|
|
273
|
-
originY,
|
|
274
|
-
overlayX: overlayFallbackX,
|
|
275
|
-
overlayY,
|
|
276
|
-
offsetY,
|
|
277
|
-
},
|
|
278
|
-
{
|
|
279
|
-
originX,
|
|
280
|
-
originY: originFallbackY,
|
|
281
|
-
overlayX,
|
|
282
|
-
overlayY: overlayFallbackY,
|
|
283
|
-
offsetY: -offsetY,
|
|
284
|
-
},
|
|
285
|
-
{
|
|
286
|
-
originX: originFallbackX,
|
|
287
|
-
originY: originFallbackY,
|
|
288
|
-
overlayX: overlayFallbackX,
|
|
289
|
-
overlayY: overlayFallbackY,
|
|
290
|
-
offsetY: -offsetY,
|
|
291
|
-
},
|
|
292
|
-
]);
|
|
293
|
-
}
|
|
294
|
-
/**
|
|
295
|
-
* Returns strategy for positioning the overlay depending on what type of
|
|
296
|
-
* device the picker is being shown on
|
|
297
|
-
*/
|
|
298
|
-
_positionStrategy() {
|
|
299
|
-
if (this._clientOutput?.device !== 'touch') {
|
|
300
|
-
return this._desktopPositionStrategy();
|
|
301
|
-
}
|
|
302
|
-
return this._touchPositionStrategy();
|
|
303
|
-
}
|
|
304
|
-
/**
|
|
305
|
-
* Returns strategy for positioning the overlay for touch devices:
|
|
306
|
-
* Place centered in the screen.
|
|
307
|
-
*/
|
|
308
|
-
_touchPositionStrategy() {
|
|
309
|
-
return this._overlay.position().global();
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
GraniteDatePickerTriggerForDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: i2$1.Directionality, optional: true }, { token: i4.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive });
|
|
313
|
-
GraniteDatePickerTriggerForDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: GraniteDatePickerTriggerForDirective, selector: "[graniteDatePickerTriggerFor]", inputs: { picker: ["graniteDatePickerTriggerFor", "picker"] }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isPickerOpen || null", "attr.aria-controls": "_isPickerOpen ? picker.panelId : null" }, classAttribute: "granite-date-picker-trigger" }, ngImport: i0 });
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerTriggerForDirective, decorators: [{
|
|
315
|
-
type: Directive,
|
|
316
|
-
args: [{
|
|
317
|
-
selector: `[graniteDatePickerTriggerFor]`,
|
|
318
|
-
host: {
|
|
319
|
-
class: 'granite-date-picker-trigger',
|
|
320
|
-
'aria-haspopup': 'true',
|
|
321
|
-
'[attr.aria-expanded]': '_isPickerOpen || null',
|
|
322
|
-
'[attr.aria-controls]': '_isPickerOpen ? picker.panelId : null',
|
|
323
|
-
'(keydown)': '_handleKeydown($event)',
|
|
324
|
-
'(click)': '_handleClick($event)',
|
|
325
|
-
},
|
|
326
|
-
}]
|
|
327
|
-
}], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayOutsideClickDispatcher }, { type: undefined, decorators: [{
|
|
328
|
-
type: Inject,
|
|
329
|
-
args: [GRANITE_CLIENT_INPUT]
|
|
330
|
-
}, {
|
|
331
|
-
type: Optional
|
|
332
|
-
}] }, { type: undefined, decorators: [{
|
|
333
|
-
type: Inject,
|
|
334
|
-
args: [GRANITE_CLIENT_OUTPUT]
|
|
335
|
-
}, {
|
|
336
|
-
type: Optional
|
|
337
|
-
}] }, { type: i2$1.Directionality, decorators: [{
|
|
338
|
-
type: Optional
|
|
339
|
-
}] }, { type: i4.FocusMonitor }]; }, propDecorators: { picker: [{
|
|
340
|
-
type: Input,
|
|
341
|
-
args: ['graniteDatePickerTriggerFor']
|
|
342
|
-
}] } });
|
|
343
|
-
|
|
344
|
-
class GraniteDatePickerModule {
|
|
345
|
-
}
|
|
346
|
-
GraniteDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
347
|
-
GraniteDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerModule, declarations: [GraniteDatePickerComponent,
|
|
348
|
-
GraniteDateRangePickerComponent,
|
|
349
|
-
GraniteDatePickerTriggerForDirective], imports: [CommonModule,
|
|
350
|
-
OverlayModule,
|
|
351
|
-
CalendarModule,
|
|
352
|
-
FormsModule,
|
|
353
|
-
GraniteIconModule,
|
|
354
|
-
GraniteButtonModule,
|
|
355
|
-
A11yModule], exports: [GraniteDatePickerComponent,
|
|
356
|
-
GraniteDateRangePickerComponent,
|
|
357
|
-
GraniteDatePickerTriggerForDirective] });
|
|
358
|
-
GraniteDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerModule, imports: [CommonModule,
|
|
359
|
-
OverlayModule,
|
|
360
|
-
CalendarModule,
|
|
361
|
-
FormsModule,
|
|
362
|
-
GraniteIconModule,
|
|
363
|
-
GraniteButtonModule,
|
|
364
|
-
A11yModule] });
|
|
365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerModule, decorators: [{
|
|
366
|
-
type: NgModule,
|
|
367
|
-
args: [{
|
|
368
|
-
declarations: [
|
|
369
|
-
GraniteDatePickerComponent,
|
|
370
|
-
GraniteDateRangePickerComponent,
|
|
371
|
-
GraniteDatePickerTriggerForDirective,
|
|
372
|
-
],
|
|
373
|
-
imports: [
|
|
374
|
-
CommonModule,
|
|
375
|
-
OverlayModule,
|
|
376
|
-
CalendarModule,
|
|
377
|
-
FormsModule,
|
|
378
|
-
GraniteIconModule,
|
|
379
|
-
GraniteButtonModule,
|
|
380
|
-
A11yModule,
|
|
381
|
-
],
|
|
382
|
-
exports: [
|
|
383
|
-
GraniteDatePickerComponent,
|
|
384
|
-
GraniteDateRangePickerComponent,
|
|
385
|
-
GraniteDatePickerTriggerForDirective,
|
|
386
|
-
],
|
|
387
|
-
providers: [],
|
|
388
|
-
}]
|
|
389
|
-
}] });
|
|
390
|
-
|
|
391
|
-
/**
|
|
392
|
-
* Generated bundle index. Do not edit.
|
|
393
|
-
*/
|
|
394
|
-
|
|
395
|
-
export { GraniteDatePickerComponent, GraniteDatePickerModule, GraniteDatePickerTriggerForDirective, GraniteDateRangePickerComponent };
|
|
396
|
-
//# sourceMappingURL=ifsworld-granite-components-date-picker.mjs.map
|