@dev-tcloud/tcloud-ui 5.0.2-beta.1 → 5.0.2

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 (42) hide show
  1. package/README.md +106 -106
  2. package/datepicker/js/_info.txt +3 -3
  3. package/fesm2022/dev-tcloud-tcloud-ui.mjs +74 -74
  4. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  5. package/lib/_modules/tcloud-ui-datepicker/tcloud-ui-datepicker.component.d.ts +1 -1
  6. package/package.json +1 -1
  7. package/scss/components/custom/el-copy.scss +17 -17
  8. package/scss/components/custom/loading-transitions.scss +27 -27
  9. package/scss/components/custom/loading.scss +2 -2
  10. package/scss/components/custom/tab-menu.scss +58 -58
  11. package/scss/components/custom/table.scss +98 -98
  12. package/scss/components/custom/tooltip.scss +89 -89
  13. package/scss/components/custom/ui-datepicker.scss +15 -15
  14. package/scss/components/custom/validation.scss +7 -7
  15. package/scss/components/custom/variables.scss +33 -90
  16. package/scss/components/styles.scss +8 -8
  17. package/scss/tcloud/custom/alerts.scss +37 -37
  18. package/scss/tcloud/custom/buttons.scss +1003 -1004
  19. package/scss/tcloud/custom/card.scss +51 -51
  20. package/scss/tcloud/custom/colors.scss +97 -97
  21. package/scss/tcloud/custom/forms.scss +81 -83
  22. package/scss/tcloud/custom/layout.scss +5 -5
  23. package/scss/tcloud/custom/left-navigation.scss +47 -47
  24. package/scss/tcloud/custom/mixins.scss +318 -318
  25. package/scss/tcloud/custom/tcloud-prime.scss +4519 -4519
  26. package/scss/tcloud/custom/tcloud-standard.scss +121 -121
  27. package/scss/tcloud/custom/text.scss +57 -57
  28. package/scss/tcloud/custom/top-navigation.scss +59 -59
  29. package/scss/tcloud/custom/variables.scss +60 -60
  30. package/scss/tcloud/disaster-recovery/colors.scss +14 -14
  31. package/scss/tcloud/disaster-recovery/layout.scss +13 -13
  32. package/scss/tcloud/disaster-recovery/styles.scss +1 -1
  33. package/scss/tcloud/prime/cards-products.scss +331 -331
  34. package/scss/tcloud/prime/left-navigation.scss +327 -327
  35. package/scss/tcloud/prime/styles.scss +2 -2
  36. package/scss/tcloud/prime/tcloud-prime.scss +3872 -3872
  37. package/scss/tcloud/standard/left-navigation.scss +47 -47
  38. package/scss/tcloud/standard/styles.scss +2 -2
  39. package/scss/tcloud/standard/tcloud-standard.scss +125 -125
  40. package/scss/tcloud/standard/top-navigation.scss +61 -61
  41. package/scss/tcloud/styles.scss +19 -19
  42. package/scss/tcloud/tcloud-ui.scss +7 -7
