ngx-daterange
Version:
Date-Range Selector for Angular
989 lines • 69.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('moment'), require('moment-range')) :
typeof define === 'function' && define.amd ? define('ngx-daterange', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'moment', 'moment-range'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-daterange'] = {}, global.ng.core, global.ng.common, global.ng.forms, global.momentNs, global.momentRange));
}(this, (function (exports, core, common, forms, momentNs, momentRange) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var momentNs__namespace = /*#__PURE__*/_interopNamespace(momentNs);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var moment = momentNs__namespace;
var range = momentRange.extendMoment(moment).range;
var CalendarComponent = /** @class */ (function () {
function CalendarComponent() {
this.singleCalendar = false;
this.dateChanged = new core.EventEmitter();
this.monthChanged = new core.EventEmitter();
this.yearChanged = new core.EventEmitter();
}
Object.defineProperty(CalendarComponent.prototype, "monthText", {
get: function () {
return moment.monthsShort()[this.month];
},
enumerable: false,
configurable: true
});
CalendarComponent.prototype.ngOnChanges = function (changes) {
var _a;
// Set the right calendar month and year equal to the left calendar
// if the left calendar's date if after the right
if (!this.isLeft) {
var currentValue = (_a = changes === null || changes === void 0 ? void 0 : changes.selectedFromDate) === null || _a === void 0 ? void 0 : _a.currentValue;
if (currentValue) {
if (!moment.isMoment(currentValue)) {
currentValue = moment(currentValue);
}
var month = currentValue.month();
var year = currentValue.year();
if (year > this.year || (year === this.year && month > this.month)) {
this.month = month;
this.year = year;
}
}
}
this.createCalendarGridData();
};
CalendarComponent.prototype.getWeekNumbers = function (monthRange) {
var weekNumbers = [];
var weeks = Array.from(monthRange.by('weeks'));
for (var i = 0; i < weeks.length; i++) {
var week = weeks[i];
if (i < 6) {
weekNumbers.push(week.week());
}
else {
break;
}
}
return weekNumbers;
};
CalendarComponent.prototype.getWeeksRange = function (weeks) {
var weeksRange = [];
for (var i = 0; i < weeks.length; i++) {
var weekNumber = weeks[i];
var firstWeekDay = moment([this.year, this.month]).week(weekNumber).day(0);
var lastWeekDay = moment([this.year, this.month]).week(weekNumber).day(6);
// Set year to the next year if the week number is lower than the starting week
// this indicates that the week is in January of the next year
if (weekNumber < weeks[0]) {
firstWeekDay = moment([this.year + 1, 0]).week(weekNumber).day(0);
lastWeekDay = moment([this.year + 1, 0]).week(weekNumber).day(6);
}
weeksRange.push(range(firstWeekDay, lastWeekDay));
}
return weeksRange;
};
CalendarComponent.prototype.createCalendarGridData = function () {
var _this = this;
var firstDay = moment([this.year, this.month]).startOf('month');
var endDay = moment([this.year, this.month]).endOf('month').add(1, 'week');
var monthRange = range(firstDay, endDay);
var weeksRange = this.getWeeksRange(this.getWeekNumbers(monthRange));
var weekList = [];
weeksRange === null || weeksRange === void 0 ? void 0 : weeksRange.map(function (week) {
var daysList = [];
Array.from(week.by('days')).forEach(function (day) {
if (day.isSame(_this.minDate, 'date')) {
day = _this.minDate;
}
else if (day.isSame(_this.maxDate, 'date')) {
day = _this.maxDate;
}
;
daysList.push(day);
});
weekList.push(daysList);
});
this.weekList = weekList;
};
CalendarComponent.prototype.isDisabled = function (day) {
return (day.isBefore(this.minDate) || day.isAfter(this.maxDate)) || (day.isBefore(this.selectedFromDate) && !this.isLeft);
};
CalendarComponent.prototype.isDateAvailable = function (day) {
if (this.isLeft) {
return day.isSameOrBefore(this.selectedToDate, 'date') && !day.isSameOrBefore(this.minDate, 'date');
}
return day.isSameOrAfter(this.selectedFromDate, 'date') && !day.isSameOrAfter(this.maxDate, 'date');
};
CalendarComponent.prototype.isSelectedDate = function (day) {
var date = this.isLeft ? this.selectedFromDate : this.selectedToDate;
return date && day.isSame(date, 'date');
};
CalendarComponent.prototype.isDateInRange = function (day) {
if (this.selectedFromDate && this.selectedToDate) {
var selectedRange = range(this.selectedFromDate, this.selectedToDate);
return selectedRange.contains(day);
}
return false;
};
CalendarComponent.prototype.isDifferentMonth = function (day) {
return day.get('month') !== this.month;
};
CalendarComponent.prototype.dateSelected = function (event, data) {
var target = event.target;
if (!target.classList.contains('disabled')) {
this.dateChanged.emit({ day: data.day, isLeft: this.isLeft });
}
event.stopPropagation();
};
CalendarComponent.prototype.monthSelected = function (event, data) {
this.monthChanged.emit({ value: data.value, isLeft: this.isLeft });
event.stopPropagation();
};
CalendarComponent.prototype.yearSelected = function (event, data) {
this.yearChanged.emit({ value: data.value, isLeft: this.isLeft });
event.stopPropagation();
};
return CalendarComponent;
}());
CalendarComponent.decorators = [
{ type: core.Component, args: [{
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
selector: 'calendar',
template: "<div class=\"row\">\n <div class=\"col text-center\">\n <div class=\"d-flex align-items-center calendar-pagination {{ icons === 'material' ? 'material' : '' }}\">\n <div>\n <button type=\"button\" class=\"btn btn-link btn-previous-year\" (click)=\"yearSelected($event, { value: -1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">first_page</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-double-left\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMjY2LjQ1MiwyMS4xNzggMjQ1LjIwNCwwIDQyLjE0OSwyMDMuNzE4IDI0NS4yMDQsNDA3LjQzNiAyNjYuNDUyLDM4Ni4yNTggODQuNTA3LDIwMy43MTggICIgZmlsbD0iIzAwMDAwMCIvPgoJPHBvbHlnb24gcG9pbnRzPSIzNjUuMjg2LDIxLjE3OCAzNDQuMDM4LDAgMTQwLjk4MywyMDMuNzE4IDM0NC4wMzgsNDA3LjQzNiAzNjUuMjg2LDM4Ni4yNTggMTgzLjM0MSwyMDMuNzE4ICAiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K\" />\n </button>\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-previous-month\" (click)=\"monthSelected($event, { value: -1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">chevron_left</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-left\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC41MzEgNDQ0LjUzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjUzMSA0NDQuNTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTIxMy4xMywyMjIuNDA5TDM1MS44OCw4My42NTNjNy4wNS03LjA0MywxMC41NjctMTUuNjU3LDEwLjU2Ny0yNS44NDFjMC0xMC4xODMtMy41MTgtMTguNzkzLTEwLjU2Ny0yNS44MzUgICBsLTIxLjQwOS0yMS40MTZDMzIzLjQzMiwzLjUyMSwzMTQuODE3LDAsMzA0LjYzNywwcy0xOC43OTEsMy41MjEtMjUuODQxLDEwLjU2MUw5Mi42NDksMTk2LjQyNSAgIGMtNy4wNDQsNy4wNDMtMTAuNTY2LDE1LjY1Ni0xMC41NjYsMjUuODQxczMuNTIxLDE4Ljc5MSwxMC41NjYsMjUuODM3bDE4Ni4xNDYsMTg1Ljg2NGM3LjA1LDcuMDQzLDE1LjY2LDEwLjU2NCwyNS44NDEsMTAuNTY0ICAgczE4Ljc5NS0zLjUyMSwyNS44MzQtMTAuNTY0bDIxLjQwOS0yMS40MTJjNy4wNS03LjAzOSwxMC41NjctMTUuNjA0LDEwLjU2Ny0yNS42OTdjMC0xMC4wODUtMy41MTgtMTguNzQ2LTEwLjU2Ny0yNS45NzggICBMMjEzLjEzLDIyMi40MDl6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\" />\n </button>\n </div>\n <div class=\"flex-grow-1 month-year\">\n {{ monthText }} {{ year }}\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-next-month\" (click)=\"monthSelected($event, { value: 1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">chevron_right</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-right\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM1Mi4wMjUsMTk2LjcxMkwxNjUuODg0LDEwLjg0OEMxNTkuMDI5LDMuNjE1LDE1MC40NjksMCwxNDAuMTg3LDBjLTEwLjI4MiwwLTE4Ljg0MiwzLjYxOS0yNS42OTcsMTAuODQ4TDkyLjc5MiwzMi4yNjQgICBjLTcuMDQ0LDcuMDQzLTEwLjU2NiwxNS42MDQtMTAuNTY2LDI1LjY5MmMwLDkuODk3LDMuNTIxLDE4LjU2LDEwLjU2NiwyNS45ODFsMTM4Ljc1MywxMzguNDczTDkyLjc4NiwzNjEuMTY4ICAgYy03LjA0Miw3LjA0My0xMC41NjQsMTUuNjA0LTEwLjU2NCwyNS42OTNjMCw5Ljg5NiwzLjUyMSwxOC41NjIsMTAuNTY0LDI1Ljk4bDIxLjcsMjEuNDEzICAgYzcuMDQzLDcuMDQzLDE1LjYxMiwxMC41NjQsMjUuNjk3LDEwLjU2NGMxMC4wODksMCwxOC42NTYtMy41MjEsMjUuNjk3LTEwLjU2NGwxODYuMTQ1LTE4NS44NjQgICBjNy4wNDYtNy40MjMsMTAuNTcxLTE2LjA4NCwxMC41NzEtMjUuOTgxQzM2Mi41OTcsMjEyLjMyMSwzNTkuMDcxLDIwMy43NTUsMzUyLjAyNSwxOTYuNzEyeiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=\" />\n </button>\n </div>\n <div>\n <button type=\"button\" class=\"btn btn-link btn-next-year\" (click)=\"yearSelected($event, { value: 1 })\">\n <i *ngIf=\"icons === 'material'\" class=\"material-icons\">last_page</i>\n <i *ngIf=\"icons === 'font-awesome'\" class=\"fas fa-angle-double-right\"></i>\n <img *ngIf=\"icons === 'default'\" src=\"data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDcuNDM2IDQwNy40MzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwNy40MzYgNDA3LjQzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTYyLjIzMSwwIDE0MC45ODMsMjEuMTc4IDMyMi45MjksMjAzLjcxOCAxNDAuOTgzLDM4Ni4yNTggMTYyLjIzMSw0MDcuNDM2IDM2NS4yODYsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+Cgk8cG9seWdvbiBwb2ludHM9IjYzLjM5NywwIDQyLjE0OSwyMS4xNzggMjI0LjA5NSwyMDMuNzE4IDQyLjE0OSwzODYuMjU4IDYzLjM5Nyw0MDcuNDM2IDI2Ni40NTIsMjAzLjcxOCAgIiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==\" />\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"row\">\n <div class=\"col\">\n <table class=\"table table-borderless mb-0 w-100\">\n <thead>\n <tr class=\"week-days\">\n <th>Sun</th>\n <th>Mon</th>\n <th>Tue</th>\n <th>Wed</th>\n <th>Thu</th>\n <th>Fri</th>\n <th>Sat</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let week of weekList; let i = index\">\n <td *ngFor=\"let day of weekList[i]\" (click)=\"dateSelected($event, { day: day })\" [attr.data-day]=\"day | date:'MM-dd-yyyy'\" [ngClass]=\"{ 'selected': isSelectedDate(day), 'in-selected-range': isDateInRange(day), 'disabled': isDisabled(day), 'different-month': isDifferentMonth(day) }\">\n {{ day.format('D') }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n",
styles: [".calendar.calendar-single .table td.in-selected-range{background-color:transparent}.calendar .calendar-pagination{font-size:16px;margin:.5rem -15px 0}.calendar .calendar-pagination .btn,.calendar .calendar-pagination .btn-link{background-color:transparent;min-width:auto;width:auto}.calendar .calendar-pagination.material .btn.btn-previous-year{padding-right:3px}.calendar .calendar-pagination.material .btn.btn-previous-month{padding-left:0}.calendar .calendar-pagination.material .btn.btn-next-month{padding-right:0}.calendar .calendar-pagination.material .btn.btn-next-year{padding-left:3px}.calendar .calendar-pagination .month-year{font-weight:600}.calendar .week-days{text-transform:uppercase}.calendar .table td,.calendar .table th{border-radius:0;color:#333;font-size:12px;height:36px;line-height:1;padding:0;text-align:center;vertical-align:middle}.calendar .table th{font-weight:400}.calendar .table td{border-radius:5px;cursor:pointer;font-weight:900;max-width:32px;width:32px}.calendar .table td:not(.disabled):not(.selected):hover{background-color:#eee;color:#333}.calendar .table td.selected{color:#fff;font-size:12px}.calendar .table td.selected,.calendar .table td.selected.in-selected-range{background-color:#003d79;border-radius:5px}.calendar .table td.selected.different-month{color:#fff}.calendar .table td.selected:hover{background-color:#003d79}.calendar .table td.in-selected-range{background-color:#dfefff;border-radius:0;font-size:12px}.calendar .table td.disabled{background-color:transparent;color:#666;cursor:not-allowed;font-weight:400}.calendar .table td.different-month{color:#888;font-weight:500}.calendar .table td.different-month.disabled{color:#ccc}"]
},] }
];
CalendarComponent.propDecorators = {
month: [{ type: core.Input }],
year: [{ type: core.Input }],
selectedFromDate: [{ type: core.Input }],
selectedToDate: [{ type: core.Input }],
isLeft: [{ type: core.Input }],
format: [{ type: core.Input }],
minDate: [{ type: core.Input }],
maxDate: [{ type: core.Input }],
singleCalendar: [{ type: core.Input }],
icons: [{ type: core.Input }],
dateChanged: [{ type: core.Output }],
monthChanged: [{ type: core.Output }],
yearChanged: [{ type: core.Output }]
};
var defaultDateFormat = 'YYYY-MM-DD';
var defaultTimeFormat = 'HH:mm';
var defaultDateRangePickerOptions = {
autoApply: true,
clickOutsideAllowed: true,
disabled: false,
disableInputDisplay: false,
icons: 'default',
format: defaultDateFormat,
labelText: 'Date Range',
maxDate: null,
minDate: null,
position: 'left',
preDefinedRanges: [],
showResetButton: true,
singleCalendar: false,
};
var moment$1 = momentNs__namespace;
var instanceCount = 0;
var DateRangePickerComponent = /** @class */ (function () {
function DateRangePickerComponent() {
this.options = defaultDateRangePickerOptions;
this.controlName = 'dateRange';
this.instanceId = null;
this.fromDate = null;
this.toDate = null;
this.datepickerReset = new core.EventEmitter();
this.rangeSelected = new core.EventEmitter();
this.isMobile = false;
this.range = '';
this.showCalendars = false;
this.displayStyle = false;
if (!this.instanceId) {
// assign auto-id
this.instanceId = "dateRangePicker-" + instanceCount++;
}
}
Object.defineProperty(DateRangePickerComponent.prototype, "enableApplyButton", {
get: function () {
var enabled = !this.options.autoApply && this.fromDate !== null;
if (this.options.singleCalendar) {
return enabled;
}
return enabled && this.toDate !== null;
},
enumerable: false,
configurable: true
});
DateRangePickerComponent.prototype.handleClick = function (event) {
var _a;
var target = event.target;
// close the DatePicker if clicking outside is not allowed
if (!this.options.clickOutsideAllowed) {
var targetPathClassNames = [];
try {
targetPathClassNames = event.composedPath().map(function (obj) { return obj['className']; }) || [''];
}
catch (error) {
// IE / Edge
targetPathClassNames = (_a = event['path']) === null || _a === void 0 ? void 0 : _a.map(function (obj) { return obj.className; });
}
var containerElementClassRoot_1 = this.options.modal === true ? 'dateRangePickerModal' : 'dateRangePicker';
var targetExistsInPath = targetPathClassNames === null || targetPathClassNames === void 0 ? void 0 : targetPathClassNames.some(function (className) {
if (typeof className === 'string') {
return className && className.includes(containerElementClassRoot_1);
}
return false;
});
if (!targetExistsInPath) {
this.toggleCalendarVisibility(false);
}
}
// Close the DatePicker if the target input was clicked
if (target.id === this.instanceId) {
this.toggleCalendarVisibility(!this.showCalendars);
}
};
DateRangePickerComponent.prototype.ngOnInit = function () {
var _this = this;
if (navigator) {
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
this.isMobile = true;
}
}
// ensure dates in options are valid
this.validateOptionDates();
// ensure input dates are within the min/max dates in options
this.validateInputDates();
if (this.options.preDefinedRanges && this.options.preDefinedRanges.length > 0) {
this.defaultRanges = this.validateAndAssignPredefinedRanges(this.options.preDefinedRanges);
}
// assign values not present in options with default values
var optionsKeys = Object.keys(this.options);
var defaultValuesKeys = Object.keys(defaultDateRangePickerOptions);
defaultValuesKeys.forEach(function (key) {
if (!optionsKeys.includes(key)) {
_this.options[key] = defaultDateRangePickerOptions[key];
}
});
// update calendar grid
this.updateCalendar();
// create parent form group if it doesn't exist
if (!this.parentFormGroup) {
this.parentFormGroup = new forms.FormGroup({});
}
// add form control to parent form group
var value = this.formatRangeAsString();
var control = new forms.FormControl({ value: value, disabled: this.options.disableInputDisplay }, this.options.validators);
if (this.options.disabled) {
control.disable();
}
this.parentFormGroup.addControl(this.controlName, control);
// set value of control
this.setRange();
};
DateRangePickerComponent.prototype.validateInputDates = function () {
if (typeof this.fromDate === 'string') {
this.fromDate = moment$1(this.fromDate);
}
if (typeof this.toDate === 'string') {
this.toDate = moment$1(this.toDate);
}
if (this.fromDate && this.options.minDate && this.fromDate.isBefore(this.options.minDate, 'date')) {
throw new RangeError('@Input fromDate is before the specified minDate in options');
}
if (this.toDate && this.options.maxDate && this.toDate.isAfter(this.options.maxDate, 'date')) {
throw new RangeError('@Input toDate is after the specified maxDate in options');
}
};
DateRangePickerComponent.prototype.validateOptionDates = function () {
// validate maxDate isn't before minDate or vice versa
if (this.options) {
if (this.options.minDate && this.options.maxDate) {
if (this.options.minDate.isAfter(this.options.maxDate, 'date')) {
throw new RangeError('minDate specified in options is after the maxDate');
}
else if (this.options.maxDate.isBefore(this.options.minDate, 'date')) {
throw new RangeError('maxDate specified in options is before the minDate');
}
}
}
};
// assists CSS to fix small positioning bug with From:/To: date text
DateRangePickerComponent.prototype.checkChrome = function () {
return window['chrome'] ? 'is-chrome' : '';
};
DateRangePickerComponent.prototype.toggleCalendarVisibility = function (value) {
if (this.options.modal === true) {
this.displayStyle = value !== null ? value === false ? false : true : this.showCalendars === false ? false : true;
}
else {
this.showCalendars = value !== null ? value : !this.showCalendars;
}
};
DateRangePickerComponent.prototype.setFromToMonthYear = function (fromDate, toDate) {
var tempFromDate = fromDate || this.fromDate || moment$1();
var tempToDate = toDate || this.toDate || moment$1();
if (!(tempFromDate instanceof moment$1)) {
tempFromDate = moment$1(tempFromDate, defaultDateFormat);
}
if (!(tempToDate instanceof moment$1)) {
tempToDate = moment$1(tempToDate, defaultDateFormat);
}
this.fromMonth = tempFromDate.get('month');
this.fromYear = tempFromDate.get('year');
this.toMonth = tempToDate.get('month');
this.toYear = tempToDate.get('year');
};
DateRangePickerComponent.prototype.updateCalendar = function () {
// get month and year to show calendar
this.setFromToMonthYear();
this.setRange();
};
// update from/to based on selection
DateRangePickerComponent.prototype.dateChanged = function (changedData) {
var value = changedData.day;
var isLeft = changedData.isLeft;
if (isLeft) {
this.fromDate = value;
if (this.fromDate.isAfter(this.toDate, 'date')) {
this.toDate = this.fromDate.clone();
}
}
else {
this.toDate = value;
if (this.toDate.isBefore(this.fromDate, 'date')) {
this.fromDate = this.toDate.clone();
}
}
this.setFromToMonthYear(this.fromDate, this.toDate);
if (this.options.autoApply && (this.toDate || this.options.singleCalendar)) {
this.toggleCalendarVisibility(false);
this.setRange();
this.emitRangeSelected();
}
};
DateRangePickerComponent.prototype.emitRangeSelected = function (data) {
if (!data) {
data = this.options.singleCalendar ? { start: this.fromDate } : { start: this.fromDate, end: this.toDate };
}
this.rangeSelected.emit(data);
};
DateRangePickerComponent.prototype.getMoment = function (value) {
return moment$1(value, this.options.format);
};
DateRangePickerComponent.prototype.formatRangeAsString = function () {
var range = '';
if (this.options.singleCalendar && this.fromDate) {
if (typeof this.fromDate === 'string') {
this.fromDate = moment$1(this.fromDate);
}
range = this.fromDate.format(this.options.format);
}
else if (!this.options.singleCalendar && this.fromDate && this.toDate) {
if (typeof this.fromDate === 'string') {
this.fromDate = moment$1(this.fromDate);
}
if (typeof this.toDate === 'string') {
this.toDate = moment$1(this.toDate);
}
range = this.fromDate.format(this.options.format) + " - " + this.toDate.format(this.options.format);
}
return range;
};
DateRangePickerComponent.prototype.setRange = function () {
var _a;
this.range = this.formatRangeAsString();
if (this.parentFormGroup) {
var control = (_a = this.parentFormGroup) === null || _a === void 0 ? void 0 : _a.get(this.controlName);
if (control) {
control.setValue(this.range);
control.updateValueAndValidity();
}
}
};
DateRangePickerComponent.prototype.setDateFromInput = function (event) {
var isLeft = event.isLeft;
var target = event.event.target;
try {
if (target.value) {
var day = this.getMoment(target.value);
if (!day.isBefore(this.options.minDate) && !day.isAfter(this.options.maxDate)) {
if (isLeft && !this.fromDate) {
this.fromDate = day;
}
if (!isLeft && !this.toDate) {
this.toDate = day;
}
this.dateChanged({
day: day,
isLeft: isLeft,
});
if (this.fromDate && this.toDate) {
this.setFromToMonthYear(this.fromDate, this.toDate);
if (!this.options.autoApply) {
this.emitRangeSelected();
}
}
}
else {
// assume nothing - reset values
this.fromDate = null;
this.toDate = null;
target.value = '';
target.focus();
}
}
}
catch (e) {
console.error(e);
}
};
DateRangePickerComponent.prototype.monthChanged = function (data) {
var temp;
if (data.isLeft) {
temp = moment$1([this.fromYear, this.fromMonth]).add(data.value, 'month');
this.fromMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.fromYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
else {
temp = moment$1([this.toYear, this.toMonth]).add(data.value, 'month');
this.toMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.toYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
};
DateRangePickerComponent.prototype.yearChanged = function (data) {
var temp;
if (data.isLeft) {
temp = moment$1([this.fromYear, this.fromMonth]).add(data.value, 'year');
this.fromMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.fromYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
else {
temp = moment$1([this.toYear, this.toMonth]).add(data.value, 'year');
this.toMonth = temp === null || temp === void 0 ? void 0 : temp.get('month');
this.toYear = temp === null || temp === void 0 ? void 0 : temp.get('year');
}
};
DateRangePickerComponent.prototype.close = function (event) {
this.toggleCalendarVisibility(false);
event.stopPropagation();
};
DateRangePickerComponent.prototype.reset = function (event) {
this.fromDate = null;
this.toDate = null;
this.setRange();
this.datepickerReset.emit();
event.stopPropagation();
};
DateRangePickerComponent.prototype.apply = function (event) {
this.toggleCalendarVisibility(false);
this.setRange();
this.emitRangeSelected();
event.stopPropagation();
};
DateRangePickerComponent.prototype.applyPredefinedRange = function (event) {
// adjust to/from month/year so calendar months and years match range
this.setFromToMonthYear(event.definedDateRange.value.start, event.definedDateRange.value.end);
this.fromDate = event.definedDateRange.value.start;
this.toDate = event.definedDateRange.value.end;
if (this.options.autoApply) {
this.apply(event.event);
}
};
DateRangePickerComponent.prototype.validateAndAssignPredefinedRanges = function (ranges) {
var _this = this;
return ranges.filter(function (range) {
if (range.value.start.isAfter(range.value.end, 'date')) {
throw new RangeError("Pre-defined range \"" + range.name + "\" start date cannot be after the end date for the range.");
}
if (_this.options.minDate && range.value.start.isBefore(_this.options.minDate)) {
throw new RangeError("Pre-defined range \"" + range.name + "\" start date is before the specified minDate in your options.");
}
if (_this.options.maxDate && range.value.end.isAfter(_this.options.maxDate)) {
throw new RangeError("Pre-defined range \"" + range.name + "\" end date is after the specified maxDate in your options.");
}
// add range to ranges
return true;
});
};
return DateRangePickerComponent;
}());
DateRangePickerComponent.decorators = [
{ type: core.Component, args: [{
encapsulation: core.ViewEncapsulation.Emulated,
selector: 'date-range-picker',
template: "<div class=\"dateRangePicker-wrapper\" *ngIf=\"parentFormGroup\">\n <div #content>\n <ng-content></ng-content>\n </div>\n <div class=\"form-group\" [formGroup]=\"parentFormGroup\">\n <ng-container *ngIf=\"content.childNodes.length === 0\">\n <label [attr.for]=\"instanceId\">{{ options.labelText }}</label>\n <input [attr.id]=\"instanceId\" class=\"form-control\" type=\"text\" [formControlName]=\"controlName\">\n </ng-container>\n\n <div class=\"modal\" tabindex=\"-1\" role=\"dialog\" [ngClass]=\"{ 'modal-display': displayStyle}\">\n <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-body\">\n <div [ngClass]=\"{'dateRangePickerModal': true, 'dateRangePicker-single': options.singleCalendar, 'is-chrome': checkChrome(), 'mobile': isMobile }\">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col\">\n \n <!-- Manual Inputs -->\n <manual-inputs [options]=\"options\" [fromDate]=\"fromDate\" [toDate]=\"toDate\" [isMobile]=\"isMobile\" (dateFromInput)=\"setDateFromInput($event)\"></manual-inputs>\n \n <!-- Calendars -->\n <div class=\"row row-calendars\">\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile && !options.singleCalendar }\">\n <calendar [ngClass]=\"{ 'calendar': true, 'calendar-single': options.singleCalendar }\" [isLeft]=\"true\" [month]=\"fromMonth\" [year]=\"fromYear\" (monthChanged)=monthChanged($event) (yearChanged)=\"yearChanged($event)\" (dateChanged)=\"dateChanged($event)\" [format]=\"options.format\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [singleCalendar]=\"options.singleCalendar\" [icons]=\"options.icons\"></calendar>\n </div>\n \n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile, 'col__mobile': isMobile }\" *ngIf=\"!options.singleCalendar\">\n <calendar class=\"calendar\" [month]=\"toMonth\" [year]=\"toYear\" [format]=\"options.format\" (dateChanged)=\"dateChanged($event)\" (monthChanged)=\"monthChanged($event)\" (yearChanged)=\"yearChanged($event)\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [icons]=\"options.icons\"></calendar>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Pre-Defined Date Ranges -->\n <predefined-date-ranges [options]=\"options\" [range]=\"range\" [enableApplyButton]=\"enableApplyButton\" (closeEvent)=\"close($event)\" (resetEvent)=\"reset($event)\" (applyEvent)=\"apply($event)\" (predefinedRange)=\"applyPredefinedRange($event)\"></predefined-date-ranges>\n \n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"close($event)\">Close</button>\n <button type=\"button\" class=\"btn btn-outline-secondary btn-sm ml-3\" (click)=\"reset($event)\" *ngIf=\"range && options.showResetButton\">Reset</button>\n <button type=\"button\" class=\"btn btn-primary btn-sm ml-3\" [disabled]=\"!enableApplyButton\" (click)=\"apply($event)\" *ngIf=\"!options.autoApply\">Apply</button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Desktop Browsers -->\n <div [ngClass]=\"{'dateRangePicker': true, 'invisible': !showCalendars, 'dateRangePicker-single': options.singleCalendar, 'is-chrome': checkChrome(), 'open-left': options.position === 'left', 'open-right': options.position === 'right', 'mobile': isMobile }\">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col\">\n\n <!-- Manual Inputs -->\n <manual-inputs [options]=\"options\" [fromDate]=\"fromDate\" [toDate]=\"toDate\" [isMobile]=\"isMobile\" (dateFromInput)=\"setDateFromInput($event)\"></manual-inputs>\n\n <!-- Calendars -->\n <div class=\"row row-calendars\">\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile && !options.singleCalendar }\">\n <calendar [ngClass]=\"{ 'calendar': true, 'calendar-single': options.singleCalendar }\" [isLeft]=\"true\" [month]=\"fromMonth\" [year]=\"fromYear\" (monthChanged)=monthChanged($event) (yearChanged)=\"yearChanged($event)\" (dateChanged)=\"dateChanged($event)\" [format]=\"options.format\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [singleCalendar]=\"options.singleCalendar\" [icons]=\"options.icons\"></calendar>\n </div>\n\n <div [ngClass]=\"{ 'col-12': true, 'col-sm-6': !isMobile, 'col__mobile': isMobile }\" *ngIf=\"!options.singleCalendar\">\n <calendar class=\"calendar\" [month]=\"toMonth\" [year]=\"toYear\" [format]=\"options.format\" (dateChanged)=\"dateChanged($event)\" (monthChanged)=\"monthChanged($event)\" (yearChanged)=\"yearChanged($event)\" [selectedFromDate]=\"fromDate\" [selectedToDate]=\"toDate\" [minDate]=\"options.minDate\" [maxDate]=\"options.maxDate\" [icons]=\"options.icons\"></calendar>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Pre-Defined Date Ranges -->\n <predefined-date-ranges [options]=\"options\" [range]=\"range\" [enableApplyButton]=\"enableApplyButton\" (closeEvent)=\"close($event)\" (resetEvent)=\"reset($event)\" (applyEvent)=\"apply($event)\"></predefined-date-ranges>\n\n </div>\n </div>\n\n </div>\n</div>\n",
styles: [".dateRangePicker-wrapper{border:none;position:relative}.dateRangePicker-wrapper input.form-control[disabled]{background-color:#fff}.dateRangePicker-wrapper .modal-body{padding:0!important}.dateRangePicker-wrapper .modal{-webkit-backdrop-filter:brightness(50%);backdrop-filter:brightness(50%)}.dateRangePicker-wrapper .modal-display{display:flex}.dateRangePicker-wrapper .modal-display .modal-dialog{box-shadow:none;display:flex}.dateRangePicker-wrapper .modal-content{border:0;border-radius:8px;box-shadow:0 0 10px 0 rgba(129,139,144,.5);display:flex;width:602px}.dateRangePicker-wrapper .modal-content .modal-footer .btn{width:auto}.dateRangePicker-wrapper .dateRangePickerModal{border-top-left-radius:5px;border-top-right-radius:5px;font-family:Roboto,Helvetica,Arial,sans-serif;overflow:visible;z-index:3000}@media screen and (min-width:576px){.dateRangePicker-wrapper .dateRangePickerModal{min-width:600px}}.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single,.dateRangePicker-wrapper .dateRangePickerModal.mobile{min-width:300px}.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single:after,.dateRangePicker-wrapper .dateRangePickerModal.dateRangePicker-single:before,.dateRangePicker-wrapper .dateRangePickerModal.mobile:after,.dateRangePicker-wrapper .dateRangePickerModal.mobile:before{border-bottom-color:#fff}.dateRangePicker-wrapper .dateRangePickerModal.is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.dateRangePicker-wrapper .dateRangePickerModal .btn,.dateRangePicker-wrapper .dateRangePickerModal .btn.btn-link{min-width:60px;width:60px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs{background-color:#6e777c;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff;font-size:16px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs>.col{min-width:270px;padding:.5rem 15px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon i.material-icons{top:0}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .input-with-icon span{line-height:1}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control::-moz-placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePickerModal .form-inputs .form-control::placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePickerModal .row-1s .col__mobile{border-top:1px dotted #ccc;margin-top:1rem}.dateRangePicker-wrapper .dateRangePickerModal:not(.mobile) .form-inputs>div:nth-child(2),.dateRangePicker-wrapper .dateRangePickerModal:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}.dateRangePicker-wrapper .dateRangePicker{background:#fff;border-radius:9px;box-shadow:0 0 10px 0 rgba(129,139,144,.5);font-family:Roboto,Helvetica,Arial,sans-serif;overflow:visible;position:absolute;top:88px;z-index:3000}@media screen and (min-width:576px){.dateRangePicker-wrapper .dateRangePicker{min-width:600px}}.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single,.dateRangePicker-wrapper .dateRangePicker.mobile{min-width:300px}.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single:after,.dateRangePicker-wrapper .dateRangePicker.dateRangePicker-single:before,.dateRangePicker-wrapper .dateRangePicker.mobile:after,.dateRangePicker-wrapper .dateRangePicker.mobile:before{border-bottom-color:#fff}.dateRangePicker-wrapper .dateRangePicker:after,.dateRangePicker-wrapper .dateRangePicker:before{border-bottom:10px solid #6e777c;border-left:10px solid transparent;border-right:10px solid transparent;content:\"\";height:0;position:absolute;top:-10px;width:0}.dateRangePicker-wrapper .dateRangePicker.open-left{left:0}.dateRangePicker-wrapper .dateRangePicker.open-left:before{left:10px}.dateRangePicker-wrapper .dateRangePicker.open-left:after{display:none}.dateRangePicker-wrapper .dateRangePicker.open-right{right:0}.dateRangePicker-wrapper .dateRangePicker.open-right:before{display:none}.dateRangePicker-wrapper .dateRangePicker.open-right:after{right:10px}.dateRangePicker-wrapper .dateRangePicker.is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.dateRangePicker-wrapper .dateRangePicker .btn,.dateRangePicker-wrapper .dateRangePicker .btn.btn-link{min-width:auto;width:auto}.dateRangePicker-wrapper .dateRangePicker .form-inputs{background-color:#6e777c;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff;font-size:16px}.dateRangePicker-wrapper .dateRangePicker .form-inputs>.col{min-width:270px;padding:.5rem 15px}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon i.material-icons{top:0}.dateRangePicker-wrapper .dateRangePicker .form-inputs .input-with-icon span{line-height:1}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control::-moz-placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePicker .form-inputs .form-control::placeholder{color:#fff}.dateRangePicker-wrapper .dateRangePicker .row-calendars .col__mobile{border-top:1px dotted #ccc;margin-top:1rem}.dateRangePicker-wrapper .dateRangePicker:not(.mobile) .form-inputs>div:nth-child(2),.dateRangePicker-wrapper .dateRangePicker:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}.dateRangePicker-wrapper i.material-icons{position:relative;top:2px}"]
},] }
];
DateRangePickerComponent.ctorParameters = function () { return []; };
DateRangePickerComponent.propDecorators = {
options: [{ type: core.Input }],
controlName: [{ type: core.Input }],
instanceId: [{ type: core.Input }],
parentFormGroup: [{ type: core.Input }],
fromDate: [{ type: core.Input }],
toDate: [{ type: core.Input }],
datepickerReset: [{ type: core.Output }],
rangeSelected: [{ type: core.Output }],
handleClick: [{ type: core.HostListener, args: ['document:click', ['$event'],] }]
};
var moment$2 = momentNs__namespace;
var FormatMomentDatePipe = /** @class */ (function () {
function FormatMomentDatePipe() {
}
FormatMomentDatePipe.prototype.transform = function (value, format) {
var valueToFormat = value;
if (valueToFormat && !momentNs.isMoment(valueToFormat)) {
valueToFormat = moment$2(valueToFormat);
}
return valueToFormat ? valueToFormat.format(format) : '';
};
return FormatMomentDatePipe;
}());
FormatMomentDatePipe.decorators = [
{ type: core.Pipe, args: [{
name: 'formatMomentDate'
},] }
];
var moment$3 = momentNs__namespace;
var ManualInputsComponent = /** @class */ (function () {
function ManualInputsComponent() {
this.fromDate = null;
this.toDate = null;
this.dateFromInput = new core.EventEmitter();
}
ManualInputsComponent.prototype.ngOnInit = function () {
};
ManualInputsComponent.prototype.setDateFromInput = function (event, isLeft) {
if (isLeft === void 0) { isLeft = false; }
this.dateFromInput.emit({ event: event, isLeft: isLeft });
};
return ManualInputsComponent;
}());
ManualInputsComponent.decorators = [
{ type: core.Component, args: [{
encapsulation: core.ViewEncapsulation.Emulated,
selector: 'manual-inputs',
template: "<ng-container *ngIf=\"!isMobile\">\n\n\t<div class=\"row form-inputs mb-0\" *ngIf=\"!options.singleCalendar\">\n\t\t<div class=\"col\">\n\t\t\t<div *ngIf=\"options.icons !== 'default'\">\n\t\t\t\t<div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material' }\">\n\t\t\t\t\t<i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n\t\t\t\t\t<i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n\t\t\t\t\t<span *ngIf=\"fromDate\">From: </span>\n\t\t\t\t\t<input class=\"form-control\" [ngModel]=\"fromDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event, true)\" type=\"text\" name=\"daterangepicker_start\" [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Select From Date\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\n\t\t\t<input *ngIf=\"options.icons === 'default'\" class=\"form-control\" [ngModel]=\"fromDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event, true)\" type=\"text\" name=\"daterangepicker_start\" [ngModelOptions]=\"{standalone: true}\" placeholder=\"Select From Date\" />\n\t\t</div>\n\t\n\t\t<div class=\"col\">\n\t\t\t<div *ngIf=\"options.icons !== 'default'\">\n\t\t\t\t\t<div [ngClass]=\"{ 'd-flex align-items-center input-with-icon': true, 'material': options.icons === 'material' }\">\n\t\t\t\t\t\t<i *ngIf=\"options.icons === 'material'\" class=\"material-icons\">event</i>\n\t\t\t\t\t\t<i *ngIf=\"options.icons === 'font-awesome'\" class=\"far fa-calendar-alt\"></i>\n\t\t\t\t\t\t<span *ngIf=\"toDate\">To: </span>\n\t\t\t\t\t\t<input class=\"form-control\" [ngModel]=\"toDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event)\" type=\"text\" name=\"daterangepicker_end\" [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Select To Date\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\n\t\t\t<input *ngIf=\"options.icons === 'default'\" class=\"form-control\" [ngModel]=\"toDate | formatMomentDate: options.format\" (blur)=\"setDateFromInput($event)\" name=\"daterangepicker_end\" [ngModelOptions]=\"{standalone: true}\" />\n\t\t</div>\n\t</div>\n</ng-container>",
styles: [".is-chrome .form-inputs .input-with-icon span{position:relative;top:1px}.form-inputs{background-color:#6e777c;border-top-left-radius:8px;border-top-right-radius:8px;color:#fff;font-size:16px}.form-inputs>.col{min-width:270px;padding:.5rem 15px}.form-inputs .input-with-icon{align-content:flex-start;align-items:center!important;display:flex}.form-inputs .input-with-icon i{color:#fff;margin-right:.5rem}.form-inputs .input-with-icon i.material-icons{top:0}.form-inputs .input-with-icon span{line-height:1}.form-inputs .form-control{background:none;border:0;color:#fff;display:inline-block;padding:0;width:150px}.form-inputs .form-control::-moz-placeholder{color:#fff}.form-inputs .form-control::placeholder{color:#fff}:not(.mobile) .form-inputs>div:nth-child(2),:not(.mobile) .row-calendars>div:nth-child(2){border-left:2px solid #c6d1d6}"]
},] }
];
ManualInputsComponent.ctorParameters = function () { return []; };
ManualInputsComponent.propDecorators = {
options: [{ type: core.Input }],
fromDate: [{ type: core.Input }],
toDate: [{ type: core.Input }],
isMobile: [{ type: core.Input }],
dateFromInput: [{ type: core.Output }]
};
var PredefinedDateRangesComponent = /** @class */ (function () {
function PredefinedDateRangesComponent() {
this.closeEvent = new core.EventEmitter();
this.resetEvent = new core.EventEmitter();
this.applyEvent = new core.EventEmitter();
this.predefinedRange = new core.EventEmitter();
}
PredefinedDateRangesComponent.prototype.ngOnInit = function () {
};
PredefinedDateRangesComponent.prototype.applyPredefinedRange = function (event, definedDateRange) {
this.predefinedRange.emit({ event: event, definedDateRange: definedDateRange });
};
PredefinedDateRangesComponent.prototype.close = function (event) {
this.closeEvent.emit(event);
event.stopPropagation();
};
PredefinedDateRangesComponent.prototype.reset = function (event) {
this.resetEvent.emit(event);
event.stopPropagation();
};
PredefinedDateRangesComponent.prototype.apply = function (event) {
this.applyEvent.emit(event);
event.stopPropagation();
};
return PredefinedDateRangesComponent;
}());
PredefinedDateRangesComponent.decorators = [
{ type: core.Component, args: [{
encapsulation: core.ViewEncapsulation.Emulated,
selector: 'predefined-date-ranges',
template: "<div class=\"row text-center my-3\">\n\t<div class=\"col\">\n\t\t<div class=\"row mb-2\" *ngIf=\"!options.singleCalendar && options.preDefinedRanges && options.preDefinedRanges.length > 0\">\n\t\t\t<div class=\"col\">\n\t\t\t\t<button type=\"button\" *ngFor=\"let range of options.preDefinedRanges\" class=\"btn btn-link\" (click)=\"applyPredefinedRange($event, range)\">{{ range.name }}</button>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!options.modal\">\n\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"close($event)\">Close</button>\n\t\t\t<button type=\"button\" class=\"btn btn-outline-secondary btn-sm ml-3\" (click)=\"reset($event)\" *ngIf=\"range && options.showResetButton\">Reset</button>\n\t\t\t<button type=\"button\" class=\"btn btn-primary btn-sm ml-3\" [disabled]=\"!enableApplyButton\" (click)=\"apply($event)\" *ngIf=\"!options.autoApply\">Apply</button>\n\t\t</ng-container>\n\t</div>\n</div>",
styles: [".btn,.btn.btn-link{min-width:60px}"]
},] }
];
PredefinedDateRangesComponent.ctorParameters = function () { return []; };
PredefinedDateRangesComponent.propDecorators = {
options: [{ type: core.Input }],
range: [{ type: core.Input }],
enableApplyButton: [{ type: core.Input }],
closeEvent: [{ type: core.Output }],
resetEvent: [{ type: core.Output }],
applyEvent: [{ type: core.Output }],
predefinedRange: [{ type: core.Output }]
};
var declarations = [
CalendarComponent,
DateRangePickerComponent,
FormatMomentDatePipe,
ManualInputsComponent,
PredefinedDateRangesComponent
];
var NgxDateRangeModule = /** @class */ (function () {
function NgxDateRangeModule() {
}
return NgxDateRangeModule;
}());
NgxDateRangeModule.decorators = [
{ type: core.NgModule, args: [{
declarations: __spread(declarations),
exports: __spread(declarations),
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
],
},] }
];
/**
* Generated bundle index. Do not edit.
*/
exports.CalendarComponent = CalendarComponent;
exports.DateRangePickerComponent = DateRangePickerComponent;
exports.NgxDateRangeModule = NgxDateRangeModule;
exports.ɵa = FormatMomentDatePipe;
exports.ɵb = ManualInputsComponent;
exports.ɵc = PredefinedDateRangesComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-daterange.umd.js.map