@kelvininc/ui-components
Version:
Kelvin UI Components
55 lines (50 loc) • 4.47 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var config = require('./config-CX2UH6bG.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
var cssClass_helper = require('./css-class.helper-B7G6WFT7.js');
var throttle = require('./throttle-U8vjnKpb.js');
require('./isObject-COPdF2vE.js');
require('./isSymbol-D9AiXf1V.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) {
index.registerInstance(this, hostRef);
this.tabSelected = index.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 = components.EComponentSize.Large;
/** @inheritdoc */
this.customClass = '';
this.tabClick = () => {
this.tabSelected.emit(this.tabKey);
};
}
connectedCallback() {
this.tabClickThrottler = throttle.throttle(() => this.tabClick(), config.DEFAULT_THROTTLE_WAIT);
}
render() {
const customStyles = {
backgroundColor: this.notificationColor
};
return (index.h(index.Host, { key: 'cc47d84b83391d75d45e1502db22c9600254fc29' }, index.h("div", { key: 'a5dccdf93379670adb4b631fd7ab09f581f2ec9b', class: Object.assign({ 'tab-item-container': true, 'selected': this.selected, 'disabled': this.disabled, 'has-notification': this.hasNotification, 'small': this.size === components.EComponentSize.Small }, cssClass_helper.getClassMap(this.customClass)), onClick: this.tabClickThrottler, style: this.customStyle }, index.h("div", { key: 'b9f7701a21d2350b578c5e3d71d52c19fba61324', class: "label" }, this.label), this.icon && (index.h("div", { key: 'b9bf233b90ae0996f715789fda44277a39291303', class: "icon" }, index.h("kv-icon", { key: 'd6d4339e64bb321aacf230d0333bd74ab5c8ab6b', name: this.icon, part: "icon" }))), this.hasNotification && index.h("div", { key: '15b656346cefc42ccb2ecc2918b9e759b677a748', class: "notification-dot", style: customStyles }))));
}
};
KvTabItem.style = tabItemCss;
exports.kv_tab_item = KvTabItem;