@colijnit/sharedcomponents 255.1.17 → 255.1.18
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.
- package/bundles/colijnit-sharedcomponents.umd.js +49 -15
- package/bundles/colijnit-sharedcomponents.umd.js.map +1 -1
- package/colijnit-sharedcomponents.metadata.json +1 -1
- package/esm2015/lib/components/email-selector/email-selector.component.js +19 -7
- package/esm2015/lib/components/file-upload/file-upload.component.js +4 -1
- package/esm2015/lib/components/files-upload/files-upload.component.js +30 -20
- package/esm2015/lib/components/role-email-selector/role-email-selector.component.js +42 -19
- package/esm2015/lib/components/task-creator/task-creator.component.js +34 -25
- package/esm2015/lib/components/task-creator/task-creator.module.js +4 -3
- package/esm2015/lib/enum/icon.enum.js +3 -1
- package/esm2015/lib/enum/keyboard-code.enum.js +2 -1
- package/esm2015/lib/model/icon-svg.js +3 -1
- package/fesm2015/colijnit-sharedcomponents.js +130 -67
- package/fesm2015/colijnit-sharedcomponents.js.map +1 -1
- package/lib/components/activity-list/style/_layout.scss +1 -1
- package/lib/components/email-selector/style/_layout.scss +34 -1
- package/lib/components/file-upload/file-upload.component.d.ts +1 -0
- package/lib/components/file-upload/style/_layout.scss +11 -1
- package/lib/components/files-upload/style/_layout.scss +35 -2
- package/lib/components/role-email-selector/role-email-selector.component.d.ts +10 -3
- package/lib/components/role-email-selector/style/_layout.scss +9 -2
- package/lib/components/role-email-selector/style/_material-definition.scss +4 -4
- package/lib/components/task-creator/style/_layout.scss +39 -10
- package/lib/enum/icon.enum.d.ts +2 -0
- package/lib/enum/keyboard-code.enum.d.ts +2 -1
- package/package.json +1 -1
|
@@ -5,11 +5,44 @@
|
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
row-gap: 5px;
|
|
8
|
+
padding-left: 0;
|
|
8
9
|
.recipients-line {
|
|
9
10
|
width: 100%;
|
|
10
11
|
display: flex;
|
|
11
12
|
flex-direction: row;
|
|
12
|
-
|
|
13
|
+
gap: 60px;
|
|
14
|
+
border-bottom: 4px solid #f5f5fc;
|
|
15
|
+
.recipients-bcc, recipients-add {
|
|
16
|
+
display: flex;
|
|
17
|
+
gap: 5px;
|
|
18
|
+
align-items: center;
|
|
19
|
+
width: 80px;
|
|
20
|
+
label {
|
|
21
|
+
font-size: 12px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
.recipients-bcc {
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
}
|
|
27
|
+
.co-input-text, .co-list-of-values {
|
|
28
|
+
background: transparent;
|
|
29
|
+
&:before {
|
|
30
|
+
box-shadow: none;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
.co-button {
|
|
34
|
+
background: none;
|
|
35
|
+
.co-icon {
|
|
36
|
+
width: 20px;
|
|
37
|
+
height: 20px;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
.co-input-text {
|
|
41
|
+
width: 100%;
|
|
42
|
+
}
|
|
43
|
+
.co-list-of-values {
|
|
44
|
+
min-width: 150px;
|
|
45
|
+
}
|
|
13
46
|
}
|
|
14
47
|
}
|
|
15
48
|
}
|
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
font-family: $sc-file-upload-font-family;
|
|
4
4
|
font-size: $sc-file-upload-font-size;
|
|
5
5
|
position: relative;
|
|
6
|
+
&.add-file {
|
|
7
|
+
position: absolute;
|
|
8
|
+
top: 0;
|
|
9
|
+
.co-tile-render {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
flex-direction: row-reverse;
|
|
13
|
+
justify-content: flex-end;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
6
16
|
&.link {
|
|
7
17
|
.image {
|
|
8
18
|
cursor: pointer;
|
|
@@ -33,7 +43,7 @@
|
|
|
33
43
|
}
|
|
34
44
|
.add-button {
|
|
35
45
|
cursor: pointer;
|
|
36
|
-
position:
|
|
46
|
+
position: relative;
|
|
37
47
|
bottom: 0;
|
|
38
48
|
right: 0;
|
|
39
49
|
}
|
|
@@ -40,9 +40,42 @@
|
|
|
40
40
|
}
|
|
41
41
|
.co-drag-drop-container {
|
|
42
42
|
display: flex;
|
|
43
|
-
|
|
43
|
+
padding-top: 30px;
|
|
44
|
+
position: relative;
|
|
45
|
+
margin-top: 0;
|
|
46
|
+
grid-gap: 5px;
|
|
47
|
+
gap: 5px;
|
|
48
|
+
align-items: flex-start;
|
|
49
|
+
}
|
|
50
|
+
.upload-add-wrapper {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
gap: 10px;
|
|
54
|
+
.add-dropzone {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
.co-tile-render {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
align-items: center;
|
|
63
|
+
padding: 10px;
|
|
64
|
+
width: 150px;
|
|
65
|
+
height: 100px;
|
|
66
|
+
border: 1px dashed #dddddd;
|
|
67
|
+
.add-button {
|
|
68
|
+
position: relative;
|
|
69
|
+
svg {
|
|
70
|
+
fill: #dddddd;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.description {
|
|
74
|
+
font-size: 10px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
44
78
|
}
|
|
45
|
-
|
|
46
79
|
}
|
|
47
80
|
}
|
|
48
81
|
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { EventEmitter, OnInit } from "@angular/core";
|
|
1
|
+
import { AfterViewInit, ElementRef, EventEmitter, OnInit, Renderer2 } from "@angular/core";
|
|
2
2
|
import { Icon } from "../../enum/icon.enum";
|
|
3
3
|
import { IconCacheService } from "../../service/icon-cache.service";
|
|
4
4
|
import { WorkflowCategoryType } from "@colijnit/mainapi/build/enum/workflow-category.enum";
|
|
5
5
|
import { RoleEmailaddress } from "@colijnit/mainapi/build/model/role-email-address";
|
|
6
6
|
import { SharedService } from "../../service/shared.service";
|
|
7
|
-
export declare class RoleEmailSelectorComponent implements OnInit {
|
|
7
|
+
export declare class RoleEmailSelectorComponent implements OnInit, AfterViewInit {
|
|
8
8
|
iconService: IconCacheService;
|
|
9
9
|
sharedService: SharedService;
|
|
10
|
+
private renderer;
|
|
10
11
|
readonly icons: typeof Icon;
|
|
11
12
|
recipientLabel: string;
|
|
13
|
+
fieldLabel: string;
|
|
12
14
|
extraLabel: string;
|
|
13
15
|
set model(value: string[]);
|
|
14
16
|
get model(): string[];
|
|
@@ -25,13 +27,18 @@ export declare class RoleEmailSelectorComponent implements OnInit {
|
|
|
25
27
|
private _model;
|
|
26
28
|
private _key;
|
|
27
29
|
private _workflowCategoryType;
|
|
30
|
+
chipsWrapperWidth: number;
|
|
28
31
|
showClass(): boolean;
|
|
29
|
-
|
|
32
|
+
chipsWrapper: ElementRef;
|
|
33
|
+
inputText: ElementRef;
|
|
34
|
+
constructor(iconService: IconCacheService, sharedService: SharedService, renderer: Renderer2);
|
|
30
35
|
ngOnInit(): Promise<void>;
|
|
36
|
+
ngAfterViewInit(): void;
|
|
31
37
|
fetchRoleEmailAddresses(): Promise<void>;
|
|
32
38
|
roleChosen(roles: RoleEmailaddress[]): void;
|
|
33
39
|
handleKeyPressed(event: KeyboardEvent): void;
|
|
34
40
|
addEmail(): void;
|
|
35
41
|
updateModel(): void;
|
|
36
42
|
removeOptionFromModel(email: string): void;
|
|
43
|
+
private updateChipsWrapperWidth;
|
|
37
44
|
}
|
|
@@ -4,14 +4,18 @@
|
|
|
4
4
|
height: 100%;
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: row;
|
|
7
|
-
row-gap:
|
|
7
|
+
row-gap: 0;
|
|
8
|
+
justify-content: space-between;
|
|
9
|
+
position: relative;
|
|
8
10
|
.chips-wrapper {
|
|
9
11
|
display: flex;
|
|
10
12
|
flex-wrap: wrap;
|
|
11
13
|
column-gap: $cc-co-role-email-selector-chips-column-gap;
|
|
12
14
|
row-gap: $cc-co-role-email-selector-chips-row-gap;
|
|
13
15
|
padding: $cc-co-role-email-selector-chips-padding;
|
|
14
|
-
|
|
16
|
+
position: absolute;
|
|
17
|
+
left: 10px;
|
|
18
|
+
top: 8px;
|
|
15
19
|
.chips {
|
|
16
20
|
font-family: $cc-co-role-email-selector-chip-font-family;
|
|
17
21
|
font-size: $cc-co-role-email-selector-chip-font-size;
|
|
@@ -22,6 +26,9 @@
|
|
|
22
26
|
border-radius: $cc-co-role-email-selector-chip-border-radius; // 5px;
|
|
23
27
|
padding: $cc-co-role-email-selector-chip-padding; // 5px 7px;
|
|
24
28
|
user-select: none;
|
|
29
|
+
&:last-child {
|
|
30
|
+
margin-right: 20px;
|
|
31
|
+
}
|
|
25
32
|
}
|
|
26
33
|
.remove-chip-icon {
|
|
27
34
|
cursor: pointer;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
$cc-co-role-email-selector-chips-padding: 0
|
|
1
|
+
$cc-co-role-email-selector-chips-padding: 0 !default;
|
|
2
2
|
$cc-co-role-email-selector-chips-column-gap: 5px !default;
|
|
3
3
|
$cc-co-role-email-selector-chips-row-gap: 2px !default;
|
|
4
4
|
|
|
5
5
|
$cc-co-role-email-selector-chip-font-family: $cc-font-family !default;
|
|
6
6
|
$cc-co-role-email-selector-chip-font-size: $cc-font-size-small !default;
|
|
7
|
-
$cc-co-role-email-selector-chip-font-color:
|
|
7
|
+
$cc-co-role-email-selector-chip-font-color: #000 !default;
|
|
8
8
|
|
|
9
|
-
$cc-co-role-email-selector-chip-background-color:
|
|
9
|
+
$cc-co-role-email-selector-chip-background-color: #f5f5fc !default;
|
|
10
10
|
$cc-co-role-email-selector-chip-border-radius: 5px !default;
|
|
11
11
|
$cc-co-role-email-selector-chip-padding: 2px 7px !default;
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
$cc-co-role-email-selector-chip-delete-icon-color: $cc-color-
|
|
14
|
+
$cc-co-role-email-selector-chip-delete-icon-color: $cc-color-icons-dark !default;
|
|
15
15
|
$cc-co-role-email-selector-chip-delete-icon-size: 20px !default;
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
@include export-module('co-task-creator-layout') {
|
|
2
2
|
.co-task-creator{
|
|
3
3
|
width: 100%;
|
|
4
|
-
height: 100%;
|
|
5
4
|
position: relative;
|
|
5
|
+
display: block;
|
|
6
|
+
.task-creator-wrapper {
|
|
7
|
+
margin-left: 40px;
|
|
8
|
+
box-shadow: 0px 2px 4px 0px #0000001A;
|
|
9
|
+
border-radius: 5px;
|
|
10
|
+
}
|
|
6
11
|
.top-rows {
|
|
7
12
|
display: flex;
|
|
8
13
|
flex-direction: column;
|
|
9
14
|
width: 100%;
|
|
10
|
-
gap:
|
|
15
|
+
gap: 0;
|
|
11
16
|
.input-fields {
|
|
12
17
|
display: flex;
|
|
13
18
|
flex-direction: row;
|
|
@@ -20,16 +25,11 @@
|
|
|
20
25
|
flex-direction: column;
|
|
21
26
|
width: 100%;
|
|
22
27
|
}
|
|
23
|
-
|
|
24
|
-
.co-input-text {
|
|
25
|
-
width: 100%;
|
|
26
|
-
margin-left: 45px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
28
|
.co-list-of-icons {
|
|
30
29
|
position: absolute;
|
|
31
30
|
display: block;
|
|
32
31
|
left: 0;
|
|
32
|
+
top: 0;
|
|
33
33
|
height: fit-content;
|
|
34
34
|
background: linear-gradient(180deg, rgba(15, 64, 130, 0.04) 3%, rgba(26, 115, 232, 0.04) 90%);
|
|
35
35
|
box-shadow: 0 4px 4px 0 #0000001A;
|
|
@@ -87,14 +87,43 @@
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
|
+
&.creator-remarks {
|
|
91
|
+
.co-input-text {
|
|
92
|
+
width: 100%;
|
|
93
|
+
margin-left: 0;
|
|
94
|
+
border-bottom: 4px solid #f5f5fc;
|
|
95
|
+
&:before {
|
|
96
|
+
box-shadow: none;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
.co-input-textarea {
|
|
100
|
+
&.large-remark {
|
|
101
|
+
min-height: 130px;
|
|
102
|
+
width: 100%;
|
|
103
|
+
border-bottom: 4px solid #f5f5fc;
|
|
104
|
+
}
|
|
105
|
+
&:before {
|
|
106
|
+
box-shadow: none;
|
|
107
|
+
}
|
|
108
|
+
label {
|
|
109
|
+
top: 10px;
|
|
110
|
+
transform: none;
|
|
111
|
+
}
|
|
112
|
+
textarea {
|
|
113
|
+
margin-top: 0;
|
|
114
|
+
padding-top: 30px;
|
|
115
|
+
min-height: 130px;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
90
119
|
}
|
|
91
120
|
}
|
|
92
121
|
.extras-buttons {
|
|
93
122
|
display: flex;
|
|
94
123
|
flex-direction: row;
|
|
95
124
|
align-items: center;
|
|
96
|
-
justify-content:
|
|
97
|
-
|
|
125
|
+
justify-content: space-between;
|
|
126
|
+
padding: 10px;
|
|
98
127
|
gap: 5px;
|
|
99
128
|
.co-button {
|
|
100
129
|
background-color: transparent;
|
package/lib/enum/icon.enum.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ export declare enum Icon {
|
|
|
39
39
|
FilePdfRegular = "file_pdf_regular",
|
|
40
40
|
FilePdfSolid = "file_pdf_solid",
|
|
41
41
|
FileSignatureRegular = "file_signature_regular",
|
|
42
|
+
FoldersSharpRegular = "folders_sharp_regular",
|
|
42
43
|
HouseBlankRegular = "house_blank_regular",
|
|
43
44
|
IoneWorkflow = "ione_workflow",
|
|
44
45
|
ListUlRegular = "list_ul_regular",
|
|
@@ -57,6 +58,7 @@ export declare enum Icon {
|
|
|
57
58
|
PrintRegular = "print_regular",
|
|
58
59
|
PrintSolid = "print_solid",
|
|
59
60
|
SignatureField = "signature_field",
|
|
61
|
+
SquarePlusRegular = "square_plus_regular",
|
|
60
62
|
TagRegular = "tag_regular",
|
|
61
63
|
Task = "task",
|
|
62
64
|
Trashbin = "trashbin",
|