@colijnit/sharedcomponents 255.1.17 → 255.1.18

package/fesm2015/colijnit-sharedcomponents.js

@@ -1645,6 +1645,7 @@ var Icon;
     Icon["FilePdfRegular"] = "file_pdf_regular";
     Icon["FilePdfSolid"] = "file_pdf_solid";
     Icon["FileSignatureRegular"] = "file_signature_regular";
+    Icon["FoldersSharpRegular"] = "folders_sharp_regular";
     Icon["HouseBlankRegular"] = "house_blank_regular";
     Icon["IoneWorkflow"] = "ione_workflow";
     Icon["ListUlRegular"] = "list_ul_regular";
@@ -1663,6 +1664,7 @@ var Icon;
     Icon["PrintRegular"] = "print_regular";
     Icon["PrintSolid"] = "print_solid";
     Icon["SignatureField"] = "signature_field";
+    Icon["SquarePlusRegular"] = "square_plus_regular";
     Icon["TagRegular"] = "tag_regular";
     Icon["Task"] = "task";
     Icon["Trashbin"] = "trashbin";
@@ -1711,6 +1713,7 @@ const IconSvg = {
     "file_pdf_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M320 464C328.8 464 336 456.8 336 448V416H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V416H48V448C48 456.8 55.16 464 64 464H320zM256 160C238.3 160 224 145.7 224 128V48H64C55.16 48 48 55.16 48 64V192H0V64C0 28.65 28.65 0 64 0H229.5C246.5 0 262.7 6.743 274.7 18.75L365.3 109.3C377.3 121.3 384 137.5 384 154.5V192H336V160H256zM88 224C118.9 224 144 249.1 144 280C144 310.9 118.9 336 88 336H80V368C80 376.8 72.84 384 64 384C55.16 384 48 376.8 48 368V240C48 231.2 55.16 224 64 224H88zM112 280C112 266.7 101.3 256 88 256H80V304H88C101.3 304 112 293.3 112 280zM160 240C160 231.2 167.2 224 176 224H200C226.5 224 248 245.5 248 272V336C248 362.5 226.5 384 200 384H176C167.2 384 160 376.8 160 368V240zM192 352H200C208.8 352 216 344.8 216 336V272C216 263.2 208.8 256 200 256H192V352zM336 224C344.8 224 352 231.2 352 240C352 248.8 344.8 256 336 256H304V288H336C344.8 288 352 295.2 352 304C352 312.8 344.8 320 336 320H304V368C304 376.8 296.8 384 288 384C279.2 384 272 376.8 272 368V240C272 231.2 279.2 224 288 224H336z\"/></svg>",
     "file_pdf_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 224H88c30.9 0 56 25.1 56 56s-25.1 56-56 56H80v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V320 240c0-8.8 7.2-16 16-16zm24 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H80v48h8zm72-64c0-8.8 7.2-16 16-16h24c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H176c-8.8 0-16-7.2-16-16V240zm32 112h8c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16h-8v96zm96-128h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H304v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H304v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V304 240c0-8.8 7.2-16 16-16z\"/></svg>",
     "file_signature_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M64 464H320c8.8 0 16-7.2 16-16v-6.7l39.8-9.9c2.8-.7 5.6-1.6 8.2-2.7V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3v49.1l-48 48V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zm96-115l-9.8 32.8c-6.1 20.3-24.8 34.2-46 34.2H96c-8.8 0-16-7.2-16-16s7.2-16 16-16h8.2c7.1 0 13.3-4.6 15.3-11.4l14.9-49.5c3.4-11.3 13.8-19.1 25.6-19.1s22.2 7.7 25.6 19.1l11.6 38.6c7.4-6.2 16.8-9.7 26.8-9.7c15.9 0 30.4 9 37.5 23.2l4.4 8.8h25.6l12-48.2c1.4-5.6 4.3-10.8 8.4-14.9L441.1 191.8l71 71L382.9 391.9c-4.1 4.1-9.2 7-14.9 8.4l-60.1 15c-1.1 .3-2.1 .4-3.2 .5c-.8 .1-1.5 .2-2.3 .2H256c-6.1 0-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2 2.1-8.8 5.5l-8.8 17.7c-2.9 5.9-9.2 9.4-15.7 8.8s-12.1-5.1-13.9-11.3L160 349zM549.8 139.7l14.4 14.4c15.6 15.6 15.6 40.9 0 56.6l-29.4 29.4-71-71 29.4-29.4c15.6-15.6 40.9-15.6 56.6 0z\"/></svg>",
+    "folders_sharp_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M304 32L144 32 96 32l0 48 0 256 0 48 48 0 384 0 48 0 0-48 0-192 0-48-48 0L368 96 304 32zm64 112l160 0 0 192-384 0 0-256 140.1 0 49.9 49.9L348.1 144l19.9 0zM48 120l0-24L0 96l0 24L0 456l0 24 24 0 432 0 24 0 0-48-24 0L48 432l0-312z\"/></svg>",
     "house_blank_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M303.5 5.7c-9-7.6-22.1-7.6-31.1 0l-264 224c-10.1 8.6-11.3 23.7-2.8 33.8s23.7 11.3 33.8 2.8L64 245.5V432c0 44.2 35.8 80 80 80H432c44.2 0 80-35.8 80-80V245.5l24.5 20.8c10.1 8.6 25.3 7.3 33.8-2.8s7.3-25.3-2.8-33.8l-264-224zM464 204.8V432c0 17.7-14.3 32-32 32H144c-17.7 0-32-14.3-32-32V204.8L288 55.5 464 204.8z\"/></svg>",
     "ione_workflow": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g display=\"none\"></g><g ><g ><g><g><rect x=\"34.3\" y=\"20\" fill=\"#484F60\" width=\"1.5\" height=\"3.7\"/><g><polygon fill=\"#484F60\" points=\"32,22.8 35,28 38,22.8 \"/></g></g><path fill=\"#484F60\" d=\"M18.5,21.5v7h-7v-7H18.5 M20,20H10v10h10V20L20,20z\"/><path fill=\"#484F60\" d=\"M38.5,11.5v7h-7v-7H38.5 M40,10H30v10h10V10L40,10z\"/><path fill=\"#484F60\" d=\"M38.5,31.5v7h-7v-7H38.5 M40,30H30v10h10V30L40,30z\"/><g><polygon fill=\"#484F60\" points=\"15.8,20 14.3,20 14.3,14.3 23.7,14.3 23.7,15.8 15.8,15.8 \"/><g><polygon fill=\"#484F60\" points=\"22.8,18 28,15 22.8,12 \"/></g></g><g><polygon fill=\"#484F60\" points=\"23.7,35.8 14.3,35.8 14.3,30 15.8,30 15.8,34.3 23.7,34.3 \"/><g><polygon fill=\"#484F60\" points=\"22.8,38 28,35 22.8,32 \"/></g></g></g></g><g display=\"none\"></g></g><g display=\"none\"></g><g display=\"none\"></g><g display=\"none\"></g><g display=\"none\"></g><g display=\"none\"><g display=\"inline\"><rect y=\"50\" opacity=\"0.25\" fill=\"#FFFFFF\" width=\"50\" height=\"50\"/></g><g display=\"inline\"><g><rect y=\"-45\" opacity=\"0.5\" fill=\"none\" width=\"50\" height=\"45\"/><text transform=\"matrix(1 0 0 1 7.375 -37.9002)\"><tspan x=\"0\" y=\"0\" font-family=\"'MyriadPro-Regular'\" font-size=\"10px\">Opmaak </tspan><tspan x=\"5.4\" y=\"12\" font-family=\"'MyriadPro-Regular'\" font-size=\"10px\">item / </tspan><tspan x=\"-1.4\" y=\"24\" font-family=\"'MyriadPro-Regular'\" font-size=\"10px\">structuur </tspan><tspan x=\"8.1\" y=\"36\" font-family=\"'MyriadPro-Regular'\" font-size=\"10px\">item </tspan></text></g></g><g display=\"inline\"><g><rect y=\"0\" opacity=\"0.25\" fill=\"#FFFFFF\" width=\"50\" height=\"50\"/><rect y=\"5\" opacity=\"0.5\" fill=\"none\" width=\"50\" height=\"45\"/><text transform=\"matrix(1 0 0 1 5.0054 12.0999)\" font-family=\"'MyriadPro-Regular'\" font-size=\"10px\">Workflow</text></g></g></g></svg>",
     "list_ul_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M64 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm120 8c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L184 72zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-304 0zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-304 0zM96 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 384a32 32 0 1 0 0 64 32 32 0 1 0 0-64z\"/></svg>",
@@ -1729,6 +1732,7 @@ const IconSvg = {
     "print_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M111.1 48h254.1L400 81.94V160H448V81.94c0-12.73-5.057-24.94-14.06-33.94l-33.94-33.94C391 5.057 378.8 0 366.1 0H111.1C85.49 0 64.01 21.48 64 47.98l.002 82.28c-.002 0 .002 0 0 0L64 160h48.01L111.1 48zM440 192H72C32.3 192 0 224.3 0 264v112c0 13.25 10.75 24 24 24H80V480c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32v-80h56c13.25 0 24-10.75 24-24v-112C512 224.3 479.7 192 440 192zM384 464H128v-96h256V464zM464 352h-32c0-17.67-14.33-32-32-32h-288c-17.67 0-32 14.33-32 32h-32V264c0-13.23 10.77-24 24-24h368c13.23 0 24 10.77 24 24V352z\"/></svg>",
     "print_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M448 192H64C28.65 192 0 220.7 0 256v96c0 17.67 14.33 32 32 32h32v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h32c17.67 0 32-14.33 32-32V256C512 220.7 483.3 192 448 192zM384 448H128v-96h256V448zM432 296c-13.25 0-24-10.75-24-24c0-13.27 10.75-24 24-24s24 10.73 24 24C456 285.3 445.3 296 432 296zM128 64h229.5L384 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C387.4 3.375 379.2 0 370.8 0H96C78.34 0 64 14.33 64 32v128h64V64z\"/></svg>",
     "signature_field": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M20.1,25.42a1.1,1.1,0,1,1,1.27,1.45l-3.3,9.07A63.13,63.13,0,0,1,28,28.3l1.26-12-8.26-3-6.77,10A62.4,62.4,0,0,1,17,35.54l3.3-9.07A1.12,1.12,0,0,1,20.1,25.42Z\" fill=\"#484f60\"/><rect x=\"21.62\" y=\"11.43\" width=\"8.79\" height=\"2.34\" transform=\"translate(5.88 -8.14) rotate(20)\" fill=\"#484f60\"/><path d=\"M18.11,37.48c1.44,2.65,4.58,2.94,7.23,2.1,1.41-.44,2.2-1.49,3.44-2.06,2.42-1.1,3.13,1.2,5.36,1.37.42,0,2-.65,1.54-.68-2.55-.19-2.93-3.13-5.51-2.65a4.9,4.9,0,0,0-1.64.71c-.77.49-1.31,1.62-2.07,2l-4.61.56A3.38,3.38,0,0,1,20,37c-.22-.41-2,.28-1.85.5Z\" fill=\"#484f60\"/></svg>",
+    "square_plus_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z\"/></svg>",
     "tag_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M197.5 32c17 0 33.3 6.7 45.3 18.7l176 176c25 25 25 65.5 0 90.5L285.3 450.7c-25 25-65.5 25-90.5 0l-176-176C6.7 262.7 0 246.5 0 229.5V80C0 53.5 21.5 32 48 32H197.5zM48 229.5c0 4.2 1.7 8.3 4.7 11.3l176 176c6.2 6.2 16.4 6.2 22.6 0L384.8 283.3c6.2-6.2 6.2-16.4 0-22.6l-176-176c-3-3-7.1-4.7-11.3-4.7H48V229.5zM112 112a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\"/></svg>",
     "task": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\"><g ><g><path d=\"M23.82,3.53h-.88v1.32h.88c.24,0,.44,.2,.44,.44V28.24c0,.24-.2,.44-.44,.44H6.18c-.24,0-.44-.2-.44-.44V5.29c0-.24,.2-.44,.44-.44h.88v-1.32h-.88c-.97,0-1.76,.79-1.76,1.76V28.24c0,.97,.79,1.76,1.76,1.76H23.82c.97,0,1.76-.79,1.76-1.76V5.29c0-.97-.79-1.76-1.76-1.76Z\" fill=\"#484f60\"/><path d=\"M17.65,2.65c0,1.46-1.19,2.65-2.65,2.65s-2.65-1.19-2.65-2.65h-3.09c-.49,0-.88,.4-.88,.88v2.65c0,.49,.4,.88,.88,.88h11.47c.49,0,.88-.4,.88-.88V3.53c0-.49-.4-.88-.88-.88h-3.09Z\" fill=\"#484f60\"/><path d=\"M15,0C13.54,0,12.35,1.19,12.35,2.65s1.19,2.65,2.65,2.65,2.65-1.19,2.65-2.65S16.46,0,15,0Zm0,3.97c-.73,0-1.32-.59-1.32-1.32s.59-1.32,1.32-1.32,1.32,.59,1.32,1.32-.59,1.32-1.32,1.32Z\" fill=\"#484f60\"/><rect x=\"12.09\" y=\"11.51\" width=\"10\" height=\"1\" fill=\"#484f60\"/><rect x=\"12.09\" y=\"17.51\" width=\"10\" height=\"1\" fill=\"#484f60\"/><rect x=\"12.09\" y=\"23.51\" width=\"10\" height=\"1\" fill=\"#484f60\"/><path d=\"M10.09,23.51v1h-1v-1h1m1-1h-3v3h3v-3h0Z\" fill=\"#484f60\"/><polygon points=\"9.44 20.01 7.91 17.86 8.52 17.43 9.33 18.57 10.61 16.01 11.27 16.35 9.44 20.01\" fill=\"#484f60\"/><polygon points=\"9.44 14.01 7.91 11.86 8.52 11.43 9.33 12.57 10.61 10.01 11.27 10.35 9.44 14.01\" fill=\"#484f60\"/></g></g></svg>",
     "trashbin": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M144 400C144 408.8 136.8 416 128 416C119.2 416 112 408.8 112 400V176C112 167.2 119.2 160 128 160C136.8 160 144 167.2 144 176V400zM240 400C240 408.8 232.8 416 224 416C215.2 416 208 408.8 208 400V176C208 167.2 215.2 160 224 160C232.8 160 240 167.2 240 176V400zM336 400C336 408.8 328.8 416 320 416C311.2 416 304 408.8 304 400V176C304 167.2 311.2 160 320 160C328.8 160 336 167.2 336 176V400zM310.1 22.56L336.9 64H432C440.8 64 448 71.16 448 80C448 88.84 440.8 96 432 96H416V432C416 476.2 380.2 512 336 512H112C67.82 512 32 476.2 32 432V96H16C7.164 96 0 88.84 0 80C0 71.16 7.164 64 16 64H111.1L137 22.56C145.8 8.526 161.2 0 177.7 0H270.3C286.8 0 302.2 8.526 310.1 22.56V22.56zM148.9 64H299.1L283.8 39.52C280.9 34.84 275.8 32 270.3 32H177.7C172.2 32 167.1 34.84 164.2 39.52L148.9 64zM64 432C64 458.5 85.49 480 112 480H336C362.5 480 384 458.5 384 432V96H64V432z\" fill=\"#484f60\"></path></svg>",
@@ -5619,6 +5623,7 @@ var KeyboardCode;
     KeyboardCode["NumpadEnter"] = "NumpadEnter";
     KeyboardCode["NumpadSubtract"] = "NumpadSubtract";
     KeyboardCode["Period"] = "Period";
+    KeyboardCode["Tab"] = "Tab";
 })(KeyboardCode || (KeyboardCode = {}));
 
 class KeyPadComponent {
@@ -10379,26 +10384,36 @@ FilesUploadComponent.decorators = [
                                  [handleSort]="true"
                                  dragHandle="tile"
                                  [enabled]="!noDragDropOrdering">
+              <div class="upload-add-wrapper">
                 <co-file-upload *ngIf="canAdd && addWithButton" class="add-file"
-                             isAddingTile
-                             icon="plus_round_open"
-                             [link]="true"
-                             [label]="label | localize"
-                             (mouseover)="mouseOverAdd = true"
-                             (mouseout)="mouseOverAdd = false"
-                             (click)="handleAddClick()"></co-file-upload> <!-- (click)="handleAddClick()" -->
-                <co-file-upload *ngFor="let file of documents" class="tile"
-                             [readonly]="file.readonly || readonly"
-                             [class.hidden]="hideAvatars ? file.isAvatar : false"
-                             [file]="file"
-                             [label]="file.fileName"
-                             [showTrashCan]="canDelete"
-                             [fileSavesOnPopupOkClick]="fileSavesOnPopupOkClick"
-                             [isEditable]="isEditable"
-                             [customImageClick]="customImageClick"
-                             (imageClick)="imageClick.emit($event)"
-                             (deleteClick)="handleDelete(file)"
-                             (editClick)="handleEditDocumentClick($event)"></co-file-upload>
+                                isAddingTile
+                                icon="plus_round_open"
+                                [link]="true"
+                                [label]="label | localize"
+                                (mouseover)="mouseOverAdd = true"
+                                (mouseout)="mouseOverAdd = false"
+                                (click)="handleAddClick()"></co-file-upload> <!-- (click)="handleAddClick()" -->
+                <co-file-upload *ngIf="!documents || documents.length === 0" class="add-dropzone"
+                                isAddingTile
+                                [dropzone]="true"
+                                [link]="true"
+                                [label]="'DROPZONE_TEXT' | localize"
+                                (mouseover)="mouseOverAdd = true"
+                                (mouseout)="mouseOverAdd = false"
+                                (click)="handleAddClick()"></co-file-upload>
+              </div>
+              <co-file-upload *ngFor="let file of documents" class="tile"
+                           [readonly]="file.readonly || readonly"
+                           [class.hidden]="hideAvatars ? file.isAvatar : false"
+                           [file]="file"
+                           [label]="file.fileName"
+                           [showTrashCan]="canDelete"
+                           [fileSavesOnPopupOkClick]="fileSavesOnPopupOkClick"
+                           [isEditable]="isEditable"
+                           [customImageClick]="customImageClick"
+                           (imageClick)="imageClick.emit($event)"
+                           (deleteClick)="handleDelete(file)"
+                           (editClick)="handleEditDocumentClick($event)"></co-file-upload>
             </drag-drop-container>
             <span class="maxuploadsize" textContent="getMaxFileSizeNotition()" [class.show]="mouseOverAdd"></span>
             <input #inputFile [accept]="acceptedUploadFormats" (change)="handleFileChange($event)" type="file" hidden multiple/>
@@ -10981,6 +10996,7 @@ class FileUploadComponent {
         this.icons = Icon;
         // Element clickable
         this.link = false;
+        this.dropzone = false;
         this.readonly = false;
         // Is tile an 'adding' tile
         this.isAddingTile = false;
@@ -11113,6 +11129,7 @@ FileUploadComponent.decorators = [
             </ng-template>
             <co-icon *ngIf="showTrashCan && !readonly" [iconData]="iconService.getIcon(icons.Trashbin)" class="trash" (click)="onDeleteClick()"></co-icon>
             <co-icon tile-render-image-content *ngIf="icon" class="dark add-button" [icon]="icon"></co-icon>
+            <co-icon tile-render-image-content *ngIf="dropzone" class="dark add-button" [iconData]="iconService.getIcon(icons.FoldersSharpRegular)"></co-icon>
         </co-tile-render>
     `,
                 encapsulation: ViewEncapsulation.None
@@ -11129,6 +11146,7 @@ FileUploadComponent.propDecorators = {
     file: [{ type: Input }],
     icon: [{ type: Input }],
     link: [{ type: Input }],
+    dropzone: [{ type: Input }],
     readonly: [{ type: Input }],
     isAddingTile: [{ type: Input }],
     fileSavesOnPopupOkClick: [{ type: Input }],
@@ -14167,11 +14185,13 @@ NotificationSummaryBlockComponent.propDecorators = {
 };
 
 class RoleEmailSelectorComponent {
-    constructor(iconService, sharedService) {
+    constructor(iconService, sharedService, renderer) {
         this.iconService = iconService;
         this.sharedService = sharedService;
+        this.renderer = renderer;
         this.icons = Icon;
         this.recipientLabel = 'RECIPIENTS';
+        this.fieldLabel = '';
         this.extraLabel = '';
         this.modelChange = new EventEmitter();
         this.emailAddressesAvailableForDropdown = [];
@@ -14180,9 +14200,11 @@ class RoleEmailSelectorComponent {
         this._roleEmailAddresses = [];
         this._customEmailAddresses = [];
         this._model = [];
+        this.chipsWrapperWidth = 0;
     }
     set model(value) {
         this._model = value;
+        this.updateChipsWrapperWidth();
     }
     get model() {
         return this._model;
@@ -14213,6 +14235,9 @@ class RoleEmailSelectorComponent {
             this.fetchRoleEmailAddresses();
         });
     }
+    ngAfterViewInit() {
+        this.updateChipsWrapperWidth();
+    }
     fetchRoleEmailAddresses() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.workflowCategoryType !== undefined && this.key !== undefined) {
@@ -14234,7 +14259,11 @@ class RoleEmailSelectorComponent {
         this.updateModel();
     }
     handleKeyPressed(event) {
-        if (event.code === KeyboardCode.Enter) {
+        if (event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter) {
+            this.addEmail();
+        }
+        else if (event.code === KeyboardCode.Tab) {
+            event.preventDefault();
             this.addEmail();
         }
     }
@@ -14248,51 +14277,63 @@ class RoleEmailSelectorComponent {
     updateModel() {
         this.model = this._roleEmailAddresses.concat(this._customEmailAddresses);
         this.modelChange.emit(this.model);
+        setTimeout(() => {
+            this.updateChipsWrapperWidth();
+        });
     }
     removeOptionFromModel(email) {
-        if (this._roleEmailAddresses.indexOf(email) > -1) {
-            this._roleEmailAddresses.splice(this._roleEmailAddresses.indexOf(email), 1);
+        const indexRole = this._roleEmailAddresses.indexOf(email);
+        if (indexRole > -1) {
+            this._roleEmailAddresses.splice(indexRole, 1);
         }
-        if (this._customEmailAddresses.indexOf(email) > -1) {
-            this._customEmailAddresses.splice(this._customEmailAddresses.indexOf(email), 1);
+        const indexCustom = this._customEmailAddresses.indexOf(email);
+        if (indexCustom > -1) {
+            this._customEmailAddresses.splice(indexCustom, 1);
         }
         this.updateModel();
     }
+    updateChipsWrapperWidth() {
+        if (this.chipsWrapper) {
+            this.chipsWrapperWidth = this.chipsWrapper.nativeElement.offsetWidth;
+        }
+    }
 }
 RoleEmailSelectorComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-role-email-selector",
                 template: `
-
-
-      <div class="chips-wrapper">
+      <co-input-text #inputText [(model)]="emailModel" [ngStyle]="{'padding-left.px': chipsWrapperWidth}" [placeholder]="fieldLabel | localize" (keyDown)="handleKeyPressed($event)"
+      ></co-input-text>
+      <co-list-of-values [multiselect]="true" [label]="recipientLabel | localize" [(model)]="chosenEmailAddressesInDropDown" [showChips]="false"
+                         [collection]="emailAddressesAvailableForDropdown" [displayField]="'role'"
+                         (modelChange)="roleChosen($event)">
+      </co-list-of-values>
+      <div class="chips-wrapper" #chipsWrapper>
         <div class="chips" *ngFor="let email of model">
           <span class="chips-description" [textContent]="email"></span>
           <co-icon class="remove-chip-icon" [iconData]="iconService.getIcon(icons.CrossSkinny)" (click)="removeOptionFromModel(email)"></co-icon>
         </div>
       </div>
-      <co-list-of-values [multiselect]="true" [label]="recipientLabel | localize" [(model)]="chosenEmailAddressesInDropDown" [showChips]="false"
-                         [collection]="emailAddressesAvailableForDropdown" [displayField]="'role'"
-                         (modelChange)="roleChosen($event)">
-      </co-list-of-values>
-      <co-input-text [(model)]="emailModel" [placeholder]="extraLabel | localize" (keyDown)="handleKeyPressed($event)"
-                     ></co-input-text>
 
     `
             },] }
 ];
 RoleEmailSelectorComponent.ctorParameters = () => [
     { type: IconCacheService },
-    { type: SharedService }
+    { type: SharedService },
+    { type: Renderer2 }
 ];
 RoleEmailSelectorComponent.propDecorators = {
     recipientLabel: [{ type: Input }],
+    fieldLabel: [{ type: Input }],
     extraLabel: [{ type: Input }],
     model: [{ type: Input }],
     key: [{ type: Input }],
     workflowCategoryType: [{ type: Input }],
     modelChange: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-role-email-selector",] }]
+    showClass: [{ type: HostBinding, args: ["class.co-role-email-selector",] }],
+    chipsWrapper: [{ type: ViewChild, args: ['chipsWrapper',] }],
+    inputText: [{ type: ViewChild, args: ['inputText',] }]
 };
 
 class RoleEmailSelectorModule {
@@ -14324,7 +14365,7 @@ class EmailSelectorComponent {
         this.sharedService = sharedService;
         this.icons = Icon;
         this.showBCC = false;
-        this.buttonIcon = this.iconService.getIcon(this.icons.PlusSimple);
+        this.buttonIcon = this.iconService.getIcon(this.icons.SquarePlusRegular);
         this.emailAddressesChange = new EventEmitter();
         this.bccEmailAddressesChange = new EventEmitter();
         this._emailAddresses = [];
@@ -14394,12 +14435,24 @@ EmailSelectorComponent.decorators = [
 
       <div class="recipients-line">
         <co-role-email-selector [(model)]="emailAddresses" [key]="key" [workflowCategoryType]="workflowCategoryType"
-                                (modelChange)="handleEmailAddressesChanged()"></co-role-email-selector>
-        <label class="BCC-label"[textContent]="'BCC'"></label>
-        <co-button [iconData]="buttonIcon" (click)="toggleBCC()"></co-button>
+                                [fieldLabel]="'Aan'" (modelChange)="handleEmailAddressesChanged()"></co-role-email-selector>
+        <div class="recipients-bcc" *ngIf="!showBCC">
+          <label class="BCC-label"[textContent]="'BCC'"></label>
+          <co-button [iconData]="buttonIcon" (click)="toggleBCC()"></co-button>
+        </div>
+        <div class="recipients-add" *ngIf="showBCC">
+          <label class="add-label"[textContent]="'Aan'"></label>
+          <!--co-button [iconData]="buttonIcon" (click)="toggleBCC()"></co-button-->
+        </div>
+      </div>
+      <div class="recipients-line" *ngIf="showBCC">
+        <co-role-email-selector [(model)]="bccEmailAddresses"  [key]="key" [workflowCategoryType]="workflowCategoryType"
+                                [fieldLabel]="'BCC'" (modelChange)="handleBccEmailAddressesChanged()"></co-role-email-selector>
+        <div class="recipients-bcc">
+          <label class="bcc-label"[textContent]="'BCC'"></label>
+          <co-button [iconData]="buttonIcon" (click)="toggleBCC()"></co-button>
+        </div>
       </div>
-      <co-role-email-selector *ngIf="showBCC"  [(model)]="bccEmailAddresses"  [key]="key" [workflowCategoryType]="workflowCategoryType"
-                              (modelChange)="handleBccEmailAddressesChanged()"></co-role-email-selector>
 
     `
             },] }
@@ -15792,32 +15845,41 @@ TaskCreatorComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-task-creator",
                 template: `
-      <div class="top-rows">
-      <co-email-selector [(emailAddresses)]="emailAddresses" [(bccEmailAddresses)]="bccEmailAddresses"
-                         [key]="remarkAndWorkKey" [workflowCategoryType]="workflowCategoryType"></co-email-selector>
-      <co-form #createForm class="input-fields">
-        <co-list-of-icons [collection]="optionCollection" (itemSelected)="itemSelected($event)"></co-list-of-icons>
-        <co-input-text *ngIf="chosenActivityType === optionCollection[0]" [required]="chosenActivityType === optionCollection[0]"
-                       [placeholder]="'REMARK' | localize" [(model)]="remarkText"
-                       [rightIconData]="iconService.getIcon(icons.PaperPlaneTopSolid)"
-                       (rightIconClick)="createRemarkClicked()"></co-input-text>
-        <co-input-text *ngIf="chosenActivityType === optionCollection[1]" [required]="chosenActivityType === optionCollection[1]"
-                       [placeholder]="'DESCRIPTION' | localize" [(model)]="workDescription"
-                       [rightIconData]="iconService.getIcon(icons.PaperPlaneTopSolid)"
-                       (rightIconClick)="createWorkClicked()"></co-input-text>
-        <div class="task-input-fields" *ngIf="chosenActivityType === optionCollection[2]">
-          <co-input-text [(model)]="taskName" [placeholder]="'NAME' | localize"  [required]="chosenActivityType === optionCollection[2]"
-                         [rightIconData]="iconService.getIcon(icons.PaperPlaneTopSolid)"
-                         (rightIconClick)="createTaskClicked()"></co-input-text>
-          <co-input-text [(model)]="taskDescription" [placeholder]="'DESCRIPTION' | localize" [required]="chosenActivityType === optionCollection[2]"></co-input-text>
+      <div class="task-creator-wrapper">
+        <div class="top-rows">
+          <co-email-selector [(emailAddresses)]="emailAddresses" [(bccEmailAddresses)]="bccEmailAddresses"
+                             [key]="remarkAndWorkKey" [workflowCategoryType]="workflowCategoryType"></co-email-selector>
+          <co-form #createForm class="creator-remarks input-fields">
+            <co-list-of-icons [collection]="optionCollection" (itemSelected)="itemSelected($event)"></co-list-of-icons>
+            <co-input-textarea *ngIf="chosenActivityType === optionCollection[0]" [required]="chosenActivityType === optionCollection[0]"
+                           [placeholder]="'REMARK' | localize" [(model)]="remarkText"
+                           class="large-remark"></co-input-textarea>
+            <co-input-textarea *ngIf="chosenActivityType === optionCollection[1]" [required]="chosenActivityType === optionCollection[1]"
+                           [placeholder]="'DESCRIPTION' | localize" [(model)]="workDescription"
+                           class="large-remark"></co-input-textarea>
+            <div class="task-input-fields" *ngIf="chosenActivityType === optionCollection[2]">
+              <co-input-text [(model)]="taskName" [placeholder]="'NAME' | localize"
+                             [required]="chosenActivityType === optionCollection[2]"></co-input-text>
+              <co-input-textarea [(model)]="taskDescription" [placeholder]="'DESCRIPTION' | localize"
+                             class="large-remark"
+                             [required]="chosenActivityType === optionCollection[2]"></co-input-textarea>
+            </div>
+          </co-form>
+        </div>
+        <div class="extras-buttons">
+          <co-button [iconData]="iconService.getIcon(icons.PaperclipRegular)"  (click)="openAttachmentDialog()"
+                     [label]="documents.length === 0 ? '' : documents.length.toString()" ></co-button>
+          <co-button *ngIf="chosenActivityType === optionCollection[0]"
+                     [iconData]="iconService.getIcon(icons.PaperPlaneTopSolid)"
+                     (click)="createRemarkClicked()"></co-button>
+          <co-button *ngIf="chosenActivityType === optionCollection[1]"
+                     [iconData]="iconService.getIcon(icons.PaperPlaneTopSolid)"
+                     (click)="createWorkClicked()"></co-button>
+          <co-button *ngIf="chosenActivityType === optionCollection[2]"
+                     [iconData]="iconService.getIcon(icons.PaperPlaneTopSolid)"
+                     (click)="createTaskClicked()"></co-button>
         </div>
-      </co-form>
-      </div>
-      <div class="extras-buttons">
-        <co-button [iconData]="iconService.getIcon(icons.PaperclipRegular)"  (click)="openAttachmentDialog()"
-                   [label]="documents.length === 0 ? '' : documents.length.toString()" ></co-button>
       </div>
-
       <co-dialog *ngIf="showFilesDialog" (closeClick)="attachmentDialogCancelled()"
                  [headerTemplate]="attachmentHeaderTemplate"
                  [footerTemplate]="attachmentFooterTemplate">
@@ -15884,7 +15946,8 @@ TaskCreatorModule.decorators = [
                     FormModule,
                     IconModule,
                     RoleEmailSelectorModule,
-                    EmailSelectorModule
+                    EmailSelectorModule,
+                    InputTextareaModule
                 ],
                 declarations: [
                     TaskCreatorComponent