cloud-ide-element 1.0.6 → 1.0.7

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/lib/utils/directives/tooltip/tooltip.directive.scss +153 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cloud-ide-element",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.1.0",
6
6
  "@angular/core": "^20.1.0"
package/src/lib/utils/directives/tooltip/tooltip.directive.scss ADDED
@@ -0,0 +1,153 @@
1
+ /* Tooltip Styles */
2
+ .tooltip {
3
+ position: absolute; /* Changed from fixed to absolute for better scroll support */
4
+ z-index: 10000;
5
+ padding: 4px 8px;
6
+ font-size: 0.75rem;
7
+ border-radius: 3px;
8
+ background-color: var(--tooltip-bg, var(--cide-theme-tooltip-bg, #333));
9
+ color: var(--tooltip-color, var(--cide-theme-tooltip-color, white));
10
+ box-shadow: 0 2px 4px var(--cide-theme-shadow-color, rgba(0, 0, 0, 0.1)), 0 0 1px rgba(0, 0, 0, 0.1);
11
+ pointer-events: none;
12
+ white-space: nowrap;
13
+ opacity: 0;
14
+ transform: translateY(4px);
15
+ transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
16
+ max-width: var(--tooltip-max-width, 200px);
17
+ line-height: 1.3;
18
+ letter-spacing: 0.01em;
19
+ backdrop-filter: blur(0px);
20
+
21
+ // Arrow styles (default hidden)
22
+ &::after {
23
+ content: '';
24
+ position: absolute;
25
+ width: 0;
26
+ height: 0;
27
+ border: 4px solid transparent;
28
+ opacity: 0;
29
+ transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
30
+ } // Position arrows based on direction
31
+ &.tooltip-top::after {
32
+ border-top-color: var(--tooltip-bg, var(--cide-theme-tooltip-bg, #333));
33
+ bottom: -8px;
34
+ left: 50%;
35
+ transform: translateX(-50%);
36
+ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
37
+ }
38
+
39
+ &.tooltip-bottom::after {
40
+ border-bottom-color: var(--tooltip-bg, var(--cide-theme-tooltip-bg, #333));
41
+ top: -8px;
42
+ left: 50%;
43
+ transform: translateX(-50%);
44
+ filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.05));
45
+ }
46
+
47
+ &.tooltip-left::after {
48
+ border-left-color: var(--tooltip-bg, var(--cide-theme-tooltip-bg, #333));
49
+ right: -8px;
50
+ top: 50%;
51
+ transform: translateY(-50%);
52
+ filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.05));
53
+ }
54
+
55
+ &.tooltip-right::after {
56
+ border-right-color: var(--tooltip-bg, var(--cide-theme-tooltip-bg, #333));
57
+ left: -8px;
58
+ top: 50%;
59
+ transform: translateY(-50%);
60
+ filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.05));
61
+ }
62
+ // Show arrow when tooltip is visible
63
+ &.tooltip-arrow-visible::after {
64
+ opacity: 1;
65
+ transition-delay: 0.05s;
66
+ }
67
+ }
68
+
69
+ .tooltip-visible {
70
+ opacity: 0.97 !important;
71
+ transform: translateY(0) !important;
72
+ backdrop-filter: blur(4px) !important;
73
+ }
74
+
75
+ // Tooltip with max-width and text wrapping
76
+ .tooltip-multiline {
77
+ white-space: normal;
78
+ text-align: left;
79
+ padding: 6px 10px;
80
+ font-size: 0.7rem;
81
+ }
82
+
83
+ // Tooltip with interactive elements
84
+ .tooltip-interactive {
85
+ pointer-events: auto;
86
+ padding: 8px 12px;
87
+ box-shadow: 0 3px 12px var(--cide-theme-shadow-color, rgba(0, 0, 0, 0.12)), 0 1px 3px rgba(0, 0, 0, 0.08);
88
+ border-radius: 4px;
89
+
90
+ &:hover {
91
+ box-shadow: 0 4px 15px var(--cide-theme-shadow-color, rgba(0, 0, 0, 0.15)), 0 1px 4px rgba(0, 0, 0, 0.1);
92
+ }
93
+ }
94
+
95
+ /* Tooltip Accessibility */
96
+ @media (prefers-reduced-motion: reduce) {
97
+ .tooltip {
98
+ transition: opacity 0.05s linear !important;
99
+ transform: none !important;
100
+
101
+ &::after {
102
+ transition: opacity 0.05s linear !important;
103
+ }
104
+ }
105
+ }
106
+
107
+ /* Predefined Tooltip Styles */
108
+ .tooltip-success,
109
+ .tooltip-warning,
110
+ .tooltip-error,
111
+ .tooltip-info,
112
+ .tooltip-light,
113
+ .tooltip-dark {
114
+ font-weight: 400;
115
+ letter-spacing: 0.01em;
116
+ border-radius: 4px;
117
+ }
118
+
119
+ .tooltip-success {
120
+ --tooltip-bg: var(--cide-theme-tooltip-success-bg, rgba(16, 185, 129, 0.95));
121
+ --tooltip-color: white;
122
+ box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2), 0 0 1px rgba(16, 185, 129, 0.3);
123
+ }
124
+
125
+ .tooltip-warning {
126
+ --tooltip-bg: var(--cide-theme-tooltip-warning-bg, rgba(245, 158, 11, 0.95));
127
+ --tooltip-color: white;
128
+ box-shadow: 0 2px 5px rgba(245, 158, 11, 0.2), 0 0 1px rgba(245, 158, 11, 0.3);
129
+ }
130
+
131
+ .tooltip-error {
132
+ --tooltip-bg: var(--cide-theme-tooltip-error-bg, rgba(239, 68, 68, 0.95));
133
+ --tooltip-color: white;
134
+ box-shadow: 0 2px 5px rgba(239, 68, 68, 0.2), 0 0 1px rgba(239, 68, 68, 0.3);
135
+ }
136
+
137
+ .tooltip-info {
138
+ --tooltip-bg: var(--cide-theme-tooltip-info-bg, rgba(59, 130, 246, 0.95));
139
+ --tooltip-color: white;
140
+ box-shadow: 0 2px 5px rgba(59, 130, 246, 0.2), 0 0 1px rgba(59, 130, 246, 0.3);
141
+ }
142
+
143
+ .tooltip-light {
144
+ --tooltip-bg: var(--cide-theme-tooltip-light-bg, rgba(248, 250, 252, 0.97));
145
+ --tooltip-color: #1e293b;
146
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.15);
147
+ }
148
+
149
+ .tooltip-dark {
150
+ --tooltip-bg: var(--cide-theme-tooltip-dark-bg, rgba(30, 41, 59, 0.95));
151
+ --tooltip-color: white;
152
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
153
+ }