@beterdichtbij/component-library 0.20.0 → 0.21.0

package/dist/components/atoms/BDProfileImage/BDProfileImage.vue.d.ts

@@ -54,10 +54,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
+    src: string;
     size: import('../../../types/BootstrapSizes').bootstrapSizes | undefined;
     showFooter: boolean;
     linkText: string;
-    src: string;
     alt: string | undefined;
 }, {}>;
 export default _sfc_main;

package/dist/components/atoms/icons/IconEyeShow.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/components/atoms/icons/IconEyeShow.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconEyeShow.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icons/IconEyeShow.vue"],"names":[],"mappings":";AA2BA,wBAA4E"}

package/dist/components/atoms/icons/IconEyeSlash.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/components/atoms/icons/IconEyeSlash.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconEyeSlash.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icons/IconEyeSlash.vue"],"names":[],"mappings":";AAuBA,wBAA4E"}

package/dist/components/atoms/icons/index.d.ts

@@ -17,4 +17,6 @@ import IconOrderedList from "./IconOrderedList.vue";
 import IconHyperlink from "./IconHyperlink.vue";
 import IconDownloadImage from "./IconDownloadImage.vue";
 import IconMenu from "./IconMenu.vue";
-export { IconAttachment, IconCheck, IconError, IconInfo, IconRemove, IconFile, IconCaretDown, IconCaretRight, IconCaretLeft, IconClose, IconItalic, IconBold, IconUnderline, IconBulletList, IconOrderedList, IconHyperlink, IconCalendar, IconDownloadImage, IconMenu };
+import IconEyeShow from "./IconEyeShow.vue";
+import IconEyeSlash from "./IconEyeSlash.vue";
+export { IconAttachment, IconCheck, IconError, IconInfo, IconRemove, IconFile, IconCaretDown, IconCaretRight, IconCaretLeft, IconClose, IconItalic, IconBold, IconUnderline, IconBulletList, IconOrderedList, IconHyperlink, IconCalendar, IconDownloadImage, IconMenu, IconEyeShow, IconEyeSlash };

package/dist/components/molecules/BDChatCloud/BDChatCloud.vue.d.ts

@@ -0,0 +1,86 @@
+import type { PropType as __PropType } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    headerTitle: {
+        type: __PropType<string>;
+        required: true;
+        default: string;
+    };
+    src: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: undefined;
+    };
+    AltProfileImage: {
+        type: __PropType<string>;
+        required: true;
+        default: string;
+    };
+    message: {
+        type: __PropType<string>;
+        required: true;
+        default: string;
+    };
+    isSender: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    files: {
+        type: __PropType<import("../../../types/ApiAttachment").ApiAttachment[] | undefined>;
+        required: false;
+        default: undefined;
+    };
+    pills: {
+        type: __PropType<Object[] | undefined>;
+        required: false;
+        default: undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show-attachment" | "action")[], "show-attachment" | "action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    headerTitle: {
+        type: __PropType<string>;
+        required: true;
+        default: string;
+    };
+    src: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: undefined;
+    };
+    AltProfileImage: {
+        type: __PropType<string>;
+        required: true;
+        default: string;
+    };
+    message: {
+        type: __PropType<string>;
+        required: true;
+        default: string;
+    };
+    isSender: {
+        type: __PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
+    files: {
+        type: __PropType<import("../../../types/ApiAttachment").ApiAttachment[] | undefined>;
+        required: false;
+        default: undefined;
+    };
+    pills: {
+        type: __PropType<Object[] | undefined>;
+        required: false;
+        default: undefined;
+    };
+}>> & {
+    "onShow-attachment"?: ((...args: any[]) => any) | undefined;
+    onAction?: ((...args: any[]) => any) | undefined;
+}, {
+    headerTitle: string;
+    src: string | undefined;
+    AltProfileImage: string;
+    message: string;
+    isSender: boolean;
+    files: import("../../../types/ApiAttachment").ApiAttachment[] | undefined;
+    pills: Object[] | undefined;
+}, {}>;
+export default _sfc_main;

package/dist/components/molecules/BDChatCloud/BDChatCloud.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BDChatCloud.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/BDChatCloud/BDChatCloud.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,6GAA6G,CAAC;AACpI,cAAc,6GAA6G,CAAC;AAC5H,eAAe,SAAS,CAAC"}

package/dist/components/molecules/BDMarkdownEditor/BDMarkdownEditor.vue.d.ts

@@ -29,7 +29,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<string>;
         required: true;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "upload" | "action")[], "update:modelValue" | "upload" | "action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("action" | "update:modelValue" | "upload")[], "action" | "update:modelValue" | "upload", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     placeholder: {
         type: __PropType<string | undefined>;
         required: false;
@@ -60,14 +60,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: true;
     };
 }>> & {
+    onAction?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onUpload?: ((...args: any[]) => any) | undefined;
-    onAction?: ((...args: any[]) => any) | undefined;
 }, {
+    files: import("../../../types/ApiAttachment").ApiAttachment[] | undefined;
     variant: import('../../../types/tiptapVariants').TiptapVariants;
     placeholder: string | undefined;
     state: boolean | undefined;
     errorText: string | undefined;
-    files: import("../../../types/ApiAttachment").ApiAttachment[] | undefined;
 }, {}>;
 export default _sfc_main;

package/dist/constants/string.d.ts

@@ -0,0 +1 @@
+export declare const EMPTY_STRING: string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import BDCol from "./layout/BDCol.vue";
 import BDContainer from "./layout/BDContainer.vue";
 import BDRow from "./layout/BDRow.vue";
