@zambon-dev/shared 3.0.0 → 3.0.1
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/CHANGELOG.md +23 -9
- package/README.md +14 -16
- package/fesm2022/zambon-dev-shared.mjs +73 -122
- package/fesm2022/zambon-dev-shared.mjs.map +1 -1
- package/i18n/language-selector/en.json +1 -1
- package/i18n/language-selector/pt.json +1 -1
- package/i18n/login/en.json +1 -1
- package/i18n/login/pt.json +1 -1
- package/i18n/operations-history/en.json +1 -1
- package/i18n/operations-history/pt.json +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/styles/components/button.scss +82 -72
- package/styles/components/card.scss +11 -11
- package/styles/components/dropdown-static.scss +26 -26
- package/styles/components/input-group.scss +33 -31
- package/styles/components/input.scss +70 -67
- package/styles/components/label.scss +2 -2
- package/styles/components/row.scss +45 -45
- package/styles/mixins/background.scss +21 -19
- package/styles/variables.scss +26 -26
package/i18n/login/en.json
CHANGED
package/i18n/login/pt.json
CHANGED
package/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from './lib/auth';
|
|
2
2
|
export * from './lib/components';
|
|
3
3
|
export { ExternalContentComponent, externalContentRoutes } from './lib/features/external-content';
|
|
4
|
-
export { OperationsHistoryChildListComponent, OperationsHistoryModalComponent } from './lib/features/operations-history';
|
|
4
|
+
export { OperationsHistoryChildListComponent, OperationsHistoryModalComponent, } from './lib/features/operations-history';
|
|
5
5
|
export { ServicesHistoryChildListComponent, ServicesHistoryViewComponent } from './lib/features/services-history';
|
|
6
6
|
export * from './lib/i18n';
|
|
7
7
|
export * from './lib/layouts';
|
package/package.json
CHANGED
|
@@ -1,90 +1,100 @@
|
|
|
1
|
-
input[type=button],
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
input[type='button'],
|
|
2
|
+
input[type='reset'],
|
|
3
|
+
input[type='submit'],
|
|
4
|
+
button,
|
|
5
|
+
a {
|
|
6
|
+
&.btn {
|
|
7
|
+
@apply relative px-3 py-1.5 inline-block text-center rounded select-none;
|
|
8
|
+
@apply bg-slate-700 text-white;
|
|
9
|
+
@apply transition-all;
|
|
10
|
+
|
|
11
|
+
@apply focus:ring-4 focus:ring-slate-600/30 focus:ring-opacity-80;
|
|
12
|
+
@apply focus:bg-slate-800 hover:bg-slate-800;
|
|
13
|
+
@apply active:bg-slate-900;
|
|
14
|
+
|
|
15
|
+
i:not(:last-child) {
|
|
16
|
+
@apply mr-2;
|
|
17
|
+
}
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
19
|
+
&.disabled,
|
|
20
|
+
&:disabled {
|
|
21
|
+
@apply pointer-events-none opacity-[.60] ring-0;
|
|
22
|
+
}
|
|
18
23
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
24
|
+
&.error {
|
|
25
|
+
@apply bg-red-700 focus:ring-red-600/30;
|
|
26
|
+
@apply focus:bg-red-800 hover:bg-red-800;
|
|
27
|
+
@apply active:bg-red-900;
|
|
23
28
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
i:before {
|
|
30
|
+
@apply content-['\f00d'];
|
|
31
|
+
}
|
|
32
|
+
}
|
|
28
33
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
34
|
+
&.success {
|
|
35
|
+
@apply bg-green-700 ring-4 ring-green-600/30;
|
|
36
|
+
@apply pointer-events-none opacity-[.60];
|
|
32
37
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
38
|
+
i:before {
|
|
39
|
+
@apply content-['\f00c'];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
37
42
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
&.loading {
|
|
44
|
+
@apply pointer-events-none opacity-[.60] ring-0 pl-8;
|
|
45
|
+
@apply transition-[margin-left] duration-200 ease-in-out;
|
|
41
46
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
&:before {
|
|
48
|
+
@apply content-[''] absolute left-2 top-0 bg-center bg-contain bg-no-repeat w-5 h-full animate-spin text-white;
|
|
49
|
+
@apply transition-opacity duration-200 ease-in-out;
|
|
50
|
+
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"%3E%3Ccircle style="opacity:.25" cx="12" cy="12" r="10" stroke="white" stroke-width="4"%3E%3C/circle%3E%3Cpath style="opacity:.75" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"%3E%3C/path%3E%3C/svg%3E');
|
|
51
|
+
}
|
|
47
52
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
53
|
+
i {
|
|
54
|
+
@apply invisible;
|
|
55
|
+
}
|
|
52
56
|
}
|
|
57
|
+
}
|
|
53
58
|
}
|
|
54
59
|
|
|
55
60
|
@mixin button($color) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
$ring: $i + '00/30';
|
|
73
|
-
@if $i < 5 {
|
|
74
|
-
$ring: '400/20';
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@apply #{'focus:ring-' + $color + '-' + $ring};
|
|
78
|
-
@apply #{'focus:bg-' + $color + '-' + ($i+1) + '00'};
|
|
79
|
-
@apply #{'hover:bg-' + $color + '-' + ($i+1) + '00'};
|
|
80
|
-
@apply #{'active:bg-' + $color + '-' + ($i+2) + '00'};
|
|
81
|
-
}
|
|
61
|
+
input[type='button'],
|
|
62
|
+
input[type='reset'],
|
|
63
|
+
input[type='submit'],
|
|
64
|
+
button,
|
|
65
|
+
a {
|
|
66
|
+
&.btn {
|
|
67
|
+
@for $i from 1 through 7 {
|
|
68
|
+
&.#{$color + '-' + $i + '00'} {
|
|
69
|
+
@if $i > 4 {
|
|
70
|
+
@apply text-white;
|
|
71
|
+
} @else {
|
|
72
|
+
@apply text-black;
|
|
73
|
+
|
|
74
|
+
&.loading:before {
|
|
75
|
+
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"%3E%3Ccircle style="opacity:.25" cx="12" cy="12" r="10" stroke="black" stroke-width="4"%3E%3C/circle%3E%3Cpath style="opacity:.75" fill="black" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"%3E%3C/path%3E%3C/svg%3E');
|
|
82
76
|
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@apply #{'bg-' + $color + '-' + $i + '00'};
|
|
80
|
+
|
|
81
|
+
$ring: $i + '00/30';
|
|
82
|
+
@if $i < 5 {
|
|
83
|
+
$ring: '400/20';
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@apply #{'focus:ring-' + $color + '-' + $ring};
|
|
87
|
+
@apply #{'focus:bg-' + $color + '-' + ($i+1) + '00'};
|
|
88
|
+
@apply #{'hover:bg-' + $color + '-' + ($i+1) + '00'};
|
|
89
|
+
@apply #{'active:bg-' + $color + '-' + ($i+2) + '00'};
|
|
83
90
|
}
|
|
91
|
+
}
|
|
84
92
|
}
|
|
93
|
+
}
|
|
85
94
|
}
|
|
86
95
|
|
|
87
|
-
$colors: 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald',
|
|
96
|
+
$colors: 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald',
|
|
97
|
+
'teal', 'cyan', 'sky', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'primary';
|
|
88
98
|
@each $color in $colors {
|
|
89
|
-
|
|
90
|
-
}
|
|
99
|
+
@include button($color);
|
|
100
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
.card {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
.title {
|
|
7
|
-
@apply text-lg font-semibold absolute -top-4 left-2 px-2 bg-white;
|
|
8
|
-
}
|
|
2
|
+
@apply border rounded-lg relative mt-4 pt-3 px-2 pb-2;
|
|
3
|
+
@apply bg-white/80 border-gray-300/90;
|
|
4
|
+
@apply grid gap-3;
|
|
9
5
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
.title {
|
|
7
|
+
@apply text-lg font-semibold absolute -top-4 left-2 px-2 bg-white;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.input-group:not(:first-child) {
|
|
11
|
+
@apply mt-0;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
.dropdown {
|
|
2
|
-
|
|
2
|
+
@apply relative;
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
.btn {
|
|
5
|
+
@apply bg-neutral-600/60 text-white border border-neutral-900/40 backdrop-blur-md;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
@apply focus:ring-neutral-600/30;
|
|
8
|
+
@apply focus:bg-neutral-600/70 hover:bg-neutral-600/70;
|
|
9
|
+
@apply active:bg-neutral-600/80;
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
11
|
+
&:after {
|
|
12
|
+
@apply content-[''] inline-block ml-1 align-middle;
|
|
13
|
+
@apply border-x-[.3em] border-t-[.3em] border-solid border-x-white/0;
|
|
15
14
|
}
|
|
15
|
+
}
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
&.show ul {
|
|
18
|
+
@apply block;
|
|
19
|
+
}
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
&.right ul {
|
|
22
|
+
@apply right-0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
ul {
|
|
26
|
+
@apply absolute hidden py-1 rounded shadow;
|
|
27
|
+
@apply bg-white/95 border border-neutral-400 backdrop-blur-md shadow-md;
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
29
|
+
.dropdown-item {
|
|
30
|
+
@apply block p-2 cursor-pointer whitespace-nowrap select-none;
|
|
31
|
+
@apply focus:bg-neutral-200/80 hover:bg-neutral-200/80;
|
|
32
|
+
@apply active:bg-slate-400 active:text-white;
|
|
34
33
|
}
|
|
35
|
-
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -1,42 +1,44 @@
|
|
|
1
1
|
.input-group {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
&.inline {
|
|
3
|
+
@apply flex flex-row-reverse flex-wrap items-stretch mb-3;
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
.input-group-text {
|
|
6
|
+
@apply py-1.5 px-3 rounded-l flex flex-row items-center whitespace-nowrap select-none;
|
|
7
|
+
@apply bg-slate-500 text-gray-50 border-blue-400;
|
|
8
|
+
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
input[type='text'].form-input,
|
|
11
|
+
input[type='password'].form-input {
|
|
12
|
+
@apply mt-0 rounded-l-none -ml-1;
|
|
13
|
+
@apply w-1 flex-grow;
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
}
|
|
15
|
+
&.ng-touched.ng-invalid {
|
|
16
|
+
~ .input-group-text {
|
|
17
|
+
@apply bg-red-600;
|
|
19
18
|
}
|
|
19
|
+
}
|
|
20
20
|
}
|
|
21
|
+
}
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
&.checkbox {
|
|
24
|
+
@apply pt-[1.85rem] text-center;
|
|
25
|
+
}
|
|
25
26
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
&:not(:first-child) {
|
|
28
|
+
@apply mt-3;
|
|
29
|
+
}
|
|
29
30
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
input[type='text'].form-input,
|
|
32
|
+
input[type='password'].form-input {
|
|
33
|
+
&.ng-touched.ng-invalid {
|
|
34
|
+
~ .validations {
|
|
35
|
+
@apply block;
|
|
36
|
+
}
|
|
36
37
|
}
|
|
38
|
+
}
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
40
|
+
.validations {
|
|
41
|
+
@apply hidden basis-full mt-1;
|
|
42
|
+
@apply text-red-600 text-sm;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -1,96 +1,99 @@
|
|
|
1
1
|
.form-input {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
@apply border-gray-400;
|
|
3
|
+
@apply focus:border-gray-400 focus:ring-4 focus:ring-primary-400/30 focus:ring-opacity-80;
|
|
4
|
+
@apply transition-colors transition-shadow;
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
@apply invalid:border-red-400;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
@apply disabled:bg-slate-100;
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
&.ng-invalid.ng-touched {
|
|
11
|
+
@apply border-red-600;
|
|
12
|
+
}
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
input[type=text],
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
input[type='text'],
|
|
16
|
+
input[type='number'],
|
|
17
|
+
input[type='password'],
|
|
18
|
+
textarea {
|
|
19
|
+
&.form-input {
|
|
20
|
+
@apply mt-1 block w-full rounded-md shadow-sm;
|
|
18
21
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
22
|
+
&.ng-invalid.ng-touched {
|
|
23
|
+
@apply pr-9;
|
|
24
|
+
@apply focus:ring-red-400/30;
|
|
25
|
+
@apply bg-no-repeat bg-[right_0.5625rem_center] bg-[length:1.125rem_1.125rem];
|
|
26
|
+
background-image: url("data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
|
25
27
|
}
|
|
28
|
+
}
|
|
26
29
|
}
|
|
27
30
|
|
|
28
|
-
input[type=checkbox].form-input {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
input[type='checkbox'].form-input {
|
|
32
|
+
@apply p-0.5 h-5 w-5 rounded relative;
|
|
33
|
+
@apply inline-flex flex-row justify-end;
|
|
34
|
+
@apply appearance-none bg-white;
|
|
32
35
|
|
|
33
|
-
|
|
36
|
+
@apply disabled:pointer-events-none disabled:opacity-50;
|
|
34
37
|
|
|
35
|
-
|
|
36
|
-
|
|
38
|
+
&:not(.switch) {
|
|
39
|
+
@apply border-2 shadow-md focus:ring focus:shadow-none;
|
|
37
40
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
41
|
+
&:before {
|
|
42
|
+
@apply content-[''] rounded;
|
|
43
|
+
@apply flex items-center justify-center absolute inset-0 p-1;
|
|
44
|
+
font-family: 'Font Awesome 6 Free';
|
|
45
|
+
font-weight: 900;
|
|
44
46
|
}
|
|
47
|
+
}
|
|
45
48
|
|
|
46
|
-
|
|
47
|
-
|
|
49
|
+
&:checked {
|
|
50
|
+
@apply bg-none bg-primary-400 border-primary-400/80;
|
|
48
51
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&:disabled {
|
|
56
|
-
~ label {
|
|
57
|
-
@apply opacity-50;
|
|
58
|
-
}
|
|
52
|
+
&:before {
|
|
53
|
+
@apply content-['\f00c'];
|
|
54
|
+
@apply text-white;
|
|
59
55
|
}
|
|
56
|
+
}
|
|
60
57
|
|
|
58
|
+
&:disabled {
|
|
61
59
|
~ label {
|
|
62
|
-
|
|
60
|
+
@apply opacity-50;
|
|
63
61
|
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
~ label {
|
|
65
|
+
@apply ml-2 select-none;
|
|
66
|
+
}
|
|
64
67
|
}
|
|
65
68
|
|
|
66
|
-
input[type=checkbox].form-input.switch {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
input[type='checkbox'].form-input.switch {
|
|
70
|
+
@apply w-10 rounded-[2rem];
|
|
71
|
+
@apply appearance-none bg-white;
|
|
69
72
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
&:before {
|
|
74
|
+
@apply content-[''] h-full aspect-square rounded-full;
|
|
75
|
+
@apply bg-slate-500/60;
|
|
76
|
+
}
|
|
74
77
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
&:after {
|
|
79
|
+
@apply content-[''] grow;
|
|
80
|
+
transition: flex-grow 0.15s ease-in-out;
|
|
81
|
+
}
|
|
79
82
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
+
&:focus:before {
|
|
84
|
+
@apply bg-slate-500/60;
|
|
85
|
+
}
|
|
83
86
|
|
|
84
|
-
|
|
85
|
-
|
|
87
|
+
&:checked {
|
|
88
|
+
@apply bg-none bg-primary-400 border-primary-400/80;
|
|
86
89
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
90
|
+
&:before {
|
|
91
|
+
@apply content-[''];
|
|
92
|
+
@apply bg-white;
|
|
93
|
+
}
|
|
91
94
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
+
&:after {
|
|
96
|
+
@apply grow-0;
|
|
95
97
|
}
|
|
96
|
-
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
.form-label {
|
|
2
|
-
|
|
3
|
-
}
|
|
2
|
+
@apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
|
|
3
|
+
}
|