@beterdichtbij/component-library 0.58.5 → 0.59.0

package/dist/scss/_chatcloud.scss

@@ -1,94 +1,94 @@
-.bd-chat-cloud {
-    display: flex;
-    gap: 12px;
-    margin-bottom: 16px;
-    padding-right: 80px;
-   
-    &-card {
-        flex: 1;
-        background-color: $color-bg;
-        padding: 20px;
-        border-radius: 8px;
-        position: relative;
-        
-        &__header {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 12px;
-
-            @include media-breakpoint-down(md) {
-                flex-direction: column;
-                button {
-                    width: 80px;
-                    margin-top: 12px;
-                }
-            }
-        }
-
-        &__body {
-            word-break: break-word;
-            .card-body &{
-              ul {
-                padding:revert;
-                padding-left:2rem;
-                list-style-type: revert;
-                margin:revert;
-              }
-            } 
-        }
-
-        &__message{
-            p{
-                min-height: 1rem;
-            }
-            p:last-of-type{
-                margin-bottom: 0px;
-            }
-        }
-
-        &__footer {
-            ul {
-                margin-bottom: 0;
-                
-                li {
-                    margin-bottom: 0;
-                }
-
-                .card-body & {
-                    margin-top: 1.25rem;
-                }
-            }
-        }
-
-        .sender & {
-            background-color: $color-chatcloud;
-        }
-
-        @include media-breakpoint-down(md) {
-            padding: 8px;
-        }
-    }
-
-
-    &.sender {
-        flex-direction: row-reverse;
-        padding-right: revert;
-        padding-left: 80px;
-    }
-
-    @include media-breakpoint-down(md) {
-        padding-left: 6px;
-        padding-right: 30px;
-
-        &.sender {
-            padding-left: 30px;
-            padding-right: 6px;
-        }
-    }
-
-    .bd-profile-picture {
-        @include media-breakpoint-down(md) {
-            display: none;
-        }
-    }
+.bd-chat-cloud {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding-right: 80px;
+   
+    &-card {
+        flex: 1;
+        background-color: $color-bg;
+        padding: 20px;
+        border-radius: 8px;
+        position: relative;
+        
+        &__header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 12px;
+
+            @include media-breakpoint-down(md) {
+                flex-direction: column;
+                button {
+                    width: 80px;
+                    margin-top: 12px;
+                }
+            }
+        }
+
+        &__body {
+            word-break: break-word;
+            .card-body &{
+              ul {
+                padding:revert;
+                padding-left:2rem;
+                list-style-type: revert;
+                margin:revert;
+              }
+            } 
+        }
+
+        &__message{
+            p{
+                min-height: 1rem;
+            }
+            p:last-of-type{
+                margin-bottom: 0px;
+            }
+        }
+
+        &__footer {
+            ul {
+                margin-bottom: 0;
+                
+                li {
+                    margin-bottom: 0;
+                }
+
+                .card-body & {
+                    margin-top: 1.25rem;
+                }
+            }
+        }
+
+        .sender & {
+            background-color: $color-chatcloud;
+        }
+
+        @include media-breakpoint-down(md) {
+            padding: 8px;
+        }
+    }
+
+
+    &.sender {
+        flex-direction: row-reverse;
+        padding-right: revert;
+        padding-left: 80px;
+    }
+
+    @include media-breakpoint-down(md) {
+        padding-left: 6px;
+        padding-right: 30px;
+
+        &.sender {
+            padding-left: 30px;
+            padding-right: 6px;
+        }
+    }
+
+    .bd-profile-picture {
+        @include media-breakpoint-down(md) {
+            display: none;
+        }
+    }
 }

package/dist/scss/_collapsable-card.scss

