@beterdichtbij/component-library 0.60.1 → 0.61.0

package/dist/scss/_conversation-to-text-modal.scss

@@ -1,33 +1,33 @@
-#conversation-to-text-modal {
-    .select-all-checkbox {
-        margin: 20px 0;
-    }
-
-    .message-content {
-        width: 100%;
-    }
-
-    .message {
-        background-color: #f5f5f5;
-        padding: 30px;
-        border-radius: 8px;
-
-        &.is-sender {
-            margin: 0 20px 10px 80px;
-        }
-
-        &.is-receiver {
-            margin: 0 80px 10px 20px;
-        }
-    }
-
-    @media (max-width: 849px) {
-        .is-sender {
-            margin: 0 10px 10px 30px;      
-        } 
-
-        .is-receiver {
-            margin: 0 40px 10px 10px;
-        }
-    }
+#conversation-to-text-modal {
+    .select-all-checkbox {
+        margin: 20px 0;
+    }
+
+    .message-content {
+        width: 100%;
+    }
+
+    .message {
+        background-color: #f5f5f5;
+        padding: 30px;
+        border-radius: 8px;
+
+        &.is-sender {
+            margin: 0 20px 10px 80px;
+        }
+
+        &.is-receiver {
+            margin: 0 80px 10px 20px;
+        }
+    }
+
+    @media (max-width: 849px) {
+        .is-sender {
+            margin: 0 10px 10px 30px;      
+        } 
+
+        .is-receiver {
+            margin: 0 40px 10px 10px;
+        }
+    }
 }

package/dist/scss/_dropdown.scss

