@salla.sa/twilight-components
Version:
Salla Web Component
113 lines (112 loc) • 3.15 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() {
this.backgroundColor = undefined;
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", { class: "s-tabs" }, h("div", { class: "s-tabs-header" }, h("slot", { name: "header" })), h("div", { class: "s-tabs-content-wrapper" }, h("slot", { 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",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Background color"
},
"attribute": "background-color",
"reflect": false,
"defaultValue": "undefined"
},
"vertical": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Align tabs vertically."
},
"attribute": "vertical",
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "tabSelected",
"method": "onSelectedTab",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=salla-tabs.js.map