@beterdichtbij/component-library 0.72.2 → 0.72.4-beta.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 (69) hide show
  1. package/README.md +12 -12
  2. package/dist/bd-component-lib.cjs.js +55 -55
  3. package/dist/bd-component-lib.css +1 -1
  4. package/dist/bd-component-lib.es.js +11 -11
  5. package/dist/bd-component-lib.umd.js +56 -56
  6. package/dist/locales/en.json +79 -79
  7. package/dist/locales/nl.json +180 -180
  8. package/dist/scss/_active-filters.scss +65 -65
  9. package/dist/scss/_alert.scss +9 -5
  10. package/dist/scss/_article.scss +31 -20
  11. package/dist/scss/_assign-conversation-modal.scss +13 -13
  12. package/dist/scss/_attachments.scss +107 -107
  13. package/dist/scss/_badge.scss +18 -18
  14. package/dist/scss/_button.scss +80 -80
  15. package/dist/scss/_card.scss +61 -56
  16. package/dist/scss/_chatcloud.scss +101 -98
  17. package/dist/scss/_collapsable-card.scss +103 -107
  18. package/dist/scss/_content-library-card-message-template.scss +136 -136
  19. package/dist/scss/_content-library-card.scss +158 -158
  20. package/dist/scss/_content-library-modal.scss +8 -8
  21. package/dist/scss/_content-library-overview.scss +4 -4
  22. package/dist/scss/_content-library-split-button.scss +23 -23
  23. package/dist/scss/_conversation-to-text-modal.scss +36 -36
  24. package/dist/scss/_dropdown.scss +113 -113
  25. package/dist/scss/_extern.scss +1 -1
  26. package/dist/scss/_file-upload-preview.scss +53 -53
  27. package/dist/scss/_file-upload.scss +26 -26
  28. package/dist/scss/_filter-card.scss +64 -64
  29. package/dist/scss/_form-field.scss +12 -12
  30. package/dist/scss/_form-multiple-checkbox.scss +51 -51
  31. package/dist/scss/_forms.scss +3 -3
  32. package/dist/scss/_header.scss +170 -170
  33. package/dist/scss/_icon-luscii-logo.scss +31 -31
  34. package/dist/scss/_icons.scss +38 -38
  35. package/dist/scss/_image-attachment-modal.scss +91 -91
  36. package/dist/scss/_input-group.scss +2 -2
  37. package/dist/scss/_loader.scss +59 -59
  38. package/dist/scss/_markdown-editor.scss +114 -114
  39. package/dist/scss/_message-template-form-modal.scss +47 -47
  40. package/dist/scss/_mixins.scss +78 -78
  41. package/dist/scss/_mobile-menu.scss +91 -91
  42. package/dist/scss/_modal.scss +182 -183
  43. package/dist/scss/_notification-button.scss +29 -29
  44. package/dist/scss/_pagination.scss +56 -56
  45. package/dist/scss/_phone-number-edit-modal.scss +35 -35
  46. package/dist/scss/_pill-container.scss +26 -26
  47. package/dist/scss/_pill.scss +63 -63
  48. package/dist/scss/_profile-image.scss +34 -34
  49. package/dist/scss/_table-sort-header.scss +13 -13
  50. package/dist/scss/_table.scss +16 -16
  51. package/dist/scss/_templates.scss +294 -318
  52. package/dist/scss/_toast.scss +69 -69
  53. package/dist/scss/_user-information.scss +34 -34
  54. package/dist/scss/_user.scss +21 -21
  55. package/dist/scss/_video-call-toast.scss +100 -100
  56. package/dist/scss/_zoomslider.scss +77 -77
  57. package/dist/scss/base/variables.scss +210 -210
  58. package/dist/scss/extern/_bootstrap.scss +14 -14
  59. package/dist/scss/extern/_prime-vue.scss +551 -551
  60. package/dist/scss/forms/_form-check.scss +16 -16
  61. package/dist/scss/forms/_form-input.scss +9 -9
  62. package/dist/scss/forms/_form-select.scss +4 -5
  63. package/dist/scss/main.scss +52 -52
  64. package/dist/scss/templates/_change-password-template.scss +8 -8
  65. package/dist/scss/templates/_content-library-template.scss +135 -135
  66. package/dist/scss/templates/_not-found-template.scss +36 -9
  67. package/dist/scss/templates/_video-call-template.scss +225 -225
  68. package/dist/stores/SessionTimeOutStore.ts +46 -46
  69. package/package.json +133 -133
