bruno-ui
Version:
Bruno UI Kit
144 lines (143 loc) • 4.25 kB
JavaScript
import { h } from "@stencil/core";
import { AppHelper } from "../../helpers/app.helper";
export class TabComponent {
constructor() {
this.active = false;
this._active = false;
}
ActiveChangeHandler(value) {
this._active = value;
this.TabChanged();
}
componentWillLoad() {
this._identifier = AppHelper.GetId();
this._active = this.active;
}
componentDidLoad() {
const tab = this.GetTab();
this.tabLoaded.emit(tab);
}
render() {
return (h("div", { class: { 'brn-tab--active': this._active } },
h("slot", null)));
}
TabChanged() {
const tab = this.GetTab();
this.tabChanged.emit(tab);
}
GetTab() {
const tab = {
Identifier: this._identifier,
Index: this.GetIndex(),
Name: this.name,
Active: this._active,
OnActive: (value) => {
this._active = value;
}
};
return tab;
}
GetIndex() {
const parent = this._element.closest("brn-tabs");
if (parent) {
const tabs = parent.getElementsByTagName('brn-tab');
return Array.prototype.indexOf.call(tabs, this._element);
}
console.warn('"brn-tab" components must be wrapped with "brn-tabs" component');
return 0;
}
static get is() { return "brn-tab"; }
static get originalStyleUrls() { return {
"$": ["tab.component.scss"]
}; }
static get styleUrls() { return {
"$": ["tab.component.css"]
}; }
static get properties() { return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "active",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"_active": {},
"_identifier": {}
}; }
static get events() { return [{
"method": "tabLoaded",
"name": "tabLoaded",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "TabType",
"resolved": "TabType",
"references": {
"TabType": {
"location": "import",
"path": "../../objects/types"
}
}
}
}, {
"method": "tabChanged",
"name": "tabChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "TabType",
"resolved": "TabType",
"references": {
"TabType": {
"location": "import",
"path": "../../objects/types"
}
}
}
}]; }
static get elementRef() { return "_element"; }
static get watchers() { return [{
"propName": "active",
"methodName": "ActiveChangeHandler"
}]; }
}