@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
344 lines (339 loc) • 16.7 kB
JavaScript
var __awaiter = this && this.__awaiter || function(e, t, i, n) {
return new (i || (i = Promise))((function(o, r) {
function fulfilled(e) {
try {
step(n.next(e));
} catch (t) {
r(t);
}
}
function rejected(e) {
try {
step(n.throw(e));
} catch (t) {
r(t);
}
}
function step(e) {
var t;
e.done ? o(e.value) : (t = e.value, t instanceof i ? t : new i((function(e) {
e(t);
}))).then(fulfilled, rejected);
}
step((n = n.apply(e, t || [])).next());
}));
}, __generator = this && this.__generator || function(e, t) {
var i, n, o, r, a = {
label: 0,
sent: function() {
if (1 & o[0]) throw o[1];
return o[1];
},
trys: [],
ops: []
};
return r = {
next: verb(0),
throw: verb(1),
return: verb(2)
}, "function" == typeof Symbol && (r[Symbol.iterator] = function() {
return this;
}), r;
function verb(r) {
return function(l) {
return function(r) {
if (i) throw new TypeError("Generator is already executing.");
for (;a; ) try {
if (i = 1, n && (o = 2 & r[0] ? n.return : r[0] ? n.throw || ((o = n.return) && o.call(n),
0) : n.next) && !(o = o.call(n, r[1])).done) return o;
switch (n = 0, o && (r = [ 2 & r[0], o.value ]), r[0]) {
case 0:
case 1:
o = r;
break;
case 4:
return a.label++, {
value: r[1],
done: !1
};
case 5:
a.label++, n = r[1], r = [ 0 ];
continue;
case 7:
r = a.ops.pop(), a.trys.pop();
continue;
default:
if (!(o = a.trys, (o = o.length > 0 && o[o.length - 1]) || 6 !== r[0] && 2 !== r[0])) {
a = 0;
continue;
}
if (3 === r[0] && (!o || r[1] > o[0] && r[1] < o[3])) {
a.label = r[1];
break;
}
if (6 === r[0] && a.label < o[1]) {
a.label = o[1], o = r;
break;
}
if (o && a.label < o[2]) {
a.label = o[2], a.ops.push(r);
break;
}
o[2] && a.ops.pop(), a.trys.pop();
continue;
}
r = t.call(e, a);
} catch (l) {
r = [ 6, l ], n = 0;
} finally {
i = o = 0;
}
if (5 & r[0]) throw r[1];
return {
value: r[0] ? r[1] : void 0,
done: !0
};
}([ r, l ]);
};
}
};
System.register([ "./index-7074ebb2.system.js", "./defaultTheme-1c011d78.system.js" ], (function(e) {
"use strict";
var t, i, n, o, r, a;
return {
setters: [ function(e) {
t = e.r, i = e.f, n = e.h, o = e.e, r = e.g;
}, function(e) {
a = e.d;
} ],
execute: function() {
var l;
function removeStringWhiteSpace(e) {
return e.replace(/\s/g, "");
}
function caseStringHandler(e, t) {
return t === l.LOWERCASE ? e.toLowerCase() : t === l.UPPERCASE ? e.toUpperCase() : e;
}
!function(e) {
e.UPPERCASE = "uppercase", e.LOWERCASE = "lowercase", e.DEFAULT = "default";
}(l || (l = {}));
e("tec_code_input", /** @class */ function() {
function class_1(e) {
t(this, e), this.inputChange = i(this, "inputChange", 7), this.inputFocus = i(this, "inputFocus", 7),
this.inputBlur = i(this, "inputBlur", 7), this.codeChange = i(this, "codeChange", 7),
this.codeFocus = i(this, "codeFocus", 7), this.codeBlur = i(this, "codeBlur", 7),
this.completed = i(this, "completed", 7), this.cleared = i(this, "cleared", 7),
this.value = "", this.theme = a, this.initialValue = "", this.placeholder = "",
this.responsive = !0,
/**
* Auto focus on first input
*/
this.autofocus = !0,
/**
* Type of inputs
*/
this.type = "text",
/**
* Inputs quantity
*/
this.length = 5,
/**
* Add margin between inputs
*/
this.useMargin = !0,
/**
* Allow to parse all chars to UPPER or LOWER case
* @default allow upper and lowercase values
*/
this.case = l.DEFAULT;
}
return class_1.prototype.valueChanges = function(e, t) {
e && e !== t && this.valueChangesHandler(e);
}, class_1.prototype.placeholderChanges = function() {
this.internalPlaceholder = this.splitPlaceholder();
}, class_1.prototype.clear = function() {
return __awaiter(this, void 0, void 0, (function() {
return __generator(this, (function(e) {
return this.length && (this.initialValue ? this.clearWithInitialValue() : this.clearWithoutInitialValue(),
this.codeChange.emit({
value: ""
}), this.cleared.emit()), [ 2 /*return*/ ];
}));
}));
}, class_1.prototype.componentWillLoad = function() {
this.initInternalValue(), this.internalPlaceholder = this.splitPlaceholder(), this.value = this.initialValue;
}, class_1.prototype.render = function() {
var e = this, t = {
responsive: this.responsive,
wrapper: !0
};
return n(o, {
value: this.value
}, n("div", {
class: t
}, n((function(t) {
var i = t.useMargin, o = {
"text-mono text-8x1": !0,
"use-margin": void 0 === i || i
};
return e.buildArrayIterator().map((function(t, i) {
var r, a = e.internalPlaceholder[i] || "", l = e.autofocus && 0 === i, s = e.internalValue[i];
return n("input", {
class: o,
autoComplete: "false",
autoCapitalize: "false",
maxlength: "2",
id: "field-" + i,
type: e.type,
placeholder: a,
value: a && !s.trim() ? null : s,
autoFocus: l,
disabled: null !== (r = e.disabled) && void 0 !== r ? r : null,
onInput: function(t) {
return e.inputInputHandler(t, i);
},
onFocus: function(t) {
return e.inputFocusHandler(t, i);
},
onBlur: function(t) {
return e.inputBlurHandler(t, i);
},
onKeyDown: function(t) {
return e.inputKeyDown(t, i);
},
onKeyUp: function(t) {
return e.inputKeyupHandler(t, i);
}
});
}));
}), {
useMargin: this.useMargin
})));
},
// ---------------
// PRIVATE METHODS
// ---------------
class_1.prototype.buildFinalValue = function() {
var e = this.internalValue.join("");
return (null == e ? void 0 : e.length) ? e : "";
}, class_1.prototype.initInternalValue = function() {
this.internalValue = this.splitInitialValue();
}, class_1.prototype.inputInputHandler = function(e, t) {
var i = this.getInputByIndex(t);
i.value = e.data, this.inputChange.emit({
event: e,
value: i.value
}), i && (
// handle input by case
i.value = caseStringHandler(i.value, this.case),
// build final value
this.internalValue[t] = i.value || " ", this.value = this.buildFinalValue()), e.data && t < this.length - 1 &&
// apply focus on next input
this.focusOnNextInput(t), this.handleCompletedEvent();
}, class_1.prototype.inputFocusHandler = function(e, t) {
var i = this.getInputByIndex(t);
i && (i.select(), this.inputFocus.emit({
event: e,
value: {
id: i.id,
index: t,
value: i.value
}
})), this.codeFocus.emit();
}, class_1.prototype.inputKeyupHandler = function(e, t) {
var i = this.getInputByIndex(t);
i && (i.value = caseStringHandler(i.value, this.case));
}, class_1.prototype.inputKeyDown = function(e, t) {
var i = this, n = {
Backspace: function() {
setTimeout((function() {
i.focusOnPreviousInput(t);
}), 20);
},
ArrowLeft: function() {
i.focusOnPreviousInput(t);
},
ArrowRight: function() {
i.focusOnNextInput(t);
}
}[e.code];
n && n();
}, class_1.prototype.inputBlurHandler = function(e, t) {
var i = this.getInputByIndex(t);
this.inputBlur.emit({
event: e,
value: {
id: null == i ? void 0 : i.id,
index: t,
value: null == i ? void 0 : i.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
*/
class_1.prototype.inputFocusAndSelect = function(e, t) {
void 0 === t && (t = !1);
var i = this.getInputByIndex(e);
return i && (i.focus(), t && setTimeout((function() {
i.select();
}), 30)), i;
}, class_1.prototype.getInputByIndex = function(e) {
return this.element.shadowRoot.querySelector("input#field-" + e);
}, class_1.prototype.focusOnNextInput = function(e) {
if (e < this.length - 1) return this.inputFocusAndSelect(e + 1, !0);
}, class_1.prototype.focusOnPreviousInput = function(e) {
if (e >= 0) return this.inputFocusAndSelect(e - 1, !0);
}, class_1.prototype.buildArrayIterator = function(e) {
return void 0 === e && (e = this.length), Array(e).fill(null);
}, class_1.prototype.splitPlaceholder = function() {
return this.placeholder.split("");
}, class_1.prototype.splitInitialValue = function() {
var e = this.initialValue.split("");
return this.buildArrayIterator().map((function(t, i) {
var n;
return null !== (n = e[i]) && void 0 !== n ? n : " ";
}));
}, class_1.prototype.valueChangesHandler = function(e) {
var t = this, i = e.split("");
i && (this.buildArrayIterator().forEach((function(e, n) {
var o = i[n], r = t.getInputByIndex(n);
r && o && (r.value = o);
})), this.codeChange.emit({
value: removeStringWhiteSpace(e)
}));
}, class_1.prototype.clearWithInitialValue = function() {
this.initInternalValue(), this.internalPlaceholder = this.splitPlaceholder(), this.value = this.initialValue;
}, class_1.prototype.clearWithoutInitialValue = function() {
var e = this;
this.value = "", this.initInternalValue(), this.buildArrayIterator().forEach((function(t, i) {
var n = e.getInputByIndex(i);
n && (n.value = "");
}));
}, class_1.prototype.handleCompletedEvent = function() {
removeStringWhiteSpace(this.value).length === this.length && this.completed.emit({
value: removeStringWhiteSpace(this.value)
});
}, Object.defineProperty(class_1.prototype, "element", {
get: function() {
return r(this);
},
enumerable: !1,
configurable: !0
}), Object.defineProperty(class_1, "watchers", {
get: function() {
return {
value: [ "valueChanges" ],
placeholder: [ "placeholderChanges" ]
};
},
enumerable: !1,
configurable: !0
}), class_1;
}()).style = '@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}}';
}
};
}));