@kelvininc/ui-components
Version:
Kelvin UI Components
78 lines (74 loc) • 5.14 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { g as getClassMap } from './p-DKOxy79t.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
import { t as throttle } from './p-BlTxH6qj.js';
const tabItemCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{height:inherit}:host .tab-item-container{height:100%;display:flex;align-items:center;padding:0 var(--kv-spacing-6x, 24px);user-select:none;white-space:nowrap;cursor:pointer}:host .tab-item-container.selected .label{color:var(--kv-text, #fff)}:host .tab-item-container.disabled{cursor:not-allowed;pointer-events:none}:host .tab-item-container.disabled .label{color:var(--kv-text-step-5, #707070)}:host .tab-item-container .label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none;color:var(--kv-text-step-4, #bebebe)}:host .tab-item-container.small{margin:0 var(--kv-spacing-4x, 16px)}:host .tab-item-container.small .label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none}:host .tab-item-container .icon{margin-left:var(--kv-spacing, 4px)}:host .tab-item-container .icon kv-icon{--icon-width:var(--tab-item-icon-size, 16px);--icon-height:var(--tab-item-icon-size, 16px);--icon-color:var(--tab-item-icon-color, var(--kv-text, #fff))}:host .tab-item-container .notification-dot{width:6px;height:6px;border-radius:50%;margin-left:var(--kv-spacing-2x, 8px);background-color:var(--kv-error, #e11900);animation:circleGrow 0.25s}@keyframes circleGrow{from{transform:scale(0)}to{transform:scale(1)}}";
const KvTabItem = /*@__PURE__*/ proxyCustomElement(class KvTabItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tabSelected = createEvent(this, "tabSelected", 7);
/** (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 style() { return tabItemCss; }
}, [1, "kv-tab-item", {
"tabKey": [8, "tab-key"],
"label": [1],
"disabled": [4],
"selected": [4],
"hasNotification": [4, "has-notification"],
"notificationColor": [1, "notification-color"],
"icon": [1],
"size": [1],
"customStyle": [16, "custom-style"],
"customClass": [513, "custom-class"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-tab-item", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-tab-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTabItem);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvTabItem as K, defineCustomElement as d };