@conectate/ct-input NPM

`ct-input`

Input web component

Install

yarn add @conectate/ct-input
#or
npm i @conectate/ct-input

Usage

On HTML

<ct-input active="true"></ct-input>

On LitElement with typescript

import { LitElement, css, customElement, html, property } from "lit";

@customElement("ct-main")
export class CtMain extends LitElement {
	@property({ type: Boolean, reflect: true }) active = true;

	static styles = css`
		:host {
			display: block;
		}
	`;

	render() {
		return html`<ct-input label="Name" placeholder="Put your name" rawPlaceholcer="John Doe"></ct-input>`;
	}
}

DEMO

Properties

Property	Attribute	Type	Default	Description
`accept`	`accept`	`string`	""
`autocomplete`	`autocomplete`	`"on" \\| "off" \\| "additional-name" \\| "address-level1" \\| "address-level2" \\| "address-level3" \\| "address-level4" \\| "address-line1" \\| "address-line2" \\| "address-line3" \\| "bday" \\| ... 50 more ... \\| "work"`	"off"
`autofocus`	`autofocus`	`boolean`	false
`charCounter`	`charCounter`	`boolean`	false	-
`countChar`	`countChar`	`number`	0	Total chars on input
`disabled`	`disabled`	`boolean`	false	-
`errorMessage`	`errorMessage`	`string`	""	Mensaje de error al no complir con el pattern
`inputmode`	`inputmode`	`"" \\| "email" \\| "tel" \\| "url" \\| "verbatim" \\| "latin" \\| "latin-name" \\| "latin-prose" \\| "full-width-latin" \\| "kana" \\| "kana-name" \\| "katakana" \\| "numeric"`	""
`invalid`		`boolean`
`label`	`label`	`string`	""	Change default icon to whatever you like
`max`	`max`	`string`	""
`maxlength`	`maxlength`	`number`	"MAX_SAFE_INTEGER"	Max length on input
`min`	`min`	`string`	""
`minlength`	`minlength`	`number`	0
`multiple`	`multiple`	`boolean`	false
`name`	`name`	`string`	""
`noHover`	`noHover`	`boolean`	false	Do not show any effects when hovering the searchbox
`pattern`	`pattern`	`string \\| RegExp`	""	regexp
`placeholder`	`placeholder`	`string`	""	Placeholder text when searchbox is empty
`raiseForced`	`raiseForced`	`boolean`	false	Always raise the searchbox whether it is active or not, or whether is has value or not
`raiseOnActive`	`raiseOnActive`	`boolean`	false	Raise searchbox is it's focused
`raiseOnValue`	`raiseOnValue`	`boolean`	false	Raise searchbox if it has value
`rawPlaceholder`	`rawPlaceholder`	`string`	""	Placeholder text when searchbox is empty
`readonly`	`readonly`	`boolean`	false
`required`	`required`	`boolean`	false	-
`size`	`size`	`number`	24
`step`	`step`	`string`	""
`type`	`type`	`string`	"text"	Input type
`value`		`string`

Methods

Method	Type	Description
`mapIDs`	`(): void`	Map all IDs for shadowRoot and save in `this.$` like a polymer element.You should add in the first line of `firstUpdated()`
`validate`	`(): boolean`	Validate required input