@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
272 lines (264 loc) • 12.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-9e7d65d0.js');
const defaultTheme = require('./defaultTheme-b024b6fb.js');
var TecStringCase;
(function (TecStringCase) {
TecStringCase["UPPERCASE"] = "uppercase";
TecStringCase["LOWERCASE"] = "lowercase";
TecStringCase["DEFAULT"] = "default";
})(TecStringCase || (TecStringCase = {}));
function removeStringWhiteSpace(text) {
return text.replace(/\s/g, '');
}
function caseStringHandler(value, toCase) {
if (toCase === TecStringCase.LOWERCASE)
return value.toLowerCase();
if (toCase === TecStringCase.UPPERCASE)
return value.toUpperCase();
return value;
}
const codeInputCss = "@import url(https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Volkhov:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Oxygen+Mono&family=Roboto+Mono:wght@300;400;500;600;700&display=swap);.bg-default{background:#f6f8fa}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2x1{font-size:1.5rem;line-height:2rem}.text-3x1{font-size:1.875rem;line-height:2.25rem}.text-4x1{font-size:2.25rem;line-height:2.5rem}.text-5x1{font-size:3rem;line-height:3rem}.text-6x1{font-size:3.75rem;line-height:3.75rem}.text-7x1{font-size:4.5rem;line-height:4.5rem}.text-8x1{font-size:6rem;line-height:6rem}.text-9x1{font-size:8rem;line-height:8rem}.text-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Almarai,Inter,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-serif{font-family:ui-serif,Volkhov,Libre Baskerville,Georgia,serif,serif}.text-mono{font-family:ui-monospace,Fira Mono,Roboto Mono,Oxygen Mono,Consolas,monospace,monospace}.text-title{font-family:Inter,sans-serif}@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=Open+Sans:wght@400;600&display=swap\"); *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([theme=light]){--tecnologia-color-primary:#3c9bec;--tecnologia-color-secondary:#cbd0d8;--tecnologia-color-danger:#ec3c43;--tecnologia-color-success:#00c99a;--tecnologia-color-warning:#ff9800}:host([theme=light]) .bg-primary{background-color:#3c9bec}:host([theme=light]) .bg-secondary{background-color:#cbd0d8}:host([theme=light]) .bg-danger{background-color:#ec3c43}:host([theme=light]) .bg-success{background-color:#00c99a}:host([theme=light]) .bg-warning{background-color:#ff9800}:host([theme=dark]){--tecnologia-color-primary:#7dbcf2;--tecnologia-color-secondary:#cbd0d8;--tecnologia-color-danger:#ec3c43;--tecnologia-color-success:#00c99a;--tecnologia-color-warning:#ff9800}:host([theme=dark]) .bg-primary{background-color:#7dbcf2}:host([theme=dark]) .bg-secondary{background-color:#cbd0d8}:host([theme=dark]) .bg-danger{background-color:#ec3c43}:host([theme=dark]) .bg-success{background-color:#00c99a}:host([theme=dark]) .bg-warning{background-color:#ff9800}:host{display:block}:host *{outline:none}:host([theme=dark]) input{color:#f6f8fa;background:#212121;border:none}:host([theme=dark]) input:focus{-webkit-box-shadow:0 0 15px rgba(22, 22, 22, 0.87);box-shadow:0 0 15px rgba(22, 22, 22, 0.87);border:2px solid #3c9bec}:host([theme=dark]) input::-webkit-input-placeholder{color:#9ea2a8}:host([theme=dark]) input::-moz-placeholder{color:#9ea2a8}:host([theme=dark]) input:-ms-input-placeholder{color:#9ea2a8}:host([theme=dark]) input::-ms-input-placeholder{color:#9ea2a8}:host([theme=dark]) input::placeholder{color:#9ea2a8}:host([theme=light]) input{color:#434548}.wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}.wrapper input{width:7rem;height:9rem;font-weight:500;border-radius:3px;border:1px solid #e2e8f0;text-align:center;-webkit-transition:200ms ease-in;transition:200ms ease-in;-webkit-box-shadow:0 0 7px rgba(73, 73, 73, 0.061);box-shadow:0 0 7px rgba(73, 73, 73, 0.061)}.wrapper input.use-margin{margin:0 0.5rem 0 0.5rem}.wrapper input:focus{-webkit-box-shadow:0 0 15px rgba(56, 56, 56, 0.233);box-shadow:0 0 15px rgba(56, 56, 56, 0.233);border:2px solid #2e61ec}.wrapper input::-webkit-input-placeholder{color:#cbd0d8}.wrapper input::-moz-placeholder{color:#cbd0d8}.wrapper input:-ms-input-placeholder{color:#cbd0d8}.wrapper input::-ms-input-placeholder{color:#cbd0d8}.wrapper input::placeholder{color:#cbd0d8}@media (max-width: 1024px){.responsive input{width:6rem;height:8rem;font-size:6rem}}@media (max-width: 768px){.responsive input{width:5rem;height:7rem;font-size:3rem}}@media (max-width: 640px){.responsive input{width:3.5rem;height:5rem;font-size:1.875rem;line-height:0}}";
const CodeInput = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.inputChange = index.createEvent(this, "inputChange", 7);
this.inputFocus = index.createEvent(this, "inputFocus", 7);
this.inputBlur = index.createEvent(this, "inputBlur", 7);
this.codeChange = index.createEvent(this, "codeChange", 7);
this.codeFocus = index.createEvent(this, "codeFocus", 7);
this.codeBlur = index.createEvent(this, "codeBlur", 7);
this.completed = index.createEvent(this, "completed", 7);
this.cleared = index.createEvent(this, "cleared", 7);
this.value = '';
this.theme = defaultTheme.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$1) => {
var _a;
const placeholder = this.internalPlaceholder[index$1] || '';
const enableAufocus = this.autofocus && index$1 === 0;
const value = this.internalValue[index$1];
return (index.h("input", { class: classList, autoComplete: "false", autoCapitalize: "false", maxlength: "2", id: `field-${index$1}`, 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$1), onFocus: event => this.inputFocusHandler(event, index$1), onBlur: event => this.inputBlurHandler(event, index$1), onKeyDown: event => this.inputKeyDown(event, index$1), onKeyUp: event => this.inputKeyupHandler(event, index$1) }));
});
};
const classList = {
'responsive': this.responsive,
'wrapper': true
};
return (index.h(index.Host, { value: this.value }, index.h("div", { class: classList }, index.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)
});
}
}
get element() { return index.getElement(this); }
static get watchers() { return {
"value": ["valueChanges"],
"placeholder": ["placeholderChanges"]
}; }
};
CodeInput.style = codeInputCss;
exports.tec_code_input = CodeInput;