@beterdichtbij/component-library 0.72.4-beta.1 → 0.72.4

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 +11 -11
  10. package/dist/scss/_article.scss +31 -31
  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 +62 -62
  16. package/dist/scss/_chatcloud.scss +99 -99
  17. package/dist/scss/_collapsable-card.scss +103 -103
  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 -182
  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 +264 -264
  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 -4
  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 +35 -35
  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
@@ -1,63 +1,63 @@
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
- hyphens: auto;
32
- }
33
- }
34
-
35
- .card-body {
36
- padding: 20px;
37
-
38
- .alert {
39
- ul {
40
- padding-top: 10px;
41
- }
42
- }
43
-
44
- .btn-container {
45
- margin-top: 10px;
46
- }
47
- }
48
-
49
- &.no-body .card-header {
50
- background-color: $white;
51
- color: $font-color-primary;
52
- border: none;
53
- border-radius: $border-radius-default;
54
-
55
- &.danger {
56
- background-color: #dc3545;
57
- }
58
-
59
- &.colleague {
60
- background-color: $color-colleague;
61
- }
62
- }
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
+ hyphens: auto;
32
+ }
33
+ }
34
+
35
+ .card-body {
36
+ padding: 20px;
37
+
38
+ .alert {
39
+ ul {
40
+ padding-top: 10px;
41
+ }
42
+ }
43
+
44
+ .btn-container {
45
+ margin-top: 10px;
46
+ }
47
+ }
48
+
49
+ &.no-body .card-header {
50
+ background-color: $white;
51
+ color: $font-color-primary;
52
+ border: none;
53
+ border-radius: $border-radius-default;
54
+
55
+ &.danger {
56
+ background-color: #dc3545;
57
+ }
58
+
59
+ &.colleague {
60
+ background-color: $color-colleague;
61
+ }
62
+ }
63
63
  }
@@ -1,100 +1,100 @@
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
- gap: 8px;
20
-
21
- @include media-breakpoint-down(md) {
22
- flex-direction: column;
23
- }
24
-
25
- .chat-cloud__author {
26
- overflow-wrap: anywhere;
27
- hyphens: auto;
28
- }
29
- }
30
-
31
- &__body {
32
- word-break: break-word;
33
-
34
- .card-body &{
35
- ul {
36
- padding: revert;
37
- padding-left: 2rem;
38
- list-style-type: revert;
39
- margin: revert;
40
- }
41
- }
42
- }
43
-
44
- &__message {
45
- > *:last-child {
46
- margin-bottom: 0;
47
- }
48
-
49
- p {
50
- min-height: 1rem;
51
- }
52
-
53
- li p:last-of-type{
54
- margin-bottom: 0px;
55
- }
56
- }
57
-
58
- &__footer {
59
- ul {
60
- margin-bottom: 0;
61
-
62
- li {
63
- margin-bottom: 0;
64
- }
65
-
66
- .card-body & {
67
- margin-top: 1.25rem;
68
- }
69
- }
70
- }
71
-
72
- .sender & {
73
- background-color: $color-chatcloud;
74
- }
75
-
76
- @include media-breakpoint-down(md) {
77
- padding: 8px;
78
- }
79
- }
80
-
81
- &.sender {
82
- flex-direction: row-reverse;
83
- padding-right: revert;
84
- padding-left: 80px;
85
- }
86
-
87
- @include media-breakpoint-down(sm) {
88
- padding-left: 0;
89
- padding-right: 20px;
90
-
91
- &.sender {
92
- padding-left: 20px;
93
- padding-right: 0;
94
- }
95
-
96
- .bd-profile-picture {
97
- display: none;
98
- }
99
- }
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
+ gap: 8px;
20
+
21
+ @include media-breakpoint-down(md) {
22
+ flex-direction: column;
23
+ }
24
+
25
+ .chat-cloud__author {
26
+ overflow-wrap: anywhere;
27
+ hyphens: auto;
28
+ }
29
+ }
30
+
31
+ &__body {
32
+ word-break: break-word;
33
+
34
+ .card-body &{
35
+ ul {
36
+ padding: revert;
37
+ padding-left: 2rem;
38
+ list-style-type: revert;
39
+ margin: revert;
40
+ }
41
+ }
42
+ }
43
+
44
+ &__message {
45
+ > *:last-child {
46
+ margin-bottom: 0;
47
+ }
48
+
49
+ p {
50
+ min-height: 1rem;
51
+ }
52
+
53
+ li p:last-of-type{
54
+ margin-bottom: 0px;
55
+ }
56
+ }
57
+
58
+ &__footer {
59
+ ul {
60
+ margin-bottom: 0;
61
+
62
+ li {
63
+ margin-bottom: 0;
64
+ }
65
+
66
+ .card-body & {
67
+ margin-top: 1.25rem;
68
+ }
69
+ }
70
+ }
71
+
72
+ .sender & {
73
+ background-color: $color-chatcloud;
74
+ }
75
+
76
+ @include media-breakpoint-down(md) {
77
+ padding: 8px;
78
+ }
79
+ }
80
+
81
+ &.sender {
82
+ flex-direction: row-reverse;
83
+ padding-right: revert;
84
+ padding-left: 80px;
85
+ }
86
+
87
+ @include media-breakpoint-down(sm) {
88
+ padding-left: 0;
89
+ padding-right: 20px;
90
+
91
+ &.sender {
92
+ padding-left: 20px;
93
+ padding-right: 0;
94
+ }
95
+
96
+ .bd-profile-picture {
97
+ display: none;
98
+ }
99
+ }
100
100
  }
@@ -1,104 +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
-
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
- }
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
+ }
104
104
  }