@a2ui/angular 0.9.0 → 0.10.0

package/LICENSE

@@ -200,4 +200,28 @@
    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.
-   
+
+--------------------------------------------------------------------------------
+The file eval/bin/transcrypt is licensed under the MIT License:
+
+Copyright (c) 2019-2025 James Murty <james@murty.co>
+Copyright (c) 2014-2020 Aaron Bull Schaefer <aaron@elasticdog.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+--------------------------------------------------------------------------------

package/README.md

@@ -22,8 +22,8 @@ A2UI supports multiple protocol versions to ensure backward compatibility as the
 To use the v0.9 implementation, import from the versioned path:
 
 ```typescript
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '@a2ui/angular/v0_9';
-import { BasicCatalog } from '@a2ui/angular/v0_9';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from '@a2ui/angular/v0_9';
+import {BasicCatalog} from '@a2ui/angular/v0_9';
 ```
 
 ## Basic Setup
@@ -31,8 +31,8 @@ import { BasicCatalog } from '@a2ui/angular/v0_9';
 Configure the renderer in your `app.config.ts` using the `A2UI_RENDER_CONFIG` injection token:
 
 ```typescript
-import { ApplicationConfig } from '@angular/core';
-import { A2UI_RENDERER_CONFIG, A2uiRendererService, BasicCatalog } from '@a2ui/angular/v0_9';
+import {ApplicationConfig} from '@angular/core';
+import {A2UI_RENDERER_CONFIG, A2uiRendererService, BasicCatalog} from '@a2ui/angular/v0_9';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -40,7 +40,7 @@ export const appConfig: ApplicationConfig = {
       provide: A2UI_RENDERER_CONFIG,
       useValue: {
         catalogs: [new BasicCatalog()],
-        actionHandler: (action) => {
+        actionHandler: action => {
           console.log('Action received:', action);
         },
       },
@@ -57,8 +57,8 @@ export const appConfig: ApplicationConfig = {
 The simplest way to render an A2UI surface is using the `SurfaceComponent`. This component handles setting up the root `ComponentHost` for you.
 
 ```typescript
