@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
619 lines (618 loc) • 16.4 kB
JavaScript
import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
import { defaultTheme } from '../../../defaultTheme';
import { TecStringCase } from '../../../models/case.model';
import { caseStringHandler, removeStringWhiteSpace } from '../../../utils/utils';
export class CodeInput {
constructor() {
this.value = '';
this.theme = defaultTheme;
this.initialValue = '';
this.placeholder = '';
this.responsive = true;
/**
* Auto focus on first input
*/
this.autofocus = true;
/**
* Type of inputs
*/
this.type = 'text';
/**
* Inputs quantity
*/
this.length = 5;
/**
* Add margin between inputs
*/
this.useMargin = true;
/**
* Allow to parse all chars to UPPER or LOWER case
* @default allow upper and lowercase values
*/
this.case = TecStringCase.DEFAULT;
}
valueChanges(newValue, oldValue) {
if (newValue && newValue !== oldValue) {
this.valueChangesHandler(newValue);
}
}
placeholderChanges() {
this.internalPlaceholder = this.splitPlaceholder();
}
async clear() {
if (this.length) {
this.initialValue
? this.clearWithInitialValue()
: this.clearWithoutInitialValue();
this.codeChange.emit({ value: '' });
this.cleared.emit();
}
}
componentWillLoad() {
this.initInternalValue();
this.internalPlaceholder = this.splitPlaceholder();
this.value = this.initialValue;
}
render() {
const Inputs = ({ useMargin = true }) => {
const classList = {
'text-mono text-8x1': true,
'use-margin': useMargin
};
return this.buildArrayIterator().map((_, index) => {
var _a;
const placeholder = this.internalPlaceholder[index] || '';
const enableAufocus = this.autofocus && index === 0;
const value = this.internalValue[index];
return (h("input", { class: classList, autoComplete: "false", autoCapitalize: "false", maxlength: "2", id: `field-${index}`, type: this.type, placeholder: placeholder, value: placeholder && !value.trim() ? null : value, autoFocus: enableAufocus, disabled: (_a = this.disabled) !== null && _a !== void 0 ? _a : null, onInput: (event) => this.inputInputHandler(event, index), onFocus: event => this.inputFocusHandler(event, index), onBlur: event => this.inputBlurHandler(event, index), onKeyDown: event => this.inputKeyDown(event, index), onKeyUp: event => this.inputKeyupHandler(event, index) }));
});
};
const classList = {
'responsive': this.responsive,
'wrapper': true
};
return (h(Host, { value: this.value },
h("div", { class: classList },
h(Inputs, { useMargin: this.useMargin }))));
}
// ---------------
// PRIVATE METHODS
// ---------------
buildFinalValue() {
const value = this.internalValue.join('');
if (value === null || value === void 0 ? void 0 : value.length)
return value;
return '';
}
initInternalValue() {
this.internalValue = this.splitInitialValue();
}
inputInputHandler(event, index) {
const currentInput = this.getInputByIndex(index);
currentInput.value = event.data;
this.inputChange.emit({ event, value: currentInput.value });
if (currentInput) {
// handle input by case
currentInput.value = caseStringHandler(currentInput.value, this.case);
// build final value
this.internalValue[index] = currentInput.value || ' ';
this.value = this.buildFinalValue();
}
if (event.data && index < (this.length - 1)) {
// apply focus on next input
this.focusOnNextInput(index);
}
this.handleCompletedEvent();
}
inputFocusHandler(event, index) {
const input = this.getInputByIndex(index);
if (input) {
input.select();
this.inputFocus.emit({
event,
value: {
id: input.id,
index,
value: input.value
}
});
}
this.codeFocus.emit();
}
inputKeyupHandler(_event, index) {
const input = this.getInputByIndex(index);
if (input)
input.value = caseStringHandler(input.value, this.case);
}
inputKeyDown(event, index) {
const actions = {
Backspace: () => {
setTimeout(() => {
this.focusOnPreviousInput(index);
}, 20);
},
ArrowLeft: () => {
this.focusOnPreviousInput(index);
},
ArrowRight: () => {
this.focusOnNextInput(index);
}
};
const execAction = actions[event.code];
if (execAction)
execAction();
}
inputBlurHandler(event, index) {
const input = this.getInputByIndex(index);
this.inputBlur.emit({
event,
value: {
id: input === null || input === void 0 ? void 0 : input.id,
index,
value: input === null || input === void 0 ? void 0 : input.value
}
});
this.codeBlur.emit();
}
/**
* Focus and select a input on index
* @param currentIndex current input index
* @param select select all content from input
* @returns input element focused and selected
*/
inputFocusAndSelect(index, select = false) {
const input = this.getInputByIndex(index);
if (input) {
input.focus();
if (select) {
setTimeout(() => {
input.select();
}, 30);
}
}
return input;
}
getInputByIndex(index) {
return this.element.shadowRoot.querySelector(`input#field-${index}`);
}
focusOnNextInput(currentIndex) {
if (currentIndex < (this.length - 1)) {
return this.inputFocusAndSelect(currentIndex + 1, true);
}
}
focusOnPreviousInput(currentIndex) {
if (currentIndex >= 0) {
return this.inputFocusAndSelect(currentIndex - 1, true);
}
}
buildArrayIterator(length = this.length) {
return Array(length).fill(null);
}
splitPlaceholder() {
return this.placeholder.split('');
}
splitInitialValue() {
const valueSplitted = this.initialValue.split('');
return this.buildArrayIterator().map((_, index) => { var _a; return (_a = valueSplitted[index]) !== null && _a !== void 0 ? _a : ' '; });
}
valueChangesHandler(newValue) {
const valueSplitted = newValue.split('');
if (valueSplitted) {
this.buildArrayIterator().forEach((_, index) => {
const currentValue = valueSplitted[index];
const input = this.getInputByIndex(index);
if (input && currentValue) {
input.value = currentValue;
}
});
this.codeChange.emit({ value: removeStringWhiteSpace(newValue) });
}
}
clearWithInitialValue() {
this.initInternalValue();
this.internalPlaceholder = this.splitPlaceholder();
this.value = this.initialValue;
}
clearWithoutInitialValue() {
this.value = '';
this.initInternalValue();
this.buildArrayIterator().forEach((_, index) => {
const input = this.getInputByIndex(index);
if (input)
input.value = '';
});
}
handleCompletedEvent() {
const shouldEmit = removeStringWhiteSpace(this.value).length === this.length;
if (shouldEmit) {
this.completed.emit({
value: removeStringWhiteSpace(this.value)
});
}
}
static get is() { return "tec-code-input"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["code-input.scss"]
}; }
static get styleUrls() { return {
"$": ["code-input.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TecnologiaTheme",
"resolved": "TecnologiaTheme.dark | TecnologiaTheme.light",
"references": {
"TecnologiaTheme": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "theme",
"reflect": true,
"defaultValue": "defaultTheme"
},
"initialValue": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "initial-value",
"reflect": false,
"defaultValue": "''"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder",
"reflect": true,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": true
},
"responsive": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "responsive",
"reflect": true,
"defaultValue": "true"
},
"autofocus": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Auto focus on first input"
},
"attribute": "autofocus",
"reflect": true,
"defaultValue": "true"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'text' | 'password'",
"resolved": "\"password\" | \"text\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Type of inputs"
},
"attribute": "type",
"reflect": true,
"defaultValue": "'text'"
},
"length": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Inputs quantity"
},
"attribute": "length",
"reflect": true,
"defaultValue": "5"
},
"useMargin": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Add margin between inputs"
},
"attribute": "use-margin",
"reflect": false,
"defaultValue": "true"
},
"case": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TecStringCase",
"resolved": "TecStringCase.DEFAULT | TecStringCase.LOWERCASE | TecStringCase.UPPERCASE",
"references": {
"TecStringCase": {
"location": "import",
"path": "../../../models/case.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"text": "allow upper and lowercase values",
"name": "default"
}],
"text": "Allow to parse all chars to UPPER or LOWER case"
},
"attribute": "case",
"reflect": false,
"defaultValue": "TecStringCase.DEFAULT"
}
}; }
static get states() { return {
"value": {}
}; }
static get events() { return [{
"method": "inputChange",
"name": "inputChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "CodeInputEvent<string>",
"resolved": "CodeInputEvent<string>",
"references": {
"CodeInputEvent": {
"location": "import",
"path": "./code-input.model"
}
}
}
}, {
"method": "inputFocus",
"name": "inputFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "CodeInputEvent<CodeInputCustomEventValue>",
"resolved": "CodeInputEvent<CodeInputCustomEventValue>",
"references": {
"CodeInputEvent": {
"location": "import",
"path": "./code-input.model"
},
"CodeInputCustomEventValue": {
"location": "import",
"path": "./code-input.model"
}
}
}
}, {
"method": "inputBlur",
"name": "inputBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "CodeInputEvent<CodeInputCustomEventValue>",
"resolved": "CodeInputEvent<CodeInputCustomEventValue>",
"references": {
"CodeInputEvent": {
"location": "import",
"path": "./code-input.model"
},
"CodeInputCustomEventValue": {
"location": "import",
"path": "./code-input.model"
}
}
}
}, {
"method": "codeChange",
"name": "codeChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "When `value` property changes"
},
"complexType": {
"original": "CodeInputEvent<string>",
"resolved": "CodeInputEvent<string>",
"references": {
"CodeInputEvent": {
"location": "import",
"path": "./code-input.model"
}
}
}
}, {
"method": "codeFocus",
"name": "codeFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "codeBlur",
"name": "codeBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "completed",
"name": "completed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "CodeInputEvent<string>",
"resolved": "CodeInputEvent<string>",
"references": {
"CodeInputEvent": {
"location": "import",
"path": "./code-input.model"
}
}
}
}, {
"method": "cleared",
"name": "cleared",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the input was cleared"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}]; }
static get methods() { return {
"clear": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
}; }
static get elementRef() { return "element"; }
static get watchers() { return [{
"propName": "value",
"methodName": "valueChanges"
}, {
"propName": "placeholder",
"methodName": "placeholderChanges"
}]; }
}