v4web-components
Version:
Stencil Component Starter
118 lines (112 loc) • 9.06 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './lab-ds-avatar2.js';
import { d as defineCustomElement$3 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$2 } from './lab-ds-icon-selectable2.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$1 = /*@__PURE__*/ proxyCustomElement(class LabDsHeader extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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 this; }
static get style() { return labDsHeaderCss; }
}, [1, "lab-ds-header", {
"logoHeader": [1, "logo-header"],
"eventLogo": [16],
"eventMyProfile": [16],
"eventLogout": [16],
"eventWallet": [16],
"balanceWallet": [2, "balance-wallet"],
"user": [16],
"isToogleViewProfile": [32]
}, [[8, "click", "checkForClickOutside"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-header", "lab-ds-avatar", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-header":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsHeader$1);
}
break;
case "lab-ds-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lab-ds-icon-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const LabDsHeader = LabDsHeader$1;
const defineCustomElement = defineCustomElement$1;
export { LabDsHeader, defineCustomElement };
//# sourceMappingURL=lab-ds-header.js.map