@beterdichtbij/component-library 0.71.0 → 0.72.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/README.md +12 -12
  2. package/dist/bd-component-lib.cjs.js +58 -58
  3. package/dist/bd-component-lib.css +1 -1
  4. package/dist/bd-component-lib.es.js +2597 -2584
  5. package/dist/bd-component-lib.umd.js +59 -59
  6. package/dist/components/actions/BDButton/BDButton.vue.d.ts +2 -2
  7. package/dist/components/layout/BDHeader/BDHeader.vue.d.ts +3 -3
  8. package/dist/locales/en.json +79 -79
  9. package/dist/locales/nl.json +180 -180
  10. package/dist/scss/_active-filters.scss +65 -65
  11. package/dist/scss/_alert.scss +5 -5
  12. package/dist/scss/_article.scss +20 -20
  13. package/dist/scss/_assign-conversation-modal.scss +13 -13
  14. package/dist/scss/_attachments.scss +107 -107
  15. package/dist/scss/_badge.scss +18 -18
  16. package/dist/scss/_button.scss +80 -74
  17. package/dist/scss/_card.scss +56 -56
  18. package/dist/scss/_chatcloud.scss +98 -98
  19. package/dist/scss/_collapsable-card.scss +107 -107
  20. package/dist/scss/_content-library-card-message-template.scss +136 -136
  21. package/dist/scss/_content-library-card.scss +158 -158
  22. package/dist/scss/_content-library-modal.scss +8 -8
  23. package/dist/scss/_content-library-overview.scss +4 -4
  24. package/dist/scss/_content-library-split-button.scss +23 -23
  25. package/dist/scss/_conversation-to-text-modal.scss +36 -36
  26. package/dist/scss/_dropdown.scss +113 -113
  27. package/dist/scss/_extern.scss +1 -1
  28. package/dist/scss/_file-upload-preview.scss +53 -53
  29. package/dist/scss/_file-upload.scss +26 -26
  30. package/dist/scss/_filter-card.scss +64 -64
  31. package/dist/scss/_form-field.scss +12 -12
  32. package/dist/scss/_form-multiple-checkbox.scss +51 -51
  33. package/dist/scss/_forms.scss +3 -2
  34. package/dist/scss/_header.scss +170 -170
  35. package/dist/scss/_icon-luscii-logo.scss +31 -31
  36. package/dist/scss/_icons.scss +38 -38
  37. package/dist/scss/_image-attachment-modal.scss +91 -91
  38. package/dist/scss/_input-group.scss +2 -2
  39. package/dist/scss/_loader.scss +59 -59
  40. package/dist/scss/_markdown-editor.scss +114 -114
  41. package/dist/scss/_message-template-form-modal.scss +47 -47
  42. package/dist/scss/_mixins.scss +78 -78
  43. package/dist/scss/_mobile-menu.scss +91 -91
  44. package/dist/scss/_modal.scss +183 -176
  45. package/dist/scss/_notification-button.scss +29 -29
  46. package/dist/scss/_pagination.scss +56 -56
  47. package/dist/scss/_phone-number-edit-modal.scss +35 -35
  48. package/dist/scss/_pill-container.scss +26 -26
  49. package/dist/scss/_pill.scss +63 -63
  50. package/dist/scss/_profile-image.scss +34 -34
  51. package/dist/scss/_table-sort-header.scss +13 -13
  52. package/dist/scss/_table.scss +16 -16
  53. package/dist/scss/_templates.scss +318 -318
  54. package/dist/scss/_toast.scss +69 -69
  55. package/dist/scss/_user-information.scss +34 -34
  56. package/dist/scss/_user.scss +21 -21
  57. package/dist/scss/_video-call-toast.scss +100 -100
  58. package/dist/scss/_zoomslider.scss +77 -77
  59. package/dist/scss/base/variables.scss +210 -210
  60. package/dist/scss/extern/_bootstrap.scss +14 -14
  61. package/dist/scss/extern/_prime-vue.scss +551 -551
  62. package/dist/scss/forms/_form-check.scss +16 -16
  63. package/dist/scss/forms/_form-input.scss +9 -9
  64. package/dist/scss/forms/_form-select.scss +6 -0
  65. package/dist/scss/main.scss +52 -52
  66. package/dist/scss/templates/_change-password-template.scss +8 -8
  67. package/dist/scss/templates/_content-library-template.scss +135 -135
  68. package/dist/scss/templates/_not-found-template.scss +9 -9
  69. package/dist/scss/templates/_video-call-template.scss +225 -225
  70. package/dist/stores/SessionTimeOutStore.ts +46 -46
  71. package/package.json +133 -133
