@kelvininc/ui-components
Version:
Kelvin UI Components
70 lines (66 loc) • 6.6 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, x as ETabItemType, K as h, L as Host } from './p-BP5CxQcH.js';
import { D as DEFAULT_THROTTLE_WAIT } from './p-YDhuCIKq.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host .tab-item-container{display:flex;align-items:center;width:fit-content;height:100%;user-select:none;white-space:nowrap;gap:var(--tab-secondary-gap-default);cursor:pointer}:host .tab-item-container.primary{padding:0 var(--tab-primary-padding-x-default)}:host .tab-item-container.primary .label{font-family:Proxima Nova;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0;color:var(--tab-primary-label-default)}:host .tab-item-container.primary.selected .label{color:var(--tab-primary-label-selected)}:host .tab-item-container.primary.disabled{cursor:not-allowed;pointer-events:none}:host .tab-item-container.primary.disabled .label{color:var(--tab-primary-label-disabled)}:host .tab-item-container.secondary{height:var(--tab-secondary-height-default);padding:var(--tab-secondary-padding-y-default) var(--tab-secondary-padding-x-default);box-sizing:border-box;border:var(--tab-secondary-border-thickness-default) solid var(--transparent);border-radius:var(--tab-secondary-radius-default);align-self:center}:host .tab-item-container.secondary kv-icon{--icon-color:var(--icon-tab-icon-color-default);--icon-width:var(--icon-tab-icon-size-default);--icon-height:var(--icon-tab-icon-size-default)}:host .tab-item-container.secondary .label{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--tab-secondary-label-default)}:host .tab-item-container.secondary:hover:not(.disabled){background:var(--tab-secondary-background-hover)}:host .tab-item-container.secondary:hover:not(.disabled) kv-icon{--icon-color:var(--icon-tab-icon-color-hover)}:host .tab-item-container.secondary:hover:not(.disabled) .label{color:var(--tab-secondary-label-hover)}:host .tab-item-container.secondary.selected:not(:hover):not(.disabled){background:var(--tab-secondary-background-selected);border-color:var(--tab-secondary-border-color-default)}:host .tab-item-container.secondary.selected:not(:hover):not(.disabled) kv-icon{--icon-color:var(--icon-tab-icon-color-selected)}:host .tab-item-container.secondary.selected:not(:hover):not(.disabled) .label{color:var(--tab-secondary-label-selected)}:host .tab-item-container.secondary.disabled{cursor:not-allowed;pointer-events:none;user-select:none;background:var(--tab-secondary-background-disabled);border-color:var(--tab-secondary-border-color-disabled)}:host .tab-item-container.secondary.disabled kv-icon{--icon-color:var(--icon-tab-icon-color-disabled)}:host .tab-item-container.secondary.disabled .label{color:var(--tab-secondary-label-disabled)}:host .tab-item-container.secondary.only-icon{height:var(--icon-tab-height-default);padding:var(--icon-tab-padding-y-default) var(--icon-tab-padding-x-default);border:var(--icon-tab-border-thickness-default) solid var(--transparent);border-radius:var(--icon-tab-radius-default)}:host .tab-item-container.secondary.only-icon:hover:not(.disabled){background:var(--icon-tab-background-hover)}:host .tab-item-container.secondary.only-icon.selected:not(:hover):not(.disabled){background:var(--icon-tab-background-selected);border-color:var(--icon-tab-border-color-default)}:host .tab-item-container.secondary.only-icon.disabled{background:var(--icon-tab-background-disabled);border-color:var(--icon-tab-border-color-disabled)}";
const KvTabItem = /*@__PURE__*/ proxyCustomElement(class KvTabItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tabSelected = createEvent(this, "tabSelected", 7);
/** (optional) Sets this tab item to a different styling configuration */
this.type = ETabItemType.Primary;
/** (optional) To disable this tab */
this.disabled = false;
/** (optional) To set this tab as the selected one */
this.selected = false;
/** @inheritdoc */
this.customClass = '';
/** (optional) Custom attributes to be applied to the tab element */
this.customAttributes = {};
this.tabClick = () => {
if (this.disabled)
return;
this.tabSelected.emit(this.tabKey);
};
}
connectedCallback() {
this.tabClickThrottler = throttle(() => this.tabClick(), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: 'c2557509de414c16f79fba72592b0033f9f39728' }, h("div", Object.assign({ key: '6652862bf2badff72b7d69ca32f12d43a21bbe93', class: Object.assign({ 'tab-item-container': true, 'selected': this.selected, 'disabled': this.disabled, 'only-icon': this.type === ETabItemType.Secondary && this.icon && !this.label, [this.type]: true }, getClassMap(this.customClass)), onClick: this.tabClickThrottler, style: this.customStyle }, this.customAttributes), this.icon && this.type === ETabItemType.Secondary && h("kv-icon", { key: '8702da8518cd70fc952658a4ee6259018f06746c', name: this.icon }), this.label && h("div", { key: '50075b698eabc70c4e553f98926195e8a228737c', class: "label" }, this.label), h("slot", { key: '81a681b32cc218e136e9fe9e3b5748a6d99cd500', name: "right-slot" }))));
}
static get style() { return tabItemCss; }
}, [257, "kv-tab-item", {
"tabKey": [8, "tab-key"],
"type": [1],
"label": [1],
"icon": [1],
"disabled": [4],
"selected": [4],
"customStyle": [16, "custom-style"],
"customClass": [513, "custom-class"],
"customAttributes": [16, "custom-attributes"]
}]);
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 };