@a2ui/angular 0.8.1 → 0.8.3

package/src/lib/catalog/modal.ts

@@ -1,113 +0,0 @@
-/*
- 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

@@ -1,77 +0,0 @@
-/*
- 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

@@ -1,100 +0,0 @@
-/*
- 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,
-  }));
-}

package/src/lib/catalog/slider.ts

@@ -1,73 +0,0 @@
-/*
- 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 } from '@a2ui/lit/0.8';
-import { DynamicComponent } from '../rendering/dynamic-component';
-
-@Component({
-  selector: '[a2ui-slider]',
-  template: `
-    <section [class]="theme.components.Slider.container">
-      <label [class]="theme.components.Slider.label" [for]="inputId">
-        {{ label() }}
-      </label>
-
-      <input
-        autocomplete="off"
-        type="range"
-        [value]="resolvedValue()"
-        [min]="minValue()"
-        [max]="maxValue()"
-        [id]="inputId"
-        (input)="handleInput($event)"
-        [class]="theme.components.Slider.element"
-        [style]="theme.additionalStyles?.Slider"
-      />
-    </section>
-  `,
-  styles: `
-    :host {
-      display: block;
-      flex: var(--weight);
-    }
-
-    input {
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-    }
-  `,
-})
-export class Slider extends DynamicComponent {
-  readonly value = input.required<Primitives.NumberValue | null>();
-  readonly label = input('');
-  readonly minValue = input.required<number | undefined>();
-  readonly maxValue = input.required<number | undefined>();
-
-  protected readonly inputId = super.getUniqueId('a2ui-slider');
-  protected resolvedValue = computed(() => super.resolvePrimitive(this.value()) ?? 0);
-
-  protected handleInput(event: Event) {
-    const path = this.value()?.path;
-
-    if (!(event.target instanceof HTMLInputElement) || !path) {
-      return;
-    }
-
-    this.processor.setData(this.component(), path, event.target.valueAsNumber, this.surfaceId());
-  }
-}

package/src/lib/catalog/surface.ts

@@ -1,82 +0,0 @@
-/*
- 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 { Types } from '@a2ui/lit/0.8';
-import { Renderer } from '../rendering/renderer';
-
-@Component({
-  selector: 'a2ui-surface',
-  imports: [Renderer],
-  template: `
-    @let surfaceId = this.surfaceId();
-    @let surface = this.surface();
-
-    @if (surfaceId && surface) {
-      <ng-container a2ui-renderer [surfaceId]="surfaceId" [component]="surface.componentTree!" />
-    }
-  `,
-  styles: `
-    :host {
-      display: flex;
-      min-height: 0;
-      max-height: 100%;
-      flex-direction: column;
-      gap: 16px;
-    }
-  `,
-  host: {
-    '[style]': 'styles()',
-  },
-})
-export class Surface {
-  readonly surfaceId = input.required<Types.SurfaceID | null>();
-  readonly surface = input.required<Types.Surface | null>();
-
-  protected readonly styles = computed(() => {
-    const surface = this.surface();
-    const styles: Record<string, string> = {};
-
-    if (surface?.styles) {
-      for (const [key, value] of Object.entries(surface.styles)) {
-        switch (key) {
-          case 'primaryColor': {
-            // Ignored for now. This is due to the fact that the sample agents
-            // produce values for these and if they are used here then they will
-            // override the values at the app level.
-            //
-            // for (let i = 0; i <= 100; i++) {
-            //   styles[`--p-${i}`] = `color-mix(in srgb, ${value} ${100 - i}%, #fff ${i}%)`;
-            // }
-            break;
-          }
-
-          case 'font': {
-            // Ignored for now. This is due to the fact that the sample agents
-            // produce values for these and if they are used here then they will
-            // override the values at the app level.
-            //
-            // styles['--font-family'] = value;
-            // styles['--font-family-flex'] = value;
-            break;
-          }
-        }
-      }
-    }
-
-    return styles;
-  });
-}

package/src/lib/catalog/tabs.ts

@@ -1,72 +0,0 @@
-/*
- 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, signal } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
-import { Styles, Types } from '@a2ui/lit/0.8';
-
-@Component({
-  selector: 'a2ui-tabs',
-  imports: [Renderer],
-  template: `
-    @let tabs = this.tabs();
-    @let selectedIndex = this.selectedIndex();
-
-    <section [class]="theme.components.Tabs.container" [style]="theme.additionalStyles?.Tabs">
-      <div [class]="theme.components.Tabs.element">
-        @for (tab of tabs; track tab) {
-          <button
-            (click)="this.selectedIndex.set($index)"
-            [disabled]="selectedIndex === $index"
-            [class]="buttonClasses()[selectedIndex]"
-          >
-            {{ resolvePrimitive(tab.title) }}
-          </button>
-        }
-      </div>
-
-      <ng-container
-        a2ui-renderer
-        [surfaceId]="surfaceId()!"
-        [component]="tabs[selectedIndex].child"
-      />
-    </section>
-  `,
-  styles: `
-    :host {
-      display: block;
-      flex: var(--weight);
-    }
-  `,
-})
-export class Tabs extends DynamicComponent {
-  protected selectedIndex = signal(0);
-  readonly tabs = input.required<Types.ResolvedTabItem[]>();
-
-  protected readonly buttonClasses = computed(() => {
-    const selectedIndex = this.selectedIndex();
-
-    return this.tabs().map((_, index) => {
-      return index === selectedIndex
-        ? Styles.merge(
-          this.theme.components.Tabs.controls.all,
-          this.theme.components.Tabs.controls.selected,
-        )
-        : this.theme.components.Tabs.controls.all;
-    });
-  });
-}

package/src/lib/catalog/text-field.ts

@@ -1,86 +0,0 @@
-/*
- 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 { computed, Component, input } from '@angular/core';
-import { Primitives, Types } from '@a2ui/lit/0.8';
-import { DynamicComponent } from '../rendering/dynamic-component';
-
-@Component({
-  selector: 'a2ui-text-field',
-  styles: `
-    :host {
-      display: flex;
-      flex: var(--weight);
-    }
-
-    section,
-    input,
-    label {
-      box-sizing: border-box;
-    }
-
-    input {
-      display: block;
-      width: 100%;
-    }
-
-    label {
-      display: block;
-      margin-bottom: 4px;
-    }
-  `,
-  template: `
-    @let resolvedLabel = this.resolvedLabel();
-
-    <section [class]="theme.components.TextField.container">
-      @if (resolvedLabel) {
-        <label [for]="inputId" [class]="theme.components.TextField.label">{{
-          resolvedLabel
-        }}</label>
-      }
-
-      <input
-        autocomplete="off"
-        [class]="theme.components.TextField.element"
-        [style]="theme.additionalStyles?.TextField"
-        (input)="handleInput($event)"
-        [id]="inputId"
-        [value]="inputValue()"
-        placeholder="Please enter a value"
-        [type]="inputType() === 'number' ? 'number' : 'text'"
-      />
-    </section>
-  `,
-})
-export class TextField extends DynamicComponent {
-  readonly text = input.required<Primitives.StringValue | null>();
-  readonly label = input.required<Primitives.StringValue | null>();
-  readonly inputType = input.required<Types.ResolvedTextField['type'] | null>();
-
-  protected inputValue = computed(() => super.resolvePrimitive(this.text()) || '');
-  protected resolvedLabel = computed(() => super.resolvePrimitive(this.label()));
-  protected inputId = super.getUniqueId('a2ui-input');
-
-  protected handleInput(event: Event) {
-    const path = this.text()?.path;
-
-    if (!(event.target instanceof HTMLInputElement) || !path) {
-      return;
-    }
-
-    this.processor.setData(this.component(), path, event.target.value, this.surfaceId());
-  }
-}