@@ -1,37 +1,37 @@
1
- #conversation-to-text-modal {
2
- .select-all-checkbox {
3
- margin: 20px 0;
4
- }
5
-
6
- .message-content {
7
- width: 100%;
8
- }
9
-
10
- .message {
11
- background-color: #f5f5f5;
12
- padding: 30px;
13
- border-radius: 8px;
14
-
15
- p:last-of-type {
16
- margin-bottom: 0;
17
- }
18
-
19
- &.is-sender {
20
- margin: 0 20px 10px 80px;
21
- }
22
-
23
- &.is-receiver {
24
- margin: 0 80px 10px 20px;
25
- }
26
- }
27
-
28
- @media (max-width: 849px) {
29
- .is-sender {
30
- margin: 0 10px 10px 30px;
31
- }
32
-
33
- .is-receiver {
34
- margin: 0 40px 10px 10px;
35
- }
36
- }
1
+ #conversation-to-text-modal {
2
+ .select-all-checkbox {
3
+ margin: 20px 0;
4
+ }
5
+
6
+ .message-content {
7
+ width: 100%;
8
+ }
9
+
10
+ .message {
11
+ background-color: #f5f5f5;
12
+ padding: 30px;
13
+ border-radius: 8px;
14
+
15
+ p:last-of-type {
16
+ margin-bottom: 0;
17
+ }
18
+
19
+ &.is-sender {
20
+ margin: 0 20px 10px 80px;
21
+ }
22
+
23
+ &.is-receiver {
24
+ margin: 0 80px 10px 20px;
25
+ }
26
+ }
27
+
28
+ @media (max-width: 849px) {
29
+ .is-sender {
30
+ margin: 0 10px 10px 30px;
31
+ }
32
+
33
+ .is-receiver {
34
+ margin: 0 40px 10px 10px;
35
+ }
36
+ }
37
37
  }
