v4web-components/dist/stencil-library/p-89af9d62.entry.js

Stencil Component Starter

import{r as e,h as a,g as i}from"./p-c2aeec95.js";const s=e=>{const a=new Intl.NumberFormat("pt-BR",{style:"currency",currency:"BRL"});const i=a.format(e);return i};const o=".v4-header{position:fixed;top:0;left:0;height:4rem;width:100%;z-index:11;box-shadow:var(--lab-ds-semantic-container-shadow-l);background-color:var(--lab-ds-semantic-color-bg-pure)}.v4-header .v4-header-container{display:flex;align-items:center;justify-content:space-between;z-index:11;padding-inline:2rem;height:100%}.v4-header .v4-header-logo{cursor:pointer;height:1.8rem;object-fit:cover}.v4-header-left-options-web{display:flex;align-items:center;gap:3rem}.v4-header-notifications-avatar-container{display:flex;align-items:center;gap:1.5rem}.v4-header-balance{display:flex;align-items:center;cursor:pointer;gap:0.5rem;color:var(--lab-ds-semantic-color-fg-default);font:var(--lab-ds-semantic-typography-heading-h5)}.v4-header-balance-number{color:var(--lab-ds-semantic-selectable-color-primary-default)}.v4-header-avatar{cursor:pointer}.modal-profile{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative}.modal{position:absolute;top:1rem;right:0;max-height:21rem;min-width:14rem;overflow-y:auto;overflow-x:hidden;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);gap:var(--lab-ds-semantic-selectable-space-gap-s);box-shadow:var(--lab-ds-semantic-container-shadow-xl);background-color:var(--lab-ds-semantic-placeholder-color-bg-pure);color:var(--lab-ds-semantic-color-fg-default)}.modal-profile-container{gap:var(--lab-ds-semantic-selectable-space-gap-s);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.modal-profile-container .action-item{display:flex;align-items:center;border:none;z-index:20;cursor:pointer;background-color:rgba(0, 0, 0, 0);padding-top:var(--lab-ds-semantic-selectable-space-padding-m);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-s);width:100%;white-space:nowrap;font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);color:var(--lab-ds-semantic-color-fg-default)}.modal-profile-container .action-item.user-name{cursor:default;border-bottom-style:solid;border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-color:var(--lab-ds-core-color-gray-30)}.icon-item{color:var(--lab-ds-core-color-gray-50)}.action-item:hover:not(.user-name){background-color:var(--lab-ds-semantic-color-bg-hover)}.v4-header-left-options-mobile{display:none}@media (max-width: 600px){.v4-header-left-options-web{display:none}.v4-header-left-options-mobile{display:block}.v4-header-balance{font:var(--lab-ds-semantic-typography-heading-h6)}}.v4-header-menu{cursor:pointer}";const t=class{constructor(a){e(this,a);this.handleClick=()=>{if(this.eventLogo){this.eventLogo()}};this.handleToogleViewProfile=()=>{this.isToogleViewProfile=!this.isToogleViewProfile};this.logoHeader=undefined;this.eventLogo=undefined;this.eventMyProfile=undefined;this.eventLogout=undefined;this.eventWallet=undefined;this.balanceWallet=undefined;this.user=undefined;this.isToogleViewProfile=false}checkForClickOutside(e){if(this.el.contains(e.target)){return}this.isToogleViewProfile=false}render(){var e,i,o,t,l,n;const r=this.isToogleViewProfile?"close":"menu";return a("div",{class:`v4-header`},a("div",{class:"v4-header-container"},a("img",{onClick:()=>{this.handleClick()},class:"v4-header-logo",src:this.logoHeader,alt:"logo"}),a("div",{class:"v4-header-left-options-web"},this.balanceWallet&&a("span",{onClick:()=>{this.eventWallet()},class:"v4-header-balance"},"Saldo: ",a("span",{class:"v4-header-balance-number"},s(this.balanceWallet))),a("div",{class:"v4-header-notifications-avatar-container"},a("slot",{name:"notifications"}),a("div",{class:"v4-header-avatar"},a("lab-ds-avatar",{onClick:()=>{this.handleToogleViewProfile()},imageSRC:(e=this.user)===null||e===void 0?void 0:e.imageSRC,name:(i=this.user)===null||i===void 0?void 0:i.name,size:"medium"}),this.isToogleViewProfile&&a("div",{class:"modal-profile"},a("div",{class:"modal"},a("div",{class:"modal-profile-container"},a("button",{disabled:false,class:`action-item user-name`},a("lab-ds-avatar",{class:"icon-item",imageSRC:(o=this.user)===null||o===void 0?void 0:o.imageSRC,name:(t=this.user)===null||t===void 0?void 0:t.name,size:"medium"}),a("span",{class:"hint"},(n=(l=this.user)===null||l===void 0?void 0:l.name)===null||n===void 0?void 0:n.split(" ")[0])),a("button",{onClick:()=>{this.eventMyProfile()},disabled:false,class:`action-item`},a("lab-ds-icon-not-selectable",{class:"icon-item",size:"s-medium",icon:"person"}),a("span",{class:"hint"},"Meu Perfil")),a("button",{onClick:()=>{this.eventLogout()},disabled:false,class:`action-item`},a("lab-ds-icon-not-selectable",{class:"icon-item",size:"s-medium",icon:"logout"}),a("span",{class:"hint"},"Fazer Logout")))))))),a("div",{class:"v4-header-left-options-mobile"},a("div",{class:"v4-header-notifications-avatar-container"},a("div",{class:"v4-header-menu"},a("lab-ds-icon-selectable",{onClick:()=>{this.handleToogleViewProfile()},size:"s-medium",icon:r}),this.isToogleViewProfile&&a("div",{class:"modal-profile"},a("div",{class:"modal"},a("div",{class:"modal-profile-container"},a("button",{onClick:()=>{this.handleClick()},class:`action-item`},a("span",{onClick:()=>{this.eventWallet()},class:"v4-header-balance"},"Saldo: ",a("span",{class:"v4-header-balance-number"},s(this.balanceWallet)))),a("button",{onClick:()=>{this.handleClick()},class:`action-item`},a("lab-ds-icon-not-selectable",{class:"icon-item",size:"s-medium",icon:"home"}),a("span",{class:"hint"},"Início")),a("button",{onClick:()=>{this.eventMyProfile()},disabled:false,class:`action-item`},a("lab-ds-icon-not-selectable",{class:"icon-item",size:"s-medium",icon:"person"}),a("span",{class:"hint"},"Meu Perfil")),a("button",{onClick:()=>{this.eventLogout()},disabled:false,class:`action-item`},a("lab-ds-icon-not-selectable",{class:"icon-item",size:"s-medium",icon:"logout"}),a("span",{class:"hint"},"Fazer Logout"))))))))))}get el(){return i(this)}};t.style=o;export{t as lab_ds_header};
//# sourceMappingURL=p-89af9d62.entry.js.map