@a2ui/angular 0.0.1

package/src/lib/catalog/default.ts

@@ -0,0 +1,185 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { inputBinding } from '@angular/core';
+import { Types } from '@a2ui/lit/0.8';
+import { Catalog } from '../rendering/catalog';
+import { Row } from './row';
+import { Column } from './column';
+import { Text } from './text';
+
+export const DEFAULT_CATALOG: Catalog = {
+  Row: {
+    type: () => Row,
+    bindings: (node) => {
+      const properties = (node as Types.RowNode).properties;
+      return [
+        inputBinding('alignment', () => properties.alignment ?? 'stretch'),
+        inputBinding('distribution', () => properties.distribution ?? 'start'),
+      ];
+    },
+  },
+
+  Column: {
+    type: () => Column,
+    bindings: (node) => {
+      const properties = (node as Types.ColumnNode).properties;
+      return [
+        inputBinding('alignment', () => properties.alignment ?? 'stretch'),
+        inputBinding('distribution', () => properties.distribution ?? 'start'),
+      ];
+    },
+  },
+
+  List: {
+    type: () => import('./list').then((r) => r.List),
+    bindings: (node) => {
+      const properties = (node as Types.ListNode).properties;
+      return [inputBinding('direction', () => properties.direction ?? 'vertical')];
+    },
+  },
+
+  Card: () => import('./card').then((r) => r.Card),
+
+  Image: {
+    type: () => import('./image').then((r) => r.Image),
+    bindings: (node) => {
+      const properties = (node as Types.ImageNode).properties;
+      return [
+        inputBinding('url', () => properties.url),
+        inputBinding('usageHint', () => properties.usageHint),
+      ];
+    },
+  },
+
+  Icon: {
+    type: () => import('./icon').then((r) => r.Icon),
+    bindings: (node) => {
+      const properties = (node as Types.IconNode).properties;
+      return [inputBinding('name', () => properties.name)];
+    },
+  },
+
+  Video: {
+    type: () => import('./video').then((r) => r.Video),
+    bindings: (node) => {
+      const properties = (node as Types.VideoNode).properties;
+      return [inputBinding('url', () => properties.url)];
+    },
+  },
+
+  AudioPlayer: {
+    type: () => import('./audio').then((r) => r.Audio),
+    bindings: (node) => {
+      const properties = (node as Types.AudioPlayerNode).properties;
+      return [inputBinding('url', () => properties.url)];
+    },
+  },
+
+  Text: {
+    type: () => Text,
+    bindings: (node) => {
+      const properties = (node as Types.TextNode).properties;
+      return [
+        inputBinding('text', () => properties.text),
+        inputBinding('usageHint', () => properties.usageHint || null),
+      ];
+    },
+  },
+
+  Button: {
+    type: () => import('./button').then((r) => r.Button),
+    bindings: (node) => {
+      const properties = (node as Types.ButtonNode).properties;
+      return [inputBinding('action', () => properties.action)];
+    },
+  },
+
+  Divider: () => import('./divider').then((r) => r.Divider),
+
+  MultipleChoice: {
+    type: () => import('./multiple-choice').then((r) => r.MultipleChoice),
+    bindings: (node) => {
+      const properties = (node as Types.MultipleChoiceNode).properties;
+      return [
+        inputBinding('options', () => properties.options || []),
+        inputBinding('value', () => properties.selections),
+        inputBinding('description', () => 'Select an item'), // TODO: this should be defined in the properties
+      ];
+    },
+  },
+
+  TextField: {
+    type: () => import('./text-field').then((r) => r.TextField),
+    bindings: (node) => {
+      const properties = (node as Types.TextFieldNode).properties;
+      return [
+        inputBinding('text', () => properties.text ?? null),
+        inputBinding('label', () => properties.label),
+        inputBinding('inputType', () => properties.type),
+      ];
+    },
+  },
+
+  DateTimeInput: {
+    type: () => import('./datetime-input').then((r) => r.DatetimeInput),
+    bindings: (node) => {
+      const properties = (node as Types.DateTimeInputNode).properties;
+      return [
+        inputBinding('enableDate', () => properties.enableDate),
+        inputBinding('enableTime', () => properties.enableTime),
+        inputBinding('value', () => properties.value),
+      ];
+    },
+  },
+
+  CheckBox: {
+    type: () => import('./checkbox').then((r) => r.Checkbox),
+    bindings: (node) => {
+      const properties = (node as Types.CheckboxNode).properties;
+      return [
+        inputBinding('label', () => properties.label),
+        inputBinding('value', () => properties.value),
+      ];
+    },
+  },
+
+  Slider: {
+    type: () => import('./slider').then((r) => r.Slider),
+    bindings: (node) => {
+      const properties = (node as Types.SliderNode).properties;
+      return [
+        inputBinding('value', () => properties.value),
+        inputBinding('minValue', () => properties.minValue),
+        inputBinding('maxValue', () => properties.maxValue),
+        inputBinding('label', () => ''), // TODO: this should be defined in the properties
+      ];
+    },
+  },
+
+  Tabs: {
+    type: () => import('./tabs').then((r) => r.Tabs),
+    bindings: (node) => {
+      const properties = (node as Types.TabsNode).properties;
+      return [inputBinding('tabs', () => properties.tabItems)];
+    },
+  },
+
+  Modal: {
+    type: () => import('./modal').then((r) => r.Modal),
+    bindings: () => [],
+  },
+};

