@alfresco/adf-process-services-cloud 8.4.0-19291296139 → 8.4.0-19302006691

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 (26) hide show
  1. package/fesm2022/adf-process-services-cloud.mjs +48 -48
  2. package/fesm2022/adf-process-services-cloud.mjs.map +1 -1
  3. package/lib/app/components/app-details-cloud/app-details-cloud.component.scss +168 -0
  4. package/lib/form/components/form-cloud.component.scss +2 -11
  5. package/lib/form/components/spinner/form-spinner.component.scss +1 -1
  6. package/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss +3 -20
  7. package/lib/form/components/widgets/attach-file/file-properties-table/file-properties-table-cloud.component.scss +1 -1
  8. package/lib/form/components/widgets/data-table/data-table.widget.scss +0 -1
  9. package/lib/form/components/widgets/display-external-property/display-external-property.widget.scss +0 -1
  10. package/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss +0 -9
  11. package/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss +0 -4
  12. package/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss +1 -1
  13. package/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss +0 -9
  14. package/lib/group/components/group-cloud.component.scss +3 -14
  15. package/lib/people/components/people-cloud.component.scss +3 -22
  16. package/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss +0 -23
  17. package/lib/process/process-filters/components/process-filters/process-filters-cloud.component.scss +8 -9
  18. package/lib/process/start-process/components/start-process-cloud.component.scss +0 -4
  19. package/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss +0 -24
  20. package/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss +0 -24
  21. package/lib/task/task-filters/components/service-task-filters/service-task-filters-cloud.component.scss +8 -8
  22. package/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.scss +0 -16
  23. package/lib/task/task-filters/components/task-filters/task-filters-cloud.component.scss +7 -11
  24. package/lib/task/task-header/components/task-header-cloud.component.scss +2 -2
  25. package/package.json +4 -4
  26. package/lib/process/process-header/components/process-header-cloud.component.scss +0 -3
@@ -0,0 +1,168 @@
1
+ /* stylelint-disable scss/no-global-function-names */
2
+ @mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
3
+ position: relative;
4
+ line-height: $line-height;
5
+ padding: 0;
6
+ overflow: hidden;
7
+ text-overflow: ellipsis;
8
+
9
+ /* stylelint-disable */
10
+ @supports (-webkit-line-clamp: 1) {
11
+ display: -webkit-box;
12
+ -webkit-box-orient: vertical;
13
+ -webkit-line-clamp: $lines;
14
+ height: calc(0.99em * #{$line-height} * #{$lines});
15
+ }
16
+
17
+ @supports not (-webkit-line-clamp: 1) {
18
+ white-space: nowrap;
19
+ width: 100%;
20
+ }
21
+
22
+ /* stylelint-enable */
23
+ }
24
+
25
+ $tile-themes: (
26
+ theme-1: (
27
+ bg: #269abc,
28
+ color: #168aac
29
+ ),
30
+ theme-2: (
31
+ bg: #7da9b0,
32
+ color: #6d99a0
33
+ ),
34
+ theme-3: (
35
+ bg: #7689ab,
36
+ color: #66799b
37
+ ),
38
+ theme-4: (
39
+ bg: #c74e3e,
40
+ color: #b73e2e
41
+ ),
42
+ theme-5: (
43
+ bg: #fab96c,
44
+ color: #eaa95c
45
+ ),
46
+ theme-6: (
47
+ bg: #759d4c,
48
+ color: #658d3c
49
+ ),
50
+ theme-7: (
51
+ bg: #b1b489,
52
+ color: #a1a479
53
+ ),
54
+ theme-8: (
55
+ bg: #a17299,
56
+ color: #916289
57
+ ),
58
+ theme-9: (
59
+ bg: #696c67,
60
+ color: #595c57
61
+ ),
62
+ theme-10: (
63
+ bg: #cabb33,
64
+ color: #baab23
65
+ )
66
+ );
67
+
68
+ adf-cloud-app-details {
69
+ .adf-app-listgrid {
70
+ padding: 8px;
71
+ display: block;
72
+
73
+ .adf-app-listgrid-item {
74
+ outline: none;
75
+ padding: 8px;
76
+ box-sizing: border-box;
77
+ flex: unset;
78
+ max-width: unset;
79
+
80
+ &-card {
81
+ @for $i from 1 through 10 {
82
+ &.theme-#{$i} {
83
+ $tile-theme: map-get($tile-themes, theme-#{$i});
84
+
85
+ background-color: map-get($tile-theme, bg);
86
+
87
+ .adf-app-listgrid-item-card-logo-icon {
88
+ color: map-get($tile-theme, color);
89
+ }
90
+ }
91
+ }
92
+
93
+ outline: none;
94
+ transition:
95
+ transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
96
+ box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
97
+ min-height: 200px;
98
+ flex-direction: column;
99
+ box-sizing: border-box;
100
+ display: flex;
101
+ padding: 0;
102
+ max-width: unset;
103
+
104
+ &:hover {
105
+ box-shadow:
106
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
107
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12),
108
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
109
+ cursor: pointer;
110
+ transform: scale(1.015);
111
+ }
112
+
113
+ &-logo {
114
+ position: absolute;
115
+ right: 20px;
116
+ top: 20px;
117
+ padding: 16px;
118
+ z-index: 9;
119
+
120
+ .adf-app-listgrid-item-card-logo-icon {
121
+ font-size: 70px;
122
+ width: 1em;
123
+ height: 1em;
124
+ }
125
+ }
126
+
127
+ &-title:has(.adf-app-listgrid-item-card-title-text) {
128
+ padding: 16px;
129
+ margin-bottom: 0;
130
+ z-index: 9999;
131
+
132
+ h1 {
133
+ color: white;
134
+ width: 80%;
135
+ font-size: var(--mat-sys-headline-small-size);
136
+ margin: 0;
137
+ line-height: normal;
138
+ white-space: nowrap;
139
+ text-overflow: ellipsis;
140
+ overflow: hidden;
141
+ }
142
+ }
143
+
144
+ &-subtitle:has(.adf-line-clamp) {
145
+ color: white;
146
+ z-index: 9999;
147
+ padding: 16px;
148
+ flex: 1 0 auto;
149
+
150
+ .adf-line-clamp {
151
+ @include adf-line-clamp(1.25, 3);
152
+ }
153
+ }
154
+
155
+ &-actions {
156
+ padding: 0 16px 16px;
157
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
158
+ min-height: 48px;
159
+ box-sizing: border-box;
160
+
161
+ &-icon {
162
+ color: #e9f1f3;
163
+ }
164
+ }
165
+ }
166
+ }
167
+ }
168
+ }
@@ -6,7 +6,6 @@
6
6
  .adf-full-screen {
7
7
  width: 100%;
8
8
  height: 100%;
9
- background-color: var(--adf-theme-background-card-color);
10
9
  }
