@foxeltech/angular-ui 0.0.1 → 0.0.3
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/components.css +6 -6
- package/fesm2022/foxeltech-angular-ui.mjs +32 -29
- package/fesm2022/foxeltech-angular-ui.mjs.map +1 -1
- package/index.d.ts +2 -1
- package/package.json +1 -1
- package/src/lib/styles/components.css +6 -6
- package/src/lib/styles/tailwind.css +1 -1
- package/src/lib/styles/theme.css +7 -7
- package/src/lib/ui/components/button/button.component.html +219 -209
- package/src/lib/ui/components/checkbox/checkbox.component.html +5 -3
- package/src/lib/ui/components/dnd-upload/dnd-upload.component.html +2 -2
- package/src/lib/ui/components/drawer/drawer.component.html +6 -2
- package/src/lib/ui/components/hero-icon/hero-icon.component.html +1 -0
- package/src/lib/ui/components/input/input.component.html +30 -27
- package/src/lib/ui/components/select/select.component.css +10 -5
- package/src/lib/ui/components/select/select.component.html +26 -20
- package/src/lib/ui/components/tab-group/tab-group.component.html +18 -11
- package/src/lib/ui/components/tag/tag.component.html +10 -8
- package/tailwind.config.js +1 -0
- package/tailwind.css +1 -1
- package/theme.css +7 -7
package/index.d.ts
CHANGED
|
@@ -709,6 +709,7 @@ declare class TabGroupComponent implements AfterContentInit {
|
|
|
709
709
|
}
|
|
710
710
|
|
|
711
711
|
declare class HeroIconComponent {
|
|
712
|
+
stroke: number;
|
|
712
713
|
icon: any;
|
|
713
714
|
solid: boolean;
|
|
714
715
|
outline: boolean;
|
|
@@ -716,7 +717,7 @@ declare class HeroIconComponent {
|
|
|
716
717
|
color: any;
|
|
717
718
|
class?: any;
|
|
718
719
|
static ɵfac: i0.ɵɵFactoryDeclaration<HeroIconComponent, never>;
|
|
719
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<HeroIconComponent, "fx-ui-hero-icon", never, { "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
|
|
720
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<HeroIconComponent, "fx-ui-hero-icon", never, { "stroke": { "alias": "stroke"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
|
|
720
721
|
}
|
|
721
722
|
|
|
722
723
|
declare class ToastComponent {
|
package/package.json
CHANGED
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
padding-top: 4px !important;
|
|
98
98
|
padding-bottom: 4px !important;
|
|
99
99
|
line-height: 24px !important;
|
|
100
|
-
font-family: '
|
|
100
|
+
font-family: 'DMSans';
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.mdc-data-table__row {
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
.mdc-data-table__cell {
|
|
109
109
|
border-left: 1px solid rgb(var(--border-default)) !important;
|
|
110
110
|
background-color: rgb(var(--bg-primary)) !important;
|
|
111
|
-
font-family: '
|
|
111
|
+
font-family: 'DMSans';
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.mat-mdc-cell {
|
|
@@ -319,7 +319,7 @@ input[type='password'] {
|
|
|
319
319
|
@apply btn-common bg-button-default hover:opacity-75 text-text-inverse;
|
|
320
320
|
}
|
|
321
321
|
.btn-primary {
|
|
322
|
-
@apply btn-common bg-
|
|
322
|
+
@apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
|
|
323
323
|
}
|
|
324
324
|
.btn-alternative {
|
|
325
325
|
@apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
|
|
@@ -338,7 +338,7 @@ input[type='password'] {
|
|
|
338
338
|
}
|
|
339
339
|
|
|
340
340
|
.input-default {
|
|
341
|
-
@apply block h-[36px] text-text-primary placeholder:text-text-placeholder bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-
|
|
341
|
+
@apply block h-[36px] text-text-primary placeholder:text-text-placeholder bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out;
|
|
342
342
|
}
|
|
343
343
|
.input-invalid {
|
|
344
344
|
@apply border-bg-error focus:ring-bg-error focus:border-bg-error;
|
|
@@ -347,7 +347,7 @@ input[type='password'] {
|
|
|
347
347
|
@apply focus:border-2 focus:border-border-hover2 focus:bg-bg-hover2;
|
|
348
348
|
}
|
|
349
349
|
.input-otp {
|
|
350
|
-
@apply bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-
|
|
350
|
+
@apply bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start text-text-primary ring-0 transition-colors duration-500 ease-in-out;
|
|
351
351
|
}
|
|
352
352
|
|
|
353
353
|
.card-common {
|
|
@@ -431,7 +431,7 @@ input[type='password'] {
|
|
|
431
431
|
@apply w-1.5 h-1.5 bg-bg-primary rounded-full;
|
|
432
432
|
}
|
|
433
433
|
.radio-checked {
|
|
434
|
-
@apply bg-
|
|
434
|
+
@apply bg-gradient-primary border-transparent;
|
|
435
435
|
}
|
|
436
436
|
.radio-uncheck {
|
|
437
437
|
@apply bg-bg-primary border-border-strong;
|
package/src/lib/styles/theme.css
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
--gradient-primary-end: 4 255 135;
|
|
4
4
|
--bg-primary: 255 255 255;
|
|
5
5
|
--primary: 236 25 56;
|
|
6
|
-
--success:
|
|
7
|
-
--warning: 255
|
|
8
|
-
--critical:
|
|
9
|
-
--danger:
|
|
10
|
-
--discovery:
|
|
11
|
-
--information:
|
|
6
|
+
--success: 18 244 146;
|
|
7
|
+
--warning: 255 199 0;
|
|
8
|
+
--critical: 254 4 83;
|
|
9
|
+
--danger: 255 122 0;
|
|
10
|
+
--discovery: 156 129 255;
|
|
11
|
+
--information: 23 127 240;
|
|
12
12
|
--text-primary: 36 45 66;
|
|
13
13
|
--text-secondary: 97 101 108;
|
|
14
14
|
--border-default: 236 236 236;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
--discovery: 119 113 227;
|
|
45
45
|
--information: 62 175 240;
|
|
46
46
|
--text-primary: 247 247 247;
|
|
47
|
-
--text-secondary:
|
|
47
|
+
--text-secondary: 133 136 142;
|
|
48
48
|
--border-default: 55 58 65;
|
|
49
49
|
--text-placeholder: 133 136 142;
|
|
50
50
|
--step-bg: 255 255 255;
|
|
@@ -9,215 +9,225 @@
|
|
|
9
9
|
(click)="onClick()"
|
|
10
10
|
>
|
|
11
11
|
@if (loading) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
</div>
|
|
212
|
-
} @else {
|
|
213
|
-
<ng-container>
|
|
214
|
-
<div class="flex items-center justify-center gap-small">
|
|
215
|
-
@if(icon) {<fx-ui-hero-icon [icon]="icon" [size]="20" class="flex" [ngClass]="{
|
|
216
|
-
'text-text-inverse': buttonVariant !== 'default',
|
|
217
|
-
'text-text-primary': buttonVariant === 'alternative'
|
|
218
|
-
}"></fx-ui-hero-icon>}
|
|
219
|
-
@if(label){<div>{{ label }}</div>}
|
|
12
|
+
<div class="flex w-full items-center justify-center">
|
|
13
|
+
<svg
|
|
14
|
+
[attr.fill]="
|
|
15
|
+
buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'
|
|
16
|
+
"
|
|
17
|
+
width="20"
|
|
18
|
+
height="20"
|
|
19
|
+
viewBox="0 0 24 24"
|
|
20
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
21
|
+
>
|
|
22
|
+
<circle cx="4" cy="12" r="0">
|
|
23
|
+
<animate
|
|
24
|
+
begin="0;spinner_z0Or.end"
|
|
25
|
+
attributeName="r"
|
|
26
|
+
calcMode="spline"
|
|
27
|
+
dur="0.5s"
|
|
28
|
+
keySplines=".36,.6,.31,1"
|
|
29
|
+
values="0;3"
|
|
30
|
+
fill="freeze"
|
|
31
|
+
/>
|
|
32
|
+
<animate
|
|
33
|
+
begin="spinner_OLMs.end"
|
|
34
|
+
attributeName="cx"
|
|
35
|
+
calcMode="spline"
|
|
36
|
+
dur="0.5s"
|
|
37
|
+
keySplines=".36,.6,.31,1"
|
|
38
|
+
values="4;12"
|
|
39
|
+
fill="freeze"
|
|
40
|
+
/>
|
|
41
|
+
<animate
|
|
42
|
+
begin="spinner_UHR2.end"
|
|
43
|
+
attributeName="cx"
|
|
44
|
+
calcMode="spline"
|
|
45
|
+
dur="0.5s"
|
|
46
|
+
keySplines=".36,.6,.31,1"
|
|
47
|
+
values="12;20"
|
|
48
|
+
fill="freeze"
|
|
49
|
+
/>
|
|
50
|
+
<animate
|
|
51
|
+
id="spinner_lo66"
|
|
52
|
+
begin="spinner_Aguh.end"
|
|
53
|
+
attributeName="r"
|
|
54
|
+
calcMode="spline"
|
|
55
|
+
dur="0.5s"
|
|
56
|
+
keySplines=".36,.6,.31,1"
|
|
57
|
+
values="3;0"
|
|
58
|
+
fill="freeze"
|
|
59
|
+
/>
|
|
60
|
+
<animate
|
|
61
|
+
id="spinner_z0Or"
|
|
62
|
+
begin="spinner_lo66.end"
|
|
63
|
+
attributeName="cx"
|
|
64
|
+
dur="0.001s"
|
|
65
|
+
values="20;4"
|
|
66
|
+
fill="freeze"
|
|
67
|
+
/>
|
|
68
|
+
</circle>
|
|
69
|
+
<circle cx="4" cy="12" r="3">
|
|
70
|
+
<animate
|
|
71
|
+
begin="0;spinner_z0Or.end"
|
|
72
|
+
attributeName="cx"
|
|
73
|
+
calcMode="spline"
|
|
74
|
+
dur="0.5s"
|
|
75
|
+
keySplines=".36,.6,.31,1"
|
|
76
|
+
values="4;12"
|
|
77
|
+
fill="freeze"
|
|
78
|
+
/>
|
|
79
|
+
<animate
|
|
80
|
+
begin="spinner_OLMs.end"
|
|
81
|
+
attributeName="cx"
|
|
82
|
+
calcMode="spline"
|
|
83
|
+
dur="0.5s"
|
|
84
|
+
keySplines=".36,.6,.31,1"
|
|
85
|
+
values="12;20"
|
|
86
|
+
fill="freeze"
|
|
87
|
+
/>
|
|
88
|
+
<animate
|
|
89
|
+
id="spinner_JsnR"
|
|
90
|
+
begin="spinner_UHR2.end"
|
|
91
|
+
attributeName="r"
|
|
92
|
+
calcMode="spline"
|
|
93
|
+
dur="0.5s"
|
|
94
|
+
keySplines=".36,.6,.31,1"
|
|
95
|
+
values="3;0"
|
|
96
|
+
fill="freeze"
|
|
97
|
+
/>
|
|
98
|
+
<animate
|
|
99
|
+
id="spinner_Aguh"
|
|
100
|
+
begin="spinner_JsnR.end"
|
|
101
|
+
attributeName="cx"
|
|
102
|
+
dur="0.001s"
|
|
103
|
+
values="20;4"
|
|
104
|
+
fill="freeze"
|
|
105
|
+
/>
|
|
106
|
+
<animate
|
|
107
|
+
begin="spinner_Aguh.end"
|
|
108
|
+
attributeName="r"
|
|
109
|
+
calcMode="spline"
|
|
110
|
+
dur="0.5s"
|
|
111
|
+
keySplines=".36,.6,.31,1"
|
|
112
|
+
values="0;3"
|
|
113
|
+
fill="freeze"
|
|
114
|
+
/>
|
|
115
|
+
</circle>
|
|
116
|
+
<circle cx="12" cy="12" r="3">
|
|
117
|
+
<animate
|
|
118
|
+
begin="0;spinner_z0Or.end"
|
|
119
|
+
attributeName="cx"
|
|
120
|
+
calcMode="spline"
|
|
121
|
+
dur="0.5s"
|
|
122
|
+
keySplines=".36,.6,.31,1"
|
|
123
|
+
values="12;20"
|
|
124
|
+
fill="freeze"
|
|
125
|
+
/>
|
|
126
|
+
<animate
|
|
127
|
+
id="spinner_hSjk"
|
|
128
|
+
begin="spinner_OLMs.end"
|
|
129
|
+
attributeName="r"
|
|
130
|
+
calcMode="spline"
|
|
131
|
+
dur="0.5s"
|
|
132
|
+
keySplines=".36,.6,.31,1"
|
|
133
|
+
values="3;0"
|
|
134
|
+
fill="freeze"
|
|
135
|
+
/>
|
|
136
|
+
<animate
|
|
137
|
+
id="spinner_UHR2"
|
|
138
|
+
begin="spinner_hSjk.end"
|
|
139
|
+
attributeName="cx"
|
|
140
|
+
dur="0.001s"
|
|
141
|
+
values="20;4"
|
|
142
|
+
fill="freeze"
|
|
143
|
+
/>
|
|
144
|
+
<animate
|
|
145
|
+
begin="spinner_UHR2.end"
|
|
146
|
+
attributeName="r"
|
|
147
|
+
calcMode="spline"
|
|
148
|
+
dur="0.5s"
|
|
149
|
+
keySplines=".36,.6,.31,1"
|
|
150
|
+
values="0;3"
|
|
151
|
+
fill="freeze"
|
|
152
|
+
/>
|
|
153
|
+
<animate
|
|
154
|
+
begin="spinner_Aguh.end"
|
|
155
|
+
attributeName="cx"
|
|
156
|
+
calcMode="spline"
|
|
157
|
+
dur="0.5s"
|
|
158
|
+
keySplines=".36,.6,.31,1"
|
|
159
|
+
values="4;12"
|
|
160
|
+
fill="freeze"
|
|
161
|
+
/>
|
|
162
|
+
</circle>
|
|
163
|
+
<circle cx="20" cy="12" r="3">
|
|
164
|
+
<animate
|
|
165
|
+
id="spinner_4v5M"
|
|
166
|
+
begin="0;spinner_z0Or.end"
|
|
167
|
+
attributeName="r"
|
|
168
|
+
calcMode="spline"
|
|
169
|
+
dur="0.5s"
|
|
170
|
+
keySplines=".36,.6,.31,1"
|
|
171
|
+
values="3;0"
|
|
172
|
+
fill="freeze"
|
|
173
|
+
/>
|
|
174
|
+
<animate
|
|
175
|
+
id="spinner_OLMs"
|
|
176
|
+
begin="spinner_4v5M.end"
|
|
177
|
+
attributeName="cx"
|
|
178
|
+
dur="0.001s"
|
|
179
|
+
values="20;4"
|
|
180
|
+
fill="freeze"
|
|
181
|
+
/>
|
|
182
|
+
<animate
|
|
183
|
+
begin="spinner_OLMs.end"
|
|
184
|
+
attributeName="r"
|
|
185
|
+
calcMode="spline"
|
|
186
|
+
dur="0.5s"
|
|
187
|
+
keySplines=".36,.6,.31,1"
|
|
188
|
+
values="0;3"
|
|
189
|
+
fill="freeze"
|
|
190
|
+
/>
|
|
191
|
+
<animate
|
|
192
|
+
begin="spinner_UHR2.end"
|
|
193
|
+
attributeName="cx"
|
|
194
|
+
calcMode="spline"
|
|
195
|
+
dur="0.5s"
|
|
196
|
+
keySplines=".36,.6,.31,1"
|
|
197
|
+
values="4;12"
|
|
198
|
+
fill="freeze"
|
|
199
|
+
/>
|
|
200
|
+
<animate
|
|
201
|
+
begin="spinner_Aguh.end"
|
|
202
|
+
attributeName="cx"
|
|
203
|
+
calcMode="spline"
|
|
204
|
+
dur="0.5s"
|
|
205
|
+
keySplines=".36,.6,.31,1"
|
|
206
|
+
values="12;20"
|
|
207
|
+
fill="freeze"
|
|
208
|
+
/>
|
|
209
|
+
</circle>
|
|
210
|
+
</svg>
|
|
220
211
|
</div>
|
|
221
|
-
|
|
212
|
+
} @else {
|
|
213
|
+
<ng-container>
|
|
214
|
+
<div class="flex items-center justify-center gap-small">
|
|
215
|
+
@if (icon) {
|
|
216
|
+
<fx-ui-hero-icon
|
|
217
|
+
[icon]="icon"
|
|
218
|
+
[size]="20"
|
|
219
|
+
class="flex"
|
|
220
|
+
[ngClass]="{
|
|
221
|
+
'text-text-inverse': buttonVariant === 'default',
|
|
222
|
+
'text-text-primary': buttonVariant === 'alternative',
|
|
223
|
+
'text-white': buttonVariant === 'primary',
|
|
224
|
+
}"
|
|
225
|
+
></fx-ui-hero-icon>
|
|
226
|
+
}
|
|
227
|
+
@if (label) {
|
|
228
|
+
<div>{{ label }}</div>
|
|
229
|
+
}
|
|
230
|
+
</div>
|
|
231
|
+
</ng-container>
|
|
222
232
|
}
|
|
223
233
|
</button>
|
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
'rounded-full': rounded,
|
|
18
18
|
'rounded-sm': !rounded,
|
|
19
19
|
'border-border-strong bg-transparent': !value,
|
|
20
|
-
'border-
|
|
20
|
+
'border-transparent bg-gradient-primary': value,
|
|
21
21
|
}"
|
|
22
22
|
>
|
|
23
23
|
<!-- Keep SVG space reserved always -->
|
|
24
24
|
<span class="absolute inset-0 flex items-center justify-center">
|
|
25
25
|
<svg
|
|
26
26
|
xmlns="http://www.w3.org/2000/svg"
|
|
27
|
-
class="text-
|
|
27
|
+
class="text-white w-4 h-4 transition-opacity duration-150"
|
|
28
28
|
viewBox="0 0 24 24"
|
|
29
29
|
fill="none"
|
|
30
30
|
stroke="currentColor"
|
|
@@ -38,5 +38,7 @@
|
|
|
38
38
|
</span>
|
|
39
39
|
</span>
|
|
40
40
|
|
|
41
|
-
@if(label)
|
|
41
|
+
@if (label) {
|
|
42
|
+
<span class="mb-0 txt-field-label">{{ label }}</span>
|
|
43
|
+
}
|
|
42
44
|
</label>
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
<div
|
|
8
8
|
role="button"
|
|
9
9
|
tabindex="0"
|
|
10
|
-
class="flex flex-col items-center justify-center gap-1 border-2 border-dashed rounded-md p-4 cursor-pointer select-none outline-none focus:ring-2 focus:ring-primary"
|
|
10
|
+
class="flex flex-col items-center justify-center gap-1 border-2 border-dashed rounded-md p-4 cursor-pointer select-none outline-none focus:ring-2 focus:ring-gradient-primary-start"
|
|
11
11
|
[ngClass]="{
|
|
12
12
|
'border-border-default bg-bg-hover': !isDragOver,
|
|
13
|
-
'border-
|
|
13
|
+
'border-gradient-primary-start bg-secondary': isDragOver,
|
|
14
14
|
}"
|
|
15
15
|
(click)="onAreaClick(fileInput, $event)"
|
|
16
16
|
(keydown.enter)="onAreaClick(fileInput, $event)"
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
<div class="drawer-host-wrapper">
|
|
2
|
-
<a
|
|
2
|
+
<a
|
|
3
|
+
href="/"
|
|
4
|
+
class="h-[60px]"
|
|
5
|
+
[ngClass]="{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }"
|
|
6
|
+
>
|
|
3
7
|
@if (logo) {
|
|
4
8
|
<img
|
|
5
9
|
[src]="logo"
|
|
6
10
|
class="h-[20px] w-auto transition-all duration-300 ease-in-out"
|
|
7
|
-
[ngClass]="{ 'scale-90
|
|
11
|
+
[ngClass]="{ 'scale-90': !isExpanded, 'ml-5': isExpanded }"
|
|
8
12
|
/>
|
|
9
13
|
} @else {
|
|
10
14
|
<div class="h-[30px] w-auto transition-all duration-300 ease-in-out"></div>
|