@beterdichtbij/component-library 0.20.0 → 0.22.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/IconAcademy.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/IconAcademy.vue.d.ts.map

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

package/dist/components/atoms/icons/IconArrowDown.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/IconArrowDown.vue.d.ts.map

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

package/dist/components/atoms/icons/IconArrowUp.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/IconArrowUp.vue.d.ts.map

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

package/dist/components/atoms/icons/IconCardView.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/IconCardView.vue.d.ts.map

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

package/dist/components/atoms/icons/IconEdit.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/IconEdit.vue.d.ts.map

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

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/IconListView.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/IconListView.vue.d.ts.map

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

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

@@ -1,20 +1,28 @@
-import IconCheck from "./IconCheck.vue";
-import IconError from "./IconError.vue";
+import IconAcademy from "./IconAcademy.vue";
+import IconArrowDown from "./IconArrowDown.vue";
+import IconArrowUp from "./IconArrowUp.vue";
 import IconAttachment from "./IconAttachment.vue";
+import IconBold from "./IconBold.vue";
+import IconBulletList from "./IconBulletList.vue";
 import IconCalendar from "./IconCalendar.vue";
-import IconInfo from "./IconInfo.vue";
-import IconRemove from "./IconRemove.vue";
-import IconFile from "./IconFile.vue";
+import IconCardView from "./IconCardView.vue";
 import IconCaretDown from "./IconCaretDown.vue";
-import IconCaretRight from "./IconCaretRight.vue";
 import IconCaretLeft from "./IconCaretLeft.vue";
+import IconCaretRight from "./IconCaretRight.vue";
+import IconCheck from "./IconCheck.vue";
 import IconClose from "./IconClose.vue";
-import IconItalic from "./IconItalic.vue";
-import IconBold from "./IconBold.vue";
-import IconUnderline from "./IconUnderline.vue";
-import IconBulletList from "./IconBulletList.vue";
-import IconOrderedList from "./IconOrderedList.vue";
-import IconHyperlink from "./IconHyperlink.vue";
 import IconDownloadImage from "./IconDownloadImage.vue";
+import IconEdit from "./IconEdit.vue";
+import IconError from "./IconError.vue";
+import IconEyeShow from "./IconEyeShow.vue";
+import IconEyeSlash from "./IconEyeSlash.vue";
+import IconFile from "./IconFile.vue";
+import IconHyperlink from "./IconHyperlink.vue";
+import IconInfo from "./IconInfo.vue";
+import IconItalic from "./IconItalic.vue";
+import IconListView from "./IconListView.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 IconOrderedList from "./IconOrderedList.vue";
+import IconRemove from "./IconRemove.vue";
+import IconUnderline from "./IconUnderline.vue";
+export { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, };

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/components/molecules/BDMobileMenu/BDMobileMenu.vue.d.ts

