@beterdichtbij/component-library 0.32.0 → 0.34.0

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

@@ -0,0 +1,74 @@
+import type { PropType as __PropType } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    imgSrc: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    uri: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    uriDisplayName: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    title: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    subtitle: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    showClose: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    imgSrc: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    uri: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    uriDisplayName: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    title: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    subtitle: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
+    showClose: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+        default: boolean;
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string | undefined;
+    imgSrc: string | undefined;
+    uri: string | undefined;
+    uriDisplayName: string | undefined;
+    subtitle: string | undefined;
+    showClose: boolean | undefined;
+}, {}>;
+export default _sfc_main;

package/dist/components/atoms/BDPill/BDPill.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BDPill.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/BDPill/BDPill.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,+FAA+F,CAAC;AACtH,cAAc,+FAA+F,CAAC;AAC9G,eAAe,SAAS,CAAC"}

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

@@ -5,6 +5,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: string;
     };
+    titleImage: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
     submitButtonTitle: {
         type: __PropType<string | undefined>;
         required: false;
@@ -41,6 +46,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
         default: string;
     };
+    titleImage: {
+        type: __PropType<string | undefined>;
+        required: false;
+        default: string;
+    };
     submitButtonTitle: {
         type: __PropType<string | undefined>;
         required: false;
@@ -76,6 +86,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
 }, {
     title: string | undefined;
+    titleImage: string | undefined;
     submitButtonTitle: string | undefined;
     closeButtonTitle: string | undefined;
     hideFooterCancelButton: boolean;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import BDFormSelect from "./components/atoms/BDFormSelect/BDFormSelect.vue";
 import BDFormCheckbox from "./components/atoms/BDFormCheckbox/BDFormCheckbox.vue";
 import BDArticle from "./components/atoms/BDArticle/BDArticle.vue";
 import BDToast from "./components/atoms/BDToast/BDToast.vue";
+import BDPill from "./components/atoms/BDPill/BDPill.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";
@@ -41,4 +42,4 @@ import { vBdTooltip } from "./directives/BDTooltip";
 import { type ChangePasswordData } from './types/ChangePasswordData';
 import { type ValidationChangePasswordData } from './types/ValidationChangePasswordData';
 import { getDisplayDate } from "./utils/display-date";
-export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDChangePasswordTemplate, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, BDTable, 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, IconService, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleExclamation, IconUnderline, IconContactPerson, ChangePasswordData, ValidationChangePasswordData, useModal, useServerErrors, useToaster, useValidation, vBdTooltip, getDisplayDate, };
+export { BDChatCloud, BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDChangePasswordTemplate, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, BDArticle, BDUser, BDToast, BDAttachmentPreviewList, BDImageAttachmentPreviewList, BDHeader, BDMobileMenu, BDTable, BDPill, 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, IconService, IconSort, IconSortAsc, IconSortDesc, IconSortNone, IconTriangleExclamation, IconUnderline, IconContactPerson, ChangePasswordData, ValidationChangePasswordData, useModal, useServerErrors, useToaster, useValidation, vBdTooltip, getDisplayDate, };

package/dist/interfaces/BDModalProps.d.ts

@@ -1,5 +1,6 @@
 export interface BDModalProps {
     title?: string;
+    titleImage?: string;
     submitButtonTitle?: string;
     closeButtonTitle?: string;
     hideFooterCancelButton: boolean;

package/dist/interfaces/BDPillProps.d.ts

@@ -0,0 +1,8 @@
+export interface BDPillProps {
+    imgSrc?: string;
+    uri?: string;
+    uriDisplayName?: string;
+    title?: string;
+    subtitle?: string;
+    showClose?: boolean;
+}

package/dist/scss/_badge.scss

@@ -1,8 +1,15 @@
-.bd-badge {
-    padding: 5px 8px;
-    border-radius: $border-radius-default;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 0.75rem;
-    line-height: 0.875rem;
-}
+
+@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/_button.scss

@@ -11,7 +11,7 @@
 $btn-variants:
     "primary" $white $blue-text $white $blue-dark none,
     "secondary" $font-color-primary $white $font-color-primary $gray-7 $gray 1px solid $gray,
-    "danger" $white $danger $danger $white none,
+    "danger" $white $red-text $white $red-dark none,
     "colleague" $white $green-text $white $green-dark none,
     "outline-primary" $font-color-primary $white $white $font-color-primary $gray-primary 1px solid $gray-primary,
     "outline-primary-dark" $font-color-primary transparent $white $font-color-primary $gray-primary 1px solid $gray-primary,
@@ -49,12 +49,6 @@ $btn-variants:
     }
 }
 
