Skip to content

Commit d1d570d

Browse files
wrenjwrenj
committed
fork gallery
1 parent 1f00c35 commit d1d570d

File tree

19 files changed

+2177
-1
lines changed

19 files changed

+2177
-1
lines changed

‎renderers/lit/package-lock.json‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/client/angular/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ Here are the instructions if you want to do each step manually.
3636
* `npm start -- contact`
3737
* `npm start -- rizzcharts`
3838
* `npm start -- gallery` (Client-only, no server required)
39+
* `npm start -- material3-catalog` (Client-only, no server required)
3940
5. Open http://localhost:4200/
4041

4142
Important: The sample code provided is for demonstration purposes and illustrates the mechanics of A2UI and the Agent-to-Agent (A2A) protocol. When building production applications, it is critical to treat any agent operating outside of your direct control as a potentially untrusted entity.

‎samples/client/angular/angular.json‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,85 @@
350350
}
351351
}
352352
},
353+
"material3-catalog": {
354+
"projectType": "application",
355+
"schematics": { },
356+
"root": "projects/material3-catalog",
357+
"sourceRoot": "projects/material3-catalog/src",
358+
"prefix": "app",
359+
"architect": {
360+
"build": {
361+
"builder": "@angular/build:application",
362+
"options": {
363+
"browser": "projects/material3-catalog/src/main.ts",
364+
"tsConfig": "projects/material3-catalog/tsconfig.app.json",
365+
"preserveSymlinks": true,
366+
"assets": [
367+
{
368+
"glob": "**/*",
369+
"input": "projects/material3-catalog/public"
370+
}
371+
],
372+
"styles": [
373+
"projects/material3-catalog/src/styles.css"
374+
]
375+
},
376+
"configurations": {
377+
"production": {
378+
"budgets": [
379+
{
380+
"type": "initial",
381+
"maximumWarning": "500kB",
382+
"maximumError": "1MB"
383+
},
384+
{
385+
"type": "anyComponentStyle",
386+
"maximumWarning": "4kB",
387+
"maximumError": "8kB"
388+
}
389+
],
390+
"outputHashing": "all"
391+
},
392+
"development": {
393+
"optimization": false,
394+
"extractLicenses": false,
395+
"sourceMap": true
396+
}
397+
},
398+
"defaultConfiguration": "production"
399+
},
400+
"serve": {
401+
"builder": "@angular/build:dev-server",
402+
"configurations": {
403+
"production": {
404+
"buildTarget": "material3-catalog:build:production"
405+
},
406+
"development": {
407+
"buildTarget": "material3-catalog:build:development"
408+
}
409+
},
410+
"defaultConfiguration": "development"
411+
},
412+
"extract-i18n": {
413+
"builder": "@angular/build:extract-i18n"
414+
},
415+
"test": {
416+
"builder": "@angular/build:karma",
417+
"options": {
418+
"tsConfig": "projects/material3-catalog/tsconfig.spec.json",
419+
"assets": [
420+
{
421+
"glob": "**/*",
422+
"input": "projects/material3-catalog/public"
423+
}
424+
],
425+
"styles": [
426+
"projects/material3-catalog/src/styles.css"
427+
]
428+
}
429+
}
430+
}
431+
},
353432
"a2a-chat-canvas": {
354433
"projectType": "library",
355434
"root": "projects/a2a-chat-canvas",

‎samples/client/angular/projects/material3-catalog/src/app/app.config.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Copyright 2025 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { DEFAULT_CATALOG, provideA2UI } from '@a2ui/angular';
18+
import { IMAGE_CONFIG } from '@angular/common';
19+
import {
20+
ApplicationConfig,
21+
provideBrowserGlobalErrorListeners,
22+
provideZonelessChangeDetection,
23+
} from '@angular/core';
24+
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
25+
import { theme } from './theme';
26+
27+
export const appConfig: ApplicationConfig = {
28+
providers: [
29+
provideBrowserGlobalErrorListeners(),
30+
provideZonelessChangeDetection(),
31+
provideClientHydration(withEventReplay()),
32+
provideA2UI({
33+
catalog: DEFAULT_CATALOG,
34+
theme: theme,
35+
}),
36+
{
37+
provide: IMAGE_CONFIG,
38+
useValue: {
39+
disableImageSizeWarning: true,
40+
disableImageLazyLoadWarning: true,
41+
},
42+
},
43+
],
44+
};

‎samples/client/angular/projects/material3-catalog/src/app/app.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
Copyright 2025 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.home-page-header {
18+
display: flex;
19+
justify-content: space-between;
20+
align-items: center;
21+
padding: 16px;
22+
}
23+
24+
.app-nav ul {
25+
list-style: none;
26+
padding: 0;
27+
margin: 0;
28+
display: flex;
29+
gap: 16px; /* Space between items */
30+
}
31+
32+
.app-nav li {
33+
padding: 8px 12px;
34+
cursor: pointer;
35+
border-radius: 4px;
36+
transition: background-color 0.3s ease;
37+
}
38+
39+
.app-nav li:hover {
40+
background-color: #eee;
41+
}
42+
.app-nav li a {
43+
text-decoration: none;
44+
color: inherit;
45+
}
46+
.hero-message {
47+
font-weight: bold;
48+
text-align: center;
49+
}
50+
.hero-message h1 {
51+
font-size: 3rem;
52+
}
53+
.hero-message p {
54+
font-size: 1.5rem;
55+
font-weight: lighter;
56+
}

‎samples/client/angular/projects/material3-catalog/src/app/app.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!--
2+
Copyright 2025 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
17+
<header class="home-page-header">
18+
<p>A2UI Gallery</p>
19+
<nav class="app-nav">
20+
<ul>
21+
<li><a (click)="setView('library')">Library</a></li>
22+
<li><a (click)="setView('gallery')">Gallery</a></li>
23+
<li><a href="https://github.com/google/A2UI">GitHub</a></li>
24+
</ul>
25+
</nav>
26+
</header>
27+
<section>
28+
<div class="hero-message">
29+
<h1>A2UI Component Gallery</h1>
30+
<p>Building blocks and examples for Agent Driven UIs</p>
31+
</div>
32+
<section>
33+
@if(currentView() === 'gallery') {
34+
<app-gallery />
35+
} @else {
36+
<app-library />
37+
}
38+
</section>
39+
</section>

‎samples/client/angular/projects/material3-catalog/src/app/app.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
Copyright 2025 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { Component, signal } from '@angular/core';
18+
import { LibraryComponent } from './features/library/library.component';
19+
import { GalleryComponent } from './features/gallery/gallery.component';
20+
21+
@Component({
22+
selector: 'app-root',
23+
templateUrl: './app.html',
24+
styleUrl: './app.css',
25+
imports: [LibraryComponent, GalleryComponent]
26+
})
27+
export class App {
28+
readonly currentView = signal<'library' | 'gallery'>('library');
29+
30+
setView(view: 'library' | 'gallery') {
31+
this.currentView.set(view);
32+
}
33+
}

0 commit comments

Comments
 (0)