@indice/ng-components 0.2.88 → 0.2.92
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/bundles/indice-ng-components.umd.js +67 -33
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/date-picker/date-picker.component.js +68 -34
- package/fesm2015/indice-ng-components.js +67 -33
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/indice-ng-components.metadata.json +1 -1
- package/lib/controls/date-picker/date-picker.component.d.ts +10 -8
- package/package.json +1 -1
|
@@ -1175,7 +1175,7 @@
|
|
|
1175
1175
|
// freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
|
|
1176
1176
|
var DatepickerComponent = /** @class */ (function () {
|
|
1177
1177
|
function DatepickerComponent() {
|
|
1178
|
-
this.readonly =
|
|
1178
|
+
this.readonly = false;
|
|
1179
1179
|
this.disabled = false;
|
|
1180
1180
|
this.displayFormat = 'dd/MM/yyyy';
|
|
1181
1181
|
this.placeholder = '';
|
|
@@ -1224,15 +1224,25 @@
|
|
|
1224
1224
|
this.showCalendarYears = this.paginate(this.calendarYears, 1);
|
|
1225
1225
|
this.calcDays();
|
|
1226
1226
|
};
|
|
1227
|
-
DatepickerComponent.prototype.
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1227
|
+
DatepickerComponent.prototype.writeValue = function (obj) {
|
|
1228
|
+
if (obj) {
|
|
1229
|
+
this.value = new Date(obj);
|
|
1230
|
+
this.month = this.value.getMonth();
|
|
1231
|
+
this.year = this.value.getFullYear();
|
|
1231
1232
|
}
|
|
1232
|
-
var d = new Date(year !== null && year !== void 0 ? year : this.year, this.month, day !== null && day !== void 0 ? day : (_a = this.value) === null || _a === void 0 ? void 0 : _a.getDay());
|
|
1233
|
-
return date1.toDateString() === d.toDateString();
|
|
1234
1233
|
};
|
|
1235
|
-
|
|
1234
|
+
DatepickerComponent.prototype.registerOnChange = function (fn) {
|
|
1235
|
+
this.onChange$ = fn;
|
|
1236
|
+
};
|
|
1237
|
+
DatepickerComponent.prototype.registerOnTouched = function (fn) {
|
|
1238
|
+
this.onTouched$ = fn;
|
|
1239
|
+
};
|
|
1240
|
+
DatepickerComponent.prototype.onBlur = function (event) {
|
|
1241
|
+
if (this.onTouched$) {
|
|
1242
|
+
this.onTouched$();
|
|
1243
|
+
}
|
|
1244
|
+
this.getDateFromInput();
|
|
1245
|
+
};
|
|
1236
1246
|
DatepickerComponent.prototype.selectDateValue = function (date) {
|
|
1237
1247
|
// This should be in UTC
|
|
1238
1248
|
var selectedDate = new Date(this.year, this.month, date.day, 3, 0, 0, 0);
|
|
@@ -1248,7 +1258,9 @@
|
|
|
1248
1258
|
this.showCalendar = false;
|
|
1249
1259
|
};
|
|
1250
1260
|
DatepickerComponent.prototype.selectYearValue = function (year) {
|
|
1251
|
-
var
|
|
1261
|
+
var _a, _b, _c;
|
|
1262
|
+
// This should be in UTC
|
|
1263
|
+
var selectedDate = new Date(year.year, (_a = this.month) !== null && _a !== void 0 ? _a : 1, (_c = (_b = this.calendarDates) === null || _b === void 0 ? void 0 : _b.find(function (x) { return x.selected == true; }).day) !== null && _c !== void 0 ? _c : 1, 3, 0, 0, 0);
|
|
1252
1264
|
this.year = year.year;
|
|
1253
1265
|
this.value = selectedDate;
|
|
1254
1266
|
this.valueChange.emit(this.value);
|
|
@@ -1261,6 +1273,7 @@
|
|
|
1261
1273
|
}
|
|
1262
1274
|
this.showYears = false;
|
|
1263
1275
|
this.showCalendar = true;
|
|
1276
|
+
this.calcDays();
|
|
1264
1277
|
};
|
|
1265
1278
|
DatepickerComponent.prototype.previousMonth = function () {
|
|
1266
1279
|
if (this.month !== 0) {
|
|
@@ -1298,24 +1311,38 @@
|
|
|
1298
1311
|
}
|
|
1299
1312
|
};
|
|
1300
1313
|
DatepickerComponent.prototype.nextYear = function () {
|
|
1301
|
-
this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage <= this.calendarYears.length / this.yearsPerPage
|
|
1314
|
+
this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage <= this.calendarYears.length / this.yearsPerPage
|
|
1315
|
+
? ++this.calendarYearPage
|
|
1316
|
+
: this.calendarYearPage);
|
|
1302
1317
|
this.calcDays();
|
|
1303
1318
|
if (this.onTouched$) {
|
|
1304
1319
|
this.onTouched$();
|
|
1305
1320
|
}
|
|
1306
1321
|
};
|
|
1322
|
+
DatepickerComponent.prototype.compareDates = function (date1, day, year) {
|
|
1323
|
+
var _a;
|
|
1324
|
+
if (!date1) {
|
|
1325
|
+
return false;
|
|
1326
|
+
}
|
|
1327
|
+
var d = new Date(year !== null && year !== void 0 ? year : this.year, this.month, day !== null && day !== void 0 ? day : (_a = this.value) === null || _a === void 0 ? void 0 : _a.getDay());
|
|
1328
|
+
return date1.toDateString() === d.toDateString();
|
|
1329
|
+
};
|
|
1330
|
+
;
|
|
1307
1331
|
DatepickerComponent.prototype.calcDays = function () {
|
|
1332
|
+
var _a;
|
|
1308
1333
|
var daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
|
|
1309
1334
|
// find where to start calendar day of week
|
|
1310
1335
|
var dayOfWeek = new Date(this.year, this.month).getDay();
|
|
1311
|
-
var blankdaysArray =
|
|
1336
|
+
var blankdaysArray = new Array();
|
|
1312
1337
|
for (var i = 1; i <= dayOfWeek; i++) {
|
|
1313
|
-
|
|
1338
|
+
// check if month is February
|
|
1339
|
+
blankdaysArray.push(this.month != 2 ? (32 - i) : (29 - i));
|
|
1340
|
+
blankdaysArray.reverse().sort();
|
|
1314
1341
|
}
|
|
1315
1342
|
var daysArray = [];
|
|
1316
1343
|
var today = new Date();
|
|
1317
1344
|
for (var i = 1; i <= daysInMonth; i++) {
|
|
1318
|
-
daysArray.push({ day: i, today: this.compareDates(today, i, null), selected: this.compareDates(this.value, i, null) });
|
|
1345
|
+
daysArray.push({ day: i, today: this.compareDates(today, i, null), selected: this.compareDates((_a = this.value) !== null && _a !== void 0 ? _a : today, i, null) });
|
|
1319
1346
|
}
|
|
1320
1347
|
var yearsArray = [];
|
|
1321
1348
|
for (var i_1 = 1950; i_1 <= today.getFullYear() + 2; i_1++) {
|
|
@@ -1333,42 +1360,49 @@
|
|
|
1333
1360
|
d.selected = _this.compareDates(_this.value, d, _this.year);
|
|
1334
1361
|
});
|
|
1335
1362
|
};
|
|
1336
|
-
DatepickerComponent.prototype.writeValue = function (obj) {
|
|
1337
|
-
if (obj) {
|
|
1338
|
-
this.value = new Date(obj);
|
|
1339
|
-
this.month = this.value.getMonth();
|
|
1340
|
-
this.year = this.value.getFullYear();
|
|
1341
|
-
}
|
|
1342
|
-
};
|
|
1343
|
-
DatepickerComponent.prototype.registerOnChange = function (fn) {
|
|
1344
|
-
this.onChange$ = fn;
|
|
1345
|
-
};
|
|
1346
|
-
DatepickerComponent.prototype.registerOnTouched = function (fn) {
|
|
1347
|
-
this.onTouched$ = fn;
|
|
1348
|
-
};
|
|
1349
|
-
DatepickerComponent.prototype.onBlur = function (event) {
|
|
1350
|
-
if (this.onTouched$) {
|
|
1351
|
-
this.onTouched$();
|
|
1352
|
-
}
|
|
1353
|
-
};
|
|
1354
1363
|
DatepickerComponent.prototype.paginate = function (array, page_number) {
|
|
1355
1364
|
return array.slice((page_number - 1) * this.yearsPerPage, page_number * this.yearsPerPage);
|
|
1356
1365
|
};
|
|
1366
|
+
DatepickerComponent.prototype.getDateFromInput = function () {
|
|
1367
|
+
var _a, _b;
|
|
1368
|
+
if (((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.nativeElement.value) !== '') {
|
|
1369
|
+
var dateParts = (_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.nativeElement.value.split("/");
|
|
1370
|
+
var dateInGrFormat = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], 3, 0, 0);
|
|
1371
|
+
if (dateInGrFormat.toString() !== 'Invalid Date') {
|
|
1372
|
+
this.writeValue(dateInGrFormat);
|
|
1373
|
+
this.calcDays();
|
|
1374
|
+
this.valueChange.emit(dateInGrFormat);
|
|
1375
|
+
}
|
|
1376
|
+
if (this.onChange$) {
|
|
1377
|
+
this.onChange$(this.value);
|
|
1378
|
+
}
|
|
1379
|
+
this.updateDays();
|
|
1380
|
+
if (this.onTouched$) {
|
|
1381
|
+
this.onTouched$();
|
|
1382
|
+
}
|
|
1383
|
+
}
|
|
1384
|
+
this.showCalendar = false;
|
|
1385
|
+
};
|
|
1357
1386
|
DatepickerComponent.prototype.openYears = function () {
|
|
1358
1387
|
this.showYears = !this.showYears;
|
|
1359
|
-
this.
|
|
1388
|
+
this.calendarYearPage = Math.ceil(this.calendarYears.map(function (x) { return x.year; }).indexOf(this.year) / this.yearsPerPage);
|
|
1389
|
+
this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage !== 0 ? this.calendarYearPage : 1);
|
|
1360
1390
|
this.calcDays();
|
|
1361
1391
|
};
|
|
1362
1392
|
DatepickerComponent.prototype.openCalendar = function () {
|
|
1363
1393
|
this.showCalendar = !this.showCalendar;
|
|
1364
1394
|
this.calcDays();
|
|
1365
1395
|
};
|
|
1396
|
+
DatepickerComponent.prototype.closeCalendar = function () {
|
|
1397
|
+
this.showCalendar = false;
|
|
1398
|
+
this.getDateFromInput();
|
|
1399
|
+
};
|
|
1366
1400
|
return DatepickerComponent;
|
|
1367
1401
|
}());
|
|
1368
1402
|
DatepickerComponent.decorators = [
|
|
1369
1403
|
{ type: i0.Component, args: [{
|
|
1370
1404
|
selector: 'lib-date-picker',
|
|
1371
|
-
template: "<div class=\"relative flex\">\r\n\r\n <input type=\"text\"\r\n #dateInput\r\n [readonly]=\"readonly\"\r\n name=\"dateInput\"\r\n (blur)=\"onBlur($event)\"\r\n id=\"dateInput\"\r\n [value]=\"value | date: displayFormat\"\r\n class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300 focus:border-0\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n <button class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n [disabled]=\"disabled\"\r\n (click)=\"openCalendar()\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n </button>\r\n\r\n <div *ngIf=\"showCalendar\"\r\n class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n style=\"height:18rem;min-width:16rem;\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div>\r\n <button class=\"text-lg font-bold text-gray-800\"
|
|
1405
|
+
template: "<div class=\"relative flex\"\r\n (clickOutside)=\"closeCalendar()\">\r\n\r\n <input type=\"text\"\r\n #dateInput\r\n [readonly]=\"readonly\"\r\n name=\"dateInput\"\r\n (blur)=\"onBlur($event)\"\r\n id=\"dateInput\"\r\n (focus)=\"showCalendar = false\"\r\n [value]=\"value | date: displayFormat\"\r\n class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300 focus:border-0\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n <button type=\"button\"\r\n class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n [disabled]=\"disabled\"\r\n (click)=\"openCalendar()\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n </button>\r\n\r\n <div *ngIf=\"showCalendar\"\r\n class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n style=\"height:18rem;min-width:16rem;\"\r\n name=\"calendar\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div>\r\n <button type=\"button\"\r\n (click)=\"openYears()\">\r\n <span class=\"text-lg font-bold text-gray-800\">\r\n {{monthNames[month]}}\r\n </span>\r\n <span class=\"ml-1 text-lg text-gray-600 font-normal\">\r\n {{year}}</span>\r\n </button>\r\n </div>\r\n <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n (click)=\"previousMonth();\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 19l-7-7 7-7\" />\r\n </svg>\r\n </button>\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n (click)=\"nextMonth()\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <ng-template #showYearsPickerTmpl>\r\n <div>\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n (click)=\"previousYear();\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 19l-7-7 7-7\" />\r\n </svg>\r\n </button>\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25 w-1/2\"\r\n (click)=\"nextYear()\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap mb-3 -mx-1\"\r\n *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n <div *ngFor=\"let day of dayNames\"\r\n class=\"text-gray-800 font-medium text-center text-sm uppercase\"\r\n style=\"width: 14.28%\">{{day}}</div>\r\n </div>\r\n\r\n <ng-template #showCalYearsTmpl>\r\n <div class=\"flex flex-wrap -mx-1 items-center\">\r\n <div *ngFor=\"let year of showCalendarYears\"\r\n style=\"width: 18.28%\"\r\n class=\"px-1 mb-1\">\r\n <div (click)=\"selectYearValue(year)\"\r\n class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n [class]=\"year.selected ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"flex flex-wrap -mx-1 items-center\"\r\n *ngIf=\"!showYears\">\r\n <div *ngFor=\"let blankday of blankDays\"\r\n style=\"width: 14.28%\"\r\n class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\r\n <div *ngFor=\"let date of calendarDates\"\r\n style=\"width: 14.28%\"\r\n class=\"px-1 mb-1\">\r\n <div (click)=\"selectDateValue(date)\"\r\n class=\"cursor-pointer text-center hover:text-blue-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n [class]=\"date.selected ? 'bg-gray-700 text-blue-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>",
|
|
1372
1406
|
providers: [
|
|
1373
1407
|
{
|
|
1374
1408
|
provide: forms.NG_VALUE_ACCESSOR,
|