@betha-plataforma/estrutura-componentes
Version:
Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.
592 lines (583 loc) • 568 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-95ba294a.js');
const promiseTracker = require('./promise-tracker-9b3bca78.js');
const 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}";
const Ajuda = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
getCentralAjudaHome() {
if (!promiseTracker.isNill(this.centralAjudaHome)) {
return this.centralAjudaHome;
}
if ('___bth' in window) {
return window['___bth'].envs.suite['central-de-ajuda'].v1['host-redirecionamento'];
}
return null;
}
render() {
return (index.h("bth-menu-ferramenta", { descricao: "Ajuda", tituloPainelLateral: "Ajuda" }, index.h("bth-menu-ferramenta-icone", { slot: "menu_item_desktop", icone: "help-circle" }), index.h("bth-menu-ferramenta-icone", { slot: "menu_item_mobile", icone: "help-circle", mobile: true }), index.h("span", { slot: "menu_descricao_mobile", class: "descricao-mobile" }, "Ajuda"), index.h("div", { slot: "conteudo_painel_lateral", class: "empty-ajuda" }, index.h("div", { class: "empty-ajuda__img" }), index.h("h4", null, "Est\u00E1 com d\u00FAvida? Acesse a ", index.h("a", { href: this.getCentralAjudaHome(), target: "_blank", rel: "noreferrer" }, "Central de Ajuda ", index.h("bth-icone", { icone: "open-in-new" }))))));
}
};
Ajuda.style = ajudaCss;
const LOCAL_STORAGE_KEY = 'bth-menu:state';
const PERMISSAO_PADRAO = true;
const SLOT = {
MARCA_PRODUTO: 'menu_marca_produto',
FERRAMENTAS: 'menu_ferramentas',
APLICACAO: 'container_aplicacao',
CONTEXTO: 'container_contexto'
};
const 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}}";
const App = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.bannerAlterado = index.createEvent(this, "bannerAlterado", 7);
this.opcaoMenuSelecionada = index.createEvent(this, "opcaoMenuSelecionada", 7);
this.botaoBannerAcionado = index.createEvent(this, "botaoBannerAcionado", 7);
this.ferramentasSinalizacaoPendente = {};
this.isMenuVerticalFlutuando = false;
this.isMenuVerticalAberto = true;
this.isDispositivoMovel = false;
this.isPainelFerramentasDispositivoMovelAberto = false;
this.opcoesHeaderInternas = [];
this.possuiSinalizacaoPendente = false;
/**
* Opções de navegação do menu
*/
this.opcoes = [];
/**
* Opções de navegação a serem exibidas no header, ao lado da marca.
* Funciona de forma independente da navegação principal, e somente se o menu for vertical.
*/
this.opcoesHeader = [];
/**
* 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 = () => {
try {
const value = {
aberto: this.isMenuVerticalAberto,
flutuando: this.isMenuVerticalFlutuando
};
const 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 = () => {
try {
const 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 = () => {
this.cancelarTimeoutRecolhimentoMenu();
if (this.isDispositivoMovel) {
return;
}
if (this.isMenuVerticalAberto) {
return;
}
this.alterarEstadoRecolhimentoMenuVertical(false);
};
this.onMouseLeaveMenuVertical = () => {
if (this.isDispositivoMovel) {
return;
}
if (this.isMenuVerticalAberto && !this.isMenuVerticalFlutuando) {
return;
}
this.cancelarTimeoutRecolhimentoMenu();
this.alterarEstadoRecolhimentoMenuVertical(true);
};
this.onMouseOverBotaoMenu = () => {
this.cancelarTimeoutRecolhimentoMenu();
};
this.onMouseLeaveBotaoMenu = () => {
if (this.isMenuVerticalRecolhido) {
return;
}
if (this.isMenuVerticalAberto && !this.isMenuVerticalFlutuando) {
return;
}
this.cancelarTimeoutRecolhimentoMenu();
this.alterarEstadoRecolhimentoMenuVertical(true);
};
this.onTogglePainelFerramentas = (event) => {
event.preventDefault();
this.isPainelFerramentasDispositivoMovelAberto = !this.isPainelFerramentasDispositivoMovelAberto;
if (this.isDispositivoMovel && this.isPainelFerramentasDispositivoMovelAberto) {
this.isMenuVerticalAberto = false;
}
this.salvarEstadoLocalStorage();
};
this.onClickBotaoFixar = (event) => {
event.preventDefault();
this.isMenuVerticalFlutuando = !this.isMenuVerticalFlutuando;
this.isMenuVerticalRecolhido = false;
this.isMenuVerticalAberto = true;
this.salvarEstadoLocalStorage();
};
this.onClickBotaoMenu = (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 = (event) => {
event.preventDefault();
this.botaoBannerAcionado.emit();
};
}
connectedCallback() {
this.setCorBackgroundCustomizado();
this.setEstadoInicialMenu();
}
watchOpcoesChanged() {
// Reseta estado inicial do menu toda vez que opções for alterado, evita reabertura de maneira inconsistente
this.setEstadoInicialMenu();
}
onWindowResize() {
this.setEstadoInicialMenu();
if (!this.isDispositivoMovel) {
this.isPainelFerramentasDispositivoMovelAberto = false;
}
}
onConteudoSinalizado(event) {
this.ferramentasSinalizacaoPendente[event.detail.origem] = event.detail.possui;
this.possuiSinalizacaoPendente = this.possuiFerramentasSinalizadas();
}
onPainelLateralShow(event) {
if (!this.isPainelFerramentasDispositivoMovelAberto) {
return;
}
if (event.detail.fecharSobrepostos) {
this.isPainelFerramentasDispositivoMovelAberto = false;
}
}
onMenuHorizontalSelecionado(event) {
const identificador = event.detail.identificador;
let opcao;
if (this.menuVertical) {
opcao = this.opcoesHeaderInternas.find(opt => opt.id === identificador);
}
else {
opcao = this.findOpcaoMenuById(identificador);
}
this.dispararEventoOpcaoSelecionada(opcao);
}
onMenuVerticalSelecionado(event) {
const opcao = this.findOpcaoMenuById(event.detail.identificador, event.detail.identificadorPai);
if (this.possuiSubmenus(opcao)) {
this.opcoesMenu = this.opcoesMenu.map(opcaoMenu => {
if (opcao.id === opcaoMenu.id) {
opcaoMenu.isRecolhido = !opcaoMenu.isRecolhido;
}
return opcaoMenu;
});
}
else {
if (this.isDispositivoMovel) {
this.isMenuVerticalRecolhido = !this.isMenuVerticalRecolhido;
}
this.dispararEventoOpcaoSelecionada(opcao);
}
}
dispararEventoOpcaoSelecionada(opcao) {
const eventPayload = {
id: opcao.id,
descricao: opcao.descricao,
rota: opcao.rota,
contador: opcao.contador
};
this.opcaoMenuSelecionada.emit(eventPayload);
}
onChangeBanner() {
let event = {
possui: this.possuiBanner()
};
this.bannerAlterado.emit(event);
}
onChangemenuBgColor() {
this.setCorBackgroundCustomizado();
}
/**
* Define o estado de ativo para o menu do parâmetro
*
* @param identificador Identificador do menu
*/
async setMenuAtivo(identificador) {
const isHeader = this.opcoesHeader.some(opt => opt.id === identificador);
if (isHeader) {
this.marcarAtivoMenuHeader(identificador);
}
else {
if (this.possuiNavegacaoVertical()) {
this.marcarAtivoMenuVertical(identificador);
}
if (this.possuiNavegacaoHorizontal()) {
this.marcarAtivoMenuHorizontal(identificador);
}
}
}
/**
* 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
*/
async setBadgeIcone(identificador, ativo) {
if (this.possuiNavegacaoVertical()) {
this.opcoesMenu = this.opcoesMenu.map(opcao => {
opcao.possuiBadgeIcone = opcao.id === identificador ? ativo : false;
if (opcao.submenus !== undefined && opcao.submenus.length > 0) {
opcao.submenus = opcao.submenus.map(submenu => {
submenu.possuiBadgeIcone = submenu.id === identificador ? ativo : false;
return submenu;
});
}
return opcao;
});
}
}
/**
* Define o valor do contador de um item do menu
*
* @param identificador Identificador do item do menu
* @param valor Valor do contador
*/
async setContadorMenu(identificador, valor) {
if (this.possuiNavegacaoVertical()) {
this.opcoesMenu = this.opcoesMenu.map(opcao => {
opcao.contador = opcao.id === identificador ? valor : opcao.contador;
if (opcao.submenus !== undefined && opcao.submenus.length > 0) {
opcao.submenus = opcao.submenus.map(submenu => {
submenu.contador = submenu.id === identificador ? valor : submenu.contador;
return submenu;
});
}
return opcao;
});
}
if (this.possuiNavegacaoHorizontal()) {
this.opcoesMenu = this.opcoesMenu.map(opcao => {
opcao.contador = opcao.id === identificador ? valor : opcao.contador;
return opcao;
});
}
}
setCorBackgroundCustomizado() {
if (this.menuBgColor === undefined) {
return;
}
this.el.style.setProperty('--bth-app-menu-bg-color', this.menuBgColor.toString());
}
possuiSlotMarcaProduto() {
return this.el.querySelector(`[slot="${SLOT.MARCA_PRODUTO}"]`) !== null;
}
possuiSlotFerramentas() {
return this.el.querySelector(`[slot="${SLOT.FERRAMENTAS}"]`) !== null;
}
possuiSlotContexto() {
return this.el.querySelector(`[slot="${SLOT.CONTEXTO}"]`) !== null;
}
possuiFerramentasSinalizadas() {
const pending = Object.keys(this.ferramentasSinalizacaoPendente)
.filter(key => this.ferramentasSinalizacaoPendente[key]);
return pending.length > 0 || false;
}
possuiOpcoes() {
return !promiseTracker.isNill(this.opcoesMenu) && this.opcoesMenu.length > 0;
}
possuiOpcoesHeader() {
return !promiseTracker.isNill(this.opcoesHeaderInternas) && this.opcoesHeaderInternas.length > 0;
}
possuiBanner() {
return !promiseTracker.isNill(this.banner);
}
possuiNavegacaoVertical() {
if (this.possuiOpcoes()) {
return this.menuVertical || (!this.menuVertical && this.isDispositivoMovel);
}
return false;
}
possuiNavegacaoHorizontal() {
return this.possuiOpcoes() && !this.menuVertical;
}
setEstadoInicialMenu() {
this.opcoesMenu = this.validarOpcoes([...this.opcoes]);
this.opcoesHeaderInternas = this.validarOpcoes([...this.opcoesHeader]);
this.isDispositivoMovel = promiseTracker.isDispositivoMovel();
const 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;
}
}
marcarAtivoMenuVertical(id) {
this.opcoesMenu = this.opcoesMenu.map(opcao => {
opcao.isAtivo = opcao.id === id;
if (opcao.isAtivo) {
this.validarPermissaoAcessarOpcaoMenu(opcao);
}
if (this.possuiSubmenus(opcao)) {
opcao.submenus = opcao.submenus.map(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(submenu => submenu.isAtivo).length <= 0;
}
return opcao;
});
}
marcarAtivoMenuHorizontal(id) {
this.opcoesMenu = this.opcoesMenu.map(opcao => {
opcao.isAtivo = opcao.id === id;
if (opcao.isAtivo) {
this.validarPermissaoAcessarOpcaoMenu(opcao);
}
return opcao;
});
}
marcarAtivoMenuHeader(id) {
this.opcoesHeaderInternas = this.opcoesHeaderInternas.map(opcao => {
opcao.isAtivo = opcao.id === id;
if (opcao.isAtivo) {
this.validarPermissaoAcessarOpcaoMenu(opcao);
}
return opcao;
});
}
findOpcaoMenuById(identificador, identificadorPai = null) {
if (!promiseTracker.isNill(identificadorPai)) {
const menuPai = this.opcoesMenu.find(opcaoMenu => opcaoMenu.id === identificadorPai);
if (!promiseTracker.isNill(menuPai)) {
return menuPai.submenus.find(submenu => submenu.id === identificador);
}
}
return this.opcoesMenu.find(opcaoMenu => opcaoMenu.id === identificador);
}
possuiSubmenus(opcao) {
return !promiseTracker.isNill(opcao.submenus) && opcao.submenus.length > 0;
}
validarPermissaoAcessarOpcaoMenu(opcao) {
if ('possuiPermissao' in opcao && !opcao.possuiPermissao) {
throw new Error(promiseTracker.MSG_SEM_PERMISSAO_RECURSO);
}
}
cancelarTimeoutRecolhimentoMenu() {
if (this.timeoutAtivoHandler !== undefined) {
clearTimeout(this.timeoutAtivoHandler);
this.timeoutAtivoHandler = undefined;
}
}
alterarEstadoRecolhimentoMenuVertical(isMenuVerticalRecolhido) {
this.timeoutAtivoHandler = window.setTimeout(() => {
this.isMenuVerticalRecolhido = isMenuVerticalRecolhido;
this.timeoutAtivoHandler = undefined;
}, promiseTracker.TIMEOUT_INTERACOES);
}
/**
* Valida se no máximo um item está ativo e processa o array para o estado interno.
* Se múltiplos itens forem passados como 'ativo', TODOS serão desativados como medida de segurança,
* e um alerta será exibido no console.
* @param opcoes O array de opções de menu a ser processado.
* @returns Um novo array de opções com no máximo um item ativo.
*/
validarOpcoes(opcoes) {
if (!opcoes || opcoes.length === 0) {
return [];
}
if (opcoes.filter(opt => opt.isAtivo === true).length > 1) {
console.warn('[bth-app] Múltiplos itens de menu recebidos como \'ativo\'. Nenhum item foi selecionado.');
return opcoes.map(opt => (Object.assign(Object.assign({}, opt), { isAtivo: false })));
}
return opcoes;
}
renderBannerSection() {
return (index.h("header", { role: "banner", class: `banner ${this.possuiBanner() ? ` banner--show banner--${this.banner.tipo}` : ''}`, "aria-hidden": `${!this.possuiBanner()}`, "aria-expanded": `${this.possuiBanner()}` }, this.possuiBanner() && ([
index.h("div", { class: "banner__icon" }, index.h("bth-icone", { icone: this.banner.icone ? this.banner.icone : this.banner.tipo === 'info' ? 'information' : 'alert' })),
index.h("div", { class: "banner__content" }, index.h("span", null, this.banner.texto), !promiseTracker.isNill(this.banner.link) && this.banner.link.trim() !== '' && (index.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')), !promiseTracker.isNill(this.banner.button) && (index.h("button", { onClick: this.onClickBotaoBanner }, this.banner.button.textButton)))
])));
}
renderMenuHorizontal() {
return (index.h("section", { class: "menu-horizontal" }, index.h("div", { class: "menu-horizontal__body" }, index.h("div", { class: "menu-horizontal__list" }, this.possuiNavegacaoVertical() && (index.h("div", { class: "menu-horizontal__item" }, index.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() && (index.h("section", { class: "menu-horizontal__item" }, index.h("slot", { name: SLOT.MARCA_PRODUTO }))), this.possuiOpcoesHeader() && this.menuVertical && (index.h("nav", { id: "menu_header", class: "menu-horizontal__item menu-horizontal__item--has-list", "aria-label": "Navega\u00E7\u00E3o do header" }, index.h("ul", { role: "menubar", class: "menu-horizontal__list", "aria-label": "Navega\u00E7\u00E3o do header" }, this.opcoesHeaderInternas.map((opcao, index$1) => (index.h("li", { role: "none", key: `header_${index$1}` }, index.h("bth-menu-horizontal-item", { role: "menuitem", id: `menu_header_item_${index$1}`, identificador: opcao.id, descricao: opcao.descricao, contador: opcao.contador, possuiPermissao: opcao.possuiPermissao, ativo: opcao.isAtivo }))))))), index.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() && (index.h("ul", { role: "menubar", class: "menu-horizontal__list", "aria-label": "Navega\u00E7\u00E3o do menu horizontal" }, this.possuiNavegacaoHorizontal() && this.opcoesMenu.map((opcao, index$1) => (index.h("li", { role: "none" }, index.h("bth-menu-horizontal-item", { role: "menuitem", id: `menu_horizontal_item_${index$1}`, key: index$1, identificador: opcao.id, descricao: opcao.descricao, contador: opcao.contador, possuiPermissao: opcao.possuiPermissao, ativo: opcao.isAtivo }))))))), index.h("section", { class: "menu-horizontal__item" }, index.h("nav", { class: "menu-ferramentas" }, !this.isDispositivoMovel && (index.h("slot", { name: SLOT.FERRAMENTAS })), this.isDispositivoMovel && this.possuiSlotFerramentas() && (index.h("li", { role: "none" }, index.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 && (index.h("span", { class: "badge badge-danger badge-danger--notificacao-small" })))))))), this.isDispositivoMovel && (index.h("nav", { class: `menu-ferramentas__mobile
${this.isPainelFerramentasDispositivoMovelAberto ? 'menu-ferramentas__mobile--show' : ''}
${this.possuiBanner() ? 'menu-ferramentas__mobile--banner' : ''}` }, index.h("slot", { name: SLOT.FERRAMENTAS }))))));
}
renderMenuVertical() {
if (!this.possuiNavegacaoVertical()) {
return;
}
return (index.h("aside", { class: `menu-vertical ${this.isMenuVerticalFlutuando ? ' menu-vertical--floating' : ''}
${this.isMenuVerticalRecolhido ? ' menu-vertical--collapsed' : ''}
${!this.isMenuVerticalFlutuando && !this.isMenuVerticalAberto && !this.isMenuVerticalRecolhido ? ' menu-vertical--collapsed menu-vertical--collapsed-hover' : ''}
`, onMouseOver: this.onMouseOverMenuVertical, onMouseLeave: this.onMouseLeaveMenuVertical }, index.h("nav", { class: "menu-vertical__body", "aria-label": "Op\u00E7\u00F5es de navega\u00E7\u00E3o do menu vertical" }, index.h("ul", { role: "menubar", class: "menu-vertical__list" }, this.opcoesMenu.map((opcao, index$1) => (index.h("li", { role: "none" }, index.h("bth-menu-vertical-item", { role: "menuitem", id: `menu_vertical_item_${index$1}`, key: index$1, 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 })))))), index.h("div", { class: `menu-vertical__footer ${this.isDispositivoMovel ? '' : 'menu-vertical__footer--show'}` }, index.h("ul", { class: "menu-vertical__list" }, index.h("li", { class: "menu-vertical__item menu-vertical__item--floating" }, index.h("a", { href: "", onClick: this.onClickBotaoFixar }, index.h("bth-icone", { icone: "pin" }), index.h("span", null, this.isMenuVerticalFlutuando ? 'Fixar' : 'Desafixar')))))));
}
renderAppContainer() {
return (index.h("main", { class: "app-container" }, this.possuiSlotContexto() && !this.isDispositivoMovel && (index.h("slot", { name: SLOT.CONTEXTO })), index.h("slot", { name: SLOT.APLICACAO })));
}
render() {
return (index.h(index.Host, null, index.h("div", { class: "app" }, this.renderBannerSection(), this.renderMenuHorizontal(), this.renderMenuVertical(), this.renderAppContainer())));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"opcoes": ["watchOpcoesChanged"],
"opcoesHeader": ["watchOpcoesChanged"],
"banner": ["onChangeBanner"],
"menuBgColor": ["onChangemenuBgColor"]
}; }
};
App.style = appCss;
const 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)}";
const BG_COLORS = [
'aqua',
'blue',
'green',
'pink',
'purple',
'orange',
'yellow'
];
const Avatar = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.imageLoadError = index.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
*/
this.quadrado = false;
/**
* Define se o avatar possui borda
*/
this.borda = false;
/**
* Define o tamanho da borda
*/
this.bordaTamanho = '1px';
/**
* Define o raio da borda do avatar. Caso informado, sobrescreve o atributo utilitario 'quadrado'.
*/
this.bordaRaio = '50%';
/**
* Define a cor da borda
*/
this.bordaCor = 'white';
this.onImageLoadError = (event) => {
this.imageLoadError.emit(event);
};
}
getSiglaIniciais(texto) {
var _a;
if (texto.length <= 2) {
return texto.toUpperCase();
}
const palavras = texto.replace(/[^\w\s]/gi, '').split(' ');
const iniciais = palavras.filter(palavra => Boolean(palavra))
.map(palavra => palavra.substr(0, 1));
return iniciais[0].concat((_a = iniciais[1]) !== null && _a !== void 0 ? _a : '').toUpperCase();
}
getColorClass() {
if (this.icone !== undefined) {
return 'avatar-icone bg-blue tx-blue';
}
if (this.iniciais !== undefined) {
let color = this.getCorInicias();
return `bg-${color} tx-${color}`;
}
return '';
}
getSizeClass() {
if (promiseTracker.isNill(this.tamanho) || !promiseTracker.isNill(this.dimensao)) {
return '';
}
if (this.tamanho === 'menor') {
return 'avatar-extra-small';
}
if (this.tamanho === 'pequeno') {
return 'avatar-small';
}
if (this.tamanho === 'medio') {
return 'avatar-medium';
}
if (this.tamanho === 'grande') {
return 'avatar-large';
}
return '';
}
getRoundingClass() {
if (this.quadrado) {
return 'avatar-square';
}
return '';
}
getCorInicias() {
return BG_COLORS[this.iniciais.charCodeAt(0) % BG_COLORS.length];
}
getContainerCustomStyles() {
const containerStyles = {};
if (!promiseTracker.isNill(this.dimensao)) {
containerStyles.width = `${this.dimensao}px`;
containerStyles.height = `${this.dimensao}px`;
containerStyles.fontSize = `${this.dimensao / 2}px`;
}
return containerStyles;
}
getImagemCustomStyles() {
const imagemStyles = {};
if (!promiseTracker.isNill(this.borda)) {
imagemStyles.border = `${this.bordaTamanho