ngx-bootstrap 21.2.0 → 21.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/collapse/fesm2022/ngx-bootstrap-collapse.mjs +89 -33
- package/collapse/fesm2022/ngx-bootstrap-collapse.mjs.map +1 -1
- package/collapse/types/ngx-bootstrap-collapse.d.ts +8 -7
- package/component-loader/fesm2022/ngx-bootstrap-component-loader.mjs +35 -16
- package/component-loader/fesm2022/ngx-bootstrap-component-loader.mjs.map +1 -1
- package/component-loader/types/ngx-bootstrap-component-loader.d.ts +6 -6
- package/datepicker/fesm2022/ngx-bootstrap-datepicker.mjs +59 -31
- package/datepicker/fesm2022/ngx-bootstrap-datepicker.mjs.map +1 -1
- package/datepicker/types/ngx-bootstrap-datepicker.d.ts +6 -2
- package/dropdown/fesm2022/ngx-bootstrap-dropdown.mjs +34 -21
- package/dropdown/fesm2022/ngx-bootstrap-dropdown.mjs.map +1 -1
- package/dropdown/types/ngx-bootstrap-dropdown.d.ts +4 -5
- package/package.json +1 -2
- package/schematics/ng-add/index.js +5 -13
- package/schematics/ng-add/index.js.map +1 -1
- package/schematics/utils/current_dependency_versions.json +1 -1
- package/typeahead/fesm2022/ngx-bootstrap-typeahead.mjs +52 -43
- package/typeahead/fesm2022/ngx-bootstrap-typeahead.mjs.map +1 -1
- package/typeahead/types/ngx-bootstrap-typeahead.d.ts +3 -1
- package/utils/fesm2022/ngx-bootstrap-utils.mjs +89 -1
- package/utils/fesm2022/ngx-bootstrap-utils.mjs.map +1 -1
- package/utils/types/ngx-bootstrap-utils.d.ts +42 -2
|
@@ -6,7 +6,7 @@ import * as i5 from 'ngx-bootstrap/positioning';
|
|
|
6
6
|
import { PositioningService } from 'ngx-bootstrap/positioning';
|
|
7
7
|
import * as i6 from 'ngx-bootstrap/timepicker';
|
|
8
8
|
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
|
|
9
|
-
import {
|
|
9
|
+
import { animateExpand } from 'ngx-bootstrap/utils';
|
|
10
10
|
import { Subscription, BehaviorSubject, combineLatest, Subject } from 'rxjs';
|
|
11
11
|
import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
|
|
12
12
|
import * as i2 from 'ngx-bootstrap/tooltip';
|
|
@@ -115,20 +115,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
115
115
|
}]
|
|
116
116
|
}] });
|
|
117
117
|
|
|
118
|
-
const
|
|
119
|
-
const
|
|
120
|
-
state('animated-down', style({ height: '*', overflow: 'hidden' })),
|
|
121
|
-
transition('* => animated-down', [
|
|
122
|
-
style({ height: 0, overflow: 'hidden' }),
|
|
123
|
-
animate(DATEPICKER_ANIMATION_TIMING)
|
|
124
|
-
]),
|
|
125
|
-
state('animated-up', style({ height: '*', overflow: 'hidden' })),
|
|
126
|
-
transition('* => animated-up', [
|
|
127
|
-
style({ height: '*', overflow: 'hidden' }),
|
|
128
|
-
animate(DATEPICKER_ANIMATION_TIMING)
|
|
129
|
-
]),
|
|
130
|
-
transition('* => unanimated', animate('0s'))
|
|
131
|
-
]);
|
|
118
|
+
const DATEPICKER_ANIMATION_DURATION_MS = 220;
|
|
119
|
+
const DATEPICKER_ANIMATION_TIMING = `${DATEPICKER_ANIMATION_DURATION_MS}ms cubic-bezier(0, 0, 0.2, 1)`;
|
|
132
120
|
|
|
133
121
|
class BsDatepickerAbstractComponent {
|
|
134
122
|
constructor() {
|
|
@@ -1382,7 +1370,13 @@ class BsCustomDatesViewComponent {
|
|
|
1382
1370
|
this.onSelect.emit(range);
|
|
1383
1371
|
}
|
|
1384
1372
|
compareRanges(range) {
|
|
1385
|
-
|
|
1373
|
+
const currentRange = range?.value;
|
|
1374
|
+
const selectedRange = this.selectedRange;
|
|
1375
|
+
if (Array.isArray(currentRange) && Array.isArray(selectedRange)) {
|
|
1376
|
+
return new Date(currentRange[0]).setHours(0, 0, 0, 0) === new Date(selectedRange[0]).setHours(0, 0, 0, 0)
|
|
1377
|
+
&& new Date(currentRange[1]).setHours(0, 0, 0, 0) === new Date(selectedRange[1]).setHours(0, 0, 0, 0);
|
|
1378
|
+
}
|
|
1379
|
+
return JSON.stringify(currentRange) === JSON.stringify(selectedRange);
|
|
1386
1380
|
}
|
|
1387
1381
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsCustomDatesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1388
1382
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsCustomDatesViewComponent, isStandalone: true, selector: "bs-custom-date-view", inputs: { ranges: "ranges", selectedRange: "selectedRange", customRangeLabel: "customRangeLabel" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: `
|
|
@@ -2189,13 +2183,13 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
|
|
|
2189
2183
|
}
|
|
2190
2184
|
constructor(_renderer, _config, _store, _element, _actions, _effects, _positionService) {
|
|
2191
2185
|
super();
|
|
2186
|
+
this._renderer = _renderer;
|
|
2192
2187
|
this._config = _config;
|
|
2193
2188
|
this._store = _store;
|
|
2194
2189
|
this._element = _element;
|
|
2195
2190
|
this._actions = _actions;
|
|
2196
2191
|
this._positionService = _positionService;
|
|
2197
2192
|
this.valueChange = new EventEmitter();
|
|
2198
|
-
this.animationState = 'void';
|
|
2199
2193
|
this.isRangePicker = false;
|
|
2200
2194
|
this._subs = [];
|
|
2201
2195
|
this._effects = _effects;
|
|
@@ -2217,10 +2211,16 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
|
|
|
2217
2211
|
this._positionService.event$?.pipe(take(1)).subscribe(() => {
|
|
2218
2212
|
this._positionService.disable();
|
|
2219
2213
|
if (this._config.isAnimated) {
|
|
2220
|
-
|
|
2214
|
+
const containerEl = this._element.nativeElement.querySelector('.bs-datepicker-container');
|
|
2215
|
+
if (containerEl) {
|
|
2216
|
+
this._animateExpand(containerEl, () => this.positionServiceEnable());
|
|
2217
|
+
}
|
|
2218
|
+
else {
|
|
2219
|
+
this.positionServiceEnable();
|
|
2220
|
+
}
|
|
2221
2221
|
return;
|
|
2222
2222
|
}
|
|
2223
|
-
this.
|
|
2223
|
+
this.positionServiceEnable();
|
|
2224
2224
|
});
|
|
2225
2225
|
this.isOtherMonthsActive = this._config.selectFromOtherMonth;
|
|
2226
2226
|
this.containerClass = this._config.containerClass;
|
|
@@ -2318,7 +2318,18 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
|
|
|
2318
2318
|
clearDate() {
|
|
2319
2319
|
this._store.dispatch(this._actions.select(undefined));
|
|
2320
2320
|
}
|
|
2321
|
+
_animateExpand(el, onDone) {
|
|
2322
|
+
this._cancelExpandAnimation?.();
|
|
2323
|
+
this._cancelExpandAnimation = animateExpand(this._renderer, el, {
|
|
2324
|
+
timing: DATEPICKER_ANIMATION_TIMING,
|
|
2325
|
+
durationMs: DATEPICKER_ANIMATION_DURATION_MS,
|
|
2326
|
+
useRaf: true,
|
|
2327
|
+
manageDisplay: true,
|
|
2328
|
+
onDone
|
|
2329
|
+
});
|
|
2330
|
+
}
|
|
2321
2331
|
ngOnDestroy() {
|
|
2332
|
+
this._cancelExpandAnimation?.();
|
|
2322
2333
|
for (const sub of this._subs) {
|
|
2323
2334
|
sub.unsubscribe();
|
|
2324
2335
|
}
|
|
@@ -2326,7 +2337,7 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
|
|
|
2326
2337
|
this._effects?.destroy();
|
|
2327
2338
|
}
|
|
2328
2339
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDatepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDatepickerContainerComponent, isStandalone: true, selector: "bs-datepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\"
|
|
2340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDatepickerContainerComponent, isStandalone: true, selector: "bs-datepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
2330
2341
|
}
|
|
2331
2342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDatepickerContainerComponent, decorators: [{
|
|
2332
2343
|
type: Component,
|
|
@@ -2335,7 +2346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2335
2346
|
'(click)': '_stopPropagation($event)',
|
|
2336
2347
|
role: 'dialog',
|
|
2337
2348
|
'aria-label': 'calendar'
|
|
2338
|
-
},
|
|
2349
|
+
}, standalone: true, imports: [NgClass, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n" }]
|
|
2339
2350
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { startTimepicker: [{
|
|
2340
2351
|
type: ViewChild,
|
|
2341
2352
|
args: ['startTP']
|
|
@@ -2667,13 +2678,13 @@ class BsDatepickerInlineContainerComponent extends BsDatepickerContainerComponen
|
|
|
2667
2678
|
_renderer.setStyle(_element.nativeElement, 'position', 'static');
|
|
2668
2679
|
}
|
|
2669
2680
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDatepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2670
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDatepickerInlineContainerComponent, isStandalone: true, selector: "bs-datepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\"
|
|
2681
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDatepickerInlineContainerComponent, isStandalone: true, selector: "bs-datepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
2671
2682
|
}
|
|
2672
2683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDatepickerInlineContainerComponent, decorators: [{
|
|
2673
2684
|
type: Component,
|
|
2674
2685
|
args: [{ selector: 'bs-datepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
|
|
2675
2686
|
'(click)': '_stopPropagation($event)'
|
|
2676
|
-
},
|
|
2687
|
+
}, standalone: true, imports: [NgClass, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n" }]
|
|
2677
2688
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { disabledValue: [{
|
|
2678
2689
|
type: HostBinding,
|
|
2679
2690
|
args: ['attr.disabled']
|
|
@@ -2868,13 +2879,13 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
|
|
|
2868
2879
|
}
|
|
2869
2880
|
constructor(_renderer, _config, _store, _element, _actions, _effects, _positionService) {
|
|
2870
2881
|
super();
|
|
2882
|
+
this._renderer = _renderer;
|
|
2871
2883
|
this._config = _config;
|
|
2872
2884
|
this._store = _store;
|
|
2873
2885
|
this._element = _element;
|
|
2874
2886
|
this._actions = _actions;
|
|
2875
2887
|
this._positionService = _positionService;
|
|
2876
2888
|
this.valueChange = new EventEmitter();
|
|
2877
|
-
this.animationState = 'void';
|
|
2878
2889
|
this._rangeStack = [];
|
|
2879
2890
|
this.chosenRange = [];
|
|
2880
2891
|
this._subs = [];
|
|
@@ -2900,10 +2911,16 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
|
|
|
2900
2911
|
this._positionService.event$?.pipe(take(1)).subscribe(() => {
|
|
2901
2912
|
this._positionService.disable();
|
|
2902
2913
|
if (this._config.isAnimated) {
|
|
2903
|
-
|
|
2914
|
+
const containerEl = this._element.nativeElement.querySelector('.bs-datepicker-container');
|
|
2915
|
+
if (containerEl) {
|
|
2916
|
+
this._animateExpand(containerEl, () => this.positionServiceEnable());
|
|
2917
|
+
}
|
|
2918
|
+
else {
|
|
2919
|
+
this.positionServiceEnable();
|
|
2920
|
+
}
|
|
2904
2921
|
return;
|
|
2905
2922
|
}
|
|
2906
|
-
this.
|
|
2923
|
+
this.positionServiceEnable();
|
|
2907
2924
|
});
|
|
2908
2925
|
this.containerClass = this._config.containerClass;
|
|
2909
2926
|
this.isOtherMonthsActive = this._config.selectFromOtherMonth;
|
|
@@ -3038,7 +3055,18 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
|
|
|
3038
3055
|
this._rangeStack = [];
|
|
3039
3056
|
}
|
|
3040
3057
|
}
|
|
3058
|
+
_animateExpand(el, onDone) {
|
|
3059
|
+
this._cancelExpandAnimation?.();
|
|
3060
|
+
this._cancelExpandAnimation = animateExpand(this._renderer, el, {
|
|
3061
|
+
timing: DATEPICKER_ANIMATION_TIMING,
|
|
3062
|
+
durationMs: DATEPICKER_ANIMATION_DURATION_MS,
|
|
3063
|
+
useRaf: true,
|
|
3064
|
+
manageDisplay: true,
|
|
3065
|
+
onDone
|
|
3066
|
+
});
|
|
3067
|
+
}
|
|
3041
3068
|
ngOnDestroy() {
|
|
3069
|
+
this._cancelExpandAnimation?.();
|
|
3042
3070
|
for (const sub of this._subs) {
|
|
3043
3071
|
sub.unsubscribe();
|
|
3044
3072
|
}
|
|
@@ -3067,7 +3095,7 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
|
|
|
3067
3095
|
this._effects?.setMaxDate(maxDateRange);
|
|
3068
3096
|
}
|
|
3069
3097
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDaterangepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3070
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDaterangepickerContainerComponent, isStandalone: true, selector: "bs-daterangepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }, { propertyName: "endTimepicker", first: true, predicate: ["endTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\"
|
|
3098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDaterangepickerContainerComponent, isStandalone: true, selector: "bs-daterangepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }, { propertyName: "endTimepicker", first: true, predicate: ["endTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
3071
3099
|
}
|
|
3072
3100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDaterangepickerContainerComponent, decorators: [{
|
|
3073
3101
|
type: Component,
|
|
@@ -3076,7 +3104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
3076
3104
|
'(click)': '_stopPropagation($event)',
|
|
3077
3105
|
role: 'dialog',
|
|
3078
3106
|
'aria-label': 'calendar'
|
|
3079
|
-
},
|
|
3107
|
+
}, standalone: true, imports: [
|
|
3080
3108
|
NgClass,
|
|
3081
3109
|
BsDaysCalendarViewComponent,
|
|
3082
3110
|
TimepickerModule,
|
|
@@ -3084,7 +3112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
3084
3112
|
BsYearsCalendarViewComponent,
|
|
3085
3113
|
BsCustomDatesViewComponent,
|
|
3086
3114
|
AsyncPipe
|
|
3087
|
-
], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\"
|
|
3115
|
+
], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n" }]
|
|
3088
3116
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { startTimepicker: [{
|
|
3089
3117
|
type: ViewChild,
|
|
3090
3118
|
args: ['startTP']
|
|
@@ -3112,13 +3140,13 @@ class BsDaterangepickerInlineContainerComponent extends BsDaterangepickerContain
|
|
|
3112
3140
|
_renderer.setStyle(_element.nativeElement, 'position', 'static');
|
|
3113
3141
|
}
|
|
3114
3142
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3115
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDaterangepickerInlineContainerComponent, isStandalone: true, selector: "bs-daterangepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\"
|
|
3143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BsDaterangepickerInlineContainerComponent, isStandalone: true, selector: "bs-daterangepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
3116
3144
|
}
|
|
3117
3145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, decorators: [{
|
|
3118
3146
|
type: Component,
|
|
3119
3147
|
args: [{ selector: 'bs-daterangepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], host: {
|
|
3120
3148
|
'(click)': '_stopPropagation($event)'
|
|
3121
|
-
},
|
|
3149
|
+
}, standalone: true, imports: [NgClass, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n <div class=\"bs-datepicker-container\">\n <!--calendars-->\n <div class=\"bs-calendar-container\" role=\"application\">\n @switch (viewMode | async) {\n <!--days calendar-->\n @case ('day') {\n <div class=\"bs-media-container\">\n @for (calendar of daysCalendar$ | async; track calendar) {\n <bs-days-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n [isDisabled]=\"isDatePickerDisabled\"\n [options]=\"options$ | async\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"dayHoverHandler($event)\"\n (onHoverWeek)=\"weekHoverHandler($event)\"\n (onSelect)=\"daySelectHandler($event)\">\n </bs-days-calendar-view>\n }\n </div>\n @if (withTimepicker) {\n <div class=\"bs-timepicker-in-datepicker-container\">\n <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n @if (isRangePicker) {\n <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n }\n </div>\n }\n }\n <!--months calendar-->\n @case ('month') {\n <div class=\"bs-media-container\">\n @for (calendar of monthsCalendar | async; track calendar) {\n <bs-month-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"monthHoverHandler($event)\"\n (onSelect)=\"monthSelectHandler($event)\">\n </bs-month-calendar-view>\n }\n </div>\n }\n <!--years calendar-->\n @case ('year') {\n <div class=\"bs-media-container\">\n @for (calendar of yearsCalendar | async; track calendar) {\n <bs-years-calendar-view\n [class.bs-datepicker-multiple]=\"multipleCalendars\"\n [calendar]=\"calendar\"\n (onNavigate)=\"navigateTo($event)\"\n (onViewMode)=\"setViewMode($event)\"\n (onHover)=\"yearHoverHandler($event)\"\n (onSelect)=\"yearSelectHandler($event)\">\n </bs-years-calendar-view>\n }\n </div>\n }\n }\n </div>\n <!--applycancel buttons-->\n @if (false) {\n <div class=\"bs-datepicker-buttons\">\n <button class=\"btn btn-success\" type=\"button\">Apply</button>\n <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n </div>\n }\n @if (showTodayBtn || showClearBtn) {\n <div class=\"bs-datepicker-buttons\">\n @if (showTodayBtn) {\n <div class=\"btn-today-wrapper\"\n [class.today-left]=\"todayPos === 'left'\"\n [class.today-right]=\"todayPos === 'right'\"\n [class.today-center]=\"todayPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n </div>\n }\n @if (showClearBtn) {\n <div class=\"btn-clear-wrapper\"\n [class.clear-left]=\"clearPos === 'left'\"\n [class.clear-right]=\"clearPos === 'right'\"\n [class.clear-center]=\"clearPos === 'center'\"\n >\n <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n </div>\n }\n </div>\n }\n </div>\n <!--custom dates or date ranges picker-->\n @if (customRanges && customRanges.length > 0) {\n <div class=\"bs-datepicker-custom-range\">\n <bs-custom-date-view\n [selectedRange]=\"chosenRange\"\n [ranges]=\"customRanges\"\n [customRangeLabel]=\"customRangeBtnLbl\"\n (onSelect)=\"setRangeOnCalendar($event)\">\n </bs-custom-date-view>\n </div>\n }\n </div>\n}\n" }]
|
|
3122
3150
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { disabledValue: [{
|
|
3123
3151
|
type: HostBinding,
|
|
3124
3152
|
args: ['attr.disabled']
|