UNPKG

@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 10.2 kB
var __awaiter=this&&this.__awaiter||function(t,e,o,r){function i(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,n){function a(t){try{c(r.next(t))}catch(e){n(e)}}function s(t){try{c(r["throw"](t))}catch(e){n(e)}}function c(t){t.done?o(t.value):i(t.value).then(a,s)}c((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},r,i,n,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return c([t,e])}}function c(a){if(r)throw new TypeError("Generator is already executing.");while(o)try{if(r=1,i&&(n=a[0]&2?i["return"]:a[0]?i["throw"]||((n=i["return"])&&n.call(i),0):i.next)&&!(n=n.call(i,a[1])).done)return n;if(i=0,n)a=[a[0]&2,n.value];switch(a[0]){case 0:case 1:n=a;break;case 4:o.label++;return{value:a[1],done:false};case 5:o.label++;i=a[1];a=[0];continue;case 7:a=o.ops.pop();o.trys.pop();continue;default:if(!(n=o.trys,n=n.length>0&&n[n.length-1])&&(a[0]===6||a[0]===2)){o=0;continue}if(a[0]===3&&(!n||a[1]>n[0]&&a[1]<n[3])){o.label=a[1];break}if(a[0]===6&&o.label<n[1]){o.label=n[1];n=a;break}if(n&&o.label<n[2]){o.label=n[2];o.ops.push(a);break}if(n[2])o.ops.pop();o.trys.pop();continue}a=e.call(t,o)}catch(s){a=[6,s];i=0}finally{r=n=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArrays=this&&this.__spreadArrays||function(){for(var t=0,e=0,o=arguments.length;e<o;e++)t+=arguments[e].length;for(var r=Array(t),i=0,e=0;e<o;e++)for(var n=arguments[e],a=0,s=n.length;a<s;a++,i++)r[i]=n[a];return r};System.register(["./p-19f6bf1a.system.js","./p-a61e6c96.system.js"],(function(t){"use strict";var e,o,r,i,n,a;return{setters:[function(t){e=t.r;o=t.h;r=t.H;i=t.g},function(t){n=t.P;a=t.i}],execute:function(){var s="*,*: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%}}";var c=t("bth_selecao_contexto",function(){function t(t){var o=this;e(this,t);this.tracker=new n((function(t){o.isBuscandoItens=t}));this.itens=[];this.itensFiltrados=[];this.possuiSlotSemResultadoDeclarado=false;this.buscarItens=function(){return __awaiter(o,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(o){if(a(this.buscar)){return[2]}t=this.buscar().then((function(t){e.itens=__spreadArrays(t);e.itensFiltrados=__spreadArrays(t)}));this.tracker.addPromise(t);return[2]}))}))};this.onSelecionar=function(t,e){t.preventDefault();o.selecionar(e)};this.onInputSearch=function(t){o.termoPesquisa=t.target.value;o.itensFiltrados=o.itens.filter((function(t){return t.descricao&&t.descricao.toUpperCase().includes(o.termoPesquisa.toUpperCase())}))};this.possuiImagemAvatar=function(t){return t.imagemAvatar!==undefined};this.possuiIcone=function(t){return t.icone!==undefined};this.getTipoEmptyState=function(){if(o.possuiSlotSemResultadoDeclarado){return null}if(o.termoPesquisa!==undefined&&o.termoPesquisa.length>0){return{registrosPesquisa:true}}return{registros:true}};this.isElementLink=function(t){return t.tagName==="A"};this.isElementInput=function(t){return t.tagName==="INPUT"}}t.prototype.connectedCallback=function(){this.configurarPresencaSemResultado();this.buscarItens()};t.prototype.componentDidRender=function(){if(!this.isBuscandoItens){this.setInputFocus()}};t.prototype.handleKeyDown=function(t){if(t.key==="ArrowUp"){this.handleArrowUp()}else if(t.key==="ArrowDown"){this.handleArrowDown(t)}};t.prototype.watchBuscar=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.buscarItens();return[2]}))}))};t.prototype.setInputFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this.el.shadowRoot.querySelector("input");if(a(t)){return[2]}t.focus();return[2]}))}))};t.prototype.configurarPresencaSemResultado=function(){this.possuiSlotSemResultadoDeclarado=this.el.querySelector('[slot="sem_resultado"]')!==null};t.prototype.handleArrowDown=function(t){var e=this.el.shadowRoot.activeElement;if(this.isElementInput(e)){t.preventDefault();var o=this.el.shadowRoot.querySelector("ul");if(!a(o.firstElementChild)){this.setFocusListItem(o.firstElementChild)}}if(this.isElementLink(e)){if(a(e.parentNode)){return}var r=e.parentNode.nextSibling;this.setFocusListItem(r)}};t.prototype.handleArrowUp=function(){var t=this.el.shadowRoot.activeElement;if(t.getAttribute("tabindex")==="1"){this.el.shadowRoot.querySelector("input").focus()}if(this.isElementLink(t)){if(a(t.parentNode)){return}var e=t.parentNode.previousSibling;this.setFocusListItem(e)}};t.prototype.setFocusListItem=function(t){if(a(t)){return}var e=t.querySelector("a");if(a(e)){return}e.focus()};t.prototype.render=function(){var t=this;var e;return o(r,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:(e=this.placeholderPesquisa)!==null&&e!==void 0?e:"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((function(e,r){return o("li",{key:e.id,onClick:function(o){return t.onSelecionar(o,e)}},o("a",{href:"",tabindex:r+1},t.possuiImagemAvatar(e)&&o("bth-avatar",{src:e.imagemAvatar,title:e.descricao,subIcone:e.iconeStatus,subIconeTitle:e.iconeStatusTitle}),t.possuiIcone(e)&&o("bth-avatar",{icone:e.icone,title:e.descricao,subIcone:e.iconeStatus,subIconeTitle:e.iconeStatusTitle}),!t.possuiImagemAvatar(e)&&!t.possuiIcone(e)&&o("bth-avatar",{iniciais:e.descricao,title:e.descricao,subIcone:e.iconeStatus,subIconeTitle:e.iconeStatusTitle}),o("section",null,o("h4",{title:e.descricao},e.descricao),o("p",{title:e.complemento},e.complemento))))})))),!this.isBuscandoItens&&o("footer",null,o("slot",{name:"rodape"}))))};Object.defineProperty(t.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{buscar:["watchBuscar"]}},enumerable:false,configurable:true});return t}());c.style=s}}}));