@colijnit/corecomponents_v12 259.1.5 → 259.1.6

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.
Files changed (31) hide show
  1. package/bundles/colijnit-corecomponents_v12.umd.js +256 -86
  2. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  3. package/colijnit-corecomponents_v12.d.ts +19 -18
  4. package/colijnit-corecomponents_v12.metadata.json +1 -1
  5. package/esm2015/colijnit-corecomponents_v12.js +20 -19
  6. package/esm2015/lib/components/base-input-time/base-input-time-directive.js +25 -0
  7. package/esm2015/lib/components/calendar/calendar-template.component.js +30 -31
  8. package/esm2015/lib/components/filter-item/filter-item.component.js +58 -15
  9. package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +9 -8
  10. package/esm2015/lib/components/input-date-range-picker/input-date-range-picker.component.js +1 -1
  11. package/esm2015/lib/components/input-text/input-text.component.js +2 -1
  12. package/esm2015/lib/components/input-time/input-time.component.js +74 -0
  13. package/esm2015/lib/components/input-time/input-time.module.js +24 -0
  14. package/esm2015/lib/components/list-of-values/list-of-values-popup.component.js +8 -2
  15. package/esm2015/lib/components/list-of-values/list-of-values.component.js +9 -4
  16. package/esm2015/lib/core/enum/core-components-icon.enum.js +2 -1
  17. package/esm2015/lib/core/model/core-components-icon-svg.js +2 -1
  18. package/esm2015/public-api.js +3 -1
  19. package/fesm2015/colijnit-corecomponents_v12.js +220 -55
  20. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  21. package/lib/components/base-input-time/base-input-time-directive.d.ts +14 -0
  22. package/lib/components/calendar/calendar-template.component.d.ts +6 -6
  23. package/lib/components/filter-item/filter-item.component.d.ts +3 -1
  24. package/lib/components/input-time/input-time.component.d.ts +8 -0
  25. package/lib/components/input-time/input-time.module.d.ts +2 -0
  26. package/lib/components/list-of-values/list-of-values-popup.component.d.ts +4 -1
  27. package/lib/components/list-of-values/list-of-values.component.d.ts +4 -1
  28. package/lib/components/list-of-values/style/_layout.scss +1 -0
  29. package/lib/core/enum/core-components-icon.enum.d.ts +1 -0
  30. package/package.json +1 -1
  31. package/public-api.d.ts +2 -0
@@ -1558,6 +1558,7 @@
1558
1558
  CoreComponentsIcon["Orderpicking"] = "orderpicking";
1559
1559
  CoreComponentsIcon["OutgoingStorage"] = "outgoing_storage";
1560
1560
  CoreComponentsIcon["OverBooking"] = "over_booking";
1561
+ CoreComponentsIcon["ParagraphSolid"] = "paragraph_solid";
1561
1562
  CoreComponentsIcon["PauseCircle"] = "pause_circle";
1562
1563
  CoreComponentsIcon["PencilRoundOpen"] = "pencil_round_open";
1563
1564
  CoreComponentsIcon["PenToSquareSolid"] = "pen_to_square_solid";
@@ -1861,6 +1862,7 @@
1861
1862
  "orderpicking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M16.43,40.17c-.12-.16-2.92-4-1.53-8.21,1.33-4.08,6.25-9.69,6.46-9.84l.72-.55,2.28,2.83-1.45,1.17-1.13-1.39c-1.34,1.14-4.23,5.68-5.1,8.36C15.59,35.88,17.9,39,17.93,39l-1.5,1.13Z\" fill=\"#484f60\"/><path d=\"M27.86,41l-1.74-.66A17.68,17.68,0,0,0,27,32.56,63.51,63.51,0,0,0,25.5,25.1l-1.29-.38,1.27-4.35,1.05,2.26a81.55,81.55,0,0,1,2.28,9.64A19,19,0,0,1,27.86,41Z\" fill=\"#484f60\"/><path d=\"M34,39.94l-1.67-.83s1.9-3.88,1-6.39a36.83,36.83,0,0,0-4.84-8.51l-1.37,1.42-1.34-1.29,2.71-2.82.67.69c.2.2,4.84,6.82,5.93,9.89,1.16,3.25-1,7.65-1.1,7.84Z\" fill=\"#484f60\"/><rect x=\"22.91\" y=\"24.41\" width=\"4.48\" height=\"1.17\" fill=\"#484f60\"/><polygon points=\"23.52 9 23.52 20.93 23.93 21.44 25.28 16.78 26.7 19.85 26.7 9 23.52 9\" fill=\"#484f60\"/></svg>",
1862
1863
  "outgoing_storage": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"12.36\" width=\"2.93\" height=\"25.61\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"14.39\" y=\"30.65\" width=\"11.22\" height=\"1.46\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"14.39\" y=\"21.87\" width=\"9.11\" height=\"1.46\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"27.07\" y=\"29.46\" width=\"2.93\" height=\"8.51\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"27.07\" y=\"12.36\" width=\"2.93\" height=\"8.51\" fill=\"#484f60\" opacity=\"0.5\"/><rect x=\"14.39\" y=\"13.09\" width=\"11.22\" height=\"1.46\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"40 25.16 32.62 17.79 32.62 22.38 25 22.38 25 27.96 32.62 27.96 32.62 32.55 40 25.16\" fill=\"#484f60\"/></svg>",
1863
1864
  "over_booking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"31.66 31 27.76 27.1 27.76 29.73 25.86 29.74 23.34 29.73 23.34 32.27 24.59 32.27 27.76 32.26 27.76 34.9 31.66 31\" fill=\"#484f60\"/><rect x=\"12.27\" y=\"30.23\" width=\"2.39\" height=\"4.77\" fill=\"#484f60\" opacity=\"0.75\"/><rect x=\"15.34\" y=\"30.23\" width=\"2.39\" height=\"4.77\" fill=\"#484f60\" opacity=\"0.75\"/><polygon points=\"21.34 27.73 22.5 27.73 22.5 23.41 15 20 7.5 23.41 7.5 35 10.91 35 10.91 28.86 19.09 28.86 19.09 35 22.5 35 22.5 34.27 21.34 34.27 21.34 27.73\" fill=\"#484f60\" opacity=\"0.75\"/><rect x=\"38.86\" y=\"28.64\" width=\"3.18\" height=\"6.36\" fill=\"#484f60\"/><polygon points=\"32.5 19.54 32.5 29.01 34.49 31 32.5 32.99 32.5 35 37.05 35 37.05 26.82 42.5 26.82 42.5 15 32.5 19.54\" fill=\"#484f60\"/></svg>",
