@beterdichtbij/component-library 0.72.2-beta.0 → 0.72.3

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 +5 -5
  10. package/dist/scss/_article.scss +20 -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 +56 -56
  16. package/dist/scss/_chatcloud.scss +98 -98
  17. package/dist/scss/_collapsable-card.scss +107 -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 +318 -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 +9 -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
@@ -1,52 +1,52 @@
1
- .bd-form-multiple-checkbox {
2
- width: auto;
3
- background: #ffffff;
4
- border-radius: 5px;
5
- padding: 12px 12px;
6
- border: 1px solid #abb0be;
7
-
8
- label {
9
- font-weight: 400;
10
- line-height: normal;
11
- }
12
-
13
- /* width */
14
- &::-webkit-scrollbar {
15
- width: 10px;
16
- }
17
-
18
- /* Handle */
19
- &::-webkit-scrollbar-thumb {
20
- background: $color-border;
21
- border-radius: 10px;
22
- border: solid 3px white;
23
- }
24
-
25
- /* Handle on hover */
26
- &::-webkit-scrollbar-thumb:hover {
27
- background: $color-border;
28
- border: solid 3px white;
29
- }
30
-
31
- &.is-invalid {
32
- border: 1px solid $color-red;
33
- }
34
-
35
- &.overflow-form-control {
36
- max-height: 200px;
37
- overflow: scroll;
38
- overflow-x: hidden;
39
- }
40
-
41
- .custom-checkbox {
42
- margin-bottom: 0px;
43
- }
44
-
45
- .custom-control-label {
46
- line-height: 30px;
47
- }
48
-
49
- button {
50
- margin-bottom: 10px;
51
- }
1
+ .bd-form-multiple-checkbox {
2
+ width: auto;
3
+ background: #ffffff;
4
+ border-radius: 5px;
5
+ padding: 12px 12px;
6
+ border: 1px solid #abb0be;
7
+
8
+ label {
9
+ font-weight: 400;
10
+ line-height: normal;
11
+ }
12
+
13
+ /* width */
14
+ &::-webkit-scrollbar {
15
+ width: 10px;
16
+ }
17
+
18
+ /* Handle */
19
+ &::-webkit-scrollbar-thumb {
20
+ background: $color-border;
21
+ border-radius: 10px;
22
+ border: solid 3px white;
23
+ }
24
+
25
+ /* Handle on hover */
26
+ &::-webkit-scrollbar-thumb:hover {
27
+ background: $color-border;
28
+ border: solid 3px white;
29
+ }
30
+
31
+ &.is-invalid {
32
+ border: 1px solid $color-red;
33
+ }
34
+
35
+ &.overflow-form-control {
36
+ max-height: 200px;
37
+ overflow: scroll;
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ .custom-checkbox {
42
+ margin-bottom: 0px;
43
+ }
44
+
45
+ .custom-control-label {
46
+ line-height: 30px;
47
+ }
48
+
49
+ button {
50
+ margin-bottom: 10px;
51
+ }
52
52
  }
@@ -1,3 +1,3 @@
1
- @import "forms/form-check";
2
- @import "forms/form-input";
3
- @import "forms/form-select";
1
+ @import "forms/form-check";
2
+ @import "forms/form-input";
3
+ @import "forms/form-select";
@@ -1,171 +1,171 @@
1
- .bd-header {
2
- height: 64px;
3
- display: flex;
4
- justify-content: space-between;
5
- align-items: center;
6
- padding: 0px 15px;
7
- background-color: white;
8
- position: fixed;
9
- top: 0;
10
- left: 0;
11
- right: 0;
12
- z-index: 1000;
13
-
14
- .col {
15
- white-space: nowrap;
16
- }
17
-
18
- .bd-hamburger {
19
- display: none;
20
- font-size: .9375rem;
21
- font-family: $font-secondary;
22
- align-items: center;
23
- width: 58px;
24
- justify-content: right;
25
- font-weight: $font-bold;
26
- cursor: pointer;
27
- user-select: none;
28
- gap: 4px;
29
-
30
- .icon-menu {
31
- width: 14px;
32
- font-weight: 900;
33
- }
34
- }
35
-
36
- .logo-mix {
37
- .logo {
38
- cursor: pointer;
39
- height: 30px;
40
- }
41
-
42
- .organization-logo {
43
- margin-left: 24px;
44
-
45
- &:not([src]),
46
- &[src=""] {
47
- display: none;
48
- }
49
- }
50
- }
51
-
52
- .header-options {
53
- text-align: center;
54
- }
55
-
56
- // css verwijderen als variant button is opgenomen BDButton
57
- .btn-header {
58
- color: #394156;
59
- background-color: transparent;
60
- font-weight: 400;
61
- border-radius: 24px;
62
- padding-left: 16px;
63
- padding-right: 16px;
64
- text-decoration: none;
65
- margin: 0px 4px;
66
-
67
- &.router-link-active,
68
- &:hover {
69
- background-color: #f1f2f4;
70
- }
71
- }
72
-
73
- .profile-side {
74
- display: flex;
75
- flex-direction: row;
76
- }
77
-
78
- .bd-btn-settings {
79
- height: 56px;
80
- user-select: none;
81
- display: flex;
82
- justify-content: right;
83
- align-items: center;
84
- gap: 5px;
85
-
86
- .icon {
87
- fill: #394156;
88
- width: 40px;
89
- height: 40px;
90
- }
91
-
92
- .bd-profile-picture {
93
- .rounded-circle {
94
- width: 40px;
95
- height: 40px;
96
- }
97
- }
98
-
99
- .bd-dropdown.dropdown {
100
- height: 100%;
101
-
102
- .dropdown-toggle {
103
- height: 100%;
104
- margin-right: 0px;
105
- text-decoration: none;
106
- font-weight: $font-medium;
107
- font-family: $headings-font-family;
108
-
109
- span {
110
- white-space: nowrap;
111
- overflow-x: hidden;
112
- text-overflow: ellipsis;
113
- max-width: 250px;
114
- letter-spacing: 0;
115
- }
116
-
117
- &:hover {
118
- text-decoration: underline;
119
- }
120
- }
121
-
122
- .dropdown-menu {
123
- margin-top: 0px;
124
-
125
- .dropdown-item {
126
- cursor: pointer;
127
-
128
- &:active {
129
- color: var(--bs-dropdown-link-color);
130
- }
131
- }
132
- }
133
- }
134
- }
135
-
136
- @media (max-width: map-get($grid-breakpoints, md)) {
137
- .header-options {
138
- display: none;
139
- }
140
-
141
- .bd-hamburger {
142
- display: flex;
143
- }
144
-
145
- .bd-btn-settings, .btn-header {
146
- display: none !important;
147
- }
148
- }
149
-
150
- @media (max-width: 890px) {
151
- .logo-mix .logo {
152
- height: 20px;
153
-
154
- &.organization-logo {
155
- margin-left: 16px;
156
- }
157
- }
158
- }
159
-
160
- @media (max-width: 1050px) {
161
- .dropdown-toggle {
162
- max-width: 140px;
163
- }
164
- }
165
-
166
- @media (max-width: 400px) {
167
- .logo-mix .logo.organization-logo {
168
- display: none;
169
- }
170
- }
1
+ .bd-header {
2
+ height: 64px;
3
+ display: flex;
4
+ justify-content: space-between;
5
+ align-items: center;
6
+ padding: 0px 15px;
7
+ background-color: white;
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ right: 0;
12
+ z-index: 1000;
13
+
14
+ .col {
15
+ white-space: nowrap;
16
+ }
17
+
18
+ .bd-hamburger {
19
+ display: none;
20
+ font-size: .9375rem;
21
+ font-family: $font-secondary;
22
+ align-items: center;
23
+ width: 58px;
24
+ justify-content: right;
25
+ font-weight: $font-bold;
26
+ cursor: pointer;
27
+ user-select: none;
28
+ gap: 4px;
29
+
30
+ .icon-menu {
31
+ width: 14px;
32
+ font-weight: 900;
33
+ }
34
+ }
35
+
36
+ .logo-mix {
37
+ .logo {
38
+ cursor: pointer;
39
+ height: 30px;
40
+ }
41
+
42
+ .organization-logo {
43
+ margin-left: 24px;
44
+
45
+ &:not([src]),
46
+ &[src=""] {
47
+ display: none;
48
+ }
49
+ }
50
+ }
51
+
52
+ .header-options {
53
+ text-align: center;
54
+ }
55
+
56
+ // css verwijderen als variant button is opgenomen BDButton
57
+ .btn-header {
58
+ color: #394156;
59
+ background-color: transparent;
60
+ font-weight: 400;
61
+ border-radius: 24px;
62
+ padding-left: 16px;
63
+ padding-right: 16px;
64
+ text-decoration: none;
65
+ margin: 0px 4px;
66
+
67
+ &.router-link-active,
68
+ &:hover {
69
+ background-color: #f1f2f4;
70
+ }
71
+ }
72
+
73
+ .profile-side {
74
+ display: flex;
75
+ flex-direction: row;
76
+ }
77
+
78
+ .bd-btn-settings {
79
+ height: 56px;
80
+ user-select: none;
81
+ display: flex;
82
+ justify-content: right;
83
+ align-items: center;
84
+ gap: 5px;
85
+
86
+ .icon {
87
+ fill: #394156;
88
+ width: 40px;
89
+ height: 40px;
90
+ }
91
+
92
+ .bd-profile-picture {
93
+ .rounded-circle {
94
+ width: 40px;
95
+ height: 40px;
96
+ }
97
+ }
98
+
99
+ .bd-dropdown.dropdown {
100
+ height: 100%;
101
+
102
+ .dropdown-toggle {
103
+ height: 100%;
104
+ margin-right: 0px;
105
+ text-decoration: none;
106
+ font-weight: $font-medium;
107
+ font-family: $headings-font-family;
108
+
109
+ span {
110
+ white-space: nowrap;
111
+ overflow-x: hidden;
112
+ text-overflow: ellipsis;
113
+ max-width: 250px;
114
+ letter-spacing: 0;
115
+ }
116
+
117
+ &:hover {
118
+ text-decoration: underline;
119
+ }
120
+ }
121
+
122
+ .dropdown-menu {
123
+ margin-top: 0px;
124
+
125
+ .dropdown-item {
126
+ cursor: pointer;
127
+
128
+ &:active {
129
+ color: var(--bs-dropdown-link-color);
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
135
+
136
+ @media (max-width: map-get($grid-breakpoints, md)) {
137
+ .header-options {
138
+ display: none;
139
+ }
140
+
141
+ .bd-hamburger {
142
+ display: flex;
143
+ }
144
+
145
+ .bd-btn-settings, .btn-header {
146
+ display: none !important;
147
+ }
148
+ }
149
+
150
+ @media (max-width: 890px) {
151
+ .logo-mix .logo {
152
+ height: 20px;
153
+
154
+ &.organization-logo {
155
+ margin-left: 16px;
156
+ }
157
+ }
158
+ }
159
+
160
+ @media (max-width: 1050px) {
161
+ .dropdown-toggle {
162
+ max-width: 140px;
163
+ }
164
+ }
165
+
166
+ @media (max-width: 400px) {
167
+ .logo-mix .logo.organization-logo {
168
+ display: none;
169
+ }
170
+ }
171
171
  }
@@ -1,32 +1,32 @@
1
- .icon-luscii-logo {
2
- .st0 {
3
- fill: #ffffff;
4
- }
5
- .st1 {
6
- fill: #78c9dc;
7
- }
8
- .st2 {
9
- fill: url(#SVGID_1_);
10
- }
11
- .st3 {
12
- fill: #6870a5;
13
- }
14
- .st4 {
15
- fill: #2b6077;
16
- }
17
- .st5 {
18
- fill: #e7348a;
19
- }
20
- .st6 {
21
- fill: #602160;
22
- }
23
- .st7 {
24
- fill: #189cd9;
25
- }
26
- .st8 {
27
- fill: #00a1b3;
28
- }
29
- .st9 {
30
- fill: #193866;
31
- }
1
+ .icon-luscii-logo {
2
+ .st0 {
3
+ fill: #ffffff;
4
+ }
5
+ .st1 {
6
+ fill: #78c9dc;
7
+ }
8
+ .st2 {
9
+ fill: url(#SVGID_1_);
10
+ }
11
+ .st3 {
12
+ fill: #6870a5;
13
+ }
14
+ .st4 {
15
+ fill: #2b6077;
16
+ }
17
+ .st5 {
18
+ fill: #e7348a;
19
+ }
20
+ .st6 {
21
+ fill: #602160;
22
+ }
23
+ .st7 {
24
+ fill: #189cd9;
25
+ }
26
+ .st8 {
27
+ fill: #00a1b3;
28
+ }
29
+ .st9 {
30
+ fill: #193866;
31
+ }
32
32
  }
@@ -1,39 +1,39 @@
1
- .icon{
2
- display: inline-block;
3
- height: 18px;
4
- width: 17px;
5
- position: relative;
6
-
7
- &.icon-check{
8
- .bd-file-upload &{
9
- height: 16px;
10
- width: 11px;
11
- fill: $color-white;
12
- }
13
- }
14
- &.icon-remove {
15
- width: 11px;
16
- height: 11px;
17
- }
18
-
19
- &.icon-file{
20
- fill: $color-darkblue;
21
- }
22
-
23
- &.icon-loading{
24
- width:25px;
25
- height:25px;
26
- }
27
-
28
- &.icon-close{
29
- border-radius: 50%;
30
- width: 24px;
31
- height: 24px;
32
- fill: white;
33
- }
34
-
35
- &.icon-menu {
36
- width: 14px;
37
- font-weight: 900;
38
- }
1
+ .icon{
2
+ display: inline-block;
3
+ height: 18px;
4
+ width: 17px;
5
+ position: relative;
6
+
7
+ &.icon-check{
8
+ .bd-file-upload &{
9
+ height: 16px;
10
+ width: 11px;
11
+ fill: $color-white;
12
+ }
13
+ }
14
+ &.icon-remove {
15
+ width: 11px;
16
+ height: 11px;
17
+ }
18
+
19
+ &.icon-file{
20
+ fill: $color-darkblue;
21
+ }
22
+
23
+ &.icon-loading{
24
+ width:25px;
25
+ height:25px;
26
+ }
27
+
28
+ &.icon-close{
29
+ border-radius: 50%;
30
+ width: 24px;
31
+ height: 24px;
32
+ fill: white;
33
+ }
34
+
35
+ &.icon-menu {
36
+ width: 14px;
37
+ font-weight: 900;
38
+ }
39
39
  }