@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs

@@ -1,459 +1,1015 @@
-import { AsyncPipe } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, input, booleanAttribute, output, inject, DestroyRef, signal, viewChild, computed, effect, untracked, afterRenderEffect, forwardRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { map, of, delay, Subject, combineLatest, takeUntil } from 'rxjs';
-import * as i6 from '@testgorilla/tgo-ui/components/ai-caveat';
-import { AiCaveatComponentModule } from '@testgorilla/tgo-ui/components/ai-caveat';
-import * as i7 from '@testgorilla/tgo-ui/components/alert-banner';
-import { AlertBannerComponentModule } from '@testgorilla/tgo-ui/components/alert-banner';
-import * as i3 from '@testgorilla/tgo-ui/components/button';
-import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import * as i2 from '@testgorilla/tgo-ui/components/field';
-import { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';
-import * as i4 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i5 from '@testgorilla/tgo-ui/components/prompt';
-import { PromptModule } from '@testgorilla/tgo-ui/components/prompt';
-import * as i8 from '@testgorilla/tgo-ui/components/tag';
-import { TagComponentModule } from '@testgorilla/tgo-ui/components/tag';
-import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpParams } from '@angular/common/http';
-
-const OPENAI_DEFAULT_ENDPOINT = 'https://api.openai.com/v1/chat/completions';
-const OPENAI_DEFAULT_MODEL = 'gpt-5-mini';
-const GEMINI_DEFAULT_MODEL = 'gemini-3.0-flash';
-class WriteWithAiLlmService {
-    constructor(http) {
-        this.http = http;
-    }
-    generate(request, config) {
-        if (!config.apiKey) {
-            return this.simulateResponse(request, config);
-        }
-        if (config.provider === 'gemini') {
-            return this.callGemini(request, config);
-        }
-        return this.callOpenAi(request, config);
-    }
-    resolveEndpoint(config) {
-        return config.endpoint ?? config.baseUrl ?? OPENAI_DEFAULT_ENDPOINT;
-    }
-    callOpenAi(request, config) {
-        const endpoint = this.resolveEndpoint(config);
-        const model = config.model ?? OPENAI_DEFAULT_MODEL;
-        const systemMessage = this.buildSystemMessage(request.sourceText, request.context ?? config.context);
-        const body = {
-            model,
-            messages: [
-                { role: 'system', content: systemMessage },
-                { role: 'user', content: request.prompt },
-            ],
-        };
-        const headers = new HttpHeaders({
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${config.apiKey}`,
-        });
-        return this.http
-            .post(endpoint, body, { headers })
-            .pipe(map(res => res.choices[0]?.message?.content ?? ''));
-    }
-    callGemini(request, config) {
-        const model = config.model ?? GEMINI_DEFAULT_MODEL;
-        const baseUrl = config.endpoint ??
-            config.baseUrl ??
-            `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent`;
-        const systemMessage = this.buildSystemMessage(request.sourceText, request.context ?? config.context);
-        const body = {
-            system_instruction: { parts: [{ text: systemMessage }] },
-            contents: [{ role: 'user', parts: [{ text: request.prompt }] }],
-        };
-        const apiKey = config.apiKey;
-        if (!apiKey) {
-            return this.simulateResponse(request, config);
-        }
-        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
-        const params = new HttpParams().set('key', apiKey);
-        return this.http
-            .post(baseUrl, body, { headers, params })
-            .pipe(map(res => res.candidates?.[0]?.content?.parts?.[0]?.text ?? ''));
-    }
-    simulateResponse(request, _config) {
-        const source = request.sourceText?.trim();
-        const prompt = request.prompt?.trim();
-        let response;
-        if (source && prompt) {
-            const truncated = source.length > 200 ? `${source.substring(0, 200)}…` : source;
-            response =
-                `Based on the following text:\n\n"${truncated}"\n\n` +
-                    `Here is the result for "${prompt}":\n\n${this.generatePlaceholderContent(prompt, source)}`;
-        }
-        else if (prompt) {
-            response = this.generatePlaceholderContent(prompt, '');
-        }
-        else {
-            response = 'Please provide a prompt describing what you would like me to write.';
-        }
-        return of(response).pipe(delay(1200));
-    }
-    generatePlaceholderContent(prompt, source) {
-        const lower = prompt.toLowerCase();
-        if (lower.includes('shorter') || lower.includes('concise') || lower.includes('summarize')) {
-            const sentences = source.split(/[.!?]+/).filter(s => s.trim());
-            if (sentences.length > 1) {
-                return `${sentences
-                    .slice(0, Math.ceil(sentences.length / 2))
-                    .join('. ')
-                    .trim()}.`;
-            }
-            return `${source.substring(0, Math.ceil(source.length * 0.6)).trim()}…`;
-        }
-        if (lower.includes('formal') || lower.includes('professional') || lower.includes('tone')) {
-            return `Dear Recipient,\n\nI hope this message finds you well. ${source || 'I am writing to follow up on our recent discussion.'}\n\nPlease do not hesitate to reach out should you require further information.\n\nBest regards`;
-        }
-        if (lower.includes('email') || lower.includes('draft') || lower.includes('write')) {
-            return `Subject: Follow-up\n\nHi there,\n\n${source || 'Thank you for your time. I wanted to reach out regarding the next steps.'}\n\nLooking forward to hearing from you.\n\nBest regards`;
-        }
-        return `[Simulated LLM response]\n\nPrompt: ${prompt}\n\nThis is a simulated response. To enable real LLM calls, provide an apiKey in the llmConfig input. The service supports OpenAI-compatible and Gemini endpoints.`;
-    }
-    buildSystemMessage(sourceText, context) {
-        const parts = [];
-        if (context) {
-            parts.push(context);
-        }
-        if (sourceText) {
-            parts.push(`The user is working with the following source text:\n\n"""${sourceText}"""`);
-        }
-        parts.push('Respond with only the requested content. Do not include explanations or preamble.');
-        return parts.join('\n\n');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiLlmService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiLlmService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiLlmService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
-
-class WriteWithAiComponent {
-    constructor() {
-        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.standalone = input(false, ...(ngDevMode ? [{ debugName: "standalone" }] : /* istanbul ignore next */ []));
-        this.defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : /* istanbul ignore next */ []));
-        this.fieldLabel = input('', ...(ngDevMode ? [{ debugName: "fieldLabel" }] : /* istanbul ignore next */ []));
-        this.header = input('', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.promptValue = input('', ...(ngDevMode ? [{ debugName: "promptValue" }] : /* istanbul ignore next */ []));
-        this.tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
-        this.status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-        this.subheader = input(undefined, ...(ngDevMode ? [{ debugName: "subheader" }] : /* istanbul ignore next */ []));
-        this.llmConfig = input(undefined, ...(ngDevMode ? [{ debugName: "llmConfig" }] : /* istanbul ignore next */ []));
-        /** Layout: make the inner field stretch to fill its container height. */
-        this.fullHeight = input(false, ...(ngDevMode ? [{ debugName: "fullHeight" }] : /* istanbul ignore next */ []));
-        /** Layout: render the inner field without a visible border. */
-        this.borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []));
-        /**
-         * When true, hides the free-text `ui-prompt` and renders the `tags` chips on their own.
-         * Clicking a chip submits its label as the prompt via `promptSubmit`.
-         * Use this when the host backend only accepts a constrained set of prompts (e.g. an enum).
-         */
-        this.tagsOnly = input(false, { ...(ngDevMode ? { debugName: "tagsOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Opaque host metadata emitted with promptSubmit for backend integrations. */
-        this.metadata = input({}, ...(ngDevMode ? [{ debugName: "metadata" }] : /* istanbul ignore next */ []));
-        this.valueChange = output();
-        this.promptChange = output();
-        this.promptSubmit = output();
-        this.cancelPending = output();
-        this.acceptResult = output();
-        this.requestRefine = output();
-        this.destroyRef = inject(DestroyRef);
-        this.llmService = inject(WriteWithAiLlmService);
-        this.uiTranslate = inject(UiTranslatePipe);
-        this.promptModel = signal('', ...(ngDevMode ? [{ debugName: "promptModel" }] : /* istanbul ignore next */ []));
-        this.isPanelManuallyOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPanelManuallyOpen" }] : /* istanbul ignore next */ []));
-        this.internalStatus = signal('idle', ...(ngDevMode ? [{ debugName: "internalStatus" }] : /* istanbul ignore next */ []));
-        this.internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
-        this.cancelRequest$ = new Subject();
-        /** ControlValueAccessor: whether the form control is disabled. */
-        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-        /** Tag carousel (tagsOnly mode): scroll container + arrow-enabled state. */
-        this.tagsScrollRef = viewChild('tagsScrollContainer', ...(ngDevMode ? [{ debugName: "tagsScrollRef" }] : /* istanbul ignore next */ []));
-        this.canScrollTagsLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollTagsLeft" }] : /* istanbul ignore next */ []));
-        this.canScrollTagsRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollTagsRight" }] : /* istanbul ignore next */ []));
-        /** ControlValueAccessor callbacks. */
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.translationContext = 'WRITE_WITH_AI.';
-        this.labels = toSignal(combineLatest([
-            this.uiTranslate.transform(`${this.translationContext}CANCEL`),
-            this.uiTranslate.transform(`${this.translationContext}ACCEPT`),
-            this.uiTranslate.transform(`${this.translationContext}MAKE_CHANGES`),
-            this.uiTranslate.transform(`${this.translationContext}TRY_AGAIN`),
-        ]).pipe(map(([cancel, accept, makeChanges, tryAgain]) => ({ cancel, accept, makeChanges, tryAgain }))), { initialValue: { cancel: '', accept: '', makeChanges: '', tryAgain: '' } });
-        this.isDefaultMode = computed(() => this.llmConfig()?.default === true, ...(ngDevMode ? [{ debugName: "isDefaultMode" }] : /* istanbul ignore next */ []));
-        this.effectiveStatus = computed(() => (this.isDefaultMode() ? this.internalStatus() : this.status()), ...(ngDevMode ? [{ debugName: "effectiveStatus" }] : /* istanbul ignore next */ []));
-        this.effectiveValue = computed(() => (this.isDefaultMode() ? this.internalValue() : this.value()), ...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
-        this.isPanelVisible = computed(() => this.standalone() || this.isPanelManuallyOpen(), ...(ngDevMode ? [{ debugName: "isPanelVisible" }] : /* istanbul ignore next */ []));
-        this.promptTags = computed(() => this.tags().map(tag => ({ id: tag.id, label: tag.label, autocomplete: tag.description ?? '' })), ...(ngDevMode ? [{ debugName: "promptTags" }] : /* istanbul ignore next */ []));
-        this.statusConfig = computed(() => {
-            const l = this.labels();
-            switch (this.effectiveStatus()) {
-                case 'loading':
-                    return {
-                        variant: 'loading',
-                        alertType: 'info',
-                        messageKey: `${this.translationContext}WRITING`,
-                        actions: [{ label: l.cancel, onClick: () => this.handleCancel() }],
-                    };
-                case 'success':
-                    return {
-                        variant: 'success',
-                        alertType: 'success',
-                        messageKey: `${this.translationContext}CONTENT_GENERATED`,
-                        actions: [
-                            { label: l.makeChanges, onClick: () => this.handleRefine() },
-                            { label: l.accept, onClick: () => this.handleAccept() },
-                        ],
-                    };
-                case 'error':
-                    return {
-                        variant: 'error',
-                        alertType: 'error',
-                        messageKey: `${this.translationContext}ERROR_MESSAGE`,
-                        actions: [{ label: l.tryAgain, onClick: () => this.handleRefine() }],
-                    };
-                case 'idle':
-                    return null;
-                default:
-                    return null;
-            }
-        }, ...(ngDevMode ? [{ debugName: "statusConfig" }] : /* istanbul ignore next */ []));
-        this.promptModelData = computed(() => ({ text: this.promptModel(), files: [] }), ...(ngDevMode ? [{ debugName: "promptModelData" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const promptValue = this.promptValue();
-            const isDefault = this.isDefaultMode();
-            if (!isDefault) {
-                untracked(() => this.promptModel.set(promptValue));
-            }
-        });
-        effect(() => {
-            const value = this.value();
-            const isDefault = this.isDefaultMode();
-            if (isDefault) {
-                untracked(() => this.internalValue.set(value));
-            }
-        });
-        // Scroll events don't trigger change detection, so the arrow disabled-state
-        // is kept in signals. This re-measures whenever the carousel (re)mounts or
-        // the tag set changes; runtime scrolling is handled by the (scroll) listener.
-        // It only reads layout, so it runs in the dedicated `read` phase.
-        afterRenderEffect({
-            read: () => {
-                this.tags();
-                const el = this.tagsScrollRef()?.nativeElement;
-                if (el) {
-                    this.measureTagScroll(el);
-                }
-            },
-        });
-        // Resizing the host can change overflow without a scroll or tag-set change,
-        // so observe the carousel and re-measure when its box changes.
-        effect(onCleanup => {
-            const el = this.tagsScrollRef()?.nativeElement;
-            if (!el || typeof ResizeObserver === 'undefined') {
-                return;
-            }
-            const observer = new ResizeObserver(() => this.measureTagScroll(el));
-            observer.observe(el);
-            onCleanup(() => observer.disconnect());
-        });
-    }
-    handlePromptModelChange(value) {
-        const text = typeof value === 'string' ? value : (value?.text ?? '');
-        this.promptModel.set(text);
-        this.promptChange.emit(text);
-    }
-    ngOnInit() {
-        if (this.defaultOpen()) {
-            this.isPanelManuallyOpen.set(true);
-        }
-    }
-    togglePanel() {
-        if (this.standalone()) {
-            return;
-        }
-        this.isPanelManuallyOpen.update(current => !current);
-    }
-    handleValueInput(value) {
-        if (this.isDefaultMode()) {
-            this.internalValue.set(value);
-        }
-        this.valueChange.emit(value);
-        this.onChange(value);
-        this.onTouched();
-    }
-    handlePromptSubmit(promptData) {
-        const prompt = typeof promptData === 'string' ? promptData : (promptData?.text ?? this.promptModel());
-        this.promptModel.set(prompt);
-        this.promptChange.emit(prompt);
-        const submitEvent = {
-            prompt,
-            content: this.effectiveValue(),
-            metadata: this.metadata(),
-        };
-        if (this.isDefaultMode()) {
-            this.executeDefaultFlow(prompt);
-        }
-        this.promptSubmit.emit(submitEvent);
-    }
-    handleTagClick(tag) {
-        // ui-tag's press fires even when isDisabled, so guard here.
-        if (this.cvaDisabled()) {
-            return;
-        }
-        this.handlePromptSubmit(tag.label);
-    }
-    measureTagScroll(el) {
-        this.canScrollTagsLeft.set(el.scrollLeft > 0);
-        this.canScrollTagsRight.set(Math.ceil(el.scrollLeft + el.clientWidth) < el.scrollWidth);
-    }
-    scrollTags(el, direction) {
-        el.scrollBy({ left: direction * el.clientWidth * 0.8, behavior: 'smooth' });
-    }
-    handlePrimaryAction() {
-        const status = this.effectiveStatus();
-        if (status === 'loading') {
-            this.handleCancel();
-        }
-        else if (status === 'success') {
-            this.handleAccept();
-        }
-        else if (status === 'error') {
-            this.handleRefine();
-        }
-    }
-    handleSecondaryAction() {
-        if (this.effectiveStatus() === 'success') {
-            this.handleRefine();
-        }
-    }
-    // --- ControlValueAccessor ---
-    writeValue(value) {
-        const v = value ?? '';
-        if (this.isDefaultMode()) {
-            this.internalValue.set(v);
-        }
-        // For integration mode the host uses the [value] input directly,
-        // but we still keep internal state in sync for CVA consumers.
-        this.internalValue.set(v);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.cvaDisabled.set(isDisabled);
-    }
-    // --- Private helpers ---
-    executeDefaultFlow(prompt) {
-        const config = this.llmConfig();
-        if (!config) {
-            return;
-        }
-        this.cancelRequest$.next();
-        this.internalStatus.set('loading');
-        this.llmService
-            .generate({ sourceText: this.effectiveValue(), prompt, context: config.context }, config)
-            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.cancelRequest$))
-            .subscribe({
-            next: result => {
-                this.internalValue.set(result);
-                this.valueChange.emit(result);
-                this.onChange(result);
-                this.internalStatus.set('success');
-            },
-            error: () => {
-                this.internalStatus.set('error');
-            },
-        });
-    }
-    handleCancel() {
-        if (this.isDefaultMode()) {
-            this.cancelRequest$.next();
-            this.internalStatus.set('idle');
-        }
-        this.cancelPending.emit();
-    }
-    handleAccept() {
-        if (this.isDefaultMode()) {
-            this.internalStatus.set('idle');
-            this.promptModel.set('');
-        }
-        if (!this.standalone()) {
-            this.isPanelManuallyOpen.set(false);
-        }
-        this.acceptResult.emit();
-    }
-    handleRefine() {
-        if (this.isDefaultMode()) {
-            this.internalStatus.set('idle');
-        }
-        this.requestRefine.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: WriteWithAiComponent, isStandalone: true, selector: "ui-write-with-ai", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, promptValue: { classPropertyName: "promptValue", publicName: "promptValue", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, llmConfig: { classPropertyName: "llmConfig", publicName: "llmConfig", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, tagsOnly: { classPropertyName: "tagsOnly", publicName: "tagsOnly", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", promptChange: "promptChange", promptSubmit: "promptSubmit", cancelPending: "cancelPending", acceptResult: "acceptResult", requestRefine: "requestRefine" }, host: { styleAttribute: "display: block" }, providers: [
-            UiTranslatePipe,
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => WriteWithAiComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "tagsScrollRef", first: true, predicate: ["tagsScrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"write-with-ai\"\n  [class.write-with-ai--standalone]=\"standalone()\"\n  [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n  @if (!standalone()) {\n    <div class=\"write-with-ai__host\">\n      <ui-field\n        [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n        type=\"textarea\"\n        [showBottomContent]=\"false\"\n        [fullHeight]=\"fullHeight()\"\n        [borderless]=\"borderless()\"\n        [disabled]=\"cvaDisabled()\"\n        [ngModel]=\"effectiveValue()\"\n        (ngModelChange)=\"handleValueInput($event)\"\n      ></ui-field>\n      <ui-button\n        class=\"write-with-ai__cta\"\n        variant=\"ghost-ai\"\n        size=\"small\"\n        [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n        iconName=\"Sparkle-in-line\"\n        iconPosition=\"left\"\n        [disabled]=\"isPanelVisible() || cvaDisabled()\"\n        (buttonClickEvent)=\"togglePanel()\"\n      ></ui-button>\n    </div>\n  }\n\n  @if (isPanelVisible()) {\n    <section\n      class=\"write-with-ai__panel\"\n      [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n      role=\"region\"\n      [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n    >\n      <header class=\"write-with-ai__panel-header\">\n        <div class=\"write-with-ai__panel-heading\">\n          <div class=\"write-with-ai__title-row\">\n            @if (effectiveStatus() !== 'loading') {\n              <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n            }\n            <h4 class=\"write-with-ai__title\">\n              {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n            </h4>\n          </div>\n          @if (subheader()) {\n            <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n          }\n        </div>\n        @if (!standalone()) {\n          <ui-button\n            variant=\"icon-button\"\n            iconName=\"Close\"\n            size=\"small\"\n            [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n            [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n            (buttonClickEvent)=\"togglePanel()\"\n          ></ui-button>\n        }\n      </header>\n\n      @if (effectiveStatus() === 'idle') {\n        @if (tagsOnly()) {\n          @if (tags().length) {\n            <div class=\"write-with-ai__tags-prompt\">\n              <div\n                class=\"write-with-ai__tags-container\"\n                role=\"group\"\n                [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n                #tagsScrollContainer\n                (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n              >\n                @for (tag of tags(); track tag.id) {\n                  <ui-tag\n                    [label]=\"tag.label\"\n                    [ariaLabel]=\"tag.label\"\n                    [isDisabled]=\"cvaDisabled()\"\n                    (press)=\"handleTagClick(tag)\"\n                  ></ui-tag>\n                }\n              </div>\n              <div class=\"write-with-ai__tags-arrows\">\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-left-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n                ></ui-button>\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-right-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n                ></ui-button>\n              </div>\n            </div>\n          }\n        } @else {\n          <div class=\"write-with-ai__prompt\">\n            <ui-prompt\n              [ngModel]=\"promptModelData()\"\n              (ngModelChange)=\"handlePromptModelChange($event)\"\n              [tags]=\"promptTags()\"\n              [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n              [showSendButton]=\"true\"\n              (promptData)=\"handlePromptSubmit($event)\"\n            ></ui-prompt>\n          </div>\n        }\n      }\n\n      @if (statusConfig(); as cfg) {\n        <ui-alert-banner\n          [alertType]=\"cfg.alertType\"\n          alertVariant=\"callout\"\n          [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n          [includeDismissButton]=\"false\"\n          [isLoading]=\"cfg.variant === 'loading'\"\n          [hasIcon]=\"cfg.variant !== 'loading'\"\n          [actions]=\"cfg.actions\"\n          [isFullWidth]=\"true\"\n        ></ui-alert-banner>\n      }\n\n      <div class=\"write-with-ai__caveat\">\n        <ui-ai-caveat></ui-ai-caveat>\n      </div>\n    </section>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.write-with-ai{display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:100%;overflow:hidden}.write-with-ai--full-height{height:100%}.write-with-ai--full-height .write-with-ai__host{flex:1}.write-with-ai__host{position:relative;display:flex;flex-direction:column}.write-with-ai__cta{position:absolute;right:8px;bottom:8px;z-index:1;background-color:#fff;border-radius:100px}.write-with-ai__panel{border:none;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:#f4f4f4}.write-with-ai__panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.write-with-ai__panel-heading{display:flex;flex-direction:column;gap:8px}.write-with-ai__title-row{display:flex;align-items:center;gap:8px}.write-with-ai__title{margin:0}.write-with-ai__subheader{margin:0;font-size:14px;line-height:22px;font-weight:400;color:#242424}.write-with-ai__quick-actions{display:flex;gap:8px;flex-wrap:wrap}.write-with-ai__prompt{display:flex;flex-direction:column;gap:4px}.write-with-ai__tags-prompt{display:flex;align-items:center;gap:4px;padding:8px;border:1px solid #919191;border-radius:10px;background-color:#fff}.write-with-ai__tags-container{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.write-with-ai__tags-container::-webkit-scrollbar{display:none}.write-with-ai__tags-arrows{display:flex;align-items:center;gap:4px;flex-shrink:0}.write-with-ai__status-actions{display:flex;gap:8px;justify-content:flex-end}.write-with-ai__caveat{font-size:12px}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.5}}:host ::ng-deep .write-with-ai__host textarea{padding-bottom:48px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FieldComponentModule }, { kind: "component", type: i2.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "testId", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: PromptModule }, { kind: "component", type: i5.PromptComponent, selector: "ui-prompt", inputs: ["tags", "actionTag", "secondaryActionTag", "collapseActionTags", "maxCharacters", "supportedFileTypes", "autoClear", "showSendButton", "sendButtonDisabled", "enableFileUpload", "loading", "placeholder", "errorMessage", "dropdownItems", "dropdownHeading", "showDropdownClose", "showCharacterCount", "helpText", "disabled"], outputs: ["promptData", "actionTagFileSelected", "secondaryActionTagPress", "dropdownItemSelected", "dropdownClosed"] }, { kind: "ngmodule", type: AiCaveatComponentModule }, { kind: "component", type: i6.AiCaveatComponent, selector: "ui-ai-caveat", inputs: ["applicationTheme"] }, { kind: "ngmodule", type: AlertBannerComponentModule }, { kind: "component", type: i7.AlertBannerComponent, selector: "ui-alert-banner", inputs: ["alertType", "alertVariant", "message", "includeDismissButton", "shadow", "linkText", "linkUrl", "linkTarget", "actions", "applicationTheme", "size", "isFullWidth", "closeButtonTooltip", "testId", "hasIcon", "isLoading", "fixed", "ariaDescribedby", "secondaryAlerts"], outputs: ["dismiss"] }, { kind: "ngmodule", type: TagComponentModule }, { kind: "component", type: i8.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "pinnedBackground", "constrainWidth", "isDisabled", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["isSelectedChange", "close", "press"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-write-with-ai', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display: block' }, providers: [
-                        UiTranslatePipe,
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => WriteWithAiComponent),
-                            multi: true,
-                        },
-                    ], imports: [
-                        AsyncPipe,
-                        FormsModule,
-                        FieldComponentModule,
-                        ButtonComponentModule,
-                        IconComponentModule,
-                        PromptModule,
-                        AiCaveatComponentModule,
-                        AlertBannerComponentModule,
-                        TagComponentModule,
-                        UiTranslatePipe,
-                    ], template: "<div\n  class=\"write-with-ai\"\n  [class.write-with-ai--standalone]=\"standalone()\"\n  [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n  @if (!standalone()) {\n    <div class=\"write-with-ai__host\">\n      <ui-field\n        [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n        type=\"textarea\"\n        [showBottomContent]=\"false\"\n        [fullHeight]=\"fullHeight()\"\n        [borderless]=\"borderless()\"\n        [disabled]=\"cvaDisabled()\"\n        [ngModel]=\"effectiveValue()\"\n        (ngModelChange)=\"handleValueInput($event)\"\n      ></ui-field>\n      <ui-button\n        class=\"write-with-ai__cta\"\n        variant=\"ghost-ai\"\n        size=\"small\"\n        [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n        iconName=\"Sparkle-in-line\"\n        iconPosition=\"left\"\n        [disabled]=\"isPanelVisible() || cvaDisabled()\"\n        (buttonClickEvent)=\"togglePanel()\"\n      ></ui-button>\n    </div>\n  }\n\n  @if (isPanelVisible()) {\n    <section\n      class=\"write-with-ai__panel\"\n      [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n      role=\"region\"\n      [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n    >\n      <header class=\"write-with-ai__panel-header\">\n        <div class=\"write-with-ai__panel-heading\">\n          <div class=\"write-with-ai__title-row\">\n            @if (effectiveStatus() !== 'loading') {\n              <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n            }\n            <h4 class=\"write-with-ai__title\">\n              {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n            </h4>\n          </div>\n          @if (subheader()) {\n            <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n          }\n        </div>\n        @if (!standalone()) {\n          <ui-button\n            variant=\"icon-button\"\n            iconName=\"Close\"\n            size=\"small\"\n            [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n            [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n            (buttonClickEvent)=\"togglePanel()\"\n          ></ui-button>\n        }\n      </header>\n\n      @if (effectiveStatus() === 'idle') {\n        @if (tagsOnly()) {\n          @if (tags().length) {\n            <div class=\"write-with-ai__tags-prompt\">\n              <div\n                class=\"write-with-ai__tags-container\"\n                role=\"group\"\n                [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n                #tagsScrollContainer\n                (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n              >\n                @for (tag of tags(); track tag.id) {\n                  <ui-tag\n                    [label]=\"tag.label\"\n                    [ariaLabel]=\"tag.label\"\n                    [isDisabled]=\"cvaDisabled()\"\n                    (press)=\"handleTagClick(tag)\"\n                  ></ui-tag>\n                }\n              </div>\n              <div class=\"write-with-ai__tags-arrows\">\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-left-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n                ></ui-button>\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-right-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n                ></ui-button>\n              </div>\n            </div>\n          }\n        } @else {\n          <div class=\"write-with-ai__prompt\">\n            <ui-prompt\n              [ngModel]=\"promptModelData()\"\n              (ngModelChange)=\"handlePromptModelChange($event)\"\n              [tags]=\"promptTags()\"\n              [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n              [showSendButton]=\"true\"\n              (promptData)=\"handlePromptSubmit($event)\"\n            ></ui-prompt>\n          </div>\n        }\n      }\n\n      @if (statusConfig(); as cfg) {\n        <ui-alert-banner\n          [alertType]=\"cfg.alertType\"\n          alertVariant=\"callout\"\n          [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n          [includeDismissButton]=\"false\"\n          [isLoading]=\"cfg.variant === 'loading'\"\n          [hasIcon]=\"cfg.variant !== 'loading'\"\n          [actions]=\"cfg.actions\"\n          [isFullWidth]=\"true\"\n        ></ui-alert-banner>\n      }\n\n      <div class=\"write-with-ai__caveat\">\n        <ui-ai-caveat></ui-ai-caveat>\n      </div>\n    </section>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.write-with-ai{display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:100%;overflow:hidden}.write-with-ai--full-height{height:100%}.write-with-ai--full-height .write-with-ai__host{flex:1}.write-with-ai__host{position:relative;display:flex;flex-direction:column}.write-with-ai__cta{position:absolute;right:8px;bottom:8px;z-index:1;background-color:#fff;border-radius:100px}.write-with-ai__panel{border:none;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:#f4f4f4}.write-with-ai__panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.write-with-ai__panel-heading{display:flex;flex-direction:column;gap:8px}.write-with-ai__title-row{display:flex;align-items:center;gap:8px}.write-with-ai__title{margin:0}.write-with-ai__subheader{margin:0;font-size:14px;line-height:22px;font-weight:400;color:#242424}.write-with-ai__quick-actions{display:flex;gap:8px;flex-wrap:wrap}.write-with-ai__prompt{display:flex;flex-direction:column;gap:4px}.write-with-ai__tags-prompt{display:flex;align-items:center;gap:4px;padding:8px;border:1px solid #919191;border-radius:10px;background-color:#fff}.write-with-ai__tags-container{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.write-with-ai__tags-container::-webkit-scrollbar{display:none}.write-with-ai__tags-arrows{display:flex;align-items:center;gap:4px;flex-shrink:0}.write-with-ai__status-actions{display:flex;gap:8px;justify-content:flex-end}.write-with-ai__caveat{font-size:12px}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.5}}:host ::ng-deep .write-with-ai__host textarea{padding-bottom:48px!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], standalone: [{ type: i0.Input, args: [{ isSignal: true, alias: "standalone", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], fieldLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], promptValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptValue", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], subheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheader", required: false }] }], llmConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "llmConfig", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], tagsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagsOnly", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], promptChange: [{ type: i0.Output, args: ["promptChange"] }], promptSubmit: [{ type: i0.Output, args: ["promptSubmit"] }], cancelPending: [{ type: i0.Output, args: ["cancelPending"] }], acceptResult: [{ type: i0.Output, args: ["acceptResult"] }], requestRefine: [{ type: i0.Output, args: ["requestRefine"] }], tagsScrollRef: [{ type: i0.ViewChild, args: ['tagsScrollContainer', { isSignal: true }] }] } });
-
-class WriteWithAiComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiComponentModule, imports: [WriteWithAiComponent], exports: [WriteWithAiComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiComponentModule, imports: [WriteWithAiComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WriteWithAiComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [WriteWithAiComponent],
-                    exports: [WriteWithAiComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { AsyncPipe } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Injectable, NgModule, afterRenderEffect, booleanAttribute, computed, effect, forwardRef, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Subject, combineLatest, delay, map, of, takeUntil } from "rxjs";
+import * as i6 from "@testgorilla/tgo-ui/components/ai-caveat";
+import { AiCaveatComponentModule } from "@testgorilla/tgo-ui/components/ai-caveat";
+import * as i7 from "@testgorilla/tgo-ui/components/alert-banner";
+import { AlertBannerComponentModule } from "@testgorilla/tgo-ui/components/alert-banner";
+import * as i3 from "@testgorilla/tgo-ui/components/button";
+import { ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i2 from "@testgorilla/tgo-ui/components/field";
+import { FieldComponentModule } from "@testgorilla/tgo-ui/components/field";
+import * as i4 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import * as i5 from "@testgorilla/tgo-ui/components/prompt";
+import { PromptModule } from "@testgorilla/tgo-ui/components/prompt";
+import * as i8 from "@testgorilla/tgo-ui/components/tag";
+import { TagComponentModule } from "@testgorilla/tgo-ui/components/tag";
+import * as i1$1 from "@angular/common/http";
+import { HttpHeaders, HttpParams } from "@angular/common/http";
+const OPENAI_DEFAULT_ENDPOINT = "https://api.openai.com/v1/chat/completions";
+const OPENAI_DEFAULT_MODEL = "gpt-5-mini";
+const GEMINI_DEFAULT_MODEL = "gemini-3.0-flash";
+var WriteWithAiLlmService = class WriteWithAiLlmService {
+	constructor(http) {
+		this.http = http;
+	}
+	generate(request, config) {
+		if (!config.apiKey) return this.simulateResponse(request, config);
+		if (config.provider === "gemini") return this.callGemini(request, config);
+		return this.callOpenAi(request, config);
+	}
+	resolveEndpoint(config) {
+		return config.endpoint ?? config.baseUrl ?? OPENAI_DEFAULT_ENDPOINT;
+	}
+	callOpenAi(request, config) {
+		const endpoint = this.resolveEndpoint(config);
+		const body = {
+			model: config.model ?? OPENAI_DEFAULT_MODEL,
+			messages: [{
+				role: "system",
+				content: this.buildSystemMessage(request.sourceText, request.context ?? config.context)
+			}, {
+				role: "user",
+				content: request.prompt
+			}]
+		};
+		const headers = new HttpHeaders({
+			"Content-Type": "application/json",
+			Authorization: `Bearer ${config.apiKey}`
+		});
+		return this.http.post(endpoint, body, { headers }).pipe(map((res) => res.choices[0]?.message?.content ?? ""));
+	}
+	callGemini(request, config) {
+		const model = config.model ?? GEMINI_DEFAULT_MODEL;
+		const baseUrl = config.endpoint ?? config.baseUrl ?? `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent`;
+		const body = {
+			system_instruction: { parts: [{ text: this.buildSystemMessage(request.sourceText, request.context ?? config.context) }] },
+			contents: [{
+				role: "user",
+				parts: [{ text: request.prompt }]
+			}]
+		};
+		const apiKey = config.apiKey;
+		if (!apiKey) return this.simulateResponse(request, config);
+		const headers = new HttpHeaders({ "Content-Type": "application/json" });
+		const params = new HttpParams().set("key", apiKey);
+		return this.http.post(baseUrl, body, {
+			headers,
+			params
+		}).pipe(map((res) => res.candidates?.[0]?.content?.parts?.[0]?.text ?? ""));
+	}
+	simulateResponse(request, _config) {
+		const source = request.sourceText?.trim();
+		const prompt = request.prompt?.trim();
+		let response;
+		if (source && prompt) response = `Based on the following text:\n\n"${source.length > 200 ? `${source.substring(0, 200)}…` : source}"\n\nHere is the result for "${prompt}":\n\n${this.generatePlaceholderContent(prompt, source)}`;
+		else if (prompt) response = this.generatePlaceholderContent(prompt, "");
+		else response = "Please provide a prompt describing what you would like me to write.";
+		return of(response).pipe(delay(1200));
+	}
+	generatePlaceholderContent(prompt, source) {
+		const lower = prompt.toLowerCase();
+		if (lower.includes("shorter") || lower.includes("concise") || lower.includes("summarize")) {
+			const sentences = source.split(/[.!?]+/).filter((s) => s.trim());
+			if (sentences.length > 1) return `${sentences.slice(0, Math.ceil(sentences.length / 2)).join(". ").trim()}.`;
+			return `${source.substring(0, Math.ceil(source.length * .6)).trim()}…`;
+		}
+		if (lower.includes("formal") || lower.includes("professional") || lower.includes("tone")) return `Dear Recipient,\n\nI hope this message finds you well. ${source || "I am writing to follow up on our recent discussion."}\n\nPlease do not hesitate to reach out should you require further information.\n\nBest regards`;
+		if (lower.includes("email") || lower.includes("draft") || lower.includes("write")) return `Subject: Follow-up\n\nHi there,\n\n${source || "Thank you for your time. I wanted to reach out regarding the next steps."}\n\nLooking forward to hearing from you.\n\nBest regards`;
+		return `[Simulated LLM response]\n\nPrompt: ${prompt}\n\nThis is a simulated response. To enable real LLM calls, provide an apiKey in the llmConfig input. The service supports OpenAI-compatible and Gemini endpoints.`;
+	}
+	buildSystemMessage(sourceText, context) {
+		const parts = [];
+		if (context) parts.push(context);
+		if (sourceText) parts.push(`The user is working with the following source text:\n\n"""${sourceText}"""`);
+		parts.push("Respond with only the requested content. Do not include explanations or preamble.");
+		return parts.join("\n\n");
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: WriteWithAiLlmService,
+			deps: [{ token: i1$1.HttpClient }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: WriteWithAiLlmService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WriteWithAiLlmService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i1$1.HttpClient }]
+});
+var WriteWithAiComponent = class WriteWithAiComponent {
+	constructor() {
+		this.value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.standalone = input(false, ...ngDevMode ? [{ debugName: "standalone" }] : /* istanbul ignore next */ []);
+		this.defaultOpen = input(false, ...ngDevMode ? [{ debugName: "defaultOpen" }] : /* istanbul ignore next */ []);
+		this.fieldLabel = input("", ...ngDevMode ? [{ debugName: "fieldLabel" }] : /* istanbul ignore next */ []);
+		this.header = input("", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.promptValue = input("", ...ngDevMode ? [{ debugName: "promptValue" }] : /* istanbul ignore next */ []);
+		this.tags = input([], ...ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []);
+		this.status = input("idle", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+		this.subheader = input(void 0, ...ngDevMode ? [{ debugName: "subheader" }] : /* istanbul ignore next */ []);
+		this.llmConfig = input(void 0, ...ngDevMode ? [{ debugName: "llmConfig" }] : /* istanbul ignore next */ []);
+		this.fullHeight = input(false, ...ngDevMode ? [{ debugName: "fullHeight" }] : /* istanbul ignore next */ []);
+		this.borderless = input(false, ...ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []);
+		this.tagsOnly = input(false, {
+			...ngDevMode ? { debugName: "tagsOnly" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.metadata = input({}, ...ngDevMode ? [{ debugName: "metadata" }] : /* istanbul ignore next */ []);
+		this.valueChange = output();
+		this.promptChange = output();
+		this.promptSubmit = output();
+		this.cancelPending = output();
+		this.acceptResult = output();
+		this.requestRefine = output();
+		this.destroyRef = inject(DestroyRef);
+		this.llmService = inject(WriteWithAiLlmService);
+		this.uiTranslate = inject(UiTranslatePipe);
+		this.promptModel = signal("", ...ngDevMode ? [{ debugName: "promptModel" }] : /* istanbul ignore next */ []);
+		this.isPanelManuallyOpen = signal(false, ...ngDevMode ? [{ debugName: "isPanelManuallyOpen" }] : /* istanbul ignore next */ []);
+		this.internalStatus = signal("idle", ...ngDevMode ? [{ debugName: "internalStatus" }] : /* istanbul ignore next */ []);
+		this.internalValue = signal("", ...ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []);
+		this.cancelRequest$ = new Subject();
+		this.cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+		this.tagsScrollRef = viewChild("tagsScrollContainer", ...ngDevMode ? [{ debugName: "tagsScrollRef" }] : /* istanbul ignore next */ []);
+		this.canScrollTagsLeft = signal(false, ...ngDevMode ? [{ debugName: "canScrollTagsLeft" }] : /* istanbul ignore next */ []);
+		this.canScrollTagsRight = signal(false, ...ngDevMode ? [{ debugName: "canScrollTagsRight" }] : /* istanbul ignore next */ []);
+		this.onChange = () => {};
+		this.onTouched = () => {};
+		this.translationContext = "WRITE_WITH_AI.";
+		this.labels = toSignal(combineLatest([
+			this.uiTranslate.transform(`${this.translationContext}CANCEL`),
+			this.uiTranslate.transform(`${this.translationContext}ACCEPT`),
+			this.uiTranslate.transform(`${this.translationContext}MAKE_CHANGES`),
+			this.uiTranslate.transform(`${this.translationContext}TRY_AGAIN`)
+		]).pipe(map(([cancel, accept, makeChanges, tryAgain]) => ({
+			cancel,
+			accept,
+			makeChanges,
+			tryAgain
+		}))), { initialValue: {
+			cancel: "",
+			accept: "",
+			makeChanges: "",
+			tryAgain: ""
+		} });
+		this.isDefaultMode = computed(() => this.llmConfig()?.default === true, ...ngDevMode ? [{ debugName: "isDefaultMode" }] : /* istanbul ignore next */ []);
+		this.effectiveStatus = computed(() => this.isDefaultMode() ? this.internalStatus() : this.status(), ...ngDevMode ? [{ debugName: "effectiveStatus" }] : /* istanbul ignore next */ []);
+		this.effectiveValue = computed(() => this.isDefaultMode() ? this.internalValue() : this.value(), ...ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []);
+		this.isPanelVisible = computed(() => this.standalone() || this.isPanelManuallyOpen(), ...ngDevMode ? [{ debugName: "isPanelVisible" }] : /* istanbul ignore next */ []);
+		this.promptTags = computed(() => this.tags().map((tag) => ({
+			id: tag.id,
+			label: tag.label,
+			autocomplete: tag.description ?? ""
+		})), ...ngDevMode ? [{ debugName: "promptTags" }] : /* istanbul ignore next */ []);
+		this.statusConfig = computed(() => {
+			const l = this.labels();
+			switch (this.effectiveStatus()) {
+				case "loading": return {
+					variant: "loading",
+					alertType: "info",
+					messageKey: `${this.translationContext}WRITING`,
+					actions: [{
+						label: l.cancel,
+						onClick: () => this.handleCancel()
+					}]
+				};
+				case "success": return {
+					variant: "success",
+					alertType: "success",
+					messageKey: `${this.translationContext}CONTENT_GENERATED`,
+					actions: [{
+						label: l.makeChanges,
+						onClick: () => this.handleRefine()
+					}, {
+						label: l.accept,
+						onClick: () => this.handleAccept()
+					}]
+				};
+				case "error": return {
+					variant: "error",
+					alertType: "error",
+					messageKey: `${this.translationContext}ERROR_MESSAGE`,
+					actions: [{
+						label: l.tryAgain,
+						onClick: () => this.handleRefine()
+					}]
+				};
+				case "idle": return null;
+				default: return null;
+			}
+		}, ...ngDevMode ? [{ debugName: "statusConfig" }] : /* istanbul ignore next */ []);
+		this.promptModelData = computed(() => ({
+			text: this.promptModel(),
+			files: []
+		}), ...ngDevMode ? [{ debugName: "promptModelData" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const promptValue = this.promptValue();
+			if (!this.isDefaultMode()) untracked(() => this.promptModel.set(promptValue));
+		});
+		effect(() => {
+			const value = this.value();
+			if (this.isDefaultMode()) untracked(() => this.internalValue.set(value));
+		});
+		afterRenderEffect({ read: () => {
+			this.tags();
+			const el = this.tagsScrollRef()?.nativeElement;
+			if (el) this.measureTagScroll(el);
+		} });
+		effect((onCleanup) => {
+			const el = this.tagsScrollRef()?.nativeElement;
+			if (!el || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => this.measureTagScroll(el));
+			observer.observe(el);
+			onCleanup(() => observer.disconnect());
+		});
+	}
+	handlePromptModelChange(value) {
+		const text = typeof value === "string" ? value : value?.text ?? "";
+		this.promptModel.set(text);
+		this.promptChange.emit(text);
+	}
+	ngOnInit() {
+		if (this.defaultOpen()) this.isPanelManuallyOpen.set(true);
+	}
+	togglePanel() {
+		if (this.standalone()) return;
+		this.isPanelManuallyOpen.update((current) => !current);
+	}
+	handleValueInput(value) {
+		if (this.isDefaultMode()) this.internalValue.set(value);
+		this.valueChange.emit(value);
+		this.onChange(value);
+		this.onTouched();
+	}
+	handlePromptSubmit(promptData) {
+		const prompt = typeof promptData === "string" ? promptData : promptData?.text ?? this.promptModel();
+		this.promptModel.set(prompt);
+		this.promptChange.emit(prompt);
+		const submitEvent = {
+			prompt,
+			content: this.effectiveValue(),
+			metadata: this.metadata()
+		};
+		if (this.isDefaultMode()) this.executeDefaultFlow(prompt);
+		this.promptSubmit.emit(submitEvent);
+	}
+	handleTagClick(tag) {
+		if (this.cvaDisabled()) return;
+		this.handlePromptSubmit(tag.label);
+	}
+	measureTagScroll(el) {
+		this.canScrollTagsLeft.set(el.scrollLeft > 0);
+		this.canScrollTagsRight.set(Math.ceil(el.scrollLeft + el.clientWidth) < el.scrollWidth);
+	}
+	scrollTags(el, direction) {
+		el.scrollBy({
+			left: direction * el.clientWidth * .8,
+			behavior: "smooth"
+		});
+	}
+	handlePrimaryAction() {
+		const status = this.effectiveStatus();
+		if (status === "loading") this.handleCancel();
+		else if (status === "success") this.handleAccept();
+		else if (status === "error") this.handleRefine();
+	}
+	handleSecondaryAction() {
+		if (this.effectiveStatus() === "success") this.handleRefine();
+	}
+	writeValue(value) {
+		const v = value ?? "";
+		if (this.isDefaultMode()) this.internalValue.set(v);
+		this.internalValue.set(v);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.cvaDisabled.set(isDisabled);
+	}
+	executeDefaultFlow(prompt) {
+		const config = this.llmConfig();
+		if (!config) return;
+		this.cancelRequest$.next();
+		this.internalStatus.set("loading");
+		this.llmService.generate({
+			sourceText: this.effectiveValue(),
+			prompt,
+			context: config.context
+		}, config).pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.cancelRequest$)).subscribe({
+			next: (result) => {
+				this.internalValue.set(result);
+				this.valueChange.emit(result);
+				this.onChange(result);
+				this.internalStatus.set("success");
+			},
+			error: () => {
+				this.internalStatus.set("error");
+			}
+		});
+	}
+	handleCancel() {
+		if (this.isDefaultMode()) {
+			this.cancelRequest$.next();
+			this.internalStatus.set("idle");
+		}
+		this.cancelPending.emit();
+	}
+	handleAccept() {
+		if (this.isDefaultMode()) {
+			this.internalStatus.set("idle");
+			this.promptModel.set("");
+		}
+		if (!this.standalone()) this.isPanelManuallyOpen.set(false);
+		this.acceptResult.emit();
+	}
+	handleRefine() {
+		if (this.isDefaultMode()) this.internalStatus.set("idle");
+		this.requestRefine.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: WriteWithAiComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: WriteWithAiComponent,
+			isStandalone: true,
+			selector: "ui-write-with-ai",
+			inputs: {
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				standalone: {
+					classPropertyName: "standalone",
+					publicName: "standalone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				defaultOpen: {
+					classPropertyName: "defaultOpen",
+					publicName: "defaultOpen",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fieldLabel: {
+					classPropertyName: "fieldLabel",
+					publicName: "fieldLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				header: {
+					classPropertyName: "header",
+					publicName: "header",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				promptValue: {
+					classPropertyName: "promptValue",
+					publicName: "promptValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tags: {
+					classPropertyName: "tags",
+					publicName: "tags",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				status: {
+					classPropertyName: "status",
+					publicName: "status",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				subheader: {
+					classPropertyName: "subheader",
+					publicName: "subheader",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				llmConfig: {
+					classPropertyName: "llmConfig",
+					publicName: "llmConfig",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fullHeight: {
+					classPropertyName: "fullHeight",
+					publicName: "fullHeight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				borderless: {
+					classPropertyName: "borderless",
+					publicName: "borderless",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tagsOnly: {
+					classPropertyName: "tagsOnly",
+					publicName: "tagsOnly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				metadata: {
+					classPropertyName: "metadata",
+					publicName: "metadata",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				valueChange: "valueChange",
+				promptChange: "promptChange",
+				promptSubmit: "promptSubmit",
+				cancelPending: "cancelPending",
+				acceptResult: "acceptResult",
+				requestRefine: "requestRefine"
+			},
+			host: { styleAttribute: "display: block" },
+			providers: [UiTranslatePipe, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => WriteWithAiComponent),
+				multi: true
+			}],
+			viewQueries: [{
+				propertyName: "tagsScrollRef",
+				first: true,
+				predicate: ["tagsScrollContainer"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<div\n  class=\"write-with-ai\"\n  [class.write-with-ai--standalone]=\"standalone()\"\n  [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n  @if (!standalone()) {\n    <div class=\"write-with-ai__host\">\n      <ui-field\n        [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n        type=\"textarea\"\n        [showBottomContent]=\"false\"\n        [fullHeight]=\"fullHeight()\"\n        [borderless]=\"borderless()\"\n        [disabled]=\"cvaDisabled()\"\n        [ngModel]=\"effectiveValue()\"\n        (ngModelChange)=\"handleValueInput($event)\"\n      ></ui-field>\n      <ui-button\n        class=\"write-with-ai__cta\"\n        variant=\"ghost-ai\"\n        size=\"small\"\n        [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n        iconName=\"Sparkle-in-line\"\n        iconPosition=\"left\"\n        [disabled]=\"isPanelVisible() || cvaDisabled()\"\n        (buttonClickEvent)=\"togglePanel()\"\n      ></ui-button>\n    </div>\n  }\n\n  @if (isPanelVisible()) {\n    <section\n      class=\"write-with-ai__panel\"\n      [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n      role=\"region\"\n      [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n    >\n      <header class=\"write-with-ai__panel-header\">\n        <div class=\"write-with-ai__panel-heading\">\n          <div class=\"write-with-ai__title-row\">\n            @if (effectiveStatus() !== 'loading') {\n              <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n            }\n            <h4 class=\"write-with-ai__title\">\n              {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n            </h4>\n          </div>\n          @if (subheader()) {\n            <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n          }\n        </div>\n        @if (!standalone()) {\n          <ui-button\n            variant=\"icon-button\"\n            iconName=\"Close\"\n            size=\"small\"\n            [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n            [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n            (buttonClickEvent)=\"togglePanel()\"\n          ></ui-button>\n        }\n      </header>\n\n      @if (effectiveStatus() === 'idle') {\n        @if (tagsOnly()) {\n          @if (tags().length) {\n            <div class=\"write-with-ai__tags-prompt\">\n              <div\n                class=\"write-with-ai__tags-container\"\n                role=\"group\"\n                [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n                #tagsScrollContainer\n                (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n              >\n                @for (tag of tags(); track tag.id) {\n                  <ui-tag\n                    [label]=\"tag.label\"\n                    [ariaLabel]=\"tag.label\"\n                    [isDisabled]=\"cvaDisabled()\"\n                    (press)=\"handleTagClick(tag)\"\n                  ></ui-tag>\n                }\n              </div>\n              <div class=\"write-with-ai__tags-arrows\">\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-left-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n                ></ui-button>\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-right-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n                ></ui-button>\n              </div>\n            </div>\n          }\n        } @else {\n          <div class=\"write-with-ai__prompt\">\n            <ui-prompt\n              [ngModel]=\"promptModelData()\"\n              (ngModelChange)=\"handlePromptModelChange($event)\"\n              [tags]=\"promptTags()\"\n              [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n              [showSendButton]=\"true\"\n              (promptData)=\"handlePromptSubmit($event)\"\n            ></ui-prompt>\n          </div>\n        }\n      }\n\n      @if (statusConfig(); as cfg) {\n        <ui-alert-banner\n          [alertType]=\"cfg.alertType\"\n          alertVariant=\"callout\"\n          [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n          [includeDismissButton]=\"false\"\n          [isLoading]=\"cfg.variant === 'loading'\"\n          [hasIcon]=\"cfg.variant !== 'loading'\"\n          [actions]=\"cfg.actions\"\n          [isFullWidth]=\"true\"\n        ></ui-alert-banner>\n      }\n\n      <div class=\"write-with-ai__caveat\">\n        <ui-ai-caveat></ui-ai-caveat>\n      </div>\n    </section>\n  }\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.write-with-ai{display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:100%;overflow:hidden}.write-with-ai--full-height{height:100%}.write-with-ai--full-height .write-with-ai__host{flex:1}.write-with-ai__host{position:relative;display:flex;flex-direction:column}.write-with-ai__cta{position:absolute;right:8px;bottom:8px;z-index:1;background-color:#fff;border-radius:100px}.write-with-ai__panel{border:none;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:#f4f4f4}.write-with-ai__panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.write-with-ai__panel-heading{display:flex;flex-direction:column;gap:8px}.write-with-ai__title-row{display:flex;align-items:center;gap:8px}.write-with-ai__title{margin:0}.write-with-ai__subheader{margin:0;font-size:14px;line-height:22px;font-weight:400;color:#242424}.write-with-ai__quick-actions{display:flex;gap:8px;flex-wrap:wrap}.write-with-ai__prompt{display:flex;flex-direction:column;gap:4px}.write-with-ai__tags-prompt{display:flex;align-items:center;gap:4px;padding:8px;border:1px solid #919191;border-radius:10px;background-color:#fff}.write-with-ai__tags-container{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.write-with-ai__tags-container::-webkit-scrollbar{display:none}.write-with-ai__tags-arrows{display:flex;align-items:center;gap:4px;flex-shrink:0}.write-with-ai__status-actions{display:flex;gap:8px;justify-content:flex-end}.write-with-ai__caveat{font-size:12px}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.5}}:host ::ng-deep .write-with-ai__host textarea{padding-bottom:48px!important}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "ngmodule",
+					type: FieldComponentModule
+				},
+				{
+					kind: "component",
+					type: i2.FieldComponent,
+					selector: "ui-field",
+					inputs: [
+						"fullWidth",
+						"fullHeight",
+						"label",
+						"labelHtml",
+						"labelIcon",
+						"fieldName",
+						"placeholder",
+						"id",
+						"value",
+						"badgeVariant",
+						"errors",
+						"disabled",
+						"required",
+						"readOnly",
+						"hintMessage",
+						"type",
+						"updateOnBlur",
+						"allowOnlyDigits",
+						"isAutocompleteOff",
+						"allowNegative",
+						"showBottomContent",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"loading",
+						"isValid",
+						"maxCharacters",
+						"trimOnBlur",
+						"trimOnSubmit",
+						"maxRows",
+						"hasTextAreaCounter",
+						"hideBuiltInErrors",
+						"hideLabelInErrors",
+						"max",
+						"min",
+						"textareaHeight",
+						"borderless",
+						"autosizableTextarea",
+						"isAIVariant",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"hasError"
+					],
+					outputs: ["validateEvent", "fieldBlur"]
+				},
+				{
+					kind: "ngmodule",
+					type: ButtonComponentModule
+				},
+				{
+					kind: "component",
+					type: i3.ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i4.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: PromptModule
+				},
+				{
+					kind: "component",
+					type: i5.PromptComponent,
+					selector: "ui-prompt",
+					inputs: [
+						"tags",
+						"actionTag",
+						"secondaryActionTag",
+						"collapseActionTags",
+						"maxCharacters",
+						"supportedFileTypes",
+						"autoClear",
+						"showSendButton",
+						"sendButtonDisabled",
+						"enableFileUpload",
+						"loading",
+						"placeholder",
+						"errorMessage",
+						"dropdownItems",
+						"dropdownHeading",
+						"showDropdownClose",
+						"showCharacterCount",
+						"helpText",
+						"disabled"
+					],
+					outputs: [
+						"promptData",
+						"actionTagFileSelected",
+						"secondaryActionTagPress",
+						"dropdownItemSelected",
+						"dropdownClosed"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: AiCaveatComponentModule
+				},
+				{
+					kind: "component",
+					type: i6.AiCaveatComponent,
+					selector: "ui-ai-caveat",
+					inputs: ["applicationTheme"]
+				},
+				{
+					kind: "ngmodule",
+					type: AlertBannerComponentModule
+				},
+				{
+					kind: "component",
+					type: i7.AlertBannerComponent,
+					selector: "ui-alert-banner",
+					inputs: [
+						"alertType",
+						"alertVariant",
+						"message",
+						"includeDismissButton",
+						"shadow",
+						"linkText",
+						"linkUrl",
+						"linkTarget",
+						"actions",
+						"applicationTheme",
+						"size",
+						"isFullWidth",
+						"closeButtonTooltip",
+						"testId",
+						"hasIcon",
+						"isLoading",
+						"fixed",
+						"ariaDescribedby",
+						"secondaryAlerts"
+					],
+					outputs: ["dismiss"]
+				},
+				{
+					kind: "ngmodule",
+					type: TagComponentModule
+				},
+				{
+					kind: "component",
+					type: i8.TagComponent,
+					selector: "ui-tag",
+					inputs: [
+						"label",
+						"icon",
+						"allowClose",
+						"readOnly",
+						"isSelected",
+						"showIconWhenSelected",
+						"pinnedBackground",
+						"constrainWidth",
+						"isDisabled",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"ariaRequired",
+						"showBadge",
+						"notificationsAmount"
+					],
+					outputs: [
+						"isSelectedChange",
+						"close",
+						"press"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WriteWithAiComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-write-with-ai",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { style: "display: block" },
+			providers: [UiTranslatePipe, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => WriteWithAiComponent),
+				multi: true
+			}],
+			imports: [
+				AsyncPipe,
+				FormsModule,
+				FieldComponentModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				PromptModule,
+				AiCaveatComponentModule,
+				AlertBannerComponentModule,
+				TagComponentModule,
+				UiTranslatePipe
+			],
+			template: "<div\n  class=\"write-with-ai\"\n  [class.write-with-ai--standalone]=\"standalone()\"\n  [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n  @if (!standalone()) {\n    <div class=\"write-with-ai__host\">\n      <ui-field\n        [label]=\"fieldLabel() || (translationContext + 'FIELD_LABEL' | uiTranslate | async)!\"\n        type=\"textarea\"\n        [showBottomContent]=\"false\"\n        [fullHeight]=\"fullHeight()\"\n        [borderless]=\"borderless()\"\n        [disabled]=\"cvaDisabled()\"\n        [ngModel]=\"effectiveValue()\"\n        (ngModelChange)=\"handleValueInput($event)\"\n      ></ui-field>\n      <ui-button\n        class=\"write-with-ai__cta\"\n        variant=\"ghost-ai\"\n        size=\"small\"\n        [label]=\"(translationContext + 'AI_ASSIST' | uiTranslate | async)!\"\n        iconName=\"Sparkle-in-line\"\n        iconPosition=\"left\"\n        [disabled]=\"isPanelVisible() || cvaDisabled()\"\n        (buttonClickEvent)=\"togglePanel()\"\n      ></ui-button>\n    </div>\n  }\n\n  @if (isPanelVisible()) {\n    <section\n      class=\"write-with-ai__panel\"\n      [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n      role=\"region\"\n      [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' | uiTranslate | async)!\"\n    >\n      <header class=\"write-with-ai__panel-header\">\n        <div class=\"write-with-ai__panel-heading\">\n          <div class=\"write-with-ai__title-row\">\n            @if (effectiveStatus() !== 'loading') {\n              <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n            }\n            <h4 class=\"write-with-ai__title\">\n              {{ header() || (translationContext + 'HEADER' | uiTranslate | async) }}\n            </h4>\n          </div>\n          @if (subheader()) {\n            <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n          }\n        </div>\n        @if (!standalone()) {\n          <ui-button\n            variant=\"icon-button\"\n            iconName=\"Close\"\n            size=\"small\"\n            [tooltip]=\"(translationContext + 'CLOSE' | uiTranslate | async)!\"\n            [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' | uiTranslate | async)!\"\n            (buttonClickEvent)=\"togglePanel()\"\n          ></ui-button>\n        }\n      </header>\n\n      @if (effectiveStatus() === 'idle') {\n        @if (tagsOnly()) {\n          @if (tags().length) {\n            <div class=\"write-with-ai__tags-prompt\">\n              <div\n                class=\"write-with-ai__tags-container\"\n                role=\"group\"\n                [attr.aria-label]=\"header() || (translationContext + 'HEADER' | uiTranslate | async)\"\n                #tagsScrollContainer\n                (scroll)=\"measureTagScroll(tagsScrollContainer)\"\n              >\n                @for (tag of tags(); track tag.id) {\n                  <ui-tag\n                    [label]=\"tag.label\"\n                    [ariaLabel]=\"tag.label\"\n                    [isDisabled]=\"cvaDisabled()\"\n                    (press)=\"handleTagClick(tag)\"\n                  ></ui-tag>\n                }\n              </div>\n              <div class=\"write-with-ai__tags-arrows\">\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-left-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_LEFT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsLeft()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, -1)\"\n                ></ui-button>\n                <ui-button\n                  variant=\"icon-button\"\n                  size=\"small\"\n                  iconName=\"Arrow-chevron-right-in-line\"\n                  [tooltip]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [ariaLabel]=\"(translationContext + 'SCROLL_TAGS_RIGHT' | uiTranslate | async)!\"\n                  [disabled]=\"cvaDisabled() || !canScrollTagsRight()\"\n                  (buttonClickEvent)=\"scrollTags(tagsScrollContainer, 1)\"\n                ></ui-button>\n              </div>\n            </div>\n          }\n        } @else {\n          <div class=\"write-with-ai__prompt\">\n            <ui-prompt\n              [ngModel]=\"promptModelData()\"\n              (ngModelChange)=\"handlePromptModelChange($event)\"\n              [tags]=\"promptTags()\"\n              [placeholder]=\"placeholder() || (translationContext + 'PLACEHOLDER' | uiTranslate | async)!\"\n              [showSendButton]=\"true\"\n              (promptData)=\"handlePromptSubmit($event)\"\n            ></ui-prompt>\n          </div>\n        }\n      }\n\n      @if (statusConfig(); as cfg) {\n        <ui-alert-banner\n          [alertType]=\"cfg.alertType\"\n          alertVariant=\"callout\"\n          [message]=\"(cfg.messageKey | uiTranslate | async)!\"\n          [includeDismissButton]=\"false\"\n          [isLoading]=\"cfg.variant === 'loading'\"\n          [hasIcon]=\"cfg.variant !== 'loading'\"\n          [actions]=\"cfg.actions\"\n          [isFullWidth]=\"true\"\n        ></ui-alert-banner>\n      }\n\n      <div class=\"write-with-ai__caveat\">\n        <ui-ai-caveat></ui-ai-caveat>\n      </div>\n    </section>\n  }\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.write-with-ai{display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:100%;overflow:hidden}.write-with-ai--full-height{height:100%}.write-with-ai--full-height .write-with-ai__host{flex:1}.write-with-ai__host{position:relative;display:flex;flex-direction:column}.write-with-ai__cta{position:absolute;right:8px;bottom:8px;z-index:1;background-color:#fff;border-radius:100px}.write-with-ai__panel{border:none;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;background-color:#f4f4f4}.write-with-ai__panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.write-with-ai__panel-heading{display:flex;flex-direction:column;gap:8px}.write-with-ai__title-row{display:flex;align-items:center;gap:8px}.write-with-ai__title{margin:0}.write-with-ai__subheader{margin:0;font-size:14px;line-height:22px;font-weight:400;color:#242424}.write-with-ai__quick-actions{display:flex;gap:8px;flex-wrap:wrap}.write-with-ai__prompt{display:flex;flex-direction:column;gap:4px}.write-with-ai__tags-prompt{display:flex;align-items:center;gap:4px;padding:8px;border:1px solid #919191;border-radius:10px;background-color:#fff}.write-with-ai__tags-container{display:flex;flex-flow:row nowrap;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.write-with-ai__tags-container::-webkit-scrollbar{display:none}.write-with-ai__tags-arrows{display:flex;align-items:center;gap:4px;flex-shrink:0}.write-with-ai__status-actions{display:flex;gap:8px;justify-content:flex-end}.write-with-ai__caveat{font-size:12px}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.5}}:host ::ng-deep .write-with-ai__host textarea{padding-bottom:48px!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		standalone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "standalone",
+				required: false
+			}]
+		}],
+		defaultOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultOpen",
+				required: false
+			}]
+		}],
+		fieldLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldLabel",
+				required: false
+			}]
+		}],
+		header: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "header",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		promptValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "promptValue",
+				required: false
+			}]
+		}],
+		tags: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tags",
+				required: false
+			}]
+		}],
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: false
+			}]
+		}],
+		subheader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subheader",
+				required: false
+			}]
+		}],
+		llmConfig: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "llmConfig",
+				required: false
+			}]
+		}],
+		fullHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullHeight",
+				required: false
+			}]
+		}],
+		borderless: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "borderless",
+				required: false
+			}]
+		}],
+		tagsOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tagsOnly",
+				required: false
+			}]
+		}],
+		metadata: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "metadata",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		promptChange: [{
+			type: i0.Output,
+			args: ["promptChange"]
+		}],
+		promptSubmit: [{
+			type: i0.Output,
+			args: ["promptSubmit"]
+		}],
+		cancelPending: [{
+			type: i0.Output,
+			args: ["cancelPending"]
+		}],
+		acceptResult: [{
+			type: i0.Output,
+			args: ["acceptResult"]
+		}],
+		requestRefine: [{
+			type: i0.Output,
+			args: ["requestRefine"]
+		}],
+		tagsScrollRef: [{
+			type: i0.ViewChild,
+			args: ["tagsScrollContainer", { isSignal: true }]
+		}]
+	}
+});
+var WriteWithAiComponentModule = class WriteWithAiComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: WriteWithAiComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: WriteWithAiComponentModule,
+			imports: [WriteWithAiComponent],
+			exports: [WriteWithAiComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: WriteWithAiComponentModule,
+			imports: [WriteWithAiComponent]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WriteWithAiComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [WriteWithAiComponent],
+			exports: [WriteWithAiComponent]
+		}]
+	}]
+});
 export { WriteWithAiComponent, WriteWithAiComponentModule, WriteWithAiLlmService };
-//# sourceMappingURL=testgorilla-tgo-ui-components-write-with-ai.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-write-with-ai.mjs.map