11
10
 
12
11
  .adf-cloud-form {
@@ -37,7 +36,7 @@
37
36
  top: 0;
38
37
  left: 0;
39
38
  z-index: 100000;
40
- background-color: var(--adf-theme-mat-grey-color-a400);
39
+ background-color: var(--mat-sys-surface-container);
41
40
  display: block;
42
41
  height: 100%;
43
42
  width: 100vw;
@@ -61,13 +60,6 @@
61
60
  }
62
61
  }
63
62
 
64
- &-toolbar ::ng-deep {
65
- #{ms.$mat-toolbar} {
66
- background-color: var(--adf-theme-background-card-color-087);
67
- border-radius: 14px 14px 0 0;
68
- }
69
- }
70
-
71
63
  &-fullscreen-button {
72
64
  position: absolute;
73
65
  right: 70px;
@@ -75,7 +67,7 @@
75
67
  }
76
68
 
77
69
  &__display-name {
78
- font-size: var(--theme-subheading-2-font-size);
70
+ font-size: var(--mat-sys-title-small-size);
79
71
  opacity: 0.87;
80
72
  line-height: 1.5;
81
73
  letter-spacing: -0.4px;
@@ -87,7 +79,6 @@
87
79
  overflow: hidden;
88
80
  display: inline-block;
89
81
  vertical-align: middle;
90
- color: var(--adf-theme-foreground-text-color);
91
82
  }
92
83
 
93
84
  &__form-title {
@@ -13,7 +13,7 @@
13
13
  align-items: center;
14
14
 
15
15
  &-message {
16
- font-size: var(--theme-body-4-font-size);
16
+ font-size: var(--mat-sys-body-large-size);
17
17
  }
18
18
  }
19
19
  }
@@ -25,15 +25,6 @@
25
25
  align-items: center;
26
26
  margin-right: 8px;
27
27
  word-break: normal;
28
-
29
- .adf-attach-widget__menu-upload__button {
30
- line-height: 28px;
31
- font-size: var(--theme-caption-font-size);
32
- }
33
-
34
- button span {
35
- font-size: var(--theme-caption-font-size);
36
- }
37
28
  }
38
29
 
