@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: '49df0b08c12cc094afbcbdc106b02a9766a5b8e4', class: "s-tabs" }, h("div", { key: '02979fdfce4e6ada2caafd6a165b241b885e05b0', class: "s-tabs-header" }, h("slot", { key: '9919372225fd8be367648689337476f9dacc4ca4', name: "header" })), h("div", { key: '021f811beb02ebb93c788f989dfc39d994261caa', class: "s-tabs-content-wrapper" }, h("slot", { key: '5a5670d0be835306dfc29771b58d022bd092d057', 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
}];
}
}