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 |

Slots

| Name | Description | | -------- | ------------------------------------- | | prefix | Content placed start the main content | | suffix | Content placed end the main content |