package/src/lib/catalog/divider.ts

@@ -0,0 +1,37 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { DynamicComponent } from '../rendering/dynamic-component';
+
+@Component({
+  selector: 'a2ui-divider',
+  template: '<hr [class]="theme.components.Divider" [style]="theme.additionalStyles?.Divider"/>',
+  styles: `
+    :host {
+      display: block;
+      min-height: 0;
+      overflow: auto;
+    }
+
+    hr {
+      height: 1px;
+      background: #ccc;
+      border: none;
+    }
+  `,
+})
+export class Divider extends DynamicComponent {}

package/src/lib/catalog/icon.ts

@@ -0,0 +1,44 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Component, computed, input } from '@angular/core';
+import { DynamicComponent } from '../rendering/dynamic-component';
+import { Primitives } from '@a2ui/lit/0.8';
+
+@Component({
+  selector: 'a2ui-icon',
+  styles: `
+    :host {
+      display: block;
+      flex: var(--weight);
+      min-height: 0;
+      overflow: auto;
+    }
+  `,
+  template: `
+    @let resolvedName = this.resolvedName();
+
+    @if (resolvedName) {
+      <section [class]="theme.components.Icon" [style]="theme.additionalStyles?.Icon">
+        <span class="g-icon">{{ resolvedName }}</span>
+      </section>
+    }
+  `,
+})
+export class Icon extends DynamicComponent {
+  readonly name = input.required<Primitives.StringValue | null>();
+  protected readonly resolvedName = computed(() => this.resolvePrimitive(this.name()));
+}

package/src/lib/catalog/image.ts

@@ -0,0 +1,62 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Component, computed, input } from '@angular/core';
+import { Primitives, Styles, Types } from '@a2ui/lit/0.8';
+import { DynamicComponent } from '../rendering/dynamic-component';
+
+@Component({
+  selector: 'a2ui-image',
+  styles: `
+    :host {
+      display: block;
+      flex: var(--weight);
+      min-height: 0;
+      overflow: auto;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  `,
+  template: `
+    @let resolvedUrl = this.resolvedUrl();
+
+    @if (resolvedUrl) {
+      <section [class]="classes()" [style]="theme.additionalStyles?.Image">
+        <img [src]="resolvedUrl" />
+      </section>
+    }
+  `,
+})
+export class Image extends DynamicComponent {
+  readonly url = input.required<Primitives.StringValue | null>();
+  readonly usageHint = input.required<Types.ResolvedImage['usageHint'] | null>();
+
+  protected readonly resolvedUrl = computed(() => this.resolvePrimitive(this.url()));
+
+  protected classes = computed(() => {
+    const usageHint = this.usageHint();
+
+    return Styles.merge(
+      this.theme.components.Image.all,
+      usageHint ? this.theme.components.Image[usageHint] : {},
+    );
+  });
+}

