@betha-plataforma/estrutura-componentes
Version:
Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.
524 lines (523 loc) • 589 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import { r as registerInstance, h, c as createEvent, H as Host, g as getElement, f as forceUpdate } from './index-a1ee1525.js';
import { i as isNill, a as isDispositivoMovel, M as MSG_SEM_PERMISSAO_RECURSO, T as TIMEOUT_INTERACOES, g as getCssVariableValue, P as PromiseTracker } from './promise-tracker-7ca963d0.js';
var ajudaCss = "*,*:after,*:before{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1.5}*{font-family:var(--bth-app-font-family-primary)}a:focus{outline:1px dotted var(--bth-app-gray-dark-30)}::-webkit-scrollbar{-webkit-appearance:none;height:6px;width:6px}::-webkit-scrollbar-track{background:var(--bth-app-gray-light-30)}::-webkit-scrollbar-corner{background:var(--bth-app-gray-light-40)}::-webkit-scrollbar-thumb{background-color:var(--bth-app-gray);border-radius:1px}::-webkit-scrollbar-thumb:hover{background-color:rgba(255, 255, 255, 0.3)}.empty-ajuda{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:1em;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:100%;text-align:center}.empty-ajuda__img{background-image:url(\"https://cdn.betha.cloud/plataforma/design/kare/framework/0.1.6/assets/images/empty-help.svg\");background-repeat:no-repeat;background-position-x:center;background-size:130px;height:130px;width:130px}.empty-ajuda h4{font-size:20px;font-weight:var(--bth-app-font-weight-regular);margin:24px 0px}.empty-ajuda h4 a{text-decoration:none;color:var(--bth-app-blue)}.empty-ajuda h4 a:hover{color:var(--bth-app-blue-dark-10);text-decoration:underline}.descricao-mobile{text-decoration:none;padding:0 16px}";
var Ajuda = /** @class */ (function () {
function Ajuda(hostRef) {
registerInstance(this, hostRef);
}
Ajuda.prototype.getCentralAjudaHome = function () {
if (!isNill(this.centralAjudaHome)) {
return this.centralAjudaHome;
}
if ('___bth' in window) {
return window['___bth'].envs.suite['central-de-ajuda'].v1['host-redirecionamento'];
}
return null;
};
Ajuda.prototype.render = function () {
return (h("bth-menu-ferramenta", { descricao: "Ajuda", tituloPainelLateral: "Ajuda" }, h("bth-menu-ferramenta-icone", { slot: "menu_item_desktop", icone: "help-circle" }), h("bth-menu-ferramenta-icone", { slot: "menu_item_mobile", icone: "help-circle", mobile: true }), h("span", { slot: "menu_descricao_mobile", class: "descricao-mobile" }, "Ajuda"), h("div", { slot: "conteudo_painel_lateral", class: "empty-ajuda" }, h("div", { class: "empty-ajuda__img" }), h("h4", null, "Est\u00E1 com d\u00FAvida? Acesse a ", h("a", { href: this.getCentralAjudaHome(), target: "_blank", rel: "noreferrer" }, "Central de Ajuda ", h("bth-icone", { icone: "open-in-new" }))))));
};
return Ajuda;
}());
Ajuda.style = ajudaCss;
var LOCAL_STORAGE_KEY = 'bth-menu:state';
var PERMISSAO_PADRAO = true;
var SLOT = {
MARCA_PRODUTO: 'menu_marca_produto',
FERRAMENTAS: 'menu_ferramentas',
APLICACAO: 'container_aplicacao',
CONTEXTO: 'container_contexto'
};
var appCss = "@charset \"UTF-8\";*,*:after,*:before{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1.5}*{font-family:var(--bth-app-font-family-primary)}a:focus{outline:1px dotted var(--bth-app-gray-dark-30)}::-webkit-scrollbar{-webkit-appearance:none;height:6px;width:6px}::-webkit-scrollbar-track{background:var(--bth-app-gray-light-30)}::-webkit-scrollbar-corner{background:var(--bth-app-gray-light-40)}::-webkit-scrollbar-thumb{background-color:var(--bth-app-gray);border-radius:1px}::-webkit-scrollbar-thumb:hover{background-color:rgba(255, 255, 255, 0.3)}.app{display:grid;height:100vh;margin:0;overflow:hidden;padding:0 !important;background:transparent;font-size:14px;grid-template:\"banner banner\" \"menu-horizontal menu-horizontal\" -webkit-max-content \"menu container\" 1fr/minmax(0px, -webkit-max-content) 1fr;grid-template:\"banner banner\" \"menu-horizontal menu-horizontal\" max-content \"menu container\" 1fr/minmax(0px, max-content) 1fr}slot[name=container_contexto]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-bottom:1px solid var(--bth-app-gray-light-10);margin:0 16px;display:var(--bth-app-carta-servicos-display, flex);visibility:var(--bth-app-carta-servicos-visibility, unset)}.banner{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;grid-area:banner;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden;padding:0 16px;position:relative;-webkit-transition:max-height var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), padding var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), height var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), top var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:max-height var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), padding var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), height var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), top var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);vertical-align:middle;width:100%;height:40px;max-height:0px}.banner--show{max-height:40px}.banner__content{line-height:1.5;margin:0 4px;max-width:95%}.banner__content>a{color:var(--bth-app-gray-dark-40);text-decoration:underline;margin-left:24px}.banner__content>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}.banner__content>span~a{max-width:85%}.banner__content>button{background-color:transparent;border:1px solid var(--bth-app-gray-dark-40);color:#222;text-transform:uppercase;text-align:center;padding:0 12px;height:28px;margin-left:12px;cursor:pointer}.banner__content>button:hover{background-color:#00000013}.banner__icon{font-size:18px;line-height:1.5;margin:0 4px}.banner--warning{background-color:var(--bth-app-yellow-light-10)}.banner--info{background-color:var(--bth-app-aqua-light-20)}.banner--danger{background-color:var(--bth-app-red-light-20)}.app-container{grid-area:container;overflow:auto}.menu-ferramentas__mobile{position:fixed;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-pack:end;justify-content:flex-end;background-color:var(--bth-app-gray-light-40);z-index:1070;padding:0px 16px;top:50px;height:calc(100vh - 50px);width:100%;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-ferramentas__mobile--banner{top:125px;height:calc(100vh - 125px)}.menu-ferramentas__mobile--show{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.menu-horizontal{background-color:var(--bth-app-menu-bg-color);color:var(--bth-app-gray-light-40);height:40px;grid-area:menu-horizontal;width:100%;display:var(--bth-app-carta-servicos-display, unset);visibility:var(--bth-app-carta-servicos-visibility, unset)}.menu-horizontal__link--disabled{opacity:0.5;pointer-events:none}.menu-horizontal__body{width:100%;height:100%}.menu-horizontal__list{display:-ms-flexbox;display:flex;list-style:none;width:100%;height:100%;padding:0px}.menu-horizontal__list .menu-horizontal__item--has-list{-ms-flex:1;flex:1}.menu-horizontal__list .menu-horizontal__item--has-list>.menu-horizontal__list{list-style:none;display:-ms-flexbox;display:flex;-ms-flex-pack:left;justify-content:left;width:100%;padding:0 18px 0 0}.menu-horizontal__list .menu-horizontal__item .menu-vertical__toggle{text-decoration:none;padding:13px 15px 9px 15px}.menu-horizontal__list .menu-horizontal__item .menu-vertical__toggle:before{content:\"\";font-size:20px;color:var(--bth-app-gray-light-40);font-family:var(--bth-app-font-family-icons);line-height:40px}.menu-horizontal__list .menu-horizontal__item .menu-vertical__toggle:hover,.menu-horizontal__list .menu-horizontal__item .menu-vertical__toggle:focus{background-color:rgba(255, 255, 255, 0.15);text-decoration:none}.menu-horizontal__list .menu-horizontal__item .menu-vertical__toggle:focus{outline:1px dotted var(--bth-app-gray-light-10);outline-offset:-2px}.menu-horizontal__list .menu-horizontal__item .menu-ferramentas{list-style:none;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-direction:row;flex-direction:row;width:100%;height:100%;padding:0}.menu-horizontal__list .menu-horizontal__item .menu-ferramentas>li{position:relative;padding:0px 6px}.menu-horizontal__list .menu-horizontal__item .menu-ferramentas>li>a{text-decoration:none}.menu-horizontal__list .menu-horizontal__item .menu-ferramentas>li>a>bth-icone{color:var(--bth-app-gray-light-40);font-size:16px;margin:11px 6px}.menu-horizontal__list .menu-horizontal__item .menu-ferramentas>li>a .badge-danger--notificacao{font-size:11px;font-weight:var(--bth-app-font-weight-semi-bold);padding:2px 5px;position:absolute;right:5px;top:5px}.menu-horizontal__list .menu-horizontal__item .menu-ferramentas>li:hover,.menu-horizontal__list .menu-horizontal__item .menu-ferramentas>li:focus{background-color:rgba(255, 255, 255, 0.15);text-decoration:none}.menu-horizontal__list .menu-horizontal__item .menu-ferramentas>li:focus{outline:1px dotted var(--bth-app-gray-dark-30);outline-offset:-1px}.badge{background-color:var(--bth-app-gray-light-10);border-radius:50px;color:var(--bth-app-gray-dark-30);font-size:12px;font-weight:var(--bth-app-font-weight-light);padding:3px 6px;text-align:center}.badge.badge-danger{background-color:var(--bth-app-red);color:var(--bth-app-gray-light-40)}.badge.badge-danger--notificacao-small{padding:0 2px;right:14px;top:10px;position:absolute;height:11px;width:11px}.menu-vertical{background-color:var(--bth-app-gray-light-30);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-area:menu;-webkit-transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);width:230px;border-right:1px solid var(--bth-app-gray-light-10);height:calc(100vh - 40px);top:40px;display:var(--bth-app-carta-servicos-display, flex);visibility:var(--bth-app-carta-servicos-visibility, unset)}.menu-vertical__body{-ms-flex:1;flex:1;overflow-x:hidden;overflow-y:overlay}.menu-vertical__footer{display:none}.menu-vertical__footer--show{display:block}.menu-vertical__list{list-style:none;margin:0;padding:0}.menu-vertical__item{position:relative}.menu-vertical__item>a{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%;color:var(--bth-app-gray-dark-20);font-weight:var(--bth-app-font-weight-regular);height:44px;text-decoration:none;overflow:hidden;padding:0px 9px 0px 0px}.menu-vertical__item>a:focus{outline:1px dotted var(--bth-app-gray-dark-30);outline-offset:-1px}.menu-vertical__item>a:hover,.menu-vertical__item>a:focus{background-color:#e1e3e6;text-decoration:none;color:var(--bth-app-gray-dark-30)}.menu-vertical__item>a>bth-icone:first-child,.menu-vertical__item>a>bth-icone:last-child{display:block;margin:auto 16px;min-width:18px;width:18px;font-size:18px}.menu-vertical__item>a>span{-ms-flex:1;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}.menu-vertical__item>.menu-vertical__list{border-top:0;max-height:100vh;overflow:hidden;-webkit-transition:max-height var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:max-height var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical__item--active{background-color:var(--bth-app-gray-light-10)}.menu-vertical__item--active>a bth-icone,.menu-vertical__item--active>a span{color:var(--bth-app-blue-dark-10)}.menu-vertical__item--active>a span{font-weight:var(--bth-app-font-weight-semi-bold)}.menu-vertical__item--active:before{content:\"\";position:absolute;border:2px var(--bth-app-blue) solid;top:0;bottom:0;z-index:1}.menu-vertical__item--collapsed bth-icone:last-child{-webkit-transform:rotate(0.5turn);transform:rotate(0.5turn)}.menu-vertical__item--collapsed>.menu-vertical__list{max-height:0}.menu-vertical__item--floating{background-color:var(--bth-app-gray-light-20);border-top:0}.menu-vertical__item--floating>a>span{opacity:0}.menu-vertical__item--floating>a:hover>bth-icone:last-of-type{-webkit-transform:rotate(0.1turn);transform:rotate(0.1turn);-webkit-transition:-webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:-webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical__item--floating>a:hover>span{opacity:1;-webkit-transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical--collapsed{width:50px;position:absolute;z-index:1049}.menu-vertical--collapsed:not(:hover){-webkit-transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical--collapsed-hover{width:230px;-webkit-transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical--collapsed:not(.menu-vertical--floating)~.app-container{margin-left:50px}.menu-vertical--collapsed.menu-vertical--floating{width:0;visibility:hidden;-webkit-transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), visibility var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:width var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), visibility var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical--collapsed.menu-vertical--floating .menu-vertical__item--floating bth-icone:last-child{display:none}.menu-vertical--floating{position:absolute;z-index:1069}.menu-vertical--floating .menu-vertical__item--floating>a>bth-icone:last-of-type{-webkit-transform:rotate(0.1turn);transform:rotate(0.1turn);-webkit-transition:-webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:-webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical--floating .menu-vertical__item--floating>a>span{opacity:0;-webkit-transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical--floating .menu-vertical__item--floating>a:hover>bth-icone:last-of-type{-webkit-transform:rotate(0turn);transform:rotate(0turn);-webkit-transition:-webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:-webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1), -webkit-transform var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.menu-vertical--floating .menu-vertical__item--floating>a:hover>span{opacity:1;-webkit-transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);transition:opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1)}.banner--show~.menu-vertical{height:calc(100vh - 80px);top:80px}@media (max-width: 991px){.menu-vertical{height:calc(100vh - 40px);top:40px;width:310px}.menu-vertical--banner{height:calc(100vh - 115px);top:115px !important}.menu-vertical--floating{position:absolute;z-index:1069}.menu-vertical__item .menu-vertical__list .menu-vertical__item>a{height:48px;font-size:16px}.menu-vertical__item>a{height:54px;font-size:18px}.menu-vertical__item>a>bth-icone:first-child,.menu-vertical__item>a>bth-icone:last-child{font-size:20px}.menu-vertical__item>a>bth-icone>span{max-width:100%}.menu-vertical__item>a--floating{display:none}.menu-vertical__item>a--has-children>a{font-weight:var(--bth-app-font-weight-regular)}.menu-vertical .banner~.menu-vertical{height:calc(100vh - 125px) !important;top:125px !important}.banner{height:75px}.banner--show{max-height:75px}.banner__content{margin:9px 16px;max-width:95%}.banner__content>span{display:block;display:-webkit-box;max-width:100%;min-height:15.4px;margin:0 auto;font-size:14px;line-height:1.1;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:unset}.banner__content>a{vertical-align:top}}@media (max-width: 991px){.menu-vertical{width:100%;height:calc(100vh - 50px);top:50px}.menu-horizontal{height:50px}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-vertical__toggle{padding:0 13px !important;width:47px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-vertical__toggle:before{font-size:22px !important;line-height:50px !important}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-vertical__toggle:after{content:\"\";font-size:22px;color:var(--bth-app-gray-light-40);font-family:var(--bth-app-font-family-icons);line-height:50px;display:none}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-vertical__toggle--opened{background-color:rgba(255, 255, 255, 0.2)}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-vertical__toggle--opened:before{display:none;margin-right:5px}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-vertical__toggle--opened:after{display:unset}.menu-horizontal .menu-horizontal__body .menu-horizontal__item--has-list{display:none}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li{width:47px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li>a>bth-icone{color:var(--bth-app-gray-light-40);font-size:18px;margin:6px 8px}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler{padding:0px 13px}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler:before{content:\"\";font-size:22px;font-weight:500;color:var(--bth-app-gray-light-40);font-family:var(--bth-app-font-family-icons);line-height:50px;display:unset}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler:after{content:\"\";font-size:22px;font-weight:500;color:var(--bth-app-gray-light-40);font-family:var(--bth-app-font-family-icons);line-height:50px;display:none}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler--opened{background-color:rgba(255, 255, 255, 0.2)}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler--opened:before{display:none}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler--opened:after{display:unset}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler--opened .badge-danger--notificacao-small:empty{display:none}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler .badge-danger--notificacao-small{padding:0px 4px;right:14px;top:10px;position:absolute;font-size:11px}.menu-horizontal .menu-horizontal__body .menu-horizontal__item .menu-ferramentas>li:last-child .menu-ferramentas__mobile-toggler .badge-danger--notificacao-small:empty{display:inherit}.menu-horizontal .menu-horizontal__body .menu-horizontal__item:last-child{-ms-flex:1;flex:1}.banner--show~.menu-vertical{height:calc(100vh - 125px);top:125px}}@media print{.banner{display:none}.menu-horizontal{display:none}.menu-vertical{display:none}}";
var App = /** @class */ (function () {
function class_1(hostRef) {
var _this = this;
registerInstance(this, hostRef);
this.bannerAlterado = createEvent(this, "bannerAlterado", 7);
this.opcaoMenuSelecionada = createEvent(this, "opcaoMenuSelecionada", 7);
this.botaoBannerAcionado = createEvent(this, "botaoBannerAcionado", 7);
this.ferramentasSinalizacaoPendente = {};
this.isMenuVerticalFlutuando = false;
this.isMenuVerticalAberto = true;
this.isDispositivoMovel = false;
this.isPainelFerramentasDispositivoMovelAberto = false;
this.possuiSinalizacaoPendente = false;
/**
* Opções de navegação do menu
*/
this.opcoes = [];
/**
* Define se as opções do menu serão exibidas no formato "vertical", caso contrário serão exibidas no formato "horizontal"
*/
this.menuVertical = false;
this.salvarEstadoLocalStorage = function () {
try {
var value = {
aberto: _this.isMenuVerticalAberto,
flutuando: _this.isMenuVerticalFlutuando
};
var valueStringfied = JSON.stringify(value);
localStorage.setItem(LOCAL_STORAGE_KEY, valueStringfied);
}
catch (err) {
console.error('Erro ao armazenar preferencia de menu do usuario', err);
}
};
this.recuperarEstadoLocalStorage = function () {
try {
var stored = localStorage.getItem(LOCAL_STORAGE_KEY);
if (stored === null) {
return null;
}
return JSON.parse(stored);
}
catch (err) {
console.error('Erro ao armazenar preferencia de menu do usuario', err);
}
};
this.onMouseOverMenuVertical = function () {
_this.cancelarTimeoutRecolhimentoMenu();
if (_this.isDispositivoMovel) {
return;
}
if (_this.isMenuVerticalAberto) {
return;
}
_this.alterarEstadoRecolhimentoMenuVertical(false);
};
this.onMouseLeaveMenuVertical = function () {
if (_this.isDispositivoMovel) {
return;
}
if (_this.isMenuVerticalAberto && !_this.isMenuVerticalFlutuando) {
return;
}
_this.cancelarTimeoutRecolhimentoMenu();
_this.alterarEstadoRecolhimentoMenuVertical(true);
};
this.onMouseOverBotaoMenu = function () {
_this.cancelarTimeoutRecolhimentoMenu();
};
this.onMouseLeaveBotaoMenu = function () {
if (_this.isMenuVerticalRecolhido) {
return;
}
if (_this.isMenuVerticalAberto && !_this.isMenuVerticalFlutuando) {
return;
}
_this.cancelarTimeoutRecolhimentoMenu();
_this.alterarEstadoRecolhimentoMenuVertical(true);
};
this.onTogglePainelFerramentas = function (event) {
event.preventDefault();
_this.isPainelFerramentasDispositivoMovelAberto = !_this.isPainelFerramentasDispositivoMovelAberto;
if (_this.isDispositivoMovel && _this.isPainelFerramentasDispositivoMovelAberto) {
_this.isMenuVerticalAberto = false;
}
_this.salvarEstadoLocalStorage();
};
this.onClickBotaoFixar = function (event) {
event.preventDefault();
_this.isMenuVerticalFlutuando = !_this.isMenuVerticalFlutuando;
_this.isMenuVerticalRecolhido = false;
_this.isMenuVerticalAberto = true;
_this.salvarEstadoLocalStorage();
};
this.onClickBotaoMenu = function (event) {
event.preventDefault();
if (_this.isMenuVerticalFlutuando) {
_this.isMenuVerticalRecolhido = !_this.isMenuVerticalRecolhido;
}
else {
if (!_this.isMenuVerticalRecolhido) {
_this.isMenuVerticalAberto = false;
}
else {
_this.isMenuVerticalAberto = !_this.isMenuVerticalAberto;
}
_this.isMenuVerticalRecolhido = !_this.isMenuVerticalRecolhido;
}
// Caso o menu vertical for aberto no modo responsivo fecha o painel de ferramentas
if (_this.isDispositivoMovel && _this.isMenuVerticalFlutuando) {
_this.isPainelFerramentasDispositivoMovelAberto = false;
}
_this.salvarEstadoLocalStorage();
};
this.onClickBotaoBanner = function (event) {
event.preventDefault();
_this.botaoBannerAcionado.emit();
};
}
class_1.prototype.connectedCallback = function () {
this.setCorBackgroundCustomizado();
this.setEstadoInicialMenu();
};
class_1.prototype.watchOpcoesChanged = function () {
// Reseta estado inicial do menu toda vez que opções for alterado, evita reabertura de maneira inconsistente
this.setEstadoInicialMenu();
};
class_1.prototype.onWindowResize = function () {
this.setEstadoInicialMenu();
if (!this.isDispositivoMovel) {
this.isPainelFerramentasDispositivoMovelAberto = false;
}
};
class_1.prototype.onConteudoSinalizado = function (event) {
this.ferramentasSinalizacaoPendente[event.detail.origem] = event.detail.possui;
this.possuiSinalizacaoPendente = this.possuiFerramentasSinalizadas();
};
class_1.prototype.onPainelLateralShow = function (event) {
if (!this.isPainelFerramentasDispositivoMovelAberto) {
return;
}
if (event.detail.fecharSobrepostos) {
this.isPainelFerramentasDispositivoMovelAberto = false;
}
};
class_1.prototype.onMenuHorizontalSelecionado = function (event) {
var opcao = this.findOpcaoMenuById(event.detail.identificador);
this.dispararEventoOpcaoSelecionada(opcao);
};
class_1.prototype.onMenuVerticalSelecionado = function (event) {
var opcao = this.findOpcaoMenuById(event.detail.identificador, event.detail.identificadorPai);
if (this.possuiSubmenus(opcao)) {
this.opcoesMenu = this.opcoesMenu.map(function (opcaoMenu) {
if (opcao.id === opcaoMenu.id) {
opcaoMenu.isRecolhido = !opcaoMenu.isRecolhido;
}
return opcaoMenu;
});
}
else {
if (this.isDispositivoMovel) {
this.isMenuVerticalRecolhido = !this.isMenuVerticalRecolhido;
}
this.dispararEventoOpcaoSelecionada(opcao);
}
};
class_1.prototype.dispararEventoOpcaoSelecionada = function (opcao) {
var eventPayload = {
id: opcao.id,
descricao: opcao.descricao,
rota: opcao.rota,
contador: opcao.contador
};
this.opcaoMenuSelecionada.emit(eventPayload);
};
class_1.prototype.onChangeBanner = function () {
var event = {
possui: this.possuiBanner()
};
this.bannerAlterado.emit(event);
};
class_1.prototype.onChangemenuBgColor = function () {
this.setCorBackgroundCustomizado();
};
/**
* Define o estado de ativo para o menu do parâmetro
*
* @param identificador Identificador do menu
*/
class_1.prototype.setMenuAtivo = function (identificador) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_f) {
if (this.possuiNavegacaoHorizontal()) {
this.marcarAtivoMenuHorizontal(identificador);
}
if (this.possuiNavegacaoVertical()) {
this.marcarAtivoMenuVertical(identificador);
}
return [2 /*return*/];
});
});
};
/**
* Define o estado de ativo para o badge no icone do item do menu
*
* @param identificador Identificador do menu
* @param ativo boolean que indica se deve ou não mostrar
*/
class_1.prototype.setBadgeIcone = function (identificador, ativo) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_f) {
if (this.possuiNavegacaoVertical()) {
this.opcoesMenu = this.opcoesMenu.map(function (opcao) {
opcao.possuiBadgeIcone = opcao.id === identificador ? ativo : false;
if (opcao.submenus !== undefined && opcao.submenus.length > 0) {
opcao.submenus = opcao.submenus.map(function (submenu) {
submenu.possuiBadgeIcone = submenu.id === identificador ? ativo : false;
return submenu;
});
}
return opcao;
});
}
return [2 /*return*/];
});
});
};
/**
* Define o valor do contador de um item do menu
*
* @param identificador Identificador do item do menu
* @param valor Valor do contador
*/
class_1.prototype.setContadorMenu = function (identificador, valor) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_f) {
if (this.possuiNavegacaoVertical()) {
this.opcoesMenu = this.opcoesMenu.map(function (opcao) {
opcao.contador = opcao.id === identificador ? valor : opcao.contador;
if (opcao.submenus !== undefined && opcao.submenus.length > 0) {
opcao.submenus = opcao.submenus.map(function (submenu) {
submenu.contador = submenu.id === identificador ? valor : submenu.contador;
return submenu;
});
}
return opcao;
});
}
if (this.possuiNavegacaoHorizontal()) {
this.opcoesMenu = this.opcoesMenu.map(function (opcao) {
opcao.contador = opcao.id === identificador ? valor : opcao.contador;
return opcao;
});
}
return [2 /*return*/];
});
});
};
class_1.prototype.setCorBackgroundCustomizado = function () {
if (this.menuBgColor === undefined) {
return;
}
this.el.style.setProperty('--bth-app-menu-bg-color', this.menuBgColor.toString());
};
class_1.prototype.possuiSlotMarcaProduto = function () {
return this.el.querySelector("[slot=\"" + SLOT.MARCA_PRODUTO + "\"]") !== null;
};
class_1.prototype.possuiSlotFerramentas = function () {
return this.el.querySelector("[slot=\"" + SLOT.FERRAMENTAS + "\"]") !== null;
};
class_1.prototype.possuiSlotContexto = function () {
return this.el.querySelector("[slot=\"" + SLOT.CONTEXTO + "\"]") !== null;
};
class_1.prototype.possuiFerramentasSinalizadas = function () {
var _this = this;
var pending = Object.keys(this.ferramentasSinalizacaoPendente)
.filter(function (key) { return _this.ferramentasSinalizacaoPendente[key]; });
return pending.length > 0 || false;
};
class_1.prototype.possuiOpcoes = function () {
return !isNill(this.opcoesMenu) && this.opcoesMenu.length > 0;
};
class_1.prototype.possuiBanner = function () {
return !isNill(this.banner);
};
class_1.prototype.possuiNavegacaoVertical = function () {
if (this.possuiOpcoes()) {
return this.menuVertical || (!this.menuVertical && this.isDispositivoMovel);
}
return false;
};
class_1.prototype.possuiNavegacaoHorizontal = function () {
return this.possuiOpcoes() && !this.menuVertical;
};
class_1.prototype.setEstadoInicialMenu = function () {
this.opcoesMenu = __spreadArrays(this.opcoes);
this.isDispositivoMovel = isDispositivoMovel();
var estadoLocalStorage = this.recuperarEstadoLocalStorage();
this.isPainelFerramentasDispositivoMovelAberto = false;
this.isMenuVerticalFlutuando = estadoLocalStorage !== null ? estadoLocalStorage.flutuando : false;
this.isMenuVerticalAberto = estadoLocalStorage !== null ? estadoLocalStorage.aberto : true;
if (this.isMenuVerticalFlutuando) {
this.isMenuVerticalRecolhido = true;
}
else {
this.isMenuVerticalRecolhido = !this.isMenuVerticalAberto;
}
if (this.isDispositivoMovel) {
this.isPainelFerramentasDispositivoMovelAberto = false;
this.isMenuVerticalFlutuando = true;
this.isMenuVerticalAberto = false;
this.isMenuVerticalRecolhido = true;
}
};
class_1.prototype.marcarAtivoMenuVertical = function (id) {
var _this = this;
this.opcoesMenu = this.opcoesMenu.map(function (opcao) {
opcao.isAtivo = opcao.id === id;
if (opcao.isAtivo) {
_this.validarPermissaoAcessarOpcaoMenu(opcao);
}
if (_this.possuiSubmenus(opcao)) {
opcao.submenus = opcao.submenus.map(function (submenu) {
submenu.isAtivo = submenu.id === id;
if (submenu.isAtivo) {
_this.validarPermissaoAcessarOpcaoMenu(submenu);
}
if (submenu.isAtivo) {
opcao.isAtivo = true;
}
return submenu;
});
opcao.isRecolhido = opcao.submenus.filter(function (submenu) { return submenu.isAtivo; }).length <= 0;
}
return opcao;
});
};
class_1.prototype.marcarAtivoMenuHorizontal = function (id) {
var _this = this;
this.opcoesMenu = this.opcoesMenu.map(function (opcao) {
opcao.isAtivo = opcao.id === id;
if (opcao.isAtivo) {
_this.validarPermissaoAcessarOpcaoMenu(opcao);
}
return opcao;
});
};
class_1.prototype.findOpcaoMenuById = function (identificador, identificadorPai) {
if (identificadorPai === void 0) { identificadorPai = null; }
if (!isNill(identificadorPai)) {
var menuPai = this.opcoesMenu.find(function (opcaoMenu) { return opcaoMenu.id === identificadorPai; });
if (!isNill(menuPai)) {
return menuPai.submenus.find(function (submenu) { return submenu.id === identificador; });
}
}
return this.opcoesMenu.find(function (opcaoMenu) { return opcaoMenu.id === identificador; });
};
class_1.prototype.possuiSubmenus = function (opcao) {
return !isNill(opcao.submenus) && opcao.submenus.length > 0;
};
class_1.prototype.validarPermissaoAcessarOpcaoMenu = function (opcao) {
if ('possuiPermissao' in opcao && !opcao.possuiPermissao) {
throw new Error(MSG_SEM_PERMISSAO_RECURSO);
}
};
class_1.prototype.cancelarTimeoutRecolhimentoMenu = function () {
if (this.timeoutAtivoHandler !== undefined) {
clearTimeout(this.timeoutAtivoHandler);
this.timeoutAtivoHandler = undefined;
}
};
class_1.prototype.alterarEstadoRecolhimentoMenuVertical = function (isMenuVerticalRecolhido) {
var _this = this;
this.timeoutAtivoHandler = window.setTimeout(function () {
_this.isMenuVerticalRecolhido = isMenuVerticalRecolhido;
_this.timeoutAtivoHandler = undefined;
}, TIMEOUT_INTERACOES);
};
class_1.prototype.renderBannerSection = function () {
return (h("header", { role: "banner", class: "banner " + (this.possuiBanner() ? " banner--show banner--" + this.banner.tipo : ''), "aria-hidden": "" + !this.possuiBanner(), "aria-expanded": "" + this.possuiBanner() }, this.possuiBanner() && ([
h("div", { class: "banner__icon" }, h("bth-icone", { icone: this.banner.icone ? this.banner.icone : this.banner.tipo === 'info' ? 'information' : 'alert' })),
h("div", { class: "banner__content" }, h("span", null, this.banner.texto), !isNill(this.banner.link) && this.banner.link.trim() !== '' && (h("a", { href: this.banner.link, target: this.banner.target, title: "Mais informa\u00E7\u00F5es", rel: "noreferrer" }, this.banner.labelLink ? this.banner.labelLink : 'Mais informações')), !isNill(this.banner.button) && (h("button", { onClick: this.onClickBotaoBanner }, this.banner.button.textButton)))
])));
};
class_1.prototype.renderMenuHorizontal = function () {
return (h("section", { class: "menu-horizontal" }, h("div", { class: "menu-horizontal__body" }, h("div", { class: "menu-horizontal__list" }, this.possuiNavegacaoVertical() && (h("div", { class: "menu-horizontal__item" }, h("a", { role: "button", href: "", class: "menu-vertical__toggle " + (!this.isMenuVerticalRecolhido ? 'menu-vertical__toggle--opened' : ''), title: "Alternar exibi\u00E7\u00E3o do menu lateral", onClick: this.onClickBotaoMenu, onMouseLeave: this.onMouseLeaveBotaoMenu, onMouseOver: this.onMouseOverBotaoMenu, "aria-expanded": "" + !this.isMenuVerticalRecolhido, "aria-pressed": "" + !this.isMenuVerticalRecolhido, "aria-label": "Alternar exibi\u00E7\u00E3o do menu lateral" }))), this.possuiSlotMarcaProduto() && (h("section", { class: "menu-horizontal__item" }, h("slot", { name: SLOT.MARCA_PRODUTO }))), h("nav", { id: "menu_horizontal_list", class: "menu-horizontal__item menu-horizontal__item--has-list", "aria-label": "Navega\u00E7\u00E3o do menu horizontal", "aria-hidden": "" + !this.possuiNavegacaoHorizontal() }, this.possuiNavegacaoHorizontal() && (h("ul", { role: "menubar", class: "menu-horizontal__list", "aria-label": "Navega\u00E7\u00E3o do menu horizontal" }, this.possuiNavegacaoHorizontal() && this.opcoesMenu.map(function (opcao, index) { return (h("li", { role: "none" }, h("bth-menu-horizontal-item", { role: "menuitem", id: "menu_horizontal_item_" + index, key: index, identificador: opcao.id, descricao: opcao.descricao, contador: opcao.contador, possuiPermissao: opcao.possuiPermissao, ativo: opcao.isAtivo }))); })))), h("section", { class: "menu-horizontal__item" }, h("nav", { class: "menu-ferramentas" }, !this.isDispositivoMovel && (h("slot", { name: SLOT.FERRAMENTAS })), this.isDispositivoMovel && this.possuiSlotFerramentas() && (h("li", { role: "none" }, h("a", { role: "button", href: "", class: "menu-ferramentas__mobile-toggler " + (this.isPainelFerramentasDispositivoMovelAberto ? 'menu-ferramentas__mobile-toggler--opened' : ''), onClick: this.onTogglePainelFerramentas, title: "Alternar exibi\u00E7\u00E3o painel de ferramentas", "aria-expanded": "" + this.isPainelFerramentasDispositivoMovelAberto, "aria-pressed": "" + this.isPainelFerramentasDispositivoMovelAberto, "aria-label": "Alternar exibi\u00E7\u00E3o painel de ferramentas" }, this.possuiSinalizacaoPendente && !this.isPainelFerramentasDispositivoMovelAberto && (h("span", { class: "badge badge-danger badge-danger--notificacao-small" })))))))), this.isDispositivoMovel && (h("nav", { class: "menu-ferramentas__mobile\n " + (this.isPainelFerramentasDispositivoMovelAberto ? 'menu-ferramentas__mobile--show' : '') + "\n " + (this.possuiBanner() ? 'menu-ferramentas__mobile--banner' : '') }, h("slot", { name: SLOT.FERRAMENTAS }))))));
};
class_1.prototype.renderMenuVertical = function () {
var _this = this;
if (!this.possuiNavegacaoVertical()) {
return;
}
return (h("aside", { class: "menu-vertical " + (this.isMenuVerticalFlutuando ? ' menu-vertical--floating' : '') + "\n " + (this.isMenuVerticalRecolhido ? ' menu-vertical--collapsed' : '') + "\n " + (!this.isMenuVerticalFlutuando && !this.isMenuVerticalAberto && !this.isMenuVerticalRecolhido ? ' menu-vertical--collapsed menu-vertical--collapsed-hover' : '') + "\n ", onMouseOver: this.onMouseOverMenuVertical, onMouseLeave: this.onMouseLeaveMenuVertical }, h("nav", { class: "menu-vertical__body", "aria-label": "Op\u00E7\u00F5es de navega\u00E7\u00E3o do menu vertical" }, h("ul", { role: "menubar", class: "menu-vertical__list" }, this.opcoesMenu.map(function (opcao, index) { return (h("li", { role: "none" }, h("bth-menu-vertical-item", { role: "menuitem", id: "menu_vertical_item_" + index, key: index, identificador: opcao.id, descricao: opcao.descricao, icone: opcao.icone, contador: opcao.contador, possuiPermissao: opcao.possuiPermissao, possuiBadgeIcone: opcao.possuiBadgeIcone, ativo: opcao.isAtivo, recolhido: opcao.isRecolhido, menuLateralRecolhido: _this.isMenuVerticalRecolhido, submenus: opcao.submenus }))); }))), h("div", { class: "menu-vertical__footer " + (this.isDispositivoMovel ? '' : 'menu-vertical__footer--show') }, h("ul", { class: "menu-vertical__list" }, h("li", { class: "menu-vertical__item menu-vertical__item--floating" }, h("a", { href: "", onClick: this.onClickBotaoFixar }, h("bth-icone", { icone: "pin" }), h("span", null, this.isMenuVerticalFlutuando ? 'Fixar' : 'Desafixar')))))));
};
class_1.prototype.renderAppContainer = function () {
return (h("main", { class: "app-container" }, this.possuiSlotContexto() && !this.isDispositivoMovel && (h("slot", { name: SLOT.CONTEXTO })), h("slot", { name: SLOT.APLICACAO })));
};
class_1.prototype.render = function () {
return (h(Host, null, h("div", { class: "app" }, this.renderBannerSection(), this.renderMenuHorizontal(), this.renderMenuVertical(), this.renderAppContainer())));
};
Object.defineProperty(class_1.prototype, "el", {
get: function () { return getElement(this); },
enumerable: false,
configurable: true
});
Object.defineProperty(class_1, "watchers", {
get: function () {
return {
"opcoes": ["watchOpcoesChanged"],
"banner": ["onChangeBanner"],
"menuBgColor": ["onChangemenuBgColor"]
};
},
enumerable: false,
configurable: true
});
return class_1;
}());
App.style = appCss;
var avatarCss = "*,*:after,*:before{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1.5}*{font-family:var(--bth-app-font-family-primary)}a:focus{outline:1px dotted var(--bth-app-gray-dark-30)}::-webkit-scrollbar{-webkit-appearance:none;height:6px;width:6px}::-webkit-scrollbar-track{background:var(--bth-app-gray-light-30)}::-webkit-scrollbar-corner{background:var(--bth-app-gray-light-40)}::-webkit-scrollbar-thumb{background-color:var(--bth-app-gray);border-radius:1px}::-webkit-scrollbar-thumb:hover{background-color:rgba(255, 255, 255, 0.3)}.avatar__container{position:relative}.avatar__container .subicone{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;padding:0px 2px;color:var(--bth-app-gray);background:var(--bth-app-gray-light-40);border-radius:50%;font-size:16px;text-align:center;line-height:1.3 !important}.avatar__body{display:-ms-flexbox;display:flex;position:relative;overflow:hidden;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;-ms-flex-pack:center;justify-content:center;height:66px;width:66px;font-size:30px;line-height:60px;text-align:center}.avatar--imagem{background-color:transparent;vertical-align:middle;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.avatar-square{border-radius:15%}.avatar-large{height:94px;width:94px;font-size:40px}.avatar-medium{height:48px;width:48px;font-size:22px}.avatar-small{height:28px;width:28px;font-size:14px}.avatar-extra-small{height:24px;width:24px;font-size:14px}.bg-pink{background-color:var(--bth-app-pink-light-20)}.bg-purple{background-color:var(--bth-app-purple-light-20)}.bg-green{background-color:var(--bth-app-green-light-20)}.bg-blue{background-color:var(--bth-app-blue-light-20)}.bg-aqua{background-color:var(--bth-app-aqua-light-20)}.bg-orange{background-color:var(--bth-app-orange-light-20)}.bg-yellow{background-color:var(--bth-app-yellow-light-20)}.tx-pink{color:var(--bth-app-pink-dark-30)}.tx-purple{color:var(--bth-app-purple-dark-30)}.tx-green{color:var(--bth-app-green-dark-30)}.tx-blue{color:var(--bth-app-blue-dark-30)}.tx-aqua{color:var(--bth-app-aqua-dark-30)}.tx-orange{color:var(--bth-app-orange-dark-30)}.tx-yellow{color:var(--bth-app-yellow-dark-30)}";
var BG_COLORS = [
'aqua',
'blue',
'green',
'pink',
'purple',
'orange',
'yellow'
];
var Avatar = /** @class */ (function () {
function Avatar(hostRef) {
var _this = this;
registerInstance(this, hostRef);
this.imageLoadError = createEvent(this, "imageLoadError", 7);
/**
* Define o "title" do subícone
*/
this.subIconeTitle = '';
/**
* Define o tamanho conforme dimensões pre-definidas para o avatar.
*
* Opções disponíveis: menor (24x24), pequeno (28x28), medio (48x48) e grande (94x94)
*/
this.tamanho = 'medio';
/**
* Define se o avatar terá suas bordas no formato quadrado.
*
* Por padrão é redondo
*/