@scania/tegel
Version:
Tegel Design System
139 lines (138 loc) • 4.92 kB
JavaScript
import { Host, h } from "@stencil/core";
/**
* @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
*/
export class TdsFolderTab {
constructor() {
/** Disables the Tab. */
this.disabled = false;
this.selected = false;
}
/** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
async setTabWidth(width) {
this.tabWidth = width;
}
/** @internal Method to set the tab as selected. Used by the <tds-folder-tabs> */
async setSelected(selected) {
this.selected = selected;
}
connectedCallback() {
const elements = this.host.querySelectorAll('button, a');
for (let index = 0; index < elements.length; index++) {
const element = elements[index];
if (!element.getAttribute('aria-controls')) {
console.warn('Tegel folder-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
}
if (element.getAttribute('role') !== 'tab') {
console.warn('Tegel folder-tab component: Interactive elements should have attribute role="tab"');
}
if (this.disabled) {
element.setAttribute('aria-disabled', 'true');
}
else {
element.removeAttribute('aria-disabled');
}
}
}
render() {
return (h(Host, { key: 'bcb1ed17ebb34e2a458daa2fb3c6f7f52c3d9bf6', "aria-selected": this.selected }, h("div", { key: 'b6ee4cef0bac744ad09e92a32453ba6fb6021c41', class: {
selected: this.selected,
disabled: this.disabled,
}, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'b7d230c050fc315fb5de735a0496c69c967bdefe' }))));
}
static get is() { return "tds-folder-tab"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["folder-tab.scss"]
};
}
static get styleUrls() {
return {
"$": ["folder-tab.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables the Tab."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
}
};
}
static get states() {
return {
"selected": {},
"tabWidth": {}
};
}
static get methods() {
return {
"setTabWidth": {
"complexType": {
"signature": "(width: number) => Promise<void>",
"parameters": [{
"name": "width",
"type": "number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": [{
"name": "internal",
"text": "Method to set the width of the tab. Used by the <tds-folder-tabs>"
}]
}
},
"setSelected": {
"complexType": {
"signature": "(selected: boolean) => Promise<void>",
"parameters": [{
"name": "selected",
"type": "boolean",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": [{
"name": "internal",
"text": "Method to set the tab as selected. Used by the <tds-folder-tabs>"
}]
}
}
};
}
static get elementRef() { return "host"; }
}