39
30
  &-attach-widget__input-type {
@@ -55,14 +46,13 @@
55
46
  word-break: break-all;
56
47
  padding: 0.4375em;
57
48
  border-bottom: none;
58
- background: var(--adf-theme-mat-grey-color-a200);
49
+ background: var(--mat-sys-surface-variant);
59
50
  min-height: 27px;
60
51
  margin-bottom: 12px;
61
52
 
62
53
  .adf-label {
63
54
  width: 100%;
64
- font-size: var(--theme-caption-font-size);
65
- line-height: var(--theme-headline-line-height);
55
+ font: var(--mat-sys-body-small);
66
56
  text-align: left;
67
57
  white-space: normal;
68
58
  margin-left: 8px;
@@ -71,13 +61,6 @@
71
61
  }
72
62
  }
73
63
 
74
- &-attach-widget__icon {
75
- font-size: var(--theme-adf-picture-1-font-size);
76
- height: var(--theme-adf-picture-1-font-size);
77
- width: var(--theme-adf-picture-1-font-size);
78
- line-height: calc(var(--theme-adf-picture-1-font-size) - 2px);
79
- }
80
-
81
64
  &-attach-widget__reset {
82
65
  margin-top: -2px;
83
66
  }
@@ -93,7 +76,7 @@
93
76
  &-attach-selected-file-row {
94
77
  > div:first-child {
95
78
  .adf-datatable-selected {
96
- color: var(--theme-primary-color);
79
+ color: var(--mat-sys-primary);
97
80
  padding-right: 6px;
98
81
  }
99
82
  }
@@ -1,7 +1,7 @@
1
1
  .adf-file-properties-table-container {
2
2
  .adf-file-properties-table.adf-properties-table table {
3
3
  width: 100%;
4
- border: 1px solid var(--adf-theme-foreground-text-color-007);
4
+ border: 1px solid var(--mat-sys-outline-variant);
5
5
  box-shadow: none;
6
6
 
7
7
  .adf-file {
@@ -3,7 +3,6 @@
3
3
  }
4
4
 
5
5
  .adf-preview-placeholder {
6
- background-color: var(--adf-theme-mat-grey-color-50);
7
6
  height: 100%;
8
7
  width: 100%;
9
8
  min-height: 100px;
@@ -7,7 +7,6 @@
7
7
  }
8
8
 
9
9
  &-preview {
10
- color: var(--adf-theme-foreground-secondary-text-color);
11
10
  word-break: break-all;
12
11
  }
13
12
  }
@@ -1,19 +1,10 @@
1
1
  .adf-display-rich-text-widget {
2
2
  pre {
3
3
  min-height: 100px;
4
- font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
5
- color: #41314e;
6
- line-height: 1.6em;
7
- font-size: 12px;
8
- background: #f8f7fa;
9
- border: 1px solid #f1f1f4;
10
- box-shadow: none;
11
4
  white-space: pre;
12
5
  word-wrap: normal;
13
6
  overflow-x: auto;
14
7
  resize: vertical;
15
- border-radius: 3px;
16
- outline: none;
17
8
  width: 100%;
18
9
  }
19
10
  }
@@ -9,10 +9,6 @@
9
9
  width: 100%;
10
10
  }
11
11
 
12
- .adf-select-filter {
13
- font-size: var(--theme-body-1-font-size);
14
- }
15
-
16
12
  &-select {
17
13
  width: 100%;
18
14
  }
@@ -6,7 +6,7 @@ adf-properties-viewer-widget {
6
6
  display: block;
7
7
  height: 100%;
8
8
  width: 100%;
9
- border: 1px solid var(--adf-theme-foreground-text-color-007);
9
+ border: 1px solid var(--mat-sys-outline-variant);
10
10
  border-radius: 6px;
11
11
 
12
12
  .adf-properties-viewer-wrapper-loading {
@@ -1,13 +1,4 @@
1
1
  .adf {
2
- &-radio-buttons-widget-cloud {
3
- .adf-label {
4
- font-size: var(--adf-radio-buttons-font-size, var(--adf-form-label-font-size, var(--theme-caption-font-size)));
5
- font-weight: var(--adf-radio-buttons-font-weight, var(--adf-form-label-font-weight, var(--theme-font-weight)));
6
- color: var(--adf-radio-buttons-color, var(--adf-form-label-color, var(--adf-theme-foreground-secondary-text-color)));
7
- line-height: normal;
8
- }
9
- }
10
-
11
2
  &-radio-button-container {
12
3
  display: flex;
13
4
  flex-direction: column;
@@ -10,10 +10,8 @@
10
10
 
11
11
  .adf-group-short-name {
12
12
  margin-right: 20px;
13
- background: var(--theme-primary-color);
14
13
  width: 40px;
15
14
  height: 40px;
16
- box-shadow: none;
17
15
  }
18
16
  }
19
17
  }
@@ -22,24 +20,15 @@
22
20
  width: 100%;
23
21
 
24
22
  &-title {
25
- color: var(--adf-theme-foreground-secondary-text-color);
23
+ color: var(--mat-sys-on-surface-variant);
26
24
 
27
25
  &--focus {
28
- color: var(--theme-primary-color);
26
+ color: var(--mat-sys-primary);
29
27
  }
30
28
  }
31
29
 
32
- &-option-active:not(&:disabled) {
33
- color: var(--adf-theme-foreground-text-color);
34
- }
35
-
36
- &-option-not-active:not(&:active) {
37
- background: inherit;
38
- color: var(--adf-theme-foreground-secondary-text-color);
39
- }
40
-
41
30
  &-error {
42
- color: var(--theme-warn-color);
31
+ color: var(--mat-sys-error);
43
32
  margin-top: -10px;
44
33
  position: absolute;
45
34
  height: 20px;
@@ -2,16 +2,11 @@
2
2
  &-people-cloud {
3
3
  width: 100%;
4
4
 
5
- &-option-not-active:not(&:active) {
6
- background: inherit;
7
- color: var(--adf-theme-foreground-secondary-text-color);
8
- }
9
-
10
5
  &-title {
11
- color: var(--adf-theme-foreground-secondary-text-color);
6
+ color: var(--mat-sys-on-surface-variant);
12
7
 
13
8
  &--focus {
14
- color: var(--theme-primary-color);
9
+ color: var(--mat-sys-primary);
15
10
  }
16
11
  }
17
12
  }
@@ -21,14 +16,6 @@
21
16
  padding: 10px 0;
22
17
  }
23
18
 
24
- &-people-cloud-option-active:not(&:disabled) {
25
- color: var(--adf-theme-foreground-text-color);
26
- }
27
-
28
- &-people-cloud-option-not-active:not(&:active) {
29
- color: var(--adf-theme-foreground-secondary-text-color);
30
- }
31
-
32
19
  &-people-cloud-row {
33
20
  display: flex;
34
21
  align-items: center;
@@ -36,7 +23,7 @@
36
23
  }
37
24
 
38
25
  &-people-cloud-pic {
39
- background: var(--theme-primary-color);
26
+ background: var(--mat-sys-primary);
40
27
  display: flex;
41
28
  justify-content: center;
42
29
  align-items: center;
@@ -58,10 +45,4 @@
58
45
  width: auto;
59
46
  }
60
47
  }
61
-
62
- &-error,
63
- &-error-text,
64
- &-error-icon {
65
- color: var(--theme-warn-color);
66
- }
67
48
  }
@@ -15,16 +15,8 @@
15
15
  .adf-error-text {
16
16
  padding-right: 8px;
17
17
  height: 16px;
18
- font-size: var(--theme-caption-font-size);
19
- line-height: 1.33;
20
- color: var(--theme-warn-color);
21
18
  width: auto;
22
19
  }
23
-
24
- .adf-error-icon {
25
- font-size: var(--theme-subheading-2-font-size);
26
- color: var(--theme-warn-color);
27
- }
28
20
  }
