@cbpds/web-components
Version:
Web components for the CBP Design System.
177 lines (176 loc) • 6.29 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpTab {
constructor() {
this.name = undefined;
this.selected = undefined;
this.color = undefined;
this.accessibilityText = undefined;
this.sx = {};
}
handleTabClick(e = undefined) {
this.selected = true;
this.tabClicked.emit({
host: this.host,
tab: this.button,
name: this.name,
nativeEvent: e
});
}
componentWillLoad() {
if (typeof this.sx == "string") {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
this.selected && this.handleTabClick();
}
componentDidLoad() {
this.tabLoaded.emit({
host: this.host,
tab: this.button,
parent: this.parent
});
}
render() {
return (h(Host, { key: 'abf5445faf3fc0919dc396855adbbd4f258b8716', role: "presentation" }, h("button", { key: '9c8784e1d56f2226e0ee90651017587ce4d7e565', type: "button", role: "tab", id: `${this.name}_tab`, "aria-label": this.accessibilityText, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.name, tabindex: this.selected ? 0 : -1, ref: (el) => this.button = el, onClick: e => this.handleTabClick(e) }, h("slot", { key: 'ccb5e67272336a4eb7d18a803e453fec04dd49fd' }))));
}
static get is() { return "cbp-tab"; }
static get originalStyleUrls() {
return {
"$": ["cbp-tab.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-tab.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "An `ID`-conformant unique name of the tab; This value should match the corresponding cbp-tab-panel name and links the two together."
},
"attribute": "name",
"reflect": false
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether this is the selected tab. Only one tab per tabset should be marked as selected."
},
"attribute": "selected",
"reflect": true
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'danger'",
"resolved": "\"danger\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "An optional color variant."
},
"attribute": "color",
"reflect": true
},
"accessibilityText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "For tabs without a visible text label (e.g., icon tabs) or a label that is insufficiently unique/descriptive, you may provide accessibility text, which is rendered as an `aria-label` on the tab control (button element)."
},
"attribute": "accessibility-text",
"reflect": false
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "tabLoaded",
"name": "tabLoaded",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits an event when the tab has been fully loaded for registration with the parent tabset."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "tabClicked",
"name": "tabClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits a custom even containing an object that describes the tab that was activated."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-tab.js.map