v4web-components
Version:
Stencil Component Starter
179 lines (178 loc) • 5.27 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsTab {
constructor() {
this.tabs = undefined;
this.tabsColapsed = [];
this.value = undefined;
this.selectedTab = undefined;
this.type = 'inline';
this.disabled = false;
this.openMoreItems = false;
}
handleSelectedValueEmit(data) {
if (this.disabled || (data === null || data === void 0 ? void 0 : data.disabled))
return;
this.selectedTab = data.key;
data.event();
}
checkForClickOutside(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.openMoreItems = false;
}
componentDidLoad() {
this.selectedTab = this.value;
}
watchValue(newValue) {
this.selectedTab = newValue;
}
render() {
var _a, _b, _c, _d, _e;
if (((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) > 5) {
(_b = this.tabs) === null || _b === void 0 ? void 0 : _b.forEach((tab, index) => {
if (index < 5) {
return;
}
else {
this.tabsColapsed = [
...this.tabsColapsed,
{
title: tab.title,
key: tab.key,
event: () => tab.event(),
disabled: (tab === null || tab === void 0 ? void 0 : tab.disabled) || false,
},
];
delete this.tabs[index];
}
});
}
return (h("div", { class: `v4-tabs ${this.type} ${this.disabled ? 'disabled' : ''}` }, (_c = this.tabs) === null || _c === void 0 ? void 0 :
_c.map(tab => {
return (h("button", { class: `v4-tab ${this.selectedTab === tab.key ? 'selected' : ''}`, onClick: () => {
this.handleSelectedValueEmit(tab);
}, disabled: this.disabled || (tab === null || tab === void 0 ? void 0 : tab.disabled) }, tab.title));
}), ((_d = this.tabsColapsed) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", null, h("button", { class: `v4-tab more-items ${this.openMoreItems ? 'selected' : ''}`, onClick: () => {
if (this.disabled)
return;
this.openMoreItems = !this.openMoreItems;
} }, "Mais", h("lab-ds-icon-not-selectable", { icon: "more_vert", size: "small" })), this.openMoreItems && (h("div", { class: "more-items-content" }, (_e = this.tabsColapsed) === null || _e === void 0 ? void 0 : _e.map(tab => {
return (h("button", { class: `v4-tab ${this.value === tab.key ? 'selected' : ''}`, onClick: () => {
this.handleSelectedValueEmit(tab);
}, disabled: this.disabled || (tab === null || tab === void 0 ? void 0 : tab.disabled) }, tab.title));
})))))));
}
static get is() { return "lab-ds-tab"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-tab.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-tab.css"]
};
}
static get properties() {
return {
"tabs": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<{ title: string; key: string; event: () => void, disabled?: boolean}>",
"resolved": "{ title: string; key: string; event: () => void; disabled?: boolean; }[]",
"references": {
"Array": {
"location": "global"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'inline' | 'contained'",
"resolved": "\"contained\" | \"inline\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false,
"defaultValue": "'inline'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"tabsColapsed": {},
"selectedTab": {},
"openMoreItems": {}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "watchValue"
}];
}
static get listeners() {
return [{
"name": "click",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=lab-ds-tab.js.map