29
21
 
30
22
  .adf {
@@ -64,24 +56,9 @@
64
56
  &-header {
65
57
  height: 48px;
66
58
 
67
- &__title {
68
- color: var(--adf-theme-foreground-text-color);
69
- }
70
-
71
59
  &__description {
72
- color: var(--adf-theme-foreground-secondary-text-color);
73
60
  place-content: center space-between;
74
61
  }
75
62
  }
76
-
77
- &-content {
78
- &__text-label {
79
- color: var(--adf-theme-foreground-secondary-text-color);
80
- }
81
-
82
- &__select-label {
83
- color: var(--adf-theme-foreground-secondary-text-color);
84
- }
85
- }
86
63
  }
87
64
  }
@@ -1,18 +1,17 @@
1
1
  .adf-process-filters {
2
- margin-right: calc(-1 * var(--adf-theme-spacing));
2
+ margin-right: -16px;
3
3
 
4
4
  &__entry {
5
- font-size: var(--theme-body-1-font-size);
6
- color: var(--adf-theme-foreground-text-color-054);
5
+ color: var(--mat-sys-on-surface-variant);
7
6
  display: flex;
8
7
  align-items: center;
9
8
  justify-content: space-between;
10
9
  flex: 1;
11
10
  height: 100%;
12
- gap: var(--adf-theme-spacing);
11
+ gap: 16px;
13
12
 
14
13
  &:hover {
15
- color: var(--theme-primary-color);
14
+ color: var(--mat-sys-primary);
16
15
  }
17
16
 
18
17
  &-counter {
@@ -20,16 +19,16 @@
20
19
  border-radius: 15px;
21
20
 
22
21
  &.adf-active {
23
- background-color: var(--theme-accent-color);
24
- color: var(--theme-accent-color-default-contrast);
25
- font-size: smaller;
22
+ background-color: var(--mat-sys-secondary);
23
+ color: var(--mat-sys-on-secondary);
24
+ font: var(--mat-sys-body-small);
26
25
  }
27
26
  }
28
27
  }
29
28
 
30
29
  .adf-active {
31
30
  .adf-process-filters__entry {
32
- color: var(--theme-primary-color);
31
+ color: var(--mat-sys-primary);
33
32
  }
34
33
  }
35
34
  }
