@cbpds/web-components
Version:
Web components for the CBP Design System.
202 lines (201 loc) • 8.15 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpCard {
constructor() {
this.color = undefined;
this.variant = undefined;
this.interactive = undefined;
this.href = undefined;
this.disabled = undefined;
this.stretch = false;
this.sx = {};
this.context = undefined;
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (this.interactive == 'selectable' || this.interactive == 'radio') {
if (this.disabled) {
let input = this.host.querySelector('cbp-checkbox input[type="checkbox"], cbp-radio input[type="radio"]');
input.disabled = true;
}
this.host.addEventListener("click", (e) => {
let parent = this.host.querySelector('cbp-card *[slot="cbp-card-title"]');
if (!parent.contains(e.target)) {
let input = this.host.querySelector('cbp-checkbox input[type="checkbox"], cbp-radio input[type="radio"]');
input.click();
}
});
}
}
render() {
if (this.interactive === 'clickable') {
return (h(Host, null, h("a", { class: "cbp-card-clickable", href: this.disabled ? null : this.href, "aria-disabled": this.disabled }, this.variant === 'flag' && h("div", { class: "cbp-card-flag" }, h("slot", { name: "cbp-card-flag" })), this.variant === 'banner' && h("slot", { name: "cbp-card-title" }), h("div", { class: "cbp-card-body" }, this.variant !== 'banner' && h("slot", { name: "cbp-card-title" }), h("slot", null)), h("slot", { name: "cbp-card-actions" }))));
}
else {
return (h(Host, null, this.variant === 'banner' && h("slot", { name: "cbp-card-title" }), this.variant === 'flag' && h("div", { class: "cbp-card-flag" }, h("slot", { name: "cbp-card-flag" })), h("div", { class: "cbp-card-body" }, (this.variant !== 'banner') && h("slot", { name: "cbp-card-title" }), h("slot", null)), !this.interactive && h("slot", { name: "cbp-card-actions" })));
}
}
static get is() { return "cbp-card"; }
static get originalStyleUrls() {
return {
"$": ["cbp-card.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-card.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"info\" | \"success\" | \"warning\" | \"danger\"",
"resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specifies a card color (different from the default color) based on predefined design token values."
},
"attribute": "color",
"reflect": true
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"banner\" | \"decision\" | \"flag\"",
"resolved": "\"banner\" | \"decision\" | \"flag\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies optional variants with difference from the default card."
},
"attribute": "variant",
"reflect": true
},
"interactive": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"clickable\" | \"selectable\" | \"radio\"",
"resolved": "\"clickable\" | \"radio\" | \"selectable\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the interactivity of the card."
},
"attribute": "interactive",
"reflect": true
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the `href` value for the \"clickable\" interactive cards."
},
"attribute": "href",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Marks the rendered card in a disabled state when specified."
},
"attribute": "disabled",
"reflect": true
},
"stretch": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When present, the card will stretch vertically to fill its parent container; most useful when placed in an equally sized grid or row of cards."
},
"attribute": "stretch",
"reflect": true,
"defaultValue": "false"
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-card.js.map