-.btn-close {
-    .modal & {
-        background-image: initial;
-    }
-}
-
 button {
     &.btn-remove {
         position: absolute;

package/dist/scss/_card.scss

@@ -8,10 +8,14 @@
         align-items: center;
         justify-content: space-between;
         position: relative;
-    
+
+        &.danger {
+            background-color: $red-header;
+        }
+
         &.colleague {
             background-color: $color-colleague;
-        }     
+        }
 
         h2 {
             color: $white;
@@ -20,10 +24,6 @@
             font-size: 1.25rem;
             line-height: 23px;
         }
-
-        .btn-primary {
-            background: #2272C4;
-        }
     }
 
     .card-body {
@@ -82,9 +82,16 @@
     &.no-body  .card-header {
         background-color: $white;
         color: $font-color-primary;
-        border:none;
+        border: none;
         border-radius: $border-radius-default;
-        padding: 20px;
+
+        &.danger {
+            background-color: #dc3545;
+        }
+
+        &.colleague {
+            background-color: $color-colleague;
+        }
         
         h2 {
             font-weight: $font-normal;

package/dist/scss/_modal.scss

@@ -20,11 +20,26 @@
         display: flex;
         gap: 4px;
         background: transparent;
+        background-image: initial;
         color: $gray-primary;
 
         .icon-close {
           width: 24px;
           height: 24px;
+          background-color: $blue-text; 
+          display: inline-block;
+          padding: 4px; 
+          border-radius: 50%;  
+          path {
+              fill: $color-white; 
+          }
+      
+          &:hover {
+              background-color: $color-lightblue;  
+              path {
+                  fill: $blue-text; 
+              }
+          }
         }
       }
 
@@ -118,6 +133,11 @@
         margin-top: 20px;
         line-height:normal;
       }
+
+      .title-image {
+        height: 31px;
+        margin-right: 10px;
+      }
     }
   }
 }

package/dist/scss/_pill.scss

@@ -0,0 +1,89 @@
+.pills-list {
+    &__wrapper {
+        margin-bottom: 20px;
+
+        .bd-chat-cloud-card__footer &{
+            margin-bottom: 0px;
+        }
+
+    }
+
+    &__ul {
+        display: flex;
+        justify-content: flex-start;
+        flex-flow: wrap;
+        list-style: none;
+        gap: 8px;
+        padding: 5px 0px;
+        
+        .bd-chat-cloud-card__footer &{
+            padding: 0px;
+        }
+    }
+
+    &__li {
+        max-width: 300px;
+        overflow: auto;
+        margin: 5px 5px 0px 0px;
+    }
+}
+
+.bd-pill {
+    display: flex;
+    height: 72px;
+    width: auto;
+    background: #f0f7ff;
+    border-radius: 8px;
+    border: 1px solid #d9ecff;
+    overflow: hidden;
+    position: relative;
+
+    &__logo {
+        height: inherit;
+        padding: 16px;
+        margin: 0px;
+        border-right: 1px solid #d9ecff;
+    }
+
+    &__description {
+        padding: 8px 16px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    &__link {
+        font-size: 12px;
+        line-height: 14px;
+        text-decoration: none;
+        svg.icon {
+            fill: $blue;
+            display: inline-block;
+            position: relative;
+        }
+        &:hover {
+            text-decoration: underline;
+        }
+
+    }
+
+    &__title {
+        font-size: 18px;
+        line-height: 23px;
+        font-weight: 700;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; 
+    }
+
+    &__subtitle {
+        font-size: 13px;
+        line-height: 15px;
+        font-weight: 400;
+
+        color: hsla(221, 13%, 48%, 1);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }    
+}

package/dist/scss/base/variables.scss

@@ -50,6 +50,11 @@ $gray-7: #F7F8FA;             // grijs 7: button secondary bg-color hover /borde
 $gray-secondary: #6B758A;     // grijs secondair: subtitles, date cardview
 $gray-primary: #394156;       // grijs primair: headings default tekst color
 
+// red colors direved from Evers + de Gier colorscheme 2024
+$red-header: #DE4141;         // red header
+$red-text: #C32222;           // button variant danger
+$red-dark: #AE1E1E;           // hover button danger
+
 // theme colors
 $danger:$red;
 $primary:$blue;
@@ -83,7 +88,8 @@ $theme-colors: (
   "danger":     $danger,
   "success":    $success,
   "light":      $light,
-  "dark" :      $dark
+  "dark" :      $dark,
+  "gray":       $secondary,
 );
 
 //variables font
@@ -191,4 +197,8 @@ $form-range-track-border-radius:  1rem;
 $form-range-thumb-border-radius:  1rem;
 $form-range-track-height: .5rem;
 $form-range-thumb-width: 1rem;
-$form-range-thumb-height: $form-range-thumb-width;
+$form-range-thumb-height: $form-range-thumb-width;
+
+//focus ring
+$focus-ring-width:      0px;
+$focus-ring-color:      $color-white;

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

@@ -25,4 +25,5 @@
 @import "chatcloud";
 @import "table";
 @import "table-sort-header";
-@import "templates";
+@import "templates";
+@import "pill";

package/dist/scss/mixins.scss

@@ -13,6 +13,25 @@
     }  
 }
 
+@mixin badge($color, $bg-color) {  
+    border-radius: 8px;
+    padding: 5px 8px;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    background-color: $bg-color;
+    color: $color;
+    svg {
+        fill: $color;
+        height: 12px;
+        width: 12px;
+        &.icon{
+        margin-right:8px;
+        }
+    }  
+}
+
 @mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
     color: $color;
     background-color: $bg-color;  

package/dist/types/BootstrapVariants.d.ts

@@ -7,5 +7,6 @@ export declare const BOOTSTRAP_VARIANTS: {
     readonly INFO: "info";
     readonly SUCCESS: "success";
     readonly LIGHT: "light";
+    readonly GRAY: "gray";
 };
 export type bootstrapVariants = GenericEnum<typeof BOOTSTRAP_VARIANTS>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.32.0",
+    "version": "0.34.0",
     "type": "module",
     "files": [
         "dist"