@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 21.9 kB
JavaScript
import{r as e,c as o,h as r,F as t,H as a,g as n}from"./p-D-JVwta2.js";import{E as i}from"./p-SVedE_O8.js";import{E as l,a as d}from"./p-CBuzk8fR.js";import{D as c}from"./p-YDhuCIKq.js";import{i as s}from"./p-BA_npyc9.js";import{t as p}from"./p-BlTxH6qj.js";import{i as h}from"./p-C9bG1i86.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";import"./p-CqZa0G50.js";const v={[l.Success]:i.Success,[l.Error]:i.Error,[l.Warning]:i.Warning,[l.Info]:i.Info,[l.None]:null},f=class{constructor(r){e(this,r),this.toggleExpand=o(this,"toggleExpand",7),this.itemClick=o(this,"itemClick",7),this.labelsSize=d.Small,this.hasChildren=!1,this.expanded=!1,this.disabled=!1,this.selected=!1,this.highlighted=!1,this.spotlighted=!1,this.showTooltip=!1,this.loading=!1,this.preventDefault=!1,this.expandIcon=i.ArrowDropUp}itemClickHandler(e){e.stopPropagation()}toggleExpandHandler(e){e.stopPropagation()}get hasChildrenSlot(){return!s(this.el.querySelector('[slot="child-slot"]'))}get requiresToggleButton(){return this.hasChildren||this.hasChildrenSlot}connectedCallback(){this.toggleClickThrottler=p((e=>this.toggleExpand.emit(e)),c),this.itemClickThrottler=p((e=>this.itemClick.emit(e)),c)}onItemClick(e){this.preventDefault&&e.preventDefault(),this.itemClickThrottler(e)}render(){return r(a,{key:"759d4f137e4083ee7920b5084a771936662c7d44"},r("div",{key:"9970ceb8229d9b066d57c1497f86c36d0659c476",class:"node-container"},r("div",{key:"9c00f621e28de7c5650c1a213559247b88c02876",class:{"node-wrapper":!0,disabled:this.disabled,selected:this.selected,highlighted:this.highlighted,spotlight:this.spotlighted,loading:this.loading}},!this.loading&&r(t,{key:"c3c666b4c08c0aefad262c059f2579862ead0fd0"},this.requiresToggleButton&&r("div",{key:"d22362ed25b57444689af695ad9712ab97d7d356",class:"expander-arrow",onClick:this.toggleClickThrottler},r("kv-icon",{key:"3c2f7c17114c6ec78a63803b63156bce8ea04c87",name:this.expandIcon,customClass:{"pk-grey3":!0,"rotate-180":this.expanded,"rotate-90":!this.expanded}})),r("div",{key:"5eb1be0add38be59ddb6cf3ed2528f91bcc1855d",class:{"node-content-wrapper":!0,disabled:this.disabled,selected:this.selected,"no-filled":s(this.label)&&!s(this.placeholder)},onClick:!this.disabled&&this.onItemClick.bind(this)},this.icon&&r("div",{key:"8f935b3628e9f92acfde722b1a5f1ade42a4b4aa",class:"node-icon"},r("kv-icon",{key:"0ec19df274ebc8220a59b0f912586978b09ea1d9",name:this.icon,class:"main-icon",exportparts:"icon"}),this.iconState&&r("kv-icon",{key:"77d03607ca88187d2b571b8f5dfa7fee53c016d8",name:v[this.iconState],customClass:"icon-12",class:{"state-icon":!0,[this.iconState]:!0}})),(this.label||this.placeholder)&&r("div",{key:"65c0976fe97897fde602c2119a4b8ae8c812bf7e",class:`labels labels-${this.labelsSize}`},r("kv-tooltip",{key:"e86087a50d51f87bd7dd86c7f8e9229a345d3854",delay:this.tooltipDelay,disabled:!this.showTooltip,text:this.label||this.placeholder,truncate:!0},r("div",{key:"c856957529d3a1b4cbfffa576458dde4b42f6137",class:{title:!0,[`title-${this.labelsSize}`]:!0}},this.label||this.placeholder)),this.additionalLabel&&r("div",{key:"3073f81359a5a4b4ceda1a7e0e11e8af6590ecf7",class:"sub-title"},this.additionalLabel)),r("div",{key:"b30acc409616174c521c0d02100f16072ac81d78",class:"right-indicators"},h(this.counter)&&this.counter>=0&&r("div",{key:"d83f6af94073716ab1d8c41cd3aace6439184aa6",class:"alarm-bubble"},r("kv-badge",{key:"06ded66755edab9c623ec026b517ec00dd785c91",state:this.counterState},this.counter>100?"+99":this.counter))))),this.loading&&r("div",{key:"b5ea0167b58bb744efabdbddb7829dcc788b3499",class:"node-loading"})),r("div",{key:"942d559bb1414787056cc96ba71b332d86926045",part:"children",class:"children",style:{display:this.expanded?"block":"none"}},r("slot",{key:"040f1d4d3d7accf14f016154f1fe56128911bf0e",name:"child-slot"}))))}get el(){return n(this)}};f.style={light:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--node-width:300px;--node-height:40px;--node-gap:var(--kv-spacing-2x, 8px);--children-offset:var(--kv-spacing-3x, 12px);--vertical-lines-height:calc(var(--private-vertical-line-height) + var(--private-node-gap));--horizontal-lines-width:calc(var(--private-left-shift) - 2px);--children-margin-top:var(--node-gap);--children-padding-left:var(--kv-spacing-2x, 8px);--children-margin-left:0;--border-radius:2px;--node-icon-width:24px;--node-icon-height:24px;--private-left-shift:0px;--private-node-gap:0;--private-vertical-line-height:0;--private-padding-left:0}:host kv-icon{--icon-width:var(--node-icon-width);--icon-height:var(--node-icon-height)}:host .node-container{position:relative;user-select:none}:host .node-container::after{content:"";position:absolute;border-left:1px dashed var(--connector-lines-color);height:var(--vertical-lines-height);width:0;top:calc(-1 * var(--private-node-gap));margin-left:calc(var(--children-margin-left) - var(--private-left-shift))}:host .children{margin-left:var(--children-margin-left);padding-left:var(--private-padding-left)}:host .children ::slotted(kv-tree-item){--private-left-shift:var(--children-offset);--private-node-gap:var(--node-gap);--private-vertical-line-height:100%;--children-margin-left:calc(var(--kv-spacing-5x, 20px) + var(--private-left-shift));--private-padding-left:var(--children-padding-left)}:host .children ::slotted(kv-tree-item:last-child){--private-vertical-line-height:calc(var(--node-height) / 2 +4px)}:host .node-loading{display:flex;width:100%;height:100%}:host .node-wrapper{position:relative;display:flex;width:var(--node-width);height:var(--node-height);margin:var(--children-margin-top) 0 0 var(--children-margin-left);align-items:center;box-sizing:border-box;padding:var(--kv-spacing-2x, 8px) 0 var(--kv-spacing-2x, 8px) var(--children-padding-left);background-color:var(--background-color-default);border:1px solid var(--border-color-default);border-radius:var(--border-radius)}:host .node-wrapper::before{content:"";position:absolute;left:calc(-1 * var(--private-left-shift));width:var(--horizontal-lines-width);border-top:1px dashed var(--connector-lines-color)}:host .node-wrapper:hover,:host .node-wrapper.selected:hover,:host .node-wrapper.highlighted:hover{background-color:var(--background-color-focused)}:host .node-wrapper.highlighted{background-color:var(--background-color-highlighted);border-color:var(--border-color-highlighted)}:host .node-wrapper.spotlight .title-small{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;text-transform:none;color:var(--title-color-selected)}:host .node-wrapper.spotlight .title-regular{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--title-color-selected)}:host .node-wrapper.selected{background-color:var(--background-color-focused);border-color:var(--border-color-selected);}:host .node-wrapper.selected .expander-arrow kv-icon{--icon-color:var(--icon-color-selected)}:host .node-wrapper.disabled:hover,:host .node-wrapper.disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled)}:host .node-wrapper.loading{padding:0;background-color:unset;border:unset}:host .expander-arrow{cursor:pointer;padding-left:var(--kv-spacing-2x, 8px)}:host .expander-arrow kv-icon{--icon-color:var(--icon-color-default);align-items:center}:host .node-content-wrapper{flex:1;min-width:0;height:100%;display:flex;align-items:center;padding:0 var(--kv-spacing-2x, 8px);border-radius:0;text-decoration:none;cursor:pointer}:host .node-content-wrapper .node-icon{position:relative;width:var(--node-icon-width);height:var(--node-icon-height)}:host .node-content-wrapper .main-icon{--icon-color:var(--icon-color-default);display:inline-flex;align-items:center;justify-content:center}:host .node-content-wrapper .state-icon{--icon-color:var(--kv-neutral-1, #f2f2f6);position:absolute;right:0;bottom:0}:host .node-content-wrapper .state-icon.info{--icon-color:var(--kv-info, #276ef1);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.warning{--icon-color:var(--kv-warning, #ffc043)}:host .node-content-wrapper .state-icon.success{--icon-color:var(--kv-success, #05a357);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.error{--icon-color:var(--kv-error, #e11900);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .labels{flex:1;min-width:0;margin-left:var(--kv-spacing-2x, 8px);display:inline-flex;flex-direction:column;color:var(--title-color-default)}:host .node-content-wrapper .labels-small{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none}:host .node-content-wrapper .labels-regular{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none}:host .node-content-wrapper .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .node-content-wrapper .sub-title{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub-title-color-default)}:host .node-content-wrapper.no-filled .main-icon{--icon-color:var(--icon-color-no-filled)}:host .node-content-wrapper.no-filled .state-icon{opacity:0.5}:host .node-content-wrapper.no-filled .title{color:var(--title-color-no-filled)}:host .node-content-wrapper.no-filled .sub-title{color:var(--sub-title-color-no-filled)}:host .node-content-wrapper.selected .main-icon{--icon-color:var(--icon-color-selected)}:host .node-content-wrapper.selected .title-small{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;text-transform:none;color:var(--title-color-selected)}:host .node-content-wrapper.selected .title-regular{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--title-color-selected)}:host .node-content-wrapper.disabled{cursor:not-allowed}:host .node-content-wrapper.disabled .main-icon{--icon-color:var(--icon-color-disabled)}:host .node-content-wrapper.disabled .state-icon{opacity:0.5}:host .node-content-wrapper.disabled .title{color:var(--title-color-disabled)}:host .node-content-wrapper.disabled .sub-title{color:var(--sub-title-color-disabled)}:host .node-content-wrapper.disabled .alarm-bubble{opacity:0.5}:host .alarm-bubble{width:16px;height:16px;background-color:var(--kv-neutral-5, #707070);border-radius:50%;text-align:center;line-height:15px}:host{--connector-lines-color:var(--kv-primary, #005cc7);--background-color-default:var(--kv-neutral-0, #fff);--background-color-focused:rgba(var(--kv-primary-rgb, 0, 92, 199), 0.1);--background-color-disabled:var(--kv-neutral-1, #f2f2f6);--background-color-highlighted:rgba(var(--kv-primary-rgb, 0, 92, 199), 0.1);--border-color-default:var(--kv-neutral-3, #ddd);--border-color-disabled:var(--kv-neutral-3, #ddd);--border-color-selected:var(--kv-neutral-3, #ddd);--border-color-highlighted:var(--kv-neutral-3, #ddd);--icon-color-default:var(--kv-neutral-3, #ddd);--icon-color-disabled:var(--kv-neutral-3, #ddd);--icon-color-selected:var(--kv-primary, #005cc7);--icon-color-no-filled:var(--kv-neutral-3, #ddd);--title-color-default:var(--kv-neutral-9, #121212);--title-color-disabled:var(--kv-neutral-5, #707070);--title-color-selected:var(--kv-neutral-9, #121212);--title-color-no-filled:var(--kv-neutral-5, #707070);--sub-title-color-default:var(--kv-neutral-5, #707070);--sub-title-color-disabled:var(--kv-neutral-5, #707070);--sub-title-color-no-filled:var(--kv-neutral-5, #707070)}.node-loading{background:linear-gradient(90deg, rgba(var(--kv-neutral-2-rgb, 229, 229, 229), 0.3) 0%, var(--kv-neutral-2, #e5e5e5) 50%, rgba(var(--kv-neutral-2-rgb, 229, 229, 229), 0.3) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;transition:all 1s ease-in;border-radius:4px}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}',night:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--node-width:300px;--node-height:40px;--node-gap:var(--kv-spacing-2x, 8px);--children-offset:var(--kv-spacing-3x, 12px);--vertical-lines-height:calc(var(--private-vertical-line-height) + var(--private-node-gap));--horizontal-lines-width:calc(var(--private-left-shift) - 2px);--children-margin-top:var(--node-gap);--children-padding-left:var(--kv-spacing-2x, 8px);--children-margin-left:0;--border-radius:2px;--node-icon-width:24px;--node-icon-height:24px;--private-left-shift:0px;--private-node-gap:0;--private-vertical-line-height:0;--private-padding-left:0}:host kv-icon{--icon-width:var(--node-icon-width);--icon-height:var(--node-icon-height)}:host .node-container{position:relative;user-select:none}:host .node-container::after{content:"";position:absolute;border-left:1px dashed var(--connector-lines-color);height:var(--vertical-lines-height);width:0;top:calc(-1 * var(--private-node-gap));margin-left:calc(var(--children-margin-left) - var(--private-left-shift))}:host .children{margin-left:var(--children-margin-left);padding-left:var(--private-padding-left)}:host .children ::slotted(kv-tree-item){--private-left-shift:var(--children-offset);--private-node-gap:var(--node-gap);--private-vertical-line-height:100%;--children-margin-left:calc(var(--kv-spacing-5x, 20px) + var(--private-left-shift));--private-padding-left:var(--children-padding-left)}:host .children ::slotted(kv-tree-item:last-child){--private-vertical-line-height:calc(var(--node-height) / 2 +4px)}:host .node-loading{display:flex;width:100%;height:100%}:host .node-wrapper{position:relative;display:flex;width:var(--node-width);height:var(--node-height);margin:var(--children-margin-top) 0 0 var(--children-margin-left);align-items:center;box-sizing:border-box;padding:var(--kv-spacing-2x, 8px) 0 var(--kv-spacing-2x, 8px) var(--children-padding-left);background-color:var(--background-color-default);border:1px solid var(--border-color-default);border-radius:var(--border-radius)}:host .node-wrapper::before{content:"";position:absolute;left:calc(-1 * var(--private-left-shift));width:var(--horizontal-lines-width);border-top:1px dashed var(--connector-lines-color)}:host .node-wrapper:hover,:host .node-wrapper.selected:hover,:host .node-wrapper.highlighted:hover{background-color:var(--background-color-focused)}:host .node-wrapper.highlighted{background-color:var(--background-color-highlighted);border-color:var(--border-color-highlighted)}:host .node-wrapper.spotlight .title-small{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;text-transform:none;color:var(--title-color-selected)}:host .node-wrapper.spotlight .title-regular{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--title-color-selected)}:host .node-wrapper.selected{background-color:var(--background-color-focused);border-color:var(--border-color-selected);}:host .node-wrapper.selected .expander-arrow kv-icon{--icon-color:var(--icon-color-selected)}:host .node-wrapper.disabled:hover,:host .node-wrapper.disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled)}:host .node-wrapper.loading{padding:0;background-color:unset;border:unset}:host .expander-arrow{cursor:pointer;padding-left:var(--kv-spacing-2x, 8px)}:host .expander-arrow kv-icon{--icon-color:var(--icon-color-default);align-items:center}:host .node-content-wrapper{flex:1;min-width:0;height:100%;display:flex;align-items:center;padding:0 var(--kv-spacing-2x, 8px);border-radius:0;text-decoration:none;cursor:pointer}:host .node-content-wrapper .node-icon{position:relative;width:var(--node-icon-width);height:var(--node-icon-height)}:host .node-content-wrapper .main-icon{--icon-color:var(--icon-color-default);display:inline-flex;align-items:center;justify-content:center}:host .node-content-wrapper .state-icon{--icon-color:var(--kv-neutral-1, #f2f2f6);position:absolute;right:0;bottom:0}:host .node-content-wrapper .state-icon.info{--icon-color:var(--kv-info, #276ef1);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.warning{--icon-color:var(--kv-warning, #ffc043)}:host .node-content-wrapper .state-icon.success{--icon-color:var(--kv-success, #05a357);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .state-icon.error{--icon-color:var(--kv-error, #e11900);--icon-background-color:var(--kv-neutral-0, #fff)}:host .node-content-wrapper .labels{flex:1;min-width:0;margin-left:var(--kv-spacing-2x, 8px);display:inline-flex;flex-direction:column;color:var(--title-color-default)}:host .node-content-wrapper .labels-small{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none}:host .node-content-wrapper .labels-regular{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none}:host .node-content-wrapper .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .node-content-wrapper .sub-title{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub-title-color-default)}:host .node-content-wrapper.no-filled .main-icon{--icon-color:var(--icon-color-no-filled)}:host .node-content-wrapper.no-filled .state-icon{opacity:0.5}:host .node-content-wrapper.no-filled .title{color:var(--title-color-no-filled)}:host .node-content-wrapper.no-filled .sub-title{color:var(--sub-title-color-no-filled)}:host .node-content-wrapper.selected .main-icon{--icon-color:var(--icon-color-selected)}:host .node-content-wrapper.selected .title-small{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;text-transform:none;color:var(--title-color-selected)}:host .node-content-wrapper.selected .title-regular{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--title-color-selected)}:host .node-content-wrapper.disabled{cursor:not-allowed}:host .node-content-wrapper.disabled .main-icon{--icon-color:var(--icon-color-disabled)}:host .node-content-wrapper.disabled .state-icon{opacity:0.5}:host .node-content-wrapper.disabled .title{color:var(--title-color-disabled)}:host .node-content-wrapper.disabled .sub-title{color:var(--sub-title-color-disabled)}:host .node-content-wrapper.disabled .alarm-bubble{opacity:0.5}:host .alarm-bubble{width:16px;height:16px;background-color:var(--kv-neutral-5, #707070);border-radius:50%;text-align:center;line-height:15px}:host{--connector-lines-color:var(--kv-neutral-5, #707070);--background-color-default:var(--kv-neutral-6, #3f3f3f);--background-color-focused:var(--kv-neutral-5, #707070);--background-color-disabled:var(--kv-neutral-7, #2a2a2a);--background-color-highlighted:var(--kv-neutral-6, #3f3f3f);--border-color-default:var(--kv-neutral-5, #707070);--border-color-disabled:var(--kv-neutral-6, #3f3f3f);--border-color-selected:var(--kv-neutral-0, #fff);--border-color-highlighted:var(--kv-neutral-4, #bebebe);--icon-color-default:var(--kv-neutral-2, #e5e5e5);--icon-color-disabled:var(--kv-neutral-5, #707070);--icon-color-selected:var(--kv-neutral-0, #fff);--icon-color-no-filled:var(--kv-neutral-4, #bebebe);--title-color-default:var(--kv-neutral-2, #e5e5e5);--title-color-disabled:var(--kv-neutral-5, #707070);--title-color-selected:var(--kv-neutral-0, #fff);--title-color-no-filled:var(--kv-neutral-4, #bebebe);--sub-title-color-default:var(--kv-neutral-4, #bebebe);--sub-title-color-disabled:var(--kv-neutral-5, #707070);--sub-title-color-no-filled:var(--kv-neutral-4, #bebebe)}.node-loading{background:linear-gradient(90deg, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 0%, var(--kv-neutral-7, #2a2a2a) 50%, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;transition:all 1s ease-in;border-radius:4px}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}'};export{f as kv_tree_item}