@colijnit/corecomponents_v12 255.1.11 → 255.1.13

package/lib/components/hour-scheduling/components/hour-scheduling-test-object/style/_layout.scss

@@ -1,5 +1,7 @@
 @include export-module('cc-hour-scheduling-test-object-layout') {
   .co-hour-scheduling-test-object {
+    display: flex;
+    height: 100%;
     .object-content {
       display: flex;
       flex-direction: column;

package/lib/components/hour-scheduling/components/hour-scheduling-test-object/style/_theme.scss

@@ -1,4 +1,4 @@
-@include export-module('cc-test-object-theme') {
-  .co-test-object {
+@include export-module('cc-hour-scheduling-test-object-theme') {
+  .co-hour-scheduling-test-object {
   }
 }

package/lib/components/hour-scheduling/hour-scheduling.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, ChangeDetectorRef, TemplateRef, EventEmitter } from '@angular/core';
+import { OnInit, ChangeDetectorRef, TemplateRef, EventEmitter, NgZone } from '@angular/core';
 import { DatePipe } from '@angular/common';
 interface SchedulingObject {
     start: number;
@@ -10,7 +10,7 @@ interface SchedulingObject {
 export declare class HourSchedulingComponent implements OnInit {
     private cdRef;
     private datePipe;
-    showClass: boolean;
+    private zone;
     hourLabels: string[];
     scheduledObjects: {
         [hour: string]: SchedulingObject[];
@@ -31,7 +31,8 @@ export declare class HourSchedulingComponent implements OnInit {
         currentHour: string;
         data: string;
     }>;
-    constructor(cdRef: ChangeDetectorRef, datePipe: DatePipe);
+    showClass: boolean;
+    constructor(cdRef: ChangeDetectorRef, datePipe: DatePipe, zone: NgZone);
     ngOnInit(): void;
     ngOnDestroy(): void;
     generateTimeBlocks(): void;

package/lib/components/hour-scheduling/style/_layout.scss

@@ -22,6 +22,7 @@
     }
     .drag-over {
       background-color: rgba(26, 115, 232, 0.2);
+      transition: background-color 0.3s ease;
     }
     .object-display {
       display: flex;
@@ -33,6 +34,7 @@
         border-style: solid;
         border-color: #F5F5FC;
         border-width: 1px 0 1px 0;
+        transition: background-color 0.3s ease;
         &.has-objects {
           cursor: grab;
           background: #F5F5FC;

package/lib/components/hour-scheduling-expandable/components/hour-scheduling-expandable-template/hour-scheduling-expandable-template.component.d.ts

@@ -0,0 +1,10 @@
+import { TemplateRef } from "@angular/core";
+export declare class HourSchedulingExpandableTemplateComponent {
+    objectTemplate: TemplateRef<any>;
+    objects: Object[];
+    onDragStartCustom: Function;
+    onResizeStart: Function;
+    onSelectBlock: Function;
+    showClass(): boolean;
+    onExpandableDragStart(event: DragEvent, obj: Object, onDragStartCustom: Function): void;
+}

package/lib/components/hour-scheduling-expandable/components/hour-scheduling-expandable-template/style/_layout.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-hour-scheduling-expandable-template-layout') {
+  .co-hour-scheduling-expandable-template {
+  }
+}

package/lib/components/hour-scheduling-expandable/components/hour-scheduling-expandable-template/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-hour-scheduling-expandable-template-theme') {
+  .co-hour-scheduling-expandable-template {
+  }
+}

package/lib/components/hour-scheduling-expandable/components/hour-scheduling-expandable-template/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/components/hour-scheduling-expandable/hour-scheduling-expandable.component.d.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit, TemplateRef } from '@angular/core';
+import { DatePipe } from '@angular/common';
+interface SchedulingObject {
+    start: Date;
+    end: Date;
+    title?: string;
+    subTitle?: string;
+    height?: number;
+    top?: number;
+    id: number | string;
+    selected: boolean;
+    showTopResizer?: boolean;
+    showBottomResizer?: boolean;
+    [key: string]: any;
+}
+export declare class HourSchedulingExpandableComponent implements OnInit {
+    private cdRef;
+    private datePipe;
+    private eRef;
+    hourLabels: string[];
+    scheduledObjects: SchedulingObject[];
+    private resizing;
+    private resizeDirection;
+    private initialY;
+    private initialHeight;
+    private initialTop;
+    private currentResizingObject;
+    private currentDraggingObject;
+    private MIN_HEIGHT;
+    private _schedule;
+    set schedule(value: Object);
+    get schedule(): Object;
+    startTimeProp: string;
+    endTimeProp: string;
+    objectsProp: string;
+    childProp: string;
+    customTemplate: TemplateRef<any>;
+    idProp: string;
+    timeChangeEvent: EventEmitter<Object>;
+    newObjectPlanEvent: EventEmitter<{
+        currentHour: string;
+        data: string;
+    }>;
+    showClass: boolean;
+    onResize(event: {
+        target: {
+            innerWidth: any;
+        };
+    }): void;
+    clickOut(event: {
+        target: any;
+    }): void;
+    constructor(cdRef: ChangeDetectorRef, datePipe: DatePipe, eRef: ElementRef);
+    ngOnInit(): void;
+    private _calculateSchedulingObjectProperties;
+    private _findNextObject;
+    private _findPreviousObject;
+    renderObjects(): void;
+    onSelectBlock(obj: SchedulingObject): void;
+    onDragStartCustom(obj: SchedulingObject): void;
+    handleDrop(dragEvent: DragEvent, hour: string): void;
+    allowDrop(event: DragEvent, hour: string): boolean;
+    onResizeStart(event: MouseEvent, obj: SchedulingObject, direction: 'top' | 'bottom'): void;
+    onResizing(event: MouseEvent): void;
+    onResizeEnd(event: MouseEvent): void;
+    timeDifference(date1: Date, date2: Date): number;
+    generateTimeBlocks(): void;
+    dateToUnixEpoch(date: Date): number;
+    addMinutes(date: Date, minutes: number): Date;
+    tryParseJSONObject(jsonString: string): any;
+    addHalfHour(hour: string): string;
+    convertTZ(date: any, tzString: any): Date;
+    convertDateToEuropean(date: Date): Date;
+    handleDeselectAll(): void;
+}
+export {};

package/lib/components/hour-scheduling-expandable/hour-scheduling-expandable.module.d.ts

@@ -0,0 +1,2 @@
+export declare class HourSchedulingExpandableComponentModule {
+}

package/lib/components/hour-scheduling-expandable/style/_layout.scss

@@ -0,0 +1,103 @@
+
+
+@include export-module('cc-hour-scheduling-expandable-layout') {
+  .co-hour-scheduling-expandable {
+    display: flex;
+    flex-direction: column;
+    padding: 30px 0;
+    background: #FFF;
+
+    .custom-scheduled-object {
+      position: absolute;
+      width: 75%;
+      margin: 0 0 0 50px;
+      top: var(--top);
+      height: var(--height);
+      border: 1px solid black;
+
+      .top-resizer, .bottom-resizer {
+        height: 5px;
+      }
+
+      .top-resizer {
+        cursor: n-resize;
+      }
+
+      .bottom-resizer {
+        cursor: s-resize;
+      }
+
+      &.selected {
+        border: 1px solid red;
+      }
+    }
+
+    .wrapper {
+      position: relative;
+    }
+
+    .scheduled-objects {
+      display: flex;
+      flex-direction: column;
+     height: 100%;
+
+    }
+    .time-block {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      background-color: #ffffff;
+    }
+
+    .hour-label {
+      font-weight: bold;
+      width: 60px;
+      padding: 0 10px;
+      position: relative;
+      top: -10px;
+    }
+    .drag-over {
+      background-color: rgba(26, 115, 232, 0.2);
+      transition: background-color 0.3s ease;
+    }
+    .object-display {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      .object-half {
+        padding: 5px;
+        min-height: 30px;
+        border-style: solid;
+        border-color: #F5F5FC;
+        border-width: 1px 0 1px 0;
+        transition: background-color 0.3s ease;
+        &.has-objects {
+          cursor: grab;
+          background: #F5F5FC;
+          border: 1px solid #F5F5FC;
+          &:hover {
+            background-color: rgba(26, 115, 232, 0.2);
+          }
+          &.active {
+            background-color: rgba(26, 115, 232, 0.2);
+            border: 1px solid #1A73E8;
+          }
+        }
+      }
+    }
+
+    .scheduled-object {
+      padding: 0.5em;
+      background-color: #4CAF50;
+      color: white;
+      border-radius: 3px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+
+      .title {
+        font-weight: bold;
+      }
+    }
+  }
+}

package/lib/components/hour-scheduling-expandable/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-hour-scheduling-theme') {
+  .co-hour-scheduling {
+  }
+}

package/lib/components/hour-scheduling-expandable/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "255.1.11",
+  "version": "255.1.13",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {

package/public-api.d.ts

@@ -127,4 +127,8 @@ export * from './lib/service/base-module.service';
 export * from './lib/translation/core-components-translation.module';
 export * from './lib/translation/core-components-translation.service';
 export * from './lib/components/hour-scheduling/hour-scheduling.component';
+export * from './lib/components/hour-scheduling-expandable/hour-scheduling-expandable.component';
+export * from './lib/components/hour-scheduling-expandable/components/hour-scheduling-expandable-template/hour-scheduling-expandable-template.component';
 export * from './lib/components/hour-scheduling/hour-scheduling.module';
+export * from './lib/components/hour-scheduling-expandable/hour-scheduling-expandable.module';
+export * from './lib/components/hour-scheduling-expandable/hour-scheduling-expandable.module';