@colijnit/corecomponents_v12 257.1.22 → 257.1.24
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/colijnit-corecomponents_v12.umd.js +69 -5
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/calendar/calendar-template.component.js +11 -6
- package/esm2015/lib/components/list-of-values/list-of-values.component.js +86 -24
- package/fesm2015/colijnit-corecomponents_v12.js +94 -28
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/list-of-values/list-of-values.component.d.ts +8 -0
- package/package.json +1 -1
|
@@ -7109,9 +7109,14 @@
|
|
|
7109
7109
|
};
|
|
7110
7110
|
CalendarTemplateComponent.prototype.selectDate = function (day) {
|
|
7111
7111
|
if (day) {
|
|
7112
|
-
this.
|
|
7113
|
-
|
|
7114
|
-
|
|
7112
|
+
if (!this.doubleCalendar) {
|
|
7113
|
+
// Single calendar → select and close
|
|
7114
|
+
this.selectedDate = day;
|
|
7115
|
+
this.setAndClose();
|
|
7116
|
+
}
|
|
7117
|
+
else {
|
|
7118
|
+
this.selectedDate = day;
|
|
7119
|
+
this._fillDatesBetweenSelected();
|
|
7115
7120
|
this.dateSelected.emit(new Date(this.selectedDate));
|
|
7116
7121
|
}
|
|
7117
7122
|
}
|
|
@@ -7247,7 +7252,7 @@
|
|
|
7247
7252
|
CalendarTemplateComponent.decorators = [
|
|
7248
7253
|
{ type: i0.Component, args: [{
|
|
7249
7254
|
selector: "calendar-template",
|
|
7250
|
-
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\" (click)=\"setAndClose()\">Instellen</span>\n <span class=\"clear-date-button\" (click)=\"clearDate()\">Wissen</span>\n <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n </div>\n </div>\n ",
|
|
7255
|
+
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 ",
|
|
7251
7256
|
encapsulation: i0.ViewEncapsulation.None
|
|
7252
7257
|
},] }
|
|
7253
7258
|
];
|
|
@@ -11687,12 +11692,16 @@
|
|
|
11687
11692
|
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
|
|
11688
11693
|
_this.icons = exports.CoreComponentsIcon;
|
|
11689
11694
|
_this.multiselect = false;
|
|
11695
|
+
_this.largeCollection = false;
|
|
11690
11696
|
_this.displayField = 'description';
|
|
11691
11697
|
_this.searchDisabled = false;
|
|
11692
11698
|
_this.showChips = true;
|
|
11693
11699
|
_this.isSelectOpen = false;
|
|
11694
11700
|
_this.state = 'default';
|
|
11701
|
+
_this.filterText = '';
|
|
11695
11702
|
_this.selectedModels = [];
|
|
11703
|
+
_this.filteredCollection = [];
|
|
11704
|
+
_this.isLoading = false;
|
|
11696
11705
|
_this._collection = [];
|
|
11697
11706
|
return _this;
|
|
11698
11707
|
}
|
|
@@ -11736,6 +11745,53 @@
|
|
|
11736
11745
|
}
|
|
11737
11746
|
this.selectedModel = model;
|
|
11738
11747
|
};
|
|
11748
|
+
ListOfValuesComponent.prototype.onModelChange = function (text) {
|
|
11749
|
+
var _this = this;
|
|
11750
|
+
this.isLoading = true;
|
|
11751
|
+
clearTimeout(this.debounceTimeout);
|
|
11752
|
+
this.debounceTimeout = setTimeout(function () {
|
|
11753
|
+
_this.applyFilter(text);
|
|
11754
|
+
}, 300);
|
|
11755
|
+
};
|
|
11756
|
+
ListOfValuesComponent.prototype.applyFilter = function (text) {
|
|
11757
|
+
var _a, _b, _c;
|
|
11758
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
11759
|
+
var _d;
|
|
11760
|
+
return __generator(this, function (_e) {
|
|
11761
|
+
switch (_e.label) {
|
|
11762
|
+
case 0:
|
|
11763
|
+
if (!((text === null || text === void 0 ? void 0 : text.length) < 3)) return [3 /*break*/, 2];
|
|
11764
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
11765
|
+
case 1:
|
|
11766
|
+
_e.sent();
|
|
11767
|
+
this.collection = undefined;
|
|
11768
|
+
return [3 /*break*/, 5];
|
|
11769
|
+
case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
|
|
11770
|
+
case 3:
|
|
11771
|
+
_e.sent();
|
|
11772
|
+
_d = this;
|
|
11773
|
+
return [4 /*yield*/, this.collectionLoadFn(text)];
|
|
11774
|
+
case 4:
|
|
11775
|
+
_d.collection = _e.sent();
|
|
11776
|
+
_e.label = 5;
|
|
11777
|
+
case 5:
|
|
11778
|
+
this.filterText = text;
|
|
11779
|
+
if (!this.collection) {
|
|
11780
|
+
this.changeDetector.detectChanges();
|
|
11781
|
+
this.isLoading = false;
|
|
11782
|
+
return [2 /*return*/, []];
|
|
11783
|
+
}
|
|
11784
|
+
this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(function () {
|
|
11785
|
+
return true;
|
|
11786
|
+
});
|
|
11787
|
+
(((_b = this.filteredCollection) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_c = this.filterText) === null || _c === void 0 ? void 0 : _c.length) > 2) ? this.openPopup() : this.closePopup();
|
|
11788
|
+
this.isLoading = false;
|
|
11789
|
+
this.changeDetector.detectChanges();
|
|
11790
|
+
return [2 /*return*/];
|
|
11791
|
+
}
|
|
11792
|
+
});
|
|
11793
|
+
});
|
|
11794
|
+
};
|
|
11739
11795
|
ListOfValuesComponent.prototype.handleInputKeyDown = function (event) {
|
|
11740
11796
|
if (event) {
|
|
11741
11797
|
if (event.altKey && event.code === KeyboardKey.Down && !this._lovPopupComponentRef) {
|
|
@@ -11812,6 +11868,9 @@
|
|
|
11812
11868
|
}
|
|
11813
11869
|
else {
|
|
11814
11870
|
this.selectedModel = option[this.displayField];
|
|
11871
|
+
if (this.largeCollection) {
|
|
11872
|
+
this.filterText = option[this.displayField];
|
|
11873
|
+
}
|
|
11815
11874
|
}
|
|
11816
11875
|
}
|
|
11817
11876
|
this.model = option;
|
|
@@ -11854,6 +11913,9 @@
|
|
|
11854
11913
|
else {
|
|
11855
11914
|
if (this.model) {
|
|
11856
11915
|
this.selectedModel = this.model[this.displayField];
|
|
11916
|
+
if (this.largeCollection) {
|
|
11917
|
+
this.filterText = this.model[this.displayField];
|
|
11918
|
+
}
|
|
11857
11919
|
}
|
|
11858
11920
|
else {
|
|
11859
11921
|
this.selectedModel = '';
|
|
@@ -11865,7 +11927,7 @@
|
|
|
11865
11927
|
ListOfValuesComponent.decorators = [
|
|
11866
11928
|
{ type: i0.Component, args: [{
|
|
11867
11929
|
selector: 'co-list-of-values',
|
|
11868
|
-
template: "\n <co-input-text
|
|
11930
|
+
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 [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 ",
|
|
11869
11931
|
providers: [
|
|
11870
11932
|
OverlayService,
|
|
11871
11933
|
{
|
|
@@ -11880,8 +11942,10 @@
|
|
|
11880
11942
|
model: [{ type: i0.Input }],
|
|
11881
11943
|
parentForOverlay: [{ type: i0.ViewChild, args: ['parentForOverlay', { read: i0.ElementRef },] }],
|
|
11882
11944
|
multiselect: [{ type: i0.HostBinding, args: ['class.custom-height',] }, { type: i0.HostBinding, args: ['class.multi-select',] }, { type: i0.Input }],
|
|
11945
|
+
largeCollection: [{ type: i0.Input }],
|
|
11883
11946
|
displayField: [{ type: i0.Input }],
|
|
11884
11947
|
collection: [{ type: i0.Input }],
|
|
11948
|
+
collectionLoadFn: [{ type: i0.Input }],
|
|
11885
11949
|
leftIconData: [{ type: i0.Input }],
|
|
11886
11950
|
searchPlaceholder: [{ type: i0.Input }],
|
|
11887
11951
|
label: [{ type: i0.Input }],
|