@kelvininc/ui-components
Version:
Kelvin UI Components
271 lines (270 loc) • 10.5 kB
JavaScript
import { Host, h } from "@stencil/core";
import { throttle } from "lodash-es";
import { DEFAULT_THROTTLE_WAIT } from "../../config";
import { ETabItemType } from "./tab-item.types";
import { getClassMap } from "../../utils/css-class.helper";
export class KvTabItem {
constructor() {
/** (optional) Sets this tab item to a different styling configuration */
this.type = ETabItemType.Primary;
/** (optional) To disable this tab */
this.disabled = false;
/** (optional) To set this tab as the selected one */
this.selected = false;
/** @inheritdoc */
this.customClass = '';
/** (optional) Custom attributes to be applied to the tab element */
this.customAttributes = {};
this.tabClick = () => {
if (this.disabled)
return;
this.tabSelected.emit(this.tabKey);
};
}
connectedCallback() {
this.tabClickThrottler = throttle(() => this.tabClick(), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: 'c2557509de414c16f79fba72592b0033f9f39728' }, h("div", Object.assign({ key: '6652862bf2badff72b7d69ca32f12d43a21bbe93', class: Object.assign({ 'tab-item-container': true, 'selected': this.selected, 'disabled': this.disabled, 'only-icon': this.type === ETabItemType.Secondary && this.icon && !this.label, [this.type]: true }, getClassMap(this.customClass)), onClick: this.tabClickThrottler, style: this.customStyle }, this.customAttributes), this.icon && this.type === ETabItemType.Secondary && h("kv-icon", { key: '8702da8518cd70fc952658a4ee6259018f06746c', name: this.icon }), this.label && h("div", { key: '50075b698eabc70c4e553f98926195e8a228737c', class: "label" }, this.label), h("slot", { key: '81a681b32cc218e136e9fe9e3b5748a6d99cd500', name: "right-slot" }))));
}
static get is() { return "kv-tab-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tab-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["tab-item.css"]
};
}
static get properties() {
return {
"tabKey": {
"type": "any",
"attribute": "tab-key",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "(required) A unique identifier for this tab"
},
"getter": false,
"setter": false,
"reflect": false
},
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "ETabItemType",
"resolved": "ETabItemType.Primary | ETabItemType.Secondary",
"references": {
"ETabItemType": {
"location": "import",
"path": "./tab-item.types",
"id": "src/components/tab-item/tab-item.types.ts::ETabItemType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Sets this tab item to a different styling configuration"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "ETabItemType.Primary"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Name to show in UI for this tab"
},
"getter": false,
"setter": false,
"reflect": false
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Icon to show in UI for this tab"
},
"getter": false,
"setter": false,
"reflect": false
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) To disable this tab"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"attribute": "selected",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) To set this tab as the selected one"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"customStyle": {
"type": "unknown",
"attribute": "custom-style",
"mutable": false,
"complexType": {
"original": "HostAttributes['style']",
"resolved": "{ [key: string]: string; }",
"references": {
"HostAttributes": {
"location": "import",
"path": "@stencil/core/internal",
"id": "../../node_modules/.pnpm/@stencil+core@4.36.3/node_modules/@stencil/core/internal/index.d.ts::HostAttributes"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Additional style to apply for custom CSS."
},
"getter": false,
"setter": false
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces. It is also valid to provide\nCssClassMap with boolean logic."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"customAttributes": {
"type": "unknown",
"attribute": "custom-attributes",
"mutable": false,
"complexType": {
"original": "Record<string, string>",
"resolved": "{ [x: string]: string; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Custom attributes to be applied to the tab element"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "tabSelected",
"name": "tabSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the tab is selected"
},
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
}
}];
}
}