@colijnit/corecomponents_v12 255.1.10 → 255.1.12

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5712,13 +5712,13 @@
     exports.FilterItemMode = void 0;
     (function (FilterItemMode) {
         //This mode makes the Filter display a multi select list
-        // Input will be passed along directly as a string with the following syntax: "?>='choice 1', ?<='choice2'"
+        // Input will be passed along directly as a string with the following syntax: "?='choice 1', ?='choice2'"
         FilterItemMode["Filterlist"] = "filterlist";
         //This mode makes the Filter display a single select list
         // Input will be passed along directly as a simple string.
         FilterItemMode["SingleSelectList"] = "singleSelectList";
         //This mode makes the Filter display a multi select list
-        // Input will be passed along directly as a simple string.
+        // Input will be passed along directly as a simple collection of strings.
         FilterItemMode["SelectListWithStringCollectionOutput"] = "selectListWithStringCollectionOutput";
         //This mode makes the Filter display a multi select list
         // Available choices will need to have their identifying value be a number. The summation of all these numbers will be passed along.
@@ -8007,7 +8007,7 @@
     InputNumberPickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-number-picker',
-                    template: "\n        <div class=\"icon-wrapper\" *ngIf=\"leftIconData\">\n            <co-icon class=\"input-number-picker-icon\" [iconData]=\"leftIconData\" (click)=\"iconClick.emit($event)\"></co-icon>\n            <div class=\"spacer\"></div>\n        </div>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"minus-operator\" [class.select]=\"minSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                       (mousedown)=\"onMinusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n        <input type=\"text\"\n               [tabIndex]=\"readonly ? -1 : 0\"\n               [ngModel]=\"model\"\n               [readonly]=\"readonly\"\n               [disabled]=\"disabled\"\n               [required]=\"required\"\n               (ngModelChange)=\"handleChangeModel($event)\"\n               (keydown)=\"handleInputKeyDown($event)\"\n               (blur)=\"handleBlur()\"/>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"plus-operator\" [class.select]=\"plusSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                       (mousedown)=\"onPlusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n    ",
+                    template: "\n        <div class=\"icon-wrapper\" *ngIf=\"leftIconData\">\n            <co-icon class=\"input-number-picker-icon\" [iconData]=\"leftIconData\" (click)=\"iconClick.emit($event)\"></co-icon>\n            <div class=\"spacer\"></div>\n        </div>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"minus-operator\" [class.select]=\"minSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                       (mousedown)=\"onMinusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n        <input type=\"text\"\n               [tabIndex]=\"readonly ? -1 : 0\"\n               [ngModel]=\"model\"\n               [readonly]=\"readonly\"\n               [disabled]=\"disabled\"\n               [required]=\"required\"\n               [placeholder]=\"label\"\n               (ngModelChange)=\"handleChangeModel($event)\"\n               (keydown)=\"handleInputKeyDown($event)\"\n               (blur)=\"handleBlur()\"/>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"plus-operator\" [class.select]=\"plusSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                       (mousedown)=\"onPlusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n    ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputNumberPickerComponent; })
@@ -14117,50 +14117,65 @@
     ];
 
     var HourSchedulingComponent = /** @class */ (function () {
-        function HourSchedulingComponent(cdRef, datePipe) {
+        function HourSchedulingComponent(cdRef, datePipe, zone) {
+            var _this = this;
             this.cdRef = cdRef;
             this.datePipe = datePipe;
-            this.showClass = true;
-            this.hours = [];
+            this.zone = zone;
+            this.hourLabels = [];
             this.scheduledObjects = {};
+            this.activeHour = null;
+            this.activeHalfHour = null;
             this.draggedObject = null;
             this.customTemplateUsed = false;
             this.timeChangeEvent = new i0.EventEmitter();
+            this.newObjectPlanEvent = new i0.EventEmitter();
+            this.showClass = true;
+            document.addEventListener('click', function () { return _this.onDocumentClick; });
         }
         HourSchedulingComponent.prototype.ngOnInit = function () {
-            if (!this.childProp) {
-                this.startTime = parseInt(this.datePipe.transform(new Date(this.schedule[this.startTimeProp]).toISOString(), 'H:mm'));
-                this.endTime = parseInt(this.datePipe.transform(new Date(this.schedule[this.endTimeProp]).toISOString(), 'H:mm'));
-            }
-            else {
-                this.startTime = parseInt(this.datePipe.transform(new Date(this.schedule[this.childProp][this.startTimeProp]).toISOString(), 'H:mm'));
-                this.endTime = parseInt(this.datePipe.transform(new Date(this.schedule[this.childProp][this.endTimeProp]).toISOString(), 'H:mm'));
-            }
             this.generateTimeBlocks();
+            this.generateScheduledObjects();
+        };
+        HourSchedulingComponent.prototype.ngOnDestroy = function () {
+            var _this = this;
+            document.removeEventListener('click', function () { return _this.onDocumentClick; });
         };
         HourSchedulingComponent.prototype.generateTimeBlocks = function () {
+            var startUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.startTimeProp]));
+            var endUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.endTimeProp]));
+            var interval = 60 * 60;
+            for (var hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
+                var hour = new Date(hourCount * 1000);
+                var hourString = hour.getHours() + ":" + (hour.getMinutes() === 0 ? '00' : hour.getMinutes());
+                this.hourLabels.push(hourString);
+            }
+        };
+        HourSchedulingComponent.prototype.generateScheduledObjects = function () {
             var objectsList = this.schedule[this.objectsProp];
-            for (var hour = this.startTime; hour <= this.endTime; hour++) {
-                this.hours.push(this.formatHour(hour));
-                this.scheduledObjects[this.formatHour(hour)] = this._getObjectsForHour(hour, objectsList);
+            var startUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.startTimeProp]));
+            var endUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.endTimeProp]));
+            var interval = 30 * 60;
+            for (var hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
+                var hour = new Date(hourCount * 1000);
+                var hourString = hour.getHours() + ":" + (hour.getMinutes() === 0 ? '00' : hour.getMinutes());
+                this.scheduledObjects[hourString] = this._getObjectsForHourAndMinutes(hour.getHours(), hour.getMinutes(), objectsList);
             }
         };
