@colijnit/corecomponents_v12 255.1.12 → 255.1.14

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-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,78 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit, TemplateRef } from '@angular/core';
+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 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;
+    }>;
+    moveBetweenCalendarsEvent: EventEmitter<{
+        hour: string;
+        data: SchedulingObject;
+    }>;
+    showClass: boolean;
+    onResize(event: {
+        target: {
+            innerWidth: any;
+        };
+    }): void;
+    clickOut(event: {
+        target: any;
+    }): void;
+    constructor(cdRef: ChangeDetectorRef, 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,114 @@
+
+
+@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: calc(100% - 55px);
+      left: 55px;
+      top: var(--top);
+      height: var(--height);
+      cursor: grab;
+      background: #F5F5FC;
+      border: 1px solid #F5F5FC;
+      transition: background-color 0.3s ease;
+      padding: 0;
+      .top-resizer, .bottom-resizer {
+        height: 5px;
+        position: absolute;
+        width: 100%;
+      }
+
+      .top-resizer {
+        cursor: n-resize;
+        top: 0;
+      }
+
+      .bottom-resizer {
+        cursor: s-resize;
+        bottom: 0;
+      }
+      &:hover {
+        background-color: rgba(26, 115, 232, 0.2);
+      }
+      &.selected {
+        background-color: rgba(26, 115, 232, 0.2);
+        border: 1px solid #1A73E8;
+        cursor: pointer;
+      }
+    }
+
+    .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/lib/components/input-checkbox/style/_material-definition.scss

@@ -5,8 +5,8 @@ $cc-input-checkbox-margin: 0 10px 0 0 !default;
 $cc-input-checkbox-border-radius: $cc-checkbox-border-radius !default;
 $cc-input-checkbox-border-style: solid !default;
 $cc-input-checkbox-border-width: 2px !default;
-$cc-input-checkbox-border-color: $cc-checkbox-border-color !default;
-$cc-input-checkbox-background-color: $cc-checkbox-background-color !default;
+$cc-input-checkbox-border-color: #EAEAF5 !default;
+$cc-input-checkbox-background-color: #EAEAF5 !default;
 $cc-input-checkbox-check-mark-color: $cc-checkbox-check-color !default;
 $cc-input-checkbox-check-mark-thickness: 2px !default;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "255.1.12",
+  "version": "255.1.14",
   "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';