@ifsworld/granite-components 10.0.0 → 10.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/README.md +4 -28
- package/esm2020/date-picker/lib/date-picker.component.mjs +2 -2
- package/esm2020/date-picker/lib/date-range-picker.component.mjs +2 -2
- package/esm2020/lib/badge/badge.component.mjs +2 -2
- package/esm2020/lib/menu/menu-trigger-for.directive.mjs +2 -3
- package/esm2020/lib/menu/menu.component.mjs +3 -3
- package/esm2020/tooltip/lib/tooltip.component.mjs +2 -2
- package/fesm2015/ifsworld-granite-components-date-picker.mjs +4 -4
- package/fesm2015/ifsworld-granite-components-date-picker.mjs.map +1 -1
- package/fesm2015/ifsworld-granite-components-tooltip.mjs +2 -2
- package/fesm2015/ifsworld-granite-components-tooltip.mjs.map +1 -1
- package/fesm2015/ifsworld-granite-components.mjs +5 -6
- package/fesm2015/ifsworld-granite-components.mjs.map +1 -1
- package/fesm2020/ifsworld-granite-components-date-picker.mjs +4 -4
- package/fesm2020/ifsworld-granite-components-date-picker.mjs.map +1 -1
- package/fesm2020/ifsworld-granite-components-tooltip.mjs +2 -2
- package/fesm2020/ifsworld-granite-components-tooltip.mjs.map +1 -1
- package/fesm2020/ifsworld-granite-components.mjs +5 -6
- package/fesm2020/ifsworld-granite-components.mjs.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,12 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
This library is an Angular implementation of the [IFS Design System](https://design.ifs.com). The IFS User Experience product group builds and maintains common UI components and tools. [The goal](docs/strategy.md) is to help product teams rapidly build applications with a delightful IFS branded experience.
|
|
4
4
|
|
|
5
|
-
|
|
7
|
-
[](https://snyk.io/advisor/npm-package/@ifsworld/granite-components)
|
|
8
|
-
|
|
9
|
-
[](http://commitizen.github.io/cz-cli/)
|
|
10
|
-
[](https://github.com/semantic-release/semantic-release)
|
|
5
|
+
[](https://angular.io/guide/creating-libraries#ensuring-library-version-compatibility)
|
|
11
6
|
[](https://uxstorybooklatest.z16.web.core.windows.net/)
|
|
12
7
|
|
|
13
8
|
## Deployments
|
|
@@ -53,21 +48,7 @@ Finally, add them in `src/styles.scss`:
|
|
|
53
48
|
|
|
54
49
|
### Support
|
|
55
50
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
| Angular / Library | 0.x.x | 1.x.x | 2.x.x | 3.x.x | 4.x.x | 5.x.x |
|
|
59
|
-
| ----------------- | ----- | ----- | ----- | ----- | ----- | ----- |
|
|
60
|
-
| 10 | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
|
|
61
|
-
| 11 | ✅ | 🔶 | ✅ | ✅ | ✅ | ❌ |
|
|
62
|
-
| 12 | ✅ | ✅ | ✅ | ✅ | 🔶 | ❌ |
|
|
63
|
-
| 13 | ✅ | ✅ | ✅ | ✅ | 🔶 | ✅ |
|
|
64
|
-
| 14 | 🔶 | 🔶 | 🔶 | 🔶 | 🔶 | 🔶 |
|
|
65
|
-
|
|
66
|
-
_Note: we plan to only support our latest release. Beyond that we make no guarantees of continued support._
|
|
67
|
-
|
|
68
|
-
❌ unsupported
|
|
69
|
-
🔶 limited support
|
|
70
|
-
✅ fully supported
|
|
51
|
+
_Note: we only support our latest release. Beyond that we make no guarantees of continued support. Make sure to stay up to date._
|
|
71
52
|
|
|
72
53
|
## Contributing
|
|
73
54
|
|
|
@@ -85,14 +66,9 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
|
|
|
85
66
|
- [Create your Standalone Angular Library in 10 minutes](https://indepth.dev/create-your-standalone-angular-library-in-10-minutes/)
|
|
86
67
|
- [Creating monorepos using NX](https://nx.dev/)
|
|
87
68
|
|
|
88
|
-
## What we're working on now
|
|
69
|
+
## What we're working on now
|
|
89
70
|
|
|
90
|
-
|
|
91
|
-
- Date Picker Control
|
|
92
|
-
- Advance Input Control
|
|
93
|
-
- Advance Table Control
|
|
94
|
-
- Rating Control
|
|
95
|
-
- Label Control
|
|
71
|
+
Visit <https://design.ifs.com> to learn more.
|
|
96
72
|
|
|
97
73
|
## About the product group
|
|
98
74
|
|
|
@@ -18,10 +18,10 @@ export class GraniteDatePickerComponent extends _DatePickerBase {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
GraniteDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
-
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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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.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 });
|
|
21
|
+
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.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 });
|
|
22
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDatePickerComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
|
-
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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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"] }]
|
|
24
|
+
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"] }]
|
|
25
25
|
}], propDecorators: { selectedDate: [{
|
|
26
26
|
type: Input
|
|
27
27
|
}], selectionChanged: [{
|
|
@@ -34,10 +34,10 @@ export class GraniteDateRangePickerComponent extends _DatePickerBase {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
GraniteDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
-
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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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.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 });
|
|
37
|
+
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.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 });
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteDateRangePickerComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
|
-
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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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:var(--granite-spacing-32);height:var(--granite-spacing-32);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"] }]
|
|
40
|
+
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"] }]
|
|
41
41
|
}], propDecorators: { selectedDateRange: [{
|
|
42
42
|
type: Input
|
|
43
43
|
}], selectionChanged: [{
|
|
@@ -22,13 +22,13 @@ export class GraniteBadgeComponent {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
GraniteBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
GraniteBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius
|
|
25
|
+
GraniteBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteBadgeComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
args: [{ selector: 'granite-badge', exportAs: 'graniteBadge', host: {
|
|
29
29
|
class: 'granite-badge',
|
|
30
30
|
'[class.granite-badge-pill]': 'pill',
|
|
31
|
-
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius
|
|
31
|
+
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4)}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"] }]
|
|
32
32
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { backgroundColor: [{
|
|
33
33
|
type: Input
|
|
34
34
|
}], color: [{
|