@kelvininc/ui-components
Version:
Kelvin UI Components
293 lines (292 loc) • 11.3 kB
JavaScript
import { Host, h } from "@stencil/core";
import { throttle } from "lodash-es";
import { DEFAULT_THROTTLE_WAIT } from "../../config";
import { EComponentSize } from "../../types";
import { getClassMap } from "../../utils/css-class.helper";
/**
* @part icon - The tab's item icon.
*/
export class KvTabItem {
constructor() {
/** (optional) To disable this tab */
this.disabled = false;
/** (optional) To set this tab as the selected one */
this.selected = false;
/** (optional) To show/hide notification icon or not */
this.hasNotification = false;
/** (optional) The tab's notification color (hex value, rgb or css var format) */
this.notificationColor = '';
/** (optional) Sets this tab item to a different styling configuration */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.customClass = '';
this.tabClick = () => {
this.tabSelected.emit(this.tabKey);
};
}
connectedCallback() {
this.tabClickThrottler = throttle(() => this.tabClick(), DEFAULT_THROTTLE_WAIT);
}
render() {
const customStyles = {
backgroundColor: this.notificationColor
};
return (h(Host, { key: 'cc47d84b83391d75d45e1502db22c9600254fc29' }, h("div", { key: 'a5dccdf93379670adb4b631fd7ab09f581f2ec9b', class: Object.assign({ 'tab-item-container': true, 'selected': this.selected, 'disabled': this.disabled, 'has-notification': this.hasNotification, 'small': this.size === EComponentSize.Small }, getClassMap(this.customClass)), onClick: this.tabClickThrottler, style: this.customStyle }, h("div", { key: 'b9f7701a21d2350b578c5e3d71d52c19fba61324', class: "label" }, this.label), this.icon && (h("div", { key: 'b9bf233b90ae0996f715789fda44277a39291303', class: "icon" }, h("kv-icon", { key: 'd6d4339e64bb321aacf230d0333bd74ab5c8ab6b', name: this.icon, part: "icon" }))), this.hasNotification && h("div", { key: '15b656346cefc42ccb2ecc2918b9e759b677a748', class: "notification-dot", style: customStyles }))));
}
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
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "(required) Name 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"
},
"hasNotification": {
"type": "boolean",
"attribute": "has-notification",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) To show/hide notification icon or not"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"notificationColor": {
"type": "string",
"attribute": "notification-color",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) The tab's notification color (hex value, rgb or css var format)"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) The tab's icon"
},
"getter": false,
"setter": false,
"reflect": false
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Sets this tab item to a different styling configuration"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EComponentSize.Large"
},
"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.29.2/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": "''"
}
};
}
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": {}
}
}];
}
}