-import { Component } from '@angular/core';
-import { SurfaceComponent } from '@a2ui/angular/v0_9';
+import {Component} from '@angular/core';
+import {SurfaceComponent} from '@a2ui/angular/v0_9';
 
 @Component({
   selector: 'app-root',
@@ -74,8 +74,8 @@ export class AppComponent {}
 For more fine-grained control, use the `ComponentHostComponent` to render specific components within a surface:
 
 ```typescript
-import { Component } from '@angular/core';
-import { ComponentHostComponent } from '@a2ui/angular/v0_9';
+import {Component} from '@angular/core';
+import {ComponentHostComponent} from '@a2ui/angular/v0_9';
 
 @Component({
   selector: 'app-custom-layout',

package/fesm2022/a2ui-angular-src-v0_8.mjs

@@ -25,8 +25,8 @@ class MessageProcessor {
     baseProcessor;
     eventsSubject = new Subject();
     events = this.eventsSubject.asObservable();
-    // Signal to track the version of the data in the MessageProcessor. Since the base processor updates 
-    // surfaces in-place (mutating the Map), we use this to force Angular's change detection to 
+    // Signal to track the version of the data in the MessageProcessor. Since the base processor updates
+    // surfaces in-place (mutating the Map), we use this to force Angular's change detection to
     // re-evaluate any components or effects that depend on getSurfaces().
     versionSignal = signal(0, ...(ngDevMode ? [{ debugName: "versionSignal" }] : /* istanbul ignore next */ []));
     version = this.versionSignal.asReadonly();
@@ -38,7 +38,7 @@ class MessageProcessor {
      * This should be called after any update to the underlying base processor's surfaces.
      */
     notify() {
-        this.versionSignal.update((v) => v + 1);
+        this.versionSignal.update(v => v + 1);
     }
     processMessages(messages) {
         this.baseProcessor.processMessages(messages);
@@ -48,8 +48,8 @@ class MessageProcessor {
         const completion = new Subject();
         const promise = new Promise((resolve, reject) => {
             completion.subscribe({
-                next: (msgs) => resolve(msgs),
-                error: (err) => reject(err),
+                next: msgs => resolve(msgs),
+                error: err => reject(err),
             });
         });
         this.eventsSubject.next({ message, completion });
@@ -141,7 +141,7 @@ class DefaultMarkdownRenderer extends MarkdownRenderer {
         }
         catch (e) {
             if (!DefaultMarkdownRenderer.warningLogged) {
-                console.warn("[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback regex.");
+                console.warn('[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback regex.');
                 DefaultMarkdownRenderer.warningLogged = true;
             }
             // Basic implementation for v0.8
@@ -409,8 +409,8 @@ class Renderer {
             Renderer.hasInsertedStyles = true;
         }
         effect(() => {
-            // Explicitly depend on the MessageProcessor's version signal. This ensures that the effect re-runs 
-            // whenever data model changes occur, even if the node's object reference remains identical 
+            // Explicitly depend on the MessageProcessor's version signal. This ensures that the effect re-runs
+            // whenever data model changes occur, even if the node's object reference remains identical
             // (as in the case of in-place mutations from local updates).
             this.processor.version();
             let node = this.component();
@@ -431,7 +431,7 @@ class Renderer {
             const type = node.type;
             // Focus Loss Prevention:
             // If we have an existing component and its unique identity (ID and Type) hasn't changed,
-            // we update its @Input() values in-place. This preserves the underlying DOM element, 
+            // we update its @Input() values in-place. This preserves the underlying DOM element,
             // maintaining focus, text selection, and cursor position.
             if (this.currentComponentRef && this.currentId === id && this.currentType === type) {
                 this.updateInputs(this.currentComponentRef, node, surfaceId);
@@ -454,7 +454,7 @@ class Renderer {
     render(container, node, surfaceId, config) {
         const componentTypeOrPromise = this.resolveComponentType(config);
         if (componentTypeOrPromise instanceof Promise) {
-            componentTypeOrPromise.then((componentType) => {
+            componentTypeOrPromise.then(componentType => {
                 // Ensure we are still supposed to render this component
                 if (this.currentId === node.id && this.currentType === node.type) {
                     const componentRef = container.createComponent(componentType);
@@ -491,13 +491,15 @@ class Renderer {
         componentRef.setInput('surfaceId', surfaceId);
         componentRef.setInput('component', node);
         componentRef.setInput('weight', node.weight ?? 0);
-        const props = node.properties;
-        for (const [key, value] of Object.entries(props)) {
-            try {
-                componentRef.setInput(key, value);
-            }
-            catch (e) {
-                console.warn(`[Renderer] Property "${key}" could not be set on component ${node.type}. If this property is required by the specification, ensure the component declares it as an input.`);
+        if (node.properties) {
+            const props = node.properties;
+            for (const [key, value] of Object.entries(props)) {
+                try {
+                    componentRef.setInput(key, value);
+                }
+                catch (e) {
+                    console.warn(`[Renderer] Property "${key}" could not be set on component ${node.type}. If this property is required by the specification, ensure the component declares it as an input.`);
+                }
             }
         }
         componentRef.changeDetectorRef.markForCheck();
@@ -638,22 +640,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  */
 class Checkbox extends DynamicComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    checked = input.required(...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    inputChecked = computed(() => super.resolvePrimitive(this.checked()) ?? false, ...(ngDevMode ? [{ debugName: "inputChecked" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    inputChecked = computed(() => super.resolvePrimitive(this.value()) ?? false, ...(ngDevMode ? [{ debugName: "inputChecked" }] : /* istanbul ignore next */ []));
     resolvedLabel = computed(() => super.resolvePrimitive(this.label()), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
     inputId = super.getUniqueId('a2ui-checkbox');
     onToggle(event) {
         const checked = event.target.checked;
-        const checkedNode = this.checked();
-        if (checkedNode && typeof checkedNode === 'object' && 'path' in checkedNode && checkedNode.path) {
+        const checkedNode = this.value();
+        if (checkedNode &&
+            typeof checkedNode === 'object' &&
+            'path' in checkedNode &&
+            checkedNode.path) {
             // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
-            this.processor.processMessages([{
+            this.processor.processMessages([
+                {
                     dataModelUpdate: {
                         surfaceId: this.surfaceId(),
                         path: this.processor.resolvePath(checkedNode.path, this.component().dataContextPath),
                         contents: [{ key: '.', valueBoolean: checked }],
                     },
-                }]);
+                },
+            ]);
         }
         else {
             this.sendAction({
@@ -663,7 +670,7 @@ class Checkbox extends DynamicComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Checkbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: Checkbox, isStandalone: true, selector: "a2ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: Checkbox, isStandalone: true, selector: "a2ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <label>
       <input
         type="checkbox"
@@ -688,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       {{ resolvedLabel() }}
     </label>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;gap:.5rem}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 /*
  * Copyright 2025 Google LLC
@@ -773,13 +780,15 @@ class DateTimeInput extends DynamicComponent {
         const valueNode = this.value();
         if (valueNode && typeof valueNode === 'object' && 'path' in valueNode && valueNode.path) {
             // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
-            this.processor.processMessages([{
+            this.processor.processMessages([
+                {
                     dataModelUpdate: {
                         surfaceId: this.surfaceId(),
                         path: this.processor.resolvePath(valueNode.path, this.component().dataContextPath),
                         contents: [{ key: '.', valueString: value }],
                     },
-                }]);
+                },
+            ]);
         }
         else {
             this.handleAction('change', { value });
@@ -1033,11 +1042,7 @@ class Modal extends DynamicComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: Modal, isStandalone: true, selector: "a2ui-modal", inputs: { entryPointChild: { classPropertyName: "entryPointChild", publicName: "entryPointChild", isSignal: true, isRequired: true, transformFunction: null }, contentChild: { classPropertyName: "contentChild", publicName: "contentChild", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     <div class="a2ui-modal-entry-point" (click)="openModal()">
       @if (entryPointChild()) {
-        <ng-container
-          a2ui-renderer
-          [surfaceId]="surfaceId()!"
-          [component]="entryPointChild()!"
-        />
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="entryPointChild()!" />
       }
     </div>
 
@@ -1045,11 +1050,7 @@ class Modal extends DynamicComponent {
       <div [class]="theme.components.Modal.backdrop" (click)="closeModal()">
         <div [class]="theme.components.Modal.element" (click)="$event.stopPropagation()">
           @if (contentChild()) {
-            <ng-container
-              a2ui-renderer
-              [surfaceId]="surfaceId()!"
-              [component]="contentChild()!"
-            />
+            <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="contentChild()!" />
           }
         </div>
       </div>
@@ -1061,11 +1062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ selector: 'a2ui-modal', imports: [Renderer], template: `
     <div class="a2ui-modal-entry-point" (click)="openModal()">
       @if (entryPointChild()) {
-        <ng-container
-          a2ui-renderer
-          [surfaceId]="surfaceId()!"
-          [component]="entryPointChild()!"
-        />
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="entryPointChild()!" />
       }
     </div>
 
@@ -1073,11 +1070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       <div [class]="theme.components.Modal.backdrop" (click)="closeModal()">
         <div [class]="theme.components.Modal.element" (click)="$event.stopPropagation()">
           @if (contentChild()) {
-            <ng-container
-              a2ui-renderer
-              [surfaceId]="surfaceId()!"
-              [component]="contentChild()!"
-            />
+            <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="contentChild()!" />
           }
         </div>
       </div>
@@ -1106,7 +1099,7 @@ class MultipleChoice extends DynamicComponent {
     selections = input.required(...(ngDevMode ? [{ debugName: "selections" }] : /* istanbul ignore next */ []));
     selectId = super.getUniqueId('a2ui-multiple-choice');
     resolvedLabel = computed(() => this.resolvePrimitive(this.label()), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
-    resolvedOptions = computed(() => this.options().map((opt) => ({
+    resolvedOptions = computed(() => this.options().map(opt => ({
         label: this.resolvePrimitive(opt.label),
         value: opt.value,
     })), ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
@@ -1120,15 +1113,20 @@ class MultipleChoice extends DynamicComponent {
     onChange(event) {
         const value = event.target.value;
         const selectionsNode = this.selections();
-        if (selectionsNode && typeof selectionsNode === 'object' && 'path' in selectionsNode && selectionsNode.path) {
+        if (selectionsNode &&
+            typeof selectionsNode === 'object' &&
+            'path' in selectionsNode &&
+            selectionsNode.path) {
             // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
-            this.processor.processMessages([{
+            this.processor.processMessages([
+                {
                     dataModelUpdate: {
                         surfaceId: this.surfaceId(),
                         path: this.processor.resolvePath(selectionsNode.path, this.component().dataContextPath),
                         contents: [{ key: '.', valueString: JSON.stringify({ literalArray: [value] }) }],
                     },
-                }]);
+                },
+            ]);
         }
         else {
             this.handleAction('change', { value });
@@ -1269,13 +1267,15 @@ class Slider extends DynamicComponent {
         const valueNode = this.value();
         if (valueNode && typeof valueNode === 'object' && 'path' in valueNode && valueNode.path) {
             // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
-            this.processor.processMessages([{
+            this.processor.processMessages([
+                {
                     dataModelUpdate: {
                         surfaceId: this.surfaceId(),
                         path: this.processor.resolvePath(valueNode.path, this.component().dataContextPath),
                         contents: [{ key: '.', valueNumber: value }],
                     },
-                }]);
+                },
+            ]);
         }
         else {
             this.handleAction('change', { value });
@@ -1300,7 +1300,7 @@ class Slider extends DynamicComponent {
         type="range"
         [class]="theme.components.Slider.element"
         [id]="inputId"
-        [attr.aria-labelledby]="labelId"
+        [attr.aria-label]="resolvedLabel() ? resolvedLabel() : 'Slider'"
         [min]="minValue()"
         [max]="maxValue()"
         [value]="resolvedValue() ?? 0"
@@ -1320,7 +1320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         type="range"
         [class]="theme.components.Slider.element"
         [id]="inputId"
-        [attr.aria-labelledby]="labelId"
+        [attr.aria-label]="resolvedLabel() ? resolvedLabel() : 'Slider'"
         [min]="minValue()"
         [max]="maxValue()"
         [value]="resolvedValue() ?? 0"
@@ -1471,7 +1471,7 @@ class Text extends DynamicComponent {
             return false;
         }
         const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'caption', 'body'];
-        return expected.every((v) => v in styles);
+        return expected.every(v => v in styles);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Text, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: Text, isStandalone: true, selector: "a2ui-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, usageHint: { classPropertyName: "usageHint", publicName: "usageHint", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
@@ -1530,13 +1530,15 @@ class TextField extends DynamicComponent {
         const textNode = this.text();
         if (textNode && typeof textNode === 'object' && 'path' in textNode && textNode.path) {
             // Update the local data model directly to ensure immediate UI feedback and avoid unnecessary network requests.
-            this.processor.processMessages([{
+            this.processor.processMessages([
+                {
                     dataModelUpdate: {
                         surfaceId: this.surfaceId(),
                         path: this.processor.resolvePath(textNode.path, this.component().dataContextPath),
                         contents: [{ key: '.', valueString: value }],
                     },
-                }]);
+                },
+            ]);
         }
         else {
             this.handleAction('input', { value });
@@ -1773,6 +1775,10 @@ function provideA2UI(config) {
  * limitations under the License.
  */
 
+var types = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
 /**
  * Copyright 2026 Google LLC
  *
@@ -1793,5 +1799,5 @@ function provideA2UI(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AudioPlayer, Button, Card, Catalog, Checkbox, Column, DEFAULT_CATALOG, DateTimeInput, Divider, DynamicComponent, Icon, Image, List, MessageProcessor, Modal, MultipleChoice, Renderer, Row, Slider, Surface, Tabs, Text, TextField, Theme, Video, provideA2UI, provideMarkdownRenderer, registerStandardComponents };
+export { AudioPlayer, Button, Card, Catalog, Checkbox, Column, DEFAULT_CATALOG, DateTimeInput, Divider, DynamicComponent, Icon, Image, List, MessageProcessor, Modal, MultipleChoice, Renderer, Row, Slider, Surface, Tabs, Text, TextField, Theme, types as Types, Video, provideA2UI, provideMarkdownRenderer, registerStandardComponents };
 //# sourceMappingURL=a2ui-angular-src-v0_8.mjs.map