@beterdichtbij/component-library 0.60.1 → 0.61.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 (67) hide show
  1. package/README.md +12 -12
  2. package/dist/bd-component-lib.cjs.js +628 -112
  3. package/dist/bd-component-lib.css +1 -1
  4. package/dist/bd-component-lib.es.js +7401 -10460
  5. package/dist/bd-component-lib.umd.js +629 -113
  6. package/dist/components/modals/BDAttachmentUploadModal/BDAttachmentUploadModal.vue.d.ts +2 -2
  7. package/dist/components/molecules/BDFileUpload/BDFileUpload.vue.d.ts +23 -0
  8. package/dist/index.d.ts +3 -2
  9. package/dist/interfaces/{BDDropzoneProps.d.ts → BDFileUploadProps.d.ts} +7 -3
  10. package/dist/locales/en.json +10 -10
  11. package/dist/locales/nl.json +98 -98
  12. package/dist/scss/_alert.scss +11 -11
  13. package/dist/scss/_article.scss +23 -23
  14. package/dist/scss/_assign-conversation-modal.scss +13 -13
  15. package/dist/scss/_attachments.scss +107 -107
  16. package/dist/scss/_badge.scss +18 -18
  17. package/dist/scss/_base.scss +1 -1
  18. package/dist/scss/_button.scss +74 -74
  19. package/dist/scss/_card.scss +56 -56
  20. package/dist/scss/_chatcloud.scss +93 -93
  21. package/dist/scss/_collapsable-card.scss +107 -107
  22. package/dist/scss/_content-library-card-message-template.scss +131 -131
  23. package/dist/scss/_content-library-card.scss +135 -135
  24. package/dist/scss/_content-library-modal.scss +46 -46
  25. package/dist/scss/_content-library-overview.scss +4 -4
  26. package/dist/scss/_content-library-split-button.scss +19 -19
  27. package/dist/scss/_conversation-to-text-modal.scss +32 -32
  28. package/dist/scss/_dropdown.scss +113 -113
  29. package/dist/scss/_extern.scss +1 -1
  30. package/dist/scss/{_dropzone.scss → _file-upload.scss} +92 -77
  31. package/dist/scss/_form-field.scss +12 -12
  32. package/dist/scss/_form-multiple-checkbox.scss +47 -47
  33. package/dist/scss/_forms.scss +2 -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 +57 -57
  37. package/dist/scss/_image-attachment-modal.scss +91 -91
  38. package/dist/scss/_input-group.scss +2 -2
  39. package/dist/scss/_markdown-editor.scss +98 -98
  40. package/dist/scss/_message-template-form-modal.scss +42 -42
  41. package/dist/scss/_mobile-menu.scss +91 -91
  42. package/dist/scss/_modal.scss +173 -173
  43. package/dist/scss/_notification-button.scss +29 -29
  44. package/dist/scss/_pagination.scss +40 -40
  45. package/dist/scss/_phone-number-edit-modal.scss +35 -35
  46. package/dist/scss/_pill.scss +89 -89
  47. package/dist/scss/_profile-image.scss +34 -34
  48. package/dist/scss/_table-sort-header.scss +13 -13
  49. package/dist/scss/_table.scss +16 -16
  50. package/dist/scss/_templates.scss +323 -323
  51. package/dist/scss/_toast.scss +69 -69
  52. package/dist/scss/_user-information.scss +34 -34
  53. package/dist/scss/_video-call-toast.scss +100 -100
  54. package/dist/scss/_zoomslider.scss +77 -77
  55. package/dist/scss/base/variables.scss +210 -210
  56. package/dist/scss/component-library-styling.scss +46 -46
  57. package/dist/scss/extern/_bootstrap.scss +14 -19
  58. package/dist/scss/extern/_prime-vue.scss +551 -550
  59. package/dist/scss/forms/_form-check.scss +15 -15
  60. package/dist/scss/forms/_form-input.scss +9 -9
  61. package/dist/scss/mixins.scss +78 -78
  62. package/dist/scss/templates/_change-password-template.scss +8 -8
  63. package/dist/scss/templates/_content-library-template.scss +139 -139
  64. package/dist/scss/templates/_not-found-template.scss +5 -5
  65. package/dist/stores/SessionTimeOutStore.ts +46 -46
  66. package/package.json +127 -129
  67. package/dist/components/molecules/BDDropzone/BDDropzone.vue.d.ts +0 -17
