@a2ui/angular 0.9.0-alpha.2 → 0.9.0-alpha.4

package/fesm2022/a2ui-angular-v0_9.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Injectable, signal, inject, DestroyRef, NgZone, input, ChangeDetectionStrategy, Component, computed as computed$1, effect as effect$1 } from '@angular/core';
+import { InjectionToken, Inject, Injectable, signal, inject, DestroyRef, NgZone, input, ChangeDetectorRef, HostBinding, ChangeDetectionStrategy, Component, computed as computed$1, effect as effect$1 } from '@angular/core';
 import { MessageProcessor, effect, computed, ComponentContext, Catalog, DataContext } from '@a2ui/web_core/v0_9';
 export { signal as preactSignal } from '@a2ui/web_core/v0_9';
 import { NgComponentOutlet } from '@angular/common';
@@ -290,9 +290,16 @@ class ComponentHostComponent {
     rendererService = inject(A2uiRendererService);
     binder = inject(ComponentBinder);
     destroyRef = inject(DestroyRef);
+    cdr = inject(ChangeDetectorRef);
     componentType = null;
     props = {};
     context;
+    weight = signal(null, ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    // TODO(#1199): Move weight handling to the catalog specification.
+    get flexStyle() {
+        const w = this.weight();
+        return w ? `${w}` : '';
+    }
     resolvedComponentId = '';
     resolvedDataContextPath = '/';
     ngOnInit() {
@@ -315,9 +322,20 @@ class ComponentHostComponent {
         this.resolvedComponentId = id;
         const componentModel = surface.componentsModel.get(id);
         if (!componentModel) {
-            console.warn(`Component ${id} not found in surface ${this.surfaceId()}`);
+            console.warn(`Component ${id} not found in surface ${this.surfaceId()}. Waiting for it...`);
+            const sub = surface.componentsModel.onCreated.subscribe((comp) => {
+                if (comp.id === id) {
+                    this.initializeComponent(surface, comp, id, basePath);
+                    this.cdr.markForCheck();
+                    sub.unsubscribe();
+                }
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
             return;
         }
+        this.initializeComponent(surface, componentModel, id, basePath);
+    }
+    initializeComponent(surface, componentModel, id, basePath) {
         // Resolve component from the surface's catalog
         const catalog = surface.catalog;
         const api = catalog.components.get(componentModel.type);
@@ -330,23 +348,34 @@ class ComponentHostComponent {
         this.context = new ComponentContext(surface, id, basePath);
         this.props = this.binder.bind(this.context);
         this.resolvedDataContextPath = this.context.dataContext.path;
+        // Subscribes to updates to the component model properties, to get the
+        // component to react when a new prop is added after creation.
+        const onPropsUpdateSub = componentModel.onUpdated.subscribe(() => {
+            this.props = this.binder.bind(this.context);
+            // TODO(#1199): Move weight handling to the catalog specification.
+            this.weight.set(componentModel.properties['weight'] || null);
+            this.cdr.markForCheck();
+        });
+        this.weight.set(componentModel.properties['weight'] || null);
         this.destroyRef.onDestroy(() => {
             // ComponentContext itself doesn't have a dispose, but its inner components might.
             // However, SurfaceModel takes care of component disposal.
+            onPropsUpdateSub.unsubscribe();
         });
+        this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ComponentHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ComponentHostComponent, isStandalone: true, selector: "a2ui-v09-component-host", inputs: { componentKey: { classPropertyName: "componentKey", publicName: "componentKey", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ComponentHostComponent, isStandalone: true, selector: "a2ui-v09-component-host", inputs: { componentKey: { classPropertyName: "componentKey", publicName: "componentKey", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.flex": "this.flexStyle" }, styleAttribute: "display: contents;" }, ngImport: i0, template: `
     @if (componentType) {
       <ng-container
         *ngComponentOutlet="
           componentType;
           inputs: {
-          props: props,
-          surfaceId: surfaceId(),
-          componentId: resolvedComponentId,
-          dataContextPath: resolvedDataContextPath,
-        }
+            props: props,
+            surfaceId: surfaceId(),
+            componentId: resolvedComponentId,
+            dataContextPath: resolvedDataContextPath,
+          }
         "
       ></ng-container>
     }
@@ -366,18 +395,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         *ngComponentOutlet="
           componentType;
           inputs: {
-          props: props,
-          surfaceId: surfaceId(),
-          componentId: resolvedComponentId,
-          dataContextPath: resolvedDataContextPath,
-        }
+            props: props,
+            surfaceId: surfaceId(),
+            componentId: resolvedComponentId,
+            dataContextPath: resolvedDataContextPath,
+          }
         "
       ></ng-container>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { componentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentKey", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }] } });
+        }], propDecorators: { componentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentKey", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], flexStyle: [{
+                type: HostBinding,
+                args: ['style.flex']
+            }] } });
 
 /**
  * Copyright 2026 Google LLC
@@ -454,32 +486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * limitations under the License.
  */
 
-/**
- * Copyright 2026 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
- *
- *     http://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.
- */
-/**
- * A collection of Angular component and function implementations mapped to
- * A2UI protocol types.
- *
- * Catalogs are used by the {@link MessageProcessor} to resolve component
- * definitions and by {@link ComponentHostComponent} to instantiate the
- * correct Angular components.
- */
-class AngularCatalog extends Catalog {
-}
-
 /**
  * Copyright 2026 Google LLC
  *
@@ -534,6 +540,32 @@ function provideMarkdownRenderer(renderFn) {
     return { provide: MarkdownRenderer, useClass: DefaultMarkdownRenderer };
 }
 
+/**
+ * Copyright 2026 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
+ *
+ *     http://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.
+ */
+/**
+ * A collection of Angular component and function implementations mapped to
+ * A2UI protocol types.
+ *
+ * Catalogs are used by the {@link MessageProcessor} to resolve component
+ * definitions and by {@link ComponentHostComponent} to instantiate the
+ * correct Angular components.
+ */
+class AngularCatalog extends Catalog {
+}
+
 /**
  * Copyright 2026 Google LLC
  *
@@ -1503,12 +1535,17 @@ class ListComponent extends BasicCatalogComponent {
             return 'none';
         return '';
     }, ...(ngDevMode ? [{ debugName: "styleType" }] : /* istanbul ignore next */ []));
+    /**
+     * Track-by function to ensure stable change detection for list items.
+     * Uses the full resolved path (`basePath/id`) to uniquely identify items.
+     */
+    trackBy = (index, item) => `${item.basePath}/${item.id}`;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ListComponent, isStandalone: true, selector: "a2ui-v09-list", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, dataContextPath: { classPropertyName: "dataContextPath", publicName: "dataContextPath", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
     @switch (listTag()) {
       @case ('ol') {
         <ol [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
-          @for (child of children(); track child.id) {
+          @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host
                 [componentKey]="child"
@@ -1521,7 +1558,7 @@ class ListComponent extends BasicCatalogComponent {
       }
       @case ('ul') {
         <ul [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
-          @for (child of children(); track child.id) {
+          @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host
                 [componentKey]="child"
@@ -1534,7 +1571,7 @@ class ListComponent extends BasicCatalogComponent {
       }
       @default {
         <div [class]="'a2ui-list ' + orientation()" style="list-style-type: none;">
-          @for (child of children(); track child.id) {
+          @for (child of children(); track trackBy($index, child)) {
             <div class="a2ui-list-item-none">
               <a2ui-v09-component-host
                 [componentKey]="child"
@@ -1554,7 +1591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     @switch (listTag()) {
       @case ('ol') {
         <ol [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
-          @for (child of children(); track child.id) {
+          @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host
                 [componentKey]="child"
@@ -1567,7 +1604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       }
       @case ('ul') {
         <ul [class]="'a2ui-list ' + orientation()" [style.list-style-type]="styleType()">
-          @for (child of children(); track child.id) {
+          @for (child of children(); track trackBy($index, child)) {
             <li>
               <a2ui-v09-component-host
                 [componentKey]="child"
@@ -1580,7 +1617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       }
       @default {
         <div [class]="'a2ui-list ' + orientation()" style="list-style-type: none;">
-          @for (child of children(); track child.id) {
+          @for (child of children(); track trackBy($index, child)) {
             <div class="a2ui-list-item-none">
               <a2ui-v09-component-host
                 [componentKey]="child"
@@ -2521,5 +2558,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { A2UI_RENDERER_CONFIG, A2uiRendererService, AngularCatalog, AudioPlayerComponent, BASIC_COMPONENTS, BasicCatalog, BasicCatalogBase, ButtonComponent, CardComponent, CheckBoxComponent, ChoicePickerComponent, ColumnComponent, ComponentBinder, ComponentHostComponent, DateTimeInputComponent, DividerComponent, IconComponent, ImageComponent, ListComponent, ModalComponent, RowComponent, SliderComponent, SurfaceComponent, TabsComponent, TextComponent, TextFieldComponent, VideoComponent, getNormalizedPath, toAngularSignal };
+export { A2UI_RENDERER_CONFIG, A2uiRendererService, AngularCatalog, AudioPlayerComponent, BASIC_COMPONENTS, BasicCatalog, BasicCatalogBase, ButtonComponent, CardComponent, CheckBoxComponent, ChoicePickerComponent, ColumnComponent, ComponentBinder, ComponentHostComponent, DateTimeInputComponent, DefaultMarkdownRenderer, DividerComponent, IconComponent, ImageComponent, ListComponent, MarkdownRenderer, ModalComponent, RowComponent, SliderComponent, SurfaceComponent, TabsComponent, TextComponent, TextFieldComponent, VideoComponent, getNormalizedPath, provideMarkdownRenderer, toAngularSignal };
 //# sourceMappingURL=a2ui-angular-v0_9.mjs.map