@@ -1,114 +1,114 @@
1
-
2
- .bd-dropdown.dropdown {
3
- display: inline-block;
4
-
5
- &.show {
6
-
7
- &:after {
8
- transform: rotate(180deg);
9
- }
10
- }
11
-
12
- ul.dropdown-menu {
13
- border: 0px;
14
- box-shadow: $dropdown-box-shadow;
15
- margin-top: 0.125rem;
16
-
17
- &.dropdown-menu-action {
18
- border: 1px solid rgba(0,0,0,.15);
19
- border-radius: $border-radius-default;
20
-
21
- .dropdown-item{
22
- width:100%;
23
- padding: 0.25rem 1.5rem;
24
- white-space: nowrap;
25
- line-height: revert;
26
-
27
- &:hover{
28
- background-color: #4d5875;
29
- color: #f5f5f5;
30
- text-decoration: none;
31
- }
32
- }
33
- }
34
-
35
-
36
- .dropdown-item {
37
- font-size: 1rem;
38
- letter-spacing: 0;
39
- line-height: 2.75rem;
40
-
41
- &:not(:last-child) {
42
- border-bottom: 1px solid $color-lightblue;
43
- }
44
-
45
- &:active,
46
- &:focus {
47
- text-decoration: underline;
48
- background-color: transparent;
49
- }
50
-
51
- @include media-breakpoint-up(md) {
52
- &:hover {
53
- text-decoration: underline;
54
- background-color: transparent;
55
- }
56
- }
57
- }
58
-
59
- }
60
-
61
- .dropdown-toggle {
62
- display: flex;
63
- align-items: center;
64
- font-weight: $font-bold;
65
- font-size: 16px;
66
- letter-spacing: 0;
67
- line-height: 24px;
68
-
69
- &:after {
70
- border: 0px;
71
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M8.828 6.207L14.632.404a1 1 0 0 1 1.414 0l.707.707a1 1 0 0 1 0 1.414L9.682 9.596a.999.999 0 0 1-.854.282.999.999 0 0 1-.853-.282L.904 2.526a1 1 0 0 1 0-1.415L1.61.404a1 1 0 0 1 1.414 0l5.803 5.803z' fill='%23AFB8CC'/%3E%3C/svg%3E");
72
- background-repeat: no-repeat;
73
- background-size: contain;
74
- background-position: 50%;
75
- width: 14px;
76
- height: 10px;
77
- transition: 0.2s all ease-in;
78
- }
79
-
80
- &-action {
81
- font-size: calc(13px/16px) * 1rem;
82
- font-weight: $font-medium;
83
- padding: 0 10px;
84
-
85
- &:after{
86
- background-image:url('data:image/svg+xml, <svg class="icon icon-triangle-down" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" ><path d="M11.071 2.414L6.414 7.071a1 1 0 0 1-1.414 0L.343 2.414A1 1 0 0 1 1.05.707h9.314a1 1 0 0 1 .707 1.707z" /></svg>');
87
- border: 0;
88
- box-shadow: none;
89
- width: 9px;
90
- height: 7px;
91
- margin-left: 5px;
92
- }
93
- }
94
- }
95
-
96
- a.dropdown-toggle{
97
- color: $color-darkblue;
98
- }
99
- }
100
-
101
- .bd-dropdown-item {
102
- list-style-type: none;
103
- }
104
-
105
- .placeholder-tokens-menu {
106
- .dropdown-item {
107
- color: $color-darkblue;
108
- border-left: 1px solid $color-lightblue;
109
- border-right: 1px solid $color-lightblue;
110
- &.active {
111
- color:$white;
112
- }
113
- }
1
+
2
+ .bd-dropdown.dropdown {
3
+ display: inline-block;
4
+
5
+ &.show {
6
+
7
+ &:after {
8
+ transform: rotate(180deg);
9
+ }
10
+ }
11
+
12
+ ul.dropdown-menu {
13
+ border: 0px;
14
+ box-shadow: $dropdown-box-shadow;
15
+ margin-top: 0.125rem;
16
+
17
+ &.dropdown-menu-action {
18
+ border: 1px solid rgba(0,0,0,.15);
19
+ border-radius: $border-radius-default;
20
+
21
+ .dropdown-item{
22
+ width:100%;
23
+ padding: 0.25rem 1.5rem;
24
+ white-space: nowrap;
25
+ line-height: revert;
26
+
27
+ &:hover{
28
+ background-color: #4d5875;
29
+ color: #f5f5f5;
30
+ text-decoration: none;
31
+ }
32
+ }
33
+ }
34
+
35
+
36
+ .dropdown-item {
37
+ font-size: 1rem;
38
+ letter-spacing: 0;
39
+ line-height: 2.75rem;
40
+
41
+ &:not(:last-child) {
42
+ border-bottom: 1px solid $color-lightblue;
43
+ }
44
+
45
+ &:active,
46
+ &:focus {
47
+ text-decoration: underline;
48
+ background-color: transparent;
49
+ }
50
+
51
+ @include media-breakpoint-up(md) {
52
+ &:hover {
53
+ text-decoration: underline;
54
+ background-color: transparent;
55
+ }
56
+ }
57
+ }
58
+
59
+ }
60
+
61
+ .dropdown-toggle {
62
+ display: flex;
63
+ align-items: center;
64
+ font-weight: $font-bold;
65
+ font-size: 16px;
66
+ letter-spacing: 0;
67
+ line-height: 24px;
68
+
69
+ &:after {
70
+ border: 0px;
71
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Cpath d='M8.828 6.207L14.632.404a1 1 0 0 1 1.414 0l.707.707a1 1 0 0 1 0 1.414L9.682 9.596a.999.999 0 0 1-.854.282.999.999 0 0 1-.853-.282L.904 2.526a1 1 0 0 1 0-1.415L1.61.404a1 1 0 0 1 1.414 0l5.803 5.803z' fill='%23AFB8CC'/%3E%3C/svg%3E");
72
+ background-repeat: no-repeat;
73
+ background-size: contain;
74
+ background-position: 50%;
75
+ width: 14px;
76
+ height: 10px;
77
+ transition: 0.2s all ease-in;
78
+ }
79
+
80
+ &-action {
81
+ font-size: calc(13px/16px) * 1rem;
82
+ font-weight: $font-medium;
83
+ padding: 0 10px;
84
+
85
+ &:after{
86
+ background-image:url('data:image/svg+xml, <svg class="icon icon-triangle-down" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" ><path d="M11.071 2.414L6.414 7.071a1 1 0 0 1-1.414 0L.343 2.414A1 1 0 0 1 1.05.707h9.314a1 1 0 0 1 .707 1.707z" /></svg>');
87
+ border: 0;
88
+ box-shadow: none;
89
+ width: 9px;
90
+ height: 7px;
91
+ margin-left: 5px;
92
+ }
93
+ }
94
+ }
95
+
96
+ a.dropdown-toggle{
97
+ color: $color-darkblue;
98
+ }
99
+ }
100
+
101
+ .bd-dropdown-item {
102
+ list-style-type: none;
103
+ }
104
+
105
+ .placeholder-tokens-menu {
106
+ .dropdown-item {
107
+ color: $color-darkblue;
108
+ border-left: 1px solid $color-lightblue;
109
+ border-right: 1px solid $color-lightblue;
110
+ &.active {
111
+ color:$white;
112
+ }
113
+ }
114
114
  }
@@ -1,2 +1,2 @@
1
- @import "extern/bootstrap";
1
+ @import "extern/bootstrap";
2
2
  @import "extern/prime-vue";
@@ -1,54 +1,54 @@
1
- .bd-file-upload-preview {
2
- display: inline-block;
3
-
4
- .preview-details {
5
- position: relative;
6
-
7
- .preview-image {
8
- min-width: 150px;
9
- height: 88px;
10
- object-fit: contain;
11
- }
12
-
13
- .mark-container {
14
- display: block;
15
- border-radius: 50%;
16
- width: 21px;
17
- height: 21px;
18
- margin: 0px auto;
19
-
20
- &.success {
21
- background-color: $green;
22
-
23
- svg {
24
- transform: translateY(-2px);
25
- }
26
- }
27
-
28
- &.pending {
29
- background-color: $white;
30
- }
31
- }
32
-
33
- .remove-button {
34
- position: absolute;
35
- top: -10px;
36
- right: -10px;
37
- margin: 0;
38
- width: 21px;
39
- height: 21px;
40
- border-radius: 50%;
41
- padding: 0px;
42
- background-color: $primary;
43
- display: flex;
44
- justify-content: center;
45
- align-items: center;
46
-
47
- .icon {
48
- margin: revert;
49
- transform: revert;
50
- transition: revert;
51
- }
52
- }
53
- }
1
+ .bd-file-upload-preview {
2
+ display: inline-block;
3
+
4
+ .preview-details {
5
+ position: relative;
6
+
7
+ .preview-image {
8
+ min-width: 150px;
9
+ height: 88px;
10
+ object-fit: contain;
11
+ }
12
+
13
+ .mark-container {
14
+ display: block;
15
+ border-radius: 50%;
16
+ width: 21px;
17
+ height: 21px;
18
+ margin: 0px auto;
19
+
20
+ &.success {
21
+ background-color: $green;
22
+
23
+ svg {
24
+ transform: translateY(-2px);
25
+ }
26
+ }
27
+
28
+ &.pending {
29
+ background-color: $white;
30
+ }
31
+ }
32
+
33
+ .remove-button {
34
+ position: absolute;
35
+ top: -10px;
36
+ right: -10px;
37
+ margin: 0;
38
+ width: 21px;
39
+ height: 21px;
40
+ border-radius: 50%;
41
+ padding: 0px;
42
+ background-color: $primary;
43
+ display: flex;
44
+ justify-content: center;
45
+ align-items: center;
46
+
47
+ .icon {
48
+ margin: revert;
49
+ transform: revert;
50
+ transition: revert;
51
+ }
52
+ }
53
+ }
54
54
  }
@@ -1,27 +1,27 @@
1
- .bd-file-upload {
2
- position: relative;
3
- color: $color-darkblue;
4
- font-family: $font-family-base;
5
- width:fit-content;
6
-
7
- .p-fileupload {
8
- border: 0;
9
- border-radius: 0;
10
- background: none;
11
-
12
- .p-fileupload-header {
13
- border: none;
14
- margin-bottom: 20px;
15
- }
16
-
17
- .filename {
18
- color: $color-darkblue;
19
- }
20
- }
21
-
22
- .preview-container {
23
- position: relative;
24
- display: inline-block;
25
- text-align: center;
26
- }
1
+ .bd-file-upload {
2
+ position: relative;
3
+ color: $color-darkblue;
4
+ font-family: $font-family-base;
5
+ width:fit-content;
6
+
7
+ .p-fileupload {
8
+ border: 0;
9
+ border-radius: 0;
10
+ background: none;
11
+
12
+ .p-fileupload-header {
13
+ border: none;
14
+ margin-bottom: 20px;
15
+ }
16
+
17
+ .filename {
18
+ color: $color-darkblue;
19
+ }
20
+ }
21
+
22
+ .preview-container {
23
+ position: relative;
24
+ display: inline-block;
25
+ text-align: center;
26
+ }
27
27
  }
@@ -1,65 +1,65 @@
1
- .bd-filter-card {
2
- .card-body {
3
- padding: 16px;
4
-
5
- .bd-input-group {
6
- font-size: 15px;
7
- margin-bottom: 8px;
8
-
9
- &:last-of-type {
10
- margin-bottom: 0;
11
- }
12
-
13
- label {
14
- word-break: break-word;
15
- }
16
-
17
- label, button {
18
- font-size: 15px;
19
- }
20
-
21
- .form-label {
22
- margin-bottom: 8px;
23
- }
24
-
25
- .bd-form-checkbox {
26
- display: flex;
27
- margin-bottom: 2px;
28
- }
29
-
30
- .collapse-button {
31
- padding: 0;
32
- font-weight: 700;
33
- height: 24px;
34
- line-height: normal;
35
-
36
- &-last {
37
- margin-bottom: 0;
38
- }
39
-
40
- svg {
41
- margin-right: 4px;
42
- margin-bottom: 2px;
43
- }
44
-
45
- > .collapsed-show {
46
- display: none;
47
- }
48
-
49
- > .collapsed-hide {
50
- display: inline-block;
51
- }
52
-
53
- &.collapsed {
54
- > .collapsed-show {
55
- display: inline-block;
56
- }
57
-
58
- > .collapsed-hide {
59
- display: none;
60
- }
61
- }
62
- }
63
- }
64
- }
1
+ .bd-filter-card {
2
+ .card-body {
3
+ padding: 16px;
4
+
5
+ .bd-input-group {
6
+ font-size: 15px;
7
+ margin-bottom: 8px;
8
+
9
+ &:last-of-type {
10
+ margin-bottom: 0;
11
+ }
12
+
13
+ label {
14
+ word-break: break-word;
15
+ }
16
+
17
+ label, button {
18
+ font-size: 15px;
19
+ }
20
+
21
+ .form-label {
22
+ margin-bottom: 8px;
23
+ }
24
+
25
+ .bd-form-checkbox {
26
+ display: flex;
27
+ margin-bottom: 2px;
28
+ }
29
+
30
+ .collapse-button {
31
+ padding: 0;
32
+ font-weight: 700;
33
+ height: 24px;
34
+ line-height: normal;
35
+
36
+ &-last {
37
+ margin-bottom: 0;
38
+ }
39
+
40
+ svg {
41
+ margin-right: 4px;
42
+ margin-bottom: 2px;
43
+ }
44
+
45
+ > .collapsed-show {
46
+ display: none;
47
+ }
48
+
49
+ > .collapsed-hide {
50
+ display: inline-block;
51
+ }
52
+
53
+ &.collapsed {
54
+ > .collapsed-show {
55
+ display: inline-block;
56
+ }
57
+
58
+ > .collapsed-hide {
59
+ display: none;
60
+ }
61
+ }
62
+ }
63
+ }
64
+ }
65
65
  }
@@ -1,13 +1,13 @@
1
- .bd-form-field {
2
- margin-bottom: 27px;
3
-
4
- .form-input-with-button{
5
- display: flex;
6
- gap: 0.5rem;
7
- justify-content: space-between;
8
-
9
- .btn{
10
- height:auto;
11
- }
12
- }
1
+ .bd-form-field {
2
+ margin-bottom: 27px;
3
+
4
+ .form-input-with-button{
5
+ display: flex;
6
+ gap: 0.5rem;
7
+ justify-content: space-between;
8
+
9
+ .btn{
10
+ height:auto;
11
+ }
12
+ }
13
13
  }