@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 6.07 kB
JavaScript
import{r as a,h as r,H as t}from"./p-D-JVwta2.js";import{E as n}from"./p-BcMhjKoS.js";import{i as e}from"./p-BA_npyc9.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";const i=class{constructor(r){a(this,r),this.loading=!1,this.label="",this._label=e(this.label)?"- -":this.label}labelChangeHandler(a){this._label=e(a)?"- -":a}render(){return r(t,{key:"b933aecfa26089b2f9becbc9d397ce42a908034a"},r("div",{key:"94a9854ca385fdcff147aa4f10251cafb65106a2",class:{"summary-card-container":!0,loading:this.loading}},r("div",{key:"84114a67aaa83bd6c44620e1e85c13003511b1e5",class:{label:!0,number:this.type===n.Number}},!this.loading&&this._label),r("div",{key:"a93a4e27279f4098aa013d4a47a39cab6703a09b",class:"subtitle"},!this.loading&&this.subtitle),r("div",{key:"c8f4916c95e0a8bd3494d5cb7e91e7896aed3c85",class:"description"},!this.loading&&this.description)))}static get watchers(){return{label:["labelChangeHandler"]}}};i.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}}.summary-card-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;display:flex;flex-direction:column;width:124px;height:110px;padding:var(--kv-spacing-4x, 16px) var(--kv-spacing-2x, 8px);border:solid 1px var(--kv-neutral-4, #bebebe);border-radius:4px}.summary-card-container .label,.summary-card-container .subtitle,.summary-card-container .description{user-select:none;transition:all 0.5s ease-out}.summary-card-container .label{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;margin-bottom:var(--kv-spacing, 4px);color:var(--kv-text, #fff)}.summary-card-container .label.number{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none}.summary-card-container .subtitle{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;color:var(--kv-text, #fff)}.summary-card-container .description{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;color:var(--kv-text-step-3, #ddd)}.summary-card-container.loading .label,.summary-card-container.loading .subtitle,.summary-card-container.loading .description{height:12px}.summary-card-container.loading .label{margin-top:6px;width:36px}.summary-card-container.loading .subtitle{margin-top:14px;width:60px}.summary-card-container.loading .description{margin-top:3px;width:70px}.loading .label,.loading .subtitle,.loading .description{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}}.summary-card-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;display:flex;flex-direction:column;width:124px;height:110px;padding:var(--kv-spacing-4x, 16px) var(--kv-spacing-2x, 8px);border:solid 1px var(--kv-neutral-4, #bebebe);border-radius:4px}.summary-card-container .label,.summary-card-container .subtitle,.summary-card-container .description{user-select:none;transition:all 0.5s ease-out}.summary-card-container .label{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;margin-bottom:var(--kv-spacing, 4px);color:var(--kv-text, #fff)}.summary-card-container .label.number{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none}.summary-card-container .subtitle{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;color:var(--kv-text, #fff)}.summary-card-container .description{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;color:var(--kv-text-step-3, #ddd)}.summary-card-container.loading .label,.summary-card-container.loading .subtitle,.summary-card-container.loading .description{height:12px}.summary-card-container.loading .label{margin-top:6px;width:36px}.summary-card-container.loading .subtitle{margin-top:14px;width:60px}.summary-card-container.loading .description{margin-top:3px;width:70px}.loading .label,.loading .subtitle,.loading .description{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{i as kv_summary_card}