@colijnit/sharedcomponents 255.1.16 → 255.1.18

package/lib/components/modify-task-form/components/notification-summary-block/style/_layout.scss

@@ -4,6 +4,7 @@
     .value {
       flex-wrap: wrap;
     }
+
     .notification-email {
       display: flex;
       flex-shrink: 0;
@@ -16,9 +17,11 @@
     height: auto;
     display: flex;
     flex-direction: column;
+
     &:not(.no-border) {
       border: 1px solid $color_border;
     }
+
     .left-seperator {
       &:before {
         content: "|";
@@ -36,126 +39,135 @@
       height: 100%;
     }
 
-  }
-
-  ::ng-deep image-display {
-    height: $block_content_height;
-    width: $block_content_height;
-    span {
-      display: none;
-    }
-
-    .icon-wrapper {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      background: #F8FBFA;
+    .image-display {
       height: $block_content_height;
       width: $block_content_height;
-      border-radius: 50%;
-      border: 1px solid $color_border;
-      overflow: hidden;
-      ::ng-deep icon {
-        height: 60px !important;
-        width: 60px !important;
+
+      span {
+        display: none;
+      }
+
+      .icon-wrapper {
+        display: flex;
         flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        background: #F8FBFA;
+        height: $block_content_height;
+        width: $block_content_height;
+        border-radius: 50%;
+        border: 1px solid $color_border;
+        overflow: hidden;
+
+        .co-icon {
+          height: 60px;
+          width: 60px;
+          flex-shrink: 0;
+        }
+
+        &.small {
+          height: 50px;
+          width: 50px;
+
+          .co-icon {
+            height: 40px;
+            width: 40px;
+          }
+        }
       }
-      &.small {
-        height: 50px;
-        width: 50px;
-        ::ng-deep icon {
-          height: 40px !important;
-          width: 40px !important;
+
+
+      .block-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .expandable-wrapper {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
         }
       }
-    }
 
+      .content-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-left: 10px;
+        min-height: $block_content_height;
+        height: auto;
+        width: 100%;
+      }
 
-    .block-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      .expandable-wrapper {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
+      .value {
+        font-size: 13px;
+        font-weight: bold;
+        color: $color-dark;
+        align-items: center;
       }
-    }
 
-    .content-wrapper {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      margin-left: 10px;
-      min-height: $block_content_height;
-      height: auto;
-      width: 100%;
-    }
+      .title {
+        font-size: 11px;
+        line-height: 13px;
+        color: $color-label;
+      }
 
-    .value {
-      font-size: 13px;
-      font-weight: bold;
-      color: $color-dark;
-      align-items: center;
-    }
+      .activity-summary-block-edit-template {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        justify-content: space-between;
+        z-index: 9000;
+        max-height: 100%;
 
-    .title {
-      font-size: 11px;
-      line-height: 13px;
-      color: $color-label;
-    }
+        .template-wrapper {
+          margin-bottom: 10px;
+        }
 
-    .activity-summary-block-edit-template {
-      display: flex;
-      width: 100%;
-      flex-direction: column;
-      justify-content: space-between;
-      z-index: 9000;
-      max-height: 100%;
+        .co-form {
+          co-list-of-values {
+            margin-bottom: 5px;
 
-      .template-wrapper {
-        margin-bottom: 10px;
-      }
-      ::ng-deep co-form {
-        co-list-of-values {
-          margin-bottom: 5px;
-          &:before {
-            box-shadow: none;
+            &:before {
+              box-shadow: none;
+            }
           }
         }
+
+        .title-wrapper {
+          align-items: center;
+          margin-bottom: 10px;
+        }
+
+        h3:not(.no-margin) {
+          margin-top: 25px;
+        }
       }
-      .title-wrapper {
-        align-items: center;
-        margin-bottom: 10px;
-      }
-      ::ng-deep h3:not(.no-margin) {
-        margin-top: 25px;
+
+      .collapseable-wrapper {
+        padding: 10px;
+        border-bottom: 1px solid $color_border;
       }
-    }
 
-    .collapseable-wrapper {
-      padding: 10px;
-      border-bottom: 1px solid $color_border;
-    }
+      .input-date-window {
+        z-index: 9001;
+      }
 
-    ::ng-deep .input-date-window {
-      z-index: 9001!important;
-    }
+      .initial {
+        position: initial;
+      }
 
-    .initial {
-      position: initial !important;
-    }
+      .center {
+        justify-content: center;
+      }
 
-    .center {
-      justify-content: center;
-    }
-    .planning-row {
-      display: flex;
-      flex-direction: row;
-      gap: 5px;
-      align-items:flex-start;
+      .planning-row {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        align-items: flex-start;
+      }
     }
   }
 }

package/lib/components/modify-task-form/components/status-summary-block/style/_layout.scss

@@ -9,8 +9,8 @@
       }
     }
 
-    ::ng-deep #status_summary_block_edit_template {
-      ::ng-deep arrow-link {
+    #status_summary_block_edit_template {
+      .arrow-link {
         height: 25px;
       }
       .single-field {

package/lib/components/modify-task-form/components/task-details/style/_layout.scss

@@ -14,14 +14,14 @@
       margin-bottom: 15px;
     }
 
-    ::ng-deep .form-input {
+    .form-input {
       width: 100%;
     }
     .details-wrapper {
       display: flex;
       flex-direction: column;
       gap: 5px;
-      ::ng-deep co-input-textarea {
+      .co-input-textarea {
         textarea {
           min-height: 150px;
         }
@@ -29,15 +29,15 @@
           box-shadow: none;
         }
       }
-      ::ng-deep co-input-text {
+      .co-input-text {
         &:before {
           box-shadow: none;
         }
       }
     }
 
-    ::ng-deep arrow-link a {
-      font-size: 17px !important;
+    .arrow-link a {
+      font-size: 17px;
     }
 
     .workflow-dropdown-wrapper {
@@ -77,7 +77,7 @@
           color: #FFFFFF;
           white-space: nowrap;
         }
-        co-icon ::ng-deep {
+        .co-icon {
           width: 10px;
           height: 10px;
           svg {

package/lib/components/modify-task-form/style/_layout.scss

@@ -92,17 +92,17 @@
       }
     }
 
-    ::ng-deep form-expand-container {
+    .form-expand-container {
       border: 1px solid #DCE4EA;
     }
 
-    ::ng-deep tags {
+    .tags {
       display: block;
       padding: 30px;
       min-height: initial;
     }
 
-    ::ng-deep input-notification {
+    .input-notification {
       padding: 15px;
       width: 100%;
     }
@@ -127,11 +127,11 @@
     }
   }
 
-  ::ng-deep #task_modifier_popup {
+  #task_modifier_popup {
     .popup-buttons {
       align-self: center;
     }
-    ::ng-deep .invoice-checkbox {
+    .invoice-checkbox {
       margin: 10px 0;
     }
 

package/lib/components/open-activity-list/components/personal-activity-overview/style/_layout.scss

@@ -1,5 +1,5 @@
 @include export-module('co-personal-activity-overview') {
- .co-personal-activity-overview{
+ .co-personal-activity-overview {
    user-select: none;
    display: block;
    background: rgba(255, 255, 255, 0);
@@ -42,7 +42,7 @@
      }
      &.overdue {
        color: red;
-       .icon ::ng-deep [fill] {
+       .co-icon [fill] {
          fill: red;
        }
      }

package/lib/components/role-email-selector/role-email-selector.component.d.ts

@@ -1,14 +1,16 @@
-import { EventEmitter, OnInit } from "@angular/core";
+import { AfterViewInit, ElementRef, EventEmitter, OnInit, Renderer2 } from "@angular/core";
 import { Icon } from "../../enum/icon.enum";
 import { IconCacheService } from "../../service/icon-cache.service";
 import { WorkflowCategoryType } from "@colijnit/mainapi/build/enum/workflow-category.enum";
 import { RoleEmailaddress } from "@colijnit/mainapi/build/model/role-email-address";
 import { SharedService } from "../../service/shared.service";
-export declare class RoleEmailSelectorComponent implements OnInit {
+export declare class RoleEmailSelectorComponent implements OnInit, AfterViewInit {
     iconService: IconCacheService;
     sharedService: SharedService;
+    private renderer;
     readonly icons: typeof Icon;
     recipientLabel: string;
+    fieldLabel: string;
     extraLabel: string;
     set model(value: string[]);
     get model(): string[];
@@ -25,14 +27,18 @@ export declare class RoleEmailSelectorComponent implements OnInit {
     private _model;
     private _key;
     private _workflowCategoryType;
+    chipsWrapperWidth: number;
     showClass(): boolean;
-    constructor(iconService: IconCacheService, sharedService: SharedService);
+    chipsWrapper: ElementRef;
+    inputText: ElementRef;
+    constructor(iconService: IconCacheService, sharedService: SharedService, renderer: Renderer2);
     ngOnInit(): Promise<void>;
+    ngAfterViewInit(): void;
     fetchRoleEmailAddresses(): Promise<void>;
     roleChosen(roles: RoleEmailaddress[]): void;
     handleKeyPressed(event: KeyboardEvent): void;
     addEmail(): void;
     updateModel(): void;
     removeOptionFromModel(email: string): void;
-    clear(): void;
+    private updateChipsWrapperWidth;
 }

package/lib/components/role-email-selector/style/_layout.scss

@@ -4,14 +4,18 @@
    height: 100%;
    display: flex;
    flex-direction: row;
-   row-gap: 0px;
+   row-gap: 0;
+   justify-content: space-between;
+   position: relative;
    .chips-wrapper {
      display: flex;
      flex-wrap: wrap;
      column-gap: $cc-co-role-email-selector-chips-column-gap;
      row-gap: $cc-co-role-email-selector-chips-row-gap;
      padding: $cc-co-role-email-selector-chips-padding;
-
+     position: absolute;
+     left: 10px;
+     top: 8px;
      .chips {
        font-family: $cc-co-role-email-selector-chip-font-family;
        font-size: $cc-co-role-email-selector-chip-font-size;
@@ -22,6 +26,9 @@
        border-radius: $cc-co-role-email-selector-chip-border-radius; // 5px;
        padding: $cc-co-role-email-selector-chip-padding; // 5px 7px;
        user-select: none;
+       &:last-child {
+         margin-right: 20px;
+       }
      }
      .remove-chip-icon {
        cursor: pointer;

package/lib/components/role-email-selector/style/_material-definition.scss

@@ -1,15 +1,15 @@
-$cc-co-role-email-selector-chips-padding: 0 10px 10px 10px !default;
+$cc-co-role-email-selector-chips-padding: 0 !default;
 $cc-co-role-email-selector-chips-column-gap: 5px !default;
 $cc-co-role-email-selector-chips-row-gap: 2px !default;
 
 $cc-co-role-email-selector-chip-font-family: $cc-font-family !default;
 $cc-co-role-email-selector-chip-font-size: $cc-font-size-small !default;
-$cc-co-role-email-selector-chip-font-color: $cc-color-light !default;
+$cc-co-role-email-selector-chip-font-color: #000 !default;
 
-$cc-co-role-email-selector-chip-background-color: $cc-color-active !default;
+$cc-co-role-email-selector-chip-background-color: #f5f5fc !default;
 $cc-co-role-email-selector-chip-border-radius: 5px !default;
 $cc-co-role-email-selector-chip-padding: 2px 7px !default;
 
 
-$cc-co-role-email-selector-chip-delete-icon-color: $cc-color-light !default;
+$cc-co-role-email-selector-chip-delete-icon-color: $cc-color-icons-dark !default;
 $cc-co-role-email-selector-chip-delete-icon-size: 20px !default;

package/lib/components/stock/style/_layout.scss

@@ -164,8 +164,8 @@
       display: flex;
       justify-content: flex-end;
 
-      co-list-of-values ::ng-deep {
-        co-input-text {
+      .co-list-of-values {
+        .co-input-text {
           height: 100%;
         }
       }

package/lib/components/task-creator/style/_layout.scss

@@ -1,13 +1,18 @@
 @include export-module('co-task-creator-layout') {
  .co-task-creator{
    width: 100%;
-   height: 100%;
    position: relative;
+   display: block;
+   .task-creator-wrapper {
+     margin-left: 40px;
+     box-shadow: 0px 2px 4px 0px #0000001A;
+     border-radius: 5px;
+   }
    .top-rows {
      display: flex;
      flex-direction: column;
      width: 100%;
-     gap: 5px;
+     gap: 0;
      .input-fields {
        display: flex;
        flex-direction: row;
@@ -20,16 +25,11 @@
          flex-direction: column;
          width: 100%;
        }
-
-       .co-input-text {
-         width: 100%;
-         margin-left: 45px;
-       }
-
        .co-list-of-icons {
          position: absolute;
          display: block;
          left: 0;
+         top: 0;
          height: fit-content;
          background: linear-gradient(180deg, rgba(15, 64, 130, 0.04) 3%, rgba(26, 115, 232, 0.04) 90%);
          box-shadow: 0 4px 4px 0 #0000001A;
@@ -87,14 +87,43 @@
            }
          }
        }
+       &.creator-remarks {
+         .co-input-text {
+           width: 100%;
+           margin-left: 0;
+           border-bottom: 4px solid #f5f5fc;
+           &:before {
+             box-shadow: none;
+           }
+         }
+         .co-input-textarea {
+           &.large-remark {
+             min-height: 130px;
+             width: 100%;
+             border-bottom: 4px solid #f5f5fc;
+           }
+           &:before {
+             box-shadow: none;
+           }
+           label {
+             top: 10px;
+             transform: none;
+           }
+           textarea {
+             margin-top: 0;
+             padding-top: 30px;
+             min-height: 130px;
+           }
+         }
+       }
      }
    }
    .extras-buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
-     justify-content: center;
-     margin-top: 10px;
+     justify-content: space-between;
+     padding: 10px;
      gap: 5px;
      .co-button {
        background-color: transparent;

package/lib/enum/icon.enum.d.ts

@@ -39,6 +39,7 @@ export declare enum Icon {
     FilePdfRegular = "file_pdf_regular",
     FilePdfSolid = "file_pdf_solid",
     FileSignatureRegular = "file_signature_regular",
+    FoldersSharpRegular = "folders_sharp_regular",
     HouseBlankRegular = "house_blank_regular",
     IoneWorkflow = "ione_workflow",
     ListUlRegular = "list_ul_regular",
@@ -57,6 +58,7 @@ export declare enum Icon {
     PrintRegular = "print_regular",
     PrintSolid = "print_solid",
     SignatureField = "signature_field",
+    SquarePlusRegular = "square_plus_regular",
     TagRegular = "tag_regular",
     Task = "task",
     Trashbin = "trashbin",

package/lib/enum/keyboard-code.enum.d.ts

@@ -26,5 +26,6 @@ export declare enum KeyboardCode {
     NumpadDecimal = "NumpadDecimal",
     NumpadEnter = "NumpadEnter",
     NumpadSubtract = "NumpadSubtract",
-    Period = "Period"
+    Period = "Period",
+    Tab = "Tab"
 }

package/lib/service/shared.service.d.ts

@@ -25,7 +25,6 @@ import { Remark } from "@colijnit/mainapi/build/model/remark.bo";
 import { DictionaryService } from "./dictionary.service";
 import { ActivityEmailHistory } from "@colijnit/mainapi/build/model/activity-email-history.bo";
 import { ActivityWorkflow } from "@colijnit/mainapi/build/model/activity-workflow";
-import { CoEmailAttachment } from "@colijnit/mainapi/build/model/co-email-attachment.bo";
 export declare class SharedService {
     protected readonly locale: LanguageCode;
     protected options: OptionsService;
@@ -61,7 +60,7 @@ export declare class SharedService {
     getRoleEmailAddressesByWorkflowCategoryAndKey(workflowCategory: string, key: string): Promise<RoleEmailaddress[]>;
     getEmailSenderByWorkflowCategoryAndKey(workflowCategory: string, key: string): Promise<string>;
     getDefaultEmailReportTemplatesForBranch(branchNr: string, reportType: ReportType): Promise<Report[]>;
-    emailViaTemplate(template: Report, emailTo: string, emailBcc: string, reply: string, subject?: string, message?: string, attachments?: CoEmailAttachment[], parameters?: object): Promise<boolean>;
+    emailViaTemplate(template: Report, emailTo: string, emailBcc: string, reply: string, subject?: string, message?: string, attachments?: string[], parameters?: object): Promise<boolean>;
     private _createEmailJob;
     insertEmailHistoryForRemark(remarkId: number, history: ActivityEmailHistory): Promise<boolean>;
     insertEmailHistoryForWork(remarkId: number, history: ActivityEmailHistory): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/sharedcomponents",
-  "version": "255.1.16",
+  "version": "255.1.18",
   "private": false,
   "dependencies": {
     "chart.js": "4.3.0",
@@ -10,7 +10,7 @@
     "@angular/common": ">=12.2.0",
     "@angular/core": ">=12.2.0",
     "@colijnit/articleapi": ">=255.1.1",
-    "@colijnit/mainapi": ">=255.1.5",
+    "@colijnit/mainapi": ">=255.1.4",
     "@colijnit/corecomponents_v12": ">=255.1.8",
     "@colijnit/ioneconnector": ">=255.1.1",
     "@colijnit/sharedapi": ">=1.0.20",