@kelvininc/ui-components
Version:
Kelvin UI Components
70 lines (64 loc) • 7.77 kB
JavaScript
import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { E as ESummaryCardType } from './p-BcMhjKoS.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const summaryCardLightCss = "@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}}";
const summaryCardNightCss = "@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}}";
const KvSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class KvSummaryCard extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** (optional) Defines loading styling for this card */
this.loading = false;
/** (optional) The label to use at the top of the card */
this.label = '';
/** The internal label state, updated when prop label changes */
this._label = !isEmpty(this.label) ? this.label : '- -';
}
/** Watch for changes on the prop label and apply it to the internal state */
labelChangeHandler(newValue) {
this._label = !isEmpty(newValue) ? newValue : '- -';
}
render() {
return (h(Host, { key: 'b933aecfa26089b2f9becbc9d397ce42a908034a' }, h("div", { key: '94a9854ca385fdcff147aa4f10251cafb65106a2', class: {
'summary-card-container': true,
'loading': this.loading
} }, h("div", { key: '84114a67aaa83bd6c44620e1e85c13003511b1e5', class: {
label: true,
number: this.type === ESummaryCardType.Number
} }, !this.loading && this._label), h("div", { key: 'a93a4e27279f4098aa013d4a47a39cab6703a09b', class: "subtitle" }, !this.loading && this.subtitle), h("div", { key: 'c8f4916c95e0a8bd3494d5cb7e91e7896aed3c85', class: "description" }, !this.loading && this.description))));
}
static get watchers() { return {
"label": ["labelChangeHandler"]
}; }
static get style() { return {
light: summaryCardLightCss,
night: summaryCardNightCss
}; }
}, [33, "kv-summary-card", {
"type": [1],
"loading": [4],
"label": [1],
"subtitle": [1],
"description": [1],
"_label": [32]
}, undefined, {
"label": ["labelChangeHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-summary-card"];
components.forEach(tagName => { switch (tagName) {
case "kv-summary-card":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvSummaryCard$1);
}
break;
} });
}
defineCustomElement$1();
const KvSummaryCard = KvSummaryCard$1;
const defineCustomElement = defineCustomElement$1;
export { KvSummaryCard, defineCustomElement };