v4web-components/dist/cjs/lab-ds-text-area.cjs.entry.js

Stencil Component Starter

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8b55ea0e.js');

const labDsTextAreaCss = "textarea{border:none;outline:none;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m)}.v4-input{display:inline-block;max-width:100%;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s);color:var(--lab-ds-semantic-color-fg-default)}.v4-input .title-count{display:flex;justify-content:space-between;font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .input-helper{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.input-icon{display:flex;align-items:start;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.icon{display:flex}.v4-input.error .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.error .input-icon .icon.right{display:flex;margin-left:-1.5rem;padding-right:0.5rem;padding-top:0.75rem}.v4-input.error .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.success .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-success);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-icon .icon.right{display:flex;margin-left:-1.5rem;padding-right:0.5rem;padding-top:0.75rem}.v4-input.success .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success);box-shadow:none}.v4-input.disabled .title-count{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-helper{color:var(--lab-ds-semantic-color-fg-disabled)}";

const LabDsTextArea = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.changeInput = index.createEvent(this, "changeInput", 7);
    this.value = undefined;
    this.valueState = this.value;
    this.maxLength = 100;
    this.minLength = 0;
    this.rows = 5;
    this.cols = 30;
    this.titleInput = '';
    this.label = '';
    this.disabled = false;
    this.helperText = '';
    this.state = 'default';
  }
  handleChange(event) {
    this.changeInput.emit(event.target.value);
    this.valueState = event.target.value;
  }
  render() {
    var _a;
    const iconHelper = {
      error: { icon: 'error' },
      success: { icon: 'check_circle' },
      default: { icon: '' },
    };
    return (index.h("div", { class: `v4-input ${this.state} ${this.disabled && 'disabled'}` }, index.h("div", { class: "title-count" }, index.h("span", { class: "title-text" }, this.titleInput), index.h("span", { class: "title-counter" }, this.valueState ? (_a = this.valueState) === null || _a === void 0 ? void 0 : _a.length : '0', "/", this.maxLength)), index.h("div", { class: "input-helper" }, index.h("div", { class: "input-icon" }, index.h("textarea", { rows: this.rows, cols: this.cols, disabled: this.disabled, placeholder: this.label, class: "input-field", maxLength: this.maxLength, minLength: this.minLength, value: this.value, onInput: event => this.handleChange(event) }), iconHelper[this.state].icon && index.h("lab-ds-icon-not-selectable", { class: "icon right", size: "small", icon: iconHelper[this.state].icon })), this.helperText && (index.h("span", { class: "helper-text" }, iconHelper[this.state].icon && index.h("lab-ds-icon-not-selectable", { class: "icon", size: "x-small", icon: iconHelper[this.state].icon }), this.helperText)))));
  }
};
LabDsTextArea.style = labDsTextAreaCss;

exports.lab_ds_text_area = LabDsTextArea;

//# sourceMappingURL=lab-ds-text-area.cjs.entry.js.map