Skip to content

Commit 0dc2b17

Browse files
BanegasnBanegasn
committed
done
1 parent 2c01dae commit 0dc2b17

20 files changed

+1069
-5
lines changed

‎apps/angular-app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@banegasn/m3-card": "workspace:*",
2727
"@banegasn/m3-switch": "workspace:*",
2828
"@banegasn/m3-radio-button": "workspace:*",
29+
"@banegasn/m3-search-bar": "workspace:*",
2930
"rxjs": "^7.8.1",
3031
"tslib": "^2.8.0"
3132
},

‎apps/angular-app/src/app/app.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<span slot="icon" class="material-symbols-outlined">home</span>
99
</m3-navigation-rail-item>
1010

11-
<m3-navigation-rail-item label="Components" badge="6"
11+
<m3-navigation-rail-item label="Components" badge="7"
1212
[active]="currentRoute() === '/components'"
1313
(item-click)="navigate('/components')">
1414
<span slot="icon" class="material-symbols-outlined">browse</span>
@@ -55,7 +55,7 @@
5555

5656
<m3-navigation-bar-item
5757
label="Components"
58-
badge="6"
58+
badge="7"
5959
[active]="currentRoute() === '/components'"
6060
(item-click)="navigate('/components')">
6161
<span slot="icon" class="material-symbols-outlined">browse</span>

‎apps/angular-app/src/app/app.routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { NavigationRailComponent } from '../pages/navigation-rail/navigation-rai
88
import { NavigationBarComponent } from '../pages/navigation-bar/navigation-bar.component';
99
import { SwitchComponent } from '../pages/switches/switch.component';
1010
import { RadioButtonComponent } from '../pages/radio-buttons/radio-button.component';
11+
import { SearchBarComponent } from '../pages/search-bar/search-bar.component';
1112

