@colijnit/corecomponents_v12 12.2.10 → 12.2.12

package/fesm2015/colijnit-corecomponents_v12.js

@@ -12,9 +12,9 @@ import { PlaneBufferGeometry, Mesh, Vector2, Vector3, PlaneGeometry, MeshPhongMa
 import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
 import * as TWEEN from '@tweenjs/tween.js';
 import 'hammerjs';
+import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { ArrayUtils as ArrayUtils$1 } from '@colijnit/ioneconnector/build/utils/array-utils';
 import { DEFAULT_GET_OBJECT_CONFIGURATION_PARAMS } from '@colijnit/ioneconnector/build/model/default-get-object-configurations-params';
@@ -4406,20 +4406,23 @@ CoDialogComponent.decorators = [
                 selector: 'co-dialog',
                 template: `
         <div class="co-dialog-overlay" (click)="handleOverlayClick($event)"></div>
-        <div class="co-dialog-wrapper" [ngClass]="customCssClass ? customCssClass : undefined" @showHideDialog>
-            <div class="dialog-header" *ngIf="!borderless">
-                <div class="dialog-header-caption" *ngIf="headerTemplate">
-                    <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
+        <div class="co-dialog-placeholder">
+            <div class="co-dialog-wrapper" [ngClass]="customCssClass ? customCssClass : undefined" @showHideDialog cdkDrag>
+                <div *ngIf="!borderless" class="dialog-drag-handle" cdkDragHandle></div>
+                <div class="dialog-header" *ngIf="!borderless">
+                    <div class="dialog-header-caption" *ngIf="headerTemplate">
+                        <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
+                    </div>
+                    <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="handleCloseDialog($event)">
+                        <co-icon [icon]="icons.CrossSkinny"></co-icon>
+                    </div>
                 </div>
-                <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="handleCloseDialog($event)">
-                    <co-icon [icon]="icons.CrossSkinny"></co-icon>
+                <div class="dialog-content co-small-scrollbar" [ngClass]="customCssClass ? customCssClass : undefined">
+                    <ng-content></ng-content>
+                </div>
+                <div class="dialog-footer" *ngIf="footerTemplate">
+                    <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
                 </div>
-            </div>
-            <div class="dialog-content co-small-scrollbar" [ngClass]="customCssClass ? customCssClass : undefined">
-                <ng-content></ng-content>
-            </div>
-            <div class="dialog-footer" *ngIf="footerTemplate">
-                <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
             </div>
         </div>
     `,
@@ -4463,7 +4466,8 @@ CoDialogModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    IconModule
+                    IconModule,
+                    DragDropModule
                 ],
                 declarations: [CoDialogComponent],
                 exports: [CoDialogComponent]
@@ -4898,7 +4902,7 @@ class FormComponent {
 }
 FormComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-form",
+                selector: "co-form-test",
                 template: `
     <ng-content></ng-content>
   `,
@@ -5462,6 +5466,24 @@ InputDatePickerComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-input-date',] }]
 };
 