package/src/lib/catalog/list.ts

@@ -0,0 +1,63 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Component, input } from '@angular/core';
+import { Types } from '@a2ui/lit/0.8';
+import { DynamicComponent } from '../rendering/dynamic-component';
+import { Renderer } from '../rendering/renderer';
+
+@Component({
+  selector: 'a2ui-list',
+  imports: [Renderer],
+  host: {
+    '[attr.direction]': 'direction()',
+  },
+  styles: `
+    :host {
+      display: block;
+      flex: var(--weight);
+      min-height: 0;
+      overflow: auto;
+    }
+
+    :host([direction='vertical']) section {
+      display: grid;
+    }
+
+    :host([direction='horizontal']) section {
+      display: flex;
+      max-width: 100%;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      scrollbar-width: none;
+
+      > ::slotted(*) {
+        flex: 1 0 fit-content;
+        max-width: min(80%, 400px);
+      }
+    }
+  `,
+  template: `
+    <section [class]="theme.components.List" [style]="theme.additionalStyles?.List">
+      @for (child of component().properties.children; track child) {
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+      }
+    </section>
+  `,
+})
+export class List extends DynamicComponent<Types.ListNode> {
+  readonly direction = input<'vertical' | 'horizontal'>('vertical');
+}

package/src/lib/catalog/modal.ts

@@ -0,0 +1,113 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Component, signal, viewChild, ElementRef, effect } from '@angular/core';
+import { DynamicComponent } from '../rendering/dynamic-component';
+import { Types } from '@a2ui/lit/0.8';
+import { Renderer } from '../rendering';
+
+@Component({
+  selector: 'a2ui-modal',
+  imports: [Renderer],
+  template: `
+    @if (showDialog()) {
+      <dialog #dialog [class]="theme.components.Modal.backdrop" (click)="handleDialogClick($event)">
+        <section [class]="theme.components.Modal.element" [style]="theme.additionalStyles?.Modal">
+          <div class="controls">
+            <button (click)="closeDialog()">
+              <span class="g-icon">close</span>
+            </button>
+          </div>
+
+          <ng-container
+            a2ui-renderer
+            [surfaceId]="surfaceId()!"
+            [component]="component().properties.contentChild"
+          />
+        </section>
+      </dialog>
+    } @else {
+      <section (click)="showDialog.set(true)">
+        <ng-container
+          a2ui-renderer
+          [surfaceId]="surfaceId()!"
+          [component]="component().properties.entryPointChild"
+        />
+      </section>
+    }
+  `,
+  styles: `
+    dialog {
+      padding: 0;
+      border: none;
+      background: none;
+
+      & section {
+        & .controls {
+          display: flex;
+          justify-content: end;
+          margin-bottom: 4px;
+
+          & button {
+            padding: 0;
+            background: none;
+            width: 20px;
+            height: 20px;
+            pointer: cursor;
+            border: none;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  `,
+})
+export class Modal extends DynamicComponent<Types.ModalNode> {
+  protected readonly showDialog = signal(false);
+  protected readonly dialog = viewChild<ElementRef<HTMLDialogElement>>('dialog');
+
+  constructor() {
+    super();
+
+    effect(() => {
+      const dialog = this.dialog();
+
+      if (dialog && !dialog.nativeElement.open) {
+        dialog.nativeElement.showModal();
+      }
+    });
+  }
+
+  protected handleDialogClick(event: MouseEvent) {
+    if (event.target instanceof HTMLDialogElement) {
+      this.closeDialog();
+    }
+  }
+
+  protected closeDialog() {
+    const dialog = this.dialog();
+
+    if (!dialog) {
+      return;
+    }
+
+    if (!dialog.nativeElement.open) {
+      dialog.nativeElement.close();
+    }
+
+    this.showDialog.set(false);
+  }
+}

