@skyux/datetime 11.27.0 → 11.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +2156 -2156
- package/esm2022/index.mjs +4 -4
- package/esm2022/lib/modules/date-pipe/fuzzy-date.pipe.mjs +2 -2
- package/esm2022/lib/modules/date-range-picker/date-range-picker.component.mjs +22 -9
- package/esm2022/lib/modules/datepicker/calendar/datepicker-calendar-change.mjs +2 -0
- package/esm2022/lib/modules/datepicker/calendar/datepicker-calendar-inner.component.mjs +383 -0
- package/esm2022/lib/modules/datepicker/calendar/datepicker-calendar-label.pipe.mjs +39 -0
- package/esm2022/lib/modules/datepicker/calendar/datepicker-calendar.component.mjs +100 -0
- package/esm2022/lib/modules/datepicker/calendar/datepicker-calendar.service.mjs +22 -0
- package/esm2022/lib/modules/datepicker/calendar/daypicker-button.component.mjs +23 -0
- package/esm2022/lib/modules/datepicker/calendar/daypicker-cell.component.mjs +129 -0
- package/esm2022/lib/modules/datepicker/calendar/daypicker-context.mjs +2 -0
- package/esm2022/lib/modules/datepicker/calendar/daypicker.component.mjs +221 -0
- package/esm2022/lib/modules/datepicker/calendar/monthpicker.component.mjs +80 -0
- package/esm2022/lib/modules/datepicker/calendar/yearpicker.component.mjs +87 -0
- package/esm2022/lib/modules/datepicker/datepicker-input.directive.mjs +5 -4
- package/esm2022/lib/modules/datepicker/datepicker.component.mjs +24 -8
- package/esm2022/lib/modules/datepicker/datepicker.module.mjs +31 -67
- package/esm2022/lib/modules/datepicker/fuzzy/datepicker-input-fuzzy.directive.mjs +516 -0
- package/esm2022/lib/modules/datepicker/fuzzy/fuzzy-date.mjs +2 -0
- package/esm2022/lib/modules/datepicker/fuzzy/fuzzy-date.service.mjs +411 -0
- package/fesm2022/skyux-datetime.mjs +561 -553
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/index.d.ts +5 -5
- package/lib/modules/date-pipe/fuzzy-date.pipe.d.ts +2 -2
- package/lib/modules/date-range-picker/date-range-picker.component.d.ts +6 -1
- package/lib/modules/datepicker/{datepicker-calendar-change.d.ts → calendar/datepicker-calendar-change.d.ts} +1 -1
- package/lib/modules/datepicker/{datepicker-calendar-inner.component.d.ts → calendar/datepicker-calendar-inner.component.d.ts} +6 -6
- package/lib/modules/datepicker/{datepicker-calendar.component.d.ts → calendar/datepicker-calendar.component.d.ts} +3 -3
- package/lib/modules/datepicker/calendar/datepicker-calendar.service.d.ts +16 -0
- package/lib/modules/datepicker/{daypicker-button.component.d.ts → calendar/daypicker-button.component.d.ts} +3 -3
- package/lib/modules/datepicker/{daypicker-cell.component.d.ts → calendar/daypicker-cell.component.d.ts} +5 -5
- package/lib/modules/datepicker/{datepicker-date.d.ts → calendar/daypicker-context.d.ts} +2 -1
- package/lib/modules/datepicker/{daypicker.component.d.ts → calendar/daypicker.component.d.ts} +4 -4
- package/lib/modules/datepicker/{monthpicker.component.d.ts → calendar/monthpicker.component.d.ts} +3 -3
- package/lib/modules/datepicker/{yearpicker.component.d.ts → calendar/yearpicker.component.d.ts} +3 -3
- package/lib/modules/datepicker/datepicker-input.directive.d.ts +1 -1
- package/lib/modules/datepicker/datepicker.component.d.ts +8 -3
- package/lib/modules/datepicker/datepicker.module.d.ts +11 -22
- package/lib/modules/datepicker/{datepicker-input-fuzzy.directive.d.ts → fuzzy/datepicker-input-fuzzy.directive.d.ts} +3 -3
- package/package.json +9 -9
- package/esm2022/lib/modules/datepicker/datepicker-calendar-change.mjs +0 -2
- package/esm2022/lib/modules/datepicker/datepicker-calendar-inner.component.mjs +0 -381
- package/esm2022/lib/modules/datepicker/datepicker-calendar-label.pipe.mjs +0 -39
- package/esm2022/lib/modules/datepicker/datepicker-calendar.component.mjs +0 -96
- package/esm2022/lib/modules/datepicker/datepicker-date.mjs +0 -2
- package/esm2022/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +0 -515
- package/esm2022/lib/modules/datepicker/datepicker.service.mjs +0 -21
- package/esm2022/lib/modules/datepicker/daypicker-button.component.mjs +0 -22
- package/esm2022/lib/modules/datepicker/daypicker-cell.component.mjs +0 -128
- package/esm2022/lib/modules/datepicker/daypicker.component.mjs +0 -220
- package/esm2022/lib/modules/datepicker/fuzzy-date.mjs +0 -2
- package/esm2022/lib/modules/datepicker/fuzzy-date.service.mjs +0 -411
- package/esm2022/lib/modules/datepicker/monthpicker.component.mjs +0 -79
- package/esm2022/lib/modules/datepicker/yearpicker.component.mjs +0 -86
- package/lib/modules/datepicker/datepicker.service.d.ts +0 -15
- /package/lib/modules/datepicker/{datepicker-calendar-label.pipe.d.ts → calendar/datepicker-calendar-label.pipe.d.ts} +0 -0
- /package/lib/modules/datepicker/{fuzzy-date.d.ts → fuzzy/fuzzy-date.d.ts} +0 -0
- /package/lib/modules/datepicker/{fuzzy-date.service.d.ts → fuzzy/fuzzy-date.service.d.ts} +0 -0
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, Injector, signal, computed, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
|
|
2
|
+
import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, Injector, viewChildren, signal, computed, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1 from '@skyux/i18n';
|
|
4
4
|
import { SkyLibResourcesService, SkyI18nModule, SkyAppLocaleProvider, SkyIntlDateFormatter } from '@skyux/i18n';
|
|
5
5
|
import { Subject, takeUntil as takeUntil$1, fromEvent, filter, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
|
|
6
6
|
import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
7
7
|
import moment from 'moment';
|
|
8
8
|
import * as i2$3 from '@skyux/forms';
|
|
9
|
-
import {
|
|
9
|
+
import { SKY_FORM_ERRORS_ENABLED, SkyInputBoxModule, SkyFormErrorsModule, SkyFormErrorModule } from '@skyux/forms';
|
|
10
10
|
import * as i2 from '@angular/common';
|
|
11
11
|
import { CommonModule } from '@angular/common';
|
|
12
12
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
13
13
|
import * as i2$4 from '@angular/forms';
|
|
14
|
-
import { NG_VALUE_ACCESSOR, NG_VALIDATORS,
|
|
14
|
+
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormBuilder, NgControl, StatusChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
15
15
|
import * as i1$1 from '@skyux/core';
|
|
16
|
-
import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT,
|
|
17
|
-
import * as i4$1 from '@angular/cdk/a11y';
|
|
18
|
-
import { A11yModule } from '@angular/cdk/a11y';
|
|
16
|
+
import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyLogService, SkyAffixModule } from '@skyux/core';
|
|
19
17
|
import * as i2$1 from '@skyux/icon';
|
|
20
18
|
import { SkyIconModule } from '@skyux/icon';
|
|
21
19
|
import * as i2$2 from '@skyux/indicators';
|
|
@@ -1153,11 +1151,11 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1153
1151
|
return undefined;
|
|
1154
1152
|
}
|
|
1155
1153
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1156
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n <div class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDatepickerCalendarInnerComponent, isStandalone: true, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n <div class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1157
1155
|
}
|
|
1158
1156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1159
1157
|
type: Component,
|
|
1160
|
-
args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "@if (datepickerMode) {\n <div class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"] }]
|
|
1158
|
+
args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyIconModule], selector: 'sky-datepicker-inner', standalone: true, template: "@if (datepickerMode) {\n <div class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"] }]
|
|
1161
1159
|
}], propDecorators: { customDates: [{
|
|
1162
1160
|
type: Input
|
|
1163
1161
|
}], startingDay: [{
|
|
@@ -1212,29 +1210,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1212
1210
|
}]
|
|
1213
1211
|
}] });
|
|
1214
1212
|
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
*/
|
|
1222
|
-
this.startingDay = 0;
|
|
1213
|
+
/**
|
|
1214
|
+
* @internal
|
|
1215
|
+
*/
|
|
1216
|
+
class SkyDayPickerButtonComponent {
|
|
1217
|
+
constructor(datepicker) {
|
|
1218
|
+
this.datepicker = datepicker;
|
|
1223
1219
|
}
|
|
1224
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1225
|
-
static { this.ɵ
|
|
1220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerButtonComponent, isStandalone: true, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "@if (date) {\n <button\n class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"date.disabled\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date),\n 'sky-datepicker-btn-disabled': date.disabled,\n 'sky-datepicker-btn-key-date': date.keyDate\n }\"\n [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n {{ date.label }}\n </span>\n </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1226
1222
|
}
|
|
1227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1228
|
-
type:
|
|
1229
|
-
args: [{
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1224
|
+
type: Component,
|
|
1225
|
+
args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-daypicker-button', standalone: true, template: "@if (date) {\n <button\n class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"date.disabled\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date),\n 'sky-datepicker-btn-disabled': date.disabled,\n 'sky-datepicker-btn-key-date': date.keyDate\n }\"\n [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n {{ date.label }}\n </span>\n </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"] }]
|
|
1226
|
+
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { date: [{
|
|
1227
|
+
type: Input
|
|
1228
|
+
}] } });
|
|
1233
1229
|
|
|
1234
1230
|
/**
|
|
1231
|
+
* Manages the state of the calendar picker.
|
|
1235
1232
|
* @internal
|
|
1236
1233
|
*/
|
|
1237
|
-
class
|
|
1234
|
+
class SkyDatepickerCalendarService {
|
|
1238
1235
|
constructor() {
|
|
1239
1236
|
/**
|
|
1240
1237
|
* Whether a key date popover is currently displayed.
|
|
@@ -1242,30 +1239,13 @@ class SkyDatepickerService {
|
|
|
1242
1239
|
*/
|
|
1243
1240
|
this.keyDatePopoverStream = new Subject();
|
|
1244
1241
|
}
|
|
1245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1246
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1243
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService }); }
|
|
1247
1244
|
}
|
|
1248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService, decorators: [{
|
|
1249
1246
|
type: Injectable
|
|
1250
1247
|
}] });
|
|
1251
1248
|
|
|
1252
|
-
/**
|
|
1253
|
-
* @internal
|
|
1254
|
-
*/
|
|
1255
|
-
class SkyDayPickerButtonComponent {
|
|
1256
|
-
constructor(datepicker) {
|
|
1257
|
-
this.datepicker = datepicker;
|
|
1258
|
-
}
|
|
1259
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1260
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "@if (date) {\n <button\n class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"date.disabled\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date),\n 'sky-datepicker-btn-disabled': date.disabled,\n 'sky-datepicker-btn-key-date': date.keyDate\n }\"\n [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n {{ date.label }}\n </span>\n </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1261
|
-
}
|
|
1262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1263
|
-
type: Component,
|
|
1264
|
-
args: [{ selector: 'sky-daypicker-button', template: "@if (date) {\n <button\n class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"date.disabled\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date),\n 'sky-datepicker-btn-disabled': date.disabled,\n 'sky-datepicker-btn-key-date': date.keyDate\n }\"\n [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n {{ date.label }}\n </span>\n </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"] }]
|
|
1265
|
-
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { date: [{
|
|
1266
|
-
type: Input
|
|
1267
|
-
}] } });
|
|
1268
|
-
|
|
1269
1249
|
/**
|
|
1270
1250
|
* @internal
|
|
1271
1251
|
*/
|
|
@@ -1372,13 +1352,13 @@ class SkyDayPickerCellComponent {
|
|
|
1372
1352
|
}, 500);
|
|
1373
1353
|
}
|
|
1374
1354
|
}
|
|
1375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token:
|
|
1376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0, template: "@if (hasTooltip) {\n <div\n class=\"sky-daypicker-cell\"\n skyPopoverPlacement=\"left\"\n [attr.aria-label]=\"getKeyDateLabel()\"\n [skyPopover]=\"dayInfoPopover\"\n [skyPopoverMessageStream]=\"popoverController\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n <sky-popover\n #dayInfoPopover\n (popoverClosed)=\"onPopoverClosed()\"\n (popoverOpened)=\"onPopoverOpened()\"\n >\n @for (text of date?.keyDateText; track text) {\n <div>\n {{ text }}\n </div>\n }\n </sky-popover>\n </div>\n} @else {\n <div\n class=\"sky-daypicker-cell\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n </div>\n}\n\n<ng-template #daypickerButtonTemplateRef>\n <sky-daypicker-button [date]=\"date\" />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }
|
|
1355
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerCalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerCellComponent, isStandalone: true, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0, template: "@if (hasTooltip) {\n <div\n class=\"sky-daypicker-cell\"\n skyPopoverPlacement=\"left\"\n [attr.aria-label]=\"getKeyDateLabel()\"\n [skyPopover]=\"dayInfoPopover\"\n [skyPopoverMessageStream]=\"popoverController\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n <sky-popover\n #dayInfoPopover\n (popoverClosed)=\"onPopoverClosed()\"\n (popoverOpened)=\"onPopoverOpened()\"\n >\n @for (text of date?.keyDateText; track text) {\n <div>\n {{ text }}\n </div>\n }\n </sky-popover>\n </div>\n} @else {\n <div\n class=\"sky-daypicker-cell\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n </div>\n}\n\n<ng-template #daypickerButtonTemplateRef>\n <sky-daypicker-button [date]=\"date\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i4.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1377
1357
|
}
|
|
1378
1358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
|
1379
1359
|
type: Component,
|
|
1380
|
-
args: [{ selector: 'sky-daypicker-cell',
|
|
1381
|
-
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }, { type:
|
|
1360
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkyDayPickerButtonComponent, SkyPopoverModule], selector: 'sky-daypicker-cell', standalone: true, template: "@if (hasTooltip) {\n <div\n class=\"sky-daypicker-cell\"\n skyPopoverPlacement=\"left\"\n [attr.aria-label]=\"getKeyDateLabel()\"\n [skyPopover]=\"dayInfoPopover\"\n [skyPopoverMessageStream]=\"popoverController\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n <sky-popover\n #dayInfoPopover\n (popoverClosed)=\"onPopoverClosed()\"\n (popoverOpened)=\"onPopoverOpened()\"\n >\n @for (text of date?.keyDateText; track text) {\n <div>\n {{ text }}\n </div>\n }\n </sky-popover>\n </div>\n} @else {\n <div\n class=\"sky-daypicker-cell\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n </div>\n}\n\n<ng-template #daypickerButtonTemplateRef>\n <sky-daypicker-button [date]=\"date\" />\n</ng-template>\n" }]
|
|
1361
|
+
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerCalendarService }], propDecorators: { activeDateHasChanged: [{
|
|
1382
1362
|
type: Input
|
|
1383
1363
|
}], date: [{
|
|
1384
1364
|
type: Input
|
|
@@ -1585,11 +1565,11 @@ class SkyDayPickerComponent {
|
|
|
1585
1565
|
return undefined;
|
|
1586
1566
|
}
|
|
1587
1567
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n <thead>\n <tr>\n @for (label of labels; track label.full) {\n <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n <!-- display: inline -->\n <span\n class=\"sky-datepicker-weekday-text\"\n [attr.aria-label]=\"label.full\"\n >{{ label.abbr }}</span\n >\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\" />\n @for (row of rows; track $index) {\n <tr role=\"row\">\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "component", type:
|
|
1568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerComponent, isStandalone: true, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n <thead>\n <tr>\n @for (label of labels; track label.full) {\n <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n <!-- display: inline -->\n <span\n class=\"sky-datepicker-weekday-text\"\n [attr.aria-label]=\"label.full\"\n >{{ label.abbr }}</span\n >\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\" />\n @for (row of rows; track $index) {\n <tr role=\"row\">\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
|
|
1589
1569
|
}
|
|
1590
1570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
|
1591
1571
|
type: Component,
|
|
1592
|
-
args: [{ selector: 'sky-daypicker', template: "<table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n <thead>\n <tr>\n @for (label of labels; track label.full) {\n <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n <!-- display: inline -->\n <span\n class=\"sky-datepicker-weekday-text\"\n [attr.aria-label]=\"label.full\"\n >{{ label.abbr }}</span\n >\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\" />\n @for (row of rows; track $index) {\n <tr role=\"row\">\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1572
|
+
args: [{ imports: [SkyDayPickerCellComponent, SkyWaitModule], selector: 'sky-daypicker', standalone: true, template: "<table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n <thead>\n <tr>\n @for (label of labels; track label.full) {\n <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n <!-- display: inline -->\n <span\n class=\"sky-datepicker-weekday-text\"\n [attr.aria-label]=\"label.full\"\n >{{ label.abbr }}</span\n >\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\" />\n @for (row of rows; track $index) {\n <tr role=\"row\">\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1593
1573
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { customDates: [{
|
|
1594
1574
|
type: Input
|
|
1595
1575
|
}], calendarDateRangeChange: [{
|
|
@@ -1665,11 +1645,11 @@ class SkyMonthPickerComponent {
|
|
|
1665
1645
|
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
|
|
1666
1646
|
}
|
|
1667
1647
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1668
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1648
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyMonthPickerComponent, isStandalone: true, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1669
1649
|
}
|
|
1670
1650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
|
1671
1651
|
type: Component,
|
|
1672
|
-
args: [{ selector: 'sky-monthpicker', template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1652
|
+
args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-monthpicker', standalone: true, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1673
1653
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
|
|
1674
1654
|
|
|
1675
1655
|
/**
|
|
@@ -1746,13 +1726,32 @@ class SkyYearPickerComponent {
|
|
|
1746
1726
|
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
|
|
1747
1727
|
}
|
|
1748
1728
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1749
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1729
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyYearPickerComponent, isStandalone: true, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1750
1730
|
}
|
|
1751
1731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
|
1752
1732
|
type: Component,
|
|
1753
|
-
args: [{ selector: 'sky-yearpicker', template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1733
|
+
args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-yearpicker', standalone: true, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [attr.aria-label]=\"\n date.date\n | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1754
1734
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
|
|
1755
1735
|
|
|
1736
|
+
class SkyDatepickerConfigService {
|
|
1737
|
+
constructor() {
|
|
1738
|
+
/**
|
|
1739
|
+
* The starting day of the week in the calendar,
|
|
1740
|
+
* where `0` sets the starting day to Sunday.
|
|
1741
|
+
* @default 0
|
|
1742
|
+
*/
|
|
1743
|
+
this.startingDay = 0;
|
|
1744
|
+
}
|
|
1745
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1746
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
1747
|
+
}
|
|
1748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
1749
|
+
type: Injectable,
|
|
1750
|
+
args: [{
|
|
1751
|
+
providedIn: 'root',
|
|
1752
|
+
}]
|
|
1753
|
+
}] });
|
|
1754
|
+
|
|
1756
1755
|
/**
|
|
1757
1756
|
* @internal
|
|
1758
1757
|
*/
|
|
@@ -1807,11 +1806,16 @@ class SkyDatepickerCalendarComponent {
|
|
|
1807
1806
|
}
|
|
1808
1807
|
}
|
|
1809
1808
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1810
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n <sky-datepicker-inner\n [customDates]=\"customDates\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [selectedDate]=\"selectedDate\"\n [startingDay]=\"startingDay\"\n (calendarModeChange)=\"onCalendarModeChange($event)\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n <div\n class=\"sky-datepicker-calendar-table-container\"\n autofocus\n tabindex=\"0\"\n (keydown)=\"datepicker?.onKeydown($event)\"\n >\n @if (datepicker?.datepickerMode === 'day') {\n <sky-daypicker\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n />\n } @else if (datepicker?.datepickerMode === 'month') {\n <sky-monthpicker />\n } @else if (datepicker?.datepickerMode === 'year') {\n <sky-yearpicker />\n }\n </div>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "startAtDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { kind: "component", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { kind: "component", type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { kind: "component", type: SkyYearPickerComponent, selector: "sky-yearpicker" }] }); }
|
|
1809
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDatepickerCalendarComponent, isStandalone: true, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n <sky-datepicker-inner\n [customDates]=\"customDates\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [selectedDate]=\"selectedDate\"\n [startingDay]=\"startingDay\"\n (calendarModeChange)=\"onCalendarModeChange($event)\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n <div\n class=\"sky-datepicker-calendar-table-container\"\n autofocus\n tabindex=\"0\"\n (keydown)=\"datepicker?.onKeydown($event)\"\n >\n @if (datepicker?.datepickerMode === 'day') {\n <sky-daypicker\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n />\n } @else if (datepicker?.datepickerMode === 'month') {\n <sky-monthpicker />\n } @else if (datepicker?.datepickerMode === 'year') {\n <sky-yearpicker />\n }\n </div>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "startAtDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { kind: "component", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { kind: "component", type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { kind: "component", type: SkyYearPickerComponent, selector: "sky-yearpicker" }] }); }
|
|
1811
1810
|
}
|
|
1812
1811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
|
1813
1812
|
type: Component,
|
|
1814
|
-
args: [{
|
|
1813
|
+
args: [{ imports: [
|
|
1814
|
+
SkyDatepickerCalendarInnerComponent,
|
|
1815
|
+
SkyDayPickerComponent,
|
|
1816
|
+
SkyMonthPickerComponent,
|
|
1817
|
+
SkyYearPickerComponent,
|
|
1818
|
+
], selector: 'sky-datepicker-calendar', standalone: true, template: "<div class=\"sky-datepicker-calendar\">\n <sky-datepicker-inner\n [customDates]=\"customDates\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [selectedDate]=\"selectedDate\"\n [startingDay]=\"startingDay\"\n (calendarModeChange)=\"onCalendarModeChange($event)\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n <div\n class=\"sky-datepicker-calendar-table-container\"\n autofocus\n tabindex=\"0\"\n (keydown)=\"datepicker?.onKeydown($event)\"\n >\n @if (datepicker?.datepickerMode === 'day') {\n <sky-daypicker\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n />\n } @else if (datepicker?.datepickerMode === 'month') {\n <sky-monthpicker />\n } @else if (datepicker?.datepickerMode === 'year') {\n <sky-yearpicker />\n }\n </div>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"] }]
|
|
1815
1819
|
}], ctorParameters: () => [{ type: SkyDatepickerConfigService }], propDecorators: { customDates: [{
|
|
1816
1820
|
type: Input
|
|
1817
1821
|
}], isDaypickerWaiting: [{
|
|
@@ -1971,6 +1975,7 @@ class SkyDatepickerComponent {
|
|
|
1971
1975
|
#overlayService;
|
|
1972
1976
|
#zIndex;
|
|
1973
1977
|
#datepickerHostSvc;
|
|
1978
|
+
#elementRef;
|
|
1974
1979
|
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
|
1975
1980
|
this.inputBoxHostService = inputBoxHostService;
|
|
1976
1981
|
/**
|
|
@@ -2009,6 +2014,7 @@ class SkyDatepickerComponent {
|
|
|
2009
2014
|
this.#environmentInjector = inject(EnvironmentInjector);
|
|
2010
2015
|
this.#resourceSvc = inject(SkyLibResourcesService);
|
|
2011
2016
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService);
|
|
2017
|
+
this.#elementRef = inject(ElementRef);
|
|
2012
2018
|
this.#affixService = affixService;
|
|
2013
2019
|
this.#changeDetector = changeDetector;
|
|
2014
2020
|
this.#coreAdapter = coreAdapter;
|
|
@@ -2106,6 +2112,14 @@ class SkyDatepickerComponent {
|
|
|
2106
2112
|
}
|
|
2107
2113
|
}
|
|
2108
2114
|
}
|
|
2115
|
+
/**
|
|
2116
|
+
* Whether the datepicker component contains the provided focus event target.
|
|
2117
|
+
* @internal
|
|
2118
|
+
*/
|
|
2119
|
+
containsTarget(target) {
|
|
2120
|
+
return (this.#elementRef.nativeElement.contains(target) ||
|
|
2121
|
+
this.getPickerRef()?.nativeElement.contains(target));
|
|
2122
|
+
}
|
|
2109
2123
|
/**
|
|
2110
2124
|
* Gets the element reference of the picker overlay.
|
|
2111
2125
|
* @internal
|
|
@@ -2230,11 +2244,16 @@ class SkyDatepickerComponent {
|
|
|
2230
2244
|
}
|
|
2231
2245
|
}
|
|
2232
2246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange", calendarDateChange: "calendarDateChange" }, providers: [SkyDatepickerHostService], viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? calendarId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon icon=\"calendar\" size=\"lg\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n #calendarRef\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n >\n <sky-datepicker-calendar\n cdkTrapFocus\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n />\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "
|
|
2247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDatepickerComponent, isStandalone: true, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange", calendarDateChange: "calendarDateChange" }, providers: [SkyDatepickerHostService], viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? calendarId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon icon=\"calendar\" size=\"lg\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n #calendarRef\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n >\n <sky-datepicker-calendar\n cdkTrapFocus\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n />\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2234
2248
|
}
|
|
2235
2249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2236
2250
|
type: Component,
|
|
2237
|
-
args: [{
|
|
2251
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2252
|
+
CommonModule,
|
|
2253
|
+
SkyDatepickerCalendarComponent,
|
|
2254
|
+
SkyDatetimeResourcesModule,
|
|
2255
|
+
SkyIconModule,
|
|
2256
|
+
], providers: [SkyDatepickerHostService], selector: 'sky-datepicker', standalone: true, template: "<div class=\"sky-datepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? calendarId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon icon=\"calendar\" size=\"lg\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n #calendarRef\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n >\n <sky-datepicker-calendar\n cdkTrapFocus\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n />\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"] }]
|
|
2238
2257
|
}], ctorParameters: () => [{ type: i1$1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
|
|
2239
2258
|
type: Optional
|
|
2240
2259
|
}] }, { type: i3.SkyThemeService, decorators: [{
|
|
@@ -2284,28 +2303,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2284
2303
|
}]
|
|
2285
2304
|
}] } });
|
|
2286
2305
|
|
|
2287
|
-
const
|
|
2306
|
+
const SKY_DATEPICKER_VALUE_ACCESSOR = {
|
|
2288
2307
|
provide: NG_VALUE_ACCESSOR,
|
|
2289
|
-
useExisting: forwardRef(() =>
|
|
2308
|
+
useExisting: forwardRef(() => SkyDatepickerInputDirective),
|
|
2290
2309
|
multi: true,
|
|
2291
2310
|
};
|
|
2292
|
-
const
|
|
2311
|
+
const SKY_DATEPICKER_VALIDATOR = {
|
|
2293
2312
|
provide: NG_VALIDATORS,
|
|
2294
|
-
useExisting: forwardRef(() =>
|
|
2313
|
+
useExisting: forwardRef(() => SkyDatepickerInputDirective),
|
|
2295
2314
|
multi: true,
|
|
2296
2315
|
};
|
|
2297
|
-
class
|
|
2316
|
+
class SkyDatepickerInputDirective {
|
|
2298
2317
|
/**
|
|
2299
2318
|
* The date format for the input. Place this attribute on the `input` element
|
|
2300
|
-
* to override the default in `SkyDatepickerConfigService`.
|
|
2319
|
+
* to override the default in the `SkyDatepickerConfigService`.
|
|
2301
2320
|
* @default "MM/DD/YYYY"
|
|
2302
2321
|
*/
|
|
2303
2322
|
set dateFormat(value) {
|
|
2304
|
-
|
|
2305
|
-
if (this.#
|
|
2306
|
-
|
|
2307
|
-
this.#
|
|
2308
|
-
this.#changeDetector.markForCheck();
|
|
2323
|
+
/* istanbul ignore else */
|
|
2324
|
+
if (value !== this.#_dateFormat) {
|
|
2325
|
+
this.#_dateFormat = value;
|
|
2326
|
+
this.#applyDateFormat();
|
|
2309
2327
|
}
|
|
2310
2328
|
}
|
|
2311
2329
|
// TODO: Refactor to not have getter logic
|
|
@@ -2320,7 +2338,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2320
2338
|
* @default false
|
|
2321
2339
|
*/
|
|
2322
2340
|
set disabled(value) {
|
|
2323
|
-
this.#_disabled = value;
|
|
2341
|
+
this.#_disabled = value || false;
|
|
2324
2342
|
this.#datepickerComponent.disabled = value;
|
|
2325
2343
|
this.#renderer.setProperty(this.#elementRef.nativeElement, 'disabled', value);
|
|
2326
2344
|
}
|
|
@@ -2328,59 +2346,57 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2328
2346
|
return this.#_disabled;
|
|
2329
2347
|
}
|
|
2330
2348
|
/**
|
|
2331
|
-
*
|
|
2332
|
-
*
|
|
2333
|
-
* @default false
|
|
2334
|
-
*/
|
|
2335
|
-
set futureDisabled(value) {
|
|
2336
|
-
this.#_futureDisabled = value;
|
|
2337
|
-
this.#datepickerComponent.maxDate = this.#getMaxDate();
|
|
2338
|
-
this.#onValidatorChange();
|
|
2339
|
-
}
|
|
2340
|
-
get futureDisabled() {
|
|
2341
|
-
return this.#_futureDisabled;
|
|
2342
|
-
}
|
|
2343
|
-
/**
|
|
2344
|
-
* The latest fuzzy date allowed. Place this attribute on the `input` element
|
|
2345
|
-
* to prevent fuzzy dates after a specified date. This property accepts
|
|
2346
|
-
* a `SkyFuzzyDate` value that includes numeric month, day, and year values.
|
|
2347
|
-
* For example: `{ month: 1, day: 1, year: 2027 }`.
|
|
2349
|
+
* The latest date that is available in the calendar. Place this attribute on
|
|
2350
|
+
* the `input` element to override the default in `SkyDatepickerConfigService`.
|
|
2348
2351
|
*/
|
|
2349
2352
|
set maxDate(value) {
|
|
2350
2353
|
this.#_maxDate = value;
|
|
2351
|
-
this.#datepickerComponent.maxDate = this
|
|
2354
|
+
this.#datepickerComponent.maxDate = this.maxDate;
|
|
2352
2355
|
this.#onValidatorChange();
|
|
2353
2356
|
}
|
|
2357
|
+
// TODO: Refactor to not have getter logic
|
|
2354
2358
|
get maxDate() {
|
|
2355
|
-
return this.#_maxDate;
|
|
2359
|
+
return this.#_maxDate || this.#configService.maxDate;
|
|
2356
2360
|
}
|
|
2357
2361
|
/**
|
|
2358
|
-
* The earliest
|
|
2359
|
-
* to
|
|
2360
|
-
* that includes numeric month, day, and year values.
|
|
2361
|
-
* For example: `{ month: 1, day: 1, year: 2007 }`.
|
|
2362
|
+
* The earliest date that is available in the calendar. Place this attribute on
|
|
2363
|
+
* the `input` element to override the default in `SkyDatepickerConfigService`. To avoid validation errors, the time associated with the minimum date must be midnight. This is necessary because the datepicker automatically sets the time on the `Date` object for selected dates to midnight in the current user's time zone.
|
|
2362
2364
|
*/
|
|
2363
2365
|
set minDate(value) {
|
|
2364
2366
|
this.#_minDate = value;
|
|
2365
|
-
this.#datepickerComponent.minDate = this
|
|
2367
|
+
this.#datepickerComponent.minDate = this.minDate;
|
|
2366
2368
|
this.#onValidatorChange();
|
|
2367
2369
|
}
|
|
2370
|
+
// TODO: Refactor to not have getter logic
|
|
2368
2371
|
get minDate() {
|
|
2369
|
-
return this.#_minDate;
|
|
2372
|
+
return this.#_minDate || this.#configService.minDate;
|
|
2370
2373
|
}
|
|
2371
2374
|
/**
|
|
2372
|
-
* The
|
|
2373
|
-
* This property accepts a `SkyFuzzyDate` value that includes numeric month, day, and year values.
|
|
2374
|
-
* For example: `{ month: 1, day: 1, year: 2007 }`.
|
|
2375
|
+
* The date to open the calendar to initially. Place this attribute on the `input` element to override the default in `SkyDatepickerConfigService`.
|
|
2375
2376
|
* @default The current date
|
|
2376
2377
|
*/
|
|
2377
2378
|
set startAtDate(value) {
|
|
2378
2379
|
this.#_startAtDate = value;
|
|
2379
|
-
this.#datepickerComponent.startAtDate = this
|
|
2380
|
+
this.#datepickerComponent.startAtDate = this.startAtDate;
|
|
2380
2381
|
}
|
|
2381
2382
|
// TODO: Refactor to not have getter logic
|
|
2382
2383
|
get startAtDate() {
|
|
2383
|
-
return this.#_startAtDate;
|
|
2384
|
+
return this.#_startAtDate || this.#configService.startAtDate;
|
|
2385
|
+
}
|
|
2386
|
+
/**
|
|
2387
|
+
* Creates the datepicker input and calendar. Place this directive on an `input` element,
|
|
2388
|
+
* and wrap the input in a `sky-datepicker` component. The value that users select is driven
|
|
2389
|
+
* through the `ngModel` attribute specified on the `input` element.
|
|
2390
|
+
* @required
|
|
2391
|
+
*/
|
|
2392
|
+
set skyDatepickerInput(value) {
|
|
2393
|
+
if (value) {
|
|
2394
|
+
console.warn('[Deprecation warning] You no longer need to provide a template reference variable ' +
|
|
2395
|
+
'to the `skyDatepickerInput` attribute (this will be a breaking change in the next ' +
|
|
2396
|
+
'major version release).\n' +
|
|
2397
|
+
'Do this instead:\n' +
|
|
2398
|
+
'<sky-datepicker>\n <input skyDatepickerInput />\n</sky-datepicker>');
|
|
2399
|
+
}
|
|
2384
2400
|
}
|
|
2385
2401
|
/**
|
|
2386
2402
|
* The starting day of the week in the calendar, where `0` sets the starting day
|
|
@@ -2398,15 +2414,18 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2398
2414
|
return this.#_startingDay || this.#configService.startingDay;
|
|
2399
2415
|
}
|
|
2400
2416
|
/**
|
|
2401
|
-
* Whether
|
|
2417
|
+
* Whether the format of the date value must match the format from the `dateFormat` value.
|
|
2418
|
+
* If this property is `true` and the datepicker input directive cannot find an exact match, then
|
|
2419
|
+
* the input is marked as invalid.
|
|
2420
|
+
* If this property is `false` and the datepicker input directive cannot find an exact match, then
|
|
2421
|
+
* it attempts to format the string based on the [ISO 8601 standard format](https://www.iso.org/iso-8601-date-and-time-format.html).
|
|
2402
2422
|
* @default false
|
|
2403
2423
|
*/
|
|
2404
|
-
set
|
|
2405
|
-
this.#
|
|
2406
|
-
this.#onValidatorChange();
|
|
2424
|
+
set strict(value) {
|
|
2425
|
+
this.#_strict = value || false;
|
|
2407
2426
|
}
|
|
2408
|
-
get
|
|
2409
|
-
return this.#
|
|
2427
|
+
get strict() {
|
|
2428
|
+
return this.#_strict;
|
|
2410
2429
|
}
|
|
2411
2430
|
get #value() {
|
|
2412
2431
|
return this.#_value;
|
|
@@ -2416,37 +2435,34 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2416
2435
|
}
|
|
2417
2436
|
#control;
|
|
2418
2437
|
#dateFormatter;
|
|
2419
|
-
#locale;
|
|
2420
2438
|
#preferredShortDateFormat;
|
|
2421
2439
|
#ngUnsubscribe;
|
|
2422
2440
|
#notifyTouched;
|
|
2423
|
-
#_futureDisabled;
|
|
2424
2441
|
#_dateFormat;
|
|
2425
2442
|
#_disabled;
|
|
2426
2443
|
#_maxDate;
|
|
2427
2444
|
#_minDate;
|
|
2428
2445
|
#_startAtDate;
|
|
2429
2446
|
#_startingDay;
|
|
2447
|
+
#_strict;
|
|
2430
2448
|
#_value;
|
|
2431
|
-
#_yearRequired;
|
|
2432
2449
|
#changeDetector;
|
|
2433
2450
|
#configService;
|
|
2434
2451
|
#elementRef;
|
|
2435
|
-
#
|
|
2452
|
+
#localeProvider;
|
|
2436
2453
|
#renderer;
|
|
2437
2454
|
#datepickerComponent;
|
|
2438
2455
|
#datepickerHostSvc;
|
|
2439
|
-
constructor(changeDetector, configService, elementRef,
|
|
2456
|
+
constructor(changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
|
|
2440
2457
|
/**
|
|
2441
|
-
* Whether to disable date validation on the
|
|
2458
|
+
* Whether to disable date validation on the datepicker input.
|
|
2442
2459
|
* @default false
|
|
2443
2460
|
*/
|
|
2444
2461
|
this.skyDatepickerNoValidate = false;
|
|
2445
2462
|
this.#dateFormatter = new SkyDateFormatter();
|
|
2446
2463
|
this.#ngUnsubscribe = new Subject();
|
|
2447
|
-
this.#_futureDisabled = false;
|
|
2448
2464
|
this.#_disabled = false;
|
|
2449
|
-
this.#
|
|
2465
|
+
this.#_strict = false;
|
|
2450
2466
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
|
|
2451
2467
|
optional: true,
|
|
2452
2468
|
});
|
|
@@ -2455,24 +2471,23 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2455
2471
|
// istanbul ignore next
|
|
2456
2472
|
this.#onValidatorChange = () => { };
|
|
2457
2473
|
if (!datepickerComponent) {
|
|
2458
|
-
throw new Error('You must wrap the `
|
|
2474
|
+
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
|
2459
2475
|
'`<sky-datepicker>` component!');
|
|
2460
2476
|
}
|
|
2461
2477
|
this.#changeDetector = changeDetector;
|
|
2462
2478
|
this.#configService = configService;
|
|
2463
2479
|
this.#elementRef = elementRef;
|
|
2464
|
-
this.#
|
|
2480
|
+
this.#localeProvider = localeProvider;
|
|
2465
2481
|
this.#renderer = renderer;
|
|
2466
2482
|
this.#datepickerComponent = datepickerComponent;
|
|
2467
|
-
this.#
|
|
2468
|
-
localeProvider
|
|
2483
|
+
this.#localeProvider
|
|
2469
2484
|
.getLocaleInfo()
|
|
2470
2485
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2471
2486
|
.subscribe((localeInfo) => {
|
|
2472
|
-
|
|
2473
|
-
SkyDateFormatter.setLocale(this.#locale);
|
|
2487
|
+
SkyDateFormatter.setLocale(localeInfo.locale);
|
|
2474
2488
|
this.#preferredShortDateFormat =
|
|
2475
2489
|
SkyDateFormatter.getPreferredShortDateFormat();
|
|
2490
|
+
this.#applyDateFormat();
|
|
2476
2491
|
});
|
|
2477
2492
|
this.#datepickerHostSvc?.focusout
|
|
2478
2493
|
.pipe(takeUntilDestroyed())
|
|
@@ -2484,17 +2499,14 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2484
2499
|
});
|
|
2485
2500
|
}
|
|
2486
2501
|
ngOnInit() {
|
|
2487
|
-
if (this.yearRequired) {
|
|
2488
|
-
if (this.dateFormat?.toLowerCase().indexOf('y') === -1) {
|
|
2489
|
-
throw new Error('You have configured conflicting settings. Year is required and dateFormat does not include year.');
|
|
2490
|
-
}
|
|
2491
|
-
}
|
|
2492
2502
|
const element = this.#elementRef.nativeElement;
|
|
2493
2503
|
this.#renderer.addClass(element, 'sky-form-control');
|
|
2494
2504
|
}
|
|
2495
2505
|
ngAfterContentInit() {
|
|
2506
|
+
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
2496
2507
|
this.#datepickerComponent.dateChange
|
|
2497
|
-
.pipe(distinctUntilChanged()
|
|
2508
|
+
.pipe(distinctUntilChanged())
|
|
2509
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2498
2510
|
.subscribe((value) => {
|
|
2499
2511
|
this.#value = value;
|
|
2500
2512
|
});
|
|
@@ -2520,13 +2532,23 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2520
2532
|
this.#ngUnsubscribe.complete();
|
|
2521
2533
|
}
|
|
2522
2534
|
onInputChange(event) {
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2535
|
+
const value = event.target.value;
|
|
2536
|
+
if (this.skyDatepickerNoValidate) {
|
|
2537
|
+
this.#onValueChange(value);
|
|
2538
|
+
return;
|
|
2539
|
+
}
|
|
2540
|
+
// Don't try to parse the string value into a Date value if it is malformed.
|
|
2541
|
+
if (this.#isDateStringValid(value)) {
|
|
2542
|
+
this.#onValueChange(value);
|
|
2543
|
+
return;
|
|
2529
2544
|
}
|
|
2545
|
+
this.#_value = value;
|
|
2546
|
+
this.#onChange(value);
|
|
2547
|
+
this.#control?.setErrors({
|
|
2548
|
+
skyDate: {
|
|
2549
|
+
invalid: value,
|
|
2550
|
+
},
|
|
2551
|
+
});
|
|
2530
2552
|
}
|
|
2531
2553
|
onInput() {
|
|
2532
2554
|
this.#control?.markAsDirty();
|
|
@@ -2537,79 +2559,64 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2537
2559
|
validate(control) {
|
|
2538
2560
|
if (!this.#control) {
|
|
2539
2561
|
this.#control = control;
|
|
2562
|
+
// Account for any date conversion that may have occurred prior to validation.
|
|
2563
|
+
if (this.#control.value !== this.#value) {
|
|
2564
|
+
this.#control.patchValue(this.#value, { emitEvent: false });
|
|
2565
|
+
}
|
|
2540
2566
|
}
|
|
2541
2567
|
if (this.skyDatepickerNoValidate) {
|
|
2542
2568
|
return null;
|
|
2543
2569
|
}
|
|
2544
|
-
if (!this.#control.value) {
|
|
2545
|
-
return null;
|
|
2546
|
-
}
|
|
2547
2570
|
const value = control.value;
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
if (typeof value === 'string') {
|
|
2551
|
-
fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
|
|
2552
|
-
}
|
|
2553
|
-
else {
|
|
2554
|
-
fuzzyDate = value;
|
|
2555
|
-
}
|
|
2556
|
-
if (!fuzzyDate) {
|
|
2557
|
-
validationError = {
|
|
2558
|
-
skyFuzzyDate: {
|
|
2559
|
-
invalid: value,
|
|
2560
|
-
},
|
|
2561
|
-
};
|
|
2571
|
+
if (!value) {
|
|
2572
|
+
return null;
|
|
2562
2573
|
}
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2574
|
+
if (value instanceof Date) {
|
|
2575
|
+
const isDateValid = this.#dateFormatter.dateIsValid(value);
|
|
2576
|
+
if (!isDateValid) {
|
|
2577
|
+
// Mark the invalid control as touched so that the input's invalid CSS styles appear.
|
|
2578
|
+
// (This is only required when the invalid value is set by the FormControl constructor.)
|
|
2579
|
+
this.#control.markAsTouched();
|
|
2580
|
+
return {
|
|
2581
|
+
skyDate: {
|
|
2582
|
+
invalid: value,
|
|
2583
|
+
},
|
|
2569
2584
|
};
|
|
2570
2585
|
}
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
};
|
|
2593
|
-
}
|
|
2594
|
-
}
|
|
2595
|
-
if (!validationError && this.futureDisabled) {
|
|
2596
|
-
fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.#fuzzyDateService.getCurrentFuzzyDate());
|
|
2597
|
-
if (!fuzzyDateRange.valid) {
|
|
2598
|
-
validationError = {
|
|
2599
|
-
skyFuzzyDate: {
|
|
2600
|
-
futureDisabled: value,
|
|
2601
|
-
},
|
|
2602
|
-
};
|
|
2603
|
-
}
|
|
2604
|
-
}
|
|
2586
|
+
const minDate = this.minDate;
|
|
2587
|
+
if (minDate &&
|
|
2588
|
+
this.#dateFormatter.dateIsValid(minDate) &&
|
|
2589
|
+
value < minDate) {
|
|
2590
|
+
return {
|
|
2591
|
+
skyDate: {
|
|
2592
|
+
minDate,
|
|
2593
|
+
minDateFormatted: this.#dateFormatter.format(minDate, this.dateFormat),
|
|
2594
|
+
},
|
|
2595
|
+
};
|
|
2596
|
+
}
|
|
2597
|
+
const maxDate = this.maxDate;
|
|
2598
|
+
if (maxDate &&
|
|
2599
|
+
this.#dateFormatter.dateIsValid(maxDate) &&
|
|
2600
|
+
value > maxDate) {
|
|
2601
|
+
return {
|
|
2602
|
+
skyDate: {
|
|
2603
|
+
maxDate,
|
|
2604
|
+
maxDateFormatted: this.#dateFormatter.format(maxDate, this.dateFormat),
|
|
2605
|
+
},
|
|
2606
|
+
};
|
|
2605
2607
|
}
|
|
2606
2608
|
}
|
|
2607
|
-
|
|
2609
|
+
else {
|
|
2608
2610
|
// Mark the invalid control as touched so that the input's invalid CSS styles appear.
|
|
2609
2611
|
// (This is only required when the invalid value is set by the FormControl constructor.)
|
|
2610
2612
|
this.#control.markAsTouched();
|
|
2613
|
+
return {
|
|
2614
|
+
skyDate: {
|
|
2615
|
+
invalid: value,
|
|
2616
|
+
},
|
|
2617
|
+
};
|
|
2611
2618
|
}
|
|
2612
|
-
return
|
|
2619
|
+
return null;
|
|
2613
2620
|
}
|
|
2614
2621
|
registerOnChange(fn) {
|
|
2615
2622
|
this.#onChange = fn;
|
|
@@ -2636,49 +2643,85 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2636
2643
|
this.#notifyTouched?.();
|
|
2637
2644
|
}
|
|
2638
2645
|
}
|
|
2646
|
+
#applyDateFormat() {
|
|
2647
|
+
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
2648
|
+
if (this.#value) {
|
|
2649
|
+
const formattedDate = this.#dateFormatter.format(this.#value, this.dateFormat);
|
|
2650
|
+
this.#setInputElementValue(formattedDate);
|
|
2651
|
+
this.#changeDetector.markForCheck();
|
|
2652
|
+
}
|
|
2653
|
+
}
|
|
2639
2654
|
#onValueChange(newValue) {
|
|
2640
2655
|
this.#value = newValue;
|
|
2641
2656
|
}
|
|
2642
2657
|
#setInputElementValue(value) {
|
|
2643
2658
|
this.#renderer.setProperty(this.#elementRef.nativeElement, 'value', value);
|
|
2644
2659
|
}
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2660
|
+
/**
|
|
2661
|
+
* Gets the date value from a value - if possible.
|
|
2662
|
+
* Will not convert unconvertible dates or numbers outside of the current month's number of days.
|
|
2663
|
+
* Returns `undefined` if the value can not be converted.
|
|
2664
|
+
*/
|
|
2665
|
+
#getDateValue(value) {
|
|
2666
|
+
if (value instanceof Date) {
|
|
2667
|
+
return value;
|
|
2651
2668
|
}
|
|
2652
|
-
else if (
|
|
2653
|
-
return
|
|
2669
|
+
else if (typeof value === 'string') {
|
|
2670
|
+
return this.#getShortcutOrDateValue(value);
|
|
2654
2671
|
}
|
|
2655
|
-
return
|
|
2672
|
+
return undefined;
|
|
2656
2673
|
}
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2674
|
+
/**
|
|
2675
|
+
* Converts a string to a date object if the string is a valid date string.
|
|
2676
|
+
* It will also convert numeric input to a date if that number is within the current month's number of days.
|
|
2677
|
+
* If the string can not be converted, `undefined` be returned.
|
|
2678
|
+
*/
|
|
2679
|
+
#getShortcutOrDateValue(value) {
|
|
2680
|
+
const num = Number(value);
|
|
2681
|
+
if (Number.isInteger(num)) {
|
|
2682
|
+
// We require 8 digits in order to know that we have all information needed to determine what part of the number is the month (2), day (2), and year (4).
|
|
2683
|
+
if (value.length === 8) {
|
|
2684
|
+
const regex = new RegExp(/\b(MM)\b|\b(DD)\b|\b(YY)\b|\b(YYYY)\b/, 'g');
|
|
2685
|
+
const formatTokensOnly = this.dateFormat
|
|
2686
|
+
?.match(regex)
|
|
2687
|
+
?.join('')
|
|
2688
|
+
.replace(new RegExp(/Y+/), 'YYYY');
|
|
2689
|
+
if (formatTokensOnly && formatTokensOnly.length === 8) {
|
|
2690
|
+
const date = this.#dateFormatter.getDateFromString(value, formatTokensOnly, true);
|
|
2691
|
+
if (this.#dateFormatter.dateIsValid(date)) {
|
|
2692
|
+
return date;
|
|
2693
|
+
}
|
|
2694
|
+
}
|
|
2695
|
+
}
|
|
2696
|
+
const now = new Date();
|
|
2697
|
+
const shortcutDate = new Date(now.getFullYear(), now.getMonth(), num);
|
|
2698
|
+
const daysInMonth = shortcutDate.getDate();
|
|
2699
|
+
if (num > 0 && num <= daysInMonth) {
|
|
2700
|
+
return shortcutDate;
|
|
2662
2701
|
}
|
|
2663
2702
|
}
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
const startAtDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.startAtDate);
|
|
2669
|
-
if (startAtDate.isValid()) {
|
|
2670
|
-
return startAtDate.toDate();
|
|
2703
|
+
else {
|
|
2704
|
+
const date = this.#dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
|
|
2705
|
+
if (this.#dateFormatter.dateIsValid(date)) {
|
|
2706
|
+
return date;
|
|
2671
2707
|
}
|
|
2672
2708
|
}
|
|
2673
|
-
return
|
|
2709
|
+
return undefined;
|
|
2674
2710
|
}
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2711
|
+
/**
|
|
2712
|
+
* Validates the input value to ensure it is formatted correctly.
|
|
2713
|
+
*/
|
|
2714
|
+
#isDateStringValid(value) {
|
|
2715
|
+
if (!value || typeof value !== 'string') {
|
|
2716
|
+
return true;
|
|
2717
|
+
}
|
|
2718
|
+
// Does the value only include digits, dashes, or slashes?
|
|
2719
|
+
const regexp = /^[\d/-]+$/;
|
|
2720
|
+
const isValid = regexp.test(value);
|
|
2721
|
+
if (isValid) {
|
|
2722
|
+
return true;
|
|
2723
|
+
}
|
|
2724
|
+
return moment(value).isValid();
|
|
2682
2725
|
}
|
|
2683
2726
|
// istanbul ignore next
|
|
2684
2727
|
#onChange;
|
|
@@ -2690,124 +2733,112 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2690
2733
|
* In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
|
|
2691
2734
|
*/
|
|
2692
2735
|
#updateValue(value, emitEvent = true) {
|
|
2693
|
-
if (this.#_value === value
|
|
2694
|
-
(this.#_value === undefined && value === null)) {
|
|
2736
|
+
if (this.#_value === value) {
|
|
2695
2737
|
return;
|
|
2696
2738
|
}
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
|
|
2705
|
-
}
|
|
2706
|
-
else if (typeof value === 'string') {
|
|
2707
|
-
fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
|
|
2708
|
-
if (fuzzyDate) {
|
|
2709
|
-
formattedDate = this.#fuzzyDateService.format(fuzzyDate, this.dateFormat, this.#locale);
|
|
2710
|
-
}
|
|
2711
|
-
if (!formattedDate) {
|
|
2712
|
-
formattedDate = value;
|
|
2739
|
+
const isValidDateString = this.#isDateStringValid(value);
|
|
2740
|
+
// If the string value supplied is malformed, do not set the value to its Date equivalent.
|
|
2741
|
+
// (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
|
|
2742
|
+
if (!isValidDateString) {
|
|
2743
|
+
this.#_value = value;
|
|
2744
|
+
if (emitEvent) {
|
|
2745
|
+
this.#onChange(this.#_value);
|
|
2713
2746
|
}
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
dateValue = fuzzyMoment.toDate();
|
|
2747
|
+
else {
|
|
2748
|
+
this.#control?.setValue(this.#_value, { emitEvent: false });
|
|
2717
2749
|
}
|
|
2750
|
+
this.#datepickerComponent.selectedDate = this.#_value;
|
|
2751
|
+
this.#setInputElementValue(value);
|
|
2718
2752
|
}
|
|
2719
2753
|
else {
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
dateValue
|
|
2754
|
+
// This value represents the date value for the input if possible.
|
|
2755
|
+
// This value will take into account all shortcut functionality.
|
|
2756
|
+
const dateValue = this.#getDateValue(value);
|
|
2757
|
+
const areDatesEqual = this.#_value instanceof Date &&
|
|
2758
|
+
dateValue &&
|
|
2759
|
+
dateValue.getTime() === this.#_value.getTime();
|
|
2760
|
+
if (dateValue !== this.#_value || !areDatesEqual) {
|
|
2761
|
+
this.#_value = dateValue || value;
|
|
2762
|
+
if (emitEvent) {
|
|
2763
|
+
this.#onChange(this.#_value);
|
|
2764
|
+
}
|
|
2765
|
+
else {
|
|
2766
|
+
this.#control?.setValue(this.#_value, { emitEvent: false });
|
|
2767
|
+
}
|
|
2768
|
+
this.#datepickerComponent.selectedDate = this.#_value;
|
|
2725
2769
|
}
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
this.#_value = fuzzyDate || value;
|
|
2730
|
-
if (isNewValue) {
|
|
2731
|
-
if (emitEvent) {
|
|
2732
|
-
this.#onChange(this.#_value);
|
|
2770
|
+
if (dateValue) {
|
|
2771
|
+
const formattedDateString = this.#dateFormatter.format(dateValue, this.dateFormat);
|
|
2772
|
+
this.#setInputElementValue(formattedDateString);
|
|
2733
2773
|
}
|
|
2734
2774
|
else {
|
|
2735
|
-
this.#
|
|
2775
|
+
this.#setInputElementValue(value || '');
|
|
2736
2776
|
}
|
|
2737
|
-
this.#datepickerComponent.selectedDate = dateValue;
|
|
2738
2777
|
}
|
|
2739
|
-
this.#setInputElementValue(formattedDate || '');
|
|
2740
2778
|
}
|
|
2741
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
2742
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type:
|
|
2743
|
-
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
2744
|
-
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
2745
|
-
], ngImport: i0 }); }
|
|
2779
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2780
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SkyDatepickerInputDirective, isStandalone: true, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "input": "onInput()" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
|
|
2746
2781
|
}
|
|
2747
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
2782
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
2748
2783
|
type: Directive,
|
|
2749
2784
|
args: [{
|
|
2750
|
-
selector: '[skyFuzzyDatepickerInput]',
|
|
2751
|
-
providers: [
|
|
2752
|
-
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
2753
|
-
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
2754
|
-
],
|
|
2755
2785
|
host: {
|
|
2756
2786
|
'(focusout)': 'onFocusout($event)',
|
|
2757
2787
|
},
|
|
2788
|
+
providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
|
|
2789
|
+
selector: '[skyDatepickerInput]',
|
|
2790
|
+
standalone: true,
|
|
2758
2791
|
}]
|
|
2759
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type:
|
|
2792
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
|
|
2760
2793
|
type: Optional
|
|
2761
2794
|
}] }], propDecorators: { dateFormat: [{
|
|
2762
2795
|
type: Input
|
|
2763
2796
|
}], disabled: [{
|
|
2764
2797
|
type: Input
|
|
2765
|
-
}], futureDisabled: [{
|
|
2766
|
-
type: Input
|
|
2767
2798
|
}], maxDate: [{
|
|
2768
2799
|
type: Input
|
|
2769
2800
|
}], minDate: [{
|
|
2770
2801
|
type: Input
|
|
2771
2802
|
}], startAtDate: [{
|
|
2772
2803
|
type: Input
|
|
2804
|
+
}], skyDatepickerInput: [{
|
|
2805
|
+
type: Input
|
|
2773
2806
|
}], skyDatepickerNoValidate: [{
|
|
2774
2807
|
type: Input
|
|
2775
2808
|
}], startingDay: [{
|
|
2776
2809
|
type: Input
|
|
2777
|
-
}],
|
|
2810
|
+
}], strict: [{
|
|
2778
2811
|
type: Input
|
|
2779
2812
|
}], onInputChange: [{
|
|
2780
2813
|
type: HostListener,
|
|
2781
2814
|
args: ['change', ['$event']]
|
|
2782
|
-
}], onInputBlur: [{
|
|
2783
|
-
type: HostListener,
|
|
2784
|
-
args: ['blur']
|
|
2785
2815
|
}], onInput: [{
|
|
2786
2816
|
type: HostListener,
|
|
2787
2817
|
args: ['input']
|
|
2788
2818
|
}] } });
|
|
2789
2819
|
|
|
2790
|
-
const
|
|
2820
|
+
const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
|
|
2791
2821
|
provide: NG_VALUE_ACCESSOR,
|
|
2792
|
-
useExisting: forwardRef(() =>
|
|
2822
|
+
useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
|
|
2793
2823
|
multi: true,
|
|
2794
2824
|
};
|
|
2795
|
-
const
|
|
2825
|
+
const SKY_FUZZY_DATEPICKER_VALIDATOR = {
|
|
2796
2826
|
provide: NG_VALIDATORS,
|
|
2797
|
-
useExisting: forwardRef(() =>
|
|
2827
|
+
useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
|
|
2798
2828
|
multi: true,
|
|
2799
2829
|
};
|
|
2800
|
-
class
|
|
2830
|
+
class SkyFuzzyDatepickerInputDirective {
|
|
2801
2831
|
/**
|
|
2802
2832
|
* The date format for the input. Place this attribute on the `input` element
|
|
2803
|
-
* to override the default in
|
|
2833
|
+
* to override the default in `SkyDatepickerConfigService`.
|
|
2804
2834
|
* @default "MM/DD/YYYY"
|
|
2805
2835
|
*/
|
|
2806
2836
|
set dateFormat(value) {
|
|
2807
|
-
|
|
2808
|
-
if (
|
|
2809
|
-
this.#
|
|
2810
|
-
this.#
|
|
2837
|
+
this.#_dateFormat = value;
|
|
2838
|
+
if (this.#value) {
|
|
2839
|
+
const formattedDate = this.#fuzzyDateService.format(this.#value, this.dateFormat, this.#locale);
|
|
2840
|
+
this.#setInputElementValue(formattedDate);
|
|
2841
|
+
this.#changeDetector.markForCheck();
|
|
2811
2842
|
}
|
|
2812
2843
|
}
|
|
2813
2844
|
// TODO: Refactor to not have getter logic
|
|
@@ -2822,7 +2853,7 @@ class SkyDatepickerInputDirective {
|
|
|
2822
2853
|
* @default false
|
|
2823
2854
|
*/
|
|
2824
2855
|
set disabled(value) {
|
|
2825
|
-
this.#_disabled = value
|
|
2856
|
+
this.#_disabled = value;
|
|
2826
2857
|
this.#datepickerComponent.disabled = value;
|
|
2827
2858
|
this.#renderer.setProperty(this.#elementRef.nativeElement, 'disabled', value);
|
|
2828
2859
|
}
|
|
@@ -2830,57 +2861,59 @@ class SkyDatepickerInputDirective {
|
|
|
2830
2861
|
return this.#_disabled;
|
|
2831
2862
|
}
|
|
2832
2863
|
/**
|
|
2833
|
-
*
|
|
2834
|
-
* the `input` element
|
|
2864
|
+
* Whether to prevent users from specifying dates that are in the future.
|
|
2865
|
+
* Place this attribute on the `input` element.
|
|
2866
|
+
* @default false
|
|
2867
|
+
*/
|
|
2868
|
+
set futureDisabled(value) {
|
|
2869
|
+
this.#_futureDisabled = value;
|
|
2870
|
+
this.#datepickerComponent.maxDate = this.#getMaxDate();
|
|
2871
|
+
this.#onValidatorChange();
|
|
2872
|
+
}
|
|
2873
|
+
get futureDisabled() {
|
|
2874
|
+
return this.#_futureDisabled;
|
|
2875
|
+
}
|
|
2876
|
+
/**
|
|
2877
|
+
* The latest fuzzy date allowed. Place this attribute on the `input` element
|
|
2878
|
+
* to prevent fuzzy dates after a specified date. This property accepts
|
|
2879
|
+
* a `SkyFuzzyDate` value that includes numeric month, day, and year values.
|
|
2880
|
+
* For example: `{ month: 1, day: 1, year: 2027 }`.
|
|
2835
2881
|
*/
|
|
2836
2882
|
set maxDate(value) {
|
|
2837
2883
|
this.#_maxDate = value;
|
|
2838
|
-
this.#datepickerComponent.maxDate = this
|
|
2884
|
+
this.#datepickerComponent.maxDate = this.#getMaxDate();
|
|
2839
2885
|
this.#onValidatorChange();
|
|
2840
2886
|
}
|
|
2841
|
-
// TODO: Refactor to not have getter logic
|
|
2842
2887
|
get maxDate() {
|
|
2843
|
-
return this.#_maxDate
|
|
2888
|
+
return this.#_maxDate;
|
|
2844
2889
|
}
|
|
2845
2890
|
/**
|
|
2846
|
-
* The earliest date
|
|
2847
|
-
*
|
|
2891
|
+
* The earliest fuzzy date allowed. Place this attribute on the `input` element
|
|
2892
|
+
* to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
|
|
2893
|
+
* that includes numeric month, day, and year values.
|
|
2894
|
+
* For example: `{ month: 1, day: 1, year: 2007 }`.
|
|
2848
2895
|
*/
|
|
2849
2896
|
set minDate(value) {
|
|
2850
2897
|
this.#_minDate = value;
|
|
2851
|
-
this.#datepickerComponent.minDate = this
|
|
2898
|
+
this.#datepickerComponent.minDate = this.#getMinDate();
|
|
2852
2899
|
this.#onValidatorChange();
|
|
2853
2900
|
}
|
|
2854
|
-
// TODO: Refactor to not have getter logic
|
|
2855
2901
|
get minDate() {
|
|
2856
|
-
return this.#_minDate
|
|
2902
|
+
return this.#_minDate;
|
|
2857
2903
|
}
|
|
2858
2904
|
/**
|
|
2859
|
-
* The date to open the calendar to initially.
|
|
2905
|
+
* The fuzzy date to open the calendar to initially.
|
|
2906
|
+
* This property accepts a `SkyFuzzyDate` value that includes numeric month, day, and year values.
|
|
2907
|
+
* For example: `{ month: 1, day: 1, year: 2007 }`.
|
|
2860
2908
|
* @default The current date
|
|
2861
2909
|
*/
|
|
2862
2910
|
set startAtDate(value) {
|
|
2863
2911
|
this.#_startAtDate = value;
|
|
2864
|
-
this.#datepickerComponent.startAtDate = this
|
|
2912
|
+
this.#datepickerComponent.startAtDate = this.#getStartAtDate();
|
|
2865
2913
|
}
|
|
2866
2914
|
// TODO: Refactor to not have getter logic
|
|
2867
2915
|
get startAtDate() {
|
|
2868
|
-
return this.#_startAtDate
|
|
2869
|
-
}
|
|
2870
|
-
/**
|
|
2871
|
-
* Creates the datepicker input and calendar. Place this directive on an `input` element,
|
|
2872
|
-
* and wrap the input in a `sky-datepicker` component. The value that users select is driven
|
|
2873
|
-
* through the `ngModel` attribute specified on the `input` element.
|
|
2874
|
-
* @required
|
|
2875
|
-
*/
|
|
2876
|
-
set skyDatepickerInput(value) {
|
|
2877
|
-
if (value) {
|
|
2878
|
-
console.warn('[Deprecation warning] You no longer need to provide a template reference variable ' +
|
|
2879
|
-
'to the `skyDatepickerInput` attribute (this will be a breaking change in the next ' +
|
|
2880
|
-
'major version release).\n' +
|
|
2881
|
-
'Do this instead:\n' +
|
|
2882
|
-
'<sky-datepicker>\n <input skyDatepickerInput />\n</sky-datepicker>');
|
|
2883
|
-
}
|
|
2916
|
+
return this.#_startAtDate;
|
|
2884
2917
|
}
|
|
2885
2918
|
/**
|
|
2886
2919
|
* The starting day of the week in the calendar, where `0` sets the starting day
|
|
@@ -2898,18 +2931,15 @@ class SkyDatepickerInputDirective {
|
|
|
2898
2931
|
return this.#_startingDay || this.#configService.startingDay;
|
|
2899
2932
|
}
|
|
2900
2933
|
/**
|
|
2901
|
-
* Whether
|
|
2902
|
-
* If this property is `true` and the datepicker input directive cannot find an exact match, then
|
|
2903
|
-
* the input is marked as invalid.
|
|
2904
|
-
* If this property is `false` and the datepicker input directive cannot find an exact match, then
|
|
2905
|
-
* it attempts to format the string based on the [ISO 8601 standard format](https://www.iso.org/iso-8601-date-and-time-format.html).
|
|
2934
|
+
* Whether to require the year in fuzzy dates.
|
|
2906
2935
|
* @default false
|
|
2907
2936
|
*/
|
|
2908
|
-
set
|
|
2909
|
-
this.#
|
|
2937
|
+
set yearRequired(value) {
|
|
2938
|
+
this.#_yearRequired = value;
|
|
2939
|
+
this.#onValidatorChange();
|
|
2910
2940
|
}
|
|
2911
|
-
get
|
|
2912
|
-
return this.#
|
|
2941
|
+
get yearRequired() {
|
|
2942
|
+
return this.#_yearRequired;
|
|
2913
2943
|
}
|
|
2914
2944
|
get #value() {
|
|
2915
2945
|
return this.#_value;
|
|
@@ -2919,34 +2949,37 @@ class SkyDatepickerInputDirective {
|
|
|
2919
2949
|
}
|
|
2920
2950
|
#control;
|
|
2921
2951
|
#dateFormatter;
|
|
2952
|
+
#locale;
|
|
2922
2953
|
#preferredShortDateFormat;
|
|
2923
2954
|
#ngUnsubscribe;
|
|
2924
2955
|
#notifyTouched;
|
|
2956
|
+
#_futureDisabled;
|
|
2925
2957
|
#_dateFormat;
|
|
2926
2958
|
#_disabled;
|
|
2927
2959
|
#_maxDate;
|
|
2928
2960
|
#_minDate;
|
|
2929
2961
|
#_startAtDate;
|
|
2930
2962
|
#_startingDay;
|
|
2931
|
-
#_strict;
|
|
2932
2963
|
#_value;
|
|
2964
|
+
#_yearRequired;
|
|
2933
2965
|
#changeDetector;
|
|
2934
2966
|
#configService;
|
|
2935
2967
|
#elementRef;
|
|
2936
|
-
#
|
|
2968
|
+
#fuzzyDateService;
|
|
2937
2969
|
#renderer;
|
|
2938
2970
|
#datepickerComponent;
|
|
2939
2971
|
#datepickerHostSvc;
|
|
2940
|
-
constructor(changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
|
|
2972
|
+
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, datepickerComponent) {
|
|
2941
2973
|
/**
|
|
2942
|
-
* Whether to disable date validation on the datepicker input.
|
|
2974
|
+
* Whether to disable date validation on the fuzzy datepicker input.
|
|
2943
2975
|
* @default false
|
|
2944
2976
|
*/
|
|
2945
2977
|
this.skyDatepickerNoValidate = false;
|
|
2946
2978
|
this.#dateFormatter = new SkyDateFormatter();
|
|
2947
2979
|
this.#ngUnsubscribe = new Subject();
|
|
2980
|
+
this.#_futureDisabled = false;
|
|
2948
2981
|
this.#_disabled = false;
|
|
2949
|
-
this.#
|
|
2982
|
+
this.#_yearRequired = false;
|
|
2950
2983
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
|
|
2951
2984
|
optional: true,
|
|
2952
2985
|
});
|
|
@@ -2955,23 +2988,24 @@ class SkyDatepickerInputDirective {
|
|
|
2955
2988
|
// istanbul ignore next
|
|
2956
2989
|
this.#onValidatorChange = () => { };
|
|
2957
2990
|
if (!datepickerComponent) {
|
|
2958
|
-
throw new Error('You must wrap the `
|
|
2991
|
+
throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
|
|
2959
2992
|
'`<sky-datepicker>` component!');
|
|
2960
2993
|
}
|
|
2961
2994
|
this.#changeDetector = changeDetector;
|
|
2962
2995
|
this.#configService = configService;
|
|
2963
2996
|
this.#elementRef = elementRef;
|
|
2964
|
-
this.#
|
|
2997
|
+
this.#fuzzyDateService = fuzzyDateService;
|
|
2965
2998
|
this.#renderer = renderer;
|
|
2966
2999
|
this.#datepickerComponent = datepickerComponent;
|
|
2967
|
-
this.#localeProvider
|
|
3000
|
+
this.#locale = localeProvider.defaultLocale;
|
|
3001
|
+
localeProvider
|
|
2968
3002
|
.getLocaleInfo()
|
|
2969
3003
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2970
3004
|
.subscribe((localeInfo) => {
|
|
2971
|
-
|
|
3005
|
+
this.#locale = localeInfo.locale;
|
|
3006
|
+
SkyDateFormatter.setLocale(this.#locale);
|
|
2972
3007
|
this.#preferredShortDateFormat =
|
|
2973
3008
|
SkyDateFormatter.getPreferredShortDateFormat();
|
|
2974
|
-
this.#applyDateFormat();
|
|
2975
3009
|
});
|
|
2976
3010
|
this.#datepickerHostSvc?.focusout
|
|
2977
3011
|
.pipe(takeUntilDestroyed())
|
|
@@ -2983,14 +3017,17 @@ class SkyDatepickerInputDirective {
|
|
|
2983
3017
|
});
|
|
2984
3018
|
}
|
|
2985
3019
|
ngOnInit() {
|
|
3020
|
+
if (this.yearRequired) {
|
|
3021
|
+
if (this.dateFormat?.toLowerCase().indexOf('y') === -1) {
|
|
3022
|
+
throw new Error('You have configured conflicting settings. Year is required and dateFormat does not include year.');
|
|
3023
|
+
}
|
|
3024
|
+
}
|
|
2986
3025
|
const element = this.#elementRef.nativeElement;
|
|
2987
3026
|
this.#renderer.addClass(element, 'sky-form-control');
|
|
2988
3027
|
}
|
|
2989
3028
|
ngAfterContentInit() {
|
|
2990
|
-
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
2991
3029
|
this.#datepickerComponent.dateChange
|
|
2992
|
-
.pipe(distinctUntilChanged())
|
|
2993
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
3030
|
+
.pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
|
|
2994
3031
|
.subscribe((value) => {
|
|
2995
3032
|
this.#value = value;
|
|
2996
3033
|
});
|
|
@@ -3016,23 +3053,13 @@ class SkyDatepickerInputDirective {
|
|
|
3016
3053
|
this.#ngUnsubscribe.complete();
|
|
3017
3054
|
}
|
|
3018
3055
|
onInputChange(event) {
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
if (this.#isDateStringValid(value)) {
|
|
3026
|
-
this.#onValueChange(value);
|
|
3027
|
-
return;
|
|
3056
|
+
this.#onValueChange(event.target.value);
|
|
3057
|
+
}
|
|
3058
|
+
onInputBlur() {
|
|
3059
|
+
const formattedDate = this.#fuzzyDateService.format(this.#value, this.dateFormat, this.#locale);
|
|
3060
|
+
if (this.#control?.valid) {
|
|
3061
|
+
this.#setInputElementValue(formattedDate);
|
|
3028
3062
|
}
|
|
3029
|
-
this.#_value = value;
|
|
3030
|
-
this.#onChange(value);
|
|
3031
|
-
this.#control?.setErrors({
|
|
3032
|
-
skyDate: {
|
|
3033
|
-
invalid: value,
|
|
3034
|
-
},
|
|
3035
|
-
});
|
|
3036
3063
|
}
|
|
3037
3064
|
onInput() {
|
|
3038
3065
|
this.#control?.markAsDirty();
|
|
@@ -3043,64 +3070,79 @@ class SkyDatepickerInputDirective {
|
|
|
3043
3070
|
validate(control) {
|
|
3044
3071
|
if (!this.#control) {
|
|
3045
3072
|
this.#control = control;
|
|
3046
|
-
// Account for any date conversion that may have occurred prior to validation.
|
|
3047
|
-
if (this.#control.value !== this.#value) {
|
|
3048
|
-
this.#control.patchValue(this.#value, { emitEvent: false });
|
|
3049
|
-
}
|
|
3050
3073
|
}
|
|
3051
3074
|
if (this.skyDatepickerNoValidate) {
|
|
3052
3075
|
return null;
|
|
3053
3076
|
}
|
|
3054
|
-
|
|
3055
|
-
if (!value) {
|
|
3077
|
+
if (!this.#control.value) {
|
|
3056
3078
|
return null;
|
|
3057
3079
|
}
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3080
|
+
const value = control.value;
|
|
3081
|
+
let fuzzyDate;
|
|
3082
|
+
let validationError = null;
|
|
3083
|
+
if (typeof value === 'string') {
|
|
3084
|
+
fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
|
|
3085
|
+
}
|
|
3086
|
+
else {
|
|
3087
|
+
fuzzyDate = value;
|
|
3088
|
+
}
|
|
3089
|
+
if (!fuzzyDate) {
|
|
3090
|
+
validationError = {
|
|
3091
|
+
skyFuzzyDate: {
|
|
3092
|
+
invalid: value,
|
|
3093
|
+
},
|
|
3094
|
+
};
|
|
3095
|
+
}
|
|
3096
|
+
else {
|
|
3097
|
+
if (!fuzzyDate.year && this.yearRequired) {
|
|
3098
|
+
validationError = {
|
|
3099
|
+
skyFuzzyDate: {
|
|
3100
|
+
yearRequired: value,
|
|
3078
3101
|
},
|
|
3079
3102
|
};
|
|
3080
3103
|
}
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
this
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3104
|
+
if (!validationError && fuzzyDate.year) {
|
|
3105
|
+
let fuzzyDateRange;
|
|
3106
|
+
if (this.maxDate) {
|
|
3107
|
+
fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
|
|
3108
|
+
if (!fuzzyDateRange.valid) {
|
|
3109
|
+
validationError = {
|
|
3110
|
+
skyFuzzyDate: {
|
|
3111
|
+
maxDate: value,
|
|
3112
|
+
maxDateFormatted: this.#dateFormatter.format(fuzzyDateRange.endDate, this.dateFormat),
|
|
3113
|
+
},
|
|
3114
|
+
};
|
|
3115
|
+
}
|
|
3116
|
+
}
|
|
3117
|
+
if (!validationError && this.minDate) {
|
|
3118
|
+
fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
|
|
3119
|
+
if (!fuzzyDateRange.valid) {
|
|
3120
|
+
validationError = {
|
|
3121
|
+
skyFuzzyDate: {
|
|
3122
|
+
minDate: value,
|
|
3123
|
+
minDateFormatted: this.#dateFormatter.format(fuzzyDateRange.startDate, this.dateFormat),
|
|
3124
|
+
},
|
|
3125
|
+
};
|
|
3126
|
+
}
|
|
3127
|
+
}
|
|
3128
|
+
if (!validationError && this.futureDisabled) {
|
|
3129
|
+
fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.#fuzzyDateService.getCurrentFuzzyDate());
|
|
3130
|
+
if (!fuzzyDateRange.valid) {
|
|
3131
|
+
validationError = {
|
|
3132
|
+
skyFuzzyDate: {
|
|
3133
|
+
futureDisabled: value,
|
|
3134
|
+
},
|
|
3135
|
+
};
|
|
3136
|
+
}
|
|
3137
|
+
}
|
|
3091
3138
|
}
|
|
3092
3139
|
}
|
|
3093
|
-
|
|
3140
|
+
if (validationError) {
|
|
3094
3141
|
// Mark the invalid control as touched so that the input's invalid CSS styles appear.
|
|
3095
3142
|
// (This is only required when the invalid value is set by the FormControl constructor.)
|
|
3096
3143
|
this.#control.markAsTouched();
|
|
3097
|
-
return {
|
|
3098
|
-
skyDate: {
|
|
3099
|
-
invalid: value,
|
|
3100
|
-
},
|
|
3101
|
-
};
|
|
3102
3144
|
}
|
|
3103
|
-
return
|
|
3145
|
+
return validationError;
|
|
3104
3146
|
}
|
|
3105
3147
|
registerOnChange(fn) {
|
|
3106
3148
|
this.#onChange = fn;
|
|
@@ -3127,85 +3169,49 @@ class SkyDatepickerInputDirective {
|
|
|
3127
3169
|
this.#notifyTouched?.();
|
|
3128
3170
|
}
|
|
3129
3171
|
}
|
|
3130
|
-
#applyDateFormat() {
|
|
3131
|
-
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
3132
|
-
if (this.#value) {
|
|
3133
|
-
const formattedDate = this.#dateFormatter.format(this.#value, this.dateFormat);
|
|
3134
|
-
this.#setInputElementValue(formattedDate);
|
|
3135
|
-
this.#changeDetector.markForCheck();
|
|
3136
|
-
}
|
|
3137
|
-
}
|
|
3138
3172
|
#onValueChange(newValue) {
|
|
3139
3173
|
this.#value = newValue;
|
|
3140
3174
|
}
|
|
3141
3175
|
#setInputElementValue(value) {
|
|
3142
3176
|
this.#renderer.setProperty(this.#elementRef.nativeElement, 'value', value);
|
|
3143
3177
|
}
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
if (value instanceof Date) {
|
|
3151
|
-
return value;
|
|
3178
|
+
#getMaxDate() {
|
|
3179
|
+
if (this.maxDate) {
|
|
3180
|
+
const maxDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
|
|
3181
|
+
if (maxDate.isValid()) {
|
|
3182
|
+
return maxDate.toDate();
|
|
3183
|
+
}
|
|
3152
3184
|
}
|
|
3153
|
-
else if (
|
|
3154
|
-
return
|
|
3185
|
+
else if (this.futureDisabled) {
|
|
3186
|
+
return new Date();
|
|
3155
3187
|
}
|
|
3156
|
-
return
|
|
3188
|
+
return this.#configService.maxDate;
|
|
3157
3189
|
}
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
#getShortcutOrDateValue(value) {
|
|
3164
|
-
const num = Number(value);
|
|
3165
|
-
if (Number.isInteger(num)) {
|
|
3166
|
-
// We require 8 digits in order to know that we have all information needed to determine what part of the number is the month (2), day (2), and year (4).
|
|
3167
|
-
if (value.length === 8) {
|
|
3168
|
-
const regex = new RegExp(/\b(MM)\b|\b(DD)\b|\b(YY)\b|\b(YYYY)\b/, 'g');
|
|
3169
|
-
const formatTokensOnly = this.dateFormat
|
|
3170
|
-
?.match(regex)
|
|
3171
|
-
?.join('')
|
|
3172
|
-
.replace(new RegExp(/Y+/), 'YYYY');
|
|
3173
|
-
if (formatTokensOnly && formatTokensOnly.length === 8) {
|
|
3174
|
-
const date = this.#dateFormatter.getDateFromString(value, formatTokensOnly, true);
|
|
3175
|
-
if (this.#dateFormatter.dateIsValid(date)) {
|
|
3176
|
-
return date;
|
|
3177
|
-
}
|
|
3178
|
-
}
|
|
3179
|
-
}
|
|
3180
|
-
const now = new Date();
|
|
3181
|
-
const shortcutDate = new Date(now.getFullYear(), now.getMonth(), num);
|
|
3182
|
-
const daysInMonth = shortcutDate.getDate();
|
|
3183
|
-
if (num > 0 && num <= daysInMonth) {
|
|
3184
|
-
return shortcutDate;
|
|
3190
|
+
#getMinDate() {
|
|
3191
|
+
if (this.minDate) {
|
|
3192
|
+
const minDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
|
|
3193
|
+
if (minDate.isValid()) {
|
|
3194
|
+
return minDate.toDate();
|
|
3185
3195
|
}
|
|
3186
3196
|
}
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3197
|
+
return this.#configService.minDate;
|
|
3198
|
+
}
|
|
3199
|
+
#getStartAtDate() {
|
|
3200
|
+
if (this.startAtDate) {
|
|
3201
|
+
const startAtDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.startAtDate);
|
|
3202
|
+
if (startAtDate.isValid()) {
|
|
3203
|
+
return startAtDate.toDate();
|
|
3191
3204
|
}
|
|
3192
3205
|
}
|
|
3193
|
-
return
|
|
3206
|
+
return this.#configService.startAtDate;
|
|
3194
3207
|
}
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
// Does the value only include digits, dashes, or slashes?
|
|
3203
|
-
const regexp = /^[\d/-]+$/;
|
|
3204
|
-
const isValid = regexp.test(value);
|
|
3205
|
-
if (isValid) {
|
|
3206
|
-
return true;
|
|
3207
|
-
}
|
|
3208
|
-
return moment(value).isValid();
|
|
3208
|
+
/* istanbul ignore next */
|
|
3209
|
+
#fuzzyDatesEqual(dateA, dateB) {
|
|
3210
|
+
return (dateA !== undefined &&
|
|
3211
|
+
dateB !== undefined &&
|
|
3212
|
+
((!dateA.day && !dateB.day) || dateA.day === dateB.day) &&
|
|
3213
|
+
((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
|
|
3214
|
+
((!dateA.year && !dateB.year) || dateA.year === dateB.year));
|
|
3209
3215
|
}
|
|
3210
3216
|
// istanbul ignore next
|
|
3211
3217
|
#onChange;
|
|
@@ -3217,84 +3223,99 @@ class SkyDatepickerInputDirective {
|
|
|
3217
3223
|
* In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
|
|
3218
3224
|
*/
|
|
3219
3225
|
#updateValue(value, emitEvent = true) {
|
|
3220
|
-
if (this.#_value === value
|
|
3226
|
+
if (this.#_value === value ||
|
|
3227
|
+
(this.#_value === undefined && value === null)) {
|
|
3221
3228
|
return;
|
|
3222
3229
|
}
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
+
let fuzzyDate;
|
|
3231
|
+
let fuzzyMoment;
|
|
3232
|
+
let dateValue;
|
|
3233
|
+
let formattedDate;
|
|
3234
|
+
if (value instanceof Date) {
|
|
3235
|
+
dateValue = value;
|
|
3236
|
+
formattedDate = this.#dateFormatter.format(value, this.dateFormat);
|
|
3237
|
+
fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
|
|
3238
|
+
}
|
|
3239
|
+
else if (typeof value === 'string') {
|
|
3240
|
+
fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
|
|
3241
|
+
if (fuzzyDate) {
|
|
3242
|
+
formattedDate = this.#fuzzyDateService.format(fuzzyDate, this.dateFormat, this.#locale);
|
|
3230
3243
|
}
|
|
3231
|
-
|
|
3232
|
-
|
|
3244
|
+
if (!formattedDate) {
|
|
3245
|
+
formattedDate = value;
|
|
3246
|
+
}
|
|
3247
|
+
fuzzyMoment = this.#fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
|
|
3248
|
+
if (fuzzyMoment) {
|
|
3249
|
+
dateValue = fuzzyMoment.toDate();
|
|
3233
3250
|
}
|
|
3234
|
-
this.#datepickerComponent.selectedDate = this.#_value;
|
|
3235
|
-
this.#setInputElementValue(value);
|
|
3236
3251
|
}
|
|
3237
3252
|
else {
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
dateValue
|
|
3243
|
-
dateValue.getTime() === this.#_value.getTime();
|
|
3244
|
-
if (dateValue !== this.#_value || !areDatesEqual) {
|
|
3245
|
-
this.#_value = dateValue || value;
|
|
3246
|
-
if (emitEvent) {
|
|
3247
|
-
this.#onChange(this.#_value);
|
|
3248
|
-
}
|
|
3249
|
-
else {
|
|
3250
|
-
this.#control?.setValue(this.#_value, { emitEvent: false });
|
|
3251
|
-
}
|
|
3252
|
-
this.#datepickerComponent.selectedDate = this.#_value;
|
|
3253
|
+
fuzzyDate = value;
|
|
3254
|
+
formattedDate = this.#fuzzyDateService.format(fuzzyDate, this.dateFormat, this.#locale);
|
|
3255
|
+
fuzzyMoment = this.#fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
|
|
3256
|
+
if (fuzzyMoment) {
|
|
3257
|
+
dateValue = fuzzyMoment.toDate();
|
|
3253
3258
|
}
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3259
|
+
}
|
|
3260
|
+
const areFuzzyDatesEqual = this.#fuzzyDatesEqual(this.#_value, fuzzyDate);
|
|
3261
|
+
const isNewValue = fuzzyDate !== this.#_value || !areFuzzyDatesEqual;
|
|
3262
|
+
this.#_value = fuzzyDate || value;
|
|
3263
|
+
if (isNewValue) {
|
|
3264
|
+
if (emitEvent) {
|
|
3265
|
+
this.#onChange(this.#_value);
|
|
3257
3266
|
}
|
|
3258
3267
|
else {
|
|
3259
|
-
this.#
|
|
3268
|
+
this.#control?.setValue(this.#_value, { emitEvent: false });
|
|
3260
3269
|
}
|
|
3270
|
+
this.#datepickerComponent.selectedDate = dateValue;
|
|
3261
3271
|
}
|
|
3272
|
+
this.#setInputElementValue(formattedDate || '');
|
|
3262
3273
|
}
|
|
3263
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
3264
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type:
|
|
3274
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3275
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SkyFuzzyDatepickerInputDirective, isStandalone: true, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
|
|
3276
|
+
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
3277
|
+
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
3278
|
+
], ngImport: i0 }); }
|
|
3265
3279
|
}
|
|
3266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
3280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
3267
3281
|
type: Directive,
|
|
3268
3282
|
args: [{
|
|
3269
|
-
selector: '[skyDatepickerInput]',
|
|
3270
|
-
providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
|
|
3271
3283
|
host: {
|
|
3272
3284
|
'(focusout)': 'onFocusout($event)',
|
|
3273
3285
|
},
|
|
3286
|
+
providers: [
|
|
3287
|
+
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
3288
|
+
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
3289
|
+
],
|
|
3290
|
+
selector: '[skyFuzzyDatepickerInput]',
|
|
3291
|
+
standalone: true,
|
|
3274
3292
|
}]
|
|
3275
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
|
|
3293
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
|
|
3276
3294
|
type: Optional
|
|
3277
3295
|
}] }], propDecorators: { dateFormat: [{
|
|
3278
3296
|
type: Input
|
|
3279
3297
|
}], disabled: [{
|
|
3280
3298
|
type: Input
|
|
3299
|
+
}], futureDisabled: [{
|
|
3300
|
+
type: Input
|
|
3281
3301
|
}], maxDate: [{
|
|
3282
3302
|
type: Input
|
|
3283
3303
|
}], minDate: [{
|
|
3284
3304
|
type: Input
|
|
3285
3305
|
}], startAtDate: [{
|
|
3286
3306
|
type: Input
|
|
3287
|
-
}], skyDatepickerInput: [{
|
|
3288
|
-
type: Input
|
|
3289
3307
|
}], skyDatepickerNoValidate: [{
|
|
3290
3308
|
type: Input
|
|
3291
3309
|
}], startingDay: [{
|
|
3292
3310
|
type: Input
|
|
3293
|
-
}],
|
|
3311
|
+
}], yearRequired: [{
|
|
3294
3312
|
type: Input
|
|
3295
3313
|
}], onInputChange: [{
|
|
3296
3314
|
type: HostListener,
|
|
3297
3315
|
args: ['change', ['$event']]
|
|
3316
|
+
}], onInputBlur: [{
|
|
3317
|
+
type: HostListener,
|
|
3318
|
+
args: ['blur']
|
|
3298
3319
|
}], onInput: [{
|
|
3299
3320
|
type: HostListener,
|
|
3300
3321
|
args: ['input']
|
|
@@ -3302,67 +3323,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3302
3323
|
|
|
3303
3324
|
class SkyDatepickerModule {
|
|
3304
3325
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3305
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule,
|
|
3326
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, imports: [SkyDatepickerCalendarComponent,
|
|
3306
3327
|
SkyDatepickerCalendarInnerComponent,
|
|
3307
|
-
SkyDayPickerComponent,
|
|
3308
|
-
SkyMonthPickerComponent,
|
|
3309
|
-
SkyYearPickerComponent,
|
|
3310
3328
|
SkyDatepickerComponent,
|
|
3311
3329
|
SkyDatepickerInputDirective,
|
|
3312
|
-
|
|
3330
|
+
SkyDayPickerButtonComponent,
|
|
3313
3331
|
SkyDayPickerCellComponent,
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
SkyDatepickerCalendarLabelPipe,
|
|
3319
|
-
SkyDatetimeResourcesModule,
|
|
3320
|
-
SkyAffixModule,
|
|
3321
|
-
SkyThemeModule,
|
|
3322
|
-
SkyPopoverModule,
|
|
3323
|
-
SkyWaitModule,
|
|
3324
|
-
SkyFormErrorModule], exports: [SkyDatepickerCalendarComponent,
|
|
3332
|
+
SkyDayPickerComponent,
|
|
3333
|
+
SkyFuzzyDatepickerInputDirective,
|
|
3334
|
+
SkyMonthPickerComponent,
|
|
3335
|
+
SkyYearPickerComponent], exports: [SkyDatepickerCalendarComponent,
|
|
3325
3336
|
SkyDatepickerComponent,
|
|
3326
3337
|
SkyDatepickerInputDirective,
|
|
3327
3338
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3328
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, providers: [
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
SkyWaitModule,
|
|
3337
|
-
SkyFormErrorModule] }); }
|
|
3339
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerCalendarService], imports: [SkyDatepickerCalendarComponent,
|
|
3340
|
+
SkyDatepickerCalendarInnerComponent,
|
|
3341
|
+
SkyDatepickerComponent,
|
|
3342
|
+
SkyDayPickerButtonComponent,
|
|
3343
|
+
SkyDayPickerCellComponent,
|
|
3344
|
+
SkyDayPickerComponent,
|
|
3345
|
+
SkyMonthPickerComponent,
|
|
3346
|
+
SkyYearPickerComponent] }); }
|
|
3338
3347
|
}
|
|
3339
3348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3340
3349
|
type: NgModule,
|
|
3341
3350
|
args: [{
|
|
3342
|
-
|
|
3351
|
+
imports: [
|
|
3343
3352
|
SkyDatepickerCalendarComponent,
|
|
3344
3353
|
SkyDatepickerCalendarInnerComponent,
|
|
3345
|
-
SkyDayPickerComponent,
|
|
3346
|
-
SkyMonthPickerComponent,
|
|
3347
|
-
SkyYearPickerComponent,
|
|
3348
3354
|
SkyDatepickerComponent,
|
|
3349
3355
|
SkyDatepickerInputDirective,
|
|
3350
|
-
SkyFuzzyDatepickerInputDirective,
|
|
3351
|
-
SkyDayPickerCellComponent,
|
|
3352
3356
|
SkyDayPickerButtonComponent,
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
SkyIconModule,
|
|
3359
|
-
SkyDatepickerCalendarLabelPipe,
|
|
3360
|
-
SkyDatetimeResourcesModule,
|
|
3361
|
-
SkyAffixModule,
|
|
3362
|
-
SkyThemeModule,
|
|
3363
|
-
SkyPopoverModule,
|
|
3364
|
-
SkyWaitModule,
|
|
3365
|
-
SkyFormErrorModule,
|
|
3357
|
+
SkyDayPickerCellComponent,
|
|
3358
|
+
SkyDayPickerComponent,
|
|
3359
|
+
SkyFuzzyDatepickerInputDirective,
|
|
3360
|
+
SkyMonthPickerComponent,
|
|
3361
|
+
SkyYearPickerComponent,
|
|
3366
3362
|
],
|
|
3367
3363
|
exports: [
|
|
3368
3364
|
SkyDatepickerCalendarComponent,
|
|
@@ -3370,7 +3366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3370
3366
|
SkyDatepickerInputDirective,
|
|
3371
3367
|
SkyFuzzyDatepickerInputDirective,
|
|
3372
3368
|
],
|
|
3373
|
-
providers: [
|
|
3369
|
+
providers: [SkyDatepickerCalendarService],
|
|
3374
3370
|
}]
|
|
3375
3371
|
}] });
|
|
3376
3372
|
|
|
@@ -4150,6 +4146,7 @@ class SkyDateRangePickerComponent {
|
|
|
4150
4146
|
constructor() {
|
|
4151
4147
|
this.#dateRangeSvc = inject(SkyDateRangeService);
|
|
4152
4148
|
this.#destroyRef = inject(DestroyRef);
|
|
4149
|
+
this.#elementRef = inject(ElementRef);
|
|
4153
4150
|
this.#injector = inject(Injector);
|
|
4154
4151
|
this.#logger = inject(SkyLogService);
|
|
4155
4152
|
/**
|
|
@@ -4158,6 +4155,7 @@ class SkyDateRangePickerComponent {
|
|
|
4158
4155
|
*/
|
|
4159
4156
|
this.stacked = false;
|
|
4160
4157
|
this.calculators = this.#dateRangeSvc.calculators;
|
|
4158
|
+
this.datepickers = viewChildren(SkyDatepickerComponent);
|
|
4161
4159
|
this.selectedCalculator = this.calculators[0];
|
|
4162
4160
|
this.showEndDatePicker = signal(false);
|
|
4163
4161
|
this.showStartDatePicker = signal(false);
|
|
@@ -4197,6 +4195,7 @@ class SkyDateRangePickerComponent {
|
|
|
4197
4195
|
}
|
|
4198
4196
|
#dateRangeSvc;
|
|
4199
4197
|
#destroyRef;
|
|
4198
|
+
#elementRef;
|
|
4200
4199
|
#injector;
|
|
4201
4200
|
#logger;
|
|
4202
4201
|
/**
|
|
@@ -4352,9 +4351,6 @@ class SkyDateRangePickerComponent {
|
|
|
4352
4351
|
});
|
|
4353
4352
|
}
|
|
4354
4353
|
}
|
|
4355
|
-
onBlur() {
|
|
4356
|
-
this.#notifyTouched?.();
|
|
4357
|
-
}
|
|
4358
4354
|
/**
|
|
4359
4355
|
* Fires when a user changes the selected calculator ID.
|
|
4360
4356
|
*/
|
|
@@ -4372,6 +4368,16 @@ class SkyDateRangePickerComponent {
|
|
|
4372
4368
|
this.#notifyChange?.(this.formGroup.getRawValue());
|
|
4373
4369
|
});
|
|
4374
4370
|
}
|
|
4371
|
+
/**
|
|
4372
|
+
* Fires when the date range picker loses focus.
|
|
4373
|
+
*/
|
|
4374
|
+
onFocusout({ relatedTarget }) {
|
|
4375
|
+
if (relatedTarget &&
|
|
4376
|
+
!this.#elementRef.nativeElement.contains(relatedTarget) &&
|
|
4377
|
+
!this.datepickers().some((picker) => picker.containsTarget(relatedTarget))) {
|
|
4378
|
+
this.#notifyTouched?.();
|
|
4379
|
+
}
|
|
4380
|
+
}
|
|
4375
4381
|
#getCalculator(calculatorId) {
|
|
4376
4382
|
const found = this.calculators.find((c) => c.calculatorId === calculatorId);
|
|
4377
4383
|
/*istanbul ignore if: safety check*/
|
|
@@ -4463,7 +4469,7 @@ class SkyDateRangePickerComponent {
|
|
|
4463
4469
|
return toSignal(control.events.pipe(filter((evt) => evt instanceof TouchedChangeEvent), map((evt) => evt.touched), takeUntilDestroyed(this.#destroyRef)));
|
|
4464
4470
|
}
|
|
4465
4471
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4466
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDateRangePickerComponent, isStandalone: true, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", label: "label", labelText: "labelText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
4472
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDateRangePickerComponent, isStandalone: true, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", label: "label", labelText: "labelText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { listeners: { "focusout": "onFocusout($event)" }, properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
4467
4473
|
{
|
|
4468
4474
|
provide: NG_VALIDATORS,
|
|
4469
4475
|
useExisting: SkyDateRangePickerComponent,
|
|
@@ -4475,11 +4481,13 @@ class SkyDateRangePickerComponent {
|
|
|
4475
4481
|
multi: true,
|
|
4476
4482
|
},
|
|
4477
4483
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
4478
|
-
], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"calculatorIdHasErrors()\"\n [helpKey]=\"helpKey\"\n [helpPopoverContent]=\"helpPopoverContent\"\n [helpPopoverTitle]=\"helpPopoverTitle\"\n [hintText]=\"hintText\"\n [labelText]=\"\n labelText ||\n label ||\n ('skyux_date_range_picker_default_label' | skyLibResources)\n \"\n >\n <select\n formControlName=\"calculatorId\"\n (blur)=\"onBlur()\"\n (change)=\"onCalculatorIdChange()\"\n >\n @for (calculator of calculators; track calculator.calculatorId) {\n <option [value]=\"calculator.calculatorId\">\n {{\n calculator._shortDescriptionResourceKey\n ? (calculator._shortDescriptionResourceKey | skyLibResources)\n : calculator.shortDescription\n }}\n </option>\n }\n </select>\n @if (\n hostControl?.errors?.['skyDateRange']?.errors?.[\n 'endDateBeforeStartDate'\n ] && labelText\n ) {\n <sky-form-error\n errorName=\"endDateBeforeStartDate\"\n [errorText]=\"\n 'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n | skyLibResources\n \"\n />\n }\n <span class=\"sky-input-box-descendent-form-error\">\n <ng-content select=\"sky-form-error\" />\n </span>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n [hidden]=\"!showStartDatePicker()\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"startDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"startDate\"\n name=\"startDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showStartDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n [hidden]=\"!showEndDatePicker()\"\n [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n >\n <sky-input-box\n [hasErrors]=\"endDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"endDate\"\n name=\"endDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showEndDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4484
|
+
], viewQueries: [{ propertyName: "datepickers", predicate: SkyDatepickerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"calculatorIdHasErrors()\"\n [helpKey]=\"helpKey\"\n [helpPopoverContent]=\"helpPopoverContent\"\n [helpPopoverTitle]=\"helpPopoverTitle\"\n [hintText]=\"hintText\"\n [labelText]=\"\n labelText ||\n label ||\n ('skyux_date_range_picker_default_label' | skyLibResources)\n \"\n >\n <select formControlName=\"calculatorId\" (change)=\"onCalculatorIdChange()\">\n @for (calculator of calculators; track calculator.calculatorId) {\n <option [value]=\"calculator.calculatorId\">\n {{\n calculator._shortDescriptionResourceKey\n ? (calculator._shortDescriptionResourceKey | skyLibResources)\n : calculator.shortDescription\n }}\n </option>\n }\n </select>\n @if (\n hostControl?.errors?.['skyDateRange']?.errors?.[\n 'endDateBeforeStartDate'\n ] && labelText\n ) {\n <sky-form-error\n errorName=\"endDateBeforeStartDate\"\n [errorText]=\"\n 'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n | skyLibResources\n \"\n />\n }\n <span class=\"sky-input-box-descendent-form-error\">\n <ng-content select=\"sky-form-error\" />\n </span>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n [hidden]=\"!showStartDatePicker()\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"startDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"startDate\"\n name=\"startDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showStartDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n [hidden]=\"!showEndDatePicker()\"\n [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n >\n <sky-input-box\n [hasErrors]=\"endDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"endDate\"\n name=\"endDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showEndDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4479
4485
|
}
|
|
4480
4486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4481
4487
|
type: Component,
|
|
4482
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4488
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4489
|
+
'(focusout)': 'onFocusout($event)',
|
|
4490
|
+
}, imports: [
|
|
4483
4491
|
CommonModule,
|
|
4484
4492
|
FormsModule,
|
|
4485
4493
|
ReactiveFormsModule,
|
|
@@ -4501,7 +4509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4501
4509
|
multi: true,
|
|
4502
4510
|
},
|
|
4503
4511
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
4504
|
-
], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"calculatorIdHasErrors()\"\n [helpKey]=\"helpKey\"\n [helpPopoverContent]=\"helpPopoverContent\"\n [helpPopoverTitle]=\"helpPopoverTitle\"\n [hintText]=\"hintText\"\n [labelText]=\"\n labelText ||\n label ||\n ('skyux_date_range_picker_default_label' | skyLibResources)\n \"\n >\n <select\n formControlName=\"calculatorId\"\n (blur)=\"onBlur()\"\n (change)=\"onCalculatorIdChange()\"\n >\n @for (calculator of calculators; track calculator.calculatorId) {\n <option [value]=\"calculator.calculatorId\">\n {{\n calculator._shortDescriptionResourceKey\n ? (calculator._shortDescriptionResourceKey | skyLibResources)\n : calculator.shortDescription\n }}\n </option>\n }\n </select>\n @if (\n hostControl?.errors?.['skyDateRange']?.errors?.[\n 'endDateBeforeStartDate'\n ] && labelText\n ) {\n <sky-form-error\n errorName=\"endDateBeforeStartDate\"\n [errorText]=\"\n 'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n | skyLibResources\n \"\n />\n }\n <span class=\"sky-input-box-descendent-form-error\">\n <ng-content select=\"sky-form-error\" />\n </span>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n [hidden]=\"!showStartDatePicker()\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"startDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"startDate\"\n name=\"startDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showStartDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n [hidden]=\"!showEndDatePicker()\"\n [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n >\n <sky-input-box\n [hasErrors]=\"endDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"endDate\"\n name=\"endDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showEndDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"] }]
|
|
4512
|
+
], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"calculatorIdHasErrors()\"\n [helpKey]=\"helpKey\"\n [helpPopoverContent]=\"helpPopoverContent\"\n [helpPopoverTitle]=\"helpPopoverTitle\"\n [hintText]=\"hintText\"\n [labelText]=\"\n labelText ||\n label ||\n ('skyux_date_range_picker_default_label' | skyLibResources)\n \"\n >\n <select formControlName=\"calculatorId\" (change)=\"onCalculatorIdChange()\">\n @for (calculator of calculators; track calculator.calculatorId) {\n <option [value]=\"calculator.calculatorId\">\n {{\n calculator._shortDescriptionResourceKey\n ? (calculator._shortDescriptionResourceKey | skyLibResources)\n : calculator.shortDescription\n }}\n </option>\n }\n </select>\n @if (\n hostControl?.errors?.['skyDateRange']?.errors?.[\n 'endDateBeforeStartDate'\n ] && labelText\n ) {\n <sky-form-error\n errorName=\"endDateBeforeStartDate\"\n [errorText]=\"\n 'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n | skyLibResources\n \"\n />\n }\n <span class=\"sky-input-box-descendent-form-error\">\n <ng-content select=\"sky-form-error\" />\n </span>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n [hidden]=\"!showStartDatePicker()\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"startDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"startDate\"\n name=\"startDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showStartDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n [hidden]=\"!showEndDatePicker()\"\n [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n >\n <sky-input-box\n [hasErrors]=\"endDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"endDate\"\n name=\"endDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showEndDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"] }]
|
|
4505
4513
|
}], propDecorators: { calculatorIds: [{
|
|
4506
4514
|
type: Input
|
|
4507
4515
|
}], dateFormat: [{
|