1865
+ "paragraph_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M192 32l64 0 160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0 0 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-352-32 0 0 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96-32 0c-88.4 0-160-71.6-160-160s71.6-160 160-160z\"/></svg>",
1864
1866
  "pause_circle": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><g><g><path fill=\"#484F5F\" d=\"M23.5,18.5v14h-3.1v-14H23.5z M30.6,18.5v14h-3.1v-14H30.6z\"/></g><path fill=\"#484F5F\" d=\"M25.5,39.5c-7.7,0-14-6.3-14-14s6.3-14,14-14s14,6.3,14,14S33.2,39.5,25.5,39.5 M25.5,40.5c8.3,0,15-6.7,15-15c0-8.3-6.7-15-15-15c-8.3,0-15,6.7-15,15C10.5,33.8,17.2,40.5,25.5,40.5L25.5,40.5z\"/></g></svg>",
1865
1867
  "pencil_round_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><rect x=\"290.8\" y=\"419.4\" width=\"10.4\" height=\"0.49\" transform=\"translate(-482.6 -62.8) rotate(-45)\" fill=\"#fff\"/><rect x=\"292.6\" y=\"420\" width=\"10.4\" height=\"3.1\" transform=\"translate(-483.4 -60.6) rotate(-45)\" fill=\"#fff\"/><path d=\"M305.8,414.7l-2.1-2.1a0.8,0.8,0,0,0-1.1,0l-0.8.8,3.1,3.1,0.8-.8A0.8,0.8,0,0,0,305.8,414.7Z\" transform=\"translate(-272.5 -395)\" fill=\"#fff\"/><rect x=\"301.6\" y=\"414\" width=\"1.3\" height=\"4.44\" transform=\"translate(-478.3 -59.3) rotate(-45)\" fill=\"#fff\"/><polygon points=\"18.8 29.3 17.5 33.1 17.9 33.5 21.7 32.2 18.8 29.3\" fill=\"#fff\"/><path d=\"M298,436a15.5,15.5,0,1,1,15.5-15.5A15.5,15.5,0,0,1,298,436Zm0-30a14.5,14.5,0,1,0,14.5,14.5A14.5,14.5,0,0,0,298,406Z\" transform=\"translate(-272.5 -395)\" fill=\"#fff\"/></svg>",
1866
1868
  "pen_to_square_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M490.3 40.4C512.2 62.27 512.2 97.73 490.3 119.6L460.3 149.7L362.3 51.72L392.4 21.66C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7L339.7 74.34L437.7 172.3L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2L159.6 382.8C150.1 385.6 141.5 383.4 135 376.1C128.6 370.5 126.4 361 129.2 352.4L158.8 263.6C161.6 255.3 166.2 247.8 172.4 241.7V241.7zM192 63.1C209.7 63.1 224 78.33 224 95.1C224 113.7 209.7 127.1 192 127.1H96C78.33 127.1 64 142.3 64 159.1V416C64 433.7 78.33 448 96 448H352C369.7 448 384 433.7 384 416V319.1C384 302.3 398.3 287.1 416 287.1C433.7 287.1 448 302.3 448 319.1V416C448 469 405 512 352 512H96C42.98 512 0 469 0 416V159.1C0 106.1 42.98 63.1 96 63.1H192z\"/></svg>",
@@ -6021,14 +6023,14 @@
6021
6023
  this.setModelAsString();
6022
6024
  };