@@ -0,0 +1,29 @@
+import type { PropType as __PropType } from 'vue';
+import type { BDLinkProps } from '../../../interfaces/BDLinkProps';
+declare const _sfc_main: import("vue").DefineComponent<{
+    active: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: undefined;
+    };
+    options: {
+        type: __PropType<BDLinkProps[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("signout" | "hide")[], "signout" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: undefined;
+    };
+    options: {
+        type: __PropType<BDLinkProps[]>;
+        required: true;
+    };
+}>> & {
+    onSignout?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
+}, {
+    active: boolean | undefined;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1 @@
+{"version":3,"file":"BDMobileMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/BDMobileMenu/BDMobileMenu.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,+GAA+G,CAAC;AACtI,cAAc,+GAA+G,CAAC;AAC9H,eAAe,SAAS,CAAC"}

package/dist/components/organisms/BDHeader/BDHeader.vue.d.ts

@@ -0,0 +1,58 @@
+import type { PropType as __PropType } from 'vue';
+import type { BDLinkProps } from '../../../interfaces/BDLinkProps';
+import type { bootstrapSizes } from '../../../types/BootstrapSizes';
+declare const _sfc_main: import("vue").DefineComponent<{
+    dropdownMenuTitle: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dropdownOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    headerOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    src: {
+        type: __PropType<string | null | undefined>;
+        required: false;
+    };
+    profileImageAlt: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    profileImageSize: {
+        type: __PropType<bootstrapSizes | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "signout")[], "click" | "signout", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dropdownMenuTitle: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dropdownOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    headerOptions: {
+        type: __PropType<BDLinkProps[] | undefined>;
+        required: false;
+    };
+    src: {
+        type: __PropType<string | null | undefined>;
+        required: false;
+    };
+    profileImageAlt: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    profileImageSize: {
+        type: __PropType<bootstrapSizes | undefined>;
+        required: false;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onSignout?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _sfc_main;

package/dist/components/organisms/BDHeader/BDHeader.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BDHeader.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/BDHeader/BDHeader.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,uGAAuG,CAAC;AAC9H,cAAc,uGAAuG,CAAC;AACtH,eAAe,SAAS,CAAC"}

package/dist/constants/string.d.ts

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

package/dist/directives/BDTooltip.d.ts

@@ -0,0 +1,3 @@
+export declare const vBdTooltip: {
+    mounted: (element: Element) => void;
+};

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 { IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, IconCalendar, IconDownloadImage, IconMenu, IconEdit, IconCardView, IconListView, 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";
@@ -23,11 +23,15 @@ import BDToast from "./components/atoms/BDToast/BDToast.vue";
 import BDDropdownItem from "./components/molecules/BDDropdownItem/BDDropdownItem.vue";
 import BDDropzone from "./components/molecules/BDDropzone/BDDropzone.vue";
 import BDMarkdownEditor from "./components/molecules/BDMarkdownEditor/BDMarkdownEditor.vue";
+import BDMobileMenu from "./components/molecules/BDMobileMenu/BDMobileMenu.vue";
 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 BDHeader from "./components/organisms/BDHeader/BDHeader.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, };
+import { vBdTooltip } from "./directives/BDTooltip";
+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, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconDownloadImage, IconEdit, IconError, IconEyeShow, IconEyeSlash, IconFile, IconHyperlink, IconInfo, IconItalic, IconListView, IconMenu, IconOrderedList, IconRemove, IconUnderline, useModal, useToaster, vBdTooltip, };

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/_header.scss

@@ -0,0 +1,106 @@
+.header-navbar {
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 15px;
+    background-color: white;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000; 
+
+    .bd-hamburger {
+        display: none;
+        font-size: 	.9375rem;
+        font-family: $font-secondary;
+        align-items: center;
+        width: 58px;
+        justify-content: space-between;
+        font-weight: $font-bold;
+        cursor: pointer;
+        user-select: none;
+
+        .icon-menu {
+            width: 14px;
+            font-weight: 900;
+        }
+    }
+      
+    .bd-logo {
+        cursor: pointer;
+        width: 169px;
+    }
+
+    // css verwijderen als variant button is opgenomen BDButton
+    .btn-header {
+        color: #394156;
+        background-color: transparent;
+        font-weight: 400;
+        border-radius: 24px;
+        padding-left: 16px;
+        padding-right: 16px;
+        text-decoration: none;
+        margin: 0px 4px;
+
+        &.router-link-active {
+            background-color: #f1f2f4;
+        }
+    }
+
+    .bd-btn-settings {
+        height: 56px;
+        user-select: none;
+
+        .bd-profile-picture {
+            width: 40px;
+            height: 40px;
+        }
+
+        .bd-dropdown.dropdown {
+            height: 100%;
+
+            .dropdown-toggle {
+                height: 100%;
+                margin-right: 0px;
+                text-decoration: none;
+                font-weight: $font-medium;
+                font-family: $headings-font-family;
+
+                span {
+                    white-space: nowrap;
+                    overflow-x: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 250px;
+                    letter-spacing: 0;
+                }
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .dropdown-menu {
+                margin-top: 0px;
+
+                .dropdown-item:active {
+                    color: var(--bs-dropdown-link-color);
+                }
+            }
+        }
+    }
+
+    @media (max-width: map-get($grid-breakpoints, md)) {
+        .bd-hamburger {
+            display: flex;
+        }
+
+        .bd-logo {
+            width: 134px;
+        }
+
+        .bd-btn-settings, .btn-header {
+            display: none !important;
+        }
+    }
+}