@@ -37,7 +37,7 @@ export declare class TCloudUiDatepickerComponent implements OnInit {
37
37
  clearDate(): void;
38
38
  start_datepicker(): void;
39
39
  toSetDefaultDate(date: string | string[]): void;
40
- convertDates(arrayDeDatas: any[]): any[][] | Date[];
40
+ convertDates(arrayDeDatas: any[]): Date[] | any[][];
41
41
  sortDatesDescending(arrayDeDatas: any[]): any[];
42
42
  sortDatesAscending(arrayDeDatas: any[]): any[];
43
43
  toSelectedDate(detail: any): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-tcloud/tcloud-ui",
3
- "version": "5.0.2-beta.1",
3
+ "version": "5.0.2",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^19.2.14",
6
6
  "@angular/core": "^19.2.14"
@@ -1,18 +1,18 @@
1
- .tcloud-ui-el-copy{
2
- color: inherit;
3
- &:hover{
4
- opacity: 0.6;
5
- }
6
- }
7
-
8
- .tcloud-ui-el-input-copy{
9
- position: relative;
10
- left: -20px;
11
- }
12
-
13
- .tcloud-ui-el-input-copy-tc-form-control{
14
- position: relative;
15
- left: -13px;
16
- float: right;
17
- top: -25px;
1
+ .tcloud-ui-el-copy{
2
+ color: inherit;
3
+ &:hover{
4
+ opacity: 0.6;
5
+ }
6
+ }
7
+
8
+ .tcloud-ui-el-input-copy{
9
+ position: relative;
10
+ left: -20px;
11
+ }
12
+
13
+ .tcloud-ui-el-input-copy-tc-form-control{
14
+ position: relative;
15
+ left: -13px;
16
+ float: right;
17
+ top: -25px;
18
18
  }
@@ -1,28 +1,28 @@
1
- .tcloud-ui-start-loading{
2
- display: block !important;
3
- position: fixed;
4
- width: 100%;
5
- height: 100%;
6
- background-color: #cccc;
7
- z-index: 4090;
8
- top: 0;
9
- left: 0;
10
- cursor: progress;
11
-
12
- .tc-loading-icon{
13
- text-align: center;
14
- position: relative;
15
- top: 50%;
16
- transform: translateY(-50%);
17
-
18
- i{
19
- font-size: 55px;
20
- opacity: 0.4;
21
- }
22
- }
23
- }
24
-
25
- body.tcloud-ui-body-loading-transitions{
26
- position: relative;
27
- overflow: hidden;
1
+ .tcloud-ui-start-loading{
2
+ display: block !important;
3
+ position: fixed;
4
+ width: 100%;
5
+ height: 100%;
6
+ background-color: #cccc;
7
+ z-index: 4090;
8
+ top: 0;
9
+ left: 0;
10
+ cursor: progress;
11
+
12
+ .tc-loading-icon{
13
+ text-align: center;
14
+ position: relative;
15
+ top: 50%;
16
+ transform: translateY(-50%);
17
+
18
+ i{
19
+ font-size: 55px;
20
+ opacity: 0.4;
21
+ }
22
+ }
23
+ }
24
+
25
+ body.tcloud-ui-body-loading-transitions{
26
+ position: relative;
27
+ overflow: hidden;
28
28
  }
@@ -1,3 +1,3 @@
1
- .tc-content-fixed-on-loading{
2
-
1
+ .tc-content-fixed-on-loading{
2
+
3
3
  }
@@ -1,58 +1,58 @@
1
- .tcloud-ui-tab-block-full{
2
- tcloud-ui-tab-head{
3
- tcloud-ui-tab-title, tcloud-ui-tab-subtitle {
4
- flex-grow: 1;
5
- button {
6
- min-width: 100% !important;
7
- }
8
- .tab-title, .tab-subtitle{
9
- opacity: 0.8;
10
- }
11
- .tab-title-active,
12
- .tab-title:hover,
13
- .tab-title:focus,
14
- .tab-subtitle:hover,
15
- .tab-subtitle:focus{
16
- opacity: 1 !important;
17
- }
18
- }
19
- }
20
- }
21
-
22
- .tc-menu {
23
- &:has(> tcloud-ui-tab-title){
24
- border-radius: 10px;
25
- }
26
- &:not(.tab-subtitle-line-bottom){
27
- .bottom-line{
28
- height: 0px !important;
29
- }
30
- }
31
- }
32
-
33
- .bottom-line{
34
- background-color: transparent;
35
- height: 4px;
36
- }
37
-
38
-
39
- tcloud-ui-tab-subtitle,
40
- tcloud-ui-tab-title{
41
- .tab-subtitle-active + .bottom-line-hover,
42
- .tab-title-active + .bottom-line-hover {
43
- background-color: var(--c-primary-500) !important;
44
- border-radius: 5px;
45
- }
46
-
47
- &:hover{
48
- .bottom-line-hover{
49
- background-color: var(--c-primary-500) !important;
50
- border-radius: 5px;
51
- transition: 1s ease-in-out;
52
- }
53
- }
54
- }
55
-
56
- tcloud-ui-tab-subtitle {
57
- margin: 0px 10px;
58
- }
1
+ .tcloud-ui-tab-block-full{
2
+ tcloud-ui-tab-head{
3
+ tcloud-ui-tab-title, tcloud-ui-tab-subtitle {
4
+ flex-grow: 1;
5
+ button {
6
+ min-width: 100% !important;
7
+ }
8
+ .tab-title, .tab-subtitle{
9
+ opacity: 0.8;
10
+ }
11
+ .tab-title-active,
12
+ .tab-title:hover,
13
+ .tab-title:focus,
14
+ .tab-subtitle:hover,
15
+ .tab-subtitle:focus{
16
+ opacity: 1 !important;
17
+ }
18
+ }
19
+ }
20
+ }
21
+
22
+ .tc-menu {
23
+ &:has(> tcloud-ui-tab-title){
24
+ border-radius: 10px;
25
+ }
26
+ &:not(.tab-subtitle-line-bottom){
27
+ .bottom-line{
28
+ height: 0px !important;
29
+ }
30
+ }
31
+ }
32
+
33
+ .bottom-line{
34
+ background-color: transparent;
35
+ height: 4px;
36
+ }
37
+
38
+
39
+ tcloud-ui-tab-subtitle,
40
+ tcloud-ui-tab-title{
41
+ .tab-subtitle-active + .bottom-line-hover,
42
+ .tab-title-active + .bottom-line-hover {
43
+ background-color: var(--tc-primary) !important;
44
+ border-radius: 5px;
45
+ }
46
+
47
+ &:hover{
48
+ .bottom-line-hover{
49
+ background-color: var(--tc-primary) !important;
50
+ border-radius: 5px;
51
+ transition: 1s ease-in-out;
52
+ }
53
+ }
54
+ }
55
+
56
+ tcloud-ui-tab-subtitle {
57
+ margin: 0px 10px;
58
+ }
@@ -1,99 +1,99 @@
1
- .tc-table{
2
- width: 100%;
3
- font-size: 12px;
4
- line-height: 1.5;
5
-
6
- .nowrap{
7
- white-space: nowrap;
8
- }
9
-
10
- td, th{
11
- vertical-align: middle;
12
- }
13
-
14
- th{
15
- font-weight: 400;
16
- line-height: 1.5;
17
- text-align: center;
18
- border-collapse: collapse;
19
- border: 1px solid #FFF;
20
- border-left: none;
21
- padding: 9px 5px;
22
- background-color: var(--tc-gray-500);
23
- color: #FFF;
24
- }
25
-
26
- th:first-child{
27
- border-radius: 5px 0 0 0;
28
- }
29
-
30
- th:last-child{
31
- border-radius: 0 5px 0 0;
32
- }
33
-
34
- tbody{
35
- td {
36
- text-align: center;
37
- border-collapse: collapse;
38
- border: 1px solid #FFF;
39
- padding: 9px 5px;
40
- }
41
- }
42
-
43
- }
44
-
45
-
46
- /* TABELA RESPONSIVA */
47
- @media screen and (max-width: 900px) {
48
- table.tc-table-responsive {
49
- border: 0;
50
- display: grid !important;
51
- }
52
- table.tc-table-responsive caption {
53
- font-size: 1.3em;
54
- }
55
- table.tc-table-responsive thead {
56
- border: none;
57
- clip: rect(0 0 0 0);
58
- height: 1px;
59
- margin: -1px;
60
- overflow: hidden;
61
- padding: 0;
62
- position: absolute;
63
- width: 1px;
64
- }
65
- table.tc-table-responsive th {
66
- text-align: left !important;
67
- }
68
- table.tc-table-responsive tr {
69
- border-bottom: 3px solid #ddd;
70
- display: block;
71
- margin-bottom: .625em;
72
- }
73
- table.tc-table-responsive td {
74
- border-bottom: 1px solid #ddd;
75
- display: block;
76
- font-size: .8em;
77
- text-align: right !important;
78
- }
79
- table.tc-table-responsive td::before {
80
- content: attr(tc-data-label);
81
- float: left;
82
- font-weight: bold;
83
- text-transform: uppercase;
84
- }
85
- table.tc-table-responsive td:last-child {
86
- border-bottom: 0;
87
- }
88
- table.table-table-w100 input{
89
- width: 100%;
90
- }
91
- }
92
-
93
-
94
-
95
- .tc-table-striped{
96
- tr:nth-child(odd) {
97
- background-color: #EAEAEA;
98
- }
1
+ .tc-table{
2
+ width: 100%;
3
+ font-size: 12px;
4
+ line-height: 1.5;
5
+
6
+ .nowrap{
7
+ white-space: nowrap;
8
+ }
9
+
10
+ td, th{
11
+ vertical-align: middle;
12
+ }
13
+
14
+ th{
15
+ font-weight: 400;
16
+ line-height: 1.5;
17
+ text-align: center;
18
+ border-collapse: collapse;
19
+ border: 1px solid #FFF;
20
+ border-left: none;
21
+ padding: 9px 5px;
22
+ background-color: var(--tc-gray-500);
23
+ color: #FFF;
24
+ }
25
+
26
+ th:first-child{
27
+ border-radius: 5px 0 0 0;
28
+ }
29
+
30
+ th:last-child{
31
+ border-radius: 0 5px 0 0;
32
+ }
33
+
34
+ tbody{
35
+ td {
36
+ text-align: center;
37
+ border-collapse: collapse;
38
+ border: 1px solid #FFF;
39
+ padding: 9px 5px;
40
+ }
41
+ }
42
+
43
+ }
44
+
45
+
46
+ /* TABELA RESPONSIVA */
47
+ @media screen and (max-width: 900px) {
48
+ table.tc-table-responsive {
49
+ border: 0;
50
+ display: grid !important;
51
+ }
52
+ table.tc-table-responsive caption {
53
+ font-size: 1.3em;
54
+ }
55
+ table.tc-table-responsive thead {
56
+ border: none;
57
+ clip: rect(0 0 0 0);
58
+ height: 1px;
59
+ margin: -1px;
60
+ overflow: hidden;
61
+ padding: 0;
62
+ position: absolute;
63
+ width: 1px;
64
+ }
65
+ table.tc-table-responsive th {
66
+ text-align: left !important;
67
+ }
68
+ table.tc-table-responsive tr {
69
+ border-bottom: 3px solid #ddd;
70
+ display: block;
71
+ margin-bottom: .625em;
72
+ }
73
+ table.tc-table-responsive td {
74
+ border-bottom: 1px solid #ddd;
75
+ display: block;
76
+ font-size: .8em;
77
+ text-align: right !important;
78
+ }
79
+ table.tc-table-responsive td::before {
80
+ content: attr(tc-data-label);
81
+ float: left;
82
+ font-weight: bold;
83
+ text-transform: uppercase;
84
+ }
85
+ table.tc-table-responsive td:last-child {
86
+ border-bottom: 0;
87
+ }
88
+ table.table-table-w100 input{
89
+ width: 100%;
90
+ }
91
+ }
92
+
93
+
94
+
95
+ .tc-table-striped{
96
+ tr:nth-child(odd) {
97
+ background-color: #EAEAEA;
98
+ }
99
99
  }
@@ -1,89 +1,89 @@
1
- :root{
2
- --bk-tootltip: #5a5a5a;
3
- --color-text-tooltip: #fff;
4
- }
5
-
6
- .tc-directive-tooltip{
7
- max-width: 230px;
8
- border: none;
9
- text-align: center;
10
- padding: 8px 13px;
11
- border-radius: 8px;
12
- display: inline;
13
- background-color: var(--bk-tootltip) !important;
14
- color: var(--color-text-tooltip) !important;
15
- z-index: 9999;
16
- position: absolute;
17
-
18
- a{
19
- color: var(--color-text-tooltip) !important;
20
- font-weight: bold;
21
- text-decoration: underline !important;
22
- }
23
- }
24
-
25
- .tc-directive-tooltip-top:before{
26
- content: "";
27
- position: absolute;
28
- left: calc( 50% - 8px);
29
- top: calc( 100% - 11px);
30
- width: 14px;
31
- height: 14px;
32
- transform: rotateZ(45deg);
33
- background-color: var(--bk-tootltip) !important;
34
- border: none;
35
- z-index: -1;
36
- }
37
-
38
- .tc-directive-tooltip-bottom:before{
39
- content: "";
40
- position: absolute;
41
- left: calc( 50% - 8px);
42
- top: -3px;
43
- width: 14px;
44
- height: 14px;
45
- transform: rotateZ(45deg);
46
- background-color: var(--bk-tootltip);
47
- border: none;
48
- z-index: -1;
49
- }
50
-
51
- .tc-directive-tooltip-right:before{
52
- content: "";
53
- position: absolute;
54
- left: -4px;
55
- top: calc( 50% - 8px);
56
- width: 14px;
57
- height: 14px;
58
- transform: rotateZ(45deg);
59
- background-color: var(--bk-tootltip);
60
- border: none;
61
- z-index: -1;
62
- }
63
-
64
- .tc-directive-tooltip-left:before{
65
- content: "";
66
- position: absolute;
67
- left: calc( 100% - 11px);
68
- top: calc( 50% - 8px);
69
- width: 14px;
70
- height: 14px;
71
- transform: rotateZ(45deg);
72
- background-color: var(--bk-tootltip);
73
- border: none;
74
- z-index: -1;
75
- }
76
-
77
- @keyframes fade-in {
78
- from {
79
- opacity: 0;
80
- }
81
- to {
82
- opacity: 1;
83
- }
84
- }
85
-
86
- .tc-tooltip-fade-in{
87
- opacity: 0;
88
- animation: fade-in 0.5s ease-in-out forwards;
89
- }
1
+ :root{
2
+ --bk-tootltip: #5a5a5a;
3
+ --color-text-tooltip: #fff;
4
+ }
5
+
6
+ .tc-directive-tooltip{
7
+ max-width: 230px;
8
+ border: none;
9
+ text-align: center;
10
+ padding: 8px 13px;
11
+ border-radius: 8px;
12
+ display: inline;
13
+ background-color: var(--bk-tootltip) !important;
14
+ color: var(--color-text-tooltip) !important;
15
+ z-index: 9999;
16
+ position: absolute;
17
+
18
+ a{
19
+ color: var(--color-text-tooltip) !important;
20
+ font-weight: bold;
21
+ text-decoration: underline !important;
22
+ }
23
+ }
24
+
25
+ .tc-directive-tooltip-top:before{
26
+ content: "";
27
+ position: absolute;
28
+ left: calc( 50% - 8px);
29
+ top: calc( 100% - 11px);
30
+ width: 14px;
31
+ height: 14px;
32
+ transform: rotateZ(45deg);
33
+ background-color: var(--bk-tootltip) !important;
34
+ border: none;
35
+ z-index: -1;
36
+ }
37
+
38
+ .tc-directive-tooltip-bottom:before{
39
+ content: "";
40
+ position: absolute;
41
+ left: calc( 50% - 8px);
42
+ top: -3px;
43
+ width: 14px;
44
+ height: 14px;
45
+ transform: rotateZ(45deg);
46
+ background-color: var(--bk-tootltip);
47
+ border: none;
48
+ z-index: -1;
49
+ }
50
+
51
+ .tc-directive-tooltip-right:before{
52
+ content: "";
53
+ position: absolute;
54
+ left: -4px;
55
+ top: calc( 50% - 8px);
56
+ width: 14px;
57
+ height: 14px;
58
+ transform: rotateZ(45deg);
59
+ background-color: var(--bk-tootltip);
60
+ border: none;
61
+ z-index: -1;
62
+ }
63
+
64
+ .tc-directive-tooltip-left:before{
65
+ content: "";
66
+ position: absolute;
67
+ left: calc( 100% - 11px);
68
+ top: calc( 50% - 8px);
69
+ width: 14px;
70
+ height: 14px;
71
+ transform: rotateZ(45deg);
72
+ background-color: var(--bk-tootltip);
73
+ border: none;
74
+ z-index: -1;
75
+ }
76
+
77
+ @keyframes fade-in {
78
+ from {
79
+ opacity: 0;
80
+ }
81
+ to {
82
+ opacity: 1;
83
+ }
84
+ }
85
+
86
+ .tc-tooltip-fade-in{
87
+ opacity: 0;
88
+ animation: fade-in 0.5s ease-in-out forwards;
89
+ }
@@ -1,16 +1,16 @@
1
- .datepicker-dropdown{
2
- z-index: 2040 !important;
3
-
4
- }
5
-
6
- .input-options-date{
7
- .datepicker-dropdown{
8
- left: 30px !important;
9
- }
10
- }
11
-
12
- .icon-short-time{
13
- i.fa-caret-down{
14
- margin-bottom: 8px;
15
- }
1
+ .datepicker-dropdown{
2
+ z-index: 2040 !important;
3
+
4
+ }
5
+
6
+ .input-options-date{
7
+ .datepicker-dropdown{
8
+ left: 30px !important;
9
+ }
10
+ }
11
+
12
+ .icon-short-time{
13
+ i.fa-caret-down{
14
+ margin-bottom: 8px;
15
+ }
16
16
  }
@@ -1,8 +1,8 @@
1
- .ng-invalid.ng-touched{
2
- border-color: var(--danger);
3
-
4
- }
5
-
6
- .ng-invalid.ng-touched .tc-parent-validation{
7
- border-color: var(--danger);
1
+ .ng-invalid.ng-touched{
2
+ border-color: var(--danger);
3
+
4
+ }
5
+
6
+ .ng-invalid.ng-touched .tc-parent-validation{
7
+ border-color: var(--danger);
8
8
  }