v4web-components
Version:
Stencil Component Starter
197 lines (196 loc) • 7.61 kB
JavaScript
import { h } from '@stencil/core';
import { convertNumberToBRL } from '../../../utils/convertNumberToBRL';
export class LabDsHeader {
constructor() {
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"))))))))))));
}
static get is() { return "lab-ds-header"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-header.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-header.css"]
};
}
static get properties() {
return {
"logoHeader": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "logo-header",
"reflect": false
},
"eventLogo": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => void",
"resolved": "() => void",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"eventMyProfile": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => void",
"resolved": "() => void",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"eventLogout": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => void",
"resolved": "() => void",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"eventWallet": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "() => void",
"resolved": "() => void",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
}
},
"balanceWallet": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "balance-wallet",
"reflect": false
},
"user": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{ name: string; imageSRC?: string; unitId?: string; id?: string }",
"resolved": "{ name: string; imageSRC?: string; unitId?: string; id?: string; }",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
};
}
static get states() {
return {
"isToogleViewProfile": {}
};
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "click",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=lab-ds-header.js.map