@kelvininc/ui-components
Version:
Kelvin UI Components
56 lines (50 loc) • 8.64 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { D as DEFAULT_THROTTLE_WAIT } from './config-YDhuCIKq.js';
import { s as ETabItemType } from './wizard.types-COrzvkrr.js';
import { a as getClassMap } from './css-class.helper-DCOsOAOy.js';
import { t as throttle } from './throttle-Ddn7tNe4.js';
import { i as isEmpty } from './isEmpty-DYR6-7ab.js';
import './isObject-Dkd2PDJ-.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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" }))));
}
};
KvTabItem.style = tabItemCss;
const tagStatusCss = "@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{--tag-status-label-color:var(--text-surface-neutral-secondary );--tag-status-icon-size:var(--size-md);--tag-status-icon-success-color:var(--icon-surface-status-success-default);--tag-status-icon-success-background-color:var(--background-surface-neutral-inverse);--tag-status-icon-error-color:var(--icon-surface-status-danger-default);--tag-status-icon-error-background-color:var(--background-surface-neutral-inverse);--tag-status-icon-unknown-color:var(--icon-surface-status-inactive-default);--tag-status-icon-unknown-background-color:transparent;--tag-status-icon-warning-color:var(--icon-surface-status-warning-default);--tag-status-icon-warning-background-color:transparent;--tag-status-icon-info-color:var(--icon-surface-status-info-default);--tag-status-icon-info-background-color:var(--background-surface-neutral-inverse);--tag-status-gap:var(--spacing-md)}.tag-status{display:flex;align-items:center;gap:var(--tag-status-gap)}.tag-status .label{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--tag-status-label-color)}.tag-status .icon kv-icon{--icon-width:var(--tag-status-icon-size);--icon-height:var(--tag-status-icon-size)}.tag-status .icon--state-success kv-icon{--icon-color:var(--tag-status-icon-success-color);--icon-background-color:var(--tag-status-icon-success-background-color)}.tag-status .icon--state-error kv-icon{--icon-color:var(--tag-status-icon-error-color);--icon-background-color:var(--tag-status-icon-error-background-color)}.tag-status .icon--state-unknown kv-icon{--icon-color:var(--tag-status-icon-unknown-color);--icon-background-color:var(--tag-status-icon-unknown-background-color)}.tag-status .icon--state-warning kv-icon{--icon-color:var(--tag-status-icon-warning-color);--icon-background-color:var(--tag-status-icon-warning-background-color)}.tag-status .icon--state-info kv-icon{--icon-color:var(--tag-status-icon-info-color);--icon-background-color:var(--tag-status-icon-info-background-color)}";
const KvTagStatus = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h(Host, { key: '7bae64f67b6da6b2964aa1e0b6f21e77d99f2499' }, h("div", { key: '60c08c5b865f04e3235979b20cb866ec3d66b956', class: "tag-status" }, h("div", { key: '436a030d498c89fc1eef85584398b2dbf5a0ba90', class: {
icon: true,
[`icon--state-${this.state}`]: true
} }, h("kv-icon", { key: '0c581ced88ff24c71469c0dcb4f5c133a9b76cb1', name: this.icon, exportparts: "icon" })), !isEmpty(this.label) && (h("div", { key: '7c73bfe2a3ec90b0fc8700696167f9015dcb9adc', class: "label", part: "label" }, this.label)))));
}
};
KvTagStatus.style = tagStatusCss;
export { KvTabItem as kv_tab_item, KvTagStatus as kv_tag_status };