package/dist/scss/_card.scss CHANGED
@@ -1,57 +1,62 @@
1
- .card {
2
- border: none;
3
- border-radius: $border-radius-default;
4
-
5
- .card-header {
6
- background-color: $primary;
7
- display: flex;
8
- align-items: center;
9
- justify-content: space-between;
10
- position: relative;
11
-
12
- &.danger {
13
- background-color: $red-header;
14
- }
15
-
16
- &.colleague {
17
- background-color: $color-colleague;
18
- }
19
-
20
- h2 {
21
- color: $white;
22
- font-weight: 600;
23
- margin-bottom: 0;
24
- font-size: 1.25rem;
25
- line-height: 23px;
26
- }
27
- }
28
-
29
- .card-body {
30
- padding: 20px;
31
-
32
- .alert {
33
- ul {
34
- padding-top: 10px;
35
- }
36
- }
37
-
38
- .btn-container {
39
- margin-top: 10px;
40
- }
41
- }
42
-
43
- &.no-body .card-header {
44
- background-color: $white;
45
- color: $font-color-primary;
46
- border: none;
47
- border-radius: $border-radius-default;
48
-
49
- &.danger {
50
- background-color: #dc3545;
51
- }
52
-
53
- &.colleague {
54
- background-color: $color-colleague;
55
- }
56
- }
1
+ .card {
2
+ border: none;
3
+ border-radius: $border-radius-default;
4
+
5
+ .card-header {
6
+ background-color: $primary;
7
+ display: flex;
8
+ flex-wrap: wrap;
9
+ gap: 8px;
10
+ align-items: center;
11
+ justify-content: space-between;
12
+ position: relative;
13
+ min-height: 60px;
14
+ height: auto;
15
+
16
+ &.danger {
17
+ background-color: $red-header;
18
+ }
19
+
20
+ &.colleague {
21
+ background-color: $color-colleague;
22
+ }
23
+
24
+ h2 {
25
+ color: $white;
26
+ font-weight: 600;
27
+ margin-bottom: 0;
28
+ font-size: 1.25rem;
29
+ line-height: 23px;
30
+ overflow-wrap: anywhere;
31
+ }
32
+ }
33
+
34
+ .card-body {
35
+ padding: 20px;
36
+
37
+ .alert {
38
+ ul {
39
+ padding-top: 10px;
40
+ }
41
+ }
42
+
43
+ .btn-container {
44
+ margin-top: 10px;
45
+ }
46
+ }
47
+
48
+ &.no-body .card-header {
49
+ background-color: $white;
50
+ color: $font-color-primary;
51
+ border: none;
52
+ border-radius: $border-radius-default;
53
+
54
+ &.danger {
55
+ background-color: #dc3545;
56
+ }
57
+
58
+ &.colleague {
59
+ background-color: $color-colleague;
60
+ }
61
+ }
57
62
  }
package/dist/scss/_chatcloud.scss CHANGED
@@ -1,99 +1,102 @@
1
- .bd-chat-cloud {
2
- display: flex;
3
- gap: 12px;
4
- margin-bottom: 16px;
5
- padding-right: 80px;
6
-
7
- &-card {
8
- flex: 1;
9
- background-color: $color-bg;
10
- padding: 20px;
11
- border-radius: 8px;
12
- position: relative;
13
-
14
- &__header {
15
- display: flex;
16
- justify-content: space-between;
17
- margin-bottom: 12px;
18
-
19
- @include media-breakpoint-down(md) {
20
- flex-direction: column;
21
- button {
22
- width: 80px;
23
- margin-top: 12px;
24
- }
25
- }
26
- }
27
-
28
- &__body {
29
- word-break: break-word;
30
- .card-body &{
31
- ul {
32
- padding:revert;
33
- padding-left:2rem;
34
- list-style-type: revert;
35
- margin:revert;
36
- }
37
- }
38
- }
39
-
40
- &__message {
41
- > *:last-child {
42
- margin-bottom: 0;
43
- }
44
-
45
- p {
46
- min-height: 1rem;
47
- }
48
-
49
- li p:last-of-type{
50
- margin-bottom: 0px;
51
- }
52
- }
53
-
54
- &__footer {
55
- ul {
56
- margin-bottom: 0;
57
-
58
- li {
59
- margin-bottom: 0;
60
- }
61
-
62
- .card-body & {
63
- margin-top: 1.25rem;
64
- }
65
- }
66
- }
67
-
68
- .sender & {
69
- background-color: $color-chatcloud;
70
- }
71
-
72
- @include media-breakpoint-down(md) {
73
- padding: 8px;
74
- }
75
- }
76
-
77
-
78
- &.sender {
79
- flex-direction: row-reverse;
80
- padding-right: revert;
81
- padding-left: 80px;
82
- }
83
-
84
- @include media-breakpoint-down(md) {
85
- padding-left: 6px;
86
- padding-right: 30px;
87
-
88
- &.sender {
89
- padding-left: 30px;
90
- padding-right: 6px;
91
- }
92
- }
93
-
94
- .bd-profile-picture {
95
- @include media-breakpoint-down(md) {
96
- display: none;
97
- }
98
- }
1
+ .bd-chat-cloud {
2
+ display: flex;
3
+ gap: 12px;
4
+ margin-bottom: 16px;
5
+ padding-right: 80px;
6
+
7
+ &-card {
8
+ flex: 1;
9
+ background-color: $color-bg;
10
+ padding: 20px;
11
+ border-radius: 8px;
12
+ position: relative;
13
+
14
+ &__header {
15
+ display: flex;
16
+ flex-wrap: wrap;
17
+ justify-content: space-between;
18
+ margin-bottom: 12px;
19
+
20
+ @include media-breakpoint-down(md) {
21
+ flex-direction: column;
22
+ button {
23
+ width: 80px;
24
+ margin-top: 12px;
25
+ }
26
+ }
27
+
28
+ .chat-cloud__author {
29
+ overflow-wrap: anywhere;
30
+ }
31
+ }
32
+
33
+ &__body {
34
+ word-break: break-word;
35
+
36
+ .card-body &{
37
+ ul {
38
+ padding: revert;
39
+ padding-left: 2rem;
40
+ list-style-type: revert;
41
+ margin: revert;
42
+ }
43
+ }
44
+ }
45
+
46
+ &__message {
47
+ > *:last-child {
48
+ margin-bottom: 0;
49
+ }
50
+
51
+ p {
52
+ min-height: 1rem;
53
+ }
54
+
55
+ li p:last-of-type{
56
+ margin-bottom: 0px;
57
+ }
58
+ }
59
+
60
+ &__footer {
61
+ ul {
62
+ margin-bottom: 0;
63
+
64
+ li {
65
+ margin-bottom: 0;
66
+ }
67
+
68
+ .card-body & {
69
+ margin-top: 1.25rem;
70
+ }
71
+ }
72
+ }
73
+
74
+ .sender & {
75
+ background-color: $color-chatcloud;
76
+ }
77
+
78
+ @include media-breakpoint-down(md) {
79
+ padding: 8px;
80
+ }
81
+ }
82
+
83
+ &.sender {
84
+ flex-direction: row-reverse;
85
+ padding-right: revert;
86
+ padding-left: 80px;
87
+ }
88
+
89
+ @include media-breakpoint-down(sm) {
90
+ padding-left: 0;
91
+ padding-right: 20px;
92
+
93
+ &.sender {
94
+ padding-left: 20px;
95
+ padding-right: 0;
96
+ }
97
+
98
+ .bd-profile-picture {
99
+ display: none;
100
+ }
101
+ }
99
102
  }
package/dist/scss/_collapsable-card.scss CHANGED
@@ -1,108 +1,104 @@
1
- .bd-collapsable-card {
2
- margin-bottom: 1rem;
3
-
4
- &__actions {
5
- display: flex;
6
- gap: 8px;
7
- }
8
-
9
- .card-header {
10
- border-radius: $border-radius-default $border-radius-default 0 0;
11
- align-items: center;
12
- border-bottom: none;
13
- padding: 0 16px;
14
- height: 60px;
15
-
16
- h2 {
17
- color: #fff;
18
- font-weight: 600;
19
- margin-bottom: 0;
20
- font-size: 1.25rem;
21
- line-height: 23px;
22
- }
23
-
24
- .patient-detail-template & {
25
- &.is-disabled {
26
- border-radius: $border-radius-default;
27
- padding: 10px 20px;
28
- }
29
- }
30
-
31
- >.btn-caret.collapsed {
32
- border-radius: $border-radius-default;
33
- }
34
-
35
- &.no-title {
36
- justify-content: flex-end;
37
- }
38
-
39
- .btn-caret.btn {
40
- width: fit-content;
41
- padding: 0px 6px 0px 6px;
42
- background: transparent;
43
-
44
- svg {
45
- margin: revert;
46
- fill: $color-white;
47
- }
48
-
49
- &:focus,
50
- &:hover {
51
- border: none;
52
- box-shadow: revert;
53
- background: transparent;
54
-
55
- svg {
56
- fill: $color-white;
57
- }
58
- }
59
-
60
- &[aria-expanded="true"] {
61
- svg {
62
- transform: rotate(-180deg);
63
- }
64
- }
65
- }
66
-
67
- &.round-corners {
68
- border-radius: $border-radius-default !important;
69
- }
70
-
71
- @include media-breakpoint-down(md) {
72
- min-height: revert;
73
- height: 60px;
74
-
75
- &.round-corners-md {
76
- border-radius: $border-radius-default !important;
77
- }
78
- }
79
-
80
- @include media-breakpoint-down(sm) {
81
- &.round-corners-sm {
82
- border-radius: $border-radius-default !important;
83
- }
84
- }
85
- }
86
-
87
- .card-body {
88
- font-size: 1rem;
89
-
90
- &.display-none {
91
- display: none;
92
- }
93
-
94
- &.collapse {
95
- @include media-breakpoint-up(lg) {
96
- &.open-collapse-lg {
97
- display: block !important
98
- }
99
- }
100
-
101
- @include media-breakpoint-up(md) {
102
- &.open-collapse-md {
103
- display: block !important
104
- }
105
- }
106
- }
107
- }
1
+ .bd-collapsable-card {
2
+ margin-bottom: 1rem;
3
+
4
+ &__actions {
5
+ display: flex;
6
+ gap: 8px;
7
+ }
8
+
9
+ .card-header {
10
+ border-radius: $border-radius-default $border-radius-default 0 0;
11
+ align-items: center;
12
+ border-bottom: none;
13
+ padding: 0 16px;
14
+
15
+ h2 {
16
+ color: #fff;
17
+ font-weight: 600;
18
+ margin-bottom: 0;
19
+ font-size: 1.25rem;
20
+ line-height: 23px;
21
+ }
22
+
23
+ .patient-detail-template & {
24
+ &.is-disabled {
25
+ border-radius: $border-radius-default;
26
+ padding: 10px 20px;
27
+ }
28
+ }
29
+
30
+ >.btn-caret.collapsed {
31
+ border-radius: $border-radius-default;
32
+ }
33
+
34
+ &.no-title {
35
+ justify-content: flex-end;
36
+ }
37
+
38
+ .btn-caret.btn {
39
+ width: fit-content;
40
+ padding: 0px 6px 0px 6px;
41
+ background: transparent;
42
+
43
+ svg {
44
+ margin: revert;
45
+ fill: $color-white;
46
+ }
47
+
48
+ &:focus,
49
+ &:hover {
50
+ border: none;
51
+ box-shadow: revert;
52
+ background: transparent;
53
+
54
+ svg {
55
+ fill: $color-white;
56
+ }
57
+ }
58
+
59
+ &[aria-expanded="true"] {
60
+ svg {
61
+ transform: rotate(-180deg);
62
+ }
63
+ }
64
+ }
65
+
66
+ &.round-corners {
67
+ border-radius: $border-radius-default !important;
68
+ }
69
+
70
+ @include media-breakpoint-down(md) {
71
+ &.round-corners-md {
72
+ border-radius: $border-radius-default !important;
73
+ }
74
+ }
75
+
76
+ @include media-breakpoint-down(sm) {
77
+ &.round-corners-sm {
78
+ border-radius: $border-radius-default !important;
79
+ }
80
+ }
81
+ }
82
+
83
+ .card-body {
84
+ font-size: 1rem;
85
+
86
+ &.display-none {
87
+ display: none;
88
+ }
89
+
90
+ &.collapse {
91
+ @include media-breakpoint-up(lg) {
92
+ &.open-collapse-lg {
93
+ display: block !important
94
+ }
95
+ }
96
+
97
+ @include media-breakpoint-up(md) {
98
+ &.open-collapse-md {
99
+ display: block !important
100
+ }
101
+ }
102
+ }
103
+ }
108
104
  }