6023
6025
  InputDatePickerComponent.prototype.setModelAsString = function () {
6024
- if (this.model) {
6025
- var year = this.model.toLocaleString("default", { year: "numeric" });
6026
- var month = this.model.toLocaleString("default", { month: "2-digit" });
6027
- var day = this.model.toLocaleString("default", { day: "2-digit" });
6028
- this.modelAsString = year + "-" + month + "-" + day;
6026
+ if (this.model instanceof Date && !isNaN(this.model.getTime())) {
6027
+ var y = this.model.getFullYear();
6028
+ var m = String(this.model.getMonth() + 1).padStart(2, '0');
6029
+ var d = String(this.model.getDate()).padStart(2, '0');
6030
+ this.modelAsString = y + "-" + m + "-" + d;
6029
6031
  }
6030
6032
  else {
6031
- this.modelAsString = null;
6033
+ this.modelAsString = null; // or leave as-is, but don't try to format a non-Date
6032
6034
  }
6033
6035
  };
6034
6036
  InputDatePickerComponent.prototype.handleClearIconClicked = function () {
@@ -6039,7 +6041,7 @@
6039
6041
  InputDatePickerComponent.decorators = [
6040
6042
  { type: i0.Component, args: [{
6041
6043
  selector: 'co-input-date',
6042
- template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [hidden]=\"hidden\"\n [readonly]=\"readonly\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (leftIconClick)=\"leftIconClick.emit($event)\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (modelChange)=\"modelAsString = $event\"\n (clearIconClick)=\"handleClearIconClicked()\"\n [emptyPlace]=\"true\"\n (keyup.enter)=\"finalizeDate()\"\n (blur)=\"finalizeDate()\"\n ></co-input-text>\n ",
6044
+ template: "\n <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n [hidden]=\"hidden\"\n [readonly]=\"readonly\"\n [(model)]=\"modelAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [pattern]=\"'yyyy-MM-dd'\"\n [type]=\"'date'\"\n [placeholder]=\"placeholder\"\n (leftIconClick)=\"leftIconClick.emit($event)\"\n (rightIconClick)=\"toggleCalendar(true)\"\n (modelChange)=\"modelAsString = $event\"\n (clearIconClick)=\"handleClearIconClicked()\"\n [emptyPlace]=\"true\"\n (keydown.enter)=\"finalizeDate()\"\n (keydown.tab)=\"finalizeDate()\"\n (blur)=\"finalizeDate()\"\n ></co-input-text>\n ",
6043
6045
  providers: [
6044
6046
  OverlayService, {
6045
6047
  provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
@@ -6428,6 +6430,7 @@
6428
6430
  event.preventDefault();
6429
6431
  event.stopPropagation();
6430
6432
  if (this.type === 'date') {
6433
+ console.log(this.model);
6431
6434
  this.isFocusedOnDate = false;
6432
6435
  }
6433
6436
  this.isFocused.emit(false);
@@ -6982,13 +6985,13 @@
6982
6985
  get: function () {
6983
6986
  return this._selectedDate;
6984
6987
  },
6985
- set: function (date) {
6986
- this._selectedDate = !!date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : date;
6987
- // Store the initial selected date when the calendar is first opened
6988
+ set: function (value) {
6989
+ var d = this._coerceToDate(value);
6990
+ this._selectedDate = d ? new Date(d.getFullYear(), d.getMonth(), d.getDate()) : null;
6988
6991
  if (this._initialSelectedDate === null) {
6989
6992
  this._initialSelectedDate = this._selectedDate;
6990
6993
  }
6991
- if (this.secondSelectedDate && date && this.secondSelectedDate.getTime() < this.selectedDate.getTime() && this.temporarySelectedSecondaryDate) {
6994
+ if (this.secondSelectedDate && d && this.secondSelectedDate.getTime() < this.selectedDate.getTime() && this.temporarySelectedSecondaryDate) {
6992
6995
  this.daysToHighlight = [];
6993
6996
  }
6994
6997
  },
@@ -6996,38 +6999,37 @@
6996
6999
  configurable: true
6997
7000
  });
6998
7001
  Object.defineProperty(CalendarTemplateComponent.prototype, "secondSelectedDate", {
6999
- get: function () {
7000
- return this._secondSelectedDate;
7001
- },
7002
- set: function (date) {
7003
- this._secondSelectedDate = !!date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : date;
7004
- if (!this.selectedDate) {
7002
+ get: function () { return this._secondSelectedDate; },
7003
+ set: function (value) {
7004
+ var d = this._coerceToDate(value);
7005
+ this._secondSelectedDate = d ? new Date(d.getFullYear(), d.getMonth(), d.getDate()) : null;
7006
+ if (!this.selectedDate)
7005
7007
  this.daysToHighlight = [];
7006
- }
7007
- else {
7008
+ else
7008
7009
  this._fillDatesBetweenSelected();
7009
- }
7010
7010
  },
7011
7011
  enumerable: false,
7012
7012
  configurable: true
7013
7013
  });
7014
7014
  Object.defineProperty(CalendarTemplateComponent.prototype, "secondHoveringDate", {
7015
- get: function () {
7016
- return this._secondHoveringDate;
7017
- },
7018
- set: function (date) {
7019
- this._secondHoveringDate = date;
7020
- if (!!date) {
7015
+ set: function (value) {
7016
+ var d = this._coerceToDate(value);
7017
+ this._secondHoveringDate = d || null;
7018
+ if (d)
7021
7019
  this.temporarySelectedSecondaryDate = null;
7022
- }
7023
- if (this.selectedDate && !this.secondSelectedDate) {
7024
- this.temporarySelectedSecondaryDate = new Date(date);
7025
- }
7026
- this.handleMouseOverDay(date);
7020
+ if (this.selectedDate && !this.secondSelectedDate && d)
7021
+ this.temporarySelectedSecondaryDate = new Date(d);
7022
+ this.handleMouseOverDay(d);
7027
7023
  },
7028
7024
  enumerable: false,
7029
7025
  configurable: true
7030
7026
  });
7027
+ CalendarTemplateComponent.prototype._coerceToDate = function (v) {
7028
+ if (v == null)
7029
+ return null;
7030
+ var d = v instanceof Date ? v : new Date(v);
7031
+ return isNaN(d.getTime()) ? null : d;
7032
+ };
7031
7033
  CalendarTemplateComponent.prototype.showClass = function () {
7032
7034
  return true;
7033
7035
  };
@@ -7119,10 +7121,10 @@
7119
7121
  this.yearSelectionYears = years.reverse();
7120
7122
  };
7121
7123
  CalendarTemplateComponent.prototype.openMonthSelection = function () {
7122
- this.showCalendarBody = false;
7123
- this.monthSelection = false;
7124
- this.yearSelection = true;
7125
- this.showMonthSelection = true;
7124
+ this.showCalendarBody = !this.showCalendarBody;
7125
+ this.monthSelection = !this.monthSelection;
7126
+ this.yearSelection = !this.yearSelection;
7127
+ this.showMonthSelection = !this.showMonthSelection;
7126
7128
  };
7127
7129
  CalendarTemplateComponent.prototype.openYearSelection = function () {
7128
7130
  this.showMonthSelection = false;
@@ -7273,7 +7275,7 @@
7273
7275
  CalendarTemplateComponent.decorators = [
7274
7276
  { type: i0.Component, args: [{
7275
7277
  selector: "calendar-template",
7276
- template: "\n <div class=\"calendar\">\n <div class=\"selected-date-display\">\n <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n {{ selectedDate.getFullYear() }}\n </span>\n <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n {{ selectedDate | date: 'EEE d MMM' }}\n </span>\n <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n </div>\n <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n <div class=\"calendar-header-title-wrapper\">\n <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n ></span>\n </div>\n\n <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n </div>\n\n <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n <div *ngFor=\"let month of monthSelectionNames\"\n class=\"calendar-month-or-year\"\n (click)=\"selectMonth(month)\">\n <ng-container *ngIf=\"month\">\n <div class=\"month\" [textContent]=\"month\"></div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n <div *ngFor=\"let year of yearSelectionYears\"\n class=\"calendar-month-or-year\"\n (click)=\"selectYear(year)\"\n [textContent]=\"year\">\n <ng-container *ngIf=\"year\">\n <div class=\"year\" [textContent]=\"year\"></div>\n </ng-container>\n </div>\n </div>\n <div class=\"calendar-wrapper\">\n <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n <div class=\"week-number\" [textContent]=\"'W'\"></div>\n <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n {{ weekNumber }}\n </div>\n </div>\n <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n <div class=\"day-names\">\n <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n </div>\n <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n (click)=\"selectDate(day)\"\n (mouseover)=\"handleMouseOverDay(day)\">\n <!-- Day number -->\n <ng-container *ngIf=\"day\">\n <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n <span class=\"set-and-close-button\" *ngIf=\"this.doubleCalendar\" (click)=\"setAndClose()\">Instellen</span>\n <span class=\"clear-date-button\" *ngIf=\"this.selectedDate\" (click)=\"clearDate()\">Wissen</span>\n <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n </div>\n </div>\n ",
7278
+ template: "\n <div class=\"calendar\">\n <div class=\"selected-date-display\">\n <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n {{ selectedDate.getFullYear() }}\n </span>\n <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n {{ selectedDate | date: 'EEE d MMM' }}\n </span>\n <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n </div>\n <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"!monthSelection ? prevYear() : prevMonth()\"></co-icon>\n\n <div class=\"calendar-header-title-wrapper\">\n <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n (click)=\"openMonthSelection()\"\n ></span>\n </div>\n\n <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"!monthSelection ? nextYear() : nextMonth()\"></co-icon>\n </div>\n\n <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n <div *ngFor=\"let month of monthSelectionNames\"\n class=\"calendar-month-or-year\"\n (click)=\"selectMonth(month)\">\n <ng-container *ngIf=\"month\">\n <div class=\"month\" [textContent]=\"month\"></div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n <div *ngFor=\"let year of yearSelectionYears\"\n class=\"calendar-month-or-year\"\n (click)=\"selectYear(year)\"\n [textContent]=\"year\">\n <ng-container *ngIf=\"year\">\n <div class=\"year\" [textContent]=\"year\"></div>\n </ng-container>\n </div>\n </div>\n <div class=\"calendar-wrapper\">\n <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n <div class=\"week-number\" [textContent]=\"'W'\"></div>\n <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n {{ weekNumber }}\n </div>\n </div>\n <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n <div class=\"day-names\">\n <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n </div>\n <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n (click)=\"selectDate(day)\"\n (mouseover)=\"handleMouseOverDay(day)\">\n <!-- Day number -->\n <ng-container *ngIf=\"day\">\n <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n <span class=\"set-and-close-button\" *ngIf=\"this.doubleCalendar\" (click)=\"setAndClose()\">Instellen</span>\n <span class=\"clear-date-button\" *ngIf=\"this.selectedDate\" (click)=\"clearDate()\">Wissen</span>\n <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n </div>\n </div>\n ",
7277
7279
  encapsulation: i0.ViewEncapsulation.None
7278
7280
  },] }
7279
7281
  ];
@@ -7342,6 +7344,113 @@
7342
7344
  },] }
7343
7345
  ];
7344
7346
 
7347
+ var BaseInputTimeDirective = /** @class */ (function (_super) {
7348
+ __extends(BaseInputTimeDirective, _super);
7349
+ function BaseInputTimeDirective() {
7350
+ var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
7351
+ _this.rightIcon = exports.CoreComponentsIcon.Clock;
7352
+ _this.locale = 'nl-NL';
7353
+ _this.leftIconClick = new i0.EventEmitter();
7354
+ _this.closeAfterDateSelection = true;
7355
+ return _this;
7356
+ }
7357
+ return BaseInputTimeDirective;
7358
+ }(BaseInputComponent));
7359
+ BaseInputTimeDirective.decorators = [
7360
+ { type: i0.Directive }
7361
+ ];
7362
+ BaseInputTimeDirective.propDecorators = {
7363
+ parentForOverlay: [{ type: i0.ViewChild, args: ["parentForOverlay", { read: i0.ElementRef },] }],
7364
+ locale: [{ type: i0.Input }],
7365
+ placeholder: [{ type: i0.Input }],
7366
+ leftIcon: [{ type: i0.Input }],
7367
+ leftIconData: [{ type: i0.Input }],
7368
+ leftIconClick: [{ type: i0.Output }],
7369
+ closeAfterDateSelection: [{ type: i0.Input }]
7370
+ };
7371
+
7372
+ var InputTimeComponent = /** @class */ (function (_super) {
7373
+ __extends(InputTimeComponent, _super);
7374
+ function InputTimeComponent() {
7375
+ var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
7376
+ _this.timeAsString = '';
7377
+ return _this;
7378
+ }
7379
+ InputTimeComponent.prototype.modelSet = function () {
7380
+ this.setTimeAsString();
7381
+ };
7382
+ InputTimeComponent.prototype.setTimeAsString = function () {
7383
+ if (this.model !== undefined && this.model !== null) {
7384
+ var totalMinutes = Math.floor(this.model / (1000 * 60)); // Convert milliseconds to minutes
7385
+ var days = Math.floor(totalMinutes / (24 * 60));
7386
+ var hours = Math.floor((totalMinutes % (24 * 60)) / 60);
7387
+ var minutes = totalMinutes % 60;
7388
+ this.timeAsString = days + "d " + hours + "h " + minutes + "m";
7389
+ }
7390
+ else {
7391
+ this.timeAsString = '';
7392
+ }
7393
+ };
7394
+ InputTimeComponent.prototype.handleTimeChange = function (value) {
7395
+ if (value) {
7396
+ var parts = value.split(' ');
7397
+ var totalMinutes_1 = 0;
7398
+ parts.forEach(function (part) {
7399
+ if (part.endsWith('d')) {
7400
+ totalMinutes_1 += parseInt(part.substring(0, part.length - 1)) * 24 * 60;
7401
+ }
7402
+ else if (part.endsWith('h')) {
7403
+ totalMinutes_1 += parseInt(part.substring(0, part.length - 1)) * 60;
7404
+ }
7405
+ else if (part.endsWith('m')) {
7406
+ totalMinutes_1 += parseInt(part.substring(0, part.length - 1));
7407
+ }
7408
+ });
7409
+ this.setModel(totalMinutes_1 * 60 * 1000); // Convert minutes to milliseconds
7410
+ }
7411
+ };
7412
+ InputTimeComponent.prototype.handleClearIconClicked = function () {
7413
+ this.setModel(undefined);
7414
+ };
7415
+ return InputTimeComponent;
7416
+ }(BaseInputTimeDirective));
7417
+ InputTimeComponent.decorators = [
7418
+ { type: i0.Component, args: [{
7419
+ selector: 'co-input-time',
7420
+ template: "\n <co-input-text\n [hidden]=\"hidden\"\n [readonly]=\"readonly\"\n [(model)]=\"timeAsString\"\n [rightIcon]=\"rightIcon\"\n [leftIcon]=\"leftIcon\"\n [leftIconData]=\"leftIconData\"\n [placeholder]=\"placeholder\"\n (blur)=\"handleTimeChange(timeAsString)\"\n (clearIconClick)=\"handleClearIconClicked()\"\n ></co-input-text>\n ",
7421
+ providers: [
7422
+ OverlayService, {
7423
+ provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputTimeComponent; })
7424
+ }, {
7425
+ provide: BaseInputTimeDirective,
7426
+ useExisting: InputTimeComponent
7427
+ }
7428
+ ],
7429
+ encapsulation: i0.ViewEncapsulation.None
7430
+ },] }
7431
+ ];
7432
+
7433
+ var InputTimeModule = /** @class */ (function () {
7434
+ function InputTimeModule() {
7435
+ }
7436
+ return InputTimeModule;
7437
+ }());
7438
+ InputTimeModule.decorators = [
7439
+ { type: i0.NgModule, args: [{
7440
+ imports: [
7441
+ common.CommonModule,
7442
+ InputTextModule,
7443
+ ClickoutsideModule,
7444
+ OverlayModule
7445
+ ],
7446
+ schemas: [
7447
+ i0.NO_ERRORS_SCHEMA
7448
+ ],
7449
+ declarations: [InputTimeComponent],
7450
+ exports: [InputTimeComponent]
7451
+ },] }
7452
+ ];
7453
+
7345
7454
  var DoubleCalendarComponent = /** @class */ (function (_super) {
7346
7455
  __extends(DoubleCalendarComponent, _super);
7347
7456
  function DoubleCalendarComponent() {
@@ -11424,7 +11533,8 @@
11424
11533
  ];
11425
11534
 
11426
11535
  var ListOfValuesPopupComponent = /** @class */ (function () {
11427
- function ListOfValuesPopupComponent(_elementRef) {
11536
+ function ListOfValuesPopupComponent(iconCacheService, _elementRef) {
11537
+ this.iconCacheService = iconCacheService;
11428
11538
  this._elementRef = _elementRef;
11429
11539
  this.multiselect = false;
11430
11540
  this.displayField = 'description';
@@ -11647,11 +11757,12 @@
11647
11757
  ListOfValuesPopupComponent.decorators = [
11648
11758
  { type: i0.Component, args: [{
11649
11759
  selector: 'co-list-of-values-popup',
11650
- template: "\n <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\"\n id=\"lov-popup\"\n role=\"listbox\" [tabindex]=\"-1\"\n (clickOutside)=\"closePopup.emit($event)\">\n <co-input-search *ngIf=\"multiselect\"\n tabindex=\"-1\"\n [(model)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\"\n (keydown)=\"handleInputKeyDown($event)\"\n (modelChange)=\"filterViewModels()\"></co-input-search>\n <ul class=\"dropdown-list\" #dropDownList>\n <li\n #lovItem\n *ngFor=\"let viewModel of viewModels; let index = index\"\n [class.selected]=\"viewModel === highLightModel || viewModels.length === 1\"\n (click)=\"selectViewModel(viewModel, !multiselect)\"\n role=\"option\">\n <ng-container *ngIf=\"!multiselect\">\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n <ng-container *ngIf=\"multiselect\">\n <co-input-checkbox [model]=\"viewModel.checked\"\n (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n </li>\n </ul>\n </div>\n ",
11760
+ template: "\n <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\"\n id=\"lov-popup\"\n role=\"listbox\" [tabindex]=\"-1\"\n (clickOutside)=\"closePopup.emit($event)\">\n <co-input-search *ngIf=\"multiselect\"\n tabindex=\"-1\"\n [(model)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\"\n (keydown)=\"handleInputKeyDown($event)\"\n (modelChange)=\"filterViewModels()\"></co-input-search>\n <ul class=\"dropdown-list\" #dropDownList>\n <li\n #lovItem\n *ngFor=\"let viewModel of viewModels; let index = index\"\n [class.selected]=\"viewModel === highLightModel || viewModels.length === 1\"\n (click)=\"selectViewModel(viewModel, !multiselect)\"\n role=\"option\">\n <ng-container *ngIf=\"!multiselect\">\n <co-icon *ngIf=\"viewModel.model[optionIcon]\" class=\"input-text-left-icon\" [iconData]=\"iconCacheService.getIcon(viewModel.model[optionIcon])\">\n </co-icon>\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n <ng-container *ngIf=\"multiselect\">\n <co-input-checkbox [model]=\"viewModel.checked\"\n (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n </li>\n </ul>\n </div>\n ",
11651
11761
  encapsulation: i0.ViewEncapsulation.None
11652
11762
  },] }
11653
11763
  ];
11654
11764
  ListOfValuesPopupComponent.ctorParameters = function () { return [
11765
+ { type: IconCacheService },
11655
11766
  { type: i0.ElementRef }
11656
11767
  ]; };
11657
11768
  ListOfValuesPopupComponent.propDecorators = {
@@ -11665,6 +11776,7 @@
11665
11776
  customCssClass: [{ type: i0.Input }],
11666
11777
  searchDisabled: [{ type: i0.Input }],
11667
11778
  parentForOverlay: [{ type: i0.Input }],
11779
+ optionIcon: [{ type: i0.Input }],
11668
11780
  collection: [{ type: i0.Input }],
11669
11781
  modelChange: [{ type: i0.Output }],
11670
11782
  closePopup: [{ type: i0.Output }],
@@ -11674,9 +11786,10 @@
11674
11786
 
11675
11787
  var ListOfValuesComponent = /** @class */ (function (_super) {
11676
11788
  __extends(ListOfValuesComponent, _super);
11677
- function ListOfValuesComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
11789
+ function ListOfValuesComponent(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
11678
11790
  var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
11679
11791
  _this.formComponent = formComponent;
11792
+ _this.iconCacheService = iconCacheService;
11680
11793
  _this.changeDetector = changeDetector;
11681
11794
  _this.overlayService = overlayService;
11682
11795
  _this.componentFactoryResolver = componentFactoryResolver;
@@ -11839,7 +11952,8 @@
11839
11952
  displayField: this.displayField,
11840
11953
  multiselect: this.multiselect,
11841
11954
  model: this.model,
11842
- collection: this.collection
11955
+ collection: this.collection,
11956
+ optionIcon: this.optionIcon,
11843
11957
  }, {
11844
11958
  modelChange: function (value) { return _this.optionChosen(value); },
11845
11959
  closePopup: function () { return _this.closePopup(); },
@@ -11921,7 +12035,7 @@
11921
12035
  ListOfValuesComponent.decorators = [
11922
12036
  { type: i0.Component, args: [{
11923
12037
  selector: 'co-list-of-values',
11924
- template: "\n <co-input-text\n *ngIf=\"!largeCollection\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isSelectOpen\"\n aria-controls=\"lov-popup\"\n role=\"combobox\"\n class=\"no-focus-line\"\n overlayParent\n #parentForOverlay=\"overlayParent\"\n type=\"text\"\n [id]=\"label\"\n [model]=\"multiselect ? selectedModels : selectedModel\"\n [placeholder]=\"label\"\n [myFormInputInstance]=\"this\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [noClickFocus]=\"false\"\n [leftIconData]=\"leftIconData\"\n [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n [showClearButton]=\"true\"\n [useContent]=\"multiselect\"\n [customHeight]=\"multiselect\"\n [keepFocussed]=\"keepFocussed\"\n (modelChange)=\"handleInputModelChange($event)\"\n (click)=\"openPopup()\"\n (rightIconClick)=\"toggleSelect()\"\n (keydown)=\"handleInputKeyDown($event)\"\n (clearIconClick)=\"clearModel($event)\"\n (blur)=\"checkModel()\">\n <ng-container *ngIf=\"multiselect && showChips\">\n <div class=\"multiselect-chips-wrapper\">\n <div class=\"chips\" *ngFor=\"let chip of model\">\n <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n </div>\n </div>\n </ng-container>\n </co-input-text>\n\n <co-input-text\n *ngIf=\"largeCollection\"\n [model]=\"filterText\"\n [placeholder]=\"label\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (modelChange)=\"onModelChange($event)\">\n </co-input-text>\n <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n <input type=\"hidden\" [ngModel]=\"model\">\n ",
12038
+ template: "\n <co-input-text\n *ngIf=\"!largeCollection\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"isSelectOpen\"\n aria-controls=\"lov-popup\"\n role=\"combobox\"\n class=\"no-focus-line\"\n overlayParent\n #parentForOverlay=\"overlayParent\"\n type=\"text\"\n [id]=\"label\"\n [model]=\"multiselect ? selectedModels : selectedModel\"\n [placeholder]=\"label\"\n [myFormInputInstance]=\"this\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [noClickFocus]=\"false\"\n [leftIconData]=\" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData\"\n [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n [showClearButton]=\"true\"\n [useContent]=\"multiselect\"\n [customHeight]=\"multiselect\"\n [keepFocussed]=\"keepFocussed\"\n (modelChange)=\"handleInputModelChange($event)\"\n (click)=\"openPopup()\"\n (rightIconClick)=\"toggleSelect()\"\n (keydown)=\"handleInputKeyDown($event)\"\n (clearIconClick)=\"clearModel($event)\"\n (blur)=\"checkModel()\">\n <ng-container *ngIf=\"multiselect && showChips\">\n <div class=\"multiselect-chips-wrapper\">\n <div class=\"chips\" *ngFor=\"let chip of model\">\n <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n </div>\n </div>\n </ng-container>\n </co-input-text>\n\n <co-input-text\n *ngIf=\"largeCollection\"\n [model]=\"filterText\"\n [placeholder]=\"label\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (modelChange)=\"onModelChange($event)\">\n </co-input-text>\n <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n <input type=\"hidden\" [ngModel]=\"model\">\n ",
11925
12039
  providers: [
11926
12040
  OverlayService,
11927
12041
  {
@@ -11934,6 +12048,7 @@
11934
12048
  ];
11935
12049
  ListOfValuesComponent.ctorParameters = function () { return [
11936
12050
  { type: FormComponent, decorators: [{ type: i0.Optional }] },
12051
+ { type: IconCacheService },
11937
12052
  { type: i0.ChangeDetectorRef },
11938
12053
  { type: OverlayService },
11939
12054
  { type: i0.ComponentFactoryResolver },
@@ -11947,6 +12062,7 @@
11947
12062
  multiselect: [{ type: i0.HostBinding, args: ['class.custom-height',] }, { type: i0.HostBinding, args: ['class.multi-select',] }, { type: i0.Input }],
11948
12063
  largeCollection: [{ type: i0.Input }],
11949
12064
  displayField: [{ type: i0.Input }],
12065
+ optionIcon: [{ type: i0.Input }],
11950
12066
  collection: [{ type: i0.Input }],
11951
12067
  collectionLoadFn: [{ type: i0.Input }],
11952
12068
  leftIconData: [{ type: i0.Input }],
@@ -12699,6 +12815,10 @@
12699
12815
  this.showButton = true;
12700
12816
  this._createModelForDateRange(model);
12701
12817
  break;
12818
+ case this.modes.DateField:
12819
+ this.showButton = true;
12820
+ this._createModelForDateField(model);
12821
+ break;
12702
12822
  case this.modes.TextField:
12703
12823
  this.showButton = true;
12704
12824
  this._model = (typeof this._model === 'string' && this._model.length === 0) ? undefined : this._model;
@@ -12725,25 +12845,25 @@
12725
12845
  FilterItemComponent.prototype.applyFilter = function (text) {
12726
12846
  var _a, _b;
12727
12847
  return __awaiter(this, void 0, void 0, function () {
12728
- var _c, filterText, filteredItemCount;
12729
- return __generator(this, function (_d) {
12730
- switch (_d.label) {
12848
+ var _g, filterText, filteredItemCount;
12849
+ return __generator(this, function (_h) {
12850
+ switch (_h.label) {
12731
12851
  case 0:
12732
12852
  if (!!isNaN(this.minSearchCharsToLoadCollection)) return [3 /*break*/, 5];
12733
12853
  if (!(text.length < this.minSearchCharsToLoadCollection)) return [3 /*break*/, 2];
12734
12854
  return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
12735
12855
  case 1:
12736
- _d.sent();
12856
+ _h.sent();
12737
12857
  this.collection = undefined;
12738
12858
  return [3 /*break*/, 5];
12739
12859
  case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
12740
12860
  case 3:
12741
- _d.sent();
12742
- _c = this;
12861
+ _h.sent();
12862
+ _g = this;
12743
12863
  return [4 /*yield*/, this.collectionLoadFn(text)];
12744
12864
  case 4:
12745
- _c.collection = _d.sent();
12746
- _d.label = 5;
12865
+ _g.collection = _h.sent();
12866
+ _h.label = 5;
12747
12867
  case 5:
12748
12868
  this.filterText = text;
12749
12869
  if (!this.collection) {
@@ -12773,14 +12893,29 @@
12773
12893
  });
12774
12894
  };
12775
12895
  FilterItemComponent.prototype.onButtonClicked = function () {
12776
- var _a, _b;
12777
- if ((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.finalize) {
12778
- this.dateInput.finalize();
12779
- }
12780
- if ((_b = this.dateRangeInput) === null || _b === void 0 ? void 0 : _b.finalize) {
12781
- this.dateRangeInput.finalize();
12782
- }
12783
- this.filterButtonClicked.emit();
12896
+ var _a, _b, _c, _d, _e, _f;
12897
+ return __awaiter(this, void 0, void 0, function () {
12898
+ return __generator(this, function (_g) {
12899
+ switch (_g.label) {
12900
+ case 0:
12901
+ (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
12902
+ switch (this.mode) {
12903
+ case this.modes.DateField:
12904
+ (_d = (_c = this.dateInput) === null || _c === void 0 ? void 0 : _c.finalize) === null || _d === void 0 ? void 0 : _d.call(_c);
12905
+ break;
12906
+ case this.modes.DateRangeField:
12907
+ (_f = (_e = this.dateRangeInput) === null || _e === void 0 ? void 0 : _e.finalize) === null || _f === void 0 ? void 0 : _f.call(_e);
12908
+ break;
12909
+ }
12910
+ this._changeDetector.detectChanges();
12911
+ return [4 /*yield*/, Promise.resolve()];
12912
+ case 1:
12913
+ _g.sent();
12914
+ this.filterButtonClicked.emit();
12915
+ return [2 /*return*/];
12916
+ }
12917
+ });
12918
+ });
12784
12919
  };
12785
12920
  FilterItemComponent.prototype.uncheckForSingleSelect = function (model) {
12786
12921
  this.collection.forEach(function (m) {
@@ -12931,6 +13066,15 @@
12931
13066
  this._model = 0;
12932
13067
  }
12933
13068
  };
13069
+ FilterItemComponent.prototype._createModelForDateField = function (date) {
13070
+ if (date) {
13071
+ var formattedDate = this._formatDateToString(date);
13072
+ this._model = "?='" + formattedDate + "'";
13073
+ }
13074
+ else {
13075
+ this._model = undefined;
13076
+ }
13077
+ };
12934
13078
  FilterItemComponent.prototype._createModelForDateRange = function (dates) {
12935
13079
  if (dates) {
12936
13080
  var startDate = dates[0];
@@ -12950,7 +13094,7 @@
12950
13094
  //Model reading for all of the different options available//
12951
13095
  ////////////////////////////////////////////////////////////
12952
13096
  FilterItemComponent.prototype._readModelForFilterList = function (filterModel) {
12953
- var e_1, _c;
13097
+ var e_1, _g;
12954
13098
  var filterList = [];
12955
13099
  var itemsToCheck = [];
12956
13100
  this._uncheckAll();
@@ -12976,7 +13120,7 @@
12976
13120
  catch (e_1_1) { e_1 = { error: e_1_1 }; }
12977
13121
  finally {
12978
13122
  try {
12979
- if (itemsToCheck_1_1 && !itemsToCheck_1_1.done && (_c = itemsToCheck_1.return)) _c.call(itemsToCheck_1);
13123
+ if (itemsToCheck_1_1 && !itemsToCheck_1_1.done && (_g = itemsToCheck_1.return)) _g.call(itemsToCheck_1);
12980
13124
  }
12981
13125
  finally { if (e_1) throw e_1.error; }
12982
13126
  }
@@ -13008,13 +13152,13 @@
13008
13152
  }
13009
13153
  };
13010
13154
  FilterItemComponent.prototype._readModelForSelectListWithNumberOutput = function (numberModel) {
13011
- var e_2, _c;
13155
+ var e_2, _g;
13012
13156
  this._uncheckAll();
13013
13157
  this._model = numberModel;
13014
13158
  if (numberModel !== null && numberModel !== undefined && this.collection !== null && this.collection !== undefined) {
13015
13159
  try {
13016
- for (var _d = __values(this.collection), _e = _d.next(); !_e.done; _e = _d.next()) {
13017
- var item = _e.value;
13160
+ for (var _h = __values(this.collection), _j = _h.next(); !_j.done; _j = _h.next()) {
13161
+ var item = _j.value;
13018
13162
  var itemCode = item.code;
13019
13163
  var modValue = (numberModel % (2 * itemCode));
13020
13164
  item.checked = (modValue >= itemCode);
@@ -13023,7 +13167,7 @@
13023
13167
  catch (e_2_1) { e_2 = { error: e_2_1 }; }
13024
13168
  finally {
13025
13169
  try {
13026
- if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
13170
+ if (_j && !_j.done && (_g = _h.return)) _g.call(_h);
13027
13171
  }
13028
13172
  finally { if (e_2) throw e_2.error; }
13029
13173
  }
@@ -13067,12 +13211,35 @@
13067
13211
  }
13068
13212
  };
13069
13213
  FilterItemComponent.prototype._readModelForDateField = function (dateFieldModel) {
13214
+ // Keep whatever came in as the "filter value" for outputs
13070
13215
  this._model = dateFieldModel;
13071
- if (dateFieldModel !== undefined && dateFieldModel !== null) {
13072
- this._model = new Date(dateFieldModel);
13216
+ if (!dateFieldModel) {
13217
+ this.dateFieldValue = undefined;
13218
+ return;
13073
13219
  }
13074
- else {
13075
- this._model = undefined;
13220
+ if (dateFieldModel instanceof Date) {
13221
+ this.dateFieldValue = dateFieldModel;
13222
+ return;
13223
+ }
13224
+ if (typeof dateFieldModel === 'string') {
13225
+ // Accept "?='dd-MM-yyyy'", "dd-MM-yyyy", or "yyyy-MM-dd"
13226
+ var raw = dateFieldModel;
13227
+ var wrapped = raw.match(/\?='(\d{2}-\d{2}-\d{4})'/);
13228
+ if (wrapped)
13229
+ raw = wrapped[1];
13230
+ var ddmmyyyy = /^(\d{2})-(\d{2})-(\d{4})$/;
13231
+ var yyyymmdd = /^(\d{4})-(\d{2})-(\d{2})$/;
13232
+ if (ddmmyyyy.test(raw)) {
13233
+ var _g = __read(ddmmyyyy.exec(raw), 4), dd = _g[1], mm = _g[2], yyyy = _g[3];
13234
+ this.dateFieldValue = new Date(+yyyy, +mm - 1, +dd);
13235
+ }
13236
+ else if (yyyymmdd.test(raw)) {
13237
+ var _h = __read(yyyymmdd.exec(raw), 4), yyyy = _h[1], mm = _h[2], dd = _h[3];
13238
+ this.dateFieldValue = new Date(+yyyy, +mm - 1, +dd);
13239
+ }
13240
+ else {
13241
+ this.dateFieldValue = undefined;
13242
+ }
13076
13243
  }
13077
13244
  };
13078
13245
  FilterItemComponent.prototype._readModelForDateRangeField = function (dateRangeFieldModel) {
@@ -13096,7 +13263,7 @@
13096
13263
  FilterItemComponent.decorators = [
13097
13264
  { type: i0.Component, args: [{
13098
13265
  selector: "co-filter-item",
13099
- template: "\n <div class=\"co-filter-item-header\">\n <co-collapsible\n [headerTitle]=\"placeholder\"\n [expandButtonLast]=\"true\"\n [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n [expanded]=\"expanded\"\n [showButton]=\"showButton\"\n [buttonText]=\"filterButtonLabel\"\n (buttonClicked)=\"onButtonClicked()\"\n >\n <div class=\"co-filter-item-collapsable-content\">\n <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n <ng-content></ng-content>\n </div>\n <ng-template #collectionContent>\n <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n <co-input-text\n *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n [placeholder]=\"searchPlaceholder\"\n [model]=\"filterText\"\n (modelChange)=\"onModelChange($event)\"\n [readonly]=\"readonly\"\n >\n </co-input-text>\n <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n <span [textContent]=\"noResultsLabel\"></span>\n </div>\n <div class=\"co-filter-item-collection-results\">\n <ng-container\n *ngFor=\"let option of filteredCollection; let index = index\">\n <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n [clickableLabel]=\"false\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-checkbox>\n <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-radio-button>\n <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n [textContent]=\"option.count.toString() | append: ')' | prepend: ' ('\"\n ></div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n <div class=\"co-filter-show-more clickable\"\n *ngIf=\"moreToShow()\">\n <a (click)=\"increaseLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n <span [textContent]=\"showMoreLabel\"></span>\n </a>\n </div>\n <div class=\"co-filter-show-less clickable\"\n *ngIf=\"lessToShow()\">\n <a (click)=\"setToInitialLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n <span [textContent]=\"showLessLabel\"></span>\n </a>\n </div>\n </div>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n <co-input-checkbox\n [(model)]=\"model\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\">\n </co-input-checkbox>\n </div>\n <div class=\"co-filter-item-checkbox-content\"\n *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n <co-input-checkbox\n [(model)]=\"checkBoxToTextModel\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\"></co-input-checkbox>\n </div>\n <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n <co-input-text\n [(model)]=\"model\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"></co-input-text>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n <co-input-date\n #dateInput\n [(model)]=\"model\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"\n ></co-input-date>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n <co-input-date-range [readonly]=\"readonly\"\n #dateRangeInput\n [model]=\"[dateRangeStart, dateRangeEnd]\"\n (modelChange)=\"handleModelChange($event)\"\n [placeholder]=\"'Kies datum' | coreLocalize\">\n </co-input-date-range>\n </div>\n </ng-template>\n </div>\n </co-collapsible>\n </div>\n\n ",
13266
+ template: "\n <div class=\"co-filter-item-header\">\n <co-collapsible\n [headerTitle]=\"placeholder\"\n [expandButtonLast]=\"true\"\n [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n [expanded]=\"expanded\"\n [showButton]=\"showButton\"\n [buttonText]=\"filterButtonLabel\"\n (buttonClicked)=\"onButtonClicked()\"\n >\n <div class=\"co-filter-item-collapsable-content\">\n <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n <ng-content></ng-content>\n </div>\n <ng-template #collectionContent>\n <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n <co-input-text\n *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n [placeholder]=\"searchPlaceholder\"\n [model]=\"filterText\"\n (modelChange)=\"onModelChange($event)\"\n [readonly]=\"readonly\"\n >\n </co-input-text>\n <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n <span [textContent]=\"noResultsLabel\"></span>\n </div>\n <div class=\"co-filter-item-collection-results\">\n <ng-container\n *ngFor=\"let option of filteredCollection; let index = index\">\n <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n [clickableLabel]=\"false\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-checkbox>\n <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n [label]=\"option.description\"\n [model]=\"option.checked\"\n (modelChange)=\"handleModelChange(option)\"\n [readonly]=\"readonly\"\n ></co-input-radio-button>\n <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n [textContent]=\"option.count.toString() | append: ')' | prepend: ' ('\"\n ></div>\n </div>\n\n </ng-container>\n </div>\n <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n <div class=\"co-filter-show-more clickable\"\n *ngIf=\"moreToShow()\">\n <a (click)=\"increaseLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n <span [textContent]=\"showMoreLabel\"></span>\n </a>\n </div>\n <div class=\"co-filter-show-less clickable\"\n *ngIf=\"lessToShow()\">\n <a (click)=\"setToInitialLimit()\">\n <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n <span [textContent]=\"showLessLabel\"></span>\n </a>\n </div>\n </div>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n <co-input-text\n class=\"slider-from\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'FROM' | coreLocalize\"\n [(model)]=\"sliderMin\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMin)\"\n ></co-input-text>\n <co-input-text\n class=\"slider-to\"\n [type]=\"'number'\"\n [digitsOnly]=\"true\"\n [hideArrowButtons]=\"true\"\n [excludePlusMinus]=\"true\"\n [label]=\"'TO' | coreLocalize\"\n [(model)]=\"sliderMax\"\n [readonly]=\"readonly\"\n (focusout)=\"handleModelChange(sliderMax)\"\n ></co-input-text>\n </div>\n <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n <co-input-checkbox\n [(model)]=\"model\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\">\n </co-input-checkbox>\n </div>\n <div class=\"co-filter-item-checkbox-content\"\n *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n <co-input-checkbox\n [(model)]=\"checkBoxToTextModel\"\n (modelChange)=\"handleModelChange($event)\"\n [readonly]=\"readonly\"\n [label]=\"placeholder\"></co-input-checkbox>\n </div>\n <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n <co-input-text\n [(model)]=\"model\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"></co-input-text>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n <co-input-date\n #dateInput\n [(model)]=\"dateFieldValue\" [readonly]=\"readonly\"\n (modelChange)=\"handleModelChange($event)\"\n ></co-input-date>\n </div>\n <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n <co-input-date-range [readonly]=\"readonly\"\n #dateRangeInput\n [model]=\"[dateRangeStart, dateRangeEnd]\"\n (modelChange)=\"handleModelChange($event)\"\n [placeholder]=\"'Kies datum' | coreLocalize\">\n </co-input-date-range>\n </div>\n </ng-template>\n </div>\n </co-collapsible>\n </div>\n\n ",
13100
13267
  encapsulation: i0.ViewEncapsulation.None,
13101
13268
  changeDetection: i0.ChangeDetectionStrategy.OnPush,
13102
13269
  providers: [{
@@ -15223,6 +15390,8 @@
15223
15390
  exports.InputTextModule = InputTextModule;
15224
15391
  exports.InputTextareaComponent = InputTextareaComponent;
15225
15392
  exports.InputTextareaModule = InputTextareaModule;
15393
+ exports.InputTimeComponent = InputTimeComponent;
15394
+ exports.InputTimeModule = InputTimeModule;
15226
15395
  exports.LevelIndicatorComponent = LevelIndicatorComponent;
15227
15396
  exports.LevelIndicatorModule = LevelIndicatorModule;
15228
15397
  exports.ListOfIconsComponent = ListOfIconsComponent;
@@ -15276,21 +15445,22 @@
15276
15445
  exports.showHideDialog = showHideDialog;
15277
15446
  exports["ɵa"] = InputBoolean;
15278
15447
  exports["ɵb"] = RippleModule;
15279
- exports["ɵba"] = PaginationService;
15280
- exports["ɵbb"] = PaginatePipe;
15281
- exports["ɵbc"] = SimpleGridCellComponent;
15282
- exports["ɵbd"] = ListOfValuesMultiselectPopupComponent;
15283
- exports["ɵbe"] = ConfirmationDialogComponent;
15284
- exports["ɵbf"] = DialogBaseComponent;
15285
- exports["ɵbg"] = CoreDynamicComponentService;
15286
- exports["ɵbh"] = PrependPipeModule;
15287
- exports["ɵbi"] = PrependPipe;
15288
- exports["ɵbj"] = CheckmarkOverlayComponent;
15289
- exports["ɵbk"] = ScannerService;
15290
- exports["ɵbl"] = TooltipModule;
15291
- exports["ɵbm"] = TooltipComponent;
15292
- exports["ɵbn"] = TooltipDirective;
15293
- exports["ɵbo"] = HourSchedulingTestObjectComponent;
15448
+ exports["ɵba"] = ObserveVisibilityDirective;
15449
+ exports["ɵbb"] = PaginationService;
15450
+ exports["ɵbc"] = PaginatePipe;
15451
+ exports["ɵbd"] = SimpleGridCellComponent;
15452
+ exports["ɵbe"] = ListOfValuesMultiselectPopupComponent;
15453
+ exports["ɵbf"] = ConfirmationDialogComponent;
15454
+ exports["ɵbg"] = DialogBaseComponent;
15455
+ exports["ɵbh"] = CoreDynamicComponentService;
15456
+ exports["ɵbi"] = PrependPipeModule;
15457
+ exports["ɵbj"] = PrependPipe;
15458
+ exports["ɵbk"] = CheckmarkOverlayComponent;
15459
+ exports["ɵbl"] = ScannerService;
15460
+ exports["ɵbm"] = TooltipModule;
15461
+ exports["ɵbn"] = TooltipComponent;
15462
+ exports["ɵbo"] = TooltipDirective;
15463
+ exports["ɵbp"] = HourSchedulingTestObjectComponent;
15294
15464
  exports["ɵc"] = MD_RIPPLE_GLOBAL_OPTIONS;
15295
15465
  exports["ɵd"] = CoRippleDirective;
15296
15466
  exports["ɵe"] = CoViewportRulerService;
@@ -15312,9 +15482,9 @@
15312
15482
  exports["ɵu"] = ClickOutsideDirective;
15313
15483
  exports["ɵv"] = ClickOutsideMasterService;
15314
15484
  exports["ɵw"] = CalendarTemplateComponent;
15315
- exports["ɵx"] = PopupShowerService;
15316
- exports["ɵy"] = BaseSimpleGridComponent;
15317
- exports["ɵz"] = ObserveVisibilityDirective;
15485
+ exports["ɵx"] = BaseInputTimeDirective;
15486
+ exports["ɵy"] = PopupShowerService;
15487
+ exports["ɵz"] = BaseSimpleGridComponent;
15318
15488
 
15319
15489
  Object.defineProperty(exports, '__esModule', { value: true });
15320
15490