wally-ui 1.8.0 → 1.10.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/package.json +1 -1
- package/playground/showcase/src/app/components/button/button.html +11 -27
- package/playground/showcase/src/app/components/button/button.ts +3 -0
- package/playground/showcase/src/app/components/carousel/carousel.html +39 -25
- package/playground/showcase/src/app/components/carousel/carousel.ts +80 -104
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +4 -0
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +136 -55
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +4 -0
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.examples.ts +99 -15
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +475 -46
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.ts +13 -1
- package/playground/showcase/src/app/pages/documentation/documentation.html +83 -79
- package/playground/showcase/src/app/pages/documentation/documentation.ts +5 -1
- package/playground/showcase/src/app/pages/home/home.html +69 -45
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/index.html +55 -4
package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html
CHANGED
|
@@ -7,18 +7,10 @@
|
|
|
7
7
|
<h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
|
|
8
8
|
Carousel
|
|
9
9
|
</h1>
|
|
10
|
-
<p class="text-gray-700 dark:text-gray-400 mb-
|
|
11
|
-
A carousel component with navigation controls, touch gestures, and smooth transitions.
|
|
10
|
+
<p class="text-gray-700 dark:text-gray-400 mb-6">
|
|
11
|
+
A fully responsive carousel component with navigation controls, touch/swipe gestures, keyboard accessibility, and smooth transitions. Built with comprehensive accessibility features and optimized performance.
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
|
-
<!-- Under Construction Badge -->
|
|
15
|
-
<div class="mb-6">
|
|
16
|
-
<span class="text-xs bg-yellow-500 text-black px-3 py-1 rounded-full font-medium">Under Construction</span>
|
|
17
|
-
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
|
|
18
|
-
This component is actively being developed. Touch gestures, accessibility, and customization options are coming soon.
|
|
19
|
-
</p>
|
|
20
|
-
</div>
|
|
21
|
-
|
|
22
14
|
<!-- AI Prompts -->
|
|
23
15
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
24
16
|
<a [href]="claudeUrl" target="_blank"
|
|
@@ -63,17 +55,20 @@
|
|
|
63
55
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Preview</h2>
|
|
64
56
|
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
65
57
|
<div class="flex justify-center">
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
58
|
+
<div class="w-96 h-96">
|
|
59
|
+
<wally-carousel>
|
|
60
|
+
<div class="w-full h-full bg-blue-500 text-white flex items-center justify-center text-lg font-semibold">
|
|
61
|
+
Slide 1
|
|
62
|
+
</div>
|
|
63
|
+
<div class="w-full h-full bg-green-500 text-white flex items-center justify-center text-lg font-semibold">
|
|
64
|
+
Slide 2
|
|
65
|
+
</div>
|
|
66
|
+
<div
|
|
67
|
+
class="w-full h-full bg-purple-500 text-white flex items-center justify-center text-lg font-semibold">
|
|
68
|
+
Slide 3
|
|
69
|
+
</div>
|
|
70
|
+
</wally-carousel>
|
|
71
|
+
</div>
|
|
77
72
|
</div>
|
|
78
73
|
</div>
|
|
79
74
|
</section>
|
|
@@ -95,23 +90,96 @@
|
|
|
95
90
|
<!-- Basic Usage -->
|
|
96
91
|
<section class="mb-8">
|
|
97
92
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Basic Usage</h2>
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
</
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
93
|
+
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
94
|
+
Simple carousel setup - just wrap your content elements. No configuration required.
|
|
95
|
+
</p>
|
|
96
|
+
|
|
97
|
+
<!-- Simple Example -->
|
|
98
|
+
<div class="mb-8">
|
|
99
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Simple Carousel</h3>
|
|
100
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
101
|
+
<pre><code [innerHTML]="basicUsageCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
104
|
+
<div class="flex justify-center">
|
|
105
|
+
<div class="w-96 h-96">
|
|
106
|
+
<wally-carousel>
|
|
107
|
+
<div class="w-full h-full bg-blue-400 text-white flex items-center justify-center text-lg font-semibold">
|
|
108
|
+
Item 1
|
|
109
|
+
</div>
|
|
110
|
+
<div class="w-full h-full bg-green-400 text-white flex items-center justify-center text-lg font-semibold">
|
|
111
|
+
Item 2
|
|
112
|
+
</div>
|
|
113
|
+
</wally-carousel>
|
|
106
114
|
</div>
|
|
107
|
-
|
|
108
|
-
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<!-- With Navigation Indicators -->
|
|
120
|
+
<div class="mb-8">
|
|
121
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">With Navigation Indicators</h3>
|
|
122
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
123
|
+
<pre><code [innerHTML]="withNavigationIndicatorsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
126
|
+
<div class="flex justify-center">
|
|
127
|
+
<div class="w-96 h-96">
|
|
128
|
+
<wally-carousel [isNavigationIndicator]="true">
|
|
129
|
+
<div class="w-full h-full bg-orange-400 text-white flex items-center justify-center text-lg font-semibold">
|
|
130
|
+
Item 1
|
|
131
|
+
</div>
|
|
132
|
+
<div class="w-full h-full bg-red-400 text-white flex items-center justify-center text-lg font-semibold">
|
|
133
|
+
Item 2
|
|
134
|
+
</div>
|
|
135
|
+
</wally-carousel>
|
|
109
136
|
</div>
|
|
110
|
-
</
|
|
137
|
+
</div>
|
|
111
138
|
</div>
|
|
112
139
|
</div>
|
|
140
|
+
|
|
141
|
+
<!-- Product Showcase -->
|
|
142
|
+
<div class="mb-8">
|
|
143
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Product Showcase</h3>
|
|
144
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
145
|
+
<pre><code [innerHTML]="productShowcaseCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
148
|
+
<div class="w-full h-96">
|
|
149
|
+
<wally-carousel>
|
|
150
|
+
<div class="w-full h-full bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-gray-700 rounded-lg p-8 flex flex-col items-center justify-center">
|
|
151
|
+
<div class="w-24 h-24 bg-blue-500 rounded mb-6"></div>
|
|
152
|
+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">MacBook Pro</h3>
|
|
153
|
+
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">M3 chip, 16GB RAM, 512GB SSD</p>
|
|
154
|
+
<span class="text-2xl font-bold text-blue-600">$1,999</span>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="w-full h-full bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-gray-700 rounded-lg p-8 flex flex-col items-center justify-center">
|
|
157
|
+
<div class="w-24 h-24 bg-green-500 rounded mb-6"></div>
|
|
158
|
+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">iPhone 15</h3>
|
|
159
|
+
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">128GB, Dynamic Island, USB-C</p>
|
|
160
|
+
<span class="text-2xl font-bold text-green-600">$799</span>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="w-full h-full bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-gray-700 rounded-lg p-8 flex flex-col items-center justify-center">
|
|
163
|
+
<div class="w-24 h-24 bg-purple-500 rounded mb-6"></div>
|
|
164
|
+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">iPad Air</h3>
|
|
165
|
+
<p class="text-gray-600 dark:text-gray-400 text-center mb-4">10.9-inch, M2 chip, Wi-Fi</p>
|
|
166
|
+
<span class="text-2xl font-bold text-purple-600">$599</span>
|
|
167
|
+
</div>
|
|
168
|
+
</wally-carousel>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
|
174
|
+
<h3 class="font-medium text-amber-900 dark:text-amber-100 mb-2">Tip</h3>
|
|
175
|
+
<p class="text-sm text-amber-800 dark:text-amber-200">
|
|
176
|
+
The carousel automatically detects child elements and creates navigation.
|
|
177
|
+
Try swiping on mobile or using keyboard arrows when focused!
|
|
178
|
+
</p>
|
|
179
|
+
</div>
|
|
113
180
|
</section>
|
|
114
181
|
|
|
182
|
+
|
|
115
183
|
<!-- Advanced Examples -->
|
|
116
184
|
<section class="mb-8">
|
|
117
185
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Advanced Examples</h2>
|
|
@@ -124,33 +192,394 @@
|
|
|
124
192
|
</div>
|
|
125
193
|
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
126
194
|
<div class="flex justify-center">
|
|
127
|
-
<
|
|
128
|
-
<
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<
|
|
195
|
+
<div class="w-96 h-96">
|
|
196
|
+
<wally-carousel>
|
|
197
|
+
<div
|
|
198
|
+
class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
|
|
199
|
+
<h3 class="text-xl font-bold mb-2">Feature 1</h3>
|
|
200
|
+
<p class="text-center text-sm">This is a custom slide with rich content</p>
|
|
201
|
+
</div>
|
|
202
|
+
<div
|
|
203
|
+
class="w-full h-full bg-gradient-to-r from-green-500 to-blue-500 text-white flex flex-col items-center justify-center p-6">
|
|
204
|
+
<h3 class="text-xl font-bold mb-2">Feature 2</h3>
|
|
205
|
+
<p class="text-center text-sm">Another slide with different styling</p>
|
|
206
|
+
</div>
|
|
207
|
+
<div
|
|
208
|
+
class="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex flex-col items-center justify-center p-6">
|
|
209
|
+
<h3 class="text-xl font-bold mb-2">Feature 3</h3>
|
|
210
|
+
<p class="text-center text-sm">Beautiful gradients and typography</p>
|
|
211
|
+
</div>
|
|
212
|
+
</wally-carousel>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</section>
|
|
218
|
+
|
|
219
|
+
<!-- Responsive Design -->
|
|
220
|
+
<section class="mb-8">
|
|
221
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Responsive Design</h2>
|
|
222
|
+
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
223
|
+
The carousel is 100% responsive and adapts to any container size. Simply set the parent container dimensions and
|
|
224
|
+
the carousel will fill it completely.
|
|
225
|
+
</p>
|
|
226
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
227
|
+
<pre><code [innerHTML]="responsiveExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<!-- Live Examples -->
|
|
231
|
+
<div class="space-y-6">
|
|
232
|
+
<!-- Hero style -->
|
|
233
|
+
<div>
|
|
234
|
+
<h3 class="text-md font-medium mb-2 text-[#0a0a0a] dark:text-white">Hero Carousel (w-full h-96)</h3>
|
|
235
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
236
|
+
<div class="w-full h-96">
|
|
237
|
+
<wally-carousel>
|
|
238
|
+
<div
|
|
239
|
+
class="w-full h-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
|
|
240
|
+
<h3 class="text-2xl font-bold mb-2">Hero Slide 1</h3>
|
|
241
|
+
<p class="text-center">Perfect for landing page heroes</p>
|
|
242
|
+
</div>
|
|
243
|
+
<div
|
|
244
|
+
class="w-full h-full bg-gradient-to-r from-purple-600 to-pink-600 text-white flex flex-col items-center justify-center p-6">
|
|
245
|
+
<h3 class="text-2xl font-bold mb-2">Hero Slide 2</h3>
|
|
246
|
+
<p class="text-center">Responsive and touch-friendly</p>
|
|
247
|
+
</div>
|
|
248
|
+
</wally-carousel>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<!-- Compact style -->
|
|
254
|
+
<div>
|
|
255
|
+
<h3 class="text-md font-medium mb-2 text-[#0a0a0a] dark:text-white">Compact Carousel (w-full h-48)</h3>
|
|
256
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
257
|
+
<div class="w-full h-48">
|
|
258
|
+
<wally-carousel>
|
|
259
|
+
<div
|
|
260
|
+
class="w-full h-full bg-gradient-to-r from-emerald-500 to-teal-600 text-white flex items-center justify-center p-4">
|
|
261
|
+
<div class="text-center">
|
|
262
|
+
<h4 class="text-lg font-semibold mb-1">Compact Design</h4>
|
|
263
|
+
<p class="text-sm">Great for testimonials</p>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
<div
|
|
267
|
+
class="w-full h-full bg-gradient-to-r from-teal-600 to-cyan-600 text-white flex items-center justify-center p-4">
|
|
268
|
+
<div class="text-center">
|
|
269
|
+
<h4 class="text-lg font-semibold mb-1">Mobile Friendly</h4>
|
|
270
|
+
<p class="text-sm">Swipe gestures included</p>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</wally-carousel>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
</section>
|
|
279
|
+
|
|
280
|
+
<!-- Accessibility -->
|
|
281
|
+
<section class="mb-8">
|
|
282
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Accessibility</h2>
|
|
283
|
+
<p class="text-gray-700 dark:text-gray-400 mb-6">
|
|
284
|
+
The carousel is built with comprehensive accessibility features and follows WCAG guidelines for inclusive design.
|
|
285
|
+
</p>
|
|
286
|
+
|
|
287
|
+
<div class="space-y-8">
|
|
288
|
+
<!-- ARIA Attributes -->
|
|
289
|
+
<div>
|
|
290
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">ARIA Attributes</h3>
|
|
291
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
292
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
293
|
+
<div class="space-y-3">
|
|
294
|
+
<div>
|
|
295
|
+
<code class="text-sm dark:text-white bg-gray-200 dark:bg-[#1a1a1a] px-2 py-1 rounded">role="region"</code>
|
|
296
|
+
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Identifies the carousel as a landmark region</p>
|
|
297
|
+
</div>
|
|
298
|
+
<div>
|
|
299
|
+
<code class="text-sm dark:text-white bg-gray-200 dark:bg-[#1a1a1a] px-2 py-1 rounded">aria-label="Carousel"</code>
|
|
300
|
+
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Provides accessible name for screen readers</p>
|
|
301
|
+
</div>
|
|
135
302
|
</div>
|
|
136
|
-
<div class="
|
|
137
|
-
<
|
|
138
|
-
|
|
303
|
+
<div class="space-y-3">
|
|
304
|
+
<div>
|
|
305
|
+
<code class="text-sm dark:text-white bg-gray-200 dark:bg-[#1a1a1a] px-2 py-1 rounded">tabindex="0"</code>
|
|
306
|
+
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Makes carousel keyboard focusable</p>
|
|
307
|
+
</div>
|
|
308
|
+
<div>
|
|
309
|
+
<code class="text-sm dark:text-white bg-gray-200 dark:bg-[#1a1a1a] px-2 py-1 rounded">aria-label="Navigate to slide X"</code>
|
|
310
|
+
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Descriptive labels for navigation indicators</p>
|
|
311
|
+
</div>
|
|
139
312
|
</div>
|
|
140
|
-
</
|
|
313
|
+
</div>
|
|
141
314
|
</div>
|
|
142
315
|
</div>
|
|
316
|
+
|
|
317
|
+
<!-- Keyboard Navigation -->
|
|
318
|
+
<div>
|
|
319
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Keyboard Navigation Example</h3>
|
|
320
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
321
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-4">
|
|
322
|
+
Click the carousel below to focus it, then use keyboard arrows to navigate:
|
|
323
|
+
</p>
|
|
324
|
+
<div class="w-full h-64">
|
|
325
|
+
<wally-carousel>
|
|
326
|
+
<div class="w-full h-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
|
|
327
|
+
<h3 class="text-xl font-bold mb-2">Keyboard Accessible</h3>
|
|
328
|
+
<p class="text-center text-sm">Use ← → arrows when focused</p>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="w-full h-full bg-gradient-to-r from-purple-600 to-pink-600 text-white flex flex-col items-center justify-center p-6">
|
|
331
|
+
<h3 class="text-xl font-bold mb-2">Screen Reader Friendly</h3>
|
|
332
|
+
<p class="text-center text-sm">Proper ARIA attributes included</p>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="w-full h-full bg-gradient-to-r from-pink-600 to-rose-600 text-white flex flex-col items-center justify-center p-6">
|
|
335
|
+
<h3 class="text-xl font-bold mb-2">WCAG Compliant</h3>
|
|
336
|
+
<p class="text-center text-sm">WCAG accessibility standards</p>
|
|
337
|
+
</div>
|
|
338
|
+
</wally-carousel>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
|
|
143
343
|
</div>
|
|
144
344
|
</section>
|
|
145
345
|
|
|
146
346
|
<!-- Properties -->
|
|
147
347
|
<section class="mb-8">
|
|
148
348
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
|
|
349
|
+
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
350
|
+
The carousel component accepts one optional input property and automatically manages its internal state.
|
|
351
|
+
</p>
|
|
352
|
+
|
|
353
|
+
<div class="space-y-6">
|
|
354
|
+
<!-- Input Properties -->
|
|
355
|
+
<div>
|
|
356
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Input Properties</h3>
|
|
357
|
+
<div class="space-y-2">
|
|
358
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
359
|
+
<pre><code [innerHTML]="propertyIsNavigationIndicatorCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
360
|
+
</div>
|
|
361
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
362
|
+
Controls whether navigation indicators (dots) are displayed below the carousel.
|
|
363
|
+
</p>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<!-- Read-only Properties -->
|
|
368
|
+
<div>
|
|
369
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Read-only Properties</h3>
|
|
370
|
+
<div class="space-y-4">
|
|
371
|
+
<div class="space-y-2">
|
|
372
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
373
|
+
<pre><code [innerHTML]="propertyTotalItemsCountCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
374
|
+
</div>
|
|
375
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Automatically detected number of child elements in the carousel</p>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
<div class="space-y-2">
|
|
379
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
380
|
+
<pre><code [innerHTML]="propertyCurrentVisibleItemIndexCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
381
|
+
</div>
|
|
382
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Zero-based index of the currently visible slide</p>
|
|
383
|
+
</div>
|
|
384
|
+
|
|
385
|
+
<div class="space-y-2">
|
|
386
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
387
|
+
<pre><code [innerHTML]="propertyNavigationIndicatorsArrayCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
388
|
+
</div>
|
|
389
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Auto-generated array used for rendering navigation indicators</p>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
</section>
|
|
395
|
+
|
|
396
|
+
<!-- API Methods -->
|
|
397
|
+
<section class="mb-8">
|
|
398
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">API Methods</h2>
|
|
399
|
+
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
400
|
+
Public methods available for programmatic control of the carousel. Access these methods through a template reference or ViewChild.
|
|
401
|
+
</p>
|
|
402
|
+
|
|
403
|
+
<div class="overflow-x-auto">
|
|
404
|
+
<table class="w-full border-collapse border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
405
|
+
<thead>
|
|
406
|
+
<tr class="bg-gray-50 dark:bg-[#1a1a1a]">
|
|
407
|
+
<th class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-left text-sm font-semibold text-[#0a0a0a] dark:text-white">Method</th>
|
|
408
|
+
<th class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-left text-sm font-semibold text-[#0a0a0a] dark:text-white">Parameters</th>
|
|
409
|
+
<th class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-left text-sm font-semibold text-[#0a0a0a] dark:text-white">Return</th>
|
|
410
|
+
<th class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-left text-sm font-semibold text-[#0a0a0a] dark:text-white">Description</th>
|
|
411
|
+
</tr>
|
|
412
|
+
</thead>
|
|
413
|
+
<tbody>
|
|
414
|
+
<!-- Navigation Methods -->
|
|
415
|
+
<tr class="bg-blue-50 dark:bg-blue-900/20">
|
|
416
|
+
<td colspan="4" class="border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm font-medium text-blue-900 dark:text-blue-100">Navigation Methods</td>
|
|
417
|
+
</tr>
|
|
418
|
+
<tr>
|
|
419
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm">
|
|
420
|
+
<code class="bg-gray-100 dark:bg-[#1a1a1a] dark:text-white px-2 py-1 rounded text-xs">navigateToNextItem()</code>
|
|
421
|
+
</td>
|
|
422
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">None</td>
|
|
423
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">void</td>
|
|
424
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Navigate to the next slide with circular navigation</td>
|
|
425
|
+
</tr>
|
|
426
|
+
<tr>
|
|
427
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm">
|
|
428
|
+
<code class="bg-gray-100 dark:bg-[#1a1a1a] dark:text-white px-2 py-1 rounded text-xs">navigateToPreviousItem()</code>
|
|
429
|
+
</td>
|
|
430
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">None</td>
|
|
431
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">void</td>
|
|
432
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Navigate to the previous slide with circular navigation</td>
|
|
433
|
+
</tr>
|
|
434
|
+
<tr>
|
|
435
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm">
|
|
436
|
+
<code class="bg-gray-100 dark:bg-[#1a1a1a] dark:text-white px-2 py-1 rounded text-xs">navigateToSpecificItem()</code>
|
|
437
|
+
</td>
|
|
438
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
|
|
439
|
+
<code class="text-xs">index: number</code>
|
|
440
|
+
</td>
|
|
441
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">void</td>
|
|
442
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Jump directly to a specific slide by index (0-based)</td>
|
|
443
|
+
</tr>
|
|
444
|
+
|
|
445
|
+
<!-- Calculation Methods -->
|
|
446
|
+
<tr class="bg-green-50 dark:bg-green-900/20">
|
|
447
|
+
<td colspan="4" class="border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm font-medium text-green-900 dark:text-green-100">Calculation Methods</td>
|
|
448
|
+
</tr>
|
|
449
|
+
<tr>
|
|
450
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm">
|
|
451
|
+
<code class="bg-gray-100 dark:bg-[#1a1a1a] dark:text-white px-2 py-1 rounded text-xs">calculateNextItemIndex()</code>
|
|
452
|
+
</td>
|
|
453
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
|
|
454
|
+
<code class="text-xs">current: number</code>
|
|
455
|
+
</td>
|
|
456
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">number</td>
|
|
457
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Calculate the next index using circular buffer algorithm</td>
|
|
458
|
+
</tr>
|
|
459
|
+
<tr>
|
|
460
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm">
|
|
461
|
+
<code class="bg-gray-100 dark:bg-[#1a1a1a] dark:text-white px-2 py-1 rounded text-xs">calculatePreviousItemIndex()</code>
|
|
462
|
+
</td>
|
|
463
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
|
|
464
|
+
<code class="text-xs">current: number</code>
|
|
465
|
+
</td>
|
|
466
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">number</td>
|
|
467
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Calculate the previous index using circular buffer algorithm</td>
|
|
468
|
+
</tr>
|
|
469
|
+
|
|
470
|
+
<!-- Positioning Methods -->
|
|
471
|
+
<tr class="bg-purple-50 dark:bg-purple-900/20">
|
|
472
|
+
<td colspan="4" class="border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm font-medium text-purple-900 dark:text-purple-100">Positioning Methods</td>
|
|
473
|
+
</tr>
|
|
474
|
+
<tr>
|
|
475
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm">
|
|
476
|
+
<code class="bg-gray-100 dark:bg-[#1a1a1a] dark:text-white px-2 py-1 rounded text-xs">updateItemElementPosition()</code>
|
|
477
|
+
</td>
|
|
478
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
|
|
479
|
+
<code class="text-xs">element: HTMLElement<br>index: number</code>
|
|
480
|
+
</td>
|
|
481
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">void</td>
|
|
482
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Update position of a specific carousel item element</td>
|
|
483
|
+
</tr>
|
|
484
|
+
<tr>
|
|
485
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm">
|
|
486
|
+
<code class="bg-gray-100 dark:bg-[#1a1a1a] dark:text-white px-2 py-1 rounded text-xs">updateAllItemElementPositions()</code>
|
|
487
|
+
</td>
|
|
488
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">None</td>
|
|
489
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-600 dark:text-gray-400">void</td>
|
|
490
|
+
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Update positions of all carousel item elements</td>
|
|
491
|
+
</tr>
|
|
492
|
+
</tbody>
|
|
493
|
+
</table>
|
|
494
|
+
</div>
|
|
495
|
+
</section>
|
|
496
|
+
|
|
497
|
+
<!-- Keyboard Navigation -->
|
|
498
|
+
<section class="mb-8">
|
|
499
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Keyboard Navigation</h2>
|
|
500
|
+
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
501
|
+
When the carousel has focus, users can navigate using these keyboard shortcuts.
|
|
502
|
+
</p>
|
|
149
503
|
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
150
|
-
<pre><code [innerHTML]="
|
|
504
|
+
<pre><code [innerHTML]="keyboardShortcutsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
151
505
|
</div>
|
|
152
506
|
</section>
|
|
153
507
|
|
|
508
|
+
<!-- Touch Gestures -->
|
|
509
|
+
<section class="mb-8">
|
|
510
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Touch & Mouse Gestures</h2>
|
|
511
|
+
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
512
|
+
Interactive gestures supported on both mobile and desktop devices.
|
|
513
|
+
</p>
|
|
514
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
515
|
+
<pre><code [innerHTML]="touchGesturesCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
516
|
+
</div>
|
|
517
|
+
</section>
|
|
518
|
+
|
|
519
|
+
<!-- Features -->
|
|
520
|
+
<section class="mb-8">
|
|
521
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Features</h2>
|
|
522
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
523
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
524
|
+
<div class="flex items-center gap-3 mb-2">
|
|
525
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-blue-500">
|
|
526
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
|
|
527
|
+
</svg>
|
|
528
|
+
<h3 class="font-medium text-[#0a0a0a] dark:text-white">Touch & Swipe</h3>
|
|
529
|
+
</div>
|
|
530
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Full touch gesture support with configurable thresholds for distance and velocity detection.</p>
|
|
531
|
+
</div>
|
|
154
532
|
|
|
533
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
534
|
+
<div class="flex items-center gap-3 mb-2">
|
|
535
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-green-500">
|
|
536
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
537
|
+
</svg>
|
|
538
|
+
<h3 class="font-medium text-[#0a0a0a] dark:text-white">Accessibility</h3>
|
|
539
|
+
</div>
|
|
540
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">ARIA attributes, keyboard navigation (arrows, home, end), and screen reader support built-in.</p>
|
|
541
|
+
</div>
|
|
542
|
+
|
|
543
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
544
|
+
<div class="flex items-center gap-3 mb-2">
|
|
545
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-purple-500">
|
|
546
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
|
|
547
|
+
</svg>
|
|
548
|
+
<h3 class="font-medium text-[#0a0a0a] dark:text-white">100% Responsive</h3>
|
|
549
|
+
</div>
|
|
550
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Adapts to any container size automatically. Set parent dimensions and carousel fills completely.</p>
|
|
551
|
+
</div>
|
|
552
|
+
|
|
553
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
554
|
+
<div class="flex items-center gap-3 mb-2">
|
|
555
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-orange-500">
|
|
556
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5 10 4.5m0 0L16.25 13.5M10 4.5V21" />
|
|
557
|
+
</svg>
|
|
558
|
+
<h3 class="font-medium text-[#0a0a0a] dark:text-white">Performance</h3>
|
|
559
|
+
</div>
|
|
560
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">GPU-accelerated animations, optimized event handling, and proper memory cleanup.</p>
|
|
561
|
+
</div>
|
|
562
|
+
|
|
563
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
564
|
+
<div class="flex items-center gap-3 mb-2">
|
|
565
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-indigo-500">
|
|
566
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
|
|
567
|
+
</svg>
|
|
568
|
+
<h3 class="font-medium text-[#0a0a0a] dark:text-white">Infinite Loop</h3>
|
|
569
|
+
</div>
|
|
570
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">Circular buffer algorithm provides seamless infinite navigation between slides.</p>
|
|
571
|
+
</div>
|
|
572
|
+
|
|
573
|
+
<div class="p-4 border rounded-lg bg-white dark:bg-[#121212]">
|
|
574
|
+
<div class="flex items-center gap-3 mb-2">
|
|
575
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-red-500">
|
|
576
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-6.364-.386 1.591-1.591M3 12h2.25m.386-6.364 1.591 1.591" />
|
|
577
|
+
</svg>
|
|
578
|
+
<h3 class="font-medium text-[#0a0a0a] dark:text-white">Zero Config</h3>
|
|
579
|
+
</div>
|
|
580
|
+
<p class="text-sm text-gray-700 dark:text-gray-400">No configuration required. Just wrap your content and it works. Automatically detects child elements.</p>
|
|
581
|
+
</div>
|
|
582
|
+
</div>
|
|
583
|
+
</section>
|
|
155
584
|
</div>
|
|
156
|
-
</div>
|
|
585
|
+
</div>
|
package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.ts
CHANGED
|
@@ -29,8 +29,20 @@ export class CarouselDocs {
|
|
|
29
29
|
importCode = getFormattedCode(CarouselCodeExamples.import, 'typescript');
|
|
30
30
|
componentImportCode = getFormattedCode(CarouselCodeExamples.componentImport, 'typescript');
|
|
31
31
|
basicUsageCode = getFormattedCode(CarouselCodeExamples.basicUsage, 'html');
|
|
32
|
+
withNavigationIndicatorsCode = getFormattedCode(CarouselCodeExamples.withNavigationIndicators, 'html');
|
|
33
|
+
imageCarouselCode = getFormattedCode(CarouselCodeExamples.imageCarousel, 'html');
|
|
34
|
+
productShowcaseCode = getFormattedCode(CarouselCodeExamples.productShowcase, 'html');
|
|
32
35
|
customContentCode = getFormattedCode(CarouselCodeExamples.customContent, 'html');
|
|
33
|
-
|
|
36
|
+
responsiveExampleCode = getFormattedCode(CarouselCodeExamples.responsiveExample, 'html');
|
|
37
|
+
|
|
38
|
+
propertyIsNavigationIndicatorCode = getFormattedCode(CarouselCodeExamples.propertyIsNavigationIndicator, 'typescript');
|
|
39
|
+
propertyTotalItemsCountCode = getFormattedCode(CarouselCodeExamples.propertyTotalItemsCount, 'typescript');
|
|
40
|
+
propertyCurrentVisibleItemIndexCode = getFormattedCode(CarouselCodeExamples.propertyCurrentVisibleItemIndex, 'typescript');
|
|
41
|
+
propertyNavigationIndicatorsArrayCode = getFormattedCode(CarouselCodeExamples.propertyNavigationIndicatorsArray, 'typescript');
|
|
42
|
+
|
|
43
|
+
apiMethodsCode = getFormattedCode(CarouselCodeExamples.apiMethods, 'typescript');
|
|
44
|
+
keyboardShortcutsCode = getFormattedCode(CarouselCodeExamples.keyboardShortcuts, 'typescript');
|
|
45
|
+
touchGesturesCode = getFormattedCode(CarouselCodeExamples.touchGestures, 'typescript');
|
|
34
46
|
|
|
35
47
|
constructor(
|
|
36
48
|
private aiPromptService: AiPromptService
|