@colijnit/sharedcomponents 300.1.12 → 300.1.14

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.
@@ -1,306 +1,312 @@
1
1
  @include export-module('co-task-creator-layout') {
2
- .co-task-creator{
3
- width: 100%;
4
- position: relative;
5
- &:not(.co-shared-hidden) {
6
- display: block;
7
- }
8
- .task-creator-wrapper {
9
- margin-left: 0;
10
- box-shadow: 0 1px 4px 0 #8083a385;
11
- border-radius: 5px;
12
- }
13
- .top-rows {
14
- &.expanded {
15
- .top-row-header {
16
- max-height: 40px;
17
- opacity: 1;
18
- transform: translateY(0);
19
- pointer-events: auto;
20
- display: flex;
21
- }
22
- .input-fields {
23
- &.creator-remarks {
24
- .co-input-text {
25
- max-height: 40px;
26
- opacity: 1;
27
- transform: translateY(0);
28
- pointer-events: auto;
29
- display: block;
30
- }
31
- }
32
- }
33
- }
34
- }
35
- .top-row-header {
36
- overflow: hidden;
37
- max-height: 0;
38
- opacity: 0;
39
- transform: translateY(-6px);
40
- pointer-events: none;
41
- display: flex;
42
- border-bottom: 1px solid #ececec;
43
- transition:
44
- max-height 220ms ease,
45
- opacity 160ms ease,
46
- transform 220ms ease;
47
- .co-email-selector {
48
- flex-direction: row;
49
- .recipients-add {
50
- display: none;
51
- }
52
- }
53
- .recipients-line {
54
- max-width: 600px;
55
- .co-input-text {
56
- .input-wrapper {
57
- label {
58
- color: #000;
59
- }
60
- }
61
- }
62
- }
63
- }
64
- .co-list-of-icons {
65
- position: absolute;
66
- top: 4px;
67
- left: 3px;
68
- display: block;
69
- height: fit-content;
70
- box-shadow: 0 2px 2px 0 #0000001A;
71
- border-radius: 3px;
72
- background: #ffffff;
73
- z-index: 2;
74
- .icon-item {
75
- display: flex;
76
- align-items: center;
77
- position: relative;
78
- .drop-arrow {
79
- display: none;
80
- }
81
- .label {
82
- display: none;
83
- }
84
- .co-icon {
85
- padding: 2px;
86
- }
87
- }
88
- & > .icon-item {
89
- cursor: pointer;
90
- padding: 5px;
91
- background: #212437;
92
- width: 35px;
93
- height: 30px;
94
- border-radius: 5px;
95
- .co-icon {
96
- svg {
97
- fill: #FFF;
98
- }
99
- }
100
- }
101
- .dropdown-menu {
102
- padding: 5px;
103
- display: flex;
104
- flex-direction: column;
105
- gap: 5px;
106
- .icon-item {
107
- cursor: pointer;
108
- }
109
- }
110
- }
111
- .top-rows {
112
- display: flex;
113
- flex-direction: column;
114
- width: 100%;
115
- gap: 0;
116
- &:not(.expanded) {
117
- .input-fields {
118
- &.creator-remarks {
119
- .co-input-textarea {
120
- &.large-remark {
121
- min-height: 0;
122
- overflow: hidden;
123
- opacity: 0;
124
- textarea {
125
- min-height: 0;
126
- padding-top: 0;
127
- }
128
- }
129
- }
130
- }
131
- }
132
-
133
- }
134
- .input-fields {
135
- display: flex;
136
- flex-direction: row;
137
- width: 100%;
138
- align-items: center;
139
- gap: 15px;
140
-
141
- .task-input-fields {
142
- display: flex;
143
- flex-direction: column;
144
- width: 100%;
145
- }
146
- &.creator-remarks {
147
- .co-input-text {
148
- width: 100%;
149
- margin-left: 0;
150
- overflow: hidden;
151
- max-height: 0;
152
- opacity: 0;
153
- transform: translateY(-6px);
154
- pointer-events: none;
155
- display: flex;
156
- border-bottom: 1px solid #ececec;
157
- transition:
158
- max-height 220ms ease,
159
- opacity 160ms ease,
160
- transform 220ms ease;
161
- &:before {
162
- box-shadow: none;
163
- }
164
- }
165
- .co-input-textarea {
166
- &.large-remark {
167
- min-height: 90px;
168
- width: 100%;
169
- }
170
- &:before {
171
- box-shadow: none;
172
- }
173
- label {
174
- top: 10px;
175
- transform: none;
176
- }
177
- textarea {
178
- margin-top: 0;
179
- padding-top: 10px;
180
- min-height: 90px;
181
- }
182
- }
183
- }
184
- }
185
- }
186
- .extras-buttons {
187
- display: flex;
188
- flex-direction: row;
189
- align-items: center;
190
- justify-content: space-between;
191
- padding: 10px;
192
- gap: 10px;
193
- .co-button {
194
- background-color: transparent;
195
- cursor: pointer;
196
- width: 26px;
197
- height: 26px;
198
- .co-icon {
199
- svg [fill] {
200
- fill: #000;
201
- }
202
- }
203
- }
204
- .task-buttons {
205
- display: flex;
206
- flex-direction: row-reverse;
207
- gap: 10px;
208
- .co-button {
209
- svg {
210
- polygon {
211
- fill: #000;
212
- }
213
- }
214
- svg [fill] {
215
- fill: #000;
216
- }
217
- }
218
- }
219
- }
220
- .paper-plane {
221
- padding: 5px 10px;
222
- .co-button {
223
- background-color: transparent;
224
- cursor: pointer;
225
- width: 24px;
226
- height: 24px;
227
- svg {
228
- polygon {
229
- fill: #000;
230
- }
231
- }
232
- }
233
- }
234
- .co-files-upload {
235
- width: 100%;
236
- min-height: auto;
237
- overflow-x: auto;
238
- .co-drag-drop-container {
239
- padding-top: 40px;
240
- position: relative;
241
- margin-top: 0;
242
- gap: 5px;
243
- align-items: flex-start;
244
- .add-file {
245
- top: 0;
246
- right: 0;
247
- z-index: 2;
248
- .co-tile-render {
249
- display: flex;
250
- align-items: center;
251
- flex-direction: row-reverse;
252
- .add-button {
253
- position: unset;
254
- }
255
- .info {
256
- display: none;
257
- }
258
- }
259
- .description {
260
- font-weight: bold;
261
- font-size: 12px;
262
- }
263
- svg {
264
- path {
265
- fill: #1A73E8;
266
- }
267
- path + path {
268
- display: none;
269
- }
270
- }
271
- .co-icon {
272
- width: 40px;
273
- height: 40px;
274
- }
275
- }
276
- .add-dropzone {
277
- position: relative;
278
- top: -30px;
279
- z-index: 1;
280
- }
281
- .tile {
282
- padding: 10px;
283
- border-radius: 5px;
284
- border: 1px solid #CCCCCC;
285
- height: 100%;
286
- .info {
287
- max-width: 100px;
288
- .description {
289
- font-size: 10px;
290
- display: -webkit-box;
291
- -webkit-line-clamp: 2;
292
- -webkit-box-orient: vertical;
293
- overflow: hidden;
294
- text-overflow: ellipsis;
295
- }
296
- }
297
- .trash {
298
- width: 20px;
299
- height: 20px;
300
- padding: 2px;
301
- }
302
- }
303
- }
304
- }
305
- }
2
+ .co-task-creator {
3
+ width: 100%;
4
+ position: relative;
5
+
6
+ &:not(.co-shared-hidden) {
7
+ display: block;
8
+ }
9
+
10
+ .task-creator-wrapper {
11
+ margin-left: 0;
12
+ box-shadow: 0 1px 4px 0 #8083a385;
13
+ border-radius: 5px;
14
+ }
15
+
16
+ .top-rows {
17
+ &.expanded {
18
+ .top-row-header {
19
+ max-height: 40px;
20
+ opacity: 1;
21
+ transform: translateY(0);
22
+ pointer-events: auto;
23
+ display: flex;
24
+ }
25
+
26
+ .input-fields {
27
+ &.creator-remarks {
28
+ .co-input-text {
29
+ max-height: 40px;
30
+ opacity: 1;
31
+ transform: translateY(0);
32
+ pointer-events: auto;
33
+ display: block;
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
39
+
40
+ .top-row-header {
41
+ overflow: hidden;
42
+ max-height: 0;
43
+ opacity: 0;
44
+ transform: translateY(-6px);
45
+ pointer-events: none;
46
+ display: flex;
47
+ border-bottom: 1px solid #ececec;
48
+ transition: max-height 220ms ease,
49
+ opacity 160ms ease,
50
+ transform 220ms ease;
51
+
52
+ .co-email-selector {
53
+ flex-direction: row;
54
+
55
+ .recipients-add {
56
+ display: none;
57
+ }
58
+ }
59
+
60
+ .recipients-line {
61
+ max-width: 600px;
62
+
63
+ .co-input-text {
64
+ .input-wrapper {
65
+ label {
66
+ color: #000;
67
+ }
68
+ }
69
+ }
70
+ }
71
+ }
72
+
73
+ .co-list-of-icons {
74
+ position: absolute;
75
+ top: 4px;
76
+ left: 3px;
77
+ display: block;
78
+ height: fit-content;
79
+ box-shadow: 0 2px 2px 0 #0000001A;
80
+ border-radius: 3px;
81
+ background: #ffffff;
82
+ z-index: 2;
83
+ }
84
+
85
+ .top-rows {
86
+ display: flex;
87
+ flex-direction: column;
88
+ width: 100%;
89
+ gap: 0;
90
+
91
+ &:not(.expanded) {
92
+ .input-fields {
93
+ &.creator-remarks {
94
+ .co-input-textarea {
95
+ &.large-remark {
96
+ min-height: 0;
97
+ overflow: hidden;
98
+ opacity: 0;
99
+
100
+ textarea {
101
+ min-height: 0;
102
+ padding-top: 0;
103
+ }
104
+ }
105
+ }
106
+ }
107
+ }
108
+
109
+ }
110
+
111
+ .input-fields {
112
+ display: flex;
113
+ flex-direction: row;
114
+ width: 100%;
115
+ align-items: center;
116
+ gap: 15px;
117
+
118
+ .task-input-fields {
119
+ display: flex;
120
+ flex-direction: column;
121
+ width: 100%;
122
+ }
123
+
124
+ &.creator-remarks {
125
+ .co-input-text {
126
+ width: 100%;
127
+ margin-left: 0;
128
+ overflow: hidden;
129
+ max-height: 0;
130
+ opacity: 0;
131
+ transform: translateY(-6px);
132
+ pointer-events: none;
133
+ display: flex;
134
+ border-bottom: 1px solid #ececec;
135
+ transition: max-height 220ms ease,
136
+ opacity 160ms ease,
137
+ transform 220ms ease;
138
+
139
+ &:before {
140
+ box-shadow: none;
141
+ }
142
+ }
143
+
144
+ .co-input-textarea {
145
+ &.large-remark {
146
+ min-height: 90px;
147
+ width: 100%;
148
+ }
149
+
150
+ &:before {
151
+ box-shadow: none;
152
+ }
153
+
154
+ label {
155
+ top: 10px;
156
+ transform: none;
157
+ }
158
+
159
+ textarea {
160
+ margin-top: 0;
161
+ padding-top: 10px;
162
+ min-height: 90px;
163
+ }
164
+ }
165
+ }
166
+ }
167
+ }
168
+
169
+ .extras-buttons {
170
+ display: flex;
171
+ flex-direction: row;
172
+ align-items: center;
173
+ justify-content: space-between;
174
+ padding: 10px;
175
+ gap: 10px;
176
+
177
+ .co-button {
178
+ background-color: transparent;
179
+ cursor: pointer;
180
+ width: 26px;
181
+ height: 26px;
182
+
183
+ .co-icon {
184
+ svg [fill] {
185
+ fill: #000;
186
+ }
187
+ }
188
+ }
189
+
190
+ .task-buttons {
191
+ display: flex;
192
+ flex-direction: row-reverse;
193
+ gap: 10px;
194
+
195
+ .co-button {
196
+ svg {
197
+ polygon {
198
+ fill: #000;
199
+ }
200
+ }
201
+
202
+ svg [fill] {
203
+ fill: #000;
204
+ }
205
+ }
206
+ }
207
+ }
208
+
209
+ .paper-plane {
210
+ padding: 5px 10px;
211
+
212
+ .co-button {
213
+ background-color: transparent;
214
+ cursor: pointer;
215
+ width: 24px;
216
+ height: 24px;
217
+
218
+ svg {
219
+ polygon {
220
+ fill: #000;
221
+ }
222
+ }
223
+ }
224
+ }
225
+
226
+ .co-files-upload {
227
+ width: 100%;
228
+ min-height: auto;
229
+ overflow-x: auto;
230
+
231
+ .co-drag-drop-container {
232
+ padding-top: 40px;
233
+ position: relative;
234
+ margin-top: 0;
235
+ gap: 5px;
236
+ align-items: flex-start;
237
+
238
+ .add-file {
239
+ top: 0;
240
+ right: 0;
241
+ z-index: 2;
242
+
243
+ .co-tile-render {
244
+ display: flex;
245
+ align-items: center;
246
+ flex-direction: row-reverse;
247
+
248
+ .add-button {
249
+ position: unset;
250
+ }
251
+
252
+ .info {
253
+ display: none;
254
+ }
255
+ }
256
+
257
+ .description {
258
+ font-weight: bold;
259
+ font-size: 12px;
260
+ }
261
+
262
+ svg {
263
+ path {
264
+ fill: #1A73E8;
265
+ }
266
+
267
+ path + path {
268
+ display: none;
269
+ }
270
+ }
271
+
272
+ .co-icon {
273
+ width: 40px;
274
+ height: 40px;
275
+ }
276
+ }
277
+
278
+ .add-dropzone {
279
+ position: relative;
280
+ top: -30px;
281
+ z-index: 1;
282
+ }
283
+
284
+ .tile {
285
+ padding: 10px;
286
+ border-radius: 5px;
287
+ border: 1px solid #CCCCCC;
288
+ height: 100%;
289
+
290
+ .info {
291
+ max-width: 100px;
292
+
293
+ .description {
294
+ font-size: 10px;
295
+ display: -webkit-box;
296
+ -webkit-line-clamp: 2;
297
+ -webkit-box-orient: vertical;
298
+ overflow: hidden;
299
+ text-overflow: ellipsis;
300
+ }
301
+ }
302
+
303
+ .trash {
304
+ width: 20px;
305
+ height: 20px;
306
+ padding: 2px;
307
+ }
308
+ }
309
+ }
310
+ }
311
+ }
306
312
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colijnit/sharedcomponents",
3
- "version": "300.1.12",
3
+ "version": "300.1.14",
4
4
  "private": false,
5
5
  "dependencies": {
6
6
  "chart.js": "4.3.0",
@@ -11,8 +11,8 @@
11
11
  "@angular/common": "^20.3.16",
12
12
  "@angular/core": "^20.3.16",
13
13
  "@colijnit/articleapi": ">=300.1.0",
14
- "@colijnit/mainapi": ">=300.1.4",
15
- "@colijnit/corecomponents_v12": ">=300.1.0",
14
+ "@colijnit/mainapi": ">=300.1.11",
15
+ "@colijnit/corecomponents_v12": ">=300.1.7",
16
16
  "@colijnit/ioneconnector": ">=300.1.0",
17
17
  "@colijnit/sharedapi": ">=1.0.20",
18
18
  "@colijnit/relationapi": ">=300.1.0",