'use strict';

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

const index = require('./index-b7293b2f.js');
const theme = require('./theme-1ac31ccf.js');

const labelCss = ":host{--lu-label-padding-bottom:0}:host(.lu-color) .label-helper-text-container>label{color:var(--lu-color-base)}.container{display:flex;flex-flow:column}.label-helper-text-container{padding-bottom:var(--lu-label-padding-bottom);display:flex;flex-flow:row;align-items:center;justify-content:space-between}.label-helper-text-container>label{font-size:16px;line-height:26px}.label-helper-text-container>label>span.required{color:#E4002B}.helper-text{color:#686A6F;font-size:12px;font-style:italic;line-height:15px}.helper-text-notification{color:#256EC1;font-size:14px;font-style:inherit;line-height:26px}.error{padding-top:4px;color:#E4002B;font-size:14px;line-height:22px}.is-invalid{padding-left:9px;border-left:#E4002B solid 2px}";

const Label = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * Label text
     */
    this.labelText = '';
    /**
     * Specifies if input is required or not in the right corner
     */
    this.required = false;
    /**
     * Specifies that the input is optional in the right top corner
     */
    this.optional = false;
    /**
     * Tells us that the input is invalid
     */
    this.invalid = false;
    /**
     * Provides option to use asterisk as required indicator
     */
    this.useAsteriskAsRequiredIndicator = false;
  }
  watchHandler(newValue) {
    this.useId = newValue + '-label';
  }
  clueText() {
    if (this.helperText)
      return this.helperText;
    if (this.required && !this.useAsteriskAsRequiredIndicator)
      return 'Required';
    if (this.optional && !this.useAsteriskAsRequiredIndicator)
      return 'Optional';
    return null;
  }
  showErrorMessage() {
    return this.invalid;
  }
  errorMessageText() {
    let message = 'Field invalid';
    if (this.errorMessage)
      message = this.errorMessage;
    return message;
  }
  helperTextClasses() {
    let returnClasses = 'helper-text';
    if (this.helperText && this.helperText !== '')
      returnClasses += ' helper-text-notification';
    return returnClasses;
  }
  containerClasses() {
    let returnClasses = 'container';
    if (this.invalid)
      returnClasses += ' is-invalid';
    return returnClasses;
  }
  hostData() {
    return {
      class: Object.assign({}, theme.createColorClasses(this.color))
    };
  }
  __stencil_render() {
    return (index.h("div", { class: this.containerClasses() }, index.h("div", { class: 'label-helper-text-container' }, index.h("label", { id: this.useId, htmlFor: this.forId }, this.labelText, this.useAsteriskAsRequiredIndicator && this.required && index.h("span", { class: "required" }, " *")), index.h("div", { class: this.helperTextClasses() }, this.clueText())), index.h("slot", null), this.showErrorMessage() ? index.h("div", { class: 'error' }, this.errorMessageText()) : null));
  }
  static get watchers() { return {
    "forId": ["watchHandler"]
  }; }
  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
};
Label.style = labelCss;

exports.lu_label = Label;

//# sourceMappingURL=lu-label.cjs.entry.js.map