@colijnit/corecomponents_v12 300.1.1 → 300.1.3

package/index.d.ts

@@ -192,6 +192,7 @@ declare enum CoreComponentsIcon {
     Linechart = "linechart",
     LinkedProducts = "linked_products",
     LinkCircle = "link_circle",
+    ListRegular = "list_regular",
     ListView = "list_view",
     Location = "location",
     Lock = "lock",
@@ -2133,6 +2134,7 @@ declare class PopupWindowShellComponent implements AfterViewInit, OnDestroy, OnI
     popupWindow: PopupWindowModel;
     hasMobileSizings: boolean;
     protected _viewContainer: ViewContainerRef;
+    protected _blankViewContainer: ViewContainerRef;
     protected _appPopupButtons: PopupButtonsComponent;
     isError: boolean;
     isWarning: boolean;
@@ -2792,6 +2794,7 @@ declare class ListOfValuesComponent extends BaseInputComponent<any> implements O
     searchPlaceholder: string;
     searchDisabled: boolean;
     showChips: boolean;
+    leftIconClick: EventEmitter<void>;
     showClass(): boolean;
     isSelectOpen: boolean;
     state: string;
@@ -2821,7 +2824,7 @@ declare class ListOfValuesComponent extends BaseInputComponent<any> implements O
     checkModel(): void;
     private _setSelectedModel;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListOfValuesComponent, [{ optional: true; }, null, null, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListOfValuesComponent, "co-list-of-values", never, { "model": { "alias": "model"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; }; "largeCollection": { "alias": "largeCollection"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "collection": { "alias": "collection"; "required": false; }; "collectionLoadFn": { "alias": "collectionLoadFn"; "required": false; }; "collectionLoadFnProp": { "alias": "collectionLoadFnProp"; "required": false; }; "leftIconData": { "alias": "leftIconData"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "searchDisabled": { "alias": "searchDisabled"; "required": false; }; "showChips": { "alias": "showChips"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListOfValuesComponent, "co-list-of-values", never, { "model": { "alias": "model"; "required": false; }; "multiselect": { "alias": "multiselect"; "required": false; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; }; "largeCollection": { "alias": "largeCollection"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "optionIcon": { "alias": "optionIcon"; "required": false; }; "collection": { "alias": "collection"; "required": false; }; "collectionLoadFn": { "alias": "collectionLoadFn"; "required": false; }; "collectionLoadFnProp": { "alias": "collectionLoadFnProp"; "required": false; }; "leftIconData": { "alias": "leftIconData"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "searchDisabled": { "alias": "searchDisabled"; "required": false; }; "showChips": { "alias": "showChips"; "required": false; }; }, { "leftIconClick": "leftIconClick"; }, never, never, false, never>;
 }
 
 interface lovViewModel {
@@ -3745,8 +3748,15 @@ interface SchedulingObject {
 declare class HourSchedulingExpandableComponent implements OnInit {
     private cdRef;
     private eRef;
+    iconCacheService: IconCacheService;
+    readonly icons: typeof CoreComponentsIcon;
     hourLabels: string[];
     scheduledObjects: SchedulingObject[];
+    selectedHour: string;
+    layouts: {
+        leftPercent: number;
+        widthPercent: number;
+    }[];
     private resizing;
     private resizeDirection;
     private initialY;
@@ -3771,6 +3781,7 @@ declare class HourSchedulingExpandableComponent implements OnInit {
         currentHour: string;
         data: string;
     }>;
+    taskCreationEvent: EventEmitter<string>;
     moveBetweenCalendarsEvent: EventEmitter<{
         hour: string;
         data: SchedulingObject;
@@ -3784,7 +3795,7 @@ declare class HourSchedulingExpandableComponent implements OnInit {
     clickOut(event: {
         target: any;
     }): void;
-    constructor(cdRef: ChangeDetectorRef, eRef: ElementRef);
+    constructor(cdRef: ChangeDetectorRef, eRef: ElementRef, iconCacheService: IconCacheService);
     ngOnInit(): void;
     private _findNextObject;
     private _findPreviousObject;
@@ -3806,8 +3817,14 @@ declare class HourSchedulingExpandableComponent implements OnInit {
     convertTZ(date: any, tzString: any): Date;
     convertDateToEuropean(date: Date): Date;
     handleDeselectAll(): void;
+    selectHalfHourBlock(mouseEvent: MouseEvent, hour: string, first?: boolean): void;
+    handleHourTaskCreate(mouseEvent: MouseEvent, hour: string, first?: boolean): void;
+    calculateLeftAndWidthOfObjects(): {
+        leftPercent: number;
+        widthPercent: number;
+    }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<HourSchedulingExpandableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HourSchedulingExpandableComponent, "co-hour-scheduling-expandable", never, { "schedule": { "alias": "schedule"; "required": false; }; "startTimeProp": { "alias": "startTimeProp"; "required": false; }; "endTimeProp": { "alias": "endTimeProp"; "required": false; }; "objectsProp": { "alias": "objectsProp"; "required": false; }; "childProp": { "alias": "childProp"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "idProp": { "alias": "idProp"; "required": false; }; }, { "timeChangeEvent": "timeChangeEvent"; "newObjectPlanEvent": "newObjectPlanEvent"; "moveBetweenCalendarsEvent": "moveBetweenCalendarsEvent"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HourSchedulingExpandableComponent, "co-hour-scheduling-expandable", never, { "schedule": { "alias": "schedule"; "required": false; }; "startTimeProp": { "alias": "startTimeProp"; "required": false; }; "endTimeProp": { "alias": "endTimeProp"; "required": false; }; "objectsProp": { "alias": "objectsProp"; "required": false; }; "childProp": { "alias": "childProp"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "idProp": { "alias": "idProp"; "required": false; }; }, { "timeChangeEvent": "timeChangeEvent"; "newObjectPlanEvent": "newObjectPlanEvent"; "taskCreationEvent": "taskCreationEvent"; "moveBetweenCalendarsEvent": "moveBetweenCalendarsEvent"; }, never, ["*"], false, never>;
 }
 
 declare class HourSchedulingExpandableTemplateComponent {
@@ -3826,12 +3843,8 @@ declare class HourSchedulingExpandableTemplateComponent {
     endTimeProp: string;
     showClass(): boolean;
     onExpandableDragStart(event: DragEvent, obj: SchedulingObject$1): void;
-    calculateLeftAndWidthOfObjects(): {
-        leftPercent: number;
-        widthPercent: number;
-    }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<HourSchedulingExpandableTemplateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HourSchedulingExpandableTemplateComponent, "co-hour-scheduling-expandable-template", never, { "objectTemplate": { "alias": "objectTemplate"; "required": false; }; "objects": { "alias": "objects"; "required": false; }; "onDragStartCustom": { "alias": "onDragStartCustom"; "required": false; }; "onResizeStart": { "alias": "onResizeStart"; "required": false; }; "onSelectBlock": { "alias": "onSelectBlock"; "required": false; }; "startTimeProp": { "alias": "startTimeProp"; "required": false; }; "endTimeProp": { "alias": "endTimeProp"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HourSchedulingExpandableTemplateComponent, "co-hour-scheduling-expandable-template", never, { "layouts": { "alias": "layouts"; "required": false; }; "objectTemplate": { "alias": "objectTemplate"; "required": false; }; "objects": { "alias": "objects"; "required": false; }; "onDragStartCustom": { "alias": "onDragStartCustom"; "required": false; }; "onResizeStart": { "alias": "onResizeStart"; "required": false; }; "onSelectBlock": { "alias": "onSelectBlock"; "required": false; }; "startTimeProp": { "alias": "startTimeProp"; "required": false; }; "endTimeProp": { "alias": "endTimeProp"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class HourSchedulingExpandableTemplateModule {
@@ -3842,7 +3855,7 @@ declare class HourSchedulingExpandableTemplateModule {
 
 declare class HourSchedulingExpandableComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<HourSchedulingExpandableComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<HourSchedulingExpandableComponentModule, [typeof HourSchedulingExpandableComponent], [typeof i2.CommonModule, typeof HourSchedulingComponentModule, typeof HourSchedulingExpandableTemplateModule], [typeof HourSchedulingExpandableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HourSchedulingExpandableComponentModule, [typeof HourSchedulingExpandableComponent], [typeof i2.CommonModule, typeof HourSchedulingComponentModule, typeof HourSchedulingExpandableTemplateModule, typeof IconModule], [typeof HourSchedulingExpandableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<HourSchedulingExpandableComponentModule>;
 }
 

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

@@ -1,26 +1,46 @@
-
-
 @include export-module('cc-hour-scheduling-expandable-layout') {
   .co-hour-scheduling-expandable {
+    --hour-ledger-width: 80px;
+
     display: flex;
     flex-direction: column;
     padding: 30px 0;
     background: #FFF;
 
+    .wrapper {
+      position: relative;
+    }
+
+    .scheduled-objects {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: var(--hour-ledger-width);
+
+      pointer-events: none;
+    }
+
     .custom-scheduled-object {
       position: absolute;
-      left: calc(55px + var(--left));
-      width: calc(var(--width) - 55px);
 
+      left: var(--left);
+      width: var(--width);
       top: var(--top);
       height: var(--height);
+
+      box-sizing: border-box;
+      pointer-events: auto;
+
       cursor: grab;
       background: #F5F5FC;
       border: 1px solid #F5F5FC;
       transition: background-color 0.3s ease;
       padding: 0;
       margin: 0 0.5em;
-      .top-resizer, .bottom-resizer {
+
+      .top-resizer,
+      .bottom-resizer {
         height: 5px;
         position: absolute;
         width: 100%;
@@ -35,46 +55,71 @@
         cursor: s-resize;
         bottom: 0;
       }
+
       &:hover {
       }
+
       &.selected {
         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;
+      background-color: #FFFFFF;
     }
 
     .hour-label {
-      font-weight: bold;
-      width: 60px;
+      box-sizing: border-box;
+      flex: 0 0 var(--hour-ledger-width);
+      width: var(--hour-ledger-width);
       padding: 0 10px;
+
+      font-weight: bold;
       position: relative;
       top: -10px;
     }
+
     .drag-over {
       background-color: rgba(26, 115, 232, 0.2);
       transition: background-color 0.1s ease;
     }
+
     .object-display {
       display: flex;
-      width: 100%;
+      flex: 1 1 auto;
+      min-width: 0;
+      width: auto;
       flex-direction: column;
+
+      .first-half-hour,
+      .second-half-hour {
+        background: none;
+
+        &.selected {
+          background-color: rgba(26, 115, 232, 0.2);
+          transition: background-color 0.1s ease;
+        }
+
+        .toggle-icon {
+          height: 20px;
+          width: 20px;
+          opacity: 0;
+          position: absolute;
+          display: flex;
+          align-items: center;
+          right: 8px;
+          left: auto;
+
+          &.visible {
+            opacity: 1;
+          }
+        }
+      }
+
       .object-half {
         padding: 5px;
         min-height: 30px;
@@ -82,13 +127,16 @@
         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;

package/lib/components/list-of-values/style/_theme.scss

@@ -1,8 +1,8 @@
-@include export-module('co-list-of-values-theme') {
-  .co-list-of-values-popup {
-    .lov-highlight {
-      background-color: $cc-co-list-of-values-highlight-background-color;
-      color: $cc-co-list-of-values-highlight-text-color;
-    }
-  }
-}
+@include export-module('co-list-of-values-theme') {
+  .co-list-of-values-popup {
+    .lov-highlight {
+      background-color: $cc-co-list-of-values-highlight-background-color;
+      color: $cc-co-list-of-values-highlight-text-color;
+    }
+  }
+}

package/package.json

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