@ifsworld/granite-components 9.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.
Files changed (26) hide show
  1. package/README.md +4 -28
  2. package/esm2020/date-picker/lib/date-picker.component.mjs +2 -2
  3. package/esm2020/date-picker/lib/date-range-picker.component.mjs +2 -2
  4. package/esm2020/lib/arrange-grid/arrange-grid-item.component.mjs +4 -4
  5. package/esm2020/lib/badge/badge.component.mjs +2 -2
  6. package/esm2020/lib/checkbox/checkbox.component.mjs +2 -2
  7. package/esm2020/lib/input-field/input-field.component.mjs +2 -2
  8. package/esm2020/lib/menu/menu-trigger-for.directive.mjs +2 -3
  9. package/esm2020/lib/menu/menu.component.mjs +3 -3
  10. package/esm2020/lib/radio-button/radio-button.component.mjs +2 -2
  11. package/esm2020/lib/toggle-switch/toggle-switch.component.mjs +2 -2
  12. package/esm2020/tooltip/lib/tooltip.component.mjs +2 -2
  13. package/fesm2015/ifsworld-granite-components-date-picker.mjs +4 -4
  14. package/fesm2015/ifsworld-granite-components-date-picker.mjs.map +1 -1
  15. package/fesm2015/ifsworld-granite-components-tooltip.mjs +2 -2
  16. package/fesm2015/ifsworld-granite-components-tooltip.mjs.map +1 -1
  17. package/fesm2015/ifsworld-granite-components.mjs +16 -17
  18. package/fesm2015/ifsworld-granite-components.mjs.map +1 -1
  19. package/fesm2020/ifsworld-granite-components-date-picker.mjs +4 -4
  20. package/fesm2020/ifsworld-granite-components-date-picker.mjs.map +1 -1
  21. package/fesm2020/ifsworld-granite-components-tooltip.mjs +2 -2
  22. package/fesm2020/ifsworld-granite-components-tooltip.mjs.map +1 -1
  23. package/fesm2020/ifsworld-granite-components.mjs +16 -17
  24. package/fesm2020/ifsworld-granite-components.mjs.map +1 -1
  25. package/package.json +3 -3
  26. package/src/lib/core/style/_mixins.scss +4 -0
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
- ![npm](https://img.shields.io/npm/v/@ifsworld/granite-components)
6
- ![npm weekly downloads](https://img.shields.io/npm/dw/@ifsworld/granite-components)
7
- [![@ifsworld/granite-components](https://snyk.io/advisor/npm-package/@ifsworld/granite-components/badge.svg)](https://snyk.io/advisor/npm-package/@ifsworld/granite-components)
8
-
9
- [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
10
- [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
5
+ [![npm peer dependency version (scoped)](https://img.shields.io/npm/dependency-version/%40ifsworld/granite-components/peer/%40angular%2Fcore?color=%23DE3641)](https://angular.io/guide/creating-libraries#ensuring-library-version-compatibility)
11
6
  [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](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
- #### Angular version support matrix
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 (2022)
69
+ ## What we're working on now
89
70
 
90
- - Multi Select Input Control
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
 
package/esm2020/date-picker/lib/date-picker.component.mjs CHANGED
@@ -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:0px solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0rem;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:0rem;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0px 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-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.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: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-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-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:0rem;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:0rem;border-top:0px}.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 .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: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 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):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.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 .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:0px solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0rem;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:0rem;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0px 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-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.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: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-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-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:0rem;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:0rem;border-top:0px}.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 .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: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 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):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.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 .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: [{
package/esm2020/date-picker/lib/date-range-picker.component.mjs CHANGED
@@ -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:0px solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0rem;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:0rem;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0px 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-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.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: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-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-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:0rem;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:0rem;border-top:0px}.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 .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: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 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):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.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 .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:0px solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0rem;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:0rem;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0px 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-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.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: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-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-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:0rem;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:0rem;border-top:0px}.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 .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: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 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):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.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 .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: [{
package/esm2020/lib/arrange-grid/arrange-grid-item.component.mjs CHANGED
@@ -23,7 +23,7 @@ export class GraniteArrangeGridItemComponent {
23
23
  * Update element styles
24
24
  */
25
25
  updateStyles() {
26
- this.setCssProperty('--columnSpan', this._columnSpan ? this._columnSpan.toString() : null);
26
+ this.setCssProperty('--column-span', this._columnSpan ? this._columnSpan.toString() : null);
27
27
  }
28
28
  /**
29
29
  * Set CSS variable value or remove it if a null value is given.
@@ -36,9 +36,9 @@ export class GraniteArrangeGridItemComponent {
36
36
  }
37
37
  }
38
38
  GraniteArrangeGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
39
- GraniteArrangeGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteArrangeGridItemComponent, selector: "granite-arrange-grid-item", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--columnSpan: $default-column-span;display:grid;grid-column:span var(--columnSpan, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
39
+ GraniteArrangeGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteArrangeGridItemComponent, selector: "granite-arrange-grid-item", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--column-span: $default-column-span;display:grid;grid-column:span var(--column-span, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
40
40
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteArrangeGridItemComponent, decorators: [{
41
41
  type: Component,
42
- args: [{ selector: 'granite-arrange-grid-item', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--columnSpan: $default-column-span;display:grid;grid-column:span var(--columnSpan, 1)}\n"] }]
42
+ args: [{ selector: 'granite-arrange-grid-item', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--column-span: $default-column-span;display:grid;grid-column:span var(--column-span, 1)}\n"] }]
43
43
  }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
44
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXJyYW5nZS1ncmlkLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ncmFuaXRlLWNvbXBvbmVudHMvc3JjL2xpYi9hcnJhbmdlLWdyaWQvYXJyYW5nZS1ncmlkLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsdUJBQXVCLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVEvRSxNQUFNLE9BQU8sK0JBQStCO0lBQzFDOzs7T0FHRztJQUNILElBQUksVUFBVSxDQUFDLEtBQW9CO1FBQ2pDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBU0QsWUFBb0IsT0FBZ0M7UUFBaEMsWUFBTyxHQUFQLE9BQU8sQ0FBeUI7UUFQcEQ7Ozs7V0FJRztRQUNILGdCQUFXLEdBQWtCLElBQUksQ0FBQztRQUdoQyxXQUFXO0lBQ2IsQ0FBQztJQUVEOztPQUVHO0lBQ0gsWUFBWTtRQUNWLElBQUksQ0FBQyxjQUFjLENBQ2pCLGNBQWMsRUFDZCxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQ3RELENBQUM7SUFDSixDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDTyxjQUFjLENBQUMsUUFBZ0IsRUFBRSxLQUFvQjtRQUM3RCxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNoRSxDQUFDOzs0SEF2Q1UsK0JBQStCO2dIQUEvQiwrQkFBK0IsaUVBSmhDLDJCQUEyQjsyRkFJMUIsK0JBQStCO2tCQU4zQyxTQUFTOytCQUNFLDJCQUEyQixZQUMzQiwyQkFBMkIsbUJBRXBCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYW5pdGUtYXJyYW5nZS1ncmlkLWl0ZW0nLFxuICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50PjwvbmctY29udGVudD4nLFxuICBzdHlsZVVybHM6IFsnYXJyYW5nZS1ncmlkLWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEdyYW5pdGVBcnJhbmdlR3JpZEl0ZW1Db21wb25lbnQge1xuICAvKipcbiAgICogTnVtYmVyIG9mIGNlbGxzIHRoZSBpdGVtIHdvdWxkIHNwYW4uIFVzZWQgYnkgYXJyYW5nZSBncmlkIGluIGNvbHVtblxuICAgKiBvcmllbnRhdGlvbiB0byBmaWxsIGFueSB1bnVzZWQgc3BhY2UgY2F1c2VkIGJ5IHdyYXBwZWQgaXRlbXMuXG4gICAqL1xuICBzZXQgY29sdW1uU3Bhbih2YWx1ZTogbnVtYmVyIHwgbnVsbCkge1xuICAgIHRoaXMuX2NvbHVtblNwYW4gPSB2YWx1ZTtcbiAgICB0aGlzLnVwZGF0ZVN0eWxlcygpO1xuICB9XG5cbiAgLyoqXG4gICAqIENvbHVtbiBzcGFuIHRvIHJlbmRlci5cbiAgICogRm9yIHVzZSBpbiB0ZW1wbGF0ZSBvbmx5LiBEbyBub3QgdXNlIG91dHNpZGUgb2YgdGhpcyBjb21wb25lbnQuXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIF9jb2x1bW5TcGFuOiBudW1iZXIgfCBudWxsID0gbnVsbDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnQ6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7XG4gICAgLyogbm8tb3AgKi9cbiAgfVxuXG4gIC8qKlxuICAgKiBVcGRhdGUgZWxlbWVudCBzdHlsZXNcbiAgICovXG4gIHVwZGF0ZVN0eWxlcygpOiB2b2lkIHtcbiAgICB0aGlzLnNldENzc1Byb3BlcnR5KFxuICAgICAgJy0tY29sdW1uU3BhbicsXG4gICAgICB0aGlzLl9jb2x1bW5TcGFuID8gdGhpcy5fY29sdW1uU3Bhbi50b1N0cmluZygpIDogbnVsbFxuICAgICk7XG4gIH1cblxuICAvKipcbiAgICogU2V0IENTUyB2YXJpYWJsZSB2YWx1ZSBvciByZW1vdmUgaXQgaWYgYSBudWxsIHZhbHVlIGlzIGdpdmVuLlxuICAgKiBXb3VsZCBvZiBjb3Vyc2UgcmF0aGVyIGhhdmUgdXNlZCBwcm9wZXJ0eSBiaW5kaW5nIGJ1dCB0aGF0IGlzIG5vdFxuICAgKiBzdXBwb3J0ZWQgdW50aWwgKHBlcmhhcHMpIEFuZ3VsYXIgOS5cbiAgICogU2VlOiBodHRwczovL2dpdGh1Yi5jb20vYW5ndWxhci9hbmd1bGFyL2lzc3Vlcy85MzQzXG4gICAqL1xuICBwcm90ZWN0ZWQgc2V0Q3NzUHJvcGVydHkodmFyaWFibGU6IHN0cmluZywgdmFsdWU6IHN0cmluZyB8IG51bGwpOiB2b2lkIHtcbiAgICB0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSh2YXJpYWJsZSwgdmFsdWUpO1xuICB9XG59XG4iXX0=
44
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXJyYW5nZS1ncmlkLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ncmFuaXRlLWNvbXBvbmVudHMvc3JjL2xpYi9hcnJhbmdlLWdyaWQvYXJyYW5nZS1ncmlkLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsdUJBQXVCLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVEvRSxNQUFNLE9BQU8sK0JBQStCO0lBQzFDOzs7T0FHRztJQUNILElBQUksVUFBVSxDQUFDLEtBQW9CO1FBQ2pDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBU0QsWUFBb0IsT0FBZ0M7UUFBaEMsWUFBTyxHQUFQLE9BQU8sQ0FBeUI7UUFQcEQ7Ozs7V0FJRztRQUNILGdCQUFXLEdBQWtCLElBQUksQ0FBQztRQUdoQyxXQUFXO0lBQ2IsQ0FBQztJQUVEOztPQUVHO0lBQ0gsWUFBWTtRQUNWLElBQUksQ0FBQyxjQUFjLENBQ2pCLGVBQWUsRUFDZixJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQ3RELENBQUM7SUFDSixDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDTyxjQUFjLENBQUMsUUFBZ0IsRUFBRSxLQUFvQjtRQUM3RCxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNoRSxDQUFDOzs0SEF2Q1UsK0JBQStCO2dIQUEvQiwrQkFBK0IsaUVBSmhDLDJCQUEyQjsyRkFJMUIsK0JBQStCO2tCQU4zQyxTQUFTOytCQUNFLDJCQUEyQixZQUMzQiwyQkFBMkIsbUJBRXBCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYW5pdGUtYXJyYW5nZS1ncmlkLWl0ZW0nLFxuICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50PjwvbmctY29udGVudD4nLFxuICBzdHlsZVVybHM6IFsnYXJyYW5nZS1ncmlkLWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEdyYW5pdGVBcnJhbmdlR3JpZEl0ZW1Db21wb25lbnQge1xuICAvKipcbiAgICogTnVtYmVyIG9mIGNlbGxzIHRoZSBpdGVtIHdvdWxkIHNwYW4uIFVzZWQgYnkgYXJyYW5nZSBncmlkIGluIGNvbHVtblxuICAgKiBvcmllbnRhdGlvbiB0byBmaWxsIGFueSB1bnVzZWQgc3BhY2UgY2F1c2VkIGJ5IHdyYXBwZWQgaXRlbXMuXG4gICAqL1xuICBzZXQgY29sdW1uU3Bhbih2YWx1ZTogbnVtYmVyIHwgbnVsbCkge1xuICAgIHRoaXMuX2NvbHVtblNwYW4gPSB2YWx1ZTtcbiAgICB0aGlzLnVwZGF0ZVN0eWxlcygpO1xuICB9XG5cbiAgLyoqXG4gICAqIENvbHVtbiBzcGFuIHRvIHJlbmRlci5cbiAgICogRm9yIHVzZSBpbiB0ZW1wbGF0ZSBvbmx5LiBEbyBub3QgdXNlIG91dHNpZGUgb2YgdGhpcyBjb21wb25lbnQuXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIF9jb2x1bW5TcGFuOiBudW1iZXIgfCBudWxsID0gbnVsbDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnQ6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7XG4gICAgLyogbm8tb3AgKi9cbiAgfVxuXG4gIC8qKlxuICAgKiBVcGRhdGUgZWxlbWVudCBzdHlsZXNcbiAgICovXG4gIHVwZGF0ZVN0eWxlcygpOiB2b2lkIHtcbiAgICB0aGlzLnNldENzc1Byb3BlcnR5KFxuICAgICAgJy0tY29sdW1uLXNwYW4nLFxuICAgICAgdGhpcy5fY29sdW1uU3BhbiA/IHRoaXMuX2NvbHVtblNwYW4udG9TdHJpbmcoKSA6IG51bGxcbiAgICApO1xuICB9XG5cbiAgLyoqXG4gICAqIFNldCBDU1MgdmFyaWFibGUgdmFsdWUgb3IgcmVtb3ZlIGl0IGlmIGEgbnVsbCB2YWx1ZSBpcyBnaXZlbi5cbiAgICogV291bGQgb2YgY291cnNlIHJhdGhlciBoYXZlIHVzZWQgcHJvcGVydHkgYmluZGluZyBidXQgdGhhdCBpcyBub3RcbiAgICogc3VwcG9ydGVkIHVudGlsIChwZXJoYXBzKSBBbmd1bGFyIDkuXG4gICAqIFNlZTogaHR0cHM6Ly9naXRodWIuY29tL2FuZ3VsYXIvYW5ndWxhci9pc3N1ZXMvOTM0M1xuICAgKi9cbiAgcHJvdGVjdGVkIHNldENzc1Byb3BlcnR5KHZhcmlhYmxlOiBzdHJpbmcsIHZhbHVlOiBzdHJpbmcgfCBudWxsKTogdm9pZCB7XG4gICAgdGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkodmFyaWFibGUsIHZhbHVlKTtcbiAgfVxufVxuIl19
package/esm2020/lib/badge/badge.component.mjs CHANGED
@@ -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:.25rem;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:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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:.25rem;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:1rem}\n"] }]
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: [{
package/esm2020/lib/checkbox/checkbox.component.mjs CHANGED
@@ -60,7 +60,7 @@ export class GraniteCheckboxComponent {
60
60
  }
61
61
  }
62
62
  GraniteCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
63
- GraniteCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteCheckboxComponent, selector: "granite-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", checkboxChange: "checkboxChange", checkboxBlur: "checkboxBlur" }, host: { properties: { "class.granite-checkbox-checked": "checked", "class.granite-checkbox-disabled": "disabled", "class.granite-checkbox-readonly": "readonly", "class.granite-checkbox-label-before": "_positionBefore" }, classAttribute: "granite-checkbox" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteCheckbox"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
63
+ GraniteCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteCheckboxComponent, selector: "granite-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", checkboxChange: "checkboxChange", checkboxBlur: "checkboxBlur" }, host: { properties: { "class.granite-checkbox-checked": "checked", "class.granite-checkbox-disabled": "disabled", "class.granite-checkbox-readonly": "readonly", "class.granite-checkbox-label-before": "_positionBefore" }, classAttribute: "granite-checkbox" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteCheckbox"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fade-in-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fade-out-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
64
64
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteCheckboxComponent, decorators: [{
65
65
  type: Component,
66
66
  args: [{ selector: 'granite-checkbox', exportAs: 'graniteCheckbox', host: {
@@ -69,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
69
69
  '[class.granite-checkbox-disabled]': 'disabled',
70
70
  '[class.granite-checkbox-readonly]': 'readonly',
71
71
  '[class.granite-checkbox-label-before]': '_positionBefore',
72
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fadeInAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fadeOutAnimation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}\n"] }]
72
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fade-in-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fade-out-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}\n"] }]
73
73
  }], ctorParameters: function () { return [{ type: i1.FocusMonitor }]; }, propDecorators: { id: [{
74
74
  type: Input
75
75
  }], checked: [{
package/esm2020/lib/input-field/input-field.component.mjs CHANGED
@@ -112,12 +112,12 @@ export class GraniteInputFieldComponent {
112
112
  }
113
113
  }
114
114
  GraniteInputFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
115
- GraniteInputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteInputFieldComponent, selector: "granite-input-field", inputs: { id: "id", name: "name", type: "type", value: "value", required: "required", readonly: "readonly", invalid: "invalid", disabled: "disabled", placeholder: "placeholder", prefixicon: "prefixicon", maxlength: "maxlength", countcharacters: "countcharacters", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "granite-input-field" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_textareaElement", first: true, predicate: ["textarea"], descendants: true }], exportAs: ["graniteInputField"], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n\n <div\n class=\"granite-input-hover-bar\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n ></div>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-container .granite-input-top-row .granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
115
+ GraniteInputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GraniteInputFieldComponent, selector: "granite-input-field", inputs: { id: "id", name: "name", type: "type", value: "value", required: "required", readonly: "readonly", invalid: "invalid", disabled: "disabled", placeholder: "placeholder", prefixicon: "prefixicon", maxlength: "maxlength", countcharacters: "countcharacters", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "granite-input-field" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_textareaElement", first: true, predicate: ["textarea"], descendants: true }], exportAs: ["graniteInputField"], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n\n <div\n class=\"granite-input-hover-bar\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n ></div>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
116
116
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GraniteInputFieldComponent, decorators: [{
117
117
  type: Component,
118
118
  args: [{ selector: 'granite-input-field', exportAs: 'graniteInputField', host: {
119
119
  class: 'granite-input-field',
120
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n\n <div\n class=\"granite-input-hover-bar\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n ></div>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-container .granite-input-top-row .granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}\n"] }]
120
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (keyup)=\"_onKeyUp($event)\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n\n <div\n class=\"granite-input-hover-bar\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n ></div>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-hover-bar{height:.0625rem;background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}\n"] }]
121
121
  }], ctorParameters: function () { return [{ type: i1.FocusMonitor }]; }, propDecorators: { id: [{
122
122
  type: Input
123
123
  }], name: [{