@a2ui/angular 0.8.1 → 0.8.2

package/src/lib/catalog/column.ts

@@ -1,96 +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 { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
-
-@Component({
-  selector: 'a2ui-column',
-  imports: [Renderer],
-  styles: `
-    :host {
-      display: flex;
-      flex: var(--weight);
-    }
-
-    section {
-      display: flex;
-      flex-direction: column;
-      min-width: 100%;
-      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?.Column">
-      @for (child of component().properties.children; track child) {
-        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="child" />
-      }
-    </section>
-  `,
-})
-export class Column extends DynamicComponent<Types.ColumnNode> {
-  readonly alignment = input<Types.ResolvedColumn['alignment']>('stretch');
-  readonly distribution = input<Types.ResolvedColumn['distribution']>('start');
-
-  protected readonly classes = computed(() => ({
-    ...this.theme.components.Column,
-    [`align-${this.alignment()}`]: true,
-    [`distribute-${this.distribution()}`]: true,
-  }));
-}

package/src/lib/catalog/datetime-input.ts

@@ -1,127 +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 { DynamicComponent } from '../rendering/dynamic-component';
-import { Primitives } from '@a2ui/lit/0.8';
-
-@Component({
-  selector: 'a2ui-datetime-input',
-  template: `
-    <section [class]="theme.components.DateTimeInput.container">
-      <label [for]="inputId" [class]="theme.components.DateTimeInput.label">{{ label() }}</label>
-
-      <input
-        autocomplete="off"
-        [attr.type]="inputType()"
-        [id]="inputId"
-        [class]="theme.components.DateTimeInput.element"
-        [style]="theme.additionalStyles?.DateTimeInput"
-        [value]="inputValue()"
-        (input)="handleInput($event)"
-      />
-    </section>
-  `,
-  styles: `
-    :host {
-      display: block;
-      flex: var(--weight);
-      min-height: 0;
-      overflow: auto;
-    }
-
-    input {
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-    }
-  `,
-})
-export class DatetimeInput extends DynamicComponent {
-  readonly value = input.required<Primitives.StringValue | null>();
-  readonly enableDate = input.required<boolean>();
-  readonly enableTime = input.required<boolean>();
-  protected readonly inputId = super.getUniqueId('a2ui-datetime-input');
-
-  protected inputType = computed(() => {
-    const enableDate = this.enableDate();
-    const enableTime = this.enableTime();
-
-    if (enableDate && enableTime) {
-      return 'datetime-local';
-    } else if (enableDate) {
-      return 'date';
-    } else if (enableTime) {
-      return 'time';
-    }
-
-    return 'datetime-local';
-  });
-
-  protected label = computed(() => {
-    // TODO: this should likely be passed from the model.
-    const inputType = this.inputType();
-
-    if (inputType === 'date') {
-      return 'Date';
-    } else if (inputType === 'time') {
-      return 'Time';
-    }
-
-    return 'Date & Time';
-  });
-
-  protected inputValue = computed(() => {
-    const inputType = this.inputType();
-    const parsed = super.resolvePrimitive(this.value()) || '';
-    const date = parsed ? new Date(parsed) : null;
-
-    if (!date || isNaN(date.getTime())) {
-      return '';
-    }
-
-    const year = this.padNumber(date.getFullYear());
-    const month = this.padNumber(date.getMonth());
-    const day = this.padNumber(date.getDate());
-    const hours = this.padNumber(date.getHours());
-    const minutes = this.padNumber(date.getMinutes());
-
-    // Browsers are picky with what format they allow for the `value` attribute of date/time inputs.
-    // We need to parse it out of the provided value. Note that we don't use `toISOString`,
-    // because the resulting value is relative to UTC.
-    if (inputType === 'date') {
-      return `${year}-${month}-${day}`;
-    } else if (inputType === 'time') {
-      return `${hours}:${minutes}`;
-    }
-
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-  });
-
-  protected handleInput(event: Event) {
-    const path = this.value()?.path;
-
-    if (!(event.target instanceof HTMLInputElement) || !path) {
-      return;
-    }
-
-    this.processor.setData(this.component(), path, event.target.value, this.surfaceId());
-  }
-
-  private padNumber(value: number) {
-    return value.toString().padStart(2, '0');
-  }
-}

package/src/lib/catalog/default.ts

@@ -1,185 +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 { 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

@@ -1,37 +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 } 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

@@ -1,44 +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-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

@@ -1,62 +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, 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

@@ -1,63 +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, 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');
-}