@kelvininc/ui-components
Version:
Kelvin UI Components
47 lines (41 loc) • 7.07 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var summaryCard_types = require('./summary-card.types-W26sTdH1.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (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.isEmpty(this.label) ? this.label : '- -';
}
/** Watch for changes on the prop label and apply it to the internal state */
labelChangeHandler(newValue) {
this._label = !isEmpty.isEmpty(newValue) ? newValue : '- -';
}
render() {
return (index.h(index.Host, { key: 'b933aecfa26089b2f9becbc9d397ce42a908034a' }, index.h("div", { key: '94a9854ca385fdcff147aa4f10251cafb65106a2', class: {
'summary-card-container': true,
'loading': this.loading
} }, index.h("div", { key: '84114a67aaa83bd6c44620e1e85c13003511b1e5', class: {
label: true,
number: this.type === summaryCard_types.ESummaryCardType.Number
} }, !this.loading && this._label), index.h("div", { key: 'a93a4e27279f4098aa013d4a47a39cab6703a09b', class: "subtitle" }, !this.loading && this.subtitle), index.h("div", { key: 'c8f4916c95e0a8bd3494d5cb7e91e7896aed3c85', class: "description" }, !this.loading && this.description))));
}
static get watchers() { return {
"label": ["labelChangeHandler"]
}; }
};
KvSummaryCard.style = {
light: summaryCardLightCss,
night: summaryCardNightCss
};
exports.kv_summary_card = KvSummaryCard;