@beterdichtbij/component-library 0.29.4 → 0.30.0

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

@@ -0,0 +1,106 @@
+import type { PropType as __PropType } from 'vue';
+import { type ChangePasswordData } from '../../../types/ChangePasswordData';
+import { type ValidationChangePasswordData } from '../../../types/ValidationChangePasswordData';
+declare const _sfc_main: import("vue").DefineComponent<{
+    data: {
+        type: __PropType<ChangePasswordData>;
+        required: true;
+    };
+    validation: {
+        type: __PropType<ValidationChangePasswordData>;
+        required: true;
+    };
+    serverErrors: {
+        type: __PropType<string[] | null>;
+        required: true;
+    };
+    errorMessages: {
+        type: __PropType<string[] | null>;
+        required: true;
+    };
+    errorMessageText: {
+        type: __PropType<string>;
+        required: true;
+    };
+    title: {
+        type: __PropType<string>;
+        required: true;
+    };
+    alertText: {
+        type: __PropType<string>;
+        required: true;
+    };
+    currentPasswordLabel: {
+        type: __PropType<string>;
+        required: true;
+    };
+    newPasswordLabel: {
+        type: __PropType<string>;
+        required: true;
+    };
+    confirmNewPasswordLabel: {
+        type: __PropType<string>;
+        required: true;
+    };
+    submitButtonText: {
+        type: __PropType<string>;
+        required: true;
+    };
+    cancelButtonText: {
+        type: __PropType<string>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "reset")[], "submit" | "reset", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: __PropType<ChangePasswordData>;
+        required: true;
+    };
+    validation: {
+        type: __PropType<ValidationChangePasswordData>;
+        required: true;
+    };
+    serverErrors: {
+        type: __PropType<string[] | null>;
+        required: true;
+    };
+    errorMessages: {
+        type: __PropType<string[] | null>;
+        required: true;
+    };
+    errorMessageText: {
+        type: __PropType<string>;
+        required: true;
+    };
+    title: {
+        type: __PropType<string>;
+        required: true;
+    };
+    alertText: {
+        type: __PropType<string>;
+        required: true;
+    };
+    currentPasswordLabel: {
+        type: __PropType<string>;
+        required: true;
+    };
+    newPasswordLabel: {
+        type: __PropType<string>;
+        required: true;
+    };
+    confirmNewPasswordLabel: {
+        type: __PropType<string>;
+        required: true;
+    };
+    submitButtonText: {
+        type: __PropType<string>;
+        required: true;
+    };
+    cancelButtonText: {
+        type: __PropType<string>;
+        required: true;
+    };
+}>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onReset?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _sfc_main;

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

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

package/dist/composables/useValidation.d.ts

@@ -0,0 +1,4 @@
+export declare const useValidation: () => {
+    ResetValidation: (validation: any) => void;
+    ValidationObjectIsValid: (validations: any) => boolean;
+};

package/dist/index.d.ts

@@ -32,9 +32,13 @@ import BDTable from "./components/molecules/BDTable/BDTable.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 BDChangePasswordTemplate from "./components/organisms/BDChangePasswordTemplate/BDChangePasswordTemplate.vue";
 import { useModal } from "./composables/useModal";
 import { useServerErrors } from "./composables/useServerErrors";
 import { useToaster } from "./composables/useToaster";
+import { useValidation } from "./composables/useValidation";
 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, 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, useModal, useServerErrors, useToaster, 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, 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, ChangePasswordData, ValidationChangePasswordData, useModal, useServerErrors, useToaster, useValidation, vBdTooltip, getDisplayDate, };

package/dist/scss/_templates.scss