@@ -1,114 +1,114 @@
-
-.bd-dropdown.dropdown {
-    display: inline-block;
-
-    &.show {
-  
-        &:after {
-            transform: rotate(180deg);
-        }
-    }
-
-    ul.dropdown-menu {
-        border: 0px;
-        box-shadow: $dropdown-box-shadow;
-        margin-top: 0.125rem;
-        
-        &.dropdown-menu-action {
-            border: 1px solid rgba(0,0,0,.15);
-            border-radius: $border-radius-default;
-            
-            .dropdown-item{
-                width:100%;
-                padding: 0.25rem 1.5rem;
-                white-space: nowrap;
-                line-height: revert;
-                
-                &:hover{
-                    background-color: #4d5875;
-                    color: #f5f5f5;
-                    text-decoration: none;
-                }
-            }
-        }
-
-
-        .dropdown-item {
-            font-size: 1rem;
-            letter-spacing: 0;
-            line-height: 2.75rem;
-
-            &:not(:last-child) {
-                border-bottom: 1px solid $color-lightblue;
-            }
-
-            &:active,
-            &:focus {
-                text-decoration: underline;
-                background-color: transparent;
-            }
-
-            @include media-breakpoint-up(md) {
-                &:hover {
-                    text-decoration: underline;
-                    background-color: transparent;
-                }
-            }
-        }
-
-    }
-
-    .dropdown-toggle {
-        display: flex;
-        align-items: center;
-        font-weight: $font-bold;
-        font-size: 16px;
-        letter-spacing: 0;
-        line-height: 24px;
-
-        &:after {
-            border: 0px;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M8.828 6.207L14.632.404a1 1 0 0 1 1.414 0l.707.707a1 1 0 0 1 0 1.414L9.682 9.596a.999.999 0 0 1-.854.282.999.999 0 0 1-.853-.282L.904 2.526a1 1 0 0 1 0-1.415L1.61.404a1 1 0 0 1 1.414 0l5.803 5.803z' fill='%23AFB8CC'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-size: contain;
-            background-position: 50%;
-            width: 14px;
-            height: 10px;
-            transition: 0.2s all ease-in;
-        }
-
-        &-action {
-            font-size: calc(13px/16px) * 1rem;
-            font-weight: $font-medium;
-            padding: 0 10px;
-
-            &:after{
-                background-image:url('data:image/svg+xml, <svg class="icon icon-triangle-down" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" ><path d="M11.071 2.414L6.414 7.071a1 1 0 0 1-1.414 0L.343 2.414A1 1 0 0 1 1.05.707h9.314a1 1 0 0 1 .707 1.707z" /></svg>'); 
-                border: 0;
-                box-shadow: none;
-                width: 9px;
-                height: 7px;
-                margin-left: 5px;
-            }
-        }
-    }
-
-    a.dropdown-toggle{
-        color: $color-darkblue;
-    }
-}
-
-.bd-dropdown-item {
-    list-style-type: none;
-}
-
-.placeholder-tokens-menu {
-    .dropdown-item {
-        color: $color-darkblue;
-        border-left: 1px solid $color-lightblue;
-        border-right: 1px solid $color-lightblue;
-        &.active {
-            color:$white;
-        }
-    }    
+
+.bd-dropdown.dropdown {
+    display: inline-block;
+
+    &.show {
+  
+        &:after {
+            transform: rotate(180deg);
+        }
+    }
+
+    ul.dropdown-menu {
+        border: 0px;
+        box-shadow: $dropdown-box-shadow;
+        margin-top: 0.125rem;
+        
+        &.dropdown-menu-action {
+            border: 1px solid rgba(0,0,0,.15);
+            border-radius: $border-radius-default;
+            
+            .dropdown-item{
+                width:100%;
+                padding: 0.25rem 1.5rem;
+                white-space: nowrap;
+                line-height: revert;
+                
+                &:hover{
+                    background-color: #4d5875;
+                    color: #f5f5f5;
+                    text-decoration: none;
+                }
+            }
+        }
+
+
+        .dropdown-item {
+            font-size: 1rem;
+            letter-spacing: 0;
+            line-height: 2.75rem;
+
+            &:not(:last-child) {
+                border-bottom: 1px solid $color-lightblue;
+            }
+
+            &:active,
+            &:focus {
+                text-decoration: underline;
+                background-color: transparent;
+            }
+
+            @include media-breakpoint-up(md) {
+                &:hover {
+                    text-decoration: underline;
+                    background-color: transparent;
+                }
+            }
+        }
+
+    }
+
+    .dropdown-toggle {
+        display: flex;
+        align-items: center;
+        font-weight: $font-bold;
+        font-size: 16px;
+        letter-spacing: 0;
+        line-height: 24px;
+
+        &:after {
+            border: 0px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M8.828 6.207L14.632.404a1 1 0 0 1 1.414 0l.707.707a1 1 0 0 1 0 1.414L9.682 9.596a.999.999 0 0 1-.854.282.999.999 0 0 1-.853-.282L.904 2.526a1 1 0 0 1 0-1.415L1.61.404a1 1 0 0 1 1.414 0l5.803 5.803z' fill='%23AFB8CC'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: 50%;
+            width: 14px;
+            height: 10px;
+            transition: 0.2s all ease-in;
+        }
+
+        &-action {
+            font-size: calc(13px/16px) * 1rem;
+            font-weight: $font-medium;
+            padding: 0 10px;
+
+            &:after{
+                background-image:url('data:image/svg+xml, <svg class="icon icon-triangle-down" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" ><path d="M11.071 2.414L6.414 7.071a1 1 0 0 1-1.414 0L.343 2.414A1 1 0 0 1 1.05.707h9.314a1 1 0 0 1 .707 1.707z" /></svg>'); 
+                border: 0;
+                box-shadow: none;
+                width: 9px;
+                height: 7px;
+                margin-left: 5px;
+            }
+        }
+    }
+
+    a.dropdown-toggle{
+        color: $color-darkblue;
+    }
+}
+
+.bd-dropdown-item {
+    list-style-type: none;
+}
+
+.placeholder-tokens-menu {
+    .dropdown-item {
+        color: $color-darkblue;
+        border-left: 1px solid $color-lightblue;
+        border-right: 1px solid $color-lightblue;
+        &.active {
+            color:$white;
+        }
+    }    
 }

package/dist/scss/_extern.scss

@@ -1,2 +1,2 @@
-@import "extern/bootstrap";
+@import "extern/bootstrap";
 @import "extern/prime-vue";

package/dist/scss/{_dropzone.scss → _file-upload.scss}

@@ -1,78 +1,93 @@
-@use "sass:math";
-
-.dropzone.bd-dropzone, .dropzone.bd-dropzone * {
-  box-sizing: border-box;
-}
-.dropzone.bd-dropzone {
-  position: relative;
-  color: $color-darkblue;
-  font-family: $font-family-base;
-  width:fit-content;
-  
-  .dz-message {
-    margin-bottom: 1.25rem;
-  }
-
-  .dz-preview {
-    position: relative;
-    display: inline-block;
-   
-    text-align: center;
-    
-    .dz-image{
-      min-width: 150px;
-      height: 88px;
-      object-fit: contain;
-    }
-
-    .dz-error-message,.dz-success-mark {
-      display: none;
-    }
-
-    &.dz-error {
-      .dz-error-message, .dz-error-mark {
-        display: block;
-      }
-    }
-    &.dz-success { 
-      .dz-success-mark {
-        display: block;
-        background-color: $green;
-        border-radius: 50%;
-        width:21px;
-        height:21px;
-        margin: 0px auto;
-        svg{
-          transform: translateY(-2px);
-        }
-      }
-    }
-
-    &.dz-complete {
-      .dz-progress {
-        display: none;
-      }
-    }
-
-    .dz-remove {
-      position: absolute;
-      top: -10px;
-      right: -10px;
-      margin: 0;
-      width: 21px;
-      height: 21px;
-      border-radius: 50%;
-      padding: 0px;
-      background-color: $primary;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .icon {
-        margin: revert;
-        transform: revert;
-        transition: revert;
-      }
-    }
-  }
+@use "sass:math";
+
+.bd-file-upload {
+  position: relative;
+  color: $color-darkblue;
+  font-family: $font-family-base;
+  width:fit-content;
+
+  .p-fileupload {
+    border: 0;
+    border-radius: 0;
+    background: none;
+
+    .p-fileupload-header {
+      border: none;
+      margin-bottom: 20px;
+    }
+
+    .filename {
+      color: $color-darkblue;
+    }
+  }
+  
+  .dz-message {
+    margin-bottom: 1.25rem;
+  }
+
+  .file-upload-preview {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+
+    .file-preview {
+      display: inline-block;
+
+      .preview-details {
+        position: relative;
+
+        .preview-image {
+          min-width: 150px;
+          height: 88px;
+          object-fit: contain;
+        }
+      }
+    }
+
+    &.dz-error {
+      .dz-error-message, .dz-error-mark {
+        display: block;
+      }
+    }
+
+    .success-mark {
+      display: block;
+      background-color: $green;
+      border-radius: 50%;
+      width:21px;
+      height:21px;
+      margin: 0px auto;
+
+      svg{
+        transform: translateY(-2px);
+      }
+    }
+
+    &.dz-complete {
+      .dz-progress {
+        display: none;
+      }
+    }
+
+    .remove-button {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      margin: 0;
+      width: 21px;
+      height: 21px;
+      border-radius: 50%;
+      padding: 0px;
+      background-color: $primary;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .icon {
+        margin: revert;
+        transform: revert;
+        transition: revert;
+      }
+    }
+  }
 }

package/dist/scss/_form-field.scss

@@ -1,13 +1,13 @@
-.bd-form-field {
-    margin-bottom: 27px;
-
-    .form-input-with-button{
-        display: flex;
-        gap: 0.5rem;
-        justify-content: space-between;
-        
-        .btn{
-            height:auto;
-        }
-    }
+.bd-form-field {
+    margin-bottom: 27px;
+
+    .form-input-with-button{
+        display: flex;
+        gap: 0.5rem;
+        justify-content: space-between;
+        
+        .btn{
+            height:auto;
+        }
+    }
 }

package/dist/scss/_form-multiple-checkbox.scss

@@ -1,48 +1,48 @@
-.bd-form-multiple-checkbox {
-  width: auto;
-  background: #ffffff;
-  border-radius: 5px;
-  padding: 12px 12px;
-  border: 1px solid #abb0be;
-
-  label {
-    font-weight: 400;
-    line-height: normal;
-  }
-
-  /* width */
-  &::-webkit-scrollbar {
-    width: 10px;
-  }
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: $color-border;
-    border-radius: 10px;
-    border: solid 3px white;
-  }
-
-  /* Handle on hover */
-  &::-webkit-scrollbar-thumb:hover {
-    background: $color-border;
-    border: solid 3px white;
-  }
-
-  &.is-invalid {
-    border: 1px solid $color-red;
-  }
-
-  &.overflow-form-control {
-    max-height: 200px;
-    overflow: scroll;
-    overflow-x: hidden;
-  }
-
-  .custom-checkbox {
-    margin-bottom: 0px;
-  }
-
-  .custom-control-label {
-    line-height: 30px;
-  }
+.bd-form-multiple-checkbox {
+  width: auto;
+  background: #ffffff;
+  border-radius: 5px;
+  padding: 12px 12px;
+  border: 1px solid #abb0be;
+
+  label {
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  /* width */
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: $color-border;
+    border-radius: 10px;
+    border: solid 3px white;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: $color-border;
+    border: solid 3px white;
+  }
+
+  &.is-invalid {
+    border: 1px solid $color-red;
+  }
+
+  &.overflow-form-control {
+    max-height: 200px;
+    overflow: scroll;
+    overflow-x: hidden;
+  }
+
+  .custom-checkbox {
+    margin-bottom: 0px;
+  }
+
+  .custom-control-label {
+    line-height: 30px;
+  }
 }

package/dist/scss/_forms.scss

@@ -1,2 +1,2 @@
-@import "forms/form-check";
-@import "forms/form-input";
+@import "forms/form-check";
+@import "forms/form-input";