cloud-ide-element 1.0.6 → 1.0.8
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/index.d.ts
CHANGED
|
@@ -411,17 +411,24 @@ declare class CideEleTabComponent implements OnInit {
|
|
|
411
411
|
static ɵcmp: i0.ɵɵComponentDeclaration<CideEleTabComponent, "cide-ele-tab", never, { "tabs": { "alias": "tabs"; "required": false; }; "activeTabId": { "alias": "activeTabId"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
|
|
412
412
|
}
|
|
413
413
|
|
|
414
|
-
declare class CideEleFileInputComponent implements ControlValueAccessor {
|
|
414
|
+
declare class CideEleFileInputComponent implements ControlValueAccessor, OnDestroy {
|
|
415
415
|
label: string;
|
|
416
416
|
accept: string;
|
|
417
417
|
multiple: boolean;
|
|
418
418
|
disabled: boolean;
|
|
419
419
|
helperText: string;
|
|
420
420
|
errorText: string;
|
|
421
|
+
showPreview: boolean;
|
|
422
|
+
previewWidth: string;
|
|
423
|
+
previewHeight: string;
|
|
424
|
+
previewBoxMode: boolean;
|
|
425
|
+
placeholderText: string;
|
|
426
|
+
placeholderIcon: string;
|
|
421
427
|
id: string;
|
|
422
428
|
fileChange: EventEmitter<FileList | null>;
|
|
423
429
|
files: FileList | null;
|
|
424
430
|
fileNames: string[];
|
|
431
|
+
previewUrls: string[];
|
|
425
432
|
private onChange;
|
|
426
433
|
private onTouched;
|
|
427
434
|
writeValue(files: FileList | null): void;
|
|
@@ -430,8 +437,17 @@ declare class CideEleFileInputComponent implements ControlValueAccessor {
|
|
|
430
437
|
setDisabledState(isDisabled: boolean): void;
|
|
431
438
|
onFileSelected(event: Event): void;
|
|
432
439
|
clearFiles(): void;
|
|
440
|
+
private generatePreviews;
|
|
441
|
+
private clearPreviews;
|
|
442
|
+
private isImageFile;
|
|
443
|
+
isImagePreviewAvailable(): boolean;
|
|
444
|
+
removePreview(index: number): void;
|
|
445
|
+
ngOnDestroy(): void;
|
|
446
|
+
triggerFileSelect(): void;
|
|
447
|
+
isPreviewBoxMode(): boolean;
|
|
448
|
+
hasImages(): boolean;
|
|
433
449
|
static ɵfac: i0.ɵɵFactoryDeclaration<CideEleFileInputComponent, never>;
|
|
434
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CideEleFileInputComponent, "cide-ele-file-input", never, { "label": { "alias": "label"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; }, { "fileChange": "fileChange"; }, never, never, true, never>;
|
|
450
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CideEleFileInputComponent, "cide-ele-file-input", never, { "label": { "alias": "label"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "showPreview": { "alias": "showPreview"; "required": false; }; "previewWidth": { "alias": "previewWidth"; "required": false; }; "previewHeight": { "alias": "previewHeight"; "required": false; }; "previewBoxMode": { "alias": "previewBoxMode"; "required": false; }; "placeholderText": { "alias": "placeholderText"; "required": false; }; "placeholderIcon": { "alias": "placeholderIcon"; "required": false; }; }, { "fileChange": "fileChange"; }, never, never, true, never>;
|
|
435
451
|
}
|
|
436
452
|
|
|
437
453
|
declare class CideTextareaComponent implements ControlValueAccessor, Validator, OnInit, OnChanges {
|
package/package.json
CHANGED
|
@@ -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
|
+
}
|