@kelvininc/ui-components
Version:
Kelvin UI Components
53 lines (49 loc) • 4.42 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-D-JVwta2.js';
import { D as DEFAULT_THROTTLE_WAIT } from './config-YDhuCIKq.js';
import { a as EComponentSize } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './icon.types-SVedE_O8.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import { g as getClassMap } from './css-class.helper-DKOxy79t.js';
import { t as throttle } from './throttle-CI91gV45.js';
import './isObject-Dkd2PDJ-.js';
import './isSymbol-CfrylQep.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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 }))));
}
};
KvTabItem.style = tabItemCss;
export { KvTabItem as kv_tab_item };