@dev-tcloud/tcloud-ui 0.0.97 → 0.0.98

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 (9) hide show
  1. package/esm2020/lib/_directives/tooltip/tooltip.directive.mjs +74 -82
  2. package/fesm2015/dev-tcloud-tcloud-ui.mjs +76 -83
  3. package/fesm2015/dev-tcloud-tcloud-ui.mjs.map +1 -1
  4. package/fesm2020/dev-tcloud-tcloud-ui.mjs +75 -83
  5. package/fesm2020/dev-tcloud-tcloud-ui.mjs.map +1 -1
  6. package/lib/_directives/tooltip/tooltip.directive.d.ts +7 -23
  7. package/package.json +1 -1
  8. package/scss/components/custom/tooltip.scss +63 -74
  9. package/scss/tcloud/custom/buttons.scss +5 -2
package/lib/_directives/tooltip/tooltip.directive.d.ts CHANGED
@@ -1,33 +1,17 @@
1
- import { ElementRef, OnInit, Renderer2 } from '@angular/core';
1
+ import { ElementRef, Renderer2 } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
- export declare class TCloudUiTooltipDirective implements OnInit {
3
+ export declare class TCloudUiTooltipDirective {
4
4
  private el;
5
5
  private renderer;
6
- private _direction;
7
- main_el: any;
8
- el_height: number;
9
- el_width: number;
10
- el_center: number;
11
- el_position: number;
12
- target_height: number;
13
- target_width: number;
14
- target_center: number;
15
- ID: string;
16
- onMouseOver(): void;
17
- onMouseOut(): void;
18
6
  info_text: string;
7
+ onMouseOver(event: MouseEvent): void;
8
+ onMouseOut(event: MouseEvent): void;
19
9
  set TCtooltip(tooltip: any);
10
+ private _direction;
20
11
  set TCdirection(direction: any);
21
12
  constructor(el: ElementRef, renderer: Renderer2);
22
- ngOnInit(): void;
23
- generateID(): string;
24
- getElement(): HTMLElement | undefined;
25
- check(tooltip: any): void;
26
- create_tooltip(tip: any, el: any): void;
27
- to_top(el: any): void;
28
- to_bottom(el: any): void;
29
- to_right(el: any): void;
30
- to_left(el: any): void;
13
+ generateID(target?: string): string;
14
+ start_tooltip(id: string, height: number, width: number, el_position_x: number, el_position_y: number, direction: string): void;
31
15
  static ɵfac: i0.ɵɵFactoryDeclaration<TCloudUiTooltipDirective, never>;
32
16
  static ɵdir: i0.ɵɵDirectiveDeclaration<TCloudUiTooltipDirective, "[TCtooltip]", never, { "TCtooltip": "TCtooltip"; "TCdirection": "TCdirection"; }, {}, never, never, false>;
33
17
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-tcloud/tcloud-ui",
3
- "version": "0.0.97",
3
+ "version": "0.0.98",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^14.1.0",
6
6
  "@angular/core": "^14.1.0"
package/scss/components/custom/tooltip.scss CHANGED
@@ -1,94 +1,83 @@
1
- /* You can add global styles to this file, and also import other style files */
2
-
3
1
  :root{
4
- --bk-tootltip: #434343;
2
+ --bk-tootltip: #5a5a5a;
5
3
  --color-text-tooltip: #fff;
6
4
  }
7
5
 
8
6
  .tc-directive-tooltip{
7
+ max-width: 230px;
8
+ border: none;
9
+ text-align: center;
10
+ padding: 5px 13px;
11
+ border-radius: 8px;
12
+ display: inline;
9
13
  background-color: var(--bk-tootltip) !important;
10
14
  color: var(--color-text-tooltip) !important;
11
-
12
- &:before {
13
- content: "";
14
- position: absolute;
15
- width: 0;
16
- height: 0;
17
- border: 8px solid transparent;
18
- z-index: -1;
19
- }
15
+ z-index: 9999;
16
+ position: absolute;
20
17
  }
21
18
 
22
-
23
- .tc-directive-tooltip-top {
24
- left: 50%;
25
- bottom: 100%;
26
- transform: translate(-50%, -12px);
27
-
28
- &:before {
29
- bottom: 0;
30
- left: 50%;
31
- transform: translate(-50%, 90%);
32
- border-bottom: 0;
33
- border-top-color: var(--bk-tootltip);
34
- }
19
+ .tc-directive-tooltip-top:before{
20
+ content: "";
21
+ position: absolute;
22
+ left: calc( 50% - 8px);
23
+ top: calc( 100% - 11px);
24
+ width: 15px;
25
+ height: 15px;
26
+ transform: rotateZ(45deg);
27
+ background-color: var(--bk-tootltip) !important;
28
+ border: none;
29
+ z-index: -1;
35
30
  }
36
31
 
37
- .tc-directive-tooltip-bottom {
38
- left: 50%;
39
- top: 100%;
40
- transform: translate(-50%, 12px);
41
-
42
- &:before {
43
- top: 0;
44
- left: 50%;
45
- transform: translate(-50%, -90%);
46
- border-top: 0;
47
- border-bottom-color: var(--bk-tootltip);
48
- }
32
+ .tc-directive-tooltip-bottom:before{
33
+ content: "";
34
+ position: absolute;
35
+ left: calc( 50% - 8px);
36
+ top: -3px;
37
+ width: 15px;
38
+ height: 15px;
39
+ transform: rotateZ(45deg);
40
+ background-color: var(--bk-tootltip);
41
+ border: none;
42
+ z-index: -1;
49
43
  }
50
44
 
51
- .tc-directive-tooltip-right {
52
- left: 100%;
53
- top: 50%;
54
- transform: translate(12px, -50%);
55
-
56
- &:before {
57
- top: 50%;
58
- left: 0;
59
- transform: translate(-90%, -50%);
60
- border-left: 0;
61
- border-right-color: var(--bk-tootltip);
62
- }
45
+ .tc-directive-tooltip-right:before{
46
+ content: "";
47
+ position: absolute;
48
+ left: -4px;
49
+ top: calc( 50% - 8px);
50
+ width: 15px;
51
+ height: 15px;
52
+ transform: rotateZ(45deg);
53
+ background-color: var(--bk-tootltip);
54
+ border: none;
55
+ z-index: -1;
63
56
  }
64
57
 
65
- .tc-directive-tooltip-left {
66
- right: 100%;
67
- top: 50%;
68
- transform: translate(-12px, -50%);
58
+ .tc-directive-tooltip-left:before{
59
+ content: "";
60
+ position: absolute;
61
+ left: calc( 100% - 11px);
62
+ top: calc( 50% - 8px);
63
+ width: 15px;
64
+ height: 15px;
65
+ transform: rotateZ(45deg);
66
+ background-color: var(--bk-tootltip);
67
+ border: none;
68
+ z-index: -1;
69
+ }
69
70
 
70
- &:before {
71
- top: 50%;
72
- right: 0;
73
- transform: translate(90%, -50%);
74
- border-right: 0;
75
- border-left-color: var(--bk-tootltip);
71
+ @keyframes fade-in {
72
+ from {
73
+ opacity: 0;
74
+ }
75
+ to {
76
+ opacity: 1;
76
77
  }
77
78
  }
78
79
 
79
- [id ^= tc-tooltip-] {
80
- position: absolute;
81
- display: none;
82
- padding: 10px;
83
- border-radius: 8px;
84
- text-align: center;
85
- width: max-content;
86
- max-width: 250px;
87
- background-color: transparent;
88
- color: transparent;
89
- z-index: 1090;
80
+ .tc-tooltip-fade-in{
81
+ opacity: 0;
82
+ animation: fade-in 0.5s ease-in-out forwards;
90
83
  }
91
-
92
- .main-tooltip{
93
- position: relative !important;
94
- }
package/scss/tcloud/custom/buttons.scss CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  i {
25
25
  margin-right: 10px;
26
- font-size: 20px;
26
+ font-size: 16px;
27
27
  }
28
28
 
29
29
  &:hover {
@@ -74,7 +74,6 @@ opacity: 0.6;
74
74
  background: none;
75
75
  color: $tc-primary;
76
76
  border: none;
77
- font-size: 15px;
78
77
 
79
78
  p {
80
79
  text-align: left;
@@ -84,6 +83,10 @@ opacity: 0.6;
84
83
  &:hover{
85
84
  color: $tc-complemt-3;
86
85
  }
86
+
87
+ &:disabled{
88
+ color: $tc-gray-700;
89
+ }
87
90
  }
88
91
 
89
92
  .tc-btn:disabled {