angular-tailwind-components 1.4.0 → 1.6.0
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/README.md +115 -14
- package/fesm2022/angular-tailwind-components.mjs +333 -129
- package/fesm2022/angular-tailwind-components.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/tailwind.css +173 -72
- package/types/angular-tailwind-components.d.ts +97 -21
package/package.json
CHANGED
package/styles/tailwind.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import 'tailwindcss';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
* Tailwind v4 @source:
|
|
@@ -9,82 +9,183 @@
|
|
|
9
9
|
@source "../**/*.html";
|
|
10
10
|
@source "../**/*.ts";
|
|
11
11
|
|
|
12
|
+
/*
|
|
13
|
+
* `defineTheme({ colors: { primary: 'indigo', … } })` points semantic tokens at `var(--color-<palette>-*)`.
|
|
14
|
+
* Tailwind only emits `--color-<palette>-*` for palettes referenced in scanned content unless we safelist
|
|
15
|
+
* them here (see https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities).
|
|
16
|
+
*/
|
|
17
|
+
@source inline("bg-slate-{50,{100..900..100},950}");
|
|
18
|
+
@source inline("bg-gray-{50,{100..900..100},950}");
|
|
19
|
+
@source inline("bg-zinc-{50,{100..900..100},950}");
|
|
20
|
+
@source inline("bg-neutral-{50,{100..900..100},950}");
|
|
21
|
+
@source inline("bg-stone-{50,{100..900..100},950}");
|
|
22
|
+
@source inline("bg-red-{50,{100..900..100},950}");
|
|
23
|
+
@source inline("bg-orange-{50,{100..900..100},950}");
|
|
24
|
+
@source inline("bg-amber-{50,{100..900..100},950}");
|
|
25
|
+
@source inline("bg-yellow-{50,{100..900..100},950}");
|
|
26
|
+
@source inline("bg-lime-{50,{100..900..100},950}");
|
|
27
|
+
@source inline("bg-green-{50,{100..900..100},950}");
|
|
28
|
+
@source inline("bg-emerald-{50,{100..900..100},950}");
|
|
29
|
+
@source inline("bg-teal-{50,{100..900..100},950}");
|
|
30
|
+
@source inline("bg-cyan-{50,{100..900..100},950}");
|
|
31
|
+
@source inline("bg-sky-{50,{100..900..100},950}");
|
|
32
|
+
@source inline("bg-blue-{50,{100..900..100},950}");
|
|
33
|
+
@source inline("bg-indigo-{50,{100..900..100},950}");
|
|
34
|
+
@source inline("bg-violet-{50,{100..900..100},950}");
|
|
35
|
+
@source inline("bg-purple-{50,{100..900..100},950}");
|
|
36
|
+
@source inline("bg-fuchsia-{50,{100..900..100},950}");
|
|
37
|
+
@source inline("bg-pink-{50,{100..900..100},950}");
|
|
38
|
+
@source inline("bg-rose-{50,{100..900..100},950}");
|
|
39
|
+
|
|
12
40
|
/*
|
|
13
41
|
* Angular Tailwind Components — Design System
|
|
14
42
|
* Customizable theme tokens via Tailwind v4 @theme directive
|
|
15
43
|
*/
|
|
16
44
|
|
|
17
45
|
@theme {
|
|
18
|
-
/* ===== Colors — Primary ===== */
|
|
19
|
-
--color-primary-50:
|
|
20
|
-
--color-primary-100:
|
|
21
|
-
--color-primary-200:
|
|
22
|
-
--color-primary-300:
|
|
23
|
-
--color-primary-400:
|
|
24
|
-
--color-primary-500:
|
|
25
|
-
--color-primary-600:
|
|
26
|
-
--color-primary-700:
|
|
27
|
-
--color-primary-800:
|
|
28
|
-
--color-primary-900:
|
|
29
|
-
--color-primary-950:
|
|
30
|
-
|
|
31
|
-
/* ===== Colors — Neutral /
|
|
32
|
-
--color-
|
|
33
|
-
--color-
|
|
34
|
-
--color-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
--color-
|
|
39
|
-
--color-
|
|
40
|
-
--color-
|
|
41
|
-
--color-
|
|
42
|
-
--color-
|
|
43
|
-
|
|
44
|
-
/* ===== Colors — Semantic ===== */
|
|
45
|
-
--color-success-50:
|
|
46
|
-
--color-success-100:
|
|
47
|
-
--color-success-200:
|
|
48
|
-
--color-success-300:
|
|
49
|
-
--color-success-400:
|
|
50
|
-
--color-success-500:
|
|
51
|
-
--color-success-600:
|
|
52
|
-
--color-success-700:
|
|
53
|
-
--color-success-800:
|
|
54
|
-
--color-success-900:
|
|
55
|
-
|
|
56
|
-
--color-warning-50:
|
|
57
|
-
--color-warning-100:
|
|
58
|
-
--color-warning-200:
|
|
59
|
-
--color-warning-300:
|
|
60
|
-
--color-warning-400:
|
|
61
|
-
--color-warning-500:
|
|
62
|
-
--color-warning-600:
|
|
63
|
-
--color-warning-700:
|
|
64
|
-
--color-warning-800:
|
|
65
|
-
--color-warning-900:
|
|
66
|
-
|
|
67
|
-
--color-danger-50:
|
|
68
|
-
--color-danger-100:
|
|
69
|
-
--color-danger-200:
|
|
70
|
-
--color-danger-300:
|
|
71
|
-
--color-danger-400:
|
|
72
|
-
--color-danger-500:
|
|
73
|
-
--color-danger-600:
|
|
74
|
-
--color-danger-700:
|
|
75
|
-
--color-danger-800:
|
|
76
|
-
--color-danger-900:
|
|
77
|
-
|
|
78
|
-
--color-info-50:
|
|
79
|
-
--color-info-100:
|
|
80
|
-
--color-info-200:
|
|
81
|
-
--color-info-300:
|
|
82
|
-
--color-info-400:
|
|
83
|
-
--color-info-500:
|
|
84
|
-
--color-info-600:
|
|
85
|
-
--color-info-700:
|
|
86
|
-
--color-info-800:
|
|
87
|
-
--color-info-900:
|
|
46
|
+
/* ===== Colors — Primary (default: Tailwind blue scale) ===== */
|
|
47
|
+
--color-primary-50: var(--color-blue-50);
|
|
48
|
+
--color-primary-100: var(--color-blue-100);
|
|
49
|
+
--color-primary-200: var(--color-blue-200);
|
|
50
|
+
--color-primary-300: var(--color-blue-300);
|
|
51
|
+
--color-primary-400: var(--color-blue-400);
|
|
52
|
+
--color-primary-500: var(--color-blue-500);
|
|
53
|
+
--color-primary-600: var(--color-blue-600);
|
|
54
|
+
--color-primary-700: var(--color-blue-700);
|
|
55
|
+
--color-primary-800: var(--color-blue-800);
|
|
56
|
+
--color-primary-900: var(--color-blue-900);
|
|
57
|
+
--color-primary-950: var(--color-blue-950);
|
|
58
|
+
|
|
59
|
+
/* ===== Colors — Neutral / neutral (default: Tailwind slate) ===== */
|
|
60
|
+
--color-neutral-50: var(--color-slate-50);
|
|
61
|
+
--color-neutral-100: var(--color-slate-100);
|
|
62
|
+
--color-neutral-200: var(--color-slate-200);
|
|
63
|
+
--color-neutral-300: var(--color-slate-300);
|
|
64
|
+
--color-neutral-400: var(--color-slate-400);
|
|
65
|
+
--color-neutral-500: var(--color-slate-500);
|
|
66
|
+
--color-neutral-600: var(--color-slate-600);
|
|
67
|
+
--color-neutral-700: var(--color-slate-700);
|
|
68
|
+
--color-neutral-800: var(--color-slate-800);
|
|
69
|
+
--color-neutral-900: var(--color-slate-900);
|
|
70
|
+
--color-neutral-950: var(--color-slate-950);
|
|
71
|
+
|
|
72
|
+
/* ===== Colors — Semantic (Tailwind default palettes) ===== */
|
|
73
|
+
--color-success-50: var(--color-green-50);
|
|
74
|
+
--color-success-100: var(--color-green-100);
|
|
75
|
+
--color-success-200: var(--color-green-200);
|
|
76
|
+
--color-success-300: var(--color-green-300);
|
|
77
|
+
--color-success-400: var(--color-green-400);
|
|
78
|
+
--color-success-500: var(--color-green-500);
|
|
79
|
+
--color-success-600: var(--color-green-600);
|
|
80
|
+
--color-success-700: var(--color-green-700);
|
|
81
|
+
--color-success-800: var(--color-green-800);
|
|
82
|
+
--color-success-900: var(--color-green-900);
|
|
83
|
+
|
|
84
|
+
--color-warning-50: var(--color-amber-50);
|
|
85
|
+
--color-warning-100: var(--color-amber-100);
|
|
86
|
+
--color-warning-200: var(--color-amber-200);
|
|
87
|
+
--color-warning-300: var(--color-amber-300);
|
|
88
|
+
--color-warning-400: var(--color-amber-400);
|
|
89
|
+
--color-warning-500: var(--color-amber-500);
|
|
90
|
+
--color-warning-600: var(--color-amber-600);
|
|
91
|
+
--color-warning-700: var(--color-amber-700);
|
|
92
|
+
--color-warning-800: var(--color-amber-800);
|
|
93
|
+
--color-warning-900: var(--color-amber-900);
|
|
94
|
+
|
|
95
|
+
--color-danger-50: var(--color-red-50);
|
|
96
|
+
--color-danger-100: var(--color-red-100);
|
|
97
|
+
--color-danger-200: var(--color-red-200);
|
|
98
|
+
--color-danger-300: var(--color-red-300);
|
|
99
|
+
--color-danger-400: var(--color-red-400);
|
|
100
|
+
--color-danger-500: var(--color-red-500);
|
|
101
|
+
--color-danger-600: var(--color-red-600);
|
|
102
|
+
--color-danger-700: var(--color-red-700);
|
|
103
|
+
--color-danger-800: var(--color-red-800);
|
|
104
|
+
--color-danger-900: var(--color-red-900);
|
|
105
|
+
|
|
106
|
+
--color-info-50: var(--color-sky-50);
|
|
107
|
+
--color-info-100: var(--color-sky-100);
|
|
108
|
+
--color-info-200: var(--color-sky-200);
|
|
109
|
+
--color-info-300: var(--color-sky-300);
|
|
110
|
+
--color-info-400: var(--color-sky-400);
|
|
111
|
+
--color-info-500: var(--color-sky-500);
|
|
112
|
+
--color-info-600: var(--color-sky-600);
|
|
113
|
+
--color-info-700: var(--color-sky-700);
|
|
114
|
+
--color-info-800: var(--color-sky-800);
|
|
115
|
+
--color-info-900: var(--color-sky-900);
|
|
116
|
+
|
|
117
|
+
/*
|
|
118
|
+
* Foreground on semantic backgrounds (`text-on-success-600`, …).
|
|
119
|
+
* `defineTheme` may set `--color-on-<semantic>-<shade>` when colors use `{ shades, on }`.
|
|
120
|
+
* String palettes inherit these defaults (tuned for default Tailwind scales).
|
|
121
|
+
*/
|
|
122
|
+
--color-on-primary-50: var(--color-neutral-900);
|
|
123
|
+
--color-on-primary-100: var(--color-neutral-900);
|
|
124
|
+
--color-on-primary-200: var(--color-neutral-900);
|
|
125
|
+
--color-on-primary-300: var(--color-neutral-900);
|
|
126
|
+
--color-on-primary-400: var(--color-neutral-900);
|
|
127
|
+
--color-on-primary-500: #ffffff;
|
|
128
|
+
--color-on-primary-600: #ffffff;
|
|
129
|
+
--color-on-primary-700: #ffffff;
|
|
130
|
+
--color-on-primary-800: #ffffff;
|
|
131
|
+
--color-on-primary-900: #ffffff;
|
|
132
|
+
--color-on-primary-950: #ffffff;
|
|
133
|
+
|
|
134
|
+
--color-on-neutral-50: var(--color-neutral-900);
|
|
135
|
+
--color-on-neutral-100: var(--color-neutral-900);
|
|
136
|
+
--color-on-neutral-200: var(--color-neutral-900);
|
|
137
|
+
--color-on-neutral-300: var(--color-neutral-900);
|
|
138
|
+
--color-on-neutral-400: var(--color-neutral-900);
|
|
139
|
+
--color-on-neutral-500: var(--color-neutral-900);
|
|
140
|
+
--color-on-neutral-600: #ffffff;
|
|
141
|
+
--color-on-neutral-700: #ffffff;
|
|
142
|
+
--color-on-neutral-800: #ffffff;
|
|
143
|
+
--color-on-neutral-900: #ffffff;
|
|
144
|
+
--color-on-neutral-950: #ffffff;
|
|
145
|
+
|
|
146
|
+
--color-on-success-50: var(--color-neutral-900);
|
|
147
|
+
--color-on-success-100: var(--color-neutral-900);
|
|
148
|
+
--color-on-success-200: var(--color-neutral-900);
|
|
149
|
+
--color-on-success-300: var(--color-neutral-900);
|
|
150
|
+
--color-on-success-400: var(--color-neutral-900);
|
|
151
|
+
--color-on-success-500: #ffffff;
|
|
152
|
+
--color-on-success-600: #ffffff;
|
|
153
|
+
--color-on-success-700: #ffffff;
|
|
154
|
+
--color-on-success-800: #ffffff;
|
|
155
|
+
--color-on-success-900: #ffffff;
|
|
156
|
+
|
|
157
|
+
--color-on-warning-50: var(--color-neutral-900);
|
|
158
|
+
--color-on-warning-100: var(--color-neutral-900);
|
|
159
|
+
--color-on-warning-200: var(--color-neutral-900);
|
|
160
|
+
--color-on-warning-300: var(--color-neutral-900);
|
|
161
|
+
--color-on-warning-400: var(--color-neutral-900);
|
|
162
|
+
--color-on-warning-500: var(--color-neutral-900);
|
|
163
|
+
--color-on-warning-600: #ffffff;
|
|
164
|
+
--color-on-warning-700: #ffffff;
|
|
165
|
+
--color-on-warning-800: #ffffff;
|
|
166
|
+
--color-on-warning-900: #ffffff;
|
|
167
|
+
|
|
168
|
+
--color-on-danger-50: var(--color-neutral-900);
|
|
169
|
+
--color-on-danger-100: var(--color-neutral-900);
|
|
170
|
+
--color-on-danger-200: var(--color-neutral-900);
|
|
171
|
+
--color-on-danger-300: var(--color-neutral-900);
|
|
172
|
+
--color-on-danger-400: var(--color-neutral-900);
|
|
173
|
+
--color-on-danger-500: #ffffff;
|
|
174
|
+
--color-on-danger-600: #ffffff;
|
|
175
|
+
--color-on-danger-700: #ffffff;
|
|
176
|
+
--color-on-danger-800: #ffffff;
|
|
177
|
+
--color-on-danger-900: #ffffff;
|
|
178
|
+
|
|
179
|
+
--color-on-info-50: var(--color-neutral-900);
|
|
180
|
+
--color-on-info-100: var(--color-neutral-900);
|
|
181
|
+
--color-on-info-200: var(--color-neutral-900);
|
|
182
|
+
--color-on-info-300: var(--color-neutral-900);
|
|
183
|
+
--color-on-info-400: var(--color-neutral-900);
|
|
184
|
+
--color-on-info-500: #ffffff;
|
|
185
|
+
--color-on-info-600: #ffffff;
|
|
186
|
+
--color-on-info-700: #ffffff;
|
|
187
|
+
--color-on-info-800: #ffffff;
|
|
188
|
+
--color-on-info-900: #ffffff;
|
|
88
189
|
|
|
89
190
|
/* ===== Typography ===== */
|
|
90
191
|
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
@@ -114,7 +215,7 @@
|
|
|
114
215
|
--shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.07), 0 2px 4px -2px oklch(0 0 0 / 0.07);
|
|
115
216
|
--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.08), 0 4px 6px -4px oklch(0 0 0 / 0.08);
|
|
116
217
|
--shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.08), 0 8px 10px -6px oklch(0 0 0 / 0.08);
|
|
117
|
-
--shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.
|
|
218
|
+
--shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.2);
|
|
118
219
|
|
|
119
220
|
/* ===== Transitions ===== */
|
|
120
221
|
--transition-timing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -8,7 +8,7 @@ type TailwindSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
8
8
|
/** Color variants for buttons and interactive elements */
|
|
9
9
|
type TailwindColor = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info';
|
|
10
10
|
/** Button kinds */
|
|
11
|
-
type TailwindButtonKind = 'solid' | 'outlined' | 'ghost' | 'text';
|
|
11
|
+
type TailwindButtonKind = 'solid' | 'flat' | 'outlined' | 'ghost' | 'text';
|
|
12
12
|
/** Alert/feedback color variants */
|
|
13
13
|
type TailwindSeverity = 'success' | 'warning' | 'danger' | 'info';
|
|
14
14
|
/** Position variants for overlays */
|
|
@@ -115,17 +115,22 @@ declare abstract class TailwindComponent {
|
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
declare class TailwindButton extends TailwindComponent {
|
|
118
|
+
private readonly defaultKind;
|
|
118
119
|
/** Visual color */
|
|
119
120
|
readonly color: _angular_core.InputSignal<TailwindColor>;
|
|
120
|
-
/**
|
|
121
|
+
/**
|
|
122
|
+
* Visual kind: `flat` = filled like `solid` without border or shadow;
|
|
123
|
+
* `ghost` = transparent with hover tint; `text` = text color only, no hover background.
|
|
124
|
+
* Default from {@link TAILWIND_BUTTON_KIND} or `'solid'`.
|
|
125
|
+
*/
|
|
121
126
|
readonly kind: _angular_core.InputSignal<TailwindButtonKind>;
|
|
122
127
|
/** Size of the button */
|
|
123
128
|
readonly size: _angular_core.InputSignal<TailwindSize>;
|
|
124
129
|
/** Whether the button is disabled */
|
|
125
130
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
126
131
|
/** HTML button type attribute */
|
|
127
|
-
readonly type: _angular_core.InputSignal<"button" | "
|
|
128
|
-
/** Emitted when the button is clicked (not disabled
|
|
132
|
+
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
133
|
+
/** Emitted when the button is clicked (not disabled). */
|
|
129
134
|
readonly onClick: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
130
135
|
/** Computed Tailwind classes based on color, kind, size, and state */
|
|
131
136
|
readonly computedClasses: _angular_core.Signal<string>;
|
|
@@ -193,7 +198,7 @@ declare class TailwindTextarea extends TailwindComponent implements ControlValue
|
|
|
193
198
|
/** Maximum character length (HTML maxlength) */
|
|
194
199
|
readonly maxlength: _angular_core.InputSignal<number | undefined>;
|
|
195
200
|
/** Resize behavior */
|
|
196
|
-
readonly resize: _angular_core.InputSignal<"
|
|
201
|
+
readonly resize: _angular_core.InputSignal<"horizontal" | "vertical" | "none" | "both">;
|
|
197
202
|
/** Size variant */
|
|
198
203
|
readonly size: _angular_core.InputSignal<TailwindSize>;
|
|
199
204
|
/** Whether the textarea is readonly */
|
|
@@ -227,7 +232,7 @@ declare class TailwindUpload extends TailwindComponent implements ControlValueAc
|
|
|
227
232
|
private readonly fallbackFileId;
|
|
228
233
|
readonly fileInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
|
|
229
234
|
/** Visual layout: compact button or drop zone */
|
|
230
|
-
readonly variant: _angular_core.InputSignal<"
|
|
235
|
+
readonly variant: _angular_core.InputSignal<"button" | "area">;
|
|
231
236
|
/** Field label */
|
|
232
237
|
readonly label: _angular_core.InputSignal<string>;
|
|
233
238
|
/** Button label when `variant` is `button` */
|
|
@@ -382,7 +387,7 @@ declare class TailwindRadioGroup<T = unknown> extends TailwindComponent implemen
|
|
|
382
387
|
/** Size variant */
|
|
383
388
|
readonly size: _angular_core.InputSignal<TailwindSize>;
|
|
384
389
|
/** Layout orientation */
|
|
385
|
-
readonly orientation: _angular_core.InputSignal<"
|
|
390
|
+
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
386
391
|
/** Currently selected value */
|
|
387
392
|
readonly value: _angular_core.ModelSignal<T | null>;
|
|
388
393
|
/** Internal disabled state */
|
|
@@ -567,7 +572,7 @@ declare class TailwindSpinner extends TailwindComponent {
|
|
|
567
572
|
/** Aria label for accessibility */
|
|
568
573
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
569
574
|
/** Layout orientation */
|
|
570
|
-
readonly orientation: _angular_core.InputSignal<"
|
|
575
|
+
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
571
576
|
readonly containerClasses: _angular_core.Signal<string>;
|
|
572
577
|
readonly spinnerClasses: _angular_core.Signal<string>;
|
|
573
578
|
readonly labelClasses: _angular_core.Signal<string>;
|
|
@@ -1108,14 +1113,27 @@ declare class TailwindToolbar extends TailwindComponent {
|
|
|
1108
1113
|
readonly width: _angular_core.InputSignal<"full" | "container">;
|
|
1109
1114
|
/** Applies a stronger drop shadow. */
|
|
1110
1115
|
readonly elevated: _angular_core.InputSignal<boolean>;
|
|
1116
|
+
/**
|
|
1117
|
+
* Colore di superficie della barra: `default` mantiene sfondo bianco;
|
|
1118
|
+
* i valori `TailwindSeverity` applicano tinte semantiche (come alert/notification).
|
|
1119
|
+
*/
|
|
1120
|
+
readonly variant: _angular_core.InputSignal<TailwindSeverity | "default">;
|
|
1111
1121
|
/** `horizontal` for a top app bar; `vertical` for a side rail (logo → menu → end). */
|
|
1112
|
-
readonly orientation: _angular_core.InputSignal<"
|
|
1122
|
+
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
1113
1123
|
/** Navigation / actions rendered between logo and end slots. */
|
|
1114
1124
|
readonly menu: _angular_core.InputSignal<TailwindMenuItem[]>;
|
|
1115
1125
|
/** Emitted when a non-disabled, non-divider menu entry is activated. */
|
|
1116
1126
|
readonly onMenuSelect: _angular_core.OutputEmitterRef<TailwindMenuItem>;
|
|
1117
1127
|
readonly menuContainerClasses: _angular_core.Signal<"min-w-0 flex-1 flex flex-row flex-wrap items-center gap-1" | "min-w-0 flex-1 flex flex-col gap-1.5 overflow-y-auto min-h-0">;
|
|
1118
|
-
|
|
1128
|
+
/** Foreground on semantic surface (`text-on-*`), aligned with solid toolbar shade per variant. */
|
|
1129
|
+
readonly variantContrastTextClass: _angular_core.Signal<string | null>;
|
|
1130
|
+
/** Heroicons are `<img>`; on light-on-color variants tint SVG strokes to match `text-on-*`. */
|
|
1131
|
+
readonly menuItemIconClasses: _angular_core.Signal<"toolbar-menu-icon-on-light" | "">;
|
|
1132
|
+
readonly menuItemToneClasses: _angular_core.Signal<string>;
|
|
1133
|
+
readonly menuItemButtonClasses: _angular_core.Signal<string>;
|
|
1134
|
+
readonly mobileMenuToggleClasses: _angular_core.Signal<string>;
|
|
1135
|
+
readonly menuDividerLineClasses: _angular_core.Signal<"mx-0.5 h-5 w-px shrink-0 self-center bg-neutral-200" | "mx-0.5 h-5 w-px shrink-0 self-center bg-white/30">;
|
|
1136
|
+
readonly menuDividerRuleClasses: _angular_core.Signal<"my-1 w-full border-0 border-t border-neutral-100" | "my-1 w-full border-0 border-t border-white/25">;
|
|
1119
1137
|
readonly rootClasses: _angular_core.Signal<string>;
|
|
1120
1138
|
selectMenuItem(item: TailwindMenuItem): void;
|
|
1121
1139
|
/** True when `label` is a non-empty string after trim (icon-only entries omit or blank `label`). */
|
|
@@ -1124,12 +1142,12 @@ declare class TailwindToolbar extends TailwindComponent {
|
|
|
1124
1142
|
menuItemAriaLabel(item: TailwindMenuItem): string | null;
|
|
1125
1143
|
menuTrackKey(index: number, item: TailwindMenuItem): string;
|
|
1126
1144
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindToolbar, never>;
|
|
1127
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindToolbar, "tailwind-toolbar", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; }, { "onMenuSelect": "onMenuSelect"; }, never, ["[tailwind-toolbar-logo]", "[tailwind-toolbar-end]"], true, never>;
|
|
1145
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindToolbar, "tailwind-toolbar", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; }, { "onMenuSelect": "onMenuSelect"; }, never, ["[tailwind-toolbar-logo]", "[tailwind-toolbar-end]"], true, never>;
|
|
1128
1146
|
}
|
|
1129
1147
|
|
|
1130
1148
|
declare class TailwindDivider extends TailwindComponent {
|
|
1131
1149
|
/** Rule direction */
|
|
1132
|
-
readonly orientation: _angular_core.InputSignal<"
|
|
1150
|
+
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
1133
1151
|
/** Adds horizontal margin to the rule (horizontal orientation only). */
|
|
1134
1152
|
readonly inset: _angular_core.InputSignal<boolean>;
|
|
1135
1153
|
/** Border style for the rule */
|
|
@@ -1196,7 +1214,7 @@ declare class TailwindSlider extends TailwindComponent implements ControlValueAc
|
|
|
1196
1214
|
/** Two-thumb range mode */
|
|
1197
1215
|
readonly range: _angular_core.InputSignal<boolean>;
|
|
1198
1216
|
/** Layout */
|
|
1199
|
-
readonly orientation: _angular_core.InputSignal<"
|
|
1217
|
+
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
1200
1218
|
/** Tick marks at each step */
|
|
1201
1219
|
readonly showTicks: _angular_core.InputSignal<boolean>;
|
|
1202
1220
|
/** Control size */
|
|
@@ -1256,15 +1274,42 @@ declare const TAILWIND_MODAL_DATA: InjectionToken<unknown>;
|
|
|
1256
1274
|
declare const TAILWIND_ICON_SIZE: InjectionToken<number>;
|
|
1257
1275
|
declare const TAILWIND_DATETIME_LANGUAGE: InjectionToken<"it" | "en">;
|
|
1258
1276
|
declare const TAILWIND_COMPONENTS_SIZE: InjectionToken<TailwindSize>;
|
|
1277
|
+
/** Default `kind` for `tailwind-button` when the `kind` input is omitted. */
|
|
1278
|
+
declare const TAILWIND_BUTTON_KIND: InjectionToken<TailwindButtonKind>;
|
|
1259
1279
|
/**
|
|
1260
1280
|
* Default template for `tailwind-pagination` **summary** when the `summary` input is omitted.
|
|
1261
1281
|
* Use placeholders `{start}`, `{end}`, `{total}` (same rules as the `summary` input).
|
|
1262
1282
|
*/
|
|
1263
1283
|
declare const TAILWIND_PAGINATION_SUMMARY: InjectionToken<string>;
|
|
1264
1284
|
|
|
1285
|
+
/** Semantic color groups used by library components (maps to `--color-<name>-<shade>`). */
|
|
1286
|
+
type TailwindThemeSemantic = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
|
|
1287
|
+
/** Shade keys aligned with Tailwind default scales and this library’s `@theme` tokens. */
|
|
1288
|
+
type TailwindThemeColorShade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
|
|
1289
|
+
/** Explicit semantic palette shades only (legacy flat object form for `defineTheme` colors). */
|
|
1290
|
+
type TailwindThemeSemanticShades = Partial<Record<TailwindThemeColorShade, string>>;
|
|
1291
|
+
/**
|
|
1292
|
+
* Structured palette: background `shades` plus optional foreground `on` per shade.
|
|
1293
|
+
* Emitted as `--color-<semantic>-<shade>` and `--color-on-<semantic>-<shade>`.
|
|
1294
|
+
*/
|
|
1295
|
+
type TailwindThemeSemanticPaletteObject = {
|
|
1296
|
+
shades: TailwindThemeSemanticShades;
|
|
1297
|
+
on?: TailwindThemeSemanticShades;
|
|
1298
|
+
};
|
|
1299
|
+
/**
|
|
1300
|
+
* Values for each `colors` entry in {@link TailwindDefineThemeConfig} (exported type name).
|
|
1301
|
+
*
|
|
1302
|
+
* - **String:** Tailwind palette family name (lowercase), e.g. `'indigo'` for utilities like `bg-indigo-600`.
|
|
1303
|
+
* See the [Tailwind color reference](https://tailwindcss.com/docs/colors) for all built-in names and previews.
|
|
1304
|
+
* Each semantic shade is mapped to `var(--color-<name>-<shade>)`.
|
|
1305
|
+
* - **Flat object:** `Partial<Record<shade, string>>` — explicit CSS colors per shade (`'50'` … `'950'`); same as `{ shades: { … } }`.
|
|
1306
|
+
* - **Structured object:** `{ shades, on? }` — optional `on` defines foreground (contrast) per shade; written as `--color-on-<semantic>-<shade>`.
|
|
1307
|
+
*/
|
|
1308
|
+
type TailwindThemeSeverityColor = string | TailwindThemeSemanticPaletteObject | TailwindThemeSemanticShades;
|
|
1309
|
+
|
|
1265
1310
|
/**
|
|
1266
1311
|
* Optional app-wide values for library `InjectionToken`s.
|
|
1267
|
-
* Pass only the keys you need; {@link
|
|
1312
|
+
* Pass only the keys you need; {@link defineTheme} registers matching `Provider`s.
|
|
1268
1313
|
*/
|
|
1269
1314
|
interface TailwindComponentsConfig {
|
|
1270
1315
|
/** Maps to {@link TAILWIND_ICON_SIZE} (default icon pixel size when omitted). */
|
|
@@ -1273,19 +1318,50 @@ interface TailwindComponentsConfig {
|
|
|
1273
1318
|
datetimeLanguage?: 'it' | 'en';
|
|
1274
1319
|
/** Maps to {@link TAILWIND_COMPONENTS_SIZE}. */
|
|
1275
1320
|
componentsSize?: TailwindSize;
|
|
1321
|
+
/** Maps to {@link TAILWIND_BUTTON_KIND} (default `kind` on `tailwind-button`). */
|
|
1322
|
+
buttonKind?: TailwindButtonKind;
|
|
1276
1323
|
/** Maps to {@link TAILWIND_PAGINATION_SUMMARY}. */
|
|
1277
1324
|
paginationSummary?: string;
|
|
1325
|
+
}
|
|
1326
|
+
interface TailwindDefineThemeColors {
|
|
1327
|
+
primary?: TailwindThemeSeverityColor;
|
|
1328
|
+
neutral?: TailwindThemeSeverityColor;
|
|
1329
|
+
success?: TailwindThemeSeverityColor;
|
|
1330
|
+
warning?: TailwindThemeSeverityColor;
|
|
1331
|
+
danger?: TailwindThemeSeverityColor;
|
|
1278
1332
|
/**
|
|
1279
|
-
*
|
|
1280
|
-
*
|
|
1333
|
+
* Alias for {@link TailwindDefineThemeColors.danger}; writes the same `--color-danger-*` variables.
|
|
1334
|
+
* Ignored when `danger` is set.
|
|
1281
1335
|
*/
|
|
1282
|
-
|
|
1336
|
+
error?: TailwindThemeSeverityColor;
|
|
1337
|
+
info?: TailwindThemeSeverityColor;
|
|
1338
|
+
}
|
|
1339
|
+
interface TailwindDefineThemeConfig extends TailwindComponentsConfig {
|
|
1340
|
+
/** Overrides semantic colors on `:root` at startup (browser only). */
|
|
1341
|
+
colors?: TailwindDefineThemeColors;
|
|
1283
1342
|
}
|
|
1343
|
+
|
|
1284
1344
|
/**
|
|
1285
|
-
* Registers environment-scoped providers for
|
|
1286
|
-
*
|
|
1345
|
+
* Registers environment-scoped providers for library injection tokens only (no theme `colors`).
|
|
1346
|
+
* Prefer {@link defineTheme}, which registers the same tokens when set plus optional CSS variables.
|
|
1347
|
+
*
|
|
1348
|
+
* @deprecated Use {@link defineTheme} with the same fields (`iconSize`, `datetimeLanguage`, etc.).
|
|
1287
1349
|
*/
|
|
1288
1350
|
declare function provideTailwindComponents(config: TailwindComponentsConfig): EnvironmentProviders;
|
|
1351
|
+
/**
|
|
1352
|
+
* Builds `[CSS custom property name, value]` pairs for {@link defineTheme}.
|
|
1353
|
+
* Exported for unit tests.
|
|
1354
|
+
*/
|
|
1355
|
+
declare function buildTailwindThemeVariableEntries(config: TailwindDefineThemeConfig): Array<[string, string]>;
|
|
1356
|
+
/**
|
|
1357
|
+
* Registers environment-scoped library defaults: optional **injection tokens** from {@link TailwindComponentsConfig}
|
|
1358
|
+
* plus an app initializer that applies optional **`colors`** on
|
|
1359
|
+
* `document.documentElement` in the browser. Add as a single entry in `providers` (no spread).
|
|
1360
|
+
*
|
|
1361
|
+
* Palette **strings** (e.g. `'indigo'`) rely on `--color-indigo-*` existing in the CSS bundle; the
|
|
1362
|
+
* library stylesheet safelists Tailwind’s default palette names for that reason.
|
|
1363
|
+
*/
|
|
1364
|
+
declare function defineTheme(config: TailwindDefineThemeConfig): EnvironmentProviders;
|
|
1289
1365
|
|
|
1290
1366
|
declare class TailwindModalRef<R = any> {
|
|
1291
1367
|
private _closeFn;
|
|
@@ -1298,5 +1374,5 @@ declare class TailwindModalRef<R = any> {
|
|
|
1298
1374
|
_getResult(): R | undefined;
|
|
1299
1375
|
}
|
|
1300
1376
|
|
|
1301
|
-
export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, provideTailwindComponents };
|
|
1302
|
-
export type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindColor, TailwindComponentsConfig, TailwindHeroicon, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindTableSortHost, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };
|
|
1377
|
+
export { TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
|
|
1378
|
+
export type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindColor, TailwindComponentsConfig, TailwindDefineThemeColors, TailwindDefineThemeConfig, TailwindHeroicon, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindTableSortHost, TailwindThemeColorShade, TailwindThemeSemantic, TailwindThemeSemanticPaletteObject, TailwindThemeSemanticShades, TailwindThemeSeverityColor, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };
|