1213
export const routes: Routes = [
1314
{ path: '', redirectTo: 'home', pathMatch: 'full' },
@@ -19,5 +20,6 @@ export const routes: Routes = [
1920
{ path: 'navigation-bar', component: NavigationBarComponent },
2021
{ path: 'switches', component: SwitchComponent },
2122
{ path: 'radio-buttons', component: RadioButtonComponent },
23+
{ path: 'search-bar', component: SearchBarComponent },
2224
{ path: 'contact', component: ContactComponent },
2325
];

‎apps/angular-app/src/pages/components/components.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,29 @@ <h3>Radio Button States</h3>
187187
</div>
188188
</m3-card>
189189

190+
<m3-card variant="elevated">
191+
<div slot="header">
192+
<div class="header-content">
193+
<h2>🔍 Search Bar</h2>
194+
<span class="badge">Input</span>
195+
</div>
196+
</div>
197+
<p class="description">
198+
A search bar component with support for leading and trailing content projection slots. Perfect for search interfaces with icons, buttons, or avatars.
199+
</p>
200+
201+
<div class="feature-list" style="margin-top: 1rem;">
202+
<div class="feature-item">✓ Leading & trailing slots</div>
203+
<div class="feature-item">✓ Keyboard navigation</div>
204+
<div class="feature-item">✓ Accessible & ARIA support</div>
205+
<div class="feature-item">✓ M3 design system</div>
206+
</div>
207+
208+
<div slot="actions" class="actions">
209+
<m3-button variant="elevated" size="medium" (click)="navigateToSearchBar()">View Full Documentation</m3-button>
210+
</div>
211+
</m3-card>
212+
190213
<m3-card variant="outlined">
191214
<div slot="header">
192215
<div class="header-content">

‎apps/angular-app/src/pages/components/components.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,8 @@ export class ComponentsComponent {
3939
navigateToRadioButtons() {
4040
this.router.navigate(['/radio-buttons']);
4141
}
42+
43+
navigateToSearchBar() {
44+
this.router.navigate(['/search-bar']);
45+
}
4246
}

‎apps/angular-app/src/pages/contact/contact.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA } from "@ang
1515
<span slot="icon" class="material-symbols-outlined">link</span>
1616
Visit GitHub Profile
1717
</m3-button>
18+
<m3-button variant="filled" (button-click)="openPayPalDonation()" class="paypal-button">
19+
<span slot="icon" class="material-symbols-outlined">favorite</span>
20+
Contribute with PayPal
21+
</m3-button>
1822
<m3-button variant="tonal" (button-click)="openGitHubRepos()">
1923
<span slot="icon" class="material-symbols-outlined">code</span>
2024
View Repository
@@ -59,6 +63,12 @@ import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA } from "@ang
5963
.contributors-box p {
6064
color: var(--md-sys-color-on-secondary-container, #1d192b);
6165
}
66+
67+
.paypal-button {
68+
--md-sys-color-primary: #0070ba;
69+
--md-sys-color-on-primary: #ffffff;
70+
--md-sys-color-primary-hover: #0070ba;
71+
}
6272
`],
6373
changeDetection: ChangeDetectionStrategy.OnPush,
6474
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -72,5 +82,9 @@ export class ContactComponent {
7282
openGitHubRepos() {
7383
window.open('https://github.com/banegasn/components', '_blank');
7484
}
85+
86+
openPayPalDonation() {
87+
window.open('https://paypal.me/banegasn', '_blank');
88+
}
7589
}
7690

‎apps/angular-app/src/pages/home/home.component.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,31 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-radio-button</h3>
259259
</div>
260260
</m3-card>
261261

262+
<m3-card variant="elevated">
263+
<div slot="header">
264+
<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;">
265+
<h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-search-bar</h3>
266+
<span class="badge">v1.x</span>
267+
</div>
268+
</div>
269+
<p>Material Design 3 search bar component with support for leading and trailing content projection slots. Perfect for search interfaces with icons, buttons, or avatars.</p>
270+
<div class="component-features">
271+
<span>✓ Leading & Trailing Slots</span>
272+
<span>✓ Keyboard Navigation</span>
273+
<span>✓ Accessible</span>
274+
</div>
275+
<div slot="actions" class="actions">
276+
<m3-button variant="text" (button-click)="openNpmPackage('m3-search-bar')">
277+
<span slot="icon" class="material-symbols-outlined">package</span>
278+
npm
279+
</m3-button>
280+
<m3-button variant="text" (button-click)="navigateToSearchBar()">
281+
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
282+
View Details
283+
</m3-button>
284+
</div>
285+
</m3-card>
286+
262287
<m3-card variant="outlined">
263288
<div slot="header">
264289
<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;">
@@ -283,6 +308,7 @@ <h3>📦 Packages</h3>
283308
<li><code>m3-navigation-rail</code> - Navigation Rail (Lit)</li>
284309
<li><code>m3-switch</code> - Material 3 Switch (Lit)</li>
285310
<li><code>m3-radio-button</code> - Material 3 Radio Button (Lit)</li>
311+
<li><code>m3-search-bar</code> - Material 3 Search Bar (Lit)</li>
286312
</ul>
287313
</div>
288314
<div class="arch-column">

‎apps/angular-app/src/pages/home/home.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ export class HomeComponent {
4444
this.router.navigate(['/radio-buttons']);
4545
}
4646

47+
navigateToSearchBar() {
48+
this.router.navigate(['/search-bar']);
49+
}
50+
4751
openGitHub() {
4852
window.open('https://github.com/banegasn/components', '_blank');
4953
}

‎apps/angular-app/src/pages/search-bar/search-bar.component.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
.page-header {
2+
margin-bottom: 32px;
3+
}
4+
5+
h3 {
6+
margin: 1.5rem 0 1rem 0;
7+
}
8+
9+
.page-header h1 {
10+
font-size: 32px;
11+
font-weight: 400;
12+
margin: 0 0 8px 0;
13+
color: var(--md-sys-color-on-surface);
14+
}
15+
16+
.page-header p {
17+
font-size: 16px;
18+
color: var(--md-sys-color-on-surface-variant);
19+
margin: 0;
20+
}
21+
22+
h2 {
23+
font-size: 24px;
24+
font-weight: 400;
25+
margin: 32px 0 16px 0;
26+
color: var(--md-sys-color-on-surface);
27+
}
28+
29+
.demo-container {
30+
margin: 16px 0 32px 0;
31+
}
32+
33+
.content-section {
34+
margin-bottom: 32px;
35+
}
36+
37+
.content-section h2 {
38+
font-size: 24px;
39+
font-weight: 400;
40+
margin: 0 0 16px 0;
41+
color: var(--md-sys-color-on-surface);
42+
}
43+
44+
.results-container {
45+
padding: 16px;
46+
}
47+
48+
.result-item {
49+
padding: 12px;
50+
margin-bottom: 8px;
51+
background-color: var(--md-sys-color-surface-container);
52+
border-radius: 8px;
53+
color: var(--md-sys-color-on-surface);
54+
}
55+
56+
.result-item:last-child {
57+
margin-bottom: 0;
58+
}
59+
60+
.demo-section {
61+
margin-bottom: 32px;
62+
padding-bottom: 32px;
63+
border-bottom: 1px solid var(--md-sys-color-outline-variant);
64+
}
65+
66+
.demo-section:last-child {
67+
border-bottom: none;
68+
}
69+
70+
.demo-section h2 {
71+
font-size: 24px;
72+
font-weight: 400;
73+
margin: 0 0 16px 0;
74+
color: var(--md-sys-color-on-surface);
75+
}
76+
77+
.properties-list {
78+
padding: 16px;
79+
}
80+
81+
.property-item {
82+
padding: 12px 0;
83+
border-bottom: 1px solid var(--md-sys-color-outline-variant);
84+
color: var(--md-sys-color-on-surface);
85+
}
86+
87+
.property-item:last-child {
88+
border-bottom: none;
89+
}
90+
91+
.property-item strong {
92+
color: var(--md-sys-color-primary);
93+
font-weight: 500;
94+
}
95+
96+
.property-item code {
97+
background-color: var(--md-sys-color-surface-container-high);
98+
padding: 2px 6px;
99+
border-radius: 4px;
100+
font-size: 14px;
101+
color: var(--md-sys-color-on-surface);
102+
}
103+
104+
.menu-button {
105+
--md-sys-color-primary: var(--md-sys-color-on-surface);
106+
}
107+
108+
@media (max-width: 600px) {
109+
.search-bar-page {
110+
padding: 16px;
111+
}
112+
113+
.page-header h1 {
114+
font-size: 24px;
115+
}
116+
117+
h2,
118+
.content-section h2,
119+
.demo-section h2 {
120+
font-size: 20px;
121+
}
122+
123+
.demo-container {
124+
padding: 16px;
125+
}
126+
}

0 commit comments

Comments
 (0)