v4web-components/dist/collection/components/input/lab-ds-password-input/lab-ds-password-input.js

Stencil Component Starter

import { h } from '@stencil/core';
export class LabDsPasswordInput {
  constructor() {
    this.inputPassword = {
      password: {
        icon: 'visibility_off',
      },
      text: {
        icon: 'visibility',
      },
    };
    this.visiblePassword = false;
    this.value = undefined;
    this.titleInput = '';
    this.label = '';
    this.disabled = false;
    this.helperText = '';
    this.state = 'default';
  }
  handleChange(event) {
    this.changeInput.emit(event.target.value);
  }
  render() {
    const iconHelper = {
      error: { icon: 'error' },
      success: { icon: 'check_circle' },
      default: { icon: '' },
    };
    const inputType = this.visiblePassword ? 'text' : 'password';
    return (h("div", { class: `v4-input ${this.state} ${this.disabled && 'disabled'}` }, h("span", { class: "title-text" }, this.titleInput), h("div", { class: "input-helper" }, h("div", { class: "input-icon" }, h("lab-ds-icon-not-selectable", { class: "icon left", size: "small", icon: "lock" }), h("input", { disabled: this.disabled, placeholder: this.label, class: "input-field", type: inputType, value: this.value, onInput: event => this.handleChange(event) }), h("lab-ds-icon-not-selectable", { onClick: () => {
        if (this.disabled)
          return;
        this.visiblePassword = !this.visiblePassword;
      }, class: "icon right", size: "small", icon: this.inputPassword[inputType].icon })), this.helperText && (h("span", { class: "helper-text" }, iconHelper[this.state].icon && h("lab-ds-icon-not-selectable", { class: "icon", size: "x-small", icon: iconHelper[this.state].icon }), this.helperText)))));
  }
  static get is() { return "lab-ds-password-input"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["lab-ds-password-input.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["lab-ds-password-input.css"]
    };
  }
  static get properties() {
    return {
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "value",
        "reflect": false
      },
      "titleInput": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "title-input",
        "reflect": false,
        "defaultValue": "''"
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false,
        "defaultValue": "''"
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "helperText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "helper-text",
        "reflect": false,
        "defaultValue": "''"
      },
      "state": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'error' | 'success' | 'default'",
          "resolved": "\"default\" | \"error\" | \"success\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "state",
        "reflect": false,
        "defaultValue": "'default'"
      }
    };
  }
  static get states() {
    return {
      "visiblePassword": {}
    };
  }
  static get events() {
    return [{
        "method": "changeInput",
        "name": "changeInput",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
}
//# sourceMappingURL=lab-ds-password-input.js.map