@colijnit/corecomponents_v12 260.1.3 → 260.1.5

package/fesm2015/colijnit-corecomponents_v12.js

@@ -5441,6 +5441,7 @@ class InputDatePickerComponent extends BaseInputDatePickerDirective {
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
         this.firstDayOfWeek = '';
+        this.showClearButton = true;
         super._markAsOnPush();
     }
     showClass() {
@@ -5528,6 +5529,7 @@ InputDatePickerComponent.decorators = [
                      [pattern]="'yyyy-MM-dd'"
                      [type]="'date'"
                      [placeholder]="placeholder"
+                     [showClearButton]="showClearButton"
                      (leftIconClick)="leftIconClick.emit($event)"
                      (rightIconClick)="toggleCalendar(true)"
                      (modelChange)="modelAsString = $event"
@@ -5561,6 +5563,7 @@ InputDatePickerComponent.ctorParameters = () => [
 ];
 InputDatePickerComponent.propDecorators = {
     firstDayOfWeek: [{ type: Input }],
+    showClearButton: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ['class.co-input-date',] }]
 };
 
@@ -11225,6 +11228,7 @@ class ListOfValuesPopupComponent {
         this.iconCacheService = iconCacheService;
         this._elementRef = _elementRef;
         this.multiselect = false;
+        this.showToggleAll = false;
         this.displayField = 'description';
         this.searchDisabled = false;
         this.modelChange = new EventEmitter();
@@ -11232,6 +11236,7 @@ class ListOfValuesPopupComponent {
         this.keyDown = new EventEmitter();
         this.viewModels = [];
         this.viewModelsMain = [];
+        this.allSelected = false;
         this._collection = [];
         this._searchTerm = '';
         this._lovItems = [];
@@ -11377,6 +11382,27 @@ class ListOfValuesPopupComponent {
             this._scrollIntoView();
         }
     }
+    selectAll() {
+        if (this.viewModels.length > 0) {
+            this.viewModels.forEach(vm => vm.checked = true);
+            this.selectOptions();
+        }
+    }
+    toggleAll() {
+        if (!this.allSelected) {
+            if (this.viewModels.length > 0) {
+                this.viewModels.forEach(vm => vm.checked = true);
+                this.selectOptions();
+            }
+        }
+        else {
+            if (this.viewModels.length > 0) {
+                this.viewModels.forEach(vm => vm.checked = false);
+                this.selectOptions();
+            }
+        }
+        this.allSelected = !this.allSelected;
+    }
     _prepareViewModelsMain() {
         this.viewModelsMain.length = 0;
         this.collection.forEach(m => {
@@ -11417,36 +11443,40 @@ ListOfValuesPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-list-of-values-popup',
                 template: `
-    <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
-         id="lov-popup"
-         role="listbox" [tabindex]="-1"
-         (clickOutside)="closePopup.emit($event)">
-      <co-input-search *ngIf="multiselect"
-                       tabindex="-1"
-                       [(model)]="searchTerm"
-                       [placeholder]="searchPlaceholder"
-                       (keydown)="handleInputKeyDown($event)"
-                       (modelChange)="filterViewModels()"></co-input-search>
-      <ul class="dropdown-list" #dropDownList>
-        <li
-          #lovItem
-          *ngFor="let viewModel of viewModels; let index = index"
-          [class.selected]="viewModel === highLightModel || viewModels.length === 1"
-          (click)="selectViewModel(viewModel, !multiselect)"
-          role="option">
-          <ng-container *ngIf="!multiselect">
-              <co-icon *ngIf="viewModel.model[optionIcon]" class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
-              </co-icon>
-            <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-          </ng-container>
-          <ng-container *ngIf="multiselect">
-            <co-input-checkbox [model]="viewModel.checked"
-                               (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
-            <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-          </ng-container>
-        </li>
-      </ul>
-    </div>
+      <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
+           id="lov-popup"
+           role="listbox" [tabindex]="-1"
+           (clickOutside)="closePopup.emit($event)">
+          <co-input-search *ngIf="multiselect"
+                           tabindex="-1"
+                           [(model)]="searchTerm"
+                           [placeholder]="searchPlaceholder"
+                           (keydown)="handleInputKeyDown($event)"
+                           (modelChange)="filterViewModels()"></co-input-search>
+          <div class="row gap" *ngIf="showToggleAll && multiselect">
+              <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
+              <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
+          </div>
+          <ul class="dropdown-list" #dropDownList>
+              <li
+                      #lovItem
+                      *ngFor="let viewModel of viewModels; let index = index"
+                      [class.selected]="viewModel === highLightModel || viewModels.length === 1"
+                      (click)="selectViewModel(viewModel, !multiselect)"
+                      role="option">
+                  <ng-container *ngIf="!multiselect">
+                      <co-icon *ngIf="viewModel.model[optionIcon]" class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
+                      </co-icon>
+                      <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
+                  </ng-container>
+                  <ng-container *ngIf="multiselect">
+                      <co-input-checkbox [model]="viewModel.checked"
+                                         (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
+                      <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
+                  </ng-container>
+              </li>
+          </ul>
+      </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -11461,6 +11491,7 @@ ListOfValuesPopupComponent.propDecorators = {
     inputSearch: [{ type: ViewChild, args: [InputSearchComponent,] }],
     model: [{ type: Input }],
     multiselect: [{ type: Input }],
+    showToggleAll: [{ type: Input }],
     displayField: [{ type: Input }],
     searchPlaceholder: [{ type: Input }],
     customCssClass: [{ type: Input }],
@@ -11487,6 +11518,7 @@ class ListOfValuesComponent extends BaseInputComponent {
         this.elementRef = elementRef;
         this.icons = CoreComponentsIcon;
         this.multiselect = false;
+        this.showToggleAll = false;
         this.largeCollection = false;
         this.displayField = 'description';
         this.searchDisabled = false;
@@ -11615,6 +11647,7 @@ class ListOfValuesComponent extends BaseInputComponent {
             searchPlaceholder: this.searchPlaceholder,
             displayField: this.displayField,
             multiselect: this.multiselect,
+            showToggleAll: this.showToggleAll,
             model: this.model,
             collection: this.collection,
             optionIcon: this.optionIcon,
@@ -11772,6 +11805,7 @@ ListOfValuesComponent.propDecorators = {
     model: [{ type: Input }],
     parentForOverlay: [{ type: ViewChild, args: ['parentForOverlay', { read: ElementRef },] }],
     multiselect: [{ type: HostBinding, args: ['class.custom-height',] }, { type: HostBinding, args: ['class.multi-select',] }, { type: Input }],
+    showToggleAll: [{ type: Input }],
     largeCollection: [{ type: Input }],
     displayField: [{ type: Input }],
     optionIcon: [{ type: Input }],
@@ -11907,7 +11941,8 @@ ListOfValuesModule.decorators = [
                     OverlayModule,
                     ClickoutsideModule,
                     IconModule,
-                    InputSearchModule
+                    InputSearchModule,
+                    CoreComponentsTranslationModule
                 ],
                 declarations: [
                     ListOfValuesComponent,
@@ -15056,6 +15091,11 @@ class HourSchedulingExpandableComponent {
         this.currentDraggingObject = obj;
     }
     handleDrop(dragEvent, hour) {
+        dragEvent.preventDefault();
+        dragEvent.stopPropagation();
+        if (!this.schedule[this.objectsProp] || !this.schedule[this.objectsProp].find((object) => object[this.idProp] === this.currentDraggingObject.id) && this.currentDraggingObject) {
+            this.currentDraggingObject = undefined;
+        }
         if (this.currentDraggingObject) {
             //The order was scheduled and needs to be moved
             let start = this.currentDraggingObject.start;
@@ -15073,17 +15113,17 @@ class HourSchedulingExpandableComponent {
                 scheduledObject.top = this.timeDifference(this.schedule[this.childProp][this.startTimeProp], scheduledObject.start);
                 scheduledObject.height = this.timeDifference(scheduledObject.start, scheduledObject.end);
                 this.timeChangeEvent.emit(originalObject);
-                this.currentDraggingObject = undefined;
             }
+            this.currentDraggingObject = undefined;
         }
         else {
             let parsed = this.tryParseJSONObject(dragEvent.dataTransfer.getData("text"));
             if (!parsed) {
                 this.newObjectPlanEvent.emit({ currentHour: hour, data: parsed.toString() });
-                return;
             }
-            //Move between calendars is still too buggy
-            this.moveBetweenCalendarsEvent.emit({ hour: hour, data: parsed });
+            else {
+                this.moveBetweenCalendarsEvent.emit({ hour: hour, data: parsed });
+            }
         }
     }
     allowDrop(event, hour) {
@@ -15303,8 +15343,10 @@ class HourSchedulingExpandableTemplateComponent {
         return true;
     }
     onExpandableDragStart(event, obj, onDragStartCustom) {
-        onDragStartCustom === null || onDragStartCustom === void 0 ? void 0 : onDragStartCustom.call(obj);
-        event.dataTransfer.setData("text", JSON.stringify({ obj }));
+        event.dataTransfer.setData('text', JSON.stringify({ obj }));
+        if (onDragStartCustom) {
+            onDragStartCustom === null || onDragStartCustom === void 0 ? void 0 : onDragStartCustom.call(obj);
+        }
     }
     calculateLeftAndWidthOfObjects() {
         const layoutData = new Array(this._objects.length);
@@ -15316,8 +15358,9 @@ class HourSchedulingExpandableTemplateComponent {
         const overlapGroups = [];
         const processed = new Set();
         for (let i = 0; i < this._objects.length; i++) {
-            if (processed.has(i))
+            if (processed.has(i)) {
                 continue;
+            }
             const group = [i];
             const objA = this._objects[i];
             const startA = new Date(objA.start);
@@ -15350,37 +15393,37 @@ class HourSchedulingExpandableTemplateComponent {
 }
 HourSchedulingExpandableTemplateComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-hour-scheduling-expandable-template",
+                selector: 'co-hour-scheduling-expandable-template',
                 template: `
-       
-            <div
-                    *ngFor="let obj of objects"
-                    [class]="'custom-scheduled-object'"
-                    [class.selected]="obj.selected"
-                    [draggable]="!obj.selected"
-                    [style.--height]="obj.height + 'px'"
-                    [style.--top]="obj.top + 'px'"
-                    [style.--left]="layouts[objects.indexOf(obj)].leftPercent + '%'"
-                    [style.--width]="layouts[objects.indexOf(obj)].widthPercent + '%'"
-                    (click)="onSelectBlock(obj)"
-                    (dragstart)="onExpandableDragStart($event, obj, onDragStartCustom(obj) )">
 
-                <div
-                        *ngIf="obj.selected"
-                        class="top-resizer"
-                        (mousedown)="onResizeStart($event, obj, 'top')"></div>
-                <ng-template
-                        [ngTemplateOutlet]="objectTemplate"
-                        [ngTemplateOutletContext]="{
+      <div
+              *ngFor="let obj of objects"
+              [class]="'custom-scheduled-object'"
+              [class.selected]="obj.selected"
+              [draggable]="!obj.selected"
+              [style.--height]="obj.height + 'px'"
+              [style.--top]="obj.top + 'px'"
+              [style.--left]="layouts[objects.indexOf(obj)].leftPercent + '%'"
+              [style.--width]="layouts[objects.indexOf(obj)].widthPercent + '%'"
+              (click)="onSelectBlock(obj)"
+              (dragstart)="onExpandableDragStart($event, obj, onDragStartCustom(obj) )">
+
+          <div
+                  *ngIf="obj.selected"
+                  class="top-resizer"
+                  (mousedown)="onResizeStart($event, obj, 'top')"></div>
+          <ng-template
+                  [ngTemplateOutlet]="objectTemplate"
+                  [ngTemplateOutletContext]="{
               object: obj
             }"
-                >
-                </ng-template>
-                <div *ngIf="obj.selected"
-                     class="bottom-resizer"
-                     (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
-            </div>
-    `,
+          >
+          </ng-template>
+          <div *ngIf="obj.selected"
+               class="bottom-resizer"
+               (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
+      </div>
+  `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -15392,7 +15435,7 @@ HourSchedulingExpandableTemplateComponent.propDecorators = {
     onSelectBlock: [{ type: Input }],
     startTimeProp: [{ type: Input }],
     endTimeProp: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-hour-scheduling-expandable-template",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-hour-scheduling-expandable-template',] }]
 };
 
 class HourSchedulingExpandableTemplateModule {