@colijnit/sharedcomponents 262.1.17 → 262.1.18

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

@@ -0,0 +1,36 @@
+@include export-module('co-activity-modifier-layout') {
+  .co-activity-modifier {
+    .co-dialog-wrapper {
+      max-width: 600px;
+      height: 650px;
+      max-height: 300px;
+    }
+    .dialog-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      padding: 0;
+      .header-title-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .co-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+    .work-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      .double-column {
+        display: flex;
+        gap: 10px;
+        max-width: 100%;
+      }
+    }
+  }
+}

package/lib/components/activity-modifier/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-activity-task-form-theme') {
+  .co-modify-task-form {
+  }
+}
+

package/lib/components/activity-modifier/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -12,6 +12,12 @@
       cursor: pointer;
       display: flex;
       gap: 10px;
+      .worked-time {
+        display: flex;
+        gap: 3px;
+        align-items: center;
+        font-size: 10px;
+      }
       .has-documents-leaf {
         position: relative;
         .amount-documents {
@@ -35,6 +41,7 @@
         font-size: $leaf-header-font-size;
       }
       .leaf-body {
+        min-height: 30px;
         .trigger-wrapper {
           display: flex;
           gap: $leaf-trigger-wrapper-gap;

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

@@ -1,172 +1,22 @@
-@include export-module('co-executive-summary-block-layout') {
-  .co-executive-summary-block {
-
-    .value {
-      flex-wrap: wrap;
-    }
-
-    .notification-email {
+@include export-module('co-notification-summary-block-layout') {
+  .co-notification-summary-block {
+    .activity-summary-block-edit-template {
       display: flex;
-      flex-shrink: 0;
-      background: $color_border;
-      margin: 0 2px 2px 0;
-      padding: 5px;
-      border-radius: 5px;
-    }
-
-    height: auto;
-    display: flex;
-    flex-direction: column;
-
-    &:not(.no-border) {
-      border: 1px solid $color_border;
-    }
-
-    .left-seperator {
-      &:before {
-        content: "|";
-        margin: 0 10px;
-      }
-    }
-
-    .shrink-to-fit {
-      display: flex;
-      flex-shrink: 0;
-    }
-
-    svg {
       width: 100%;
-      height: 100%;
-    }
-
-    .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;
-        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;
+      flex-direction: column;
+      justify-content: space-between;
+      z-index: 9000;
+      max-height: 100%;
+      co-button {
+        &.send-email {
+          &.done, &.disabled {
+            opacity: 0.5;
+            pointer-events: none;
           }
-        }
-      }
-
-
-      .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%;
-      }
-
-      .value {
-        font-size: 13px;
-        font-weight: bold;
-        color: $color-dark;
-        align-items: center;
-      }
-
-      .title {
-        font-size: 11px;
-        line-height: 13px;
-        color: $color-label;
-      }
-
-      .activity-summary-block-edit-template {
-        display: flex;
-        width: 100%;
-        flex-direction: column;
-        justify-content: space-between;
-        z-index: 9000;
-        max-height: 100%;
-
-        .template-wrapper {
-          margin-bottom: 10px;
-        }
-
-        .co-form {
-          co-list-of-values {
-            margin-bottom: 5px;
-
-            &:before {
-              box-shadow: none;
-            }
+          &.done {
+            background: #0f9402;
           }
         }
-
-        .title-wrapper {
-          align-items: center;
-          margin-bottom: 10px;
-        }
-
-        h3:not(.no-margin) {
-          margin-top: 25px;
-        }
-      }
-
-      .collapseable-wrapper {
-        padding: 10px;
-        border-bottom: 1px solid $color_border;
-      }
-
-      .input-date-window {
-        z-index: 9001;
-      }
-
-      .initial {
-        position: initial;
-      }
-
-      .center {
-        justify-content: center;
-      }
-
-      .planning-row {
-        display: flex;
-        flex-direction: row;
-        gap: 5px;
-        align-items: flex-start;
       }
     }
   }

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

@@ -1,5 +1,5 @@
-@include export-module('co-modify-task-form-theme') {
-  .co-modify-task-form {
+@include export-module('co-activity-modifier-theme') {
+  .co-activity-modifier {
   }
 }
 

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

@@ -2,47 +2,58 @@
  .co-role-email-selector {
    width: 100%;
    height: 100%;
-   display: flex;
-   flex-direction: row;
-   row-gap: 0;
-   justify-content: space-between;
-   position: relative;
-   .chips-wrapper {
+
+   .role-email-selector-wrapper {
+     width: 100%;
+     height: 100%;
      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;
-     max-width: 50%;
-     max-height: 30px;
-     overflow: auto;
-     .chips {
-       font-family: $cc-co-role-email-selector-chip-font-family;
-       font-size: $cc-co-role-email-selector-chip-font-size;
-       color: $cc-co-role-email-selector-chip-font-color;
+     flex-direction: row;
+     row-gap: 0;
+     justify-content: space-between;
+     position: relative;
+
+     .chips-wrapper {
        display: flex;
-       align-items: center;
-       background: $cc-co-role-email-selector-chip-background-color;
-       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;
+       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;
+       max-width: 50%;
+       max-height: 30px;
+       overflow: auto;
+
+       .chips {
+         font-family: $cc-co-role-email-selector-chip-font-family;
+         font-size: $cc-co-role-email-selector-chip-font-size;
+         color: $cc-co-role-email-selector-chip-font-color;
+         display: flex;
+         align-items: center;
+         background: $cc-co-role-email-selector-chip-background-color;
+         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;
-       padding: 5px;
-       height: $cc-co-role-email-selector-chip-delete-icon-size;
-       width: $cc-co-role-email-selector-chip-delete-icon-size;
-       svg { // for fontawesome icons
-         fill: $cc-co-role-email-selector-chip-delete-icon-color;
-       }
-       & [fill] { // for own icons
-         fill: $cc-co-role-email-selector-chip-delete-icon-color;
+
+       .remove-chip-icon {
+         cursor: pointer;
+         padding: 5px;
+         height: $cc-co-role-email-selector-chip-delete-icon-size;
+         width: $cc-co-role-email-selector-chip-delete-icon-size;
+
+         svg { // for fontawesome icons
+           fill: $cc-co-role-email-selector-chip-delete-icon-color;
+         }
+
+         & [fill] { // for own icons
+           fill: $cc-co-role-email-selector-chip-delete-icon-color;
+         }
        }
      }
    }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/sharedcomponents",
-  "version": "262.1.17",
+  "version": "262.1.18",
   "private": false,
   "dependencies": {
     "chart.js": "4.3.0",

package/prerendered-routes.json

@@ -0,0 +1,3 @@
+{
+  "routes": {}
+}