@finastra/textarea/dist/src/base-textarea.js

Textarea Web Component

import { __decorate } from "tslib";
import { TextAreaBase } from '@material/mwc-textarea/mwc-textarea-base';
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
export class BaseTextarea extends TextAreaBase {
    constructor() {
        super();
        this.dense = false;
        this.labelInside = false;
        this.outlined = true;
        this.helperPersistent = true;
    }
    render() {
        const shouldRenderCharCounter = this.charCounter && this.maxLength !== -1;
        const shouldRenderHelperText = !!this.helper || !!this.validationMessage || shouldRenderCharCounter;
        /** @classMap */
        const classes = {
            'mdc-text-field--disabled': this.disabled,
            'mdc-text-field--no-label': !this.label,
            'mdc-text-field--filled': !this.outlined,
            'mdc-text-field--outlined': this.outlined,
            'fds-textarea--label-inside': this.labelInside
        };
        return html `
      ${!this.labelInside ? this.renderLabelOutside() : ''}
      <label class="mdc-text-field mdc-text-field--textarea ${classMap(classes)}">
        ${this.renderRipple()} ${this.renderOutline()} ${this.renderInput()}
      </label>
      ${this.renderHelperText(shouldRenderHelperText, shouldRenderCharCounter)}
    `;
    }
    renderLabelOutside() {
        return this.label ? html ` <span id="label" class="fds-textarea__label"> ${this.label} ${this.renderRequired()} </span> ` : ``;
    }
    renderOutline() {
        return !this.outlined ? '' : html ` <div class="fds-textarea__outline">${this.labelInside ? this.renderLabel() : ''}</div>`;
    }
    renderRequired() {
        return !this.required ? '' : '*';
    }
}
__decorate([
    property({ type: Boolean })
], BaseTextarea.prototype, "dense", void 0);
__decorate([
    property({ type: Boolean })
], BaseTextarea.prototype, "labelInside", void 0);
//# sourceMappingURL=base-textarea.js.map