@@ -1,9 +1,5 @@
1
1
  .adf {
2
2
  &-start-process {
3
- .adf-start-process-input-label {
4
- color: var(--adf-theme-mat-grey-color-a200-dark);
5
- }
6
-
7
3
  &-cloud-actions {
8
4
  display: flex;
9
5
  justify-content: flex-end;
@@ -1,7 +1,6 @@
1
1
  @use '../../../../../flex' as flex;
2
2
 
3
3
  .adf-edit-task-filter-checkbox {
4
- font-size: var(--theme-subheading-2-font-size);
5
4
  padding-top: 10px;
6
5
  text-align: center;
7
6
  flex: 1 23%;
@@ -22,16 +21,8 @@
22
21
  .adf-error-text {
23
22
  padding-right: 8px;
24
23
  height: 16px;
25
- font-size: 10px;
26
- line-height: 1.33;
27
- color: var(--theme-warn-color);
28
24
  width: auto;
29
25
  }
30
-
31
- .adf-error-icon {
32
- font-size: 16px;
33
- color: var(--theme-warn-color);
34
- }
35
26
  }
36
27
 
37
28
  .adf-edit-task-filter-dateRange mat-grid-list {
@@ -74,24 +65,9 @@
74
65
  &-header {
75
66
  height: 48px;
76
67
 
77
- &__title {
78
- color: var(--adf-theme-foreground-text-color);
79
- }
80
-
81
68
  &__description {
82
- color: var(--adf-theme-foreground-secondary-text-color);
83
69
  place-content: center space-between;
84
70
  }
85
71
  }
86
-
87
- &-content {
88
- &__text-label {
89
- color: var(--adf-theme-foreground-secondary-text-color);
90
- }
91
-
92
- &__select-label {
93
- color: var(--adf-theme-foreground-secondary-text-color);
94
- }
95
- }
96
72
  }
97
73
  }
@@ -1,7 +1,6 @@
1
1
  @use '../../../../../flex' as flex;
2
2
 
3
3
  .adf-edit-task-filter-checkbox {
4
- font-size: var(--theme-subheading-2-font-size);
5
4
  padding-top: 10px;
6
5
  text-align: center;
7
6
  flex: 1 23%;
@@ -22,16 +21,8 @@
22
21
  .adf-error-text {
23
22
  padding-right: 8px;
24
23
  height: 16px;
25
- font-size: 10px;
26
- line-height: 1.33;
27
- color: var(--theme-warn-color);
28
24
  width: auto;
29
25
  }
30
-
31
- .adf-error-icon {
32
- font-size: 16px;
33
- color: var(--theme-warn-color);
34
- }
35
26
  }
36
27
 
37
28
  .adf-edit-task-filter-dateRange mat-grid-list {
@@ -74,24 +65,9 @@
74
65
  &-header {
75
66
  height: 48px;
76
67
 
77
- &__title {
78
- color: var(--adf-theme-foreground-text-color);
79
- }
80
-
81
68
  &__description {
82
- color: var(--adf-theme-foreground-secondary-text-color);
83
69
  place-content: center space-between;
84
70
  }
85
71
  }
86
-
87
- &-content {
88
- &__text-label {
89
- color: var(--adf-theme-foreground-secondary-text-color);
90
- }
91
-
92
- &__select-label {
93
- color: var(--adf-theme-foreground-secondary-text-color);
94
- }
95
- }
96
72
  }
97
73
  }