@beterdichtbij/component-library 0.59.0 → 0.60.1

package/dist/components/modals/BDMessageTemplateFormModal/BDMessageTemplateFormModal.vue.d.ts

@@ -0,0 +1,26 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    $emit: (event: "close" | "action" | "show-attachment" | "on-submit" | "on-input", ...args: any[]) => void;
+    modelValue: Record<string, any>;
+    visible: boolean;
+    editable: boolean;
+    serverErrors: unknown[];
+    validation: Record<string, any>;
+    contentLibraryExternalProviders: unknown[];
+    files?: unknown[] | undefined;
+    practitionerOptions?: unknown[] | undefined;
+    departmentOptions?: unknown[] | undefined;
+    categoryOptions?: unknown[] | undefined;
+    $props: {
+        readonly modelValue?: Record<string, any> | undefined;
+        readonly visible?: boolean | undefined;
+        readonly editable?: boolean | undefined;
+        readonly serverErrors?: unknown[] | undefined;
+        readonly validation?: Record<string, any> | undefined;
+        readonly contentLibraryExternalProviders?: unknown[] | undefined;
+        readonly files?: unknown[] | undefined;
+        readonly practitionerOptions?: unknown[] | undefined;
+        readonly departmentOptions?: unknown[] | undefined;
+        readonly categoryOptions?: unknown[] | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,18 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    $emit: (event: "update:modelValue" | "on-input", ...args: any[]) => void;
+    modelValue: unknown[];
+    state: boolean;
+    options: unknown[];
+    errorMessage: string;
+    selectAllText: string;
+    overflow: boolean;
+    $props: {
+        readonly modelValue?: unknown[] | undefined;
+        readonly state?: boolean | undefined;
+        readonly options?: unknown[] | undefined;
+        readonly errorMessage?: string | undefined;
+        readonly selectAllText?: string | undefined;
+        readonly overflow?: boolean | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,20 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    $emit: (event: "action" | "show-attachment" | "on-input", ...args: any[]) => void;
+    modelValue: Record<string, any>;
+    validation: Record<string, any>;
+    practitionerOptions: unknown[];
+    departmentOptions: unknown[];
+    categoryOptions: unknown[];
+    contentLibraryExternalProviders: unknown[];
+    files?: unknown[] | undefined;
+    $props: {
+        readonly modelValue?: Record<string, any> | undefined;
+        readonly validation?: Record<string, any> | undefined;
+        readonly practitionerOptions?: unknown[] | undefined;
+        readonly departmentOptions?: unknown[] | undefined;
+        readonly categoryOptions?: unknown[] | undefined;
+        readonly contentLibraryExternalProviders?: unknown[] | undefined;
+        readonly files?: unknown[] | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFormElement>;
+export default _default;

package/dist/index.d.ts

@@ -46,6 +46,7 @@ import { default as BDConfirmationModal } from './components/modals/BDConfirmati
 import { default as BDContentLibraryModal } from './components/modals/BDContentLibraryModal/BDContentLibraryModal.vue';
 import { default as BDConversationToTextModal } from './components/modals/BDConversationToTextModal/BDConversationToTextModal.vue';
 import { default as BDImageAttachmentModal } from './components/modals/BDImageAttachmentModal/BDImageAttachmentModal.vue';
+import { default as BDMessageTemplateFormModal } from './components/modals/BDMessageTemplateFormModal/BDMessageTemplateFormModal.vue';
 import { default as BDVideoCallConfirmationModal } from './components/modals/BDVideoCallConfirmationModal/BDVideoCallConfirmationModal.vue';
 import { default as BDChangePasswordTemplate } from './components/templates/BDChangePasswordTemplate/BDChangePasswordTemplate.vue';
 import { default as BDContentLibraryTemplate } from './components/templates/BDContentLibraryTemplate/BDContentLibraryTemplate.vue';
@@ -67,4 +68,4 @@ import { CopyChatMessagesToClipboard, CopyChatMessageToClipboard, CopyHl7Message
 import { getDisplayDateNumeric, getDisplayDateTimeNumeric, getDisplayDateTimeTextual, getDisplayDateTextual } from './utils/display-date';
 import { TransformHyperlinks, CreateHyperlinkParagraph, ValidateUrl } from './utils/hyperlink';
 import { CreateThumbnailUri, MapAttachmentsForApi, MapToAttachmentObjects } from './utils/attachment';
-export { BDAlert, BDArticle, BDAttachmentPreviewList, BDAttachmentUploadModal, BDBadge, BDAssignConversationModal, BDButton, BDCard, BDChangePasswordTemplate, BDChatCloud, BDCol, BDCollapsableCard, BDConfirmationModal, BDContentLibraryModal, BDConversationToTextModal, BDContentLibrarySplitButton, BDContentLibraryTemplate, BDContainer, BDDropdown, BDDropdownItem, BDDropzone, BDForm, BDFormCheckbox, BDFormInput, BDFormInvalidFeedback, BDFormSelect, BDHeader, BDImageAttachmentModal, BDImageAttachmentPreviewList, BDInputGroup, BDLink, BDLogo, BDMarkdownEditor, BDMobileMenu, BDModal, BDNotFoundTemplate, BDPagination, BDPhoneNumberEditModal, BDPill, BDPractitionerHeader, BDProfileImage, BDRow, BDSessionTimeOutModal, BDTable, BDToast, BDUser, BDUserInformation, BDVideoCallConfirmationModal, BDVideoCallToast, BDZoomslider, BDDate, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCall, IconCallReject, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClipboard, IconClose, IconComment, IconCommentActive, IconCommentStatic, IconCommonFileEmpty, IconCommonFileWarning, IconContactPerson, IconCopy, IconDelete, IconDoubleCheck, IconDownloadImage, IconEdit, IconEndCall, IconError, IconExternal, IconEyeShow, IconEyeSlash, IconFile, IconFileAdded, IconForward, IconHix, IconHyperlink, IconImageFileLandscape, IconImageFileWarning, IconInbox, IconInfo, IconInformationCircle, IconItalic, IconListView, IconLock, IconLusciiEscalated, IconLusciiLogo, IconLusciiOpen, IconLusciiPriorityHigh, IconLusciiPriorityLow, IconLusciiPriorityMedium, IconMenu, IconMessage, IconMessageForward, IconMicrophoneSlash, IconMicrosoftTeams, IconMin, IconOrderedList, IconPlus, IconRefresh, IconRemove, IconSananetLogo, IconService, IconShareScreen, IconSingleNeutral, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleDown, IconTriangleExclamation, IconUnderline, IconVideocall, IconVideoDisabled, IconWarning, IconZorgkaart, ChangePasswordData, ConfirmPhoneNumberUpdateData, StartPhoneNumberUpdateData, ValidationChangePasswordData, useModal, usePopover, useServerErrors, useSessionTimeOut, useToaster, useValidation, useWindow, useZoom, vBdTooltip, CopyChatMessagesToClipboard, CopyChatMessageToClipboard, CopyHl7MessagesToClipboard, getDisplayDateNumeric, getDisplayDateTimeNumeric, getDisplayDateTimeTextual, getDisplayDateTextual, TransformHyperlinks, CreateHyperlinkParagraph, ValidateUrl, CreateThumbnailUri, MapAttachmentsForApi, MapToAttachmentObjects, };
+export { BDAlert, BDArticle, BDAttachmentPreviewList, BDAttachmentUploadModal, BDBadge, BDAssignConversationModal, BDButton, BDCard, BDChangePasswordTemplate, BDChatCloud, BDCol, BDCollapsableCard, BDConfirmationModal, BDContentLibraryModal, BDConversationToTextModal, BDContentLibrarySplitButton, BDContentLibraryTemplate, BDContainer, BDDropdown, BDDropdownItem, BDDropzone, BDForm, BDFormCheckbox, BDFormInput, BDFormInvalidFeedback, BDFormSelect, BDHeader, BDImageAttachmentModal, BDImageAttachmentPreviewList, BDInputGroup, BDLink, BDLogo, BDMarkdownEditor, BDMessageTemplateFormModal, BDMobileMenu, BDModal, BDNotFoundTemplate, BDPagination, BDPhoneNumberEditModal, BDPill, BDPractitionerHeader, BDProfileImage, BDRow, BDSessionTimeOutModal, BDTable, BDToast, BDUser, BDUserInformation, BDVideoCallConfirmationModal, BDVideoCallToast, BDZoomslider, BDDate, IconAcademy, IconArrowDown, IconArrowUp, IconAttachment, IconBold, IconBulletList, IconCalendar, IconCall, IconCallReject, IconCardView, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClipboard, IconClose, IconComment, IconCommentActive, IconCommentStatic, IconCommonFileEmpty, IconCommonFileWarning, IconContactPerson, IconCopy, IconDelete, IconDoubleCheck, IconDownloadImage, IconEdit, IconEndCall, IconError, IconExternal, IconEyeShow, IconEyeSlash, IconFile, IconFileAdded, IconForward, IconHix, IconHyperlink, IconImageFileLandscape, IconImageFileWarning, IconInbox, IconInfo, IconInformationCircle, IconItalic, IconListView, IconLock, IconLusciiEscalated, IconLusciiLogo, IconLusciiOpen, IconLusciiPriorityHigh, IconLusciiPriorityLow, IconLusciiPriorityMedium, IconMenu, IconMessage, IconMessageForward, IconMicrophoneSlash, IconMicrosoftTeams, IconMin, IconOrderedList, IconPlus, IconRefresh, IconRemove, IconSananetLogo, IconService, IconShareScreen, IconSingleNeutral, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleDown, IconTriangleExclamation, IconUnderline, IconVideocall, IconVideoDisabled, IconWarning, IconZorgkaart, ChangePasswordData, ConfirmPhoneNumberUpdateData, StartPhoneNumberUpdateData, ValidationChangePasswordData, useModal, usePopover, useServerErrors, useSessionTimeOut, useToaster, useValidation, useWindow, useZoom, vBdTooltip, CopyChatMessagesToClipboard, CopyChatMessageToClipboard, CopyHl7MessagesToClipboard, getDisplayDateNumeric, getDisplayDateTimeNumeric, getDisplayDateTimeTextual, getDisplayDateTextual, TransformHyperlinks, CreateHyperlinkParagraph, ValidateUrl, CreateThumbnailUri, MapAttachmentsForApi, MapToAttachmentObjects, };

package/dist/locales/en.json

@@ -1,11 +1,11 @@
-{
-    "notFoundTemplate": {
-        "title": "Page not found",
-        "description": "The page you're looking for couldn't be found. Check the URL or go back to the mainpage.",
-        "buttonDefault": "Back to mainpage"
-    },
-    "practitionerHeader": {
-        "tooltipAcademy": "BeterDichtbij Academie",
-        "menuItemAcademy": "Academie"
-    }
+{
+    "notFoundTemplate": {
+        "title": "Page not found",
+        "description": "The page you're looking for couldn't be found. Check the URL or go back to the mainpage.",
+        "buttonDefault": "Back to mainpage"
+    },
+    "practitionerHeader": {
+        "tooltipAcademy": "BeterDichtbij Academie",
+        "menuItemAcademy": "Academie"
+    }
 }

package/dist/locales/nl.json

@@ -1,86 +1,99 @@
-{
-    "assignConversationModal": {
-        "title": "Gesprek overdragen",
-        "submitButton": "Gesprek overdragen",
-        "conclude": "Afhandelen bij de overdracht",
-        "concludeTooltip": "Het gesprek blijft beschikbaar, deze wordt getoond als het filter \"afgehandeld\" is geselecteerd. Je patiënt kan ook nog gewoon reageren.",
-        "makeUnread": "Gesprek op ongelezen zetten"
-    },
-    "attachmentUploadModal": {
-        "title": "Bijlage toevoegen",
-        "submitButton": "Toevoegen",
-        "infoMessage": "Kies je bestand.",
-        "addAttachmentButton": "Bijlage toevoegen",
-        "errorMessage": "Fout opgetreden",
-        "fileTooBigErrorMessage": "Bestand is te groot.",
-        "fileSizeExceededMessage": "Bestanden mogen maximaal 10 MB groot zijn."
-    },
-    "changePasswordTemplate": {
-        "toasters": {
-            "reset": "De velden zijn geleegd."
-        }
-    },
-    "contentLibraryCard": {
-        "insert": "Invoegen"
-    },
-    "contentLibraryCardMessageTemplate": {
-        "insert": "Invoegen",
-        "collapseOpen": "Inklappen",
-        "collapseClosed": "Lees meer",
-        "popoverIsSharedByOtherUser": "Dit bericht kan alleen door de eigenaar of beheerder aangepast worden",
-        "delete": "Verwijderen",
-        "edit": "Wijzigen"
-    },
-    "contentLibraryOverview": {
-        "noResults": "Er zijn geen resultaten gevonden"
-    },
-    "contentLibrarySplitButton": {
-        "messageTemplatesTitle": "Standaardberichten"
-    },
-    "contentLibraryTemplate": {
-        "changeCategoryButtonLabel": "Mijn categorieën aanpassen",
-        "newMessageText": "Nieuw bericht",
-        "message": "Bericht",
-        "messages": "Berichten",
-        "more": "Meer",
-        "less": "Minder",
-        "searchPlaceholder": "Zoek een bericht",
-        "searchPlaceholderSearch": "Vul een zoekterm in om resultaten te tonen"
-    },
-    "conversationToTextModal": {
-        "copyButton": "Kopieer selectie naar klembord",
-        "copySuccess": "Het gesprek is gekopieerd naar het klembord.",
-        "onBehalfOf": "namens",
-        "prefix": "Communicatie vanuit BeterDichtbij",
-        "selectAll": "Alles selecteren",
-        "systemMessage": "Tussentijdse mededeling"
-    },
-    "imageAttachmentModal": {
-        "download": "Download afbeelding",
-        "loading": "Afbeelding aan het laden"
-    },
-    "notFoundTemplate": {
-        "title": "Pagina niet gevonden",
-        "description": "De pagina die je zoekt kon niet gevonden worden. Controleer de URL of ga terug naar de hoofdpagina.",
-        "buttonDefault": "Terug naar hoofdpagina"
-    },
-    "practitionerHeader": {
-        "academyTooltip": "BeterDichtbij Academie",
-        "academyMenuItem": "Academie"
-    },
-    "videoCallConfirmationModal": {
-        "title": "Beeldbellen",
-        "cancel": "Nee",
-        "close": "Sluiten",
-        "ok": "Ja",
-        "message": "Weet je zeker dat je wilt beeldbellen?",
-        "participantMessage": "Weet je zeker dat je wilt beeldbellen met",
-        "testMessage": "Doe de beeldbeltest",
-        "noMobileActivationMessage": "gebruikt BeterDichtbij via de web applicatie waardoor beeldbellen niet mogelijk is. Vraag de patiënt om de app te installeren op een mobiele telefoon of tablet.",
-        "noCompatibleDevices": "gebruikt mogelijk een mobiele telefoon of tablet die beeldbellen niet ondersteunt. Het is daarom momenteel niet mogelijk om te beeldbellen met deze patiënt.",
-        "generalWarning": "Beeldbellen is niet mogelijk om de volgende redenen:",
-        "cameraPermissionMissing": "Je hebt geen toestemming gegeven voor gebruik van de camera door BeterDichtbij.",
-        "microphonePermissionMissing": "Je hebt geen toestemming gegeven voor gebruik van de microfoon door BeterDichtbij.",
-        "helpMessage": "om te controleren of je camera en microfoon goed werken."
-    }
+{
+    "assignConversationModal": {
+        "title": "Gesprek overdragen",
+        "submitButton": "Gesprek overdragen",
+        "conclude": "Afhandelen bij de overdracht",
+        "concludeTooltip": "Het gesprek blijft beschikbaar, deze wordt getoond als het filter \"afgehandeld\" is geselecteerd. Je patiënt kan ook nog gewoon reageren.",
+        "makeUnread": "Gesprek op ongelezen zetten"
+    },
+    "attachmentUploadModal": {
+        "title": "Bijlage toevoegen",
+        "submitButton": "Toevoegen",
+        "infoMessage": "Kies je bestand.",
+        "addAttachmentButton": "Bijlage toevoegen",
+        "errorMessage": "Fout opgetreden",
+        "fileTooBigErrorMessage": "Bestand is te groot.",
+        "fileSizeExceededMessage": "Bestanden mogen maximaal 10 MB groot zijn."
+    },
+    "changePasswordTemplate": {
+        "toasters": {
+            "reset": "De velden zijn geleegd."
+        }
+    },
+    "contentLibraryCard": {
+        "insert": "Invoegen"
+    },
+    "contentLibraryCardMessageTemplate": {
+        "insert": "Invoegen",
+        "collapseOpen": "Inklappen",
+        "collapseClosed": "Lees meer",
+        "popoverIsSharedByOtherUser": "Dit bericht kan alleen door de eigenaar of beheerder aangepast worden",
+        "delete": "Verwijderen",
+        "edit": "Wijzigen"
+    },
+    "contentLibraryOverview": {
+        "noResults": "Er zijn geen resultaten gevonden"
+    },
+    "contentLibrarySplitButton": {
+        "messageTemplatesTitle": "Standaardberichten"
+    },
+    "contentLibraryTemplate": {
+        "changeCategoryButtonLabel": "Mijn categorieën aanpassen",
+        "newMessageText": "Nieuw bericht",
+        "message": "Bericht",
+        "messages": "Berichten",
+        "more": "Meer",
+        "less": "Minder",
+        "searchPlaceholder": "Zoek een bericht",
+        "searchPlaceholderSearch": "Vul een zoekterm in om resultaten te tonen"
+    },
+    "conversationToTextModal": {
+        "copyButton": "Kopieer selectie naar klembord",
+        "copySuccess": "Het gesprek is gekopieerd naar het klembord.",
+        "onBehalfOf": "namens",
+        "prefix": "Communicatie vanuit BeterDichtbij",
+        "selectAll": "Alles selecteren",
+        "systemMessage": "Tussentijdse mededeling"
+    },
+    "imageAttachmentModal": {
+        "download": "Download afbeelding",
+        "loading": "Afbeelding aan het laden"
+    },
+    "messageTemplateFormModal": {
+        "createTitle": "Standaardbericht toevoegen",
+        "editTitle": "Standaardbericht wijzigen",
+        "titleLabel": "Titel",
+        "titlePlaceHolder": "Zwelling na botbreuk",
+        "replyTemplateLabel": "Standaardbericht",
+        "replyTemplatePlaceHolder": "Schrijf hier jouw bericht naar de patiënt",
+        "sharedWithLabel": "Delen met",
+        "owner": "Eigenaar",
+        "tooltipOwner": "Als het bericht met meerdere instanties (teams) gedeeld wordt, kunje alleen zelf eigenaar worden",
+        "categoryLabel": "Categorie",
+        "validation": "Dit veld is verplicht."
+    },
+    "notFoundTemplate": {
+        "title": "Pagina niet gevonden",
+        "description": "De pagina die je zoekt kon niet gevonden worden. Controleer de URL of ga terug naar de hoofdpagina.",
+        "buttonDefault": "Terug naar hoofdpagina"
+    },
+    "practitionerHeader": {
+        "academyTooltip": "BeterDichtbij Academie",
+        "academyMenuItem": "Academie"
+    },
+    "videoCallConfirmationModal": {
+        "title": "Beeldbellen",
+        "cancel": "Nee",
+        "close": "Sluiten",
+        "ok": "Ja",
+        "message": "Weet je zeker dat je wilt beeldbellen?",
+        "participantMessage": "Weet je zeker dat je wilt beeldbellen met",
+        "testMessage": "Doe de beeldbeltest",
+        "noMobileActivationMessage": "gebruikt BeterDichtbij via de web applicatie waardoor beeldbellen niet mogelijk is. Vraag de patiënt om de app te installeren op een mobiele telefoon of tablet.",
+        "noCompatibleDevices": "gebruikt mogelijk een mobiele telefoon of tablet die beeldbellen niet ondersteunt. Het is daarom momenteel niet mogelijk om te beeldbellen met deze patiënt.",
+        "generalWarning": "Beeldbellen is niet mogelijk om de volgende redenen:",
+        "cameraPermissionMissing": "Je hebt geen toestemming gegeven voor gebruik van de camera door BeterDichtbij.",
+        "microphonePermissionMissing": "Je hebt geen toestemming gegeven voor gebruik van de microfoon door BeterDichtbij.",
+        "helpMessage": "om te controleren of je camera en microfoon goed werken."
+    }
 }

package/dist/scss/_alert.scss

@@ -1,11 +1,11 @@
-@each $variant, $color in $theme-colors {
-  $bg-color: tint-color($color, 90%); 
-  .alert-#{$variant} {
-    @include alert($color, $bg-color);
-  }
-}
-
-.alert-warning {
-  color: $color-darkblue;
-}
-
+@each $variant, $color in $theme-colors {
+  $bg-color: tint-color($color, 90%); 
+  .alert-#{$variant} {
+    @include alert($color, $bg-color);
+  }
+}
+
+.alert-warning {
+  color: $color-darkblue;
+}
+

package/dist/scss/_article.scss

@@ -1,24 +1,24 @@
-
-article{
-
-  &.bd-article{
-    display:flex;
-    flex-direction: column;
-    padding: 1.125rem;
-    width:100%;
-    gap: 1rem;
-    background-color: $white;
-    border-radius: 8px;
-
-    header{
-      display: flex;
-      justify-content: space-between;
-    }
-
-    footer {
-      display:flex;
-      justify-content: space-between;
-    }
-  }
-
+
+article{
+
+  &.bd-article{
+    display:flex;
+    flex-direction: column;
+    padding: 1.125rem;
+    width:100%;
+    gap: 1rem;
+    background-color: $white;
+    border-radius: 8px;
+
+    header{
+      display: flex;
+      justify-content: space-between;
+    }
+
+    footer {
+      display:flex;
+      justify-content: space-between;
+    }
+  }
+
 }

package/dist/scss/_assign-conversation-modal.scss

@@ -1,14 +1,14 @@
-#assign-conversation-modal {
-    .invalid-feedback-text {
-        color: #e0462e;
-        margin-top: 0.25rem;
-        font-size: 0.875em;
-    }
-
-    .form-control:disabled {
-        color: black;
-        background-color: green;
-        border-color: #dee2e6;
-        opacity: 1;
-    }
+#assign-conversation-modal {
+    .invalid-feedback-text {
+        color: #e0462e;
+        margin-top: 0.25rem;
+        font-size: 0.875em;
+    }
+
+    .form-control:disabled {
+        color: black;
+        background-color: green;
+        border-color: #dee2e6;
+        opacity: 1;
+    }
 }

package/dist/scss/_attachments.scss

@@ -1,107 +1,107 @@
-
-.attachment-list {
-  display: flex;
-  justify-content: flex-start;
-  flex-flow: wrap;
-  margin-top: 20px;
-  list-style: none;
-  padding: 0px;
-
-  &__item {
-    margin-bottom: 10px;
-
-    @include media-breakpoint-up(md) {
-      margin-bottom: 25px;
-    }
-
-    &:not(:last-child) {
-      margin-right: 10px;
-
-      @include media-breakpoint-up(md) {
-        margin-right: 20px;
-      }
-    }
-  }
-
-  .attachment {
-    .img-preview {
-      cursor: zoom-in;
-      border-radius: 8px;
-      border: 1px solid #abb0be;
-    }
-
-    .download-button-image {
-      position: absolute;
-      top: 3px;
-      right: 3px;
-      padding: 5px;
-      width: 30px;
-      height: 34px;
-      text-align: center;
-      display: none;
-      cursor: pointer;
-      background-color: white;
-      border-radius: 8px;
-      
-      &.btn{
-      border:1px solid #abb0be;
-      }
-
-      svg {
-        margin-right: 0px;
-        stroke: $color-stroke-gray;
-      }
-
-      &:hover {
-        svg {
-          stroke: $color-darkblue;
-        }
-      }
-    }
-
-    &:hover {
-      .download-button-image {
-        display: block;
-      }
-    }
-  }
-}
-
-
-
-.attachment-link {
-  color: $primary;
-  text-decoration: none;
-  font-weight: $font-normal;
-  position: relative;
-  fill: $primary;
-  .icon-attachment {
-    margin-right: 5px;
-  }
-  
-  .icon-external {
-    fill: $color-border;
-    margin-left: 10px;
-  }
-
-  .icon-file-added {
-    fill: $color-blue;
-    margin-right: 10px;
-  }
-  &:hover{
-    fill:#2a76a6;
-  }
-}
-
-.attachment {
-  position: relative;
-  width: fit-content;
-
-  img {
-    object-fit: contain;
-    min-height: 40px;
-    max-height: 120px;
-    width: auto;
-  }
-}
-
+
+.attachment-list {
+  display: flex;
+  justify-content: flex-start;
+  flex-flow: wrap;
+  margin-top: 20px;
+  list-style: none;
+  padding: 0px;
+
+  &__item {
+    margin-bottom: 10px;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 25px;
+    }
+
+    &:not(:last-child) {
+      margin-right: 10px;
+
+      @include media-breakpoint-up(md) {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .attachment {
+    .img-preview {
+      cursor: zoom-in;
+      border-radius: 8px;
+      border: 1px solid #abb0be;
+    }
+
+    .download-button-image {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      padding: 5px;
+      width: 30px;
+      height: 34px;
+      text-align: center;
+      display: none;
+      cursor: pointer;
+      background-color: white;
+      border-radius: 8px;
+      
+      &.btn{
+      border:1px solid #abb0be;
+      }
+
+      svg {
+        margin-right: 0px;
+        stroke: $color-stroke-gray;
+      }
+
+      &:hover {
+        svg {
+          stroke: $color-darkblue;
+        }
+      }
+    }
+
+    &:hover {
+      .download-button-image {
+        display: block;
+      }
+    }
+  }
+}
+
+
+
+.attachment-link {
+  color: $primary;
+  text-decoration: none;
+  font-weight: $font-normal;
+  position: relative;
+  fill: $primary;
+  .icon-attachment {
+    margin-right: 5px;
+  }
+  
+  .icon-external {
+    fill: $color-border;
+    margin-left: 10px;
+  }
+
+  .icon-file-added {
+    fill: $color-blue;
+    margin-right: 10px;
+  }
+  &:hover{
+    fill:#2a76a6;
+  }
+}
+
+.attachment {
+  position: relative;
+  width: fit-content;
+
+  img {
+    object-fit: contain;
+    min-height: 40px;
+    max-height: 120px;
+    width: auto;
+  }
+}
+

package/dist/scss/_badge.scss

@@ -1,19 +1,19 @@
-.bd-badge {
-  margin: 1.5px;
-}
-
-@each $variant, $color in $theme-colors {
-  $bg-color: tint-color($color, 90%);
-
-  .bd-badge-#{$variant} {
-    @include badge($color, $bg-color);
-  }
-}
-
-.bd-badge-warning {
-  color: $color-darkblue;
-}
-
-.bd-badge-warning {
-  color: $color-darkblue;
+.bd-badge {
+  margin: 1.5px;
+}
+
+@each $variant, $color in $theme-colors {
+  $bg-color: tint-color($color, 90%);
+
+  .bd-badge-#{$variant} {
+    @include badge($color, $bg-color);
+  }
+}
+
+.bd-badge-warning {
+  color: $color-darkblue;
+}
+
+.bd-badge-warning {
+  color: $color-darkblue;
 }

package/dist/scss/_base.scss

@@ -1,2 +1,2 @@
-@import "base/typography.scss";
+@import "base/typography.scss";
 @import "base/variables.scss";