@betha-plataforma/estrutura-componentes
Version:
Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.
1 lines • 7.49 kB
JavaScript
import{r as t,h as o,H as e,g as i}from"./p-1ea2957a.js";import{P as a,i as s}from"./p-44163222.js";const r=class{constructor(o){t(this,o),this.tracker=new a(t=>{this.isBuscandoItens=t}),this.itens=[],this.itensFiltrados=[],this.possuiSlotSemResultadoDeclarado=!1,this.buscarItens=async()=>{if(s(this.buscar))return;const t=this.buscar().then(t=>{this.itens=[...t],this.itensFiltrados=[...t]});this.tracker.addPromise(t)},this.onSelecionar=(t,o)=>{t.preventDefault(),this.selecionar(o)},this.onInputSearch=t=>{this.termoPesquisa=t.target.value,this.itensFiltrados=this.itens.filter(t=>t.descricao&&t.descricao.toUpperCase().includes(this.termoPesquisa.toUpperCase()))},this.possuiImagemAvatar=t=>void 0!==t.imagemAvatar,this.possuiIcone=t=>void 0!==t.icone,this.getTipoEmptyState=()=>this.possuiSlotSemResultadoDeclarado?null:void 0!==this.termoPesquisa&&this.termoPesquisa.length>0?{registrosPesquisa:!0}:{registros:!0},this.isElementLink=t=>"A"===t.tagName,this.isElementInput=t=>"INPUT"===t.tagName}connectedCallback(){this.configurarPresencaSemResultado(),this.buscarItens()}componentDidRender(){this.isBuscandoItens||this.setInputFocus()}handleKeyDown(t){"ArrowUp"===t.key?this.handleArrowUp():"ArrowDown"===t.key&&this.handleArrowDown(t)}async watchBuscar(){this.buscarItens()}async setInputFocus(){const t=this.el.shadowRoot.querySelector("input");s(t)||t.focus()}configurarPresencaSemResultado(){this.possuiSlotSemResultadoDeclarado=null!==this.el.querySelector('[slot="sem_resultado"]')}handleArrowDown(t){const o=this.el.shadowRoot.activeElement;if(this.isElementInput(o)){t.preventDefault();const o=this.el.shadowRoot.querySelector("ul");s(o.firstElementChild)||this.setFocusListItem(o.firstElementChild)}if(this.isElementLink(o)){if(s(o.parentNode))return;this.setFocusListItem(o.parentNode.nextSibling)}}handleArrowUp(){const t=this.el.shadowRoot.activeElement;if("1"===t.getAttribute("tabindex")&&this.el.shadowRoot.querySelector("input").focus(),this.isElementLink(t)){if(s(t.parentNode))return;this.setFocusListItem(t.parentNode.previousSibling)}}setFocusListItem(t){if(s(t))return;const o=t.querySelector("a");s(o)||o.focus()}render(){var t;return o(e,null,o("section",{class:"selecao-contexto"},!this.isBuscandoItens&&o("slot",{name:"cabecalho"}),!this.isBuscandoItens&&o("div",{class:"selecao-contexto__search"},o("input",{type:"text",class:"form-control",placeholder:null!==(t=this.placeholderPesquisa)&&void 0!==t?t:"Digite os termos para pesquisar",tabindex:"1",value:this.termoPesquisa,onInput:this.onInputSearch,disabled:this.isBuscandoItens,"aria-label":"Digite os termos para pesquisar"})),o("bth-empty-state",Object.assign({},this.getTipoEmptyState(),{show:!this.isBuscandoItens&&this.itensFiltrados.length<=0}),this.possuiSlotSemResultadoDeclarado&&o("slot",{name:"sem_resultado"})),o("div",{class:"selecao-contexto__body"},this.isBuscandoItens&&o("div",{class:"selecao-contexto__body--loader"},o("bth-loader",null)),!this.isBuscandoItens&&o("ul",{id:"lista-contexto"},this.itensFiltrados.map((t,e)=>o("li",{key:t.id,onClick:o=>this.onSelecionar(o,t)},o("a",{href:"",tabindex:e+1},this.possuiImagemAvatar(t)&&o("bth-avatar",{src:t.imagemAvatar,title:t.descricao,subIcone:t.iconeStatus,subIconeTitle:t.iconeStatusTitle}),this.possuiIcone(t)&&o("bth-avatar",{icone:t.icone,title:t.descricao,subIcone:t.iconeStatus,subIconeTitle:t.iconeStatusTitle}),!this.possuiImagemAvatar(t)&&!this.possuiIcone(t)&&o("bth-avatar",{iniciais:t.descricao,title:t.descricao,subIcone:t.iconeStatus,subIconeTitle:t.iconeStatusTitle}),o("section",null,o("h4",{title:t.descricao},t.descricao),o("p",{title:t.complemento},t.complemento))))))),!this.isBuscandoItens&&o("footer",null,o("slot",{name:"rodape"}))))}get el(){return i(this)}static get watchers(){return{buscar:["watchBuscar"]}}};r.style="*,*: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)}.selecao-contexto{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto}.selecao-contexto ::slotted(h3){margin:10px 0;font-size:20px;font-weight:500}.selecao-contexto__search{display:-ms-inline-flexbox !important;display:inline-flex !important;position:relative;width:100%;margin-bottom:10px}.selecao-contexto__search input{border:1px solid silver;border-radius:2px;-webkit-box-shadow:none;box-shadow:none;color:var(--bth-app-gray-dark-30);font-size:13px;width:100%;height:34px;padding:6px 12px;background-color:var(--bth-app-gray-light-40);display:block;margin:0}.selecao-contexto__search input:focus{border-color:var(--bth-app-blue);-webkit-box-shadow:none;box-shadow:none;outline:none}.selecao-contexto__search input[disabled]{background-color:var(--bth-app-gray-light-20);border-color:var(--bth-app-gray);color:var(--bth-app-gray-dark-10);cursor:not-allowed}.selecao-contexto__body{max-height:480px;overflow-y:auto}.selecao-contexto__body--loader{height:200px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.selecao-contexto__body ul li{width:100%;outline:none;position:relative}.selecao-contexto__body ul li:not(:last-child){margin-bottom:8px}.selecao-contexto__body ul li bth-icone{position:absolute;top:42px;left:42px;width:20px;height:20px;padding:0px 2px;background:var(--bth-app-gray-light-40);border-radius:50%;font-size:16px;text-align:center;line-height:1.3 !important;z-index:1}.selecao-contexto__body ul li a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;cursor:pointer;border-radius:2px;background-color:var(--bth-app-gray-light-30);width:100%;padding:12px;text-decoration:none;color:var(--bth-app-gray-dark-30);outline:none}.selecao-contexto__body ul li a section{padding:0 12px}.selecao-contexto__body ul li a section h4{font-size:18px;font-weight:500;line-height:1.1}.selecao-contexto__body ul li a section p{margin-top:6px;color:var(--bth-app-gray-dark-20);font-size:12px;line-height:1.5}.selecao-contexto__body ul li a:focus{-webkit-box-shadow:inset 0 0 0 1px var(--bth-app-blue);box-shadow:inset 0 0 0 1px var(--bth-app-blue)}.selecao-contexto__body ul li a:hover{background-color:var(--bth-app-gray-light-10)}.selecao-contexto__body ul li span{padding:0 12px;font-size:16px}.selecao-contexto ::-webkit-scrollbar{width:12px !important;background-color:transparent !important}.selecao-contexto ::-webkit-scrollbar-track,.selecao-contexto ::-webkit-scrollbar-thumb{background-clip:content-box !important}.selecao-contexto ::-webkit-scrollbar-track{background:unset !important;border-right:6px solid var(--bth-app-gray-light-30) !important}.selecao-contexto ::-webkit-scrollbar-thumb{border-left:6px solid rgba(255, 255, 255, 0) !important;border-radius:0 !important}@media (min-width: 576px){.selecao-contexto{width:100%}}@media (min-width: 768px){.selecao-contexto{width:80%}}@media (min-width: 992px){.selecao-contexto{width:55%}}@media (min-width: 1200px){.selecao-contexto{width:45%}}";export{r as bth_selecao_contexto}