@netwin/angular-datetime-picker 18.3.0 → 18.4.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/assets/style/picker.min.css +1 -1
- package/esm2022/lib/date-time/calendar.component.mjs +20 -3
- package/esm2022/lib/date-time/date-time-inline.component.mjs +11 -4
- package/esm2022/lib/date-time/date-time-picker-container.component.mjs +7 -4
- package/esm2022/lib/date-time/date-time-picker-intl.service.mjs +3 -1
- package/fesm2022/netwin-angular-datetime-picker.mjs +36 -7
- package/fesm2022/netwin-angular-datetime-picker.mjs.map +1 -1
- package/lib/date-time/calendar.component.d.ts +7 -1
- package/lib/date-time/date-time-inline.component.d.ts +6 -1
- package/lib/date-time/date-time-picker-container.component.d.ts +2 -1
- package/lib/date-time/date-time-picker-intl.service.d.ts +2 -0
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import { NoopScrollStrategy, Overlay, OverlayConfig, OverlayModule } from '@angu
|
|
|
5
5
|
import * as i3 from '@angular/common';
|
|
6
6
|
import { DOCUMENT, CommonModule, getLocaleFirstDayOfWeek } from '@angular/common';
|
|
7
7
|
import * as i0 from '@angular/core';
|
|
8
|
-
import { EventEmitter, Component, Optional, Inject, ViewChild, InjectionToken, TemplateRef, Injectable, SkipSelf, NgModule, ChangeDetectionStrategy, Input, Output, inject, LOCALE_ID, Directive, forwardRef, Pipe } from '@angular/core';
|
|
8
|
+
import { EventEmitter, Component, Optional, Inject, ViewChild, InjectionToken, TemplateRef, Injectable, SkipSelf, NgModule, ChangeDetectionStrategy, Input, Output, inject, LOCALE_ID, Directive, forwardRef, booleanAttribute, Pipe } from '@angular/core';
|
|
9
9
|
import * as i2 from '@angular/cdk/portal';
|
|
10
10
|
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
|
|
11
11
|
import { trigger, transition, style, animate, keyframes, animateChild, state, group, query } from '@angular/animations';
|
|
@@ -1545,6 +1545,8 @@ class OwlDateTimeIntl {
|
|
|
1545
1545
|
this.hour12AMLabel = 'AM';
|
|
1546
1546
|
/** A label for the hour12 button (PM) */
|
|
1547
1547
|
this.hour12PMLabel = 'PM';
|
|
1548
|
+
/** A label for the today button */
|
|
1549
|
+
this.todayButtonLabel = 'Today';
|
|
1548
1550
|
}
|
|
1549
1551
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1550
1552
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' }); }
|
|
@@ -2494,6 +2496,9 @@ class OwlCalendarComponent {
|
|
|
2494
2496
|
get periodButtonLabel() {
|
|
2495
2497
|
return this.isMonthView ? this.pickerIntl.switchToMultiYearViewLabel : this.pickerIntl.switchToMonthViewLabel;
|
|
2496
2498
|
}
|
|
2499
|
+
get todayButtonLabel() {
|
|
2500
|
+
return this.pickerIntl.todayButtonLabel;
|
|
2501
|
+
}
|
|
2497
2502
|
get prevButtonLabel() {
|
|
2498
2503
|
if (this._currentView === DateView.MONTH) {
|
|
2499
2504
|
return this.pickerIntl.prevMonthLabel;
|
|
@@ -2562,6 +2567,10 @@ class OwlCalendarComponent {
|
|
|
2562
2567
|
* Whether to should only the multi-year view.
|
|
2563
2568
|
*/
|
|
2564
2569
|
this.multiyearOnly = false;
|
|
2570
|
+
/**
|
|
2571
|
+
* Flag to show today button to jump to today's date. Defaults to `false`.
|
|
2572
|
+
* */
|
|
2573
|
+
this.showTodayButton = false;
|
|
2565
2574
|
/** Emits when the currently picker moment changes. */
|
|
2566
2575
|
this.pickerMomentChange = new EventEmitter();
|
|
2567
2576
|
/** Emits when the selected date changes. */
|
|
@@ -2651,6 +2660,14 @@ class OwlCalendarComponent {
|
|
|
2651
2660
|
: this.dateTimeAdapter.addCalendarYears(this.pickerMoment, 1);
|
|
2652
2661
|
this.pickerMomentChange.emit(this.pickerMoment);
|
|
2653
2662
|
}
|
|
2663
|
+
jumpToToday() {
|
|
2664
|
+
const now = this.dateTimeAdapter.now();
|
|
2665
|
+
let today = this.dateTimeAdapter.setHours(now, 0);
|
|
2666
|
+
today = this.dateTimeAdapter.setMinutes(today, 0);
|
|
2667
|
+
today = this.dateTimeAdapter.setSeconds(today, 0);
|
|
2668
|
+
this.handlePickerMomentChange(today);
|
|
2669
|
+
this.dateSelected(today);
|
|
2670
|
+
}
|
|
2654
2671
|
dateSelected(date) {
|
|
2655
2672
|
if (!this.dateFilterForViews(date)) {
|
|
2656
2673
|
return;
|
|
@@ -2740,13 +2757,13 @@ class OwlCalendarComponent {
|
|
|
2740
2757
|
return this.dateTimeAdapter.isDateInstance(obj) && this.dateTimeAdapter.isValid(obj) ? obj : null;
|
|
2741
2758
|
}
|
|
2742
2759
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlCalendarComponent, deps: [{ token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2743
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2760
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", yearOnly: "yearOnly", multiyearOnly: "multiyearOnly", hideOtherMonths: "hideOtherMonths", showTodayButton: "showTodayButton" }, outputs: { pickerMomentChange: "pickerMomentChange", dateClicked: "dateClicked", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0, template: "<div class=\"owl-dt-calendar-control\">\n <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n <div class=\"owl-dt-calendar-control-content\">\n <button\n [attr.aria-label]=\"periodButtonLabel\"\n (click)=\"toggleViews()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ periodButtonText }}\n\n <span\n [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n class=\"owl-dt-control-button-arrow\">\n <!-- <editor-fold desc=\"SVG Arrow\"> -->\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"50%\"\n style=\"enable-background: new 0 0 292.362 292.362\"\n version=\"1.1\"\n viewBox=\"0 0 292.362 292.362\"\n width=\"50%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <g>\n <path\n d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\n </g>\n </svg>\n <!-- </editor-fold> -->\n </span>\n </span>\n </button>\n @if (currentView === DateView.MONTH && showTodayButton) {\n <button\n (click)=\"jumpToToday()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-today-button\"\n type=\"button\">\n {{ todayButtonLabel }}\n </button>\n }\n </div>\n <button\n [attr.aria-label]=\"prevButtonLabel\"\n [disabled]=\"!prevButtonEnabled()\"\n [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n (click)=\"previousClicked()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"100%\"\n style=\"enable-background: new 0 0 250.738 250.738\"\n version=\"1.1\"\n viewBox=\"0 0 250.738 250.738\"\n width=\"100%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546 c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681 l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n style=\"fill-rule: evenodd; clip-rule: evenodd\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n <button\n [attr.aria-label]=\"nextButtonLabel\"\n [disabled]=\"!nextButtonEnabled()\"\n [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n (click)=\"nextClicked()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"enable-background: new 0 0 250.738 250.738\"\n version=\"1.1\"\n viewBox=\"0 0 250.738 250.738\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n C197.237,120.447,195.534,115.448,191.75,111.689z\"\n style=\"fill-rule: evenodd; clip-rule: evenodd\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n</div>\n<div\n [ngSwitch]=\"currentView\"\n cdkMonitorSubtreeFocus\n class=\"owl-dt-calendar-main\"\n tabindex=\"-1\">\n <owl-date-time-month-view\n *ngSwitchCase=\"DateView.MONTH\"\n [dateFilter]=\"dateFilter\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [hideOtherMonths]=\"hideOtherMonths\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [pickerMoment]=\"pickerMoment\"\n [selectMode]=\"selectMode\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (userSelection)=\"userSelected()\"></owl-date-time-month-view>\n\n <owl-date-time-year-view\n *ngSwitchCase=\"DateView.YEAR\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [pickerMoment]=\"pickerMoment\"\n [selectMode]=\"selectMode\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n (change)=\"goToDateInView($event, DateView.MONTH)\"\n (keyboardEnter)=\"focusActiveCell()\"\n (monthSelected)=\"selectMonthInYearView($event)\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"></owl-date-time-year-view>\n\n <owl-date-time-multi-year-view\n *ngSwitchCase=\"DateView.MULTI_YEARS\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [pickerMoment]=\"pickerMoment\"\n [selectMode]=\"selectMode\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n (change)=\"goToDateInView($event, DateView.YEAR)\"\n (keyboardEnter)=\"focusActiveCell()\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (yearSelected)=\"selectYearInMultiYearView($event)\"></owl-date-time-multi-year-view>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }, { kind: "component", type: OwlYearViewComponent, selector: "owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { kind: "component", type: OwlMonthViewComponent, selector: "owl-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2744
2761
|
}
|
|
2745
2762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlCalendarComponent, decorators: [{
|
|
2746
2763
|
type: Component,
|
|
2747
2764
|
args: [{ selector: 'owl-date-time-calendar', exportAs: 'owlDateTimeCalendar', host: {
|
|
2748
2765
|
'[class.owl-dt-calendar]': 'owlDTCalendarClass'
|
|
2749
|
-
}, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"owl-dt-calendar-control\">\n <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n <
|
|
2766
|
+
}, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"owl-dt-calendar-control\">\n <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n <div class=\"owl-dt-calendar-control-content\">\n <button\n [attr.aria-label]=\"periodButtonLabel\"\n (click)=\"toggleViews()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ periodButtonText }}\n\n <span\n [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n class=\"owl-dt-control-button-arrow\">\n <!-- <editor-fold desc=\"SVG Arrow\"> -->\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"50%\"\n style=\"enable-background: new 0 0 292.362 292.362\"\n version=\"1.1\"\n viewBox=\"0 0 292.362 292.362\"\n width=\"50%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <g>\n <path\n d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\n </g>\n </svg>\n <!-- </editor-fold> -->\n </span>\n </span>\n </button>\n @if (currentView === DateView.MONTH && showTodayButton) {\n <button\n (click)=\"jumpToToday()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-today-button\"\n type=\"button\">\n {{ todayButtonLabel }}\n </button>\n }\n </div>\n <button\n [attr.aria-label]=\"prevButtonLabel\"\n [disabled]=\"!prevButtonEnabled()\"\n [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n (click)=\"previousClicked()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"100%\"\n style=\"enable-background: new 0 0 250.738 250.738\"\n version=\"1.1\"\n viewBox=\"0 0 250.738 250.738\"\n width=\"100%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546 c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681 l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n style=\"fill-rule: evenodd; clip-rule: evenodd\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n <button\n [attr.aria-label]=\"nextButtonLabel\"\n [disabled]=\"!nextButtonEnabled()\"\n [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n (click)=\"nextClicked()\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"enable-background: new 0 0 250.738 250.738\"\n version=\"1.1\"\n viewBox=\"0 0 250.738 250.738\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n C197.237,120.447,195.534,115.448,191.75,111.689z\"\n style=\"fill-rule: evenodd; clip-rule: evenodd\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n</div>\n<div\n [ngSwitch]=\"currentView\"\n cdkMonitorSubtreeFocus\n class=\"owl-dt-calendar-main\"\n tabindex=\"-1\">\n <owl-date-time-month-view\n *ngSwitchCase=\"DateView.MONTH\"\n [dateFilter]=\"dateFilter\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [hideOtherMonths]=\"hideOtherMonths\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [pickerMoment]=\"pickerMoment\"\n [selectMode]=\"selectMode\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (userSelection)=\"userSelected()\"></owl-date-time-month-view>\n\n <owl-date-time-year-view\n *ngSwitchCase=\"DateView.YEAR\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [pickerMoment]=\"pickerMoment\"\n [selectMode]=\"selectMode\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n (change)=\"goToDateInView($event, DateView.MONTH)\"\n (keyboardEnter)=\"focusActiveCell()\"\n (monthSelected)=\"selectMonthInYearView($event)\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"></owl-date-time-year-view>\n\n <owl-date-time-multi-year-view\n *ngSwitchCase=\"DateView.MULTI_YEARS\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [pickerMoment]=\"pickerMoment\"\n [selectMode]=\"selectMode\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n (change)=\"goToDateInView($event, DateView.YEAR)\"\n (keyboardEnter)=\"focusActiveCell()\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (yearSelected)=\"selectYearInMultiYearView($event)\"></owl-date-time-multi-year-view>\n</div>\n" }]
|
|
2750
2767
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
|
|
2751
2768
|
type: Optional
|
|
2752
2769
|
}] }, { type: undefined, decorators: [{
|
|
@@ -2778,6 +2795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2778
2795
|
type: Input
|
|
2779
2796
|
}], hideOtherMonths: [{
|
|
2780
2797
|
type: Input
|
|
2798
|
+
}], showTodayButton: [{
|
|
2799
|
+
type: Input
|
|
2781
2800
|
}], pickerMomentChange: [{
|
|
2782
2801
|
type: Output
|
|
2783
2802
|
}], dateClicked: [{
|
|
@@ -3318,6 +3337,7 @@ class OwlDateTimeContainerComponent {
|
|
|
3318
3337
|
* Stream emits when try to hide picker
|
|
3319
3338
|
* */
|
|
3320
3339
|
this.hidePicker$ = new Subject();
|
|
3340
|
+
this.showTodayButton = false;
|
|
3321
3341
|
/**
|
|
3322
3342
|
* Stream emits when try to confirm the selected value
|
|
3323
3343
|
* */
|
|
@@ -3585,7 +3605,7 @@ class OwlDateTimeContainerComponent {
|
|
|
3585
3605
|
}
|
|
3586
3606
|
}
|
|
3587
3607
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", host: { listeners: { "@transformPicker.start": "handleContainerAnimationStart($event)", "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "owlDTContainerClass", "class.owl-dt-popup-container": "owlDTPopupContainerClass", "class.owl-dt-dialog-container": "owlDTDialogContainerClass", "class.owl-dt-inline-container": "owlDTInlineContainerClass", "class.owl-dt-container-disabled": "owlDTContainerDisabledClass", "attr.id": "owlDTContainerId", "@transformPicker": "owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\n [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n class=\"owl-dt-container-inner\">\n <owl-date-time-calendar\n *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n [dateFilter]=\"picker.dateTimeFilter\"\n [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n [hideOtherMonths]=\"picker.hideOtherMonths\"\n [maxDate]=\"picker.maxDateTime\"\n [minDate]=\"picker.minDateTime\"\n [multiyearOnly]=\"picker.multiyearOnly\"\n [selectMode]=\"picker.selectMode\"\n [selected]=\"picker.selected\"\n [selecteds]=\"picker.selecteds\"\n [startView]=\"picker.startView\"\n [yearOnly]=\"picker.yearOnly\"\n [(pickerMoment)]=\"pickerMoment\"\n (dateClicked)=\"picker.selectDate($event)\"\n (monthSelected)=\"picker.selectMonth($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (yearSelected)=\"picker.selectYear($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-calendar>\n\n <owl-date-time-timer\n *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n [hour12Timer]=\"picker.hour12Timer\"\n [maxDateTime]=\"picker.maxDateTime\"\n [minDateTime]=\"picker.minDateTime\"\n [pickerMoment]=\"pickerMoment\"\n [showSecondsTimer]=\"picker.showSecondsTimer\"\n [stepHour]=\"picker.stepHour\"\n [stepMinute]=\"picker.stepMinute\"\n [stepSecond]=\"picker.stepSecond\"\n (selectedChange)=\"timeSelected($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-timer>\n\n <div\n *ngIf=\"picker.isInRangeMode\"\n class=\"owl-dt-container-info owl-dt-container-row\"\n role=\"radiogroup\">\n <div\n #from\n [attr.aria-checked]=\"activeSelectedIndex === 0\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 0\n }\"\n [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 0)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ fromFormattedValue }}</span>\n </span>\n </div>\n <div\n #to\n [attr.aria-checked]=\"activeSelectedIndex === 1\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 1\n }\"\n [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 1)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n </span>\n </div>\n </div>\n\n <div\n *ngIf=\"showControlButtons\"\n class=\"owl-dt-container-buttons owl-dt-container-row\">\n <button\n (click)=\"onCancelClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ cancelLabel }}\n </span>\n </button>\n <button\n (click)=\"onSetClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ setLabel }}\n </span>\n </button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }, { kind: "component", type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "yearOnly", "multiyearOnly", "hideOtherMonths"], outputs: ["pickerMomentChange", "dateClicked", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }], animations: [owlDateTimePickerAnimations.transformPicker, owlDateTimePickerAnimations.fadeInPicker], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3608
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", inputs: { showTodayButton: "showTodayButton" }, host: { listeners: { "@transformPicker.start": "handleContainerAnimationStart($event)", "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "owlDTContainerClass", "class.owl-dt-popup-container": "owlDTPopupContainerClass", "class.owl-dt-dialog-container": "owlDTDialogContainerClass", "class.owl-dt-inline-container": "owlDTInlineContainerClass", "class.owl-dt-container-disabled": "owlDTContainerDisabledClass", "attr.id": "owlDTContainerId", "@transformPicker": "owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\n [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n class=\"owl-dt-container-inner\">\n <owl-date-time-calendar\n *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n [dateFilter]=\"picker.dateTimeFilter\"\n [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n [hideOtherMonths]=\"picker.hideOtherMonths\"\n [maxDate]=\"picker.maxDateTime\"\n [minDate]=\"picker.minDateTime\"\n [multiyearOnly]=\"picker.multiyearOnly\"\n [selectMode]=\"picker.selectMode\"\n [selected]=\"picker.selected\"\n [selecteds]=\"picker.selecteds\"\n [showTodayButton]=\"showTodayButton\"\n [startView]=\"picker.startView\"\n [yearOnly]=\"picker.yearOnly\"\n [(pickerMoment)]=\"pickerMoment\"\n (dateClicked)=\"picker.selectDate($event)\"\n (monthSelected)=\"picker.selectMonth($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (yearSelected)=\"picker.selectYear($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-calendar>\n\n <owl-date-time-timer\n *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n [hour12Timer]=\"picker.hour12Timer\"\n [maxDateTime]=\"picker.maxDateTime\"\n [minDateTime]=\"picker.minDateTime\"\n [pickerMoment]=\"pickerMoment\"\n [showSecondsTimer]=\"picker.showSecondsTimer\"\n [stepHour]=\"picker.stepHour\"\n [stepMinute]=\"picker.stepMinute\"\n [stepSecond]=\"picker.stepSecond\"\n (selectedChange)=\"timeSelected($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-timer>\n\n <div\n *ngIf=\"picker.isInRangeMode\"\n class=\"owl-dt-container-info owl-dt-container-row\"\n role=\"radiogroup\">\n <div\n #from\n [attr.aria-checked]=\"activeSelectedIndex === 0\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 0\n }\"\n [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 0)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ fromFormattedValue }}</span>\n </span>\n </div>\n <div\n #to\n [attr.aria-checked]=\"activeSelectedIndex === 1\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 1\n }\"\n [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 1)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n </span>\n </div>\n </div>\n\n <div\n *ngIf=\"showControlButtons\"\n class=\"owl-dt-container-buttons owl-dt-container-row\">\n <button\n (click)=\"onCancelClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ cancelLabel }}\n </span>\n </button>\n <button\n (click)=\"onSetClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ setLabel }}\n </span>\n </button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }, { kind: "component", type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "yearOnly", "multiyearOnly", "hideOtherMonths", "showTodayButton"], outputs: ["pickerMomentChange", "dateClicked", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }], animations: [owlDateTimePickerAnimations.transformPicker, owlDateTimePickerAnimations.fadeInPicker], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3589
3609
|
}
|
|
3590
3610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
|
|
3591
3611
|
type: Component,
|
|
@@ -3599,7 +3619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3599
3619
|
'[class.owl-dt-container-disabled]': 'owlDTContainerDisabledClass',
|
|
3600
3620
|
'[attr.id]': 'owlDTContainerId',
|
|
3601
3621
|
'[@transformPicker]': 'owlDTContainerAnimation'
|
|
3602
|
-
}, template: "<div\n [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n class=\"owl-dt-container-inner\">\n <owl-date-time-calendar\n *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n [dateFilter]=\"picker.dateTimeFilter\"\n [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n [hideOtherMonths]=\"picker.hideOtherMonths\"\n [maxDate]=\"picker.maxDateTime\"\n [minDate]=\"picker.minDateTime\"\n [multiyearOnly]=\"picker.multiyearOnly\"\n [selectMode]=\"picker.selectMode\"\n [selected]=\"picker.selected\"\n [selecteds]=\"picker.selecteds\"\n [startView]=\"picker.startView\"\n [yearOnly]=\"picker.yearOnly\"\n [(pickerMoment)]=\"pickerMoment\"\n (dateClicked)=\"picker.selectDate($event)\"\n (monthSelected)=\"picker.selectMonth($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (yearSelected)=\"picker.selectYear($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-calendar>\n\n <owl-date-time-timer\n *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n [hour12Timer]=\"picker.hour12Timer\"\n [maxDateTime]=\"picker.maxDateTime\"\n [minDateTime]=\"picker.minDateTime\"\n [pickerMoment]=\"pickerMoment\"\n [showSecondsTimer]=\"picker.showSecondsTimer\"\n [stepHour]=\"picker.stepHour\"\n [stepMinute]=\"picker.stepMinute\"\n [stepSecond]=\"picker.stepSecond\"\n (selectedChange)=\"timeSelected($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-timer>\n\n <div\n *ngIf=\"picker.isInRangeMode\"\n class=\"owl-dt-container-info owl-dt-container-row\"\n role=\"radiogroup\">\n <div\n #from\n [attr.aria-checked]=\"activeSelectedIndex === 0\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 0\n }\"\n [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 0)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ fromFormattedValue }}</span>\n </span>\n </div>\n <div\n #to\n [attr.aria-checked]=\"activeSelectedIndex === 1\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 1\n }\"\n [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 1)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n </span>\n </div>\n </div>\n\n <div\n *ngIf=\"showControlButtons\"\n class=\"owl-dt-container-buttons owl-dt-container-row\">\n <button\n (click)=\"onCancelClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ cancelLabel }}\n </span>\n </button>\n <button\n (click)=\"onSetClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ setLabel }}\n </span>\n </button>\n </div>\n</div>\n" }]
|
|
3622
|
+
}, template: "<div\n [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n class=\"owl-dt-container-inner\">\n <owl-date-time-calendar\n *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n [dateFilter]=\"picker.dateTimeFilter\"\n [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n [hideOtherMonths]=\"picker.hideOtherMonths\"\n [maxDate]=\"picker.maxDateTime\"\n [minDate]=\"picker.minDateTime\"\n [multiyearOnly]=\"picker.multiyearOnly\"\n [selectMode]=\"picker.selectMode\"\n [selected]=\"picker.selected\"\n [selecteds]=\"picker.selecteds\"\n [showTodayButton]=\"showTodayButton\"\n [startView]=\"picker.startView\"\n [yearOnly]=\"picker.yearOnly\"\n [(pickerMoment)]=\"pickerMoment\"\n (dateClicked)=\"picker.selectDate($event)\"\n (monthSelected)=\"picker.selectMonth($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (yearSelected)=\"picker.selectYear($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-calendar>\n\n <owl-date-time-timer\n *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n [hour12Timer]=\"picker.hour12Timer\"\n [maxDateTime]=\"picker.maxDateTime\"\n [minDateTime]=\"picker.minDateTime\"\n [pickerMoment]=\"pickerMoment\"\n [showSecondsTimer]=\"picker.showSecondsTimer\"\n [stepHour]=\"picker.stepHour\"\n [stepMinute]=\"picker.stepMinute\"\n [stepSecond]=\"picker.stepSecond\"\n (selectedChange)=\"timeSelected($event)\"\n class=\"owl-dt-container-row\"></owl-date-time-timer>\n\n <div\n *ngIf=\"picker.isInRangeMode\"\n class=\"owl-dt-container-info owl-dt-container-row\"\n role=\"radiogroup\">\n <div\n #from\n [attr.aria-checked]=\"activeSelectedIndex === 0\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 0\n }\"\n [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 0)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ fromFormattedValue }}</span>\n </span>\n </div>\n <div\n #to\n [attr.aria-checked]=\"activeSelectedIndex === 1\"\n [ngClass]=\"{\n 'owl-dt-container-info-active': activeSelectedIndex === 1\n }\"\n [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n (click)=\"handleClickOnInfoGroup($event, 1)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n role=\"radio\">\n <span\n class=\"owl-dt-control-content owl-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n </span>\n </div>\n </div>\n\n <div\n *ngIf=\"showControlButtons\"\n class=\"owl-dt-container-buttons owl-dt-container-row\">\n <button\n (click)=\"onCancelClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ cancelLabel }}\n </span>\n </button>\n <button\n (click)=\"onSetClicked($event)\"\n class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n tabindex=\"0\"\n type=\"button\">\n <span\n class=\"owl-dt-control-content owl-dt-control-button-content\"\n tabindex=\"-1\">\n {{ setLabel }}\n </span>\n </button>\n </div>\n</div>\n" }]
|
|
3603
3623
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
|
|
3604
3624
|
type: Optional
|
|
3605
3625
|
}] }], propDecorators: { calendar: [{
|
|
@@ -3608,6 +3628,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3608
3628
|
}], timer: [{
|
|
3609
3629
|
type: ViewChild,
|
|
3610
3630
|
args: [OwlTimerComponent]
|
|
3631
|
+
}], showTodayButton: [{
|
|
3632
|
+
type: Input
|
|
3611
3633
|
}] } });
|
|
3612
3634
|
|
|
3613
3635
|
/**
|
|
@@ -3774,6 +3796,10 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
|
|
|
3774
3796
|
* Limit to the amount of days that can be selected at once.
|
|
3775
3797
|
* */
|
|
3776
3798
|
this.rangeLimit = null;
|
|
3799
|
+
/**
|
|
3800
|
+
* Flag to show today button to jump to today's date. Defaults to `false`.
|
|
3801
|
+
* */
|
|
3802
|
+
this.showTodayButton = false;
|
|
3777
3803
|
/**
|
|
3778
3804
|
* Emits selected year in multi-year view
|
|
3779
3805
|
* This doesn't imply a change on the selected date.
|
|
@@ -3862,13 +3888,13 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
|
|
|
3862
3888
|
this.dateSelected.emit(normalizedDate);
|
|
3863
3889
|
}
|
|
3864
3890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3865
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.8", type: OwlDateTimeInlineComponent, selector: "owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", endAt: "endAt", dateTimeFilter: ["owlDateTimeFilter", "dateTimeFilter"], minDateTime: ["min", "minDateTime"], maxDateTime: ["max", "maxDateTime"], value: "value", values: "values", rangeLimit: "rangeLimit", showTodayButton: ["showTodayButton", "showTodayButton", booleanAttribute] }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", dateSelected: "dateSelected" }, host: { properties: { "class.owl-dt-inline": "owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<owl-date-time-container [showTodayButton]=\"showTodayButton\"></owl-date-time-container>\n", styles: [""], dependencies: [{ kind: "component", type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", inputs: ["showTodayButton"], exportAs: ["owlDateTimeContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3866
3892
|
}
|
|
3867
3893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
|
|
3868
3894
|
type: Component,
|
|
3869
3895
|
args: [{ selector: 'owl-date-time-inline', host: {
|
|
3870
3896
|
'[class.owl-dt-inline]': 'owlDTInlineClass'
|
|
3871
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [OWL_DATETIME_VALUE_ACCESSOR$1], template: "<owl-date-time-container></owl-date-time-container>\n" }]
|
|
3897
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [OWL_DATETIME_VALUE_ACCESSOR$1], template: "<owl-date-time-container [showTodayButton]=\"showTodayButton\"></owl-date-time-container>\n" }]
|
|
3872
3898
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
|
|
3873
3899
|
type: Optional
|
|
3874
3900
|
}] }, { type: undefined, decorators: [{
|
|
@@ -3904,6 +3930,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3904
3930
|
type: Input
|
|
3905
3931
|
}], rangeLimit: [{
|
|
3906
3932
|
type: Input
|
|
3933
|
+
}], showTodayButton: [{
|
|
3934
|
+
type: Input,
|
|
3935
|
+
args: [{ transform: booleanAttribute }]
|
|
3907
3936
|
}], yearSelected: [{
|
|
3908
3937
|
type: Output
|
|
3909
3938
|
}], monthSelected: [{
|