-        HourSchedulingComponent.prototype._getObjectsForHour = function (hour, objectsList) {
+        HourSchedulingComponent.prototype._getObjectsForHourAndMinutes = function (hour, minutes, objectsList) {
             var _this = this;
             var objectsForHour = [];
             objectsList.forEach(function (obj) {
-                if (_this.convertToHourNotation(obj[_this.startTimeProp]) === hour) {
+                var split = _this.convertToHourNotation(obj[_this.startTimeProp]).split(':');
+                if (parseInt(split[0]) === hour && parseInt(split[1]) === minutes) {
                     objectsForHour.push(Object.assign({}, obj));
                 }
             });
             return objectsForHour;
         };
-        HourSchedulingComponent.prototype.formatHour = function (hour) {
-            return hour + ":00";
-        };
         HourSchedulingComponent.prototype.onDragStart = function (event, obj) {
             var currentTarget = event.currentTarget;
-            var currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hour-label span');
+            var currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hidden-hour-label');
             var currentHour = currentHourSpan.textContent;
             this.draggedObject = obj;
             event.dataTransfer.setData('text', JSON.stringify({ obj: this.draggedObject, currentHour: currentHour }));
@@ -14170,32 +14185,50 @@
         };
         HourSchedulingComponent.prototype.onDragOver = function (event) {
             event.preventDefault();
+            event.stopPropagation();
+            this.zone.runOutsideAngular(function () {
+                var currentTarget = event.currentTarget;
+                if (!currentTarget.classList.contains('drag-over')) {
+                    currentTarget.classList.add('drag-over');
+                }
+            });
+        };
+        HourSchedulingComponent.prototype.onDragLeave = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.zone.runOutsideAngular(function () {
+                var currentTarget = event.currentTarget;
+                currentTarget.classList.remove('drag-over');
+            });
         };
         HourSchedulingComponent.prototype.onDrop = function (event, hour) {
-            var _a;
+            var _c;
             var _this = this;
             event.preventDefault();
             event.stopPropagation();
-            var data = JSON.parse(event.dataTransfer.getData('text'));
-            if (!data || !data.obj) {
+            var currentTarget = event.currentTarget;
+            currentTarget.classList.remove('drag-over');
+            var parsed = this.tryParseJSONObject(event.dataTransfer.getData("text"));
+            if (!parsed) {
+                this.newObjectPlanEvent.emit({ currentHour: hour, data: parsed.toString() });
                 return;
             }
-            var newStartHour = parseInt(hour.split(':')[0], 10);
-            var newEndHour = newStartHour + 1;
-            var originalStartHour = this.convertToHourNotation(data.obj[this.startTimeProp]);
+            var splitHour = hour.split(':');
+            var newEndMinutes = splitHour[1] === "00" ? 30 : 0;
+            var newEndHour = splitHour[1] === "30" ? (parseInt(splitHour[0]) + 1) : parseInt(splitHour[0]);
+            var originalStartHour = this.convertToHourNotation(parsed.obj[this.startTimeProp]);
             // Get the unique identifier value from the object using the `idProp`
-            var objId = data.obj[this.idProp];
+            var objId = parsed.obj[this.idProp];
             // Ensure we create a new object to avoid mutation issues
-            var updatedObject = Object.assign(Object.assign({}, data.obj), (_a = {}, _a[this.startTimeProp] = this.createDate(newStartHour), _a[this.endTimeProp] = this.createDate(newEndHour), _a));
+            var updatedObject = Object.assign(Object.assign({}, parsed.obj), (_c = {}, _c[this.startTimeProp] = this.createDate(parseInt(splitHour[0]), parseInt(splitHour[1])), _c[this.endTimeProp] = this.createDate(newEndHour, newEndMinutes), _c));
             // Remove the object from its old hour block using its unique id
-            var originalHourBlock = this.formatHour(originalStartHour);
+            var originalHourBlock = this.formatHour(parseInt(originalStartHour.split(':')[0]), parseInt(originalStartHour.split(':')[1]));
             this.scheduledObjects[originalHourBlock] = this.scheduledObjects[originalHourBlock].filter(function (o) { return o[_this.idProp] !== objId; });
             // Add the object to the new hour block
-            var newHourBlock = this.formatHour(newStartHour);
-            if (!this.scheduledObjects[newHourBlock]) {
-                this.scheduledObjects[newHourBlock] = [];
+            if (!this.scheduledObjects[hour]) {
+                this.scheduledObjects[hour] = [];
             }
-            this.scheduledObjects[newHourBlock].push(updatedObject);
+            this.scheduledObjects[hour].push(updatedObject);
             // Clear the dragged object
             this.draggedObject = null;
             this.timeChangeEvent.emit(updatedObject);
@@ -14203,26 +14236,75 @@
             this.cdRef.detectChanges();
         };
         HourSchedulingComponent.prototype.convertToHourNotation = function (date) {
-            return parseInt(this.datePipe.transform(new Date(date).toISOString(), 'H:mm'));
+            return this.datePipe.transform(new Date(date).toISOString(), 'HH:mm');
         };
-        HourSchedulingComponent.prototype.createDate = function (hours) {
+        HourSchedulingComponent.prototype.createDate = function (hours, minutes) {
             var date = new Date();
             date.setHours(hours);
-            date.setMinutes(0, 0, 0);
+            date.setMinutes(minutes ? minutes : 0);
             return date;
         };
+        HourSchedulingComponent.prototype.dateToUnixEpoch = function (date) {
+            return Math.floor(date.getTime()) / 1000;
+        };
+        HourSchedulingComponent.prototype.formatHour = function (hour, minutes) {
+            return hour + ":" + (minutes ? minutes : '00');
+        };
+        HourSchedulingComponent.prototype.addMinutes = function (hour) {
+            var split = hour.split(":");
+            split[1] = "30";
+            return split.join(':');
+        };
+        HourSchedulingComponent.prototype.onDocumentClick = function (event) {
+            var targetElement = event.target;
+            // Clear active state when clicking outside
+            if (!targetElement.closest('.object-display')) {
+                this.activeHalfHour = null;
+                this.cdRef.detectChanges();
+            }
+        };
+        HourSchedulingComponent.prototype.onObjectDisplayClick = function (hour, half) {
+            var _a, _b;
+            var halfHourIdentifier = hour + "-" + half;
+            if (this.activeHalfHour === halfHourIdentifier) {
+                // Deactivate if clicked again
+                this.activeHalfHour = null;
+            }
+            else if (((_a = this.scheduledObjects[hour]) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.scheduledObjects[this.addMinutes(hour)]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                // Activate the half-hour if there are objects
+                this.activeHalfHour = halfHourIdentifier;
+            }
+        };
+        HourSchedulingComponent.prototype.tryParseJSONObject = function (jsonString) {
+            try {
+                var o = JSON.parse(jsonString);
+                // Handle non-exception-throwing cases:
+                // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
+                // but... JSON.parse(null) returns null, and typeof null === "object",
+                // so we must check for that, too. Thankfully, null is falsey, so this suffices:
+                if (o && typeof o === "object") {
+                    return o;
+                }
+            }
+            catch (e) {
+            }
+            return false;
+        };
+        ;
         return HourSchedulingComponent;
     }());
     HourSchedulingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-hour-scheduling',
-                    template: "\n    <div class=\"time-block\" *ngFor=\"let hour of hours\">\n      <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n      <div\n        class=\"object-display\"\n        (dragover)=\"onDragOver($event)\"\n        (drop)=\"onDrop($event, hour)\"\n      >\n        <ng-container *ngIf=\"!customTemplateUsed\">\n          <ng-container *ngIf=\"scheduledObjects[hour]\">\n            <div\n              *ngFor=\"let obj of scheduledObjects[hour]\"\n              class=\"scheduled-object\"\n              [draggable]=\"true\"\n              (dragstart)=\"onDragStart($event, obj)\"\n            >\n              <span class=\"title\" [textContent]=\"obj.title\"></span>\n              <span class=\"sub-title\" [textContent]=\"obj.subTitle\"></span>\n            </div>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"customTemplateUsed\">\n          <ng-template\n            [ngTemplateOutlet]=\"customTemplate\"\n            [ngTemplateOutletContext]=\"{\n              hour: hour,\n              objects: scheduledObjects[hour]\n            }\"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"time-block\" *ngFor=\"let hour of hourLabels\">\n      <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n      <div class=\"object-display\">\n        <div class=\"first-half-hour object-half\"\n             [ngClass]=\"{'has-objects': scheduledObjects[hour]?.length > 0, 'active': activeHalfHour === hour + '-firstHalf'}\"\n             (dragover)=\"onDragOver($event)\"\n             (dragleave)=\"onDragLeave($event)\"\n             (click)=\"onObjectDisplayClick(hour, 'firstHalf')\"\n             (drop)=\"onDrop($event, hour)\">\n          <ng-container *ngIf=\"!customTemplateUsed\">\n            <ng-container *ngIf=\"scheduledObjects[hour]\">\n              <span class=\"hidden-hour-label\" [hidden]=\"true\" [textContent]=\"hour\"></span>\n              <div\n                *ngFor=\"let obj of scheduledObjects[hour]\"\n                class=\"scheduled-object\"\n                [draggable]=\"true\"\n                (dragstart)=\"onDragStart($event, obj)\"\n              >\n                <span class=\"hidden-hour-label\" [hidden]=\"true\" [textContent]=\"addMinutes(hour)\"></span>\n                <span class=\"title\" [textContent]=\"obj.title\"></span>\n                <span class=\"sub-title\" [textContent]=\"obj.subTitle\"></span>\n              </div>\n            </ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"customTemplateUsed\">\n            <ng-template\n              [ngTemplateOutlet]=\"customTemplate\"\n              [ngTemplateOutletContext]=\"{\n              hour: hour,\n              hiddenHour: hour,\n              objects: scheduledObjects[hour]\n            }\"\n            >\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <div class=\"second-half-hour object-half\"\n             [ngClass]=\"{'has-objects': scheduledObjects[addMinutes(hour)]?.length > 0, 'active': activeHalfHour === hour + '-secondHalf'}\"\n             (dragover)=\"onDragOver($event)\"\n             (dragleave)=\"onDragLeave($event)\"\n             (click)=\"onObjectDisplayClick(hour, 'secondHalf')\"\n             (drop)=\"onDrop($event, addMinutes(hour))\">\n          <ng-container *ngIf=\"!customTemplateUsed\">\n            <ng-container *ngIf=\"scheduledObjects[addMinutes(hour)]\">\n              <div\n                *ngFor=\"let obj of scheduledObjects[addMinutes(hour)]\"\n                class=\"scheduled-object\"\n                [draggable]=\"true\"\n                (dragstart)=\"onDragStart($event, obj)\"\n              >\n                <span class=\"title\" [textContent]=\"obj.title\"></span>\n                <span class=\"sub-title\" [textContent]=\"obj.subTitle\"></span>\n                <span class=\"hidden-hour-label\" [hidden]=\"true\" [textContent]=\"addMinutes(hour)\"></span>\n              </div>\n            </ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"customTemplateUsed\">\n            <ng-template\n              [ngTemplateOutlet]=\"customTemplate\"\n              [ngTemplateOutletContext]=\"{\n              hour: hour,\n              hiddenHour: addMinutes(hour),\n              objects: scheduledObjects[addMinutes(hour)]\n            }\"\n            >\n            </ng-template>\n          </ng-container>\n        </div>\n\n\n      </div>\n    </div>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     HourSchedulingComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
-        { type: common.DatePipe }
+        { type: common.DatePipe },
+        { type: i0.NgZone }
     ]; };
     HourSchedulingComponent.propDecorators = {
         schedule: [{ type: i0.Input }],
@@ -14234,7 +14316,8 @@
         customTemplateUsed: [{ type: i0.Input }],
         idProp: [{ type: i0.Input }],
         timeChangeEvent: [{ type: i0.Output }],
-        generateTimeBlocks: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }]
+        newObjectPlanEvent: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }]
     };
 
     var HourSchedulingTestObjectComponent = /** @class */ (function () {