@kelvininc/ui-components
Version:
Kelvin UI Components
65 lines (61 loc) • 4.54 kB
JavaScript
import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { b as ETooltipPosition } from './p-BRgmvbuh.js';
import { b as EIconName } from './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$4 } from './p-B41PGLQm.js';
import { d as defineCustomElement$3 } from './p-BIWUEm1f.js';
import { d as defineCustomElement$2 } from './p-Dmh-PER6.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.js';
const wizardHeaderCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--text-color:var(--kv-neutral-1, #f2f2f6);--separator-color:var(--kv-neutral-2, #e5e5e5);--container-padding:var(--kv-spacing-4x, 16px)}.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: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;letter-spacing:1.5px;text-transform:uppercase}.wizard-header-container .left-container .description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:300;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none}.wizard-header-container .left-container .separator{width:4px;height:4px;border-radius:50%;margin:0 var(--kv-spacing-2x, 8px);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(--kv-spacing-2x, 8px)}";
const KvWizardHeader = /*@__PURE__*/ proxyCustomElement(class KvWizardHeader extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
}
render() {
var _a;
return (h(Host, { key: '2e9d5797f3f1871cfaf220d409101686e31ef534' }, h("div", { key: '5914e6c5456216c14727a955b3e7b840585c372e', class: "wizard-header-container" }, h("div", { key: 'c95e9b08c31c456cb478bc6ff78f1cc63fcae710', class: "left-container" }, h("span", { key: '1a69f83a660350cd0bd0569c406ed08e4a44fae2', class: "label" }, this.label), h("span", { key: '1e0ffb180b7e68b75c9c3595f32927d34d94b650', class: "separator" }), h("span", { key: '18679e998932493d2ac40ae6e057b78a0f634778', class: "description" }, this.description), ((_a = this.tip) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("kv-toggle-tip", { key: '8e03dfb2887f5c5d9d4d329a9cc66d17bbc67110', text: this.tip, position: ETooltipPosition.Bottom, customClass: "wizard-header-tip" }, h("kv-icon", { key: 'e938f09434a38cb13a79ee8d6fcdc7f8039b033d', name: EIconName.Info, slot: "open-element-slot" })))), h("slot", { key: '3c60f6589c4a28582b450fd42620a4cfcf4a2854', name: "additional-header-actions" }))));
}
static get style() { return wizardHeaderCss; }
}, [1, "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 };