@ni/spright-components/dist/esm/chat/input/index.js

NI Spright Components

import { __decorate } from "tslib";
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
import { keyEnter } from '@ni/fast-web-utilities';
import { attr, nullableNumberConverter, observable } from '@ni/fast-element';
import { styles } from './styles';
import { template } from './template';
/**
 * A Spright component for composing and sending a chat message
 */
export class ChatInput extends FoundationElement {
    constructor() {
        super(...arguments);
        this.value = '';
        /**
         * @internal
         */
        this.disableSendButton = true;
    }
    /**
     * @internal
     */
    textAreaKeydownHandler(e) {
        if (e.key === keyEnter && !e.shiftKey) {
            this.sendButtonClickHandler();
            return false;
        }
        return true;
    }
    /**
     * @internal
     */
    textAreaInputHandler() {
        this.value = this.textArea.value;
        this.disableSendButton = this.shouldDisableSendButton();
    }
    /**
     * @internal
     */
    valueChanged() {
        if (this.textArea) {
            this.textArea.value = this.value;
            this.disableSendButton = this.shouldDisableSendButton();
        }
    }
    /**
     * @internal
     */
    connectedCallback() {
        super.connectedCallback();
        this.textArea.value = this.value;
        this.disableSendButton = this.shouldDisableSendButton();
    }
    /**
     * @internal
     */
    sendButtonClickHandler() {
        if (this.shouldDisableSendButton()) {
            return;
        }
        const eventDetail = {
            text: this.textArea.value
        };
        this.resetInput();
        this.$emit('send', eventDetail);
    }
    shouldDisableSendButton() {
        return this.textArea.value.length === 0;
    }
    resetInput() {
        this.value = '';
        this.disableSendButton = true;
        if (this.textArea) {
            this.textArea.value = '';
            this.textArea.focus();
        }
    }
}
__decorate([
    attr
], ChatInput.prototype, "placeholder", void 0);
__decorate([
    attr({ attribute: 'send-button-label' })
], ChatInput.prototype, "sendButtonLabel", void 0);
__decorate([
    attr
], ChatInput.prototype, "value", void 0);
__decorate([
    attr({ attribute: 'tabindex', converter: nullableNumberConverter })
], ChatInput.prototype, "tabIndex", void 0);
__decorate([
    observable
], ChatInput.prototype, "textArea", void 0);
__decorate([
    observable
], ChatInput.prototype, "disableSendButton", void 0);
const sprightChatInput = ChatInput.compose({
    baseName: 'chat-input',
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true
    }
});
DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatInput());
export const chatInputTag = 'spright-chat-input';
//# sourceMappingURL=index.js.map