@indice/ng-components 0.2.85 → 0.2.89
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/README.md +4 -4
- package/bundles/indice-ng-components.umd.js +81 -48
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/date-picker/date-picker.component.js +68 -34
- package/esm2015/lib/controls/kpi-tile/kpi-tile.component.js +1 -1
- package/esm2015/lib/controls/list-view/list-column.component.js +1 -1
- package/esm2015/lib/controls/list-view/list-view-empty-state.component.js +2 -2
- package/esm2015/lib/controls/skeleton-loader/skeleton-loader.component.js +1 -1
- package/esm2015/lib/controls/toggle/toggle.component.js +2 -2
- package/esm2015/lib/layouts/shell/shell-header/shell-header.component.js +2 -2
- package/esm2015/lib/layouts/views/view-layout/view-layout.component.js +12 -12
- package/esm2015/lib/services/toaster.service.js +1 -1
- package/fesm2015/indice-ng-components.js +81 -47
- 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
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# INDICE ANGULAR Components
|
|
2
|
-
|
|
3
|
-
Indice common components for Angular 2+
|
|
4
|
-
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
|
|
1
|
+
# INDICE ANGULAR Components
|
|
2
|
+
|
|
3
|
+
Indice common components for Angular 2+
|
|
4
|
+
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
|
|
@@ -1085,7 +1085,7 @@
|
|
|
1085
1085
|
ListViewEmptyStateComponent.decorators = [
|
|
1086
1086
|
{ type: i0.Component, args: [{
|
|
1087
1087
|
selector: 'lib-list-view-empty-state',
|
|
1088
|
-
template: "<div class=\"p-20\">\n <div class=\"text-center p-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n </svg>\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n <p class=\"mt-1 text-sm text-gray-500\">\n {{subTitle}}\n </p>\n <div class=\"mt-6\" *ngIf=\"false\">\n <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n <!-- Heroicon name: solid/plus -->\n <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n </svg>\n {{newItemLabel}}\n </button>\n </div>\n </div>\n</div>\n"
|
|
1088
|
+
template: "<div class=\"p-20\">\r\n <div class=\"text-center p-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n </svg>\r\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n <p class=\"mt-1 text-sm text-gray-500\">\r\n {{subTitle}}\r\n </p>\r\n <div class=\"mt-6\" *ngIf=\"false\">\r\n <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n <!-- Heroicon name: solid/plus -->\r\n <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n </svg>\r\n {{newItemLabel}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n"
|
|
1089
1089
|
},] }
|
|
1090
1090
|
];
|
|
1091
1091
|
ListViewEmptyStateComponent.ctorParameters = function () { return []; };
|
|
@@ -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\"\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\"\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\">\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-white text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n [class]=\"year.selected ? 'bg-gray-700 text-white' : '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\"\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-white text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n [class]=\"date.selected ? 'bg-gray-700 text-white' : '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,
|
|
@@ -1552,7 +1586,7 @@
|
|
|
1552
1586
|
ToggleComponent.decorators = [
|
|
1553
1587
|
{ type: i0.Component, args: [{
|
|
1554
1588
|
selector: 'lib-toggle',
|
|
1555
|
-
template: "<button type=\"button\"\r\n [ngClass]=\"value ? '
|
|
1589
|
+
template: "<button type=\"button\"\r\n [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n class=\"toggle-button\"\r\n role=\"switch\"\r\n aria-checked=\"false\"\r\n aria-labelledby=\"isPrivate\"\r\n (click)=\"changeValue()\"\r\n (blur)=\"onBlur($event)\"\r\n value=\"{{value}}\"\r\n [disabled]=\"disabled\"\r\n [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n <span aria-hidden=\"true\"\r\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n class=\"toggle-span\"></span>\r\n</button>",
|
|
1556
1590
|
providers: [
|
|
1557
1591
|
{
|
|
1558
1592
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
@@ -1997,7 +2031,7 @@
|
|
|
1997
2031
|
{ type: i0.Component, args: [{
|
|
1998
2032
|
// tslint:disable-next-line:component-selector
|
|
1999
2033
|
selector: 'lib-shell-header',
|
|
2000
|
-
template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div [class]=\"border ? 'shell-header-border' : ''\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n <div>\r\n <a href=\"#\"\r\n [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-link-container\">\r\n <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n <a href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [routerLinkActive]=\"['nav-link-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n class=\"nav-link\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"shell-header-md-visible\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n\r\n <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n <a class=\"shell-header-menu-rounded-button\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n [attr.href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n <span class=\"sr-only\">{{ link.text }}</span>\r\n <i *ngIf=\"link.icon\"\r\n [class]=\"link.icon\"></i>\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Profile dropdown -->\r\n <div class=\"ml-2 relative\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n *ngIf=\"profileMenuVisible\">\r\n <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n <div *ngIf=\"user && showUserNameOnHeader\"\r\n class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n <button type=\"button\"\r\n *ngIf=\"user\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin(null)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n\r\n <div *ngIf=\"userMenuExpanded\"\r\n [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n role=\"menu\"\r\n aria-orientation=\"vertical\"\r\n aria-labelledby=\"user-menu\">\r\n <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n <ng-container *ngFor=\"let link of links.profile | async\">\r\n <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-profile\">\r\n {{ link.text }}\r\n </a
|
|
2034
|
+
template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div [class]=\"border ? 'shell-header-border' : ''\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n <div>\r\n <a href=\"#\"\r\n [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-link-container\">\r\n <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n <a href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [routerLinkActive]=\"['nav-link-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n class=\"nav-link\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"shell-header-md-visible\">\r\n <div class=\"shell-header-links-no-grow-container\">\r\n\r\n <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n <a class=\"shell-header-menu-rounded-button\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n [attr.href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n <span class=\"sr-only\">{{ link.text }}</span>\r\n <i *ngIf=\"link.icon\"\r\n [class]=\"link.icon\"></i>\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Profile dropdown -->\r\n <div class=\"ml-2 relative\"\r\n (clickOutside)=\"onClickOutside($event)\"\r\n *ngIf=\"profileMenuVisible\">\r\n <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n <div *ngIf=\"user && showUserNameOnHeader\"\r\n class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n <button type=\"button\"\r\n *ngIf=\"user\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin(null)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n\r\n <div *ngIf=\"userMenuExpanded\"\r\n [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n role=\"menu\"\r\n aria-orientation=\"vertical\"\r\n aria-labelledby=\"user-menu\">\r\n <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n <ng-container *ngFor=\"let link of links.profile | async\">\r\n <!-- <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-profile\">\r\n {{ link.text }}\r\n </a> -->\r\n <a [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-profile-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\" class=\"nav-link-profile\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-button-container\">\r\n <!-- Mobile menu button -->\r\n <button type=\"button\"\r\n (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n class=\"mobile-menu-button\"\r\n aria-controls=\"mobile-menu\"\r\n [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n <span class=\"sr-only\">Open main menu</span>\r\n <!--Heroicon name: outline/menu Menu open: \"hidden\", Menu closed: \"block\"-->\r\n <svg class=\"block h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n <svg class=\"hidden h-6 w-6\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Mobile menu, show/hide based on menu state. -->\r\n <div class=\"mobile-menu-container\"\r\n *ngIf=\"mobileMenuExpanded\"\r\n id=\"mobile-menu\">\r\n <div class=\"mobile-menu-link-container\">\r\n <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n <a *ngIf=\"!link.external\" [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-mobile-active']\" [routerLinkActiveOptions]=\"{ exact: link.exact }\" class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user\">\r\n <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n </a>\r\n </ng-container>\r\n </div>\r\n <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n <div class=\"mobile-menu-user-info-container-inner\">\r\n <div class=\"flex-shrink-0\">\r\n <span class=\"mobile-menu-avatar-container\">\r\n <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n </span>\r\n </div>\r\n <div class=\"ml-3\">\r\n <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n </div>\r\n <button class=\"mobile-menu-rounded-button\">\r\n <span class=\"sr-only\">View notifications</span>\r\n <!-- Heroicon name: outline/bell -->\r\n <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <div class=\"mobile-menu-link-container\">\r\n <ng-container *ngFor=\"let link of links.profile | async\">\r\n <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n <a [routerLink]=\"link.path\"\r\n [routerLinkActive]=\"['nav-link-mobile-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n <!-- <a href=\"#\" class=\"block px-3 py-2 rounded-sm text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n </div>\r\n </div>\r\n </div>\r\n</nav>\r\n"
|
|
2001
2035
|
},] }
|
|
2002
2036
|
];
|
|
2003
2037
|
ShellHeaderComponent.ctorParameters = function () { return [
|
|
@@ -2050,7 +2084,16 @@
|
|
|
2050
2084
|
// tslint:disable-next-line:no-output-on-prefix
|
|
2051
2085
|
this.onSearch = new i0.EventEmitter();
|
|
2052
2086
|
}
|
|
2053
|
-
ViewLayoutComponent.prototype.ngOnInit = function () {
|
|
2087
|
+
ViewLayoutComponent.prototype.ngOnInit = function () {
|
|
2088
|
+
var _a;
|
|
2089
|
+
rxjs.fromEvent((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement, 'keyup').pipe(operators.map(function (event) {
|
|
2090
|
+
return event.target.value; // Get input value.
|
|
2091
|
+
}), operators.filter(function (inputValue) { return inputValue.length >= 3 || inputValue.length === 0; }),
|
|
2092
|
+
// If character length greater than minimumSearchCharacters setting.
|
|
2093
|
+
operators.debounceTime(1000), // Time in milliseconds between key events.
|
|
2094
|
+
operators.distinctUntilChanged() // If previous query is different from current.
|
|
2095
|
+
).subscribe();
|
|
2096
|
+
};
|
|
2054
2097
|
ViewLayoutComponent.prototype.emitActionClick = function (action) {
|
|
2055
2098
|
this.onAction.emit(action);
|
|
2056
2099
|
};
|
|
@@ -2067,18 +2110,8 @@
|
|
|
2067
2110
|
this.onSearch.emit(text);
|
|
2068
2111
|
};
|
|
2069
2112
|
ViewLayoutComponent.prototype.searchActionType = function (text) {
|
|
2070
|
-
var _this = this;
|
|
2071
2113
|
var _a;
|
|
2072
|
-
|
|
2073
|
-
return event.target.value; // Get input value.
|
|
2074
|
-
}), operators.filter(function (inputValue) { return inputValue.length >= 3 || inputValue.length === 0; }),
|
|
2075
|
-
// If character length greater than minimumSearchCharacters setting.
|
|
2076
|
-
operators.debounceTime(1000), // Time in milliseconds between key events.
|
|
2077
|
-
operators.distinctUntilChanged() // If previous query is different from current.
|
|
2078
|
-
).subscribe(function (_) {
|
|
2079
|
-
var _a;
|
|
2080
|
-
_this.onSearch.emit((_a = _this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement.value);
|
|
2081
|
-
});
|
|
2114
|
+
this.onSearch.emit((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement.value);
|
|
2082
2115
|
};
|
|
2083
2116
|
ViewLayoutComponent.prototype.handleClear = function (event) {
|
|
2084
2117
|
var _a;
|