@kelvininc/ui-components
Version:
Kelvin UI Components
114 lines (107 loc) • 5.71 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.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 isEmpty = require('./isEmpty-C_HQvGy-.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.js');
const FONT_DESCRIPTOR_SIZE_MAP = {
[components.EComponentSize.Small]: 'normal normal 600 12px proxima-nova',
[components.EComponentSize.Large]: 'normal normal 600 16px proxima-nova'
};
const TAB_ITEM_PADDING_PX = 48;
const TAB_ITEM_NOTIFICATION_DOT_WITH_MARGIN = 14;
const TAB_ITEM_ICON_WIDTH_PX = 20;
const TAB_ITEM_SMALL_ADDED_MARGIN = 32;
const calculateTabWidths = (tabs, notifications, size) => {
const measuringCanvas = document.createElement('canvas');
const font = FONT_DESCRIPTOR_SIZE_MAP[size];
const ctx = measuringCanvas.getContext('2d');
ctx.font = font;
const values = tabs.reduce((acc, { tabKey, label, icon }, idx) => {
var _a;
const previousTab = idx > 0 ? tabs[idx - 1] : undefined;
const leftOffset = previousTab ? +acc[previousTab.tabKey].width + +acc[previousTab.tabKey].left : 0;
const notificationDotWidth = ((_a = notifications[tabKey]) === null || _a === void 0 ? void 0 : _a.active) ? TAB_ITEM_NOTIFICATION_DOT_WITH_MARGIN : 0;
const iconWidth = icon ? TAB_ITEM_ICON_WIDTH_PX : 0;
const small = size === components.EComponentSize.Small ? TAB_ITEM_SMALL_ADDED_MARGIN : 0;
const textWidth = Math.ceil(ctx.measureText(label).width);
acc[tabKey] = {
left: `${leftOffset}`,
width: `${textWidth + TAB_ITEM_PADDING_PX + notificationDotWidth + small + iconWidth}`
};
return acc;
}, {});
return values;
};
const tabNavigationCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--tab-list-bg-color:\"transparent\";--tab-list-indicator-color:var(--kv-primary, #005cc7);--tab-list-divider-color:var(--kv-neutral-5, #707070);position:relative;height:34px;width:100%;display:flex;background-color:var(--tab-list-bg-color)}:host::before{content:\"\";width:100%;position:absolute;bottom:0;border-bottom:1px solid var(--tab-list-divider-color)}:host .selected-tab-indicator{height:2px;position:absolute;bottom:0;transition:all 0.3s ease-out;background:var(--tab-list-indicator-color)}";
const KvTabNavigation = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tabChange = index.createEvent(this, "tabChange", 7);
/** @inheritdoc */
this.tabs = [];
/** @inheritdoc */
this.notifications = {};
/** @inheritdoc */
this.size = components.EComponentSize.Large;
this.tabsIndicatorConfig = {};
/** The left offset and width of the tab indicator, recalculated when the selected tab changes */
this.selectedTabIndicatorConfig = {
left: '0px',
width: '0px'
};
}
/** Listen to custom DOM event of tab selection */
tabSelectionHandler(event) {
this.tabChange.emit(event.detail);
}
/** Watch for tabs change to calculate elements width */
tabsChangeHandler() {
this.tabsIndicatorConfig = calculateTabWidths(this.tabs, this.notifications, this.size);
this.applySelectedTabStyling();
}
/** Watch for tab selection change and react accordingly by updating the internal states */
tabSelectionChangeHandler() {
if (isEmpty.isEmpty(this.tabsIndicatorConfig)) {
this.tabsIndicatorConfig = calculateTabWidths(this.tabs, this.notifications, this.size);
}
this.applySelectedTabStyling();
}
componentDidLoad() {
this.tabsIndicatorConfig = calculateTabWidths(this.tabs, this.notifications, this.size);
this.applySelectedTabStyling();
}
applySelectedTabStyling() {
if (isEmpty.isEmpty(this.selectedTabKey) || isEmpty.isEmpty(this.tabsIndicatorConfig[this.selectedTabKey]))
return;
const { left, width } = this.tabsIndicatorConfig[this.selectedTabKey];
this.selectedTabIndicatorConfig = {
left: `${left}px`,
width: `${width}px`
};
}
render() {
return (index.h(index.Host, { key: 'd8ab9ffa3148c8b87a67dc824e37b42f7c91d6fc' }, this.tabs.map(item => {
var _a, _b;
return (index.h("kv-tab-item", { key: item.tabKey, tabKey: item.tabKey, label: item.label, disabled: item.disabled, selected: item.tabKey === this.selectedTabKey, size: this.size, hasNotification: (_a = this.notifications[item.tabKey]) === null || _a === void 0 ? void 0 : _a.active, notificationColor: (_b = this.notifications[item.tabKey]) === null || _b === void 0 ? void 0 : _b.color, icon: item.icon, exportparts: "icon" }));
}), index.h("div", { key: '193dd35a3d8d29ecf5638dd64e0ee3f19d84a9a6', class: "selected-tab-indicator", style: this.selectedTabIndicatorConfig })));
}
static get watchers() { return {
"tabs": ["tabsChangeHandler"],
"size": ["tabsChangeHandler"],
"notifications": ["tabsChangeHandler"],
"selectedTabKey": ["tabSelectionChangeHandler"]
}; }
};
KvTabNavigation.style = tabNavigationCss;
exports.kv_tab_navigation = KvTabNavigation;