@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.
Files changed (144) hide show
  1. package/date-picker/lib/date-picker-base.d.ts +1 -1
  2. package/date-picker/lib/date-picker-trigger-for.directive.d.ts +1 -1
  3. package/date-picker/lib/date-picker.component.d.ts +1 -1
  4. package/date-picker/lib/date-range-picker.component.d.ts +1 -1
  5. package/{esm2020 → esm2022}/date-picker/lib/date-picker-base.mjs +4 -4
  6. package/{esm2020 → esm2022}/date-picker/lib/date-picker-trigger-for.directive.mjs +4 -4
  7. package/esm2022/date-picker/lib/date-picker.component.mjs +30 -0
  8. package/{esm2020 → esm2022}/date-picker/lib/date-picker.module.mjs +21 -21
  9. package/esm2022/date-picker/lib/date-range-picker.component.mjs +46 -0
  10. package/{esm2020 → esm2022}/lib/arrange-grid/arrange-grid-item.component.mjs +12 -12
  11. package/{esm2020 → esm2022}/lib/arrange-grid/arrange-grid.component.mjs +7 -7
  12. package/{esm2020 → esm2022}/lib/arrange-grid/arrange-grid.module.mjs +5 -5
  13. package/{esm2020 → esm2022}/lib/badge/badge.component.mjs +4 -4
  14. package/{esm2020 → esm2022}/lib/badge/badge.module.mjs +5 -5
  15. package/esm2022/lib/badge/testing/badge.harness.mjs +25 -0
  16. package/esm2022/lib/button/button.component.mjs +87 -0
  17. package/{esm2020 → esm2022}/lib/button/button.module.mjs +5 -5
  18. package/{esm2020 → esm2022}/lib/checkbox/checkbox-group.component.mjs +4 -4
  19. package/{esm2020 → esm2022}/lib/checkbox/checkbox.component.mjs +4 -4
  20. package/{esm2020 → esm2022}/lib/checkbox/checkbox.module.mjs +5 -5
  21. package/esm2022/lib/chips/chip-input.mjs +195 -0
  22. package/esm2022/lib/chips/chip-list.component.mjs +567 -0
  23. package/esm2022/lib/chips/chip.component.mjs +287 -0
  24. package/{esm2020 → esm2022}/lib/chips/chips.module.mjs +9 -9
  25. package/{esm2020 → esm2022}/lib/core/common-behaviors/disabled.mjs +4 -4
  26. package/{esm2020 → esm2022}/lib/core/core.module.mjs +11 -11
  27. package/esm2022/lib/core/devices/client-input-desktop.directive.mjs +29 -0
  28. package/esm2022/lib/core/devices/client-input-touch.directive.mjs +29 -0
  29. package/esm2022/lib/core/devices/client-output-desktop.directive.mjs +29 -0
  30. package/esm2022/lib/core/devices/client-output-touch.directive.mjs +29 -0
  31. package/{esm2020 → esm2022}/lib/core/pipes/pure-pipes.module.mjs +5 -5
  32. package/{esm2020 → esm2022}/lib/core/pipes/title.pipe.mjs +4 -4
  33. package/{esm2020 → esm2022}/lib/core/radio-checkbox-base.mjs +4 -4
  34. package/{esm2020 → esm2022}/lib/grid/grid.component.mjs +7 -7
  35. package/{esm2020 → esm2022}/lib/grid/grid.module.mjs +5 -5
  36. package/{esm2020 → esm2022}/lib/icon/icon.component.mjs +4 -4
  37. package/{esm2020 → esm2022}/lib/icon/icon.module.mjs +5 -5
  38. package/{esm2020 → esm2022}/lib/input-field/input-field.component.mjs +5 -5
  39. package/{esm2020 → esm2022}/lib/input-field/input-field.module.mjs +5 -5
  40. package/{esm2020 → esm2022}/lib/label/label.component.mjs +4 -4
  41. package/{esm2020 → esm2022}/lib/label/label.module.mjs +5 -5
  42. package/{esm2020 → esm2022}/lib/menu/divider.directive.mjs +4 -4
  43. package/{esm2020 → esm2022}/lib/menu/menu-base.mjs +4 -4
  44. package/{esm2020 → esm2022}/lib/menu/menu-item.component.mjs +6 -6
  45. package/{esm2020 → esm2022}/lib/menu/menu-touch-close.component.mjs +4 -4
  46. package/{esm2020 → esm2022}/lib/menu/menu-touch-title.component.mjs +6 -6
  47. package/{esm2020 → esm2022}/lib/menu/menu-trigger-for.directive.mjs +4 -4
  48. package/{esm2020 → esm2022}/lib/menu/menu.component.mjs +10 -10
  49. package/{esm2020 → esm2022}/lib/menu/menu.module.mjs +17 -17
  50. package/esm2022/lib/menu/testing/menu.harness.mjs +109 -0
  51. package/{esm2020 → esm2022}/lib/menu/title.directive.mjs +4 -4
  52. package/{esm2020 → esm2022}/lib/radio-button/radio-button.component.mjs +4 -4
  53. package/{esm2020 → esm2022}/lib/radio-button/radio-button.module.mjs +5 -5
  54. package/{esm2020 → esm2022}/lib/radio-button/radio-group.component.mjs +4 -4
  55. package/{esm2020 → esm2022}/lib/toggle-switch/toggle-switch.component.mjs +4 -4
  56. package/{esm2020 → esm2022}/lib/toggle-switch/toggle-switch.module.mjs +5 -5
  57. package/{esm2020 → esm2022}/table/lib/cell/cell-align/cell-align-classes.directive.mjs +4 -4
  58. package/{esm2020 → esm2022}/table/lib/cell/cell.mjs +4 -4
  59. package/{esm2020 → esm2022}/table/lib/cell/table-data-cell.component.mjs +5 -5
  60. package/{esm2020 → esm2022}/table/lib/cell/table-header-cell.component.mjs +4 -4
  61. package/{esm2020 → esm2022}/table/lib/column/table-column.directive.mjs +4 -4
  62. package/esm2022/table/lib/table-constants.library.mjs +9 -0
  63. package/{esm2020 → esm2022}/table/lib/table.component.mjs +4 -4
  64. package/{esm2020 → esm2022}/table/lib/table.module.mjs +9 -9
  65. package/{esm2020 → esm2022}/tooltip/lib/tooltip-constants.library.mjs +2 -2
  66. package/{esm2020 → esm2022}/tooltip/lib/tooltip-trigger-for.directive.mjs +4 -4
  67. package/{esm2020 → esm2022}/tooltip/lib/tooltip.component.mjs +4 -4
  68. package/{esm2020 → esm2022}/tooltip/lib/tooltip.module.mjs +5 -5
  69. package/fesm2022/ifsworld-granite-components-date-picker.mjs +396 -0
  70. package/{fesm2020 → fesm2022}/ifsworld-granite-components-date-picker.mjs.map +1 -1
  71. package/fesm2022/ifsworld-granite-components-table.mjs +190 -0
  72. package/{fesm2015 → fesm2022}/ifsworld-granite-components-table.mjs.map +1 -1
  73. package/{fesm2020 → fesm2022}/ifsworld-granite-components-tooltip.mjs +11 -11
  74. package/{fesm2020 → fesm2022}/ifsworld-granite-components-tooltip.mjs.map +1 -1
  75. package/{fesm2020 → fesm2022}/ifsworld-granite-components.mjs +337 -337
  76. package/fesm2022/ifsworld-granite-components.mjs.map +1 -0
  77. package/lib/arrange-grid/arrange-grid-item.component.d.ts +5 -5
  78. package/lib/arrange-grid/arrange-grid.component.d.ts +3 -3
  79. package/lib/badge/badge.component.d.ts +1 -1
  80. package/lib/button/button.component.d.ts +2 -2
  81. package/lib/checkbox/checkbox.component.d.ts +1 -1
  82. package/lib/chips/chip-input.d.ts +9 -9
  83. package/lib/chips/chip-list.component.d.ts +33 -33
  84. package/lib/chips/chip.component.d.ts +22 -22
  85. package/lib/core/radio-checkbox-base.d.ts +1 -1
  86. package/lib/grid/grid.component.d.ts +2 -2
  87. package/lib/icon/icon.component.d.ts +1 -1
  88. package/lib/input-field/input-field.component.d.ts +1 -1
  89. package/lib/label/label.component.d.ts +1 -1
  90. package/lib/menu/divider.directive.d.ts +1 -1
  91. package/lib/menu/menu-base.d.ts +1 -1
  92. package/lib/menu/menu-item.component.d.ts +1 -1
  93. package/lib/menu/menu-trigger-for.directive.d.ts +1 -1
  94. package/lib/radio-button/radio-button.component.d.ts +1 -1
  95. package/lib/toggle-switch/toggle-switch.component.d.ts +1 -1
  96. package/package.json +21 -40
  97. package/table/lib/cell/cell-align/cell-align-classes.directive.d.ts +1 -1
  98. package/table/lib/cell/cell.d.ts +1 -1
  99. package/table/lib/cell/table-data-cell.component.d.ts +1 -1
  100. package/table/lib/column/table-column.directive.d.ts +1 -1
  101. package/table/lib/table.component.d.ts +1 -1
  102. package/tooltip/lib/tooltip-trigger-for.directive.d.ts +1 -1
  103. package/esm2020/date-picker/lib/date-picker.component.mjs +0 -30
  104. package/esm2020/date-picker/lib/date-range-picker.component.mjs +0 -46
  105. package/esm2020/lib/badge/testing/badge.harness.mjs +0 -25
  106. package/esm2020/lib/button/button.component.mjs +0 -87
  107. package/esm2020/lib/chips/chip-input.mjs +0 -195
  108. package/esm2020/lib/chips/chip-list.component.mjs +0 -567
  109. package/esm2020/lib/chips/chip.component.mjs +0 -287
  110. package/esm2020/lib/core/devices/client-input-desktop.directive.mjs +0 -29
  111. package/esm2020/lib/core/devices/client-input-touch.directive.mjs +0 -29
  112. package/esm2020/lib/core/devices/client-output-desktop.directive.mjs +0 -29
  113. package/esm2020/lib/core/devices/client-output-touch.directive.mjs +0 -29
  114. package/esm2020/lib/menu/testing/menu.harness.mjs +0 -109
  115. package/esm2020/table/lib/table-constants.library.mjs +0 -9
  116. package/fesm2015/ifsworld-granite-components-date-picker.mjs +0 -401
  117. package/fesm2015/ifsworld-granite-components-date-picker.mjs.map +0 -1
  118. package/fesm2015/ifsworld-granite-components-table.mjs +0 -190
  119. package/fesm2015/ifsworld-granite-components-tooltip.mjs +0 -169
  120. package/fesm2015/ifsworld-granite-components-tooltip.mjs.map +0 -1
  121. package/fesm2015/ifsworld-granite-components.mjs +0 -4132
  122. package/fesm2015/ifsworld-granite-components.mjs.map +0 -1
  123. package/fesm2020/ifsworld-granite-components-date-picker.mjs +0 -396
  124. package/fesm2020/ifsworld-granite-components-table.mjs +0 -190
  125. package/fesm2020/ifsworld-granite-components-table.mjs.map +0 -1
  126. package/fesm2020/ifsworld-granite-components.mjs.map +0 -1
  127. /package/{esm2020 → esm2022}/date-picker/ifsworld-granite-components-date-picker.mjs +0 -0
  128. /package/{esm2020 → esm2022}/date-picker/index.mjs +0 -0
  129. /package/{esm2020 → esm2022}/ifsworld-granite-components.mjs +0 -0
  130. /package/{esm2020 → esm2022}/index.mjs +0 -0
  131. /package/{esm2020 → esm2022}/lib/core/animation.mjs +0 -0
  132. /package/{esm2020 → esm2022}/lib/core/client-environment.mjs +0 -0
  133. /package/{esm2020 → esm2022}/lib/core/theme.library.mjs +0 -0
  134. /package/{esm2020 → esm2022}/lib/core/types.mjs +0 -0
  135. /package/{esm2020 → esm2022}/lib/menu/menu-desktop-animations.mjs +0 -0
  136. /package/{esm2020 → esm2022}/lib/menu/menu-errors.mjs +0 -0
  137. /package/{esm2020 → esm2022}/lib/menu/menu-panel.mjs +0 -0
  138. /package/{esm2020 → esm2022}/lib/menu/menu-positions.mjs +0 -0
  139. /package/{esm2020 → esm2022}/lib/menu/menu-touch-animations.mjs +0 -0
  140. /package/{esm2020 → esm2022}/table/ifsworld-granite-components-table.mjs +0 -0
  141. /package/{esm2020 → esm2022}/table/index.mjs +0 -0
  142. /package/{esm2020 → esm2022}/table/lib/table.types.mjs +0 -0
  143. /package/{esm2020 → esm2022}/tooltip/ifsworld-granite-components-tooltip.mjs +0 -0
  144. /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