@colijnit/sharedcomponents 255.1.16 → 255.1.18

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

@@ -1,22 +1,24 @@
 @include export-module('co-read-write-access-layout') {
-  h4 {
-    margin: 10px 0;
-  }
+  .co-read-write-access {
+    h4 {
+      margin: 10px 0;
+    }
 
-  .horizontal-layout-column {
-    display: flex;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    .horizontal-layout-column {
+      display: flex;
+      padding-top: 10px;
+      padding-bottom: 10px;
 
-    input-lov-multi-select {
-      width: 50%;
+      input-lov-multi-select {
+        width: 50%;
 
-      &:first-child {
-        padding-right: 10px;
-      }
+        &:first-child {
+          padding-right: 10px;
+        }
 
-      &:last-child {
-        padding-left: 10px;
+        &:last-child {
+          padding-left: 10px;
+        }
       }
     }
   }

package/lib/components/activity-list/style/_layout.scss

@@ -37,7 +37,7 @@
             background-color: $sc-color-light;
             padding: 15px;
             color: #000;
-            box-shadow: 0px 2px 4px 0px #00000040;
+            box-shadow: 0px 2px 4px 0px #0000001A;
             .co-icon {
               svg {
                 fill: #FFFFFF;

package/lib/components/activity-list-header/components/period-filter/style/_layout.scss

@@ -17,14 +17,14 @@
     //.current-filter {
     //  color: $color-action;
     //}
-    ::ng-deep #period_filter_dropdown_template {
+    #period_filter_dropdown_template {
       overflow: hidden;
       display: block;
       width: 300px;
       border-radius: 5px;
       background: white;
       box-shadow: 1px 1px 10px 1px rgba(72,79,96,.25);
-      ::ng-deep .label {
+      .label {
         font-weight: bold;
         height: 50px;
         display: flex;
@@ -32,7 +32,7 @@
         font-size: 13px;
         padding: 0 10px;
       }
-      ::ng-deep .item {
+      .item {
         cursor: pointer;
         height: 50px;
         display: flex;
@@ -48,7 +48,7 @@
         &:hover {
           background-color: #8faba6;
           color: white;
-          ::ng-deep icon {
+          .co-icon {
             [fill] {
               fill: white;
             }

package/lib/components/activity-list-header/style/_layout.scss

@@ -57,7 +57,7 @@
       }
     }
 
-    ::ng-deep tab-no-router {
+    .tab-no-router {
       margin-top: 14px;
 
       nav.tab-no-router-nav {

package/lib/components/activity-overview-component/style/_layout.scss

@@ -61,7 +61,7 @@
       }
       &.overdue {
         color: red;
-        .icon ::ng-deep [fill] {
+        .icon [fill] {
           fill: red;
         }
       }

package/lib/components/app-file-dropzone/style/_layout.scss

@@ -48,7 +48,7 @@
       justify-content: center;
       height: 100%;
     }
-    icon ::ng-deep {
+    .co-icon {
       height: 100px;
       width: 100px;
       svg [fill] {

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

@@ -4,13 +4,10 @@ import { IconCacheService } from "../../service/icon-cache.service";
 import { WorkflowCategoryType } from "@colijnit/mainapi/build/enum/workflow-category.enum";
 import { SharedService } from "../../service/shared.service";
 import { SafeHtml } from "@angular/platform-browser";
-import { RoleEmailSelectorComponent } from "../role-email-selector/role-email-selector.component";
 export declare class EmailSelectorComponent implements OnInit {
     iconService: IconCacheService;
     sharedService: SharedService;
     readonly icons: typeof Icon;
-    email: RoleEmailSelectorComponent;
-    bccEmail: RoleEmailSelectorComponent;
     set key(value: string);
     get key(): string;
     set workflowCategoryType(value: WorkflowCategoryType);
@@ -33,5 +30,4 @@ export declare class EmailSelectorComponent implements OnInit {
     toggleBCC(): void;
     handleEmailAddressesChanged(): void;
     handleBccEmailAddressesChanged(): void;
-    clear(): void;
 }

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

@@ -5,11 +5,44 @@
    display: flex;
    flex-direction: column;
    row-gap: 5px;
+   padding-left: 0;
    .recipients-line {
      width: 100%;
      display: flex;
      flex-direction: row;
-     row-gap: 5px;
+     gap: 60px;
+     border-bottom: 4px solid #f5f5fc;
+     .recipients-bcc, recipients-add {
+       display: flex;
+       gap: 5px;
+       align-items: center;
+       width: 80px;
+       label {
+         font-size: 12px;
+       }
+     }
+     .recipients-bcc {
+       cursor: pointer;
+     }
+     .co-input-text, .co-list-of-values {
+       background: transparent;
+       &:before {
+         box-shadow: none;
+       }
+     }
+     .co-button {
+       background: none;
+       .co-icon {
+         width: 20px;
+         height: 20px;
+       }
+     }
+     .co-input-text {
+       width: 100%;
+     }
+     .co-list-of-values {
+       min-width: 150px;
+     }
    }
  }
 }

package/lib/components/file-upload/file-upload.component.d.ts

@@ -16,6 +16,7 @@ export declare class FileUploadComponent implements OnDestroy {
     get file(): CoDocument;
     icon: Icon;
     link: boolean;
+    dropzone: boolean;
     readonly: boolean;
     isAddingTile: boolean;
     fileSavesOnPopupOkClick: boolean;

package/lib/components/file-upload/style/_layout.scss

@@ -3,6 +3,16 @@
     font-family: $sc-file-upload-font-family;
     font-size: $sc-file-upload-font-size;
     position: relative;
+    &.add-file {
+      position: absolute;
+      top: 0;
+      .co-tile-render {
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+      }
+    }
     &.link {
       .image {
         cursor: pointer;
@@ -11,8 +21,8 @@
     .image {
       cursor: pointer;
     }
-    ::ng-deep .hidden {
-      display: none !important;
+    .hidden {
+      display: none;
     }
     &:hover {
       button-colijn.edit-file {
@@ -33,7 +43,7 @@
     }
     .add-button {
       cursor: pointer;
-      position: absolute;
+      position: relative;
       bottom: 0;
       right: 0;
     }

package/lib/components/files-upload/style/_layout.scss

@@ -40,9 +40,42 @@
     }
     .co-drag-drop-container {
       display: flex;
-      align-items: center;
+      padding-top: 30px;
+      position: relative;
+      margin-top: 0;
+      grid-gap: 5px;
+      gap: 5px;
+      align-items: flex-start;
+    }
+    .upload-add-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      .add-dropzone {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .co-tile-render {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 10px;
+          width: 150px;
+          height: 100px;
+          border: 1px dashed #dddddd;
+          .add-button {
+            position: relative;
+            svg {
+              fill: #dddddd;
+            }
+          }
+          .description {
+            font-size: 10px;
+          }
+        }
+      }
     }
-
   }
 }
 

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

@@ -1,11 +1,13 @@
 @include export-module('co-activity-summary-block-layout') {
-  .co-activity-summary-block{
+  .co-activity-summary-block {
     height: auto;
     display: flex;
     flex-direction: column;
+
     &:not(.no-border) {
       border: 1px solid #DCE4EA;
     }
+
     .left-seperator {
       &:before {
         content: "|";
@@ -22,126 +24,137 @@
       width: 100%;
       height: 100%;
     }
-  }
-  ::ng-deep image-display {
-    height: 70px;
-    width: 70px;
-    span {
-      display: none;
+
+    .image-display {
+      height: 70px;
+      width: 70px;
+
+      span {
+        display: none;
+      }
     }
-  }
 
-  .icon-wrapper {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    background: #F8FBFA;
-    height: 70px;
-    width: 70px;
-    border-radius: 50%;
-    border: 1px solid #DCE4EA;
-    overflow: hidden;
-    ::ng-deep icon {
-      height: 60px !important;
-      width: 60px !important;
+    .icon-wrapper {
+      display: flex;
       flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      background: #F8FBFA;
+      height: 70px;
+      width: 70px;
+      border-radius: 50%;
+      border: 1px solid #DCE4EA;
+      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%);
+      }
+
+      .template-wrapper {
+        & > * {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+
       }
     }
-  }
 
-  .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: 70px;
+      height: auto;
+      width: 100%;
     }
-    .template-wrapper {
-      & > * {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
 
+    .value {
+      font-size: 13px;
+      font-weight: bold;
+      color: #171721;
+      align-items: center;
     }
-  }
 
-  .content-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-left: 10px;
-    min-height: 70px;
-    height: auto;
-    width: 100%;
-  }
+    .title {
+      font-size: 11px;
+      line-height: 13px;
+      color: #171721;
+    }
 
-  .value {
-    font-size: 13px;
-    font-weight: bold;
-    color: #171721;
-    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: #171721;
-  }
+      .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 #DCE4EA;
-  }
+    .collapseable-wrapper {
+      padding: 10px;
+      border-bottom: 1px solid #DCE4EA;
+    }
 
-  ::ng-deep .input-date-window {
-    z-index: 9001!important;
-  }
+    .input-date-window {
+      z-index: 9001;
+    }
 
-  .initial {
-    position: initial !important;
-  }
+    .initial {
+      position: initial;
+    }
 
-  .center {
-    justify-content: center;
+    .center {
+      justify-content: center;
+    }
   }
 }