Cacher is the code snippet organizer for pro developers

## Para crear un componente litelement la version de cells-cli debe ser >3.x.x
$ npm unintall -g cells-cli && npm install -g @cells/cells-cli

## A continuación se crea el componente, donde <name> es el nombre del component 
## y <namespace> es el namespace del proyecto al que pertenece el componente
## cells lit-component:create <name> <namespace>
$ cells lit-component:create my-custon-element @cells-components

## abrir carpeta del componente
$ cd my-custom-element

## instalar dependencias a traves de npm
$ npm install

## build & serve
## compila sass, construye el demo y dipara servidor para archivos locales
$ cells lit-component:serve

"dependencies": {
  (...),
  "@bbva-web-components/bbva-form-text": "^1.0.0",
  "@bbva-web-components/bbva-form-password": "^1.0.0",
  "@bbva-web-components/bbva-button-default": "^3.0.0",
  "@bbva-web-components/bbva-progress-content": "^1.0.0"
}

/* a continuacion en terminal $ npm install */

import { LitElement, html, } from 'lit-element';
import { getComponentSharedStyles, } from '@cells-components/cells-lit-helpers';
import styles from './my-custom-element-styles.js';
import '@bbva-web-components/bbva-form-text/bbva-form-text.js';
import '@bbva-web-components/bbva-form-password/bbva-form-password.js';
import '@bbva-web-components/bbva-button-default/bbva-button-default.js';
import '@bbva-web-components/bbva-progress-content/bbva-progress-content.js';
(...)

  static get properties() {
    return {
      userInputLabel: {
        type: String,
        attribute: 'user-input-label'
      },
      userInputValue: {
        type: String,
        attribute: 'user-input-value'
      },
      passwordInputLabel: {
        type: String,
        attribute: 'password-input-label'
      },
      passwordInputValue: {
        type: String,
        attribute: 'password-input-value'
      },
      buttonText: {
        type: String,
        attribute: 'button-text'
      },
      loading: {
        type: Boolean
      }
    };
  }
  
  constructor() {
    super();
    this.userInputLabel = 'Username';
    this.passwordInputLabel = 'Password';
    this.buttonText = 'Submit';
    this.loading = false;
  }
  
  render() {
    return html`
      (...)
      <form ?hidden="${this.loading}">
        <bbva-form-text
          label="${this.userInputLabel}"
          .value="${this.userInputValue}"
          @input="${(e) => this.userInputValue = e.target.value}" //declarando eventos
          type="text">
        </bbva-form-text>
        <bbva-form-password
          label="${this.passwordInputLabel}"
          .value="${this.passwordInputValue}"
          @input="${(e) => this.passwordInputValue = e.target.value}" //declarando eventos
          type="password">
        </bbva-form-password>
        <bbva-button-default type="submit"
          ?disabled="${!this.userInputValue || !this.userInputValue}"
          @click="${this._submit}"> //disparador de eventos
          ${this.buttonText}
        </bbva-button-default>
      </form>
      <bbva-progress-content ?hidden="${!this.loading}"></bbva-progress-content>
    `;
  }
  
  //evento
  _submit(ev) {
    ev.preventDefault();
    this.loading = true;
    this.dispatchEvent(new CustomEvent('my-custom-element-submit', {
      bubbles: true,
      composed: true,
      detail: {
        username: this.userInputValue,
        password: this.passwordInputValue
      }
    }));
  }

@import "node_modules/@cells-components/cells-sass/main";

:host {
  display: block;
  box-sizing: border-box;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid #E9E9E9;
  border-radius: 4px;
}

:host([hidden]), [hidden] {
  display: none !important;
}

*, *:before, *:after {
  box-sizing: inherit;}

bbva-form-text,
bbva-form-password {
  margin: 0 0 1rem;
}

bbva-button-default {
  width: 100%;
}

bbva-progress-content {
  height: 176px;
}