@@ -1,108 +1,108 @@
-.bd-collapsable-card {
-    margin-bottom: 1rem;
-
-    &__actions {
-        display: flex;
-        gap: 8px;
-    }
-
-    .card-header {
-        border-radius: $border-radius-default $border-radius-default 0 0;
-        align-items: center;
-        border-bottom: none;
-        padding: 0 16px;
-        height: 60px;
-
-        h2 {
-            color: #fff;
-            font-weight: 600;
-            margin-bottom: 0;
-            font-size: 1.25rem;
-            line-height: 23px;
-        }
-
-        .patient-detail-template & {
-            &.is-disabled {
-                border-radius: $border-radius-default;
-                padding: 10px 20px;
-            }
-        }
-
-        >.btn-caret.collapsed {
-            border-radius: $border-radius-default;
-        }
-
-        &.no-title {
-            justify-content: flex-end;
-        }
-
-        .btn-caret.btn {
-            width: fit-content;
-            padding: 0px 6px 0px 6px;
-            background: transparent;
-
-            svg {
-                margin: revert;
-                fill: $color-white;
-            }
-
-            &:focus,
-            &:hover {
-                border: none;
-                box-shadow: revert;
-                background: transparent;
-
-                svg {
-                    fill: $color-white;
-                }
-            }
-
-            &[aria-expanded="true"] {
-                svg {
-                    transform: rotate(-180deg);
-                }
-            }
-        }
-
-        &.round-corners {
-            border-radius: $border-radius-default !important;
-        }
-
-        @include media-breakpoint-down(md) {
-            min-height: revert;
-            height: 60px;
-
-            &.round-corners-md {
-                border-radius: $border-radius-default !important;
-            }
-        }
-
-        @include media-breakpoint-down(sm) {
-            &.round-corners-sm {
-                border-radius: $border-radius-default !important;
-            }
-        }
-    }
-
-    .card-body {
-        font-size: 1rem;
-
-        &.display-none {
-            display: none;
-        }
-
-        &.collapse {
-            @include media-breakpoint-up(lg) {
-                &.open-collapse-lg {
-                    display: block !important
-                }
-            }
-
-            @include media-breakpoint-up(md) {
-                &.open-collapse-md {
-                    display: block !important
-                }
-            }
-        }
-    }
+.bd-collapsable-card {
+    margin-bottom: 1rem;
+
+    &__actions {
+        display: flex;
+        gap: 8px;
+    }
+
+    .card-header {
+        border-radius: $border-radius-default $border-radius-default 0 0;
+        align-items: center;
+        border-bottom: none;
+        padding: 0 16px;
+        height: 60px;
+
+        h2 {
+            color: #fff;
+            font-weight: 600;
+            margin-bottom: 0;
+            font-size: 1.25rem;
+            line-height: 23px;
+        }
+
+        .patient-detail-template & {
+            &.is-disabled {
+                border-radius: $border-radius-default;
+                padding: 10px 20px;
+            }
+        }
+
+        >.btn-caret.collapsed {
+            border-radius: $border-radius-default;
+        }
+
+        &.no-title {
+            justify-content: flex-end;
+        }
+
+        .btn-caret.btn {
+            width: fit-content;
+            padding: 0px 6px 0px 6px;
+            background: transparent;
+
+            svg {
+                margin: revert;
+                fill: $color-white;
+            }
+
+            &:focus,
+            &:hover {
+                border: none;
+                box-shadow: revert;
+                background: transparent;
+
+                svg {
+                    fill: $color-white;
+                }
+            }
+
+            &[aria-expanded="true"] {
+                svg {
+                    transform: rotate(-180deg);
+                }
+            }
+        }
+
+        &.round-corners {
+            border-radius: $border-radius-default !important;
+        }
+
+        @include media-breakpoint-down(md) {
+            min-height: revert;
+            height: 60px;
+
+            &.round-corners-md {
+                border-radius: $border-radius-default !important;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            &.round-corners-sm {
+                border-radius: $border-radius-default !important;
+            }
+        }
+    }
+
+    .card-body {
+        font-size: 1rem;
+
+        &.display-none {
+            display: none;
+        }
+
+        &.collapse {
+            @include media-breakpoint-up(lg) {
+                &.open-collapse-lg {
+                    display: block !important
+                }
+            }
+
+            @include media-breakpoint-up(md) {
+                &.open-collapse-md {
+                    display: block !important
+                }
+            }
+        }
+    }
 }

package/dist/scss/_content-library-card-message-template.scss

@@ -0,0 +1,128 @@
+.content-library-card-message-template {
+    padding: 8px;
+    min-height: 180px;
+    height: auto;
+
+    &.collapsed {
+        height: 180px;
+    }
+
+    .content-library-card__body {
+        padding-top: 6px;
+        max-height: none;
+        overflow: hidden;
+
+        &.collapsed {
+            max-height: 75px;
+        }
+    }
+
+    .btn-link {
+        padding: 0;
+
+        &:focus {
+            box-shadow: revert;
+        }
+    }
+
+    .content-library-card-message-template__body {
+        display: block !important;
+
+        .message-text {
+            word-break: break-word;
+        }
+
+        .attachment-list {
+            .attachment-list__item {
+                margin-right: 15px;
+                margin-bottom: 0.25rem;
+                word-break: break-all;
+            }
+
+            img {
+                height: 50px;
+                max-width: 100%;
+            }
+        }
+    }
+
+    footer {
+        justify-content: space-between;
+
+        .icon-button {
+            svg {
+                fill: revert;
+                stroke: hsla(224, 21%, 38%, 1);
+            }
+        }
+    }
+
+    .attachment-occurence {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .icon {
+            fill: $color-blue;
+        }
+
+        .number-icon {
+            position: absolute;
+            top: 0;
+            right: 0;
+            color: white;
+            font-size: 0.6em;
+            border-radius: 50%;
+            background-color: $blue;
+            width: .8rem;
+            height: .8rem;
+            display: flex;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    header {
+        display: flex;
+
+        .heading {
+            flex: 1;
+
+            .title {
+                h6 {
+                    display: inline;
+                    margin: 0 4px 0 0;
+                    line-height: normal;
+                }
+            }
+        }
+
+        .edit-btn-group {
+            button {
+                width: 30px;
+                height: 30px;
+
+                svg {
+                    fill: hsla(224, 21%, 38%, 1);
+                    stroke: revert;
+                }
+            }
+        }
+    }
+
+    .collapse-button {
+        height: 30px;
+
+        &-last {
+            margin-bottom: 0;
+        }
+
+        svg {
+            margin-right: 4px;
+        }
+    }
+}