@@ -0,0 +1,327 @@
+// TODO split up per template component
+
+.template {
+    @media (max-width: map-get($grid-breakpoints, md)) {
+        .template-title {
+            padding-left:1rem;
+        }
+
+        .container, .row {
+            --bs-gutter-x: 0;
+        }
+        
+        .container {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
+
+        button {
+            margin-right : 1rem;
+        }
+
+        img {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
+    }
+    
+    &.my-organization-template {
+        .template-header-col {        
+            display: flex;
+            justify-content: space-between;
+            
+            h2 {
+                line-height: 2.375rem;
+            }
+        }
+
+        .bd-card-description {
+            padding:0 2rem;
+
+            h3 {
+                font-size: 20px;
+                font-weight: 700;
+                line-height: 25px;
+            }
+
+            .city {
+                font-family: Work Sans, sans-serif;
+                font-size: 16px;
+                font-weight: 400;
+                line-height: 24px;
+                text-align: left;
+                color: #6B758A;
+            }
+        }
+    }
+   
+    &.profile-edit-template, &.change-password-template {
+        @media (max-width: map-get($grid-breakpoints, md)) {
+            
+            .bd-profile-picture{
+                width:80px;
+                height: 80px;
+            }
+        }
+
+        .vue-date-picker {
+            // Style only applies when dialog is above.
+            .dp__arrow_bottom + div .dp__calendar {
+                $week-height: 45px;
+                height: $week-height * 6;
+            }
+
+            .dp__theme_light {
+                flex: 1;
+                --dp-font-family: $font-primary;
+                --dp-primary-color: #3594CF;
+                --dp-text-color : $font-color-primary;
+
+                .btn {
+                    height: 38px;
+                }
+            }
+        }
+    }
+
+    &.change-password-template {
+        .alert ul {
+            padding-top: 0px;
+        }
+    }
+
+    .bd-card-template {
+        margin-bottom: 50px;
+        padding: 56px;
+
+        @media (max-width: map-get($grid-breakpoints, md)) {
+            padding: 1rem;
+        }
+
+        .card-body{
+            padding:revert;
+        }
+
+        .bd-card-img {
+            display:flex;
+            gap: 18px;
+            margin-bottom: 2rem;
+
+            button,.btn,.btn-link{
+                align-self: center;
+            }           
+        }
+
+        .form-input-with-button{
+            display:flex;
+            gap: 0.5rem;
+        }
+        .form-label{
+            margin-bottom:0.25rem;
+            span.form-label-optional {
+                font-weight:400;
+            }
+        }
+
+        &.my-organization-card {
+            padding: 0px;
+
+            .bd-card-img {
+                padding: 0px;
+                width: 100%;
+                height: 250px;
+                
+               img {
+                object-fit: cover;
+                border-bottom-left-radius: 0px;
+                border-bottom-right-radius: 0px;
+               }
+            }
+        }
+    }  
+
+    &.overview-template {
+        button {
+            margin-right: 0px;
+            background-color: #f5f5f5;
+          }
+
+        .bd-dropdown.dropdown .dropdown-toggle {
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            font-size: 13px;
+            letter-spacing: 0;
+            line-height: 24px;
+            margin-right: 0px;
+            text-decoration: none;
+        }
+
+        .bd-form-checkbox {
+            margin-bottom: 22px;
+            font-family: $font-family-base;
+        }
+
+        .bd-article {
+            margin-bottom: 16px;
+            padding: 20px;
+            cursor: pointer;
+
+            header {
+                position: relative;       
+
+                .bd-date {
+                    color: $secondary;
+                    font-size: .875rem;
+                    font-weight: 400;
+                    text-wrap: nowrap;
+                }
+
+                .bd-counter {
+                    margin-right: 0px;
+                }
+
+                .bd-user__information header {
+                    justify-content: flex-start; 
+                }
+            }
+
+            .bd-dropdown .dropdown-menu {
+                padding: 0px;
+
+                .dropdown-item {
+                    cursor: pointer;
+                    line-height: normal;
+                    padding: 8px 20px;
+                }
+            }
+        }
+        
+        .bd-badge {
+            margin-right:auto;
+            margin: 0px 4px;
+            align-self:flex-start;
+        }
+        
+        .bd-text{
+            line-height: 1.375rem;
+            max-height: 2.75rem;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            -webkit-line-clamp: 2; 
+
+            p {
+                margin-bottom: 0px;
+            }
+        }
+        
+        .bd-body-card {
+            display: flex;
+            justify-content: space-between;
+
+            @media (max-width: map-get($grid-breakpoints, md)) {
+                flex-direction: column;
+                align-items:flex-end;
+                >*:first-child {
+                    align-self: stretch;
+                  }
+            }
+    
+
+        }
+        
+        .bd-dropdown {
+            margin-right: 0px;
+        }
+
+        .bd-counter {
+            display:none
+        }
+
+        .bd-article.is-unread {
+            border-right: 4px solid $primary;
+
+            .bd-date {
+                color: $primary;
+                font-weight: 500;
+            }
+
+            .bd-counter {
+                display: block;
+                width: 20px;
+                height: 20px;
+                border-radius: 12px;
+                background-color: $primary; 
+                margin-top:6px;
+
+            }
+        }
+    }
+
+    &.detail-conversation-template{
+        .bd-card-template {
+            margin-top: 20px;
+        }
+
+        .spinner-border {
+            width: 1rem;
+            height: 1rem;
+            --bs-spinner-border-width: 0.15em;
+        }
+
+        .icon-eye-show {
+            height: 25px;
+            width: 25px;
+            padding-bottom: 3px;
+        }
+    }
+
+    &.not-found-template {
+        padding-top: 0px;
+        
+        .center-screen {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            min-height: 100vh; 
+        }
+          
+        .container-warning {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        background-color: #fff;
+        height: 319px;
+        width: 500px;
+        border-radius: 8px;
+        padding: 40px;
+        
+        }
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, sm)) {
+    .template {
+        &.overview-template {
+            .bd-form-checkbox {
+                padding-left:2.8rem;
+                margin-bottom: 12px;
+            }
+
+            .conversations-container {
+                padding: 0px;
+
+                .bd-article {
+                    margin-bottom: 5px;
+                    border-radius: 0px;
+                    padding: 16px;
+                }
+            }
+        }
+    }
+}

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

@@ -12,6 +12,7 @@
 @import "icons";
 @import "pagination";
 @import "forms";
+@import "form-field";
 @import "header";
 @import "toast";
 @import "dropdown";
@@ -23,4 +24,5 @@
 @import "attachments";
 @import "chatcloud";
 @import "table";
-@import "table-sort-header";
+@import "table-sort-header";
+@import "templates";

package/dist/scss/form-field.scss

@@ -0,0 +1,13 @@
+.bd-form-field {
+    margin-bottom: 27px;
+
+    .form-input-with-button{
+        display: flex;
+        gap: 0.5rem;
+        justify-content: space-between;
+        
+        .btn{
+            height:auto;
+        }
+    }
+}

package/dist/types/ChangePasswordData.d.ts

@@ -0,0 +1,5 @@
+export interface ChangePasswordData {
+    password: string;
+    passwordNew: string;
+    passwordRepeat: string;
+}

package/dist/types/ValidationChangePasswordData.d.ts

@@ -0,0 +1,14 @@
+export interface ValidationChangePasswordData {
+    password: {
+        state: null | boolean;
+        errorLabel: string;
+    };
+    passwordNew: {
+        state: null | boolean;
+        errorLabel: string;
+    };
+    passwordRepeat: {
+        state: null | boolean;
+        errorLabel: string;
+    };
+}

package/package.json

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