@@ -1,132 +1,132 @@
1
- .content-library-card-message-template {
2
- padding: 8px;
3
- min-height: 180px;
4
- height: auto;
5
-
6
- &.collapsed {
7
- height: 180px;
8
- }
9
-
10
- .content-library-card__body {
11
- padding-top: 6px;
12
- max-height: none;
13
- overflow: hidden;
14
-
15
- &.collapsed {
16
- max-height: 75px;
17
- }
18
- }
19
-
20
- .btn-link {
21
- padding: 0;
22
-
23
- &:focus {
24
- box-shadow: revert;
25
- }
26
- }
27
-
28
- .btn-insert {
29
- width: auto;
30
- }
31
-
32
- .content-library-card-message-template__body {
33
- display: block !important;
34
-
35
- .message-text {
36
- word-break: break-word;
37
- }
38
-
39
- .attachment-list {
40
- .attachment-list__item {
41
- margin-right: 15px;
42
- margin-bottom: 0.25rem;
43
- word-break: break-all;
44
- }
45
-
46
- img {
47
- height: 50px;
48
- max-width: 100%;
49
- }
50
- }
51
- }
52
-
53
- footer {
54
- justify-content: space-between;
55
-
56
- .icon-button {
57
- svg {
58
- fill: revert;
59
- stroke: hsla(224, 21%, 38%, 1);
60
- }
61
- }
62
- }
63
-
64
- .attachment-occurence {
65
- width: 30px;
66
- height: 30px;
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- position: relative;
71
-
72
- .icon {
73
- fill: $color-blue;
74
- }
75
-
76
- .number-icon {
77
- position: absolute;
78
- top: 0;
79
- right: 0;
80
- color: white;
81
- font-size: 0.6em;
82
- border-radius: 50%;
83
- background-color: $blue;
84
- width: .8rem;
85
- height: .8rem;
86
- display: flex;
87
- text-align: center;
88
- align-items: center;
89
- justify-content: center;
90
- }
91
- }
92
-
93
- header {
94
- display: flex;
95
-
96
- .heading {
97
- flex: 1;
98
-
99
- .title {
100
- h6 {
101
- display: inline;
102
- margin: 0 4px 0 0;
103
- line-height: normal;
104
- }
105
- }
106
- }
107
-
108
- .edit-btn-group {
109
- button {
110
- width: 30px;
111
- height: 30px;
112
-
113
- svg {
114
- fill: hsla(224, 21%, 38%, 1);
115
- stroke: revert;
116
- }
117
- }
118
- }
119
- }
120
-
121
- .collapse-button {
122
- height: 30px;
123
-
124
- &-last {
125
- margin-bottom: 0;
126
- }
127
-
128
- svg {
129
- margin-right: 4px;
130
- }
131
- }
1
+ .content-library-card-message-template {
2
+ padding: 8px;
3
+ min-height: 180px;
4
+ height: auto;
5
+
6
+ &.collapsed {
7
+ height: 180px;
8
+ }
9
+
10
+ .content-library-card__body {
11
+ padding-top: 6px;
12
+ max-height: none;
13
+ overflow: hidden;
14
+
15
+ &.collapsed {
16
+ max-height: 75px;
17
+ }
18
+ }
19
+
20
+ .btn-link {
21
+ padding: 0;
22
+
23
+ &:focus {
24
+ box-shadow: revert;
25
+ }
26
+ }
27
+
28
+ .btn-insert {
29
+ width: auto;
30
+ }
31
+
32
+ .content-library-card-message-template__body {
33
+ display: block !important;
34
+
35
+ .message-text {
36
+ word-break: break-word;
37
+ }
38
+
39
+ .attachment-list {
40
+ .attachment-list__item {
41
+ margin-right: 15px;
42
+ margin-bottom: 0.25rem;
43
+ word-break: break-all;
44
+ }
45
+
46
+ img {
47
+ height: 50px;
48
+ max-width: 100%;
49
+ }
50
+ }
51
+ }
52
+
53
+ footer {
54
+ justify-content: space-between;
55
+
56
+ .icon-button {
57
+ svg {
58
+ fill: revert;
59
+ stroke: hsla(224, 21%, 38%, 1);
60
+ }
61
+ }
62
+ }
63
+
64
+ .attachment-occurence {
65
+ width: 30px;
66
+ height: 30px;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ position: relative;
71
+
72
+ .icon {
73
+ fill: $color-blue;
74
+ }
75
+
76
+ .number-icon {
77
+ position: absolute;
78
+ top: 0;
79
+ right: 0;
80
+ color: white;
81
+ font-size: 0.6em;
82
+ border-radius: 50%;
83
+ background-color: $blue;
84
+ width: .8rem;
85
+ height: .8rem;
86
+ display: flex;
87
+ text-align: center;
88
+ align-items: center;
89
+ justify-content: center;
90
+ }
91
+ }
92
+
93
+ header {
94
+ display: flex;
95
+
96
+ .heading {
97
+ flex: 1;
98
+
99
+ .title {
100
+ h6 {
101
+ display: inline;
102
+ margin: 0 4px 0 0;
103
+ line-height: normal;
104
+ }
105
+ }
106
+ }
107
+
108
+ .edit-btn-group {
109
+ button {
110
+ width: 30px;
111
+ height: 30px;
112
+
113
+ svg {
114
+ fill: hsla(224, 21%, 38%, 1);
115
+ stroke: revert;
116
+ }
117
+ }
118
+ }
119
+ }
120
+
121
+ .collapse-button {
122
+ height: 30px;
123
+
124
+ &-last {
125
+ margin-bottom: 0;
126
+ }
127
+
128
+ svg {
129
+ margin-right: 4px;
130
+ }
131
+ }
132
132
  }
@@ -1,136 +1,136 @@
1
- .content-library-card {
2
- min-height: 260px;
3
- background-color: #fff;
4
- box-shadow: 0 0 1px #abb0be;
5
- padding: 20px;
6
- border-radius: 5px;
7
- display: flex;
8
-
9
- flex-direction: column;
10
- justify-content: space-evenly;
11
-
12
- header {
13
- h6 {
14
- display: -webkit-box;
15
- display: -moz-box;
16
- overflow: hidden;
17
- -webkit-line-clamp: 2;
18
- line-clamp: 2;
19
- -webkit-box-orient: vertical;
20
- }
21
-
22
- small {
23
- font-size: 14px;
24
- line-height: 1.3125rem;
25
- display: block;
26
- max-height: 1.3125rem;
27
- overflow: hidden;
28
- white-space: nowrap;
29
- text-overflow: ellipsis;
30
- }
31
- }
32
-
33
- &__body {
34
- padding-top: 12px;
35
- flex: 1;
36
-
37
- p {
38
- min-height: 1rem;
39
- }
40
- p:last-of-type {
41
- margin-bottom: 0px;
42
- }
43
- }
44
-
45
- &__description {
46
- display: -webkit-box;
47
- display: -moz-box;
48
- max-height: 2.75rem;
49
- overflow: hidden;
50
- text-overflow: ellipsis;
51
- -webkit-line-clamp: 2;
52
- /* number of lines to show */
53
- line-clamp: 2;
54
- -webkit-box-orient: vertical;
55
- }
56
-
57
- &__uri {
58
- font-size: 1rem;
59
- display: flex;
60
- align-items: baseline;
61
-
62
- .filler {
63
- width: 6px;
64
- }
65
- }
66
-
67
- footer {
68
- display: flex;
69
- justify-content: space-between;
70
- align-items: center;
71
-
72
- .btn-icon {
73
- height: 40px;
74
- width: 40px;
75
-
76
- svg {
77
- fill: hsla(224, 21%, 38%, 1);
78
- stroke: revert;
79
-
80
- &.icon-info-circle {
81
- fill: transparent;
82
- stroke: hsla(224, 21%, 38%, 1);
83
- }
84
-
85
- &.icon-external {
86
- transform: translateY(1px);
87
- }
88
- }
89
-
90
- &:hover {
91
- background: hsla(221, 13%, 95%, 1);
92
- border-radius: 8px;
93
- }
94
- }
95
- }
96
-
97
- &-title {
98
- //because of IE the value can't be set to revert
99
- min-height: revert;
100
- height: 164px;
101
-
102
-
103
- justify-content: space-between;
104
- }
105
-
106
- &-image {
107
- min-height: revert;
108
- height: 184px;
109
- justify-content: space-between;
110
-
111
-
112
-
113
- header {
114
- display: flex;
115
- justify-content: space-between;
116
- gap: 16px;
117
-
118
- h6 {
119
- max-height: 4.5rem;
120
- line-clamp: 3;
121
- -webkit-line-clamp: 3;
122
- }
123
- }
124
-
125
- &__titles {
126
- overflow: hidden;
127
- }
128
-
129
- &__figure {
130
- height: 100px;
131
- width: 100px;
132
- object-fit: cover;
133
- }
134
- }
135
-
1
+ .content-library-card {
2
+ min-height: 260px;
3
+ background-color: #fff;
4
+ box-shadow: 0 0 1px #abb0be;
5
+ padding: 20px;
6
+ border-radius: 5px;
7
+ display: flex;
8
+
9
+ flex-direction: column;
10
+ justify-content: space-evenly;
11
+
12
+ header {
13
+ h6 {
14
+ display: -webkit-box;
15
+ display: -moz-box;
16
+ overflow: hidden;
17
+ -webkit-line-clamp: 2;
18
+ line-clamp: 2;
19
+ -webkit-box-orient: vertical;
20
+ }
21
+
22
+ small {
23
+ font-size: 14px;
24
+ line-height: 1.3125rem;
25
+ display: block;
26
+ max-height: 1.3125rem;
27
+ overflow: hidden;
28
+ white-space: nowrap;
29
+ text-overflow: ellipsis;
30
+ }
31
+ }
32
+
33
+ &__body {
34
+ padding-top: 12px;
35
+ flex: 1;
36
+
37
+ p {
38
+ min-height: 1rem;
39
+ }
40
+ p:last-of-type {
41
+ margin-bottom: 0px;
42
+ }
43
+ }
44
+
45
+ &__description {
46
+ display: -webkit-box;
47
+ display: -moz-box;
48
+ max-height: 2.75rem;
49
+ overflow: hidden;
50
+ text-overflow: ellipsis;
51
+ -webkit-line-clamp: 2;
52
+ /* number of lines to show */
53
+ line-clamp: 2;
54
+ -webkit-box-orient: vertical;
55
+ }
56
+
57
+ &__uri {
58
+ font-size: 1rem;
59
+ display: flex;
60
+ align-items: baseline;
61
+
62
+ .filler {
63
+ width: 6px;
64
+ }
65
+ }
66
+
67
+ footer {
68
+ display: flex;
69
+ justify-content: space-between;
70
+ align-items: center;
71
+
72
+ .btn-icon {
73
+ height: 40px;
74
+ width: 40px;
75
+
76
+ svg {
77
+ fill: hsla(224, 21%, 38%, 1);
78
+ stroke: revert;
79
+
80
+ &.icon-info-circle {
81
+ fill: transparent;
82
+ stroke: hsla(224, 21%, 38%, 1);
83
+ }
84
+
85
+ &.icon-external {
86
+ transform: translateY(1px);
87
+ }
88
+ }
89
+
90
+ &:hover {
91
+ background: hsla(221, 13%, 95%, 1);
92
+ border-radius: 8px;
93
+ }
94
+ }
95
+ }
96
+
97
+ &-title {
98
+ //because of IE the value can't be set to revert
99
+ min-height: revert;
100
+ height: 164px;
101
+
102
+
103
+ justify-content: space-between;
104
+ }
105
+
106
+ &-image {
107
+ min-height: revert;
108
+ height: 184px;
109
+ justify-content: space-between;
110
+
111
+
112
+
113
+ header {
114
+ display: flex;
115
+ justify-content: space-between;
116
+ gap: 16px;
117
+
118
+ h6 {
119
+ max-height: 4.5rem;
120
+ line-clamp: 3;
121
+ -webkit-line-clamp: 3;
122
+ }
123
+ }
124
+
125
+ &__titles {
126
+ overflow: hidden;
127
+ }
128
+
129
+ &__figure {
130
+ height: 100px;
131
+ width: 100px;
132
+ object-fit: cover;
133
+ }
134
+ }
135
+
136
136
  }
@@ -1,47 +1,47 @@
1
- #content-library-modal {
2
- .search-block input {
3
- margin: 0 0 16px 0;
4
- }
5
-
6
- .collapse-button-container {
7
- text-align: center;
8
- }
9
-
10
- .collapse-button {
11
- padding: 0 12px;
12
-
13
- &-last {
14
- margin-bottom: 0;
15
- }
16
-
17
- svg {
18
- margin-right: 4px;
19
- }
20
-
21
- > .collapsed-show {
22
- display: none;
23
- }
24
-
25
- > .collapsed-hide {
26
- display: inline-block;
27
- }
28
-
29
- &.collapsed {
30
- > .collapsed-show {
31
- display: inline-block;
32
- }
33
-
34
- > .collapsed-hide {
35
- display: none;
36
- }
37
- }
38
- }
39
-
40
- .content-library-header__messages {
41
- display: flex;
42
- align-items: center;
43
- justify-content: center;
44
- text-align: center;
45
- font-weight: bold;
46
- }
1
+ #content-library-modal {
2
+ .search-block input {
3
+ margin: 0 0 16px 0;
4
+ }
5
+
6
+ .collapse-button-container {
7
+ text-align: center;
8
+ }
9
+
10
+ .collapse-button {
11
+ padding: 0 12px;
12
+
13
+ &-last {
14
+ margin-bottom: 0;
15
+ }
16
+
17
+ svg {
18
+ margin-right: 4px;
19
+ }
20
+
21
+ > .collapsed-show {
22
+ display: none;
23
+ }
24
+
25
+ > .collapsed-hide {
26
+ display: inline-block;
27
+ }
28
+
29
+ &.collapsed {
30
+ > .collapsed-show {
31
+ display: inline-block;
32
+ }
33
+
34
+ > .collapsed-hide {
35
+ display: none;
36
+ }
37
+ }
38
+ }
39
+
40
+ .content-library-header__messages {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ text-align: center;
45
+ font-weight: bold;
46
+ }
47
47
  }
@@ -1,5 +1,5 @@
1
- .content-library-overview {
2
- .card-container {
3
- padding: 0 4px 8px 4px;
4
- }
1
+ .content-library-overview {
2
+ .card-container {
3
+ padding: 0 4px 8px 4px;
4
+ }
5
5
  }
@@ -1,20 +1,20 @@
1
- .bd-content-library-split-button {
2
- // Empty ::after element with extra height is added by PrimeVue.
3
- .p-button-icon-only::after {
4
- display: none;
5
- }
6
-
7
- .menu-item {
8
- display: flex;
9
- align-items: center;
10
- gap: 8px;
11
- padding: 8px;
12
- cursor: pointer;
13
- font-size: 1rem;
14
-
15
- .icon-image {
16
- width: 18px;
17
- height: 18px;
18
- }
19
- }
1
+ .bd-content-library-split-button {
2
+ // Empty ::after element with extra height is added by PrimeVue.
3
+ .p-button-icon-only::after {
4
+ display: none;
5
+ }
6
+
7
+ .menu-item {
8
+ display: flex;
9
+ align-items: center;
10
+ gap: 8px;
11
+ padding: 8px;
12
+ cursor: pointer;
13
+ font-size: 1rem;
14
+
15
+ .icon-image {
16
+ width: 18px;
17
+ height: 18px;
18
+ }
19
+ }
20
20
  }