@limetech/lime-elements
Version:
293 lines (292 loc) • 8.71 kB
JavaScript
import { h, Host, } from '@stencil/core';
import { isItem } from '../action-bar/is-item';
import { getIconName } from '../icon/get-icon-props';
import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
/**
* Card is a component that displays content about a single topic,
* in a structured way. It can contain a header, and some supporting media such
* as an image or an icon, a body of text, or optional actions.
*
* @exampleComponent limel-example-card-basic
* @exampleComponent limel-example-card-image
* @exampleComponent limel-example-card-actions
* @exampleComponent limel-example-card-clickable
* @exampleComponent limel-example-card-orientation
* @exampleComponent limel-example-card-slot
* @exampleComponent limel-example-card-styling
*/
export class Card {
constructor() {
this.handleActionSelect = (event) => {
event.stopPropagation();
if (isItem(event.detail)) {
this.actionSelected.emit(event.detail);
}
};
this.heading = undefined;
this.subheading = undefined;
this.image = undefined;
this.icon = undefined;
this.value = undefined;
this.actions = [];
this.clickable = false;
this.orientation = 'portrait';
}
componentWillLoad() {
const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
this.handleMouseEnter = handleMouseEnter;
this.handleMouseLeave = handleMouseLeave;
}
render() {
return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), h("limel-3d-hover-effect-glow", null))));
}
renderImage() {
var _a;
if (!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src)) {
return;
}
return h("img", { src: this.image.src, alt: this.image.alt, loading: "lazy" });
}
renderHeader() {
if (!this.heading && !this.subheading && !this.icon) {
return;
}
return (h("header", null, this.renderIcon(), h("div", { class: "headings" }, this.renderHeading(), this.renderSubheading())));
}
renderIcon() {
var _a;
const icon = getIconName(this.icon);
const color = typeof this.icon === 'string' ? undefined : (_a = this.icon) === null || _a === void 0 ? void 0 : _a.color;
if (!icon) {
return;
}
return (h("limel-icon", { style: {
color: `${color}`,
}, badge: true, name: icon }));
}
renderHeading() {
if (!this.heading) {
return;
}
return h("h1", { class: "title" }, this.heading);
}
renderSubheading() {
if (!this.subheading) {
return;
}
return h("h2", null, this.subheading);
}
renderSlot() {
return h("slot", { name: "component" });
}
renderValue() {
if (!this.value) {
return;
}
return h("limel-markdown", { value: this.value });
}
renderActionBar() {
if (this.actions.length === 0) {
return;
}
return (h("limel-action-bar", { actions: this.actions, onItemSelected: this.handleActionSelect }));
}
static get is() { return "limel-card"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["card.scss"]
};
}
static get styleUrls() {
return {
"$": ["card.css"]
};
}
static get properties() {
return {
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Heading of the card,\nto provide a short title about the context."
},
"attribute": "heading",
"reflect": true
},
"subheading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Subheading of the card\nto provide a short description of the context."
},
"attribute": "subheading",
"reflect": true
},
"image": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Image",
"resolved": "Image",
"references": {
"Image": {
"location": "import",
"path": "../../global/shared-types/image.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A hero image to display in the card,\nto enrich the content with visual information."
}
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | Icon",
"resolved": "Icon | string",
"references": {
"Icon": {
"location": "import",
"path": "../../global/shared-types/icon.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "An icon, to display along with the heading and subheading."
},
"attribute": "icon",
"reflect": true
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The content of the card.\nSupports markdown, to provide a rich text experience."
},
"attribute": "value",
"reflect": false
},
"actions": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<ActionBarItem | ListSeparator>",
"resolved": "(ListSeparator | ActionBarItem)[]",
"references": {
"Array": {
"location": "global"
},
"ActionBarItem": {
"location": "import",
"path": "../action-bar/action-bar.types"
},
"ListSeparator": {
"location": "import",
"path": "../../global/shared-types/separator.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Actions to display in the card,\nto provide the user with options to interact with the content."
},
"defaultValue": "[]"
},
"clickable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When true, improve the accessibility of the component and hints the user\nthat the card can be interacted width."
},
"attribute": "clickable",
"reflect": true,
"defaultValue": "false"
},
"orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'landscape' | 'portrait'",
"resolved": "\"landscape\" | \"portrait\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The orientation of the card,\nspecially useful when the card has an image."
},
"attribute": "orientation",
"reflect": true,
"defaultValue": "'portrait'"
}
};
}
static get events() {
return [{
"method": "actionSelected",
"name": "actionSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when a action bar item has been clicked."
},
"complexType": {
"original": "ActionBarItem",
"resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any>",
"references": {
"ActionBarItem": {
"location": "import",
"path": "../action-bar/action-bar.types"
}
}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=card.js.map