@corto-ai/gds-angular 2.1.5-test.7 → 2.1.5-test.8

package/README.md

@@ -30,11 +30,11 @@ If you plan to only use the stylesheet/fonts for this library, we recommend impl
 
 ## CDN Assets
 
-- All brands combined: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.7/css/all.css>
-- Acctivity: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.7/css/acctivity.css>
-- CORTO: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.7/css/corto.css>
-- LawY: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.7/css/lawy.css>
-- LEAP: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.7/css/leap.css>
+- All brands combined: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.8/css/all.css>
+- Acctivity: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.8/css/acctivity.css>
+- CORTO: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.8/css/corto.css>
+- LawY: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.8/css/lawy.css>
+- LEAP: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.8/css/leap.css>
 
 ## Library `@layer`s
 

package/fesm2022/corto-ai-gds-angular.mjs

@@ -9253,6 +9253,9 @@ class GdsMessageInputComponent {
     ...(ngDevMode ? [{ debugName: "sendButtonAriaLabel" }] : /* istanbul ignore next */ []));
     cancelButtonAriaLabel = input('Cancel message', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cancelButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Provisional text shown inline while it is still being recognized. Never part of `value`. */
+    interimText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interimText" }] : /* istanbul ignore next */ []));
     sent = output();
     canceled = output();
     changed = output();
@@ -9268,6 +9271,11 @@ class GdsMessageInputComponent {
     ...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
     hasChildren = computed(() => this.slot().nativeElement.children.length > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    /** Last caret position seen inside the editor, so text can still be inserted after focus is lost. */
+    #caret;
+    #interim;
+    #viewReady = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#viewReady" }] : /* istanbul ignore next */ []));
     icon = computed(() => {
         const mode = this.mode();
         switch (mode) {
@@ -9288,6 +9296,7 @@ class GdsMessageInputComponent {
     ...(ngDevMode ? [{ debugName: "iconAriaLabel" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => {
+            this.#viewReady.set(true);
             const initial = this.value();
             if (!initial) {
                 return;
@@ -9296,6 +9305,28 @@ class GdsMessageInputComponent {
             this.isEmpty.set(false);
         });
     }
+    #renderInterim = effect(() => {
+        const text = this.interimText();
+        if (!this.#viewReady()) {
+            return;
+        }
+        untracked(() => this.#applyInterim(text));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#renderInterim" }] : /* istanbul ignore next */ []));
+    captureCaret() {
+        if (!this.#viewReady()) {
+            return;
+        }
+        const selection = document.getSelection();
+        if (!selection?.rangeCount) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        if (!this.editor().nativeElement.contains(range.commonAncestorContainer)) {
+            return;
+        }
+        this.#caret = range.cloneRange();
+    }
     handleInput() {
         const editor = this.editor().nativeElement;
         const value = this.#serializeContentEditable(editor);
@@ -9333,6 +9364,8 @@ class GdsMessageInputComponent {
         this.hovering.set(type === 'mouseenter');
     }
     clear() {
+        this.#caret = undefined;
+        this.#interim = undefined;
         this.editor().nativeElement.replaceChildren();
         this.handleInput();
     }
@@ -9359,6 +9392,94 @@ class GdsMessageInputComponent {
             this.handleInput();
         });
     };
+    /** Inserts at the last known caret position, falling back to appending when there is none. */
+    insertTextAtCaret = (text) => {
+        if (!text) {
+            return;
+        }
+        const editor = this.editor().nativeElement;
+        // While provisional text is on screen it is the anchor, so committed text lands where the user
+        // sees it rather than at a caret they may have since moved.
+        const range = this.#interimRange() ?? this.#resolveCaretRange(editor);
+        if (!range) {
+            this.appendText(text);
+            return;
+        }
+        const textNode = document.createTextNode(text);
+        range.deleteContents();
+        range.insertNode(textNode);
+        // Advance past the inserted text so consecutive inserts read in the order they were spoken.
+        const next = document.createRange();
+        next.setStartAfter(textNode);
+        next.collapse(true);
+        this.#caret = next;
+        setTimeout(() => {
+            editor.focus();
+            this.#placeCaretAfter(textNode);
+            this.handleInput();
+        });
+    };
+    #resolveCaretRange = (editor) => {
+        const caret = this.#caret;
+        // An empty editor may hold a browser inserted <br>; appendText already normalizes that.
+        if (!caret || this.#isContentEditableEmpty(editor)) {
+            return undefined;
+        }
+        // The saved range is stale once its container has been removed, e.g. after clear().
+        if (!editor.contains(caret.startContainer)) {
+            return undefined;
+        }
+        // Never write inside a mention chip or other non-editable node.
+        const element = caret.startContainer instanceof HTMLElement ? caret.startContainer : caret.startContainer.parentElement;
+        if (element?.closest('[contenteditable="false"]')) {
+            return undefined;
+        }
+        return caret.cloneRange();
+    };
+    #placeCaretAfter = (textNode) => {
+        const caret = document.createRange();
+        caret.setStartAfter(textNode);
+        caret.collapse(true);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(caret);
+    };
+    #interimRange = () => {
+        const interim = this.#interim;
+        if (!interim?.isConnected) {
+            return undefined;
+        }
+        const range = document.createRange();
+        range.setStartBefore(interim);
+        range.collapse(true);
+        return range;
+    };
+    #applyInterim = (text) => {
+        const editor = this.editor().nativeElement;
+        if (!text) {
+            this.#interim?.remove();
+            this.#interim = undefined;
+            this.isEmpty.set(this.#isContentEditableEmpty(editor));
+            return;
+        }
+        if (!this.#interim?.isConnected) {
+            const node = document.createElement('span');
+            node.dataset['interim'] = '';
+            node.setAttribute('contenteditable', 'false');
+            node.className = 'gds-text-placeholder';
+            const range = this.#resolveCaretRange(editor);
+            if (range) {
+                range.collapse(true);
+                range.insertNode(node);
+            }
+            else {
+                editor.appendChild(node);
+            }
+            this.#interim = node;
+        }
+        this.#interim.textContent = text;
+        this.isEmpty.set(false);
+    };
     #serializeContentEditable = (editor) => {
         const parts = [];
         const walk = (node) => {
@@ -9369,6 +9490,10 @@ class GdsMessageInputComponent {
             if (!(node instanceof HTMLElement)) {
                 return;
             }
+            // Provisional dictation text is displayed but is not part of the message.
+            if (node.dataset['interim'] !== undefined) {
+                return;
+            }
             if (node.getAttribute('contenteditable') === 'false') {
                 parts.push(node.textContent ?? '');
                 return;
@@ -9392,7 +9517,7 @@ class GdsMessageInputComponent {
         selection?.addRange(caret);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsMessageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, suppressEnterSubmit: { classPropertyName: "suppressEnterSubmit", publicName: "suppressEnterSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, disableSubmit: { classPropertyName: "disableSubmit", publicName: "disableSubmit", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n      gds-display-flex\n      gds-flex-column\n      gds-gap-sm\n      gds-border\n      gds-border-color-default\n      gds-radius-lg\n      gds-padding-xs\n      gds-padding-inline-2xs\n      gds-background-white\n      gds-position-relative\n      gds-overflow-hidden\n\n      gds-mobile-radius-sm\n      gds-mobile-padding-0\n      " }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[header]\" />\n<div class=\"\n  gds-display-flex\n  gds-min-width-0\n  gds-width-100-parent\n\">\n  <div class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-width-100-parent\n  \">\n    <div\n      #editor\n      class=\"\n        editor\n        gds-break-word\n        gds-flex-1\n        gds-min-height-md-rem\n        gds-min-width-0\n        gds-mobile-padding-block-2xs\n        gds-mobile-text-input-mobile\n        gds-outline-none\n        gds-padding-block-3xs\n        gds-padding-inline-2xs\n        gds-position-relative\n        gds-scrollable-vertically\n        gds-text-input\n        gds-text-primary\n        textarea\n      \"\n      [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n      tabindex=\"0\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      [attr.contenteditable]=\"disabled() ? false : 'plaintext-only'\"\n      [attr.aria-label]=\"textareaAriaLabel()\"\n      [attr.aria-placeholder]=\"placeholder()\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.data-empty]=\"isEmpty()\"\n      (input)=\"handleInput()\"\n      (keydown.enter)=\"handleEnter($event)\"\n    ></div>\n    <div\n      #slot\n      class=\"gds-display-contents\"\n      [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n    >\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n  <button\n    gds-icon-button\n    class=\"\n      gds-align-self-end\n      gds-background-none\n      gds-margin-block-end-0\n      gds-mobile-right-0\n      gds-padding-0\n      gds-right-2xs\n      trailing-icon\n    \"\n    variant=\"primary\"\n    [disabled]=\"(disabled() && !enableIcon()) || disableSubmit()\"\n    (clicked)=\"handleSubmit()\"\n    (mouseenter)=\"iconHoveringChanged($event)\"\n    (mouseleave)=\"iconHoveringChanged($event)\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n  >\n    <gds-icon\n      [key]=\"icon()\"\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-2xs\n      \"\n    />\n  </button>\n</div>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}:host .editor{max-height:calc(8 * var(--gds-lineHeight-body));white-space:pre-wrap}:host .editor[data-empty=true]:before{content:attr(data-placeholder);position:absolute;inset:0;padding:inherit;color:var(--placeholder-color, var(--gds-palette-text-default-placeholder));pointer-events:none}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, suppressEnterSubmit: { classPropertyName: "suppressEnterSubmit", publicName: "suppressEnterSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, disableSubmit: { classPropertyName: "disableSubmit", publicName: "disableSubmit", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, interimText: { classPropertyName: "interimText", publicName: "interimText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { listeners: { "document:selectionchange": "captureCaret()" }, properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n      gds-display-flex\n      gds-flex-column\n      gds-gap-sm\n      gds-border\n      gds-border-color-default\n      gds-radius-lg\n      gds-padding-xs\n      gds-padding-inline-2xs\n      gds-background-white\n      gds-position-relative\n      gds-overflow-hidden\n\n      gds-mobile-radius-sm\n      gds-mobile-padding-0\n      " }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[header]\" />\n<div class=\"\n  gds-display-flex\n  gds-min-width-0\n  gds-width-100-parent\n\">\n  <div class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-width-100-parent\n  \">\n    <div\n      #editor\n      class=\"\n        editor\n        gds-break-word\n        gds-flex-1\n        gds-min-height-md-rem\n        gds-min-width-0\n        gds-mobile-padding-block-2xs\n        gds-mobile-text-input-mobile\n        gds-outline-none\n        gds-padding-block-3xs\n        gds-padding-inline-2xs\n        gds-position-relative\n        gds-scrollable-vertically\n        gds-text-input\n        gds-text-primary\n        textarea\n      \"\n      [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n      tabindex=\"0\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      [attr.contenteditable]=\"disabled() ? false : 'plaintext-only'\"\n      [attr.aria-label]=\"textareaAriaLabel()\"\n      [attr.aria-placeholder]=\"placeholder()\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.data-empty]=\"isEmpty()\"\n      (input)=\"handleInput()\"\n      (keydown.enter)=\"handleEnter($event)\"\n    ></div>\n    <div\n      #slot\n      class=\"gds-display-contents\"\n      [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n    >\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n  <button\n    gds-icon-button\n    class=\"\n      gds-align-self-end\n      gds-background-none\n      gds-margin-block-end-0\n      gds-mobile-right-0\n      gds-padding-0\n      gds-right-2xs\n      trailing-icon\n    \"\n    variant=\"primary\"\n    [disabled]=\"(disabled() && !enableIcon()) || disableSubmit()\"\n    (clicked)=\"handleSubmit()\"\n    (mouseenter)=\"iconHoveringChanged($event)\"\n    (mouseleave)=\"iconHoveringChanged($event)\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n  >\n    <gds-icon\n      [key]=\"icon()\"\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-2xs\n      \"\n    />\n  </button>\n</div>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}:host .editor{max-height:calc(8 * var(--gds-lineHeight-body));white-space:pre-wrap}:host .editor[data-empty=true]:before{content:attr(data-placeholder);position:absolute;inset:0;padding:inherit;color:var(--placeholder-color, var(--gds-palette-text-default-placeholder));pointer-events:none}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsMessageInputComponent, decorators: [{
             type: Component,
@@ -9415,9 +9540,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       gds-mobile-padding-0
       `,
                         '[class.gds-background-disabled]': 'disabled()',
-                        '[class.gds-padding-block-end-2xs]': 'hasChildren()'
+                        '[class.gds-padding-block-end-2xs]': 'hasChildren()',
+                        '(document:selectionchange)': 'captureCaret()'
                     }, template: "<ng-content select=\"[header]\" />\n<div class=\"\n  gds-display-flex\n  gds-min-width-0\n  gds-width-100-parent\n\">\n  <div class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-width-100-parent\n  \">\n    <div\n      #editor\n      class=\"\n        editor\n        gds-break-word\n        gds-flex-1\n        gds-min-height-md-rem\n        gds-min-width-0\n        gds-mobile-padding-block-2xs\n        gds-mobile-text-input-mobile\n        gds-outline-none\n        gds-padding-block-3xs\n        gds-padding-inline-2xs\n        gds-position-relative\n        gds-scrollable-vertically\n        gds-text-input\n        gds-text-primary\n        textarea\n      \"\n      [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n      tabindex=\"0\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      [attr.contenteditable]=\"disabled() ? false : 'plaintext-only'\"\n      [attr.aria-label]=\"textareaAriaLabel()\"\n      [attr.aria-placeholder]=\"placeholder()\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.data-empty]=\"isEmpty()\"\n      (input)=\"handleInput()\"\n      (keydown.enter)=\"handleEnter($event)\"\n    ></div>\n    <div\n      #slot\n      class=\"gds-display-contents\"\n      [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n    >\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n  <button\n    gds-icon-button\n    class=\"\n      gds-align-self-end\n      gds-background-none\n      gds-margin-block-end-0\n      gds-mobile-right-0\n      gds-padding-0\n      gds-right-2xs\n      trailing-icon\n    \"\n    variant=\"primary\"\n    [disabled]=\"(disabled() && !enableIcon()) || disableSubmit()\"\n    (clicked)=\"handleSubmit()\"\n    (mouseenter)=\"iconHoveringChanged($event)\"\n    (mouseleave)=\"iconHoveringChanged($event)\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n  >\n    <gds-icon\n      [key]=\"icon()\"\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-2xs\n      \"\n    />\n  </button>\n</div>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}:host .editor{max-height:calc(8 * var(--gds-lineHeight-body));white-space:pre-wrap}:host .editor[data-empty=true]:before{content:attr(data-placeholder);position:absolute;inset:0;padding:inherit;color:var(--placeholder-color, var(--gds-palette-text-default-placeholder));pointer-events:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suppressClearOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnSubmit", required: false }] }], suppressEnterSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressEnterSubmit", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], disableSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSubmit", required: false }] }], textareaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaAriaLabel", required: false }] }], sendButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonAriaLabel", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }], slot: [{ type: i0.ViewChild, args: ['slot', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suppressClearOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnSubmit", required: false }] }], suppressEnterSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressEnterSubmit", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], disableSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSubmit", required: false }] }], textareaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaAriaLabel", required: false }] }], sendButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonAriaLabel", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], interimText: [{ type: i0.Input, args: [{ isSignal: true, alias: "interimText", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }], slot: [{ type: i0.ViewChild, args: ['slot', { isSignal: true }] }] } });
 
 class GdsChatPromptComponent {
     label = input.required(/* @ts-ignore */