v4web-components
Version:
Stencil Component Starter
73 lines (68 loc) • 7.55 kB
JavaScript
import { r as registerInstance, h, g as getElement } from './index-0b720089.js';
const convertNumberToBRL = (number) => {
const formatter = new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL',
});
const money = formatter.format(number);
return money;
};
const labDsHeaderCss = ".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 LabDsHeader = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.isToogleViewProfile = false;
}
render() {
var _a, _b, _c, _d, _e, _f;
const iconMobile = this.isToogleViewProfile ? 'close' : 'menu';
return (h("div", { class: `v4-header` }, h("div", { class: "v4-header-container" }, h("img", { onClick: () => {
this.handleClick();
}, class: "v4-header-logo", src: this.logoHeader, alt: "logo" }), h("div", { class: "v4-header-left-options-web" }, this.balanceWallet && (h("span", { onClick: () => {
this.eventWallet();
}, class: "v4-header-balance" }, "Saldo: ", h("span", { class: "v4-header-balance-number" }, convertNumberToBRL(this.balanceWallet)))), h("div", { class: "v4-header-notifications-avatar-container" }, h("slot", { name: "notifications" }), h("div", { class: "v4-header-avatar" }, h("lab-ds-avatar", { onClick: () => {
this.handleToogleViewProfile();
}, imageSRC: (_a = this.user) === null || _a === void 0 ? void 0 : _a.imageSRC, name: (_b = this.user) === null || _b === void 0 ? void 0 : _b.name, size: "medium" }), this.isToogleViewProfile && (h("div", { class: "modal-profile" }, h("div", { class: "modal" }, h("div", { class: "modal-profile-container" }, h("button", { disabled: false, class: `action-item user-name` }, h("lab-ds-avatar", { class: 'icon-item', imageSRC: (_c = this.user) === null || _c === void 0 ? void 0 : _c.imageSRC, name: (_d = this.user) === null || _d === void 0 ? void 0 : _d.name, size: "medium" }), h("span", { class: "hint" }, (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.split(' ')[0])), h("button", { onClick: () => {
this.eventMyProfile();
}, disabled: false, class: `action-item` }, h("lab-ds-icon-not-selectable", { class: 'icon-item', size: "s-medium", icon: "person" }), h("span", { class: "hint" }, "Meu Perfil")), h("button", { onClick: () => {
this.eventLogout();
}, disabled: false, class: `action-item` }, h("lab-ds-icon-not-selectable", { class: 'icon-item', size: "s-medium", icon: "logout" }), h("span", { class: "hint" }, "Fazer Logout"))))))))), h("div", { class: "v4-header-left-options-mobile" }, h("div", { class: "v4-header-notifications-avatar-container" }, h("div", { class: "v4-header-menu" }, h("lab-ds-icon-selectable", { onClick: () => {
this.handleToogleViewProfile();
}, size: "s-medium", icon: iconMobile }), this.isToogleViewProfile && (h("div", { class: "modal-profile" }, h("div", { class: "modal" }, h("div", { class: "modal-profile-container" }, h("button", { onClick: () => {
this.handleClick();
}, class: `action-item` }, h("span", { onClick: () => {
this.eventWallet();
}, class: "v4-header-balance" }, "Saldo: ", h("span", { class: "v4-header-balance-number" }, convertNumberToBRL(this.balanceWallet)))), h("button", { onClick: () => {
this.handleClick();
}, class: `action-item` }, h("lab-ds-icon-not-selectable", { class: 'icon-item', size: "s-medium", icon: "home" }), h("span", { class: "hint" }, "In\u00EDcio")), h("button", { onClick: () => {
this.eventMyProfile();
}, disabled: false, class: `action-item` }, h("lab-ds-icon-not-selectable", { class: 'icon-item', size: "s-medium", icon: "person" }), h("span", { class: "hint" }, "Meu Perfil")), h("button", { onClick: () => {
this.eventLogout();
}, disabled: false, class: `action-item` }, h("lab-ds-icon-not-selectable", { class: 'icon-item', size: "s-medium", icon: "logout" }), h("span", { class: "hint" }, "Fazer Logout"))))))))))));
}
get el() { return getElement(this); }
};
LabDsHeader.style = labDsHeaderCss;
export { LabDsHeader as lab_ds_header };
//# sourceMappingURL=lab-ds-header.entry.js.map