@kelvininc/ui-components
Version:
Kelvin UI Components
159 lines (158 loc) • 5.83 kB
JavaScript
import { Host, h } from "@stencil/core";
import { isEmpty } from "lodash-es";
import { ESummaryCardType } from "./summary-card.types";
export class KvSummaryCard {
constructor() {
/** (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 is() { return "kv-summary-card"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"light": ["summary-card.light.scss"],
"night": ["summary-card.night.scss"]
};
}
static get styleUrls() {
return {
"light": ["summary-card.light.css"],
"night": ["summary-card.night.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "ESummaryCardType",
"resolved": "ESummaryCardType.Number | ESummaryCardType.Text",
"references": {
"ESummaryCardType": {
"location": "import",
"path": "./summary-card.types",
"id": "src/components/summary-card/summary-card.types.ts::ESummaryCardType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "(required) Used to define font styling according to the data type"
},
"getter": false,
"setter": false,
"reflect": false
},
"loading": {
"type": "boolean",
"attribute": "loading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Defines loading styling for this card"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) The label to use at the top of the card"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"subtitle": {
"type": "string",
"attribute": "subtitle",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) The subtitle of the card"
},
"getter": false,
"setter": false,
"reflect": false
},
"description": {
"type": "string",
"attribute": "description",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) A brief description of the card's info"
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"_label": {}
};
}
static get watchers() {
return [{
"propName": "label",
"methodName": "labelChangeHandler"
}];
}
}