package/src/lib/catalog/multiple-choice.ts

@@ -0,0 +1,77 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Component, computed, input } from '@angular/core';
+import { DynamicComponent } from '../rendering/dynamic-component';
+import { Primitives } from '@a2ui/lit/0.8';
+
+@Component({
+  selector: 'a2ui-multiple-choice',
+  template: `
+    <section [class]="theme.components.MultipleChoice.container">
+      <label [class]="theme.components.MultipleChoice.label" [for]="selectId">{{
+        description()
+      }}</label>
+
+      <select
+        (change)="handleChange($event)"
+        [id]="selectId"
+        [value]="selectValue()"
+        [class]="theme.components.MultipleChoice.element"
+        [style]="theme.additionalStyles?.MultipleChoice"
+      >
+        @for (option of options(); track option.value) {
+          <option [value]="option.value">{{ resolvePrimitive(option.label) }}</option>
+        }
+      </select>
+    </section>
+  `,
+  styles: `
+    :host {
+      display: block;
+      flex: var(--weight);
+      min-height: 0;
+      overflow: auto;
+    }
+
+    select {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  `,
+})
+export class MultipleChoice extends DynamicComponent {
+  readonly options = input.required<{ label: Primitives.StringValue; value: string }[]>();
+  readonly value = input.required<Primitives.StringValue | null>();
+  readonly description = input.required<string>();
+
+  protected readonly selectId = super.getUniqueId('a2ui-multiple-choice');
+  protected selectValue = computed(() => super.resolvePrimitive(this.value()));
+
+  protected handleChange(event: Event) {
+    const path = this.value()?.path;
+
+    if (!(event.target instanceof HTMLSelectElement) || !event.target.value || !path) {
+      return;
+    }
+
+    this.processor.setData(
+      this.component(),
+      this.processor.resolvePath(path, this.component().dataContextPath),
+      event.target.value,
+    );
+  }
+}

package/src/lib/catalog/row.ts

@@ -0,0 +1,100 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { Component, computed, input } from '@angular/core';
+import { DynamicComponent } from '../rendering/dynamic-component';
+import { Renderer } from '../rendering/renderer';
+import { Types } from '@a2ui/lit/0.8';
+
+@Component({
+  selector: 'a2ui-row',
+  imports: [Renderer],
+  host: {
+    '[attr.alignment]': 'alignment()',
+    '[attr.distribution]': 'distribution()',
+  },
+  styles: `
+    :host {
+      display: flex;
+      flex: var(--weight);
+    }
+
+    section {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      min-height: 100%;
+      box-sizing: border-box;
+    }
+
+    .align-start {
+      align-items: start;
+    }
+
+    .align-center {
+      align-items: center;
+    }
+
+    .align-end {
+      align-items: end;
+    }
+
+    .align-stretch {
+      align-items: stretch;
+    }
+
+    .distribute-start {
+      justify-content: start;
+    }
+
+    .distribute-center {
+      justify-content: center;
+    }
+
+    .distribute-end {
+      justify-content: end;
+    }
+
+    .distribute-spaceBetween {
+      justify-content: space-between;
+    }
+
+    .distribute-spaceAround {
+      justify-content: space-around;
+    }
+
+    .distribute-spaceEvenly {
+      justify-content: space-evenly;
+    }
+  `,
+  template: `
+    <section [class]="classes()" [style]="theme.additionalStyles?.Row">
+      @for (child of component().properties.children; track child) {
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
+      }
+    </section>
+  `,
+})
+export class Row extends DynamicComponent<Types.RowNode> {
+  readonly alignment = input<Types.ResolvedRow['alignment']>('stretch');
+  readonly distribution = input<Types.ResolvedRow['distribution']>('start');
+
+  protected readonly classes = computed(() => ({
+    ...this.theme.components.Row,
+    [`align-${this.alignment()}`]: true,
+    [`distribute-${this.distribution()}`]: true,
+  }));
+}