wally-ui 1.11.0 → 1.11.2
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 +89 -93
- package/package.json +1 -1
- package/playground/showcase/src/app/components/carousel/carousel.ts +2 -1
- package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.html +186 -114
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +114 -0
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +516 -248
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +11 -0
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +326 -253
- package/playground/showcase/src/app/pages/documentation/components/components.html +136 -74
- package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.html +370 -292
- package/playground/showcase/src/app/pages/documentation/documentation.html +204 -153
- package/playground/showcase/src/app/pages/home/home.html +153 -50
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/app/pages/mcp/mcp.html +235 -179
|
@@ -1,86 +1,148 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div class="
|
|
3
|
-
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
4
|
-
</div>
|
|
5
|
-
|
|
6
|
-
<h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
7
|
-
Components
|
|
8
|
-
</h1>
|
|
9
|
-
<p class="text-gray-700 dark:text-gray-400 mb-6">
|
|
10
|
-
Explore our collection of reusable Angular components.
|
|
11
|
-
</p>
|
|
1
|
+
<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
|
|
2
|
+
<div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
|
|
12
3
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
<!-- Breadcrumb Navigation -->
|
|
5
|
+
<nav class="mb-8" aria-label="Breadcrumb navigation">
|
|
6
|
+
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
7
|
+
</nav>
|
|
16
8
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
9
|
+
<!-- Header -->
|
|
10
|
+
<header class="mb-12" role="banner">
|
|
11
|
+
<h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
12
|
+
<span aria-hidden="true">>_ </span>Components
|
|
13
|
+
</h1>
|
|
14
|
+
<p class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4">
|
|
15
|
+
Explore our collection of production-ready Angular components. Copy-paste ready TypeScript with accessibility-first design.
|
|
20
16
|
</p>
|
|
21
|
-
</
|
|
17
|
+
</header>
|
|
22
18
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
19
|
+
<!-- Status Notice -->
|
|
20
|
+
<section class="mb-10" aria-labelledby="status-heading">
|
|
21
|
+
<h2 id="status-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-3">
|
|
22
|
+
[ Status ]
|
|
23
|
+
</h2>
|
|
24
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border-2 border-neutral-300 dark:border-neutral-700 p-4">
|
|
25
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
|
|
26
|
+
More components are being built and will be added soon. All components include full TypeScript support, ARIA accessibility, and Angular SSR compatibility.
|
|
27
|
+
</p>
|
|
27
28
|
</div>
|
|
28
|
-
|
|
29
|
-
A versatile button component with loading states, notifications, and customizable text. Currently being refined
|
|
30
|
-
and improved.
|
|
31
|
-
</p>
|
|
32
|
-
<a href="/documentation/components/button" class="text-blue-500 underline hover:text-blue-700 text-sm">
|
|
33
|
-
View Documentation
|
|
34
|
-
</a>
|
|
35
|
-
</div>
|
|
29
|
+
</section>
|
|
36
30
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
</
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
31
|
+
<!-- Available Components -->
|
|
32
|
+
<section id="available-components" aria-labelledby="components-heading">
|
|
33
|
+
<h2 id="components-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
34
|
+
[ Available Components ]
|
|
35
|
+
</h2>
|
|
36
|
+
|
|
37
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700">
|
|
38
|
+
|
|
39
|
+
<!-- Button Component -->
|
|
40
|
+
<article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article" aria-labelledby="button-heading">
|
|
41
|
+
<a href="/documentation/components/button"
|
|
42
|
+
class="block px-4 py-4 sm:py-5 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
43
|
+
aria-label="Navigate to Button component documentation with code examples, API reference, and accessibility features">
|
|
44
|
+
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
|
45
|
+
<div class="flex-1">
|
|
46
|
+
<div class="flex items-center gap-3 mb-2">
|
|
47
|
+
<h3 id="button-heading" class="text-base sm:text-lg font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] uppercase tracking-wide transition-colors duration-150">
|
|
48
|
+
<span aria-hidden="true">>_ </span>Button
|
|
49
|
+
</h3>
|
|
50
|
+
<span class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider" aria-label="Status: New Component">
|
|
51
|
+
NEW
|
|
52
|
+
</span>
|
|
53
|
+
</div>
|
|
54
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
55
|
+
Versatile button with variants (primary, secondary), loading states, disabled support, and full ARIA accessibility. Production-ready with comprehensive TypeScript typing.
|
|
56
|
+
</p>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</a>
|
|
60
|
+
</article>
|
|
61
|
+
|
|
62
|
+
<!-- Input Component -->
|
|
63
|
+
<article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article" aria-labelledby="input-heading">
|
|
64
|
+
<a href="/documentation/components/input"
|
|
65
|
+
class="block px-4 py-4 sm:py-5 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
66
|
+
aria-label="Navigate to Input component documentation with FormGroup integration, validation states, and TypeScript examples">
|
|
67
|
+
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
|
68
|
+
<div class="flex-1">
|
|
69
|
+
<div class="flex items-center gap-3 mb-2">
|
|
70
|
+
<h3 id="input-heading" class="text-base sm:text-lg font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] uppercase tracking-wide transition-colors duration-150">
|
|
71
|
+
<span aria-hidden="true">>_ </span>Input
|
|
72
|
+
</h3>
|
|
73
|
+
<span class="text-[10px] font-bold bg-yellow-500 text-black px-2 py-1 uppercase tracking-wider" aria-label="Status: Under Construction">
|
|
74
|
+
UNDER CONSTRUCTION
|
|
75
|
+
</span>
|
|
76
|
+
</div>
|
|
77
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
78
|
+
Full-featured input with FormGroup integration, validation states (loading, valid, error), password toggle, and type support (text, email, password). Enterprise-grade accessibility.
|
|
79
|
+
</p>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</a>
|
|
83
|
+
</article>
|
|
84
|
+
|
|
85
|
+
<!-- Carousel Component -->
|
|
86
|
+
<article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article" aria-labelledby="carousel-heading">
|
|
87
|
+
<a href="/documentation/components/carousel"
|
|
88
|
+
class="block px-4 py-4 sm:py-5 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
89
|
+
aria-label="Navigate to Carousel component documentation with touch/swipe gestures, keyboard navigation, and circular buffer algorithm">
|
|
90
|
+
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
|
91
|
+
<div class="flex-1">
|
|
92
|
+
<div class="flex items-center gap-3 mb-2">
|
|
93
|
+
<h3 id="carousel-heading" class="text-base sm:text-lg font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] uppercase tracking-wide transition-colors duration-150">
|
|
94
|
+
<span aria-hidden="true">>_ </span>Carousel
|
|
95
|
+
</h3>
|
|
96
|
+
<span class="text-[10px] font-bold bg-yellow-500 text-black px-2 py-1 uppercase tracking-wider" aria-label="Status: Under Construction">
|
|
97
|
+
UNDER CONSTRUCTION
|
|
98
|
+
</span>
|
|
99
|
+
</div>
|
|
100
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
101
|
+
Enterprise carousel with circular buffer algorithm, touch/swipe gestures, keyboard navigation (arrows, Home, End), dot indicators, and full ARIA compliance. GPU-accelerated transitions.
|
|
102
|
+
</p>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</a>
|
|
106
|
+
</article>
|
|
107
|
+
|
|
108
|
+
<!-- Breadcrumb Component -->
|
|
109
|
+
<article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article" aria-labelledby="breadcrumb-heading">
|
|
110
|
+
<a href="/documentation/components/breadcrumb"
|
|
111
|
+
class="block px-4 py-4 sm:py-5 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
112
|
+
aria-label="Navigate to Breadcrumb component documentation with semantic HTML structure, ARIA attributes, and responsive design">
|
|
113
|
+
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
|
114
|
+
<div class="flex-1">
|
|
115
|
+
<div class="flex items-center gap-3 mb-2">
|
|
116
|
+
<h3 id="breadcrumb-heading" class="text-base sm:text-lg font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] uppercase tracking-wide transition-colors duration-150">
|
|
117
|
+
<span aria-hidden="true">>_ </span>Breadcrumb
|
|
118
|
+
</h3>
|
|
119
|
+
<span class="text-[10px] font-bold bg-yellow-500 text-black px-2 py-1 uppercase tracking-wider" aria-label="Status: Under Construction">
|
|
120
|
+
UNDER CONSTRUCTION
|
|
121
|
+
</span>
|
|
122
|
+
</div>
|
|
123
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
|
|
124
|
+
Semantic navigation breadcrumbs with proper HTML structure (ol/li), ARIA attributes, responsive design, and current page indication. Perfect for hierarchical navigation.
|
|
125
|
+
</p>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</a>
|
|
129
|
+
</article>
|
|
49
130
|
|
|
50
|
-
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
|
|
51
|
-
<div class="flex items-center gap-2 mb-2">
|
|
52
|
-
<h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Input</h4>
|
|
53
|
-
<span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">New</span>
|
|
54
131
|
</div>
|
|
55
|
-
|
|
56
|
-
A versatile input component with full FormGroup support, perfect for forms and data entry.
|
|
57
|
-
</p>
|
|
58
|
-
<a href="/documentation/components/input" class="text-blue-500 underline hover:text-blue-700 text-sm">
|
|
59
|
-
View Documentation
|
|
60
|
-
</a>
|
|
61
|
-
</div>
|
|
132
|
+
</section>
|
|
62
133
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<
|
|
134
|
+
<!-- Ad Space -->
|
|
135
|
+
<aside class="mt-12" aria-label="Advertisement">
|
|
136
|
+
<div class="w-auto h-auto">
|
|
137
|
+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
|
|
138
|
+
crossorigin="anonymous"></script>
|
|
139
|
+
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-gw-3+1f-3d+2z"
|
|
140
|
+
data-ad-client="ca-pub-4944285767597175" data-ad-slot="4427496130"></ins>
|
|
141
|
+
<script>
|
|
142
|
+
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
143
|
+
</script>
|
|
67
144
|
</div>
|
|
68
|
-
|
|
69
|
-
A smooth carousel component with navigation controls, dot indicators, and elegant transitions using circular buffer algorithm.
|
|
70
|
-
</p>
|
|
71
|
-
<a href="/documentation/components/carousel" class="text-blue-500 underline hover:text-blue-700 text-sm">
|
|
72
|
-
View Documentation
|
|
73
|
-
</a>
|
|
74
|
-
</div>
|
|
145
|
+
</aside>
|
|
75
146
|
|
|
76
|
-
<div class="w-auto h-auto">
|
|
77
|
-
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
|
|
78
|
-
crossorigin="anonymous"></script>
|
|
79
|
-
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-gw-3+1f-3d+2z"
|
|
80
|
-
data-ad-client="ca-pub-4944285767597175" data-ad-slot="4427496130"></ins>
|
|
81
|
-
<script>
|
|
82
|
-
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
83
|
-
</script>
|
|
84
|
-
</div>
|
|
85
147
|
</div>
|
|
86
|
-
</
|
|
148
|
+
</main>
|