@salla.sa/twilight-components
Version:
Salla Web Component
122 lines (121 loc) • 4.16 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
/**
* @slot header - The tab header section. `salla-tab-header` component is used for this purpose.
* @slot content - The active tab content section. `salla-tab-content` component is used for this purpose.
*/
export class SallaTabs {
constructor() {
/**
* Background color
*/
this.backgroundColor = undefined;
/**
* Align tabs vertically.
*/
this.vertical = false;
}
componentWillLoad() {
this.createGroup().then(() => {
const [group] = this.tabGroup;
this.selectGroup(group);
});
}
onSelectedTab(event) {
const group = this.tabGroup.find(group => group.header.id === event.detail.id);
this.selectGroup(group);
}
async createGroup() {
const tabsHeaderEl = Array.from(this.host.querySelectorAll('salla-tab-header'));
this.tabsHeader = await Promise.all(tabsHeaderEl.map(async (el) => await el.getChild()));
const tabsContentEl = Array.from(this.host.querySelectorAll('salla-tab-content'));
this.tabsContent = await Promise.all(tabsContentEl.map(async (el) => await el.getChild()));
this.tabGroup = this.tabsHeader.map(header => {
const content = this.tabsContent.find(content => content.name === header.name);
return {
header: header,
content: content
};
});
}
selectGroup(group) {
this.tabGroup.map(g => {
g.header.unselect();
g.content.unselect();
});
group.header.selected();
group.content.selected();
}
render() {
return [
h("div", { key: '32051cc4308a49527f424d2bd0ce42a1ae25b8d4', class: "s-tabs" }, h("div", { key: '5d99d5835d8f3686f38a51f2eb049887d9f7229b', class: "s-tabs-header" }, h("slot", { key: '5b78f92eb7ffe9ad56c235415ae4ea93b0ed3c1d', name: "header" })), h("div", { key: '8979a8c600d60ed79ae8ebb6894754ab3ab7be97', class: "s-tabs-content-wrapper" }, h("slot", { key: '629a4e9b7934a0074a6e7579645e08e0b37c7e61', name: "content" })))
];
}
static get is() { return "salla-tabs"; }
static get originalStyleUrls() {
return {
"$": ["salla-tabs.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-tabs.css"]
};
}
static get properties() {
return {
"backgroundColor": {
"type": "string",
"attribute": "background-color",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Background color"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "undefined"
},
"vertical": {
"type": "boolean",
"attribute": "vertical",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Align tabs vertically."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "tabSelected",
"method": "onSelectedTab",
"target": undefined,
"capture": false,
"passive": false
}];
}
}