@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
557 lines (532 loc) • 45 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-093e8a80.js');
var TecnologiaTheme;
(function (TecnologiaTheme) {
TecnologiaTheme["light"] = "light";
TecnologiaTheme["dark"] = "dark";
})(TecnologiaTheme || (TecnologiaTheme = {}));
const defaultTheme = TecnologiaTheme.light;
var ButtonPosition;
(function (ButtonPosition) {
ButtonPosition["right"] = "right";
ButtonPosition["left"] = "left";
})(ButtonPosition || (ButtonPosition = {}));
const bottomBarCss = "@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{height:70px}:host([theme=dark]) .container{background:#e2e8f0;color:#434548}:host([theme=light]) .container{background:#434548;color:#fff}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-shadow:0 -1px 6px #00000046;box-shadow:0 -1px 6px #00000046;position:-webkit-sticky;position:sticky;position:fixed;z-index:99;padding:7px 60px;-webkit-box-sizing:border-box;box-sizing:border-box;height:70px;bottom:0;left:0;right:0}.container .wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:992px;height:100%}.container .text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.container .text span{text-overflow:ellipsis;overflow:hidden}.flex-align-center{-ms-flex-pack:center !important;justify-content:center !important}.use-animation{-webkit-animation:openBar 700ms forwards;animation:openBar 700ms forwards}@media only screen and (max-width: 992px){.wrapper{width:100% !important}.container{padding:8px 20px}}@-webkit-keyframes openBar{from{bottom:-70px}to{top:inherit}}@keyframes openBar{from{bottom:-70px}to{top:inherit}}";
const BottomBar = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.theme = defaultTheme;
this.buttonPosition = ButtonPosition.left;
this.useAnimation = true;
}
handleButtonPositionStyle(position) {
const isLeft = position === ButtonPosition.left;
return {
flexDirection: isLeft ? 'row-reverse' : 'row',
};
}
render() {
return (index.h(index.Host, null, index.h("div", { class: `container ${this.useAnimation && 'use-animation'}` }, index.h("div", { style: this.handleButtonPositionStyle(this.buttonPosition), class: `wrapper ${!this.text && 'flex-align-center'}` }, this.text && (index.h("div", { class: "text", style: {
margin: this.buttonPosition === ButtonPosition.left
? '0 0 0 20px'
: '0 20px 0 0',
} }, index.h("span", { class: "text-sans text-base" }, this.text))), index.h("div", { class: "button" }, index.h("slot", { name: "button" }))))));
}
};
BottomBar.style = bottomBarCss;
var TecStatus;
(function (TecStatus) {
TecStatus["primary"] = "primary";
TecStatus["secondary"] = "secondary";
TecStatus["success"] = "success";
TecStatus["danger"] = "danger";
TecStatus["warn"] = "warn";
TecStatus["info"] = "info";
})(TecStatus || (TecStatus = {}));
var TecButtonSize;
(function (TecButtonSize) {
TecButtonSize["tiny"] = "tiny";
TecButtonSize["small"] = "small";
TecButtonSize["medium"] = "medium";
TecButtonSize["large"] = "large";
TecButtonSize["giant"] = "giant";
})(TecButtonSize || (TecButtonSize = {}));
var TecButtonMode;
(function (TecButtonMode) {
TecButtonMode["rounded"] = "rounded";
TecButtonMode["square"] = "square";
TecButtonMode["radius"] = "radius";
})(TecButtonMode || (TecButtonMode = {}));
var TecButtonColor;
(function (TecButtonColor) {
TecButtonColor["solid"] = "solid";
TecButtonColor["gradient"] = "gradient";
TecButtonColor["outline"] = "outline";
TecButtonColor["basic"] = "basic";
})(TecButtonColor || (TecButtonColor = {}));
var TecButtonIconMode;
(function (TecButtonIconMode) {
TecButtonIconMode["left"] = "left";
TecButtonIconMode["right"] = "right";
})(TecButtonIconMode || (TecButtonIconMode = {}));
const buttonCss = "@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([size=tiny]) button{font-size:0.75rem;padding:0.2rem 1rem;height:30px}:host([size=small]) button{font-size:0.875rem;padding:0.313rem 1.25rem;height:38px}:host([size=medium]) button{font-size:1rem;padding:0.5rem 1.5rem;height:44px}:host([size=large]) button{font-size:1.125rem;padding:0.8rem 1.8rem;height:55px}:host([size=giant]) button{font-size:1.25rem;padding:1.2rem 2.3rem;height:65px}button{outline:none;cursor:pointer;border:none;color:#ffffff;-webkit-transition:all cubic-bezier(0.16, 0.97, 0.58, 0.94) 250ms;transition:all cubic-bezier(0.16, 0.97, 0.58, 0.94) 250ms;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;font-size:0.875rem;padding:0.313rem 1.25rem;height:38px}button.primary{background:#3c9bec}button.primary:hover{background:#368bd4}button.success{background:#00c99a}button.success:hover{background:#00b48a}button.responsive{width:100%}button.rounded{border-radius:5rem}button:disabled{background-color:#e2e8f0;color:#9ea2a8;cursor:not-allowed}button:disabled:hover{background:#e2e8f0}";
const TecButton = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.clicked = index.createEvent(this, "clicked", 7);
this.theme = defaultTheme;
/**
* The status of button (color)
*/
this.status = TecStatus.primary;
/**
* Mode of button (like square or rounded)
*/
this.mode = TecButtonMode.rounded;
/**
* Colors of button (like gradient)
*/
this.color = TecButtonColor.solid;
/**
* Size of button
*/
this.size = TecButtonSize.small;
/**
* Boolean to indicate if button is disabled
*/
this.disabled = false;
/**
* If `true` button use `width: 100%`
*/
this.fullWidth = false;
/**
* If `true` button removes label
*/
this.onlyIcon = false;
/**
* Position of icon
*/
this.iconMode = TecButtonIconMode.left;
/**
* Add a loading indicator to button
* You need add a manual control to remove loading
*/
this.loading = false;
this.handleEventClick = (event) => {
if (!this.isDisabled)
this.clicked.emit(event);
};
}
componentDidLoad() {
if (this.onlyIcon && !this.icon) {
throw new Error(`When 'onlyIcon' property is enabled a 'icon' should be passed!`);
}
}
get isDisabled() {
return this.disabled || this.loading;
}
render() {
const classList = {
[this.color]: true,
[this.mode]: true,
[this.status]: true,
'disabled': this.isDisabled,
'responsive': this.fullWidth,
'text-sans': true,
'text-base': true,
};
const iconClasses = {
'reverse': !!this.icon && this.iconMode === TecButtonIconMode.right,
'no-margins': this.onlyIcon,
};
return (index.h(index.Host, null, index.h("button", { type: "button", id: this.buttonId, class: classList, disabled: this.isDisabled, onClick: this.handleEventClick }, index.h("span", { class: iconClasses }, !!this.icon && index.h("i", { class: this.icon }), !this.onlyIcon && this.label))));
}
};
TecButton.style = buttonCss;
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;
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;
var TecAlign;
(function (TecAlign) {
TecAlign["left"] = "left";
TecAlign["center"] = "center";
TecAlign["right"] = "right";
})(TecAlign || (TecAlign = {}));
var TecSize;
(function (TecSize) {
TecSize["tiny"] = "tiny";
TecSize["small"] = "small";
TecSize["medium"] = "medium";
TecSize["large"] = "large";
TecSize["giant"] = "giant";
})(TecSize || (TecSize = {}));
const tecModalCss = "@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 body{overflow:hidden !important}:host([theme=light]) .modal .modal-content{background:#ffffff;color:#434548}:host([theme=dark]) .modal .modal-content{background:#434548;color:#f6f8fa;border:none}:host([theme=dark]) .modal .modal-content .modal-title{border-bottom:1px solid #5a5c60 !important}:host([theme=dark]) .modal .modal-content .modal-title h1{color:#f6f8fa !important}:host([theme=dark]) .modal .modal-content .footer{border-top:1px solid #5a5c60 !important}:host([size=tiny]) .modal-content{width:20%}:host([size=small]) .modal-content{width:30%}:host([size=medium]) .modal-content{width:40%}:host([size=large]) .modal-content{width:50%}:host([size=giant]) .modal-content{width:60%}.modal{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;align-items:center;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:black;background-color:rgba(0, 0, 0, 0.6)}.modal.remove-background{-webkit-animation:remove-brackground 100ms forwards;animation:remove-brackground 100ms forwards}.modal.show-background{-webkit-animation:show-background 100ms forwards;animation:show-background 100ms forwards}.modal-content{border-radius:5px;background-color:#fefefe;border:1px solid #858585;width:30%}.modal-content.full-width{width:100% !important;border:none !important}.modal-content.open-animation{-webkit-animation:open-fade 100ms forwards;animation:open-fade 100ms forwards}.modal-content.close-animation{-webkit-animation:close-fade 100ms forwards;animation:close-fade 100ms forwards}.modal-content .modal-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-bottom:1px solid #d3d3d3;padding:0 1rem}.modal-content .modal-title h1{color:#212121}.modal-content .modal-title .close-container{margin-left:auto;border-radius:100%;min-width:28px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:150ms;transition:150ms;cursor:pointer}.modal-content .modal-title .close-container:hover{background-color:#e4e4e4}.modal-content .modal-title .close-container .close{color:#646464;font-size:22px;font-weight:bold;padding-bottom:0.125rem}.modal-content .modal-title .close-container .close:hover,.modal-content .modal-title .close-container .close:focus{text-decoration:none}.modal-content .content{padding:1rem;overflow:auto;max-height:70vh}.modal-content .footer{padding:0.7rem 1rem;border-top:1px solid #d3d3d3}.modal-content .footer.center,.modal-content .footer.left,.modal-content .footer.right{display:-ms-flexbox;display:flex}.modal-content .footer.center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.modal-content .footer.left .footer-content{margin-right:auto}.modal-content .footer.right .footer-content{margin-left:auto}@media (max-width: 1536px){.responsive{width:40%}:host([size=tiny]) .modal-content{width:30%}:host([size=small]) .modal-content{width:40%}:host([size=medium]) .modal-content{width:40%}:host([size=large]) .modal-content{width:50%}:host([size=giant]) .modal-content{width:60%}}@media (max-width: 1280px){.responsive{width:45%}:host([size=tiny]) .responsive{width:30%}:host([size=small]) .responsive{width:45%}:host([size=medium]) .responsive{width:55%}:host([size=large]) .responsive{width:65%}:host([size=giant]) .responsive{width:75%}}@media (max-width: 1024px){.responsive{width:50%}:host([size=tiny]) .responsive{width:40%}:host([size=small]) .responsive{width:50%}:host([size=medium]) .responsive{width:60%}:host([size=large]) .responsive{width:70%}:host([size=giant]) .responsive{width:80%}}@media (max-width: 768px){.responsive{width:60%}:host([size=tiny]) .responsive{width:50%}:host([size=small]) .responsive{width:60%}:host([size=medium]) .responsive{width:70%}:host([size=large]) .responsive{width:80%}:host([size=giant]) .responsive{width:90%}}@media (max-width: 640px){.responsive{width:70%}:host([size=tiny]) .responsive{width:70%}:host([size=small]) .responsive{width:85%}:host([size=medium]) .responsive{width:90%}:host([size=large]) .responsive{width:95%}:host([size=giant]) .responsive{width:98%}}@-webkit-keyframes open-fade{from{top:10rem;-webkit-transform:scale(0.9);transform:scale(0.9);opacity:0;z-index:1}to{top:inherit;-webkit-transform:scale(1);transform:scale(1);opacity:1;z-index:100}}@keyframes open-fade{from{top:10rem;-webkit-transform:scale(0.9);transform:scale(0.9);opacity:0;z-index:1}to{top:inherit;-webkit-transform:scale(1);transform:scale(1);opacity:1;z-index:100}}@-webkit-keyframes close-fade{from{-webkit-transform:scale(1);transform:scale(1);opacity:1;z-index:100}to{-webkit-transform:scale(0.9);transform:scale(0.9);opacity:0;z-index:1}}@keyframes close-fade{from{-webkit-transform:scale(1);transform:scale(1);opacity:1;z-index:100}to{-webkit-transform:scale(0.9);transform:scale(0.9);opacity:0;z-index:1}}@-webkit-keyframes remove-brackground{from{opacity:1}to{display:none;opacity:0}}@keyframes remove-brackground{from{opacity:1}to{display:none;opacity:0}}@-webkit-keyframes show-background{from{display:none;opacity:0}to{display:hidden;opacity:1}}@keyframes show-background{from{display:none;opacity:0}to{display:hidden;opacity:1}}";
const TecModal = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.hidden = index.createEvent(this, "hidden", 7);
this.clickWasInside = false;
this.hasFooterContent = false;
this.openedAuxiliary = false;
this.theme = defaultTheme;
this.opened = false;
this.showCloseIcon = true;
this.dismissOnBackdrop = true;
this.size = TecSize.small;
this.fullWidth = false;
this.closeOnEscape = true;
this.blockBodyScroll = true;
this.responsive = true;
this.footerAlign = TecAlign.right;
this.handleClick = (event) => {
if (!this.clickWasInside && this.dismissOnBackdrop)
this.closeModal(event);
this.clickWasInside = false;
};
this.closeModal = (event) => {
this.opened = false;
this.handleParentOverflow();
this.hidden.emit(event);
};
this.handleKeyDown = (event) => {
if (this.opened && event.key === 'Escape')
this.closeModal();
};
}
watchOpened(newValue) {
if (!newValue) {
setTimeout(() => this.openedAuxiliary = false, 200);
}
else {
this.handleParentOverflow();
this.openedAuxiliary = true;
}
}
componentWillLoad() {
this.hasFooterContent = !!this.hostElement.querySelector('[slot="footer"]');
if (this.opened)
this.handleParentOverflow();
this.openedAuxiliary = this.opened;
if (this.closeOnEscape)
document.addEventListener('keydown', this.handleKeyDown);
}
handleParentOverflow() {
const property = this.opened && this.blockBodyScroll ? 'hidden' : 'inherit';
this.hostElement.parentElement.style.overflow = property;
}
setClickWasInside(wasInside) {
return () => this.clickWasInside = wasInside;
}
render() {
return (this.openedAuxiliary && (index.h(index.Host, null, index.h("div", { class: `modal ${this.opened && 'show-background'} ${!this.opened && 'remove-background'}`, onClick: this.handleClick }, index.h("div", { class: `modal-content ${this.fullWidth && 'full-width'} ${this.opened && 'open-animation'} ${!this.opened && 'close-animation'} ${this.responsive && 'responsive'}`, onClick: this.setClickWasInside(true) }, index.h("div", { class: "modal-title text-title" }, index.h("h1", { class: "text-2x1" }, this.modalTitle), this.showCloseIcon && (index.h("div", { class: "close-container", onClick: this.closeModal }, index.h("span", { class: "close" }, index.h("span", null, "\u00D7"))))), index.h("div", { class: "content" }, index.h("slot", { name: "content" })), this.hasFooterContent && (index.h("div", { class: `footer ${this.footerAlign}` }, index.h("div", { class: "footer-content" }, index.h("slot", { name: "footer" })))))))));
}
get hostElement() { return index.getElement(this); }
static get watchers() { return {
"opened": ["watchOpened"]
}; }
};
TecModal.style = tecModalCss;
const productHeaderCss = "@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{font-size:1rem;display:block}:host([theme=dark]) header{background:#434548}:host([theme=dark]) header .title{color:#f6f8fa}:host([theme=light]) header{background:#ffffff}:host([theme=light]) header .title{color:#5a5c60}:host([sticky]){position:-webkit-sticky;position:sticky;position:fixed;z-index:99;top:0;right:0;left:0;position:relative;width:100%;height:70px}header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 -1px 6px #00000046;box-shadow:0 -1px 6px #00000046;padding:1rem 1.25rem;width:100%;height:70px;top:0;left:0;height:70px}header.sticky{position:fixed}header .title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1.2rem;font-weight:500;margin-right:1rem;height:100%}header .content{font-size:1rem;-ms-flex:1;flex:1}";
const ProductHeader = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.titleClicked = index.createEvent(this, "title-clicked", 7);
this.theme = defaultTheme;
/**
* Set `false` to remove `cursor: pointer` from title
* @summary when `false` this property disable `titleClicked` event.
* @default true
*/
this.titleCursorPointer = true;
/**
* Use to make a bar fixed on top
* @default true
*/
this.sticky = true;
this.handleClick = () => {
if (this.titleCursorPointer)
this.titleClicked.emit();
};
}
render() {
return (index.h(index.Host, null, index.h("header", { class: `text-title ${this.sticky && 'sticky'}` }, index.h("div", { class: "before-title" }, index.h("slot", { name: "before-title" })), index.h("div", { class: "title", style: { cursor: this.titleCursorPointer && 'pointer' }, onClick: this.handleClick }, this.titleProduct), index.h("div", { class: "content" }, index.h("slot", { name: "content" })))));
}
};
ProductHeader.style = productHeaderCss;
const statusBadgeCss = "@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}.badge .badge-value{background:#e9f3fc;color:#307cbc;font-size:0.9375rem;padding:0.6rem 1.0667rem;border-radius:15rem;line-height:2rem;white-space:pre-wrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}.badge .badge-value.primary{background:#e5f9f4;color:#00c99a}.badge .badge-value.secondary{background:#f6f6f6;color:#646464}.badge .badge-value.success{background:#e5f9f4;color:#00a07b}.badge .badge-value.danger{background:#ffecf1;color:#b23154}.badge .badge-value.warn{background-color:#ffe0b2;color:#ffa726}.badge .badge-value.info{background:#e9f3fc;color:#307cbc}";
const StatusBadge = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/**
* The status of badge (color)
*/
this.status = TecStatus.primary;
}
render() {
return (index.h(index.Host, null, index.h("div", { class: "badge text-sans" }, index.h("span", { class: `badge-value ${this.status}` }, this.badgeText))));
}
};
StatusBadge.style = statusBadgeCss;
exports.tec_bottom_bar = BottomBar;
exports.tec_button = TecButton;
exports.tec_code_input = CodeInput;
exports.tec_modal = TecModal;
exports.tec_product_header = ProductHeader;
exports.tec_status_badge = StatusBadge;