@kelvininc/ui-components
Version:
Kelvin UI Components
61 lines (57 loc) • 4.26 kB
JavaScript
import { H as proxyCustomElement, I as H, K as h, f as ETooltipPosition, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$4 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$3 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$2 } from './p-CJY_M4BW.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
const wizardHeaderCss = "@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{--text-color:var(--text-surface-neutral-secondary);--separator-color:var(--text-surface-neutral-secondary);--container-padding:var(--spacing-2xl)}.wizard-header-container{display:flex;padding:var(--container-padding);justify-content:space-between}.wizard-header-container .left-container{display:flex;align-items:center;flex:1}.wizard-header-container .left-container .label,.wizard-header-container .left-container .description{color:var(--text-color)}.wizard-header-container .left-container .label{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase}.wizard-header-container .left-container .description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0}.wizard-header-container .left-container .separator{width:4px;height:4px;border-radius:50%;margin:0 var(--spacing-md);background-color:var(--separator-color)}.wizard-header-container .left-container kv-toggle-tip .toggle-tip-open-element-container{cursor:pointer;user-select:none;pointer-events:all;margin-left:var(--spacing-md)}";
const KvWizardHeader = /*@__PURE__*/ proxyCustomElement(class KvWizardHeader extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
}
render() {
var _a;
return (h(Host, { key: '755722aafe8c7c992d81936e1fd05bc970a49a8f' }, h("div", { key: 'ea3295bdc10841fcd2636f00dbe33db3965cc03e', class: "wizard-header-container" }, h("div", { key: '2196bef1c7318b14a6096cc7a4fef74c864eab8a', class: "left-container" }, h("span", { key: '0396db15a603d405e72af97cf00efbf5341d520a', class: "label" }, this.label), h("span", { key: '421cba23aac898ce48870e7b3d7a44148ee23bac', class: "separator" }), h("span", { key: 'ba0b7f662cbe4b0504d98e4fca5295dab09caabb', class: "description" }, this.description), ((_a = this.tip) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("kv-toggle-tip", { key: 'afc847b950a6c13e99f8b393fd18036bd9dba376', text: this.tip, position: ETooltipPosition.Bottom, customClass: "wizard-header-tip" }, h("kv-icon", { key: '082f1c4c12a0a8658cf373baa6108d5367a07881', name: EIconName.Info, slot: "open-element-slot" })))), h("slot", { key: '7cea27cf9c27afeb6fc428498bef8b8358066fb4', name: "additional-header-actions" }))));
}
static get style() { return wizardHeaderCss; }
}, [257, "kv-wizard-header", {
"label": [513],
"description": [513],
"tip": [513]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-wizard-header", "kv-icon", "kv-portal", "kv-toggle-tip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-wizard-header":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvWizardHeader);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-toggle-tip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvWizardHeader as K, defineCustomElement as d };