@a2ui/angular 0.8.1 → 0.8.2

package/fesm2022/a2ui-angular.mjs

@@ -0,0 +1,872 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, inject, input, Directive, ViewContainerRef, effect, untracked, PLATFORM_ID, DOCUMENT, inputBinding, makeEnvironmentProviders, computed, Component, SecurityContext, ViewEncapsulation } from '@angular/core';
+import { Data, Styles } from '@a2ui/lit/0.8';
+import { Subject, firstValueFrom } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import MarkdownIt from 'markdown-it';
+
+/*
+ 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.
+ */
+const Catalog = new InjectionToken('Catalog');
+
+/*
+ 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.
+ */
+class MessageProcessor extends Data.A2uiMessageProcessor {
+    events = new Subject();
+    setData(node, relativePath, value, surfaceId) {
+        // Override setData to convert from optional inputs (which can be null)
+        // to undefined so that this correctly falls back to the default value for
+        // surfaceId.
+        return super.setData(node, relativePath, value, surfaceId ?? undefined);
+    }
+    dispatch(message) {
+        const completion = new Subject();
+        this.events.next({ message, completion });
+        return firstValueFrom(completion);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MessageProcessor, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MessageProcessor, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MessageProcessor, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ 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.
+ */
+
+/*
+ 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.
+ */
+
+/*
+ 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.
+ */
+const Theme = new InjectionToken('Theme');
+
+let idCounter = 0;
+class DynamicComponent {
+    processor = inject(MessageProcessor);
+    theme = inject(Theme);
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : []));
+    component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
+    weight = input.required(...(ngDevMode ? [{ debugName: "weight" }] : []));
+    sendAction(action) {
+        const component = this.component();
+        const surfaceId = this.surfaceId() ?? undefined;
+        const context = {};
+        if (action.context) {
+            for (const item of action.context) {
+                if (item.value.literalBoolean) {
+                    context[item.key] = item.value.literalBoolean;
+                }
+                else if (item.value.literalNumber) {
+                    context[item.key] = item.value.literalNumber;
+                }
+                else if (item.value.literalString) {
+                    context[item.key] = item.value.literalString;
+                }
+                else if (item.value.path) {
+                    const path = this.processor.resolvePath(item.value.path, component.dataContextPath);
+                    const value = this.processor.getData(component, path, surfaceId);
+                    context[item.key] = value;
+                }
+            }
+        }
+        const message = {
+            userAction: {
+                name: action.name,
+                sourceComponentId: component.id,
+                surfaceId: surfaceId,
+                timestamp: new Date().toISOString(),
+                context,
+            },
+        };
+        return this.processor.dispatch(message);
+    }
+    resolvePrimitive(value) {
+        const component = this.component();
+        const surfaceId = this.surfaceId();
+        if (!value || typeof value !== 'object') {
+            return null;
+        }
+        else if (value.literal != null) {
+            return value.literal;
+        }
+        else if (value.path) {
+            return this.processor.getData(component, value.path, surfaceId ?? undefined);
+        }
+        else if ('literalString' in value) {
+            return value.literalString;
+        }
+        else if ('literalNumber' in value) {
+            return value.literalNumber;
+        }
+        else if ('literalBoolean' in value) {
+            return value.literalBoolean;
+        }
+        return null;
+    }
+    getUniqueId(prefix) {
+        return `${prefix}-${idCounter++}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: DynamicComponent, isStandalone: true, inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.--weight": "weight()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[style.--weight]': 'weight()',
+                    },
+                }]
+        }], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: true }] }] } });
+
+/*
+ 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.
+ */
+class Renderer {
+    viewContainerRef = inject(ViewContainerRef);
+    catalog = inject(Catalog);
+    static hasInsertedStyles = false;
+    currentRef = null;
+    isDestroyed = false;
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : []));
+    component = input.required(...(ngDevMode ? [{ debugName: "component" }] : []));
+    constructor() {
+        effect(() => {
+            const surfaceId = this.surfaceId();
+            const component = this.component();
+            untracked(() => this.render(surfaceId, component));
+        });
+        const platformId = inject(PLATFORM_ID);
+        const document = inject(DOCUMENT);
+        if (!Renderer.hasInsertedStyles && isPlatformBrowser(platformId)) {
+            const styles = document.createElement('style');
+            styles.textContent = Styles.structuralStyles;
+            document.head.appendChild(styles);
+            Renderer.hasInsertedStyles = true;
+        }
+    }
+    ngOnDestroy() {
+        this.isDestroyed = true;
+        this.clear();
+    }
+    async render(surfaceId, component) {
+        const config = this.catalog[component.type];
+        let newComponent = null;
+        let componentBindings = null;
+        if (typeof config === 'function') {
+            newComponent = await config();
+        }
+        else if (typeof config === 'object') {
+            newComponent = await config.type();
+            componentBindings = config.bindings(component);
+        }
+        this.clear();
+        if (newComponent && !this.isDestroyed) {
+            const bindings = [
+                inputBinding('surfaceId', () => surfaceId),
+                inputBinding('component', () => component),
+                inputBinding('weight', () => component.weight ?? 'initial'),
+            ];
+            if (componentBindings) {
+                bindings.push(...componentBindings);
+            }
+            this.currentRef = this.viewContainerRef.createComponent(newComponent, {
+                bindings,
+                injector: this.viewContainerRef.injector,
+            });
+        }
+    }
+    clear() {
+        this.currentRef?.destroy();
+        this.currentRef = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Renderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: Renderer, isStandalone: true, selector: "ng-container[a2ui-renderer]", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Renderer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-container[a2ui-renderer]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }] } });
+
+/*
+ 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.
+ */
+
+/*
+ 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.
+ */
+function provideA2UI(config) {
+    return makeEnvironmentProviders([
+        { provide: Catalog, useValue: config.catalog },
+        { provide: Theme, useValue: config.theme },
+    ]);
+}
+
+/*
+ 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.
+ */
+class Row extends DynamicComponent {
+    alignment = input('stretch', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : []));
+    classes = computed(() => ({
+        ...this.theme.components.Row,
+        [`align-${this.alignment()}`]: true,
+        [`distribute-${this.distribution()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Row, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Row, isStandalone: true, selector: "a2ui-row", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.alignment": "alignment()", "attr.distribution": "distribution()" } }, usesInheritance: true, ngImport: i0, 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>
+  `, isInline: true, 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}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "ng-container[a2ui-renderer]", inputs: ["surfaceId", "component"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Row, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-row', imports: [Renderer], host: {
+                        '[attr.alignment]': 'alignment()',
+                        '[attr.distribution]': 'distribution()',
+                    }, 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>
+  `, 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}\n"] }]
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }] } });
+
+/*
+ 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.
+ */
+class Column extends DynamicComponent {
+    alignment = input('stretch', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    distribution = input('start', ...(ngDevMode ? [{ debugName: "distribution" }] : []));
+    classes = computed(() => ({
+        ...this.theme.components.Column,
+        [`align-${this.alignment()}`]: true,
+        [`distribute-${this.distribution()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Column, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Column, isStandalone: true, selector: "a2ui-column", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, 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>
+  `, isInline: true, 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}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "ng-container[a2ui-renderer]", inputs: ["surfaceId", "component"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Column, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-column', imports: [Renderer], 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>
+  `, 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}\n"] }]
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }] } });
+
+/*
+ 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.
+ */
+class MarkdownRenderer {
+    originalClassMap = new Map();
+    sanitizer = inject(DomSanitizer);
+    markdownIt = MarkdownIt({
+        highlight: (str, lang) => {
+            if (lang === 'html') {
+                const iframe = document.createElement('iframe');
+                iframe.classList.add('html-view');
+                iframe.srcdoc = str;
+                iframe.sandbox = '';
+                return iframe.innerHTML;
+            }
+            return str;
+        },
+    });
+    render(value, tagClassMap) {
+        if (tagClassMap) {
+            this.applyTagClassMap(tagClassMap);
+        }
+        const htmlString = this.markdownIt.render(value);
+        this.unapplyTagClassMap();
+        return this.sanitizer.sanitize(SecurityContext.HTML, htmlString);
+    }
+    applyTagClassMap(tagClassMap) {
+        Object.entries(tagClassMap).forEach(([tag, classes]) => {
+            let tokenName;
+            switch (tag) {
+                case 'p':
+                    tokenName = 'paragraph';
+                    break;
+                case 'h1':
+                case 'h2':
+                case 'h3':
+                case 'h4':
+                case 'h5':
+                case 'h6':
+                    tokenName = 'heading';
+                    break;
+                case 'ul':
+                    tokenName = 'bullet_list';
+                    break;
+                case 'ol':
+                    tokenName = 'ordered_list';
+                    break;
+                case 'li':
+                    tokenName = 'list_item';
+                    break;
+                case 'a':
+                    tokenName = 'link';
+                    break;
+                case 'strong':
+                    tokenName = 'strong';
+                    break;
+                case 'em':
+                    tokenName = 'em';
+                    break;
+            }
+            if (!tokenName) {
+                return;
+            }
+            const key = `${tokenName}_open`;
+            const original = this.markdownIt.renderer.rules[key];
+            this.originalClassMap.set(key, original);
+            this.markdownIt.renderer.rules[key] = (tokens, idx, options, env, self) => {
+                const token = tokens[idx];
+                for (const clazz of classes) {
+                    token.attrJoin('class', clazz);
+                }
+                if (original) {
+                    return original.call(this, tokens, idx, options, env, self);
+                }
+                else {
+                    return self.renderToken(tokens, idx, options);
+                }
+            };
+        });
+    }
+    unapplyTagClassMap() {
+        for (const [key, original] of this.originalClassMap) {
+            this.markdownIt.renderer.rules[key] = original;
+        }
+        this.originalClassMap.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MarkdownRenderer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MarkdownRenderer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MarkdownRenderer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ 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.
+ */
+class Text extends DynamicComponent {
+    markdownRenderer = inject(MarkdownRenderer);
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+    usageHint = input.required(...(ngDevMode ? [{ debugName: "usageHint" }] : []));
+    resolvedText = computed(() => {
+        const usageHint = this.usageHint();
+        let value = super.resolvePrimitive(this.text());
+        if (value == null) {
+            return '(empty)';
+        }
+        switch (usageHint) {
+            case 'h1':
+                value = `# ${value}`;
+                break;
+            case 'h2':
+                value = `## ${value}`;
+                break;
+            case 'h3':
+                value = `### ${value}`;
+                break;
+            case 'h4':
+                value = `#### ${value}`;
+                break;
+            case 'h5':
+                value = `##### ${value}`;
+                break;
+            case 'caption':
+                value = `*${value}*`;
+                break;
+            default:
+                value = String(value);
+                break;
+        }
+        return this.markdownRenderer.render(value, Styles.appendToAll(this.theme.markdown, ['ol', 'ul', 'li'], {}));
+    }, ...(ngDevMode ? [{ debugName: "resolvedText" }] : []));
+    classes = computed(() => {
+        const usageHint = this.usageHint();
+        return Styles.merge(this.theme.components.Text.all, usageHint ? this.theme.components.Text[usageHint] : {});
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    additionalStyles = computed(() => {
+        const usageHint = this.usageHint();
+        const styles = this.theme.additionalStyles?.Text;
+        if (!styles) {
+            return null;
+        }
+        let additionalStyles = {};
+        if (this.areHintedStyles(styles)) {
+            additionalStyles = styles[usageHint ?? 'body'];
+        }
+        else {
+            additionalStyles = styles;
+        }
+        return additionalStyles;
+    }, ...(ngDevMode ? [{ debugName: "additionalStyles" }] : []));
+    areHintedStyles(styles) {
+        if (typeof styles !== 'object' || !styles || Array.isArray(styles)) {
+            return false;
+        }
+        const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'caption', 'body'];
+        return expected.every((v) => v in styles);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Text, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", 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: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <section
+      [class]="classes()"
+      [style]="additionalStyles()"
+      [innerHTML]="resolvedText()"
+    ></section>
+  `, isInline: true, styles: ["a2ui-text{display:block;flex:var(--weight)}a2ui-text h1,a2ui-text h2,a2ui-text h3,a2ui-text h4,a2ui-text h5{line-height:inherit;font:inherit}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Text, decorators: [{
+            type: Component,
+            args: [{ selector: 'a2ui-text', template: `
+    <section
+      [class]="classes()"
+      [style]="additionalStyles()"
+      [innerHTML]="resolvedText()"
+    ></section>
+  `, encapsulation: ViewEncapsulation.None, styles: ["a2ui-text{display:block;flex:var(--weight)}a2ui-text h1,a2ui-text h2,a2ui-text h3,a2ui-text h4,a2ui-text h5{line-height:inherit;font:inherit}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], usageHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usageHint", required: true }] }] } });
+
+/*
+ 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.
+ */
+const DEFAULT_CATALOG = {
+    Row: {
+        type: () => Row,
+        bindings: (node) => {
+            const properties = node.properties;
+            return [
+                inputBinding('alignment', () => properties.alignment ?? 'stretch'),
+                inputBinding('distribution', () => properties.distribution ?? 'start'),
+            ];
+        },
+    },
+    Column: {
+        type: () => Column,
+        bindings: (node) => {
+            const properties = node.properties;
+            return [
+                inputBinding('alignment', () => properties.alignment ?? 'stretch'),
+                inputBinding('distribution', () => properties.distribution ?? 'start'),
+            ];
+        },
+    },
+    List: {
+        type: () => import('./a2ui-angular-list-nEeT59V3.mjs').then((r) => r.List),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [inputBinding('direction', () => properties.direction ?? 'vertical')];
+        },
+    },
+    Card: () => import('./a2ui-angular-card-Ix6OIdUv.mjs').then((r) => r.Card),
+    Image: {
+        type: () => import('./a2ui-angular-image-BWzAw0rh.mjs').then((r) => r.Image),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [
+                inputBinding('url', () => properties.url),
+                inputBinding('usageHint', () => properties.usageHint),
+            ];
+        },
+    },
+    Icon: {
+        type: () => import('./a2ui-angular-icon-BE9Hj9V6.mjs').then((r) => r.Icon),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [inputBinding('name', () => properties.name)];
+        },
+    },
+    Video: {
+        type: () => import('./a2ui-angular-video-DuFTfN0B.mjs').then((r) => r.Video),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [inputBinding('url', () => properties.url)];
+        },
+    },
+    AudioPlayer: {
+        type: () => import('./a2ui-angular-audio-DoZb9mn_.mjs').then((r) => r.Audio),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [inputBinding('url', () => properties.url)];
+        },
+    },
+    Text: {
+        type: () => Text,
+        bindings: (node) => {
+            const properties = node.properties;
+            return [
+                inputBinding('text', () => properties.text),
+                inputBinding('usageHint', () => properties.usageHint || null),
+            ];
+        },
+    },
+    Button: {
+        type: () => import('./a2ui-angular-button-CvH0kAtN.mjs').then((r) => r.Button),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [inputBinding('action', () => properties.action)];
+        },
+    },
+    Divider: () => import('./a2ui-angular-divider-BizPl3qL.mjs').then((r) => r.Divider),
+    MultipleChoice: {
+        type: () => import('./a2ui-angular-multiple-choice-Bry7X74i.mjs').then((r) => r.MultipleChoice),
+        bindings: (node) => {
+            const properties = node.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('./a2ui-angular-text-field-Deokh07j.mjs').then((r) => r.TextField),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [
+                inputBinding('text', () => properties.text ?? null),
+                inputBinding('label', () => properties.label),
+                inputBinding('inputType', () => properties.type),
+            ];
+        },
+    },
+    DateTimeInput: {
+        type: () => import('./a2ui-angular-datetime-input-dmZAjvrF.mjs').then((r) => r.DatetimeInput),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [
+                inputBinding('enableDate', () => properties.enableDate),
+                inputBinding('enableTime', () => properties.enableTime),
+                inputBinding('value', () => properties.value),
+            ];
+        },
+    },
+    CheckBox: {
+        type: () => import('./a2ui-angular-checkbox-BN4EF2Ci.mjs').then((r) => r.Checkbox),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [
+                inputBinding('label', () => properties.label),
+                inputBinding('value', () => properties.value),
+            ];
+        },
+    },
+    Slider: {
+        type: () => import('./a2ui-angular-slider-BgseUbN2.mjs').then((r) => r.Slider),
+        bindings: (node) => {
+            const properties = node.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('./a2ui-angular-tabs-q5Mn9vgq.mjs').then((r) => r.Tabs),
+        bindings: (node) => {
+            const properties = node.properties;
+            return [inputBinding('tabs', () => properties.tabItems)];
+        },
+    },
+    Modal: {
+        type: () => import('./a2ui-angular-modal-mr9LmczA.mjs').then((r) => r.Modal),
+        bindings: () => [],
+    },
+};
+
+/*
+ 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.
+ */
+class Surface {
+    surfaceId = input.required(...(ngDevMode ? [{ debugName: "surfaceId" }] : []));
+    surface = input.required(...(ngDevMode ? [{ debugName: "surface" }] : []));
+    styles = computed(() => {
+        const surface = this.surface();
+        const styles = {};
+        if (surface?.styles) {
+            for (const [key, value] of Object.entries(surface.styles)) {
+                switch (key) {
+                    // Here we generate a palette from the singular primary color received
+                    // from the surface data. We will want the values to range from
+                    // 0 <= x <= 100, where 0 = back, 100 = white, and 50 = the primary
+                    // color itself. As such we use a color-mix to create the intermediate
+                    // values.
+                    //
+                    // Note: since we use half the range for black to the primary color,
+                    // and half the range for primary color to white the mixed values have
+                    // to go up double the amount, i.e., a range from black to primary
+                    // color needs to fit in 0 -> 50 rather than 0 -> 100.
+                    case 'primaryColor': {
+                        styles['--p-100'] = '#ffffff';
+                        styles['--p-99'] = `color-mix(in srgb, ${value} 2%, white 98%)`;
+                        styles['--p-98'] = `color-mix(in srgb, ${value} 4%, white 96%)`;
+                        styles['--p-95'] = `color-mix(in srgb, ${value} 10%, white 90%)`;
+                        styles['--p-90'] = `color-mix(in srgb, ${value} 20%, white 80%)`;
+                        styles['--p-80'] = `color-mix(in srgb, ${value} 40%, white 60%)`;
+                        styles['--p-70'] = `color-mix(in srgb, ${value} 60%, white 40%)`;
+                        styles['--p-60'] = `color-mix(in srgb, ${value} 80%, white 20%)`;
+                        styles['--p-50'] = value;
+                        styles['--p-40'] = `color-mix(in srgb, ${value} 80%, black 20%)`;
+                        styles['--p-35'] = `color-mix(in srgb, ${value} 70%, black 30%)`;
+                        styles['--p-30'] = `color-mix(in srgb, ${value} 60%, black 40%)`;
+                        styles['--p-25'] = `color-mix(in srgb, ${value} 50%, black 50%)`;
+                        styles['--p-20'] = `color-mix(in srgb, ${value} 40%, black 60%)`;
+                        styles['--p-15'] = `color-mix(in srgb, ${value} 30%, black 70%)`;
+                        styles['--p-10'] = `color-mix(in srgb, ${value} 20%, black 80%)`;
+                        styles['--p-5'] = `color-mix(in srgb, ${value} 10%, black 90%)`;
+                        styles['--0'] = '#00000';
+                        break;
+                    }
+                    case 'font': {
+                        styles['--font-family'] = value;
+                        styles['--font-family-flex'] = value;
+                        break;
+                    }
+                }
+            }
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "styles" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Surface, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Surface, isStandalone: true, selector: "a2ui-surface", inputs: { surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: true, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "styles()" } }, ngImport: i0, template: `
+    @let surfaceId = this.surfaceId();
+    @let surface = this.surface();
+
+    @if (surfaceId && surface) {
+      <ng-container a2ui-renderer [surfaceId]="surfaceId" [component]="surface.componentTree!" />
+    }
+  `, isInline: true, styles: [":host{display:flex;min-height:0;max-height:100%;flex-direction:column;gap:16px}\n"], dependencies: [{ kind: "directive", type: Renderer, selector: "ng-container[a2ui-renderer]", inputs: ["surfaceId", "component"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Surface, decorators: [{
+            type: Component,
+            args: [{ 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!" />
+    }
+  `, host: {
+                        '[style]': 'styles()',
+                    }, styles: [":host{display:flex;min-height:0;max-height:100%;flex-direction:column;gap:16px}\n"] }]
+        }], propDecorators: { surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: true }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: true }] }] } });
+
+/*
+ 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.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Catalog, DEFAULT_CATALOG, DynamicComponent, MessageProcessor, Renderer, Surface, Theme, provideA2UI };
+//# sourceMappingURL=a2ui-angular.mjs.map