-import { IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconDownloadImage, IconMenu } from "./components/atoms/icons/index";
+import { IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconDownloadImage, IconMenu, IconEyeShow, IconEyeSlash } from "./components/atoms/icons/index";
 import BDButton from "./components/atoms/BDButton/BDButton.vue";
 import BDLogo from "./components/atoms/BDLogo/BDLogo.vue";
 import BDLink from "./components/atoms/BDLink/BDLink.vue";
@@ -26,8 +26,9 @@ import BDMarkdownEditor from "./components/molecules/BDMarkdownEditor/BDMarkdown
 import BDUser from "./components/molecules/BDUser/BDUser.vue";
 import BDAttachmentPreviewList from "./components/molecules/BDAttachmentPreviewList/BDAttachmentPreviewList.vue";
 import BDImageAttachmentPreviewList from "./components/molecules/BDImageAttachmentPreviewList/BDImageAttachmentPreviewList.vue";
+import BDChatCloud from "./components/molecules/BDChatCloud/BDChatCloud.vue";
 import BDDropdown from "./components/organisms/BDDropdown/BDDropdown.vue";
 import BDModal from "./components/organisms/BDModal/BDModal.vue";
 import { useModal } from "./composables/useModal";
 import { useToaster } from "./composables/useToaster";
-export { BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, IconDownloadImage, BDImageAttachmentPreviewList, IconMenu, useModal, useToaster, };
+export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconEyeShow, IconEyeSlash, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, IconDownloadImage, BDImageAttachmentPreviewList, IconMenu, useModal, useToaster, };

package/dist/interfaces/BDChatCloudProps.d.ts

@@ -0,0 +1,10 @@
+import { ApiAttachment } from '../types/ApiAttachment';
+export interface BDChatCloudProps {
+    headerTitle: string;
+    src?: string;
+    AltProfileImage: string;
+    message: string;
+    isSender: boolean;
+    files?: ApiAttachment[];
+    pills?: Object[];
+}

package/dist/scss/_chatcloud.scss

@@ -0,0 +1,124 @@
+.bd-chat-cloud {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding-right: 80px;
+   
+    &-card {
+        flex: 1;
+        background-color: $color-bg;
+        padding: 30px;
+        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;
+        }
+
+        &::before {
+            content: "";
+            position: absolute;
+            border-left: 12px solid transparent;
+            border-right: 12px solid $color-bg;
+            border-top: 12px solid $color-bg;
+            border-bottom: 12px solid transparent;
+            left: -14px;
+            top: 0px;
+            border-radius: 4px;
+            transform: scaleZ(-1);
+
+            .sender & {
+                border-right: 12px solid transparent;
+                border-top: 12px solid $color-chatcloud;
+                border-left: 12px solid $color-chatcloud;
+                transform: revert;
+                right: -12px;
+                left: revert;
+            }
+        }
+
+        @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/_modal.scss

@@ -1,16 +1,89 @@
-.modal.bd-modal{
+.modal.bd-modal {
+  
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top:30px;
+
+    button.btn-close  { 
+      top: 20px;
+      right: 20px;
+      position: absolute;
+      padding: revert;
+      margin: revert;
+      height: revert;
+    }
+
+    @include media-breakpoint-up(md) {
+      padding: 0px 65px;
+    }  
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column-reverse;
+      align-items: center;
+      justify-content: center;
+      padding: .75rem;
+      margin-top: 0px;
+
+      > * {
+        width: 100%;
+        text-align: center; 
+      }  
+
+      button.btn-close {
+        top: initial;
+        right: initial;
+        position: initial;
+        margin: auto;
+        font-size: 0.9em;
+        padding: initial;
+        height: initial;       
+      }
+    }
+  }
+
+  .modal-body {
+    @include media-breakpoint-up(md) {
+      padding: 30px 65px;
+    }  
+    border: 0px;
+  }
+
   .modal-footer {
     justify-content: flex-start;
-  }
+  
+    @include media-breakpoint-up(md) {
+      padding: 30px 65px;
+    }
 
-  @include media-breakpoint-up(md) { 
-    .modal-footer {
-     padding-left: 1.75rem;
-     padding-bottom:1rem;
+    @include media-breakpoint-down(md) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: .75rem;
+
+        > * {
+          width: 100%;
+        }   
     }
   }
 
-  .btn-close{
+  .btn-close {
     align-self: baseline;
   }
+
+  .modal-title {
+    font-family: $font-secondary;
+    font-weight: $font-normal;
+    font-size: 31px;
+    color: $color-darkblue;
+    letter-spacing: 0;
+   
+    @include media-breakpoint-down(sm) {
+      margin-top: 20px;
+      line-height:normal;
+    }  
+  }
+
 }

package/dist/scss/base/variables.scss

@@ -90,7 +90,8 @@ $font-black : 900;
 
 $font-color-primary : $color-darkblue;
 
-
+//chatcloud
+$color-chatcloud:#E1EFF8;
 
 //dropdown item vars 
 $dropdown-bg: #fff;

package/dist/scss/component-library-styling.scss

@@ -18,4 +18,5 @@
 @import "user";
 @import "markdown-editor";
 @import "modal";
-@import "attachments"
+@import "attachments";
+@import "chatcloud";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.20.0",
+    "version": "0.21.0",
     "author": "Ralph van der Neut <rvanderneut@beterdichtbij.nl>",
     "type": "module",
     "files": [