@colijnit/corecomponents_v12 300.1.2 → 300.1.3

package/index.d.ts

@@ -2134,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;
@@ -2793,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;
@@ -2822,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 {
@@ -3751,6 +3753,10 @@ declare class HourSchedulingExpandableComponent implements OnInit {
     hourLabels: string[];
     scheduledObjects: SchedulingObject[];
     selectedHour: string;
+    layouts: {
+        leftPercent: number;
+        widthPercent: number;
+    }[];
     private resizing;
     private resizeDirection;
     private initialY;
@@ -3813,6 +3819,10 @@ declare class HourSchedulingExpandableComponent implements OnInit {
     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"; "taskCreationEvent": "taskCreationEvent"; "moveBetweenCalendarsEvent": "moveBetweenCalendarsEvent"; }, never, ["*"], false, never>;
 }
@@ -3833,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 {

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,53 +55,55 @@
         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 {
+      .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;
@@ -90,7 +112,6 @@
           display: flex;
           align-items: center;
           right: 8px;
-
           left: auto;
 
           &.visible {
@@ -99,7 +120,6 @@
         }
       }
 
-
       .object-half {
         padding: 5px;
         min-height: 30px;
@@ -107,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/package.json

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