@siemens/ix 5.1.1 → 5.2.0

package/dist/collection/components/chat-attachment/chat-attachment.js

@@ -0,0 +1,284 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { iconError, iconTxtDocument } from "@siemens/ix-icons/icons";
+import { Host, h } from "@stencil/core";
+/**
+ * @since 5.2.0
+ */
+export class ChatAttachment {
+    /**
+     * Name of the attached file.
+     */
+    fileName = '';
+    /**
+     * Upload status of the attachment.
+     */
+    status = 'default';
+    /**
+     * Icon displayed before the file name.
+     */
+    icon = iconTxtDocument;
+    /**
+     * Hide the remove action.
+     */
+    hideRemoveButton = false;
+    /**
+     * Enable preview interaction for default attachments.
+     */
+    previewSupported = false;
+    /**
+     * Accessible label for the remove action.
+     */
+    removeAriaLabel = 'Remove attachment';
+    /**
+     * Event emitted when the attachment is clicked.
+     */
+    attachmentClick;
+    /**
+     * Event emitted when the remove action is clicked.
+     */
+    removeClick;
+    canPreview() {
+        return this.previewSupported && this.status === 'default';
+    }
+    splitFileName() {
+        const fileName = this.fileName.trim();
+        const extensionStart = fileName.lastIndexOf('.');
+        if (extensionStart <= 0 || extensionStart === fileName.length - 1) {
+            return { name: fileName, extension: '' };
+        }
+        return {
+            name: fileName.slice(0, extensionStart),
+            extension: fileName.slice(extensionStart),
+        };
+    }
+    renderFileName() {
+        const { name, extension } = this.splitFileName();
+        return (h("span", { class: "file-name", title: this.fileName }, h("span", { class: "file-name__base" }, name || this.fileName), !!extension && h("span", { class: "file-name__extension" }, extension)));
+    }
+    getChipVariant() {
+        if (this.status === 'failed') {
+            return 'alarm';
+        }
+        return 'neutral';
+    }
+    renderChipContent() {
+        if (this.status === 'loading') {
+            return (h("span", { class: "status-content" }, h("ix-spinner", { size: "xx-small", variant: "primary" }), h("span", { class: "status-label" }, this.fileName)));
+        }
+        if (this.status === 'failed') {
+            return h("span", { class: "status-label" }, this.fileName);
+        }
+        return this.renderFileName();
+    }
+    handleAttachmentClick() {
+        if (this.canPreview()) {
+            this.attachmentClick.emit();
+        }
+    }
+    getIcon() {
+        if (this.status === 'default') {
+            return this.icon;
+        }
+        if (this.status === 'loading') {
+            return undefined;
+        }
+        if (this.status === 'failed') {
+            return iconError;
+        }
+        return this.icon;
+    }
+    render() {
+        const isFailed = this.status === 'failed';
+        const isLoading = this.status === 'loading';
+        const canPreview = this.canPreview();
+        return (h(Host, { key: '6d228e12a51a06711a97f216a854432e44340590', class: {
+                failed: isFailed,
+                loading: isLoading,
+                'preview-supported': canPreview,
+                'has-remove-button': !this.hideRemoveButton,
+            } }, h("ix-chip", { key: 'a3369a7981eb355f606162efc1a01c290f49076c', "aria-label": canPreview ? this.fileName : undefined, ariaLabelCloseButton: this.removeAriaLabel, class: "attachment-chip", closable: !this.hideRemoveButton, icon: this.getIcon(), variant: this.getChipVariant(), outline: true, onClick: () => this.handleAttachmentClick(), onCloseChip: () => this.removeClick.emit(), inactive: !canPreview }, h("span", { key: '51b3a72b579776c09587b1bd430aceb146e04e49', class: "content" }, this.renderChipContent()))));
+    }
+    static get is() { return "ix-chat-attachment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chat-attachment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chat-attachment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fileName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the attached file."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-name",
+                "defaultValue": "''"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChatAttachmentStatus",
+                    "resolved": "\"default\" | \"failed\" | \"loading\"",
+                    "references": {
+                        "ChatAttachmentStatus": {
+                            "location": "import",
+                            "path": "./chat-attachment.types",
+                            "id": "src/components/chat-attachment/chat-attachment.types.ts::ChatAttachmentStatus",
+                            "referenceLocation": "ChatAttachmentStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Upload status of the attachment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon displayed before the file name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "iconTxtDocument"
+            },
+            "hideRemoveButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the remove action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-remove-button",
+                "defaultValue": "false"
+            },
+            "previewSupported": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable preview interaction for default attachments."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "preview-supported",
+                "defaultValue": "false"
+            },
+            "removeAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the remove action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-aria-label",
+                "defaultValue": "'Remove attachment'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "attachmentClick",
+                "name": "attachmentClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the attachment is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "removeClick",
+                "name": "removeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the remove action is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/chat-attachment/chat-attachment.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/chat-input/chat-input.css

@@ -0,0 +1,323 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+:host {
+  display: block;
+  width: 100%;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host *::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host * {
+  /* width */
+}
+:host *::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host * {
+  /* Track */
+}
+:host *::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host *::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host * {
+  /* Handle */
+}
+:host *::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host * {
+  /* Handle on hover */
+}
+:host *::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host *::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .chat-input {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 8rem;
+  padding: var(--theme-space-2);
+  box-sizing: border-box;
+  background-color: var(--theme-input--background);
+  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color);
+  border-radius: var(--theme-input--border-radius);
+  box-shadow: var(--theme-input--box-shadow);
+  color: var(--theme-input--color);
+}
+:host .follow-up-prompts {
+  display: none;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--theme-space-1);
+  width: 100%;
+  margin-bottom: var(--theme-space-1);
+}
+:host .follow-up-prompts ::slotted(*) {
+  flex: 0 1 auto;
+}
+:host .follow-up-prompts ::slotted(ix-button) {
+  max-width: 25rem;
+  min-width: 5rem;
+}
+:host .follow-up-prompts ::slotted(ix-icon-button) {
+  flex: 0 0 auto;
+}
+:host .chat-input:hover {
+  border-color: var(--theme-input--border-color--hover);
+  background-color: var(--theme-input--background--hover);
+}
+:host .chat-input:focus-within {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-input--focus--outline-offset);
+  border-color: var(--theme-input--border-color--focus);
+}
+:host .attachments {
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  gap: var(--theme-space-2);
+  margin-bottom: var(--theme-space-2);
+}
+:host .attachments.has-attachments {
+  display: flex;
+}
+:host .attachments--wrap {
+  flex-wrap: wrap;
+  max-height: calc(4rem + var(--theme-space-2));
+  overflow: hidden;
+}
+:host .attachments--scroll {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+:host .attachments--scroll *::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host .attachments--scroll * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host .attachments--scroll * {
+  /* width */
+}
+:host .attachments--scroll *::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host .attachments--scroll * {
+  /* Track */
+}
+:host .attachments--scroll *::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host .attachments--scroll *::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host .attachments--scroll * {
+  /* Handle */
+}
+:host .attachments--scroll *::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host .attachments--scroll * {
+  /* Handle on hover */
+}
+:host .attachments--scroll *::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host .attachments--scroll *::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .attachments--scroll::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host .attachments--scroll {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host .attachments--scroll {
+  /* width */
+}
+:host .attachments--scroll::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host .attachments--scroll {
+  /* Track */
+}
+:host .attachments--scroll::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host .attachments--scroll::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host .attachments--scroll {
+  /* Handle */
+}
+:host .attachments--scroll::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host .attachments--scroll {
+  /* Handle on hover */
+}
+:host .attachments--scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host .attachments--scroll::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .attachments.has-attachment-scrollbar {
+  padding-bottom: 0.25rem;
+}
+:host .attachments ::slotted(ix-chat-attachment) {
+  flex: 0 1 auto;
+}
+:host .attachments--scroll ::slotted(ix-chat-attachment) {
+  flex: 0 0 auto;
+}
+:host textarea {
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 2rem;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+:host textarea::-moz-placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host textarea::placeholder {
+  color: var(--theme-input-hint--color);
+}
+:host .character-limit {
+  display: flex;
+  align-items: center;
+  gap: var(--theme-space-1);
+  width: 100%;
+  margin-top: var(--theme-space-2);
+}
+:host .character-limit ix-icon {
+  flex: 0 0 auto;
+}
+:host .character-limit--soft ix-icon {
+  color: var(--theme-color-info);
+}
+:host .character-limit--hard ix-icon {
+  color: var(--theme-color-warning);
+}
+:host .action-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 2rem;
+  margin-top: var(--theme-space-1);
+}
+:host .left-actions,
+:host .right-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--theme-space-1);
+}
+:host .left-actions {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+:host .right-actions {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+}
+:host .disclaimer {
+  display: block;
+  width: 100%;
+  margin-top: var(--theme-space-1);
+  text-align: center;
+}
+
+:host(.has-follow-up) .follow-up-prompts {
+  display: flex;
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .chat-input {
+  border-color: var(--theme-input--border-color--disabled);
+  box-shadow: none;
+  color: var(--theme-input--color--disabled);
+  background-color: transparent;
+}
+:host(.disabled) textarea::-moz-placeholder {
+  color: transparent;
+}
+:host(.disabled) textarea::placeholder {
+  color: transparent;
+}
+
+:host(.readonly) .chat-input {
+  border-color: var(--theme-input--border-color--readonly);
+  box-shadow: none;
+  background-color: transparent;
+}
+:host(.readonly) .chat-input:hover,
+:host(.readonly) .chat-input:focus-within {
+  border-color: var(--theme-input--border-color--readonly);
+  outline: none;
+}