+class OverlayParentDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnDestroy() {
+        this.elementRef = undefined;
+    }
+}
+OverlayParentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[overlayParent]',
+                exportAs: 'overlayParent'
+            },] }
+];
+OverlayParentDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
 class OverlayDirective {
     constructor(elementRef) {
         /**
@@ -5480,7 +5502,15 @@ class OverlayDirective {
     }
     set parent(value) {
         if (value) {
-            this._parent = value instanceof ElementRef ? value : value.elementRef;
+            if (value instanceof ElementRef) {
+                this._parent = value.nativeElement;
+            }
+            else if (value instanceof OverlayParentDirective) {
+                this._parent = value.elementRef.nativeElement;
+            }
+            else {
+                this._parent = value;
+            }
         }
         else {
             if (this._parent && this._resizeObserver) {
@@ -5521,14 +5551,14 @@ class OverlayDirective {
             root: null
         });
         if (this._parent) {
-            this._intersectionObserver.observe(this._parent.nativeElement); // observe parent for visibility
+            this._intersectionObserver.observe(this._parent); // observe parent for visibility
         }
         this._resizeObserver.observe(document.body);
     }
     _checkAndPlaceElement() {
-        if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
+        if (this._elementRef && this._elementRef.nativeElement && this._parent) {
             const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
-            const parentBoundingRect = this._parent.nativeElement.getBoundingClientRect();
+            const parentBoundingRect = this._parent.getBoundingClientRect();
             let parentRect = {};
             if (!this.inline) {
                 parentRect = {
@@ -5541,10 +5571,10 @@ class OverlayDirective {
             }
             else {
                 parentRect = {
-                    bottom: this._parent.nativeElement.offsetTop + parentBoundingRect.height,
-                    right: this._parent.nativeElement.offsetLeft + parentBoundingRect.width,
-                    left: this._parent.nativeElement.offsetLeft,
-                    top: this._parent.nativeElement.offsetTop,
+                    bottom: this._parent.offsetTop + parentBoundingRect.height,
+                    right: this._parent.offsetLeft + parentBoundingRect.width,
+                    left: this._parent.offsetLeft,
+                    top: this._parent.offsetTop,
                     width: parentBoundingRect.width
                 };
             }
@@ -5607,24 +5637,6 @@ OverlayDirective.propDecorators = {
     fullSize: [{ type: Input }]
 };
 
-class OverlayParentDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngOnDestroy() {
-        this.elementRef = undefined;
-    }
-}
-OverlayParentDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[overlayParent]',
-                exportAs: 'overlayParent'
-            },] }
-];
-OverlayParentDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
 class OverlayModule {
 }
 OverlayModule.decorators = [
@@ -6250,6 +6262,8 @@ ClickoutsideModule.decorators = [
 class CalendarTemplateComponent {
     constructor() {
         this.icons = CoreComponentsIcon;
+        this.showWeekNumbers = true;
+        this.weekNumbers = [];
         this.locale = "nl-NL";
         this.highlightDaysBetweenDates = false;
         this.dateSelected = new EventEmitter();
@@ -6322,6 +6336,7 @@ class CalendarTemplateComponent {
         }
         this.generateCalendar();
         this._fillDatesBetweenSelected();
+        this.calculateWeekNumbers();
     }
     nextMonth() {
         if (this.workingMonth === 11) {
@@ -6333,6 +6348,7 @@ class CalendarTemplateComponent {
         }
         this.generateCalendar();
         this._fillDatesBetweenSelected();
+        this.calculateWeekNumbers();
     }
     prevYear() {
         this.workingYear--;
@@ -6351,6 +6367,7 @@ class CalendarTemplateComponent {
         this.monthHeader = `${month} ${year}`;
         this.yearHeader = `${year}`;
         this.generateYearSelectionYears();
+        this.calculateWeekNumbers();
     }
     _setInitialValues() {
         this.workingDay = this.selectedDate ? this.selectedDate : new Date();
@@ -6480,6 +6497,28 @@ class CalendarTemplateComponent {
     _capitalizeFirstLetter(value) {
         return value.charAt(0).toUpperCase() + value.slice(1);
     }
+    calculateWeekNumbers() {
+        this.weekNumbers = [];
+        let weekNumber = null;
+        for (let i = 0; i < this.daysInMonth.length; i++) {
+            const day = this.daysInMonth[i];
+            if (day) {
+                // Start of a new week or first day of the month, calculate and set weekNumber
+                weekNumber = this.getISOWeek(day);
+                // Check if the weekNumber is not already in the array
+                if (!this.weekNumbers.includes(weekNumber)) {
+                    this.weekNumbers.push(weekNumber);
+                }
+            }
+        }
+    }
+    getISOWeek(date) {
+        const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+        d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+        const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+        const weekNumber = Math.ceil(((d.valueOf() - yearStart.valueOf()) / 86400000 + 1) / 7);
+        return weekNumber;
+    }
 }
 CalendarTemplateComponent.decorators = [
     { type: Component, args: [{
@@ -6518,23 +6557,29 @@ CalendarTemplateComponent.decorators = [
             </ng-container>
           </div>
         </div>
-
-        <div class="calendar-body" *ngIf="showCalendarBody">
-          <div class="day-names">
-            <div class="weekday" *ngFor="let dayName of dayNames" [textContent]="dayName"></div>
+        <div class="calendar-wrapper">
+          <div class="week-wrapper" *ngIf="showWeekNumbers && showCalendarBody">
+            <div class="week-number" [textContent]="'W'"></div>
+            <div class="week-number" *ngFor="let weekNumber of weekNumbers">
+              {{ weekNumber }}
+            </div>
           </div>
-          <div *ngFor="let day of daysInMonth" class="calendar-day"
-               [class.highlighted-day]="daysToHighlight.includes(day)"
-               [class.selected-day]="selectedDate && (day && day.getTime() === selectedDate.getTime()) ||
-               secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||
-               temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())"
-
-               (click)="selectDate(day)"
-               (mouseover)="handleMouseOverDay(day)">
-            <ng-container *ngIf="day">
-              <div class="day-number"
-                   [textContent]="day.getDate()"></div>
-            </ng-container>
+          <div class="calendar-body" *ngIf="showCalendarBody">
+            <div class="day-names">
+              <div class="weekday" *ngFor="let dayName of dayNames" [textContent]="dayName"></div>
+            </div>
+            <div *ngFor="let day of daysInMonth" class="calendar-day"
+                 [class.highlighted-day]="daysToHighlight.includes(day)"
+                 [class.selected-day]="selectedDate && (day && day.getTime() === selectedDate.getTime()) ||
+            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||
+            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())"
+                 (click)="selectDate(day)"
+                 (mouseover)="handleMouseOverDay(day)">
+              <!-- Day number -->
+              <ng-container *ngIf="day">
+                <div class="day-number" [textContent]="day.getDate()"></div>
+              </ng-container>
+            </div>
           </div>
         </div>
       </div>
@@ -6543,6 +6588,7 @@ CalendarTemplateComponent.decorators = [
             },] }
 ];
 CalendarTemplateComponent.propDecorators = {
+    showWeekNumbers: [{ type: Input }],
     locale: [{ type: Input }],
     highlightDaysBetweenDates: [{ type: Input }],
     selectedDate: [{ type: Input }],
@@ -6694,6 +6740,12 @@ class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
     showClass() {
         return true;
     }
+    handleFirstInputClick(event) {
+        event.stopPropagation();
+    }
+    handleSecondInputClick(event) {
+        event.stopPropagation();
+    }
     handleDatesSelected(dates) {
         this.setModel(dates);
     }
@@ -6769,7 +6821,7 @@ InputDateRangePickerComponent.decorators = [
                 selector: 'co-input-date-range',
                 template: `
       <div class="inputs-wrapper" overlayParent #parentForOverlay="overlayParent">
-        <co-input-text class="no-focus-line custom-height"
+        <co-input-text #firstInput class="no-focus-line custom-height"
                        [(model)]="firstDateAsString"
                        [noClickFocus]="true"
                        [pattern]="'yyyy-MM-dd'"
@@ -6779,8 +6831,9 @@ InputDateRangePickerComponent.decorators = [
                        [placeholder]="placeholder"
                        (blur)="handleFirstDateChanged(firstDateAsString)"
                        (clearIconClick)="clearDate(0)"
+                       (click)="handleFirstInputClick($event)"
         ></co-input-text>
-        <co-input-text class="no-focus-line custom-height"
+        <co-input-text #secondInput class="no-focus-line custom-height"
                        [(model)]= "secondDateAsString"
                        [noClickFocus]="true"
                        [pattern]="'yyyy-MM-dd'"
@@ -6789,6 +6842,7 @@ InputDateRangePickerComponent.decorators = [
                        (rightIconClick)="toggleCalendar()"
                        (blur)="handleSecondDateChanged(secondDateAsString)"
                        (clearIconClick)="clearDate(1)"
+                       (click)="handleSecondInputClick($event)"
         ></co-input-text>
       </div>
     `,
@@ -6806,6 +6860,8 @@ InputDateRangePickerComponent.decorators = [
             },] }
 ];
 InputDateRangePickerComponent.propDecorators = {
+    firstInput: [{ type: ViewChild, args: ['firstInput',] }],
+    secondInput: [{ type: ViewChild, args: ['secondInput',] }],
     showClass: [{ type: HostBinding, args: ['class.co-input-date-range',] }]
 };
 
@@ -9482,7 +9538,7 @@ SimpleGridComponent.decorators = [
             [class.disabled]="isRowDisabled(row)"
           [class.editing]="rowIndex === editRowIndex" *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index" cdkDrag
           (click)="handleClickRow($event, rowIndex, row)" (dblclick)="handleDblClickRow($event, rowIndex, row)" (visibilityChange)="rowVisible.next(row)">
-          <co-form class="simple-grid-row-form">
+          <co-form-test class="simple-grid-row-form">
             <ng-container *ngIf="isSingleColumnRow(row)">
               <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumns.length">
                 <co-simple-grid-cell
@@ -9506,7 +9562,7 @@ SimpleGridComponent.decorators = [
                 </td>
               </ng-container>
             </ng-container>
-          </co-form>
+          </co-form-test>
         </tr>
       </tbody>
     </table>