@ifsworld/granite-components 10.0.0 → 11.0.0

package/fesm2022/ifsworld-granite-components-date-picker.mjs

@@ -0,0 +1,396 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, TemplateRef, Directive, Input, Output, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$2 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i1 from 'primeng/api';
+import * as i2 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
+import * as i4 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteIconModule, GraniteButtonModule } from '@ifsworld/granite-components';
+import * as i2$1 from '@angular/cdk/bidi';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subscription, merge } from 'rxjs';
+
+let pickerPanelUid = 0;
+/** Base class with common functionality for date/date-range pickers. */
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class _DatePickerBase {
+    constructor(_elementRef, config) {
+        this._elementRef = _elementRef;
+        this.config = config;
+        this.minDate = null;
+        this.maxDate = null;
+        this.firstDayOfWeek = 0;
+        this.pickerClosed = new EventEmitter();
+        this.xPosition = 'before';
+        this.yPosition = 'below';
+        /**
+         * Used for locating the panel in tests and setting the aria-control attribute
+         * for the picker trigger.
+         */
+        this.panelId = `granite-date-picker-panel-${pickerPanelUid++}`;
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    ngOnInit() {
+        this.config.setTranslation({
+            dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+        });
+    }
+    _handleKeydown(event) {
+        if (event.key === 'Escape') {
+            this.pickerClosed.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: _DatePickerBase, deps: [{ token: i0.ElementRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: _DatePickerBase, inputs: { minDate: "minDate", maxDate: "maxDate", firstDayOfWeek: "firstDayOfWeek" }, outputs: { pickerClosed: "pickerClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: _DatePickerBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PrimeNGConfig }]; }, propDecorators: { minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], pickerClosed: [{
+                type: Output
+            }], templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+class GraniteDatePickerComponent extends _DatePickerBase {
+    constructor() {
+        super(...arguments);
+        this.selectedDate = undefined;
+        this.selectionChanged = new EventEmitter();
+    }
+    dateSelectionChanged(newDate) {
+        this.selectedDate = newDate;
+        this.selectionChanged.emit(newDate);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteDatePickerComponent, selector: "granite-date-picker", inputs: { selectedDate: "selectedDate" }, outputs: { selectionChanged: "selectionChanged" }, usesInheritance: true, ngImport: i0, template: "<ng-template>\n  <div class=\"granite-date-picker\" cdkTrapFocus>\n    <div *ngIf=\"selectedDate; else notSelected\">\n      <p-calendar\n        [(ngModel)]=\"selectedDate\"\n        [focusTrap]=\"true\"\n        [showButtonBar]=\"true\"\n        [inline]=\"true\"\n        [showIcon]=\"false\"\n        [clearButtonStyleClass]=\"'hideClearButton'\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [showWeek]=\"false\"\n        [touchUI]=\"clientOutput.device === 'touch'\"\n        (onSelect)=\"dateSelectionChanged($event)\"\n        (keydown)=\"_handleKeydown($event)\"\n      ></p-calendar>\n    </div>\n    <ng-template #notSelected>\n      <p-calendar\n        [focusTrap]=\"true\"\n        [showButtonBar]=\"true\"\n        [inline]=\"true\"\n        [showIcon]=\"false\"\n        [clearButtonStyleClass]=\"'hideClearButton'\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [showWeek]=\"false\"\n        [touchUI]=\"clientOutput.device === 'touch'\"\n        (onSelect)=\"dateSelectionChanged($event)\"\n        (keydown)=\"_handleKeydown($event)\"\n      ></p-calendar>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: ["@import\"~primeicons/primeicons.css\";.granite-date-picker{width:256px}.granite-date-picker .p-component{font-size:var(--granite-font-size-body);font-weight:400;border:0 none solid var(--granite-color-text)}.granite-date-picker .p-datepicker{padding:var(--granite-spacing-16);background:var(--granite-color-background);color:var(--granite-color-text);border:0 solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td>span{width:2rem;height:2rem;border-radius:50%;transition:none;border:1px solid transparent}.granite-date-picker .p-datepicker table th{border-bottom:1px solid var(--granite-color-background-selected);color:var(--granite-color-text);font-weight:400;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td.p-datepicker-today>span{box-shadow:0 0;background:var(--granite-color-background);color:var(--granite-color-text);border-color:var(--granite-color-background-active-hover);width:2rem;height:2rem;outline-offset:-1px}.granite-date-picker .p-datepicker .p-datepicker-header{padding:0;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0 solid rgba(0,0,0,.12);border-top-right-radius:var(--granite-spacing-4);border-top-left-radius:var(--granite-spacing-4);font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-yearpicker-year{width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{box-shadow:0 0;background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-monthpicker-month{font-size:var(--granite-font-size-body-small);width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text);box-shadow:0 0}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-button{color:var(--granite-color-text);background:var(--granite-color-background);padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);transition:0;font-weight:400;border-radius:var(--granite-spacing-4);min-width:0;border:1px solid var(--granite-color-background-selected)}.granite-date-picker .p-button-label{font-weight:400}.granite-date-picker .p-datepicker .p-datepicker-buttonbar{margin-top:var(--granite-spacing-16);padding:0;border-top:0}.granite-date-picker .p-button.p-button-text{background-color:transparent;color:var(--granite-color-text);border-color:var(--granite-color-background-selected)}.granite-date-picker .p-button.p-button-text:enabled:hover,.granite-date-picker .p-button.p-button-outlined:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:enabled:active,.granite-date-picker .p-button.p-button-outlined:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:focus,.granite-date-picker .p-button.p-button-outlined:focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker.granite-date-range-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-info);color:var(--granite-color-text);border:none}.granite-date-picker .p-datepicker table td>span.p-highlight:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:0 0}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--granite-color-background-selected)}.granite-date-picker .pi{font-family:primeicons;font-style:normal;font-size:var(--granite-font-size-body-small);font-weight:200;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:0;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:0 none;outline:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;border:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .p-datepicker-prev,.granite-date-picker .p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--granite-color-text);border:0 none;background:transparent;border-radius:var(--granite-spacing-4);font-weight:300;padding:var(--granite-spacing-8)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev :focus-visible,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next :focus-visible{outline:-webkit-focus-ring-color auto 1px}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--granite-color-text);font-weight:400;padding:var(--granite-spacing-8);background-color:transparent;border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{background:var(--granite-color-background-active-hover);outline:0 none;color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:active{outline:0 none;background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:0rem}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-inline-end:var(--granite-spacing-8)}.granite-date-picker .p-link{outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px;padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);border-radius:var(--granite-spacing-4)}.granite-date-picker .p-link:focus{outline-offset:-2px;outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .hideClearButton{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "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", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { selectedDate: [{
+                type: Input
+            }], selectionChanged: [{
+                type: Output
+            }] } });
+
+class GraniteDateRangePickerComponent extends _DatePickerBase {
+    constructor() {
+        super(...arguments);
+        this.selectedDateRange = null;
+        this.selectionChanged = new EventEmitter();
+        this._selectedDateRangeInternal = null;
+    }
+    ngOnChanges(changes) {
+        if (changes.selectedDateRange) {
+            this._selectedDateRangeInternal =
+                this.selectedDateRange?.length > 0 ? this.selectedDateRange : null;
+        }
+    }
+    dateRangeSelectionChanged(date) {
+        if (this._selectedDateRangeInternal == null ||
+            this._selectedDateRangeInternal.length === 0) {
+            this._selectedDateRangeInternal = [date];
+        }
+        else if (this._selectedDateRangeInternal.length === 1) {
+            this._selectedDateRangeInternal.push(date);
+        }
+        else if (this._selectedDateRangeInternal.length === 2 &&
+            this._selectedDateRangeInternal[1] != null) {
+            this.selectionChanged.emit(this._selectedDateRangeInternal);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GraniteDateRangePickerComponent, selector: "granite-date-range-picker", inputs: { selectedDateRange: "selectedDateRange" }, outputs: { selectionChanged: "selectionChanged" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div\n    class=\"granite-date-picker\"\n    [class.granite-date-range-picker]=\"true\"\n    cdkTrapFocus\n  >\n    <div *ngIf=\"_selectedDateRangeInternal !== null; else rangeNotSelected\">\n      <p-calendar\n        selectionMode=\"range\"\n        [(ngModel)]=\"_selectedDateRangeInternal\"\n        [focusTrap]=\"true\"\n        [showButtonBar]=\"false\"\n        [inline]=\"true\"\n        [showIcon]=\"false\"\n        [clearButtonStyleClass]=\"'hideClearButton'\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [showWeek]=\"false\"\n        [touchUI]=\"clientOutput.device === 'touch'\"\n        (onSelect)=\"dateRangeSelectionChanged($event)\"\n        (keydown)=\"_handleKeydown($event)\"\n      ></p-calendar>\n    </div>\n    <ng-template #rangeNotSelected>\n      <p-calendar\n        selectionMode=\"range\"\n        [focusTrap]=\"true\"\n        [showButtonBar]=\"false\"\n        [inline]=\"true\"\n        [showIcon]=\"false\"\n        [clearButtonStyleClass]=\"'hideClearButton'\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [showWeek]=\"false\"\n        [touchUI]=\"clientOutput.device === 'touch'\"\n        (onSelect)=\"dateRangeSelectionChanged($event)\"\n        (keydown)=\"_handleKeydown($event)\"\n      ></p-calendar>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: ["@import\"~primeicons/primeicons.css\";.granite-date-picker{width:256px}.granite-date-picker .p-component{font-size:var(--granite-font-size-body);font-weight:400;border:0 none solid var(--granite-color-text)}.granite-date-picker .p-datepicker{padding:var(--granite-spacing-16);background:var(--granite-color-background);color:var(--granite-color-text);border:0 solid var(--granite-color-text);border-radius:0;box-shadow:0 8px 16px #00000026}.granite-date-picker .p-datepicker table td{padding:0;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td>span{width:2rem;height:2rem;border-radius:50%;transition:none;border:1px solid transparent}.granite-date-picker .p-datepicker table th{border-bottom:1px solid var(--granite-color-background-selected);color:var(--granite-color-text);font-weight:400;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker table td.p-datepicker-today>span{box-shadow:0 0;background:var(--granite-color-background);color:var(--granite-color-text);border-color:var(--granite-color-background-active-hover);width:2rem;height:2rem;outline-offset:-1px}.granite-date-picker .p-datepicker .p-datepicker-header{padding:0;color:var(--granite-color-text);background:var(--granite-color-background);font-weight:400;margin:0;border-bottom:0 solid rgba(0,0,0,.12);border-top-right-radius:var(--granite-spacing-4);border-top-left-radius:var(--granite-spacing-4);font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-yearpicker-year{width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;font-size:var(--granite-font-size-body-small)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{box-shadow:0 0;background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-monthpicker-month{font-size:var(--granite-font-size-body-small);width:25%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month{padding:var(--granite-spacing-8);transition:none;border-radius:var(--granite-spacing-32)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text);box-shadow:0 0}.granite-date-picker .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--granite-color-background-hover);color:var(--granite-color-text)}.granite-date-picker .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):active{outline-offset:-1px;outline:1px solid var(--granite-color-background-active);background:var(--granite-color-background-active);color:var(--granite-color-text-on-active)}.granite-date-picker .p-button{color:var(--granite-color-text);background:var(--granite-color-background);padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);transition:0;font-weight:400;border-radius:var(--granite-spacing-4);min-width:0;border:1px solid var(--granite-color-background-selected)}.granite-date-picker .p-button-label{font-weight:400}.granite-date-picker .p-datepicker .p-datepicker-buttonbar{margin-top:var(--granite-spacing-16);padding:0;border-top:0}.granite-date-picker .p-button.p-button-text{background-color:transparent;color:var(--granite-color-text);border-color:var(--granite-color-background-selected)}.granite-date-picker .p-button.p-button-text:enabled:hover,.granite-date-picker .p-button.p-button-outlined:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:enabled:active,.granite-date-picker .p-button.p-button-outlined:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:0 none}.granite-date-picker .p-button.p-button-text:focus,.granite-date-picker .p-button.p-button-outlined:focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker.granite-date-range-picker .p-datepicker table td>span.p-highlight{background:var(--granite-color-background-info);color:var(--granite-color-text);border:none}.granite-date-picker .p-datepicker table td>span.p-highlight:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:1px solid var(--granite-color-background-active)}.granite-date-picker .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:0 0}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0;outline-offset:-2px}.granite-date-picker .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--granite-color-background-selected)}.granite-date-picker .pi{font-family:primeicons;font-style:normal;font-size:var(--granite-font-size-body-small);font-weight:200;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:0;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);border:0 none;outline:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:active{background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;border:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .p-datepicker-prev,.granite-date-picker .p-datepicker-next{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--granite-color-text);border:0 none;background:transparent;border-radius:var(--granite-spacing-4);font-weight:300;padding:var(--granite-spacing-8)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-prev :focus-visible,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-next :focus-visible{outline:-webkit-focus-ring-color auto 1px}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--granite-color-text);font-weight:400;padding:var(--granite-spacing-8);background-color:transparent;border:0 none}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{background:var(--granite-color-background-active-hover);outline:0 none;color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:active,.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:active{outline:0 none;background:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active)}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:0rem}.granite-date-picker .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-inline-end:var(--granite-spacing-8)}.granite-date-picker .p-link{outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px;padding:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small);border-radius:var(--granite-spacing-4)}.granite-date-picker .p-link:focus{outline-offset:-2px;outline:var(--granite-spacing-2) solid var(--granite-color-focus);box-shadow:0 0}.granite-date-picker .hideClearButton{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "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", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDateRangePickerComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { selectedDateRange: [{
+                type: Input
+            }], selectionChanged: [{
+                type: Output
+            }] } });
+
+class GraniteDatePickerTriggerForDirective {
+    constructor(_overlay, _element, _viewContainerRef, _outsideClickDispatcher, 
+    /** Client input device information */
+    _clientInput, 
+    /** Client output device information */
+    _clientOutput, _dir, _focusMonitor) {
+        this._overlay = _overlay;
+        this._element = _element;
+        this._viewContainerRef = _viewContainerRef;
+        this._outsideClickDispatcher = _outsideClickDispatcher;
+        this._clientInput = _clientInput;
+        this._clientOutput = _clientOutput;
+        this._dir = _dir;
+        this._focusMonitor = _focusMonitor;
+        /** Whether the associated picker is open */
+        this._isPickerOpen = false;
+        this._pickerCloseSubscription = Subscription.EMPTY;
+        this._portal = null;
+        this._overlayRef = null;
+    }
+    ngAfterContentInit() {
+        const selectionChanged = this.picker.selectionChanged;
+        const closed = this.picker.pickerClosed;
+        this._pickerCloseSubscription = merge(selectionChanged, closed).subscribe(() => {
+            this.closePicker();
+        });
+    }
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        this._pickerCloseSubscription.unsubscribe();
+    }
+    isOpen() {
+        return this._isPickerOpen;
+    }
+    openPicker() {
+        if (this._isPickerOpen) {
+            return;
+        }
+        this.picker.direction = this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+        this.picker.clientInput = this._clientInput;
+        this.picker.clientOutput = this._clientOutput;
+        const panelClass = [];
+        if (this._clientOutput?.device === 'touch') {
+            panelClass.push('granite-overlay-pane-center');
+        }
+        const scrollStrategy = this._clientOutput?.device !== 'touch'
+            ? this._overlay.scrollStrategies.reposition()
+            : this._overlay.scrollStrategies.block();
+        const hasBackdrop = this._clientOutput?.device === 'touch';
+        if (!this._overlayRef) {
+            const config = new OverlayConfig({
+                positionStrategy: this._positionStrategy(),
+                backdropClass: 'granite-overlay-dark-glass-backdrop',
+                scrollStrategy,
+                direction: this._dir,
+                panelClass,
+                hasBackdrop,
+            });
+            this._overlayRef = this._overlay.create(config);
+        }
+        if (!this._portal || this._portal.templateRef !== this.picker.templateRef) {
+            this._portal = new TemplatePortal(this.picker.templateRef, this._viewContainerRef);
+        }
+        // Attach portal to overlay ref (which is a portal outlet)
+        this._overlayRef.attach(this._portal);
+        this._outsideClickDispatcher.add(this._overlayRef);
+        this._overlayRef.outsidePointerEvents().subscribe((event) => {
+            event.stopPropagation();
+            this.closePicker();
+        });
+        this._isPickerOpen = true;
+    }
+    /** Toggles the picker between the open and closed states. */
+    togglePicker() {
+        if (this._isPickerOpen) {
+            this.closePicker();
+        }
+        else {
+            this.openPicker();
+        }
+    }
+    /** Close the associated picker */
+    closePicker() {
+        if (!this._overlayRef || !this._isPickerOpen) {
+            return;
+        }
+        this._outsideClickDispatcher.remove(this._overlayRef);
+        this._overlayRef.detach();
+        this._restoreFocus();
+        this._isPickerOpen = false;
+    }
+    /** Handles key presses on the trigger. */
+    _handleKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.togglePicker();
+        }
+    }
+    /** Handles click events on the trigger. */
+    _handleClick() {
+        this.togglePicker();
+    }
+    /**
+     * Restores focus to the element that was focused before the picker was open.
+     */
+    _restoreFocus(origin = 'program', options) {
+        if (this._focusMonitor) {
+            this._focusMonitor.focusVia(this._element, origin, options);
+        }
+        else {
+            this._element.nativeElement.focus(options);
+        }
+    }
+    /**
+     * Returns strategy for positioning the overlay for desktop devices:
+     */
+    _desktopPositionStrategy() {
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._element)
+            .withLockedPosition()
+            .withTransformOriginOn('.granite-date-picker')
+            .withPush(false);
+        this._setPosition(positionStrategy);
+        return positionStrategy;
+    }
+    /**
+     * Sets the appropriate positions on a position strategy
+     * so the overlay connects with the trigger correctly.
+     * @param positionStrategy Strategy whose position to update.
+     */
+    _setPosition(positionStrategy) {
+        const [originX, originFallbackX] = this.picker.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
+        const [overlayY, overlayFallbackY] = this.picker.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
+        let [originY, originFallbackY] = [overlayY, overlayFallbackY];
+        const [overlayX, overlayFallbackX] = [originX, originFallbackX];
+        const offsetY = 0;
+        originY = overlayY === 'top' ? 'bottom' : 'top';
+        originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
+        positionStrategy.withPositions([
+            { originX, originY, overlayX, overlayY, offsetY },
+            {
+                originX: originFallbackX,
+                originY,
+                overlayX: overlayFallbackX,
+                overlayY,
+                offsetY,
+            },
+            {
+                originX,
+                originY: originFallbackY,
+                overlayX,
+                overlayY: overlayFallbackY,
+                offsetY: -offsetY,
+            },
+            {
+                originX: originFallbackX,
+                originY: originFallbackY,
+                overlayX: overlayFallbackX,
+                overlayY: overlayFallbackY,
+                offsetY: -offsetY,
+            },
+        ]);
+    }
+    /**
+     * Returns strategy for positioning the overlay depending on what type of
+     * device the picker is being shown on
+     */
+    _positionStrategy() {
+        if (this._clientOutput?.device !== 'touch') {
+            return this._desktopPositionStrategy();
+        }
+        return this._touchPositionStrategy();
+    }
+    /**
+     * Returns strategy for positioning the overlay for touch devices:
+     * Place centered in the screen.
+     */
+    _touchPositionStrategy() {
+        return this._overlay.position().global();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: i2$1.Directionality, optional: true }, { token: i4.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GraniteDatePickerTriggerForDirective, selector: "[graniteDatePickerTriggerFor]", inputs: { picker: ["graniteDatePickerTriggerFor", "picker"] }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isPickerOpen || null", "attr.aria-controls": "_isPickerOpen ? picker.panelId : null" }, classAttribute: "granite-date-picker-trigger" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerTriggerForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[graniteDatePickerTriggerFor]`,
+                    host: {
+                        class: 'granite-date-picker-trigger',
+                        'aria-haspopup': 'true',
+                        '[attr.aria-expanded]': '_isPickerOpen || null',
+                        '[attr.aria-controls]': '_isPickerOpen ? picker.panelId : null',
+                        '(keydown)': '_handleKeydown($event)',
+                        '(click)': '_handleClick($event)',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayOutsideClickDispatcher }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GRANITE_CLIENT_INPUT]
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GRANITE_CLIENT_OUTPUT]
+                }, {
+                    type: Optional
+                }] }, { type: i2$1.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: i4.FocusMonitor }]; }, propDecorators: { picker: [{
+                type: Input,
+                args: ['graniteDatePickerTriggerFor']
+            }] } });
+
+class GraniteDatePickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerModule, declarations: [GraniteDatePickerComponent,
+            GraniteDateRangePickerComponent,
+            GraniteDatePickerTriggerForDirective], imports: [CommonModule,
+            OverlayModule,
+            CalendarModule,
+            FormsModule,
+            GraniteIconModule,
+            GraniteButtonModule,
+            A11yModule], exports: [GraniteDatePickerComponent,
+            GraniteDateRangePickerComponent,
+            GraniteDatePickerTriggerForDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerModule, imports: [CommonModule,
+            OverlayModule,
+            CalendarModule,
+            FormsModule,
+            GraniteIconModule,
+            GraniteButtonModule,
+            A11yModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GraniteDatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GraniteDatePickerComponent,
+                        GraniteDateRangePickerComponent,
+                        GraniteDatePickerTriggerForDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        CalendarModule,
+                        FormsModule,
+                        GraniteIconModule,
+                        GraniteButtonModule,
+                        A11yModule,
+                    ],
+                    exports: [
+                        GraniteDatePickerComponent,
+                        GraniteDateRangePickerComponent,
+                        GraniteDatePickerTriggerForDirective,
+                    ],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GraniteDatePickerComponent, GraniteDatePickerModule, GraniteDatePickerTriggerForDirective, GraniteDateRangePickerComponent };
+//# sourceMappingURL=ifsworld-granite-components-date-picker.mjs.map