@claromentis/design-system
Version:
Claromentis Design System Component Library
176 lines (175 loc) • 5.87 kB
JavaScript
import { h } from '@stencil/core';
import 'ionicons';
/**
* @slot status - holds text or cla-badge component to show the status of a card
* @slot - Holds a cla-card-figure or cla-card-image
*/
export class Cardmedia {
constructor() {
/**
* Function to determine icon type (Glyphicon or Ionicon)
*/
this.iconType = () => {
const regex = /^(.+?)-/g;
if (!this.placeholder) {
return "";
}
let found = this.placeholder.match(regex);
if (found[0] === "glyphicons-") {
return "glyphicon";
}
else {
return "ionicon";
}
};
this.placeholder = undefined;
this.height = undefined;
this.styleclass = '';
this.preserveaspect = false;
this.bgcolor = 'var(--theme-primary-color, var(--white))';
this.iconcolor = 'var(--theme-primary-color-contrast, var(--gray-900))';
}
getClassMap() {
const preserveaspect = this.preserveaspect;
const styleclass = this.styleclass;
return {
'card-image-wrapper card-img-top': true,
[`preserve-aspect`]: preserveaspect,
[`${styleclass}`]: styleclass != ""
};
}
render() {
let placeHolderIconMarkup;
if (this.iconType() === "glyphicon") {
placeHolderIconMarkup = h("svg", { style: { fill: `${this.iconcolor}` }, class: `${this.placeholder} icon` }, h("use", { xlinkHref: `/assets/svgs/symbol-defs.svg#${this.placeholder}` }));
}
else if (this.iconType() === "ionicon") {
placeHolderIconMarkup = h("ion-icon", { style: { color: `${this.iconcolor}` }, name: `${this.placeholder}` });
}
return (h("div", { style: { height: `${this.height}`,
backgroundColor: `${this.bgcolor}` }, class: this.getClassMap() }, h("div", { class: "overlay-content" }, h("slot", { name: "status" })), this.placeholder && !this.preserveaspect ? h("div", { class: `placeholder ` }, placeHolderIconMarkup) : "", h("slot", null)));
}
static get is() { return "cla-card-media"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["cla-card-media.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-card-media.css"]
};
}
static get properties() {
return {
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Placeholder icon - this can be either a Glyphicon or an Ionicon\n In the case of glyphicons us the 'glyphicons-...' class\n In the case of the Ionicon use the name attribut of the icon e.g 'hourglass-outline'\n This prop is not compatible with preserveaspect"
},
"attribute": "placeholder",
"reflect": false
},
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Height of card-media panel i.e. 100px/10vh/5rem etc - if no height is applied the standard height is 165px, set to auto when using the preserveaspect attribute on cla-card-image"
},
"attribute": "height",
"reflect": false
},
"styleclass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Additional styling classes if needed;"
},
"attribute": "styleclass",
"reflect": false,
"defaultValue": "''"
},
"preserveaspect": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set as 'true' to preserve the aspect ratio of the uploaded image"
},
"attribute": "preserveaspect",
"reflect": false,
"defaultValue": "false"
},
"bgcolor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The placeholder background colour\nThe default uses Claromentis' product theme primary colour variable in the first instance\nIf the component is used in a project without this variable it will default to white."
},
"attribute": "bgcolor",
"reflect": false,
"defaultValue": "'var(--theme-primary-color, var(--white))'"
},
"iconcolor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The placeholder icon colour\nThe default uses Claromentis' product theme primary colour contrast variable in the first instance\nIf the component is used in a project without this variable it will default to 'var(--gray-900)'."
},
"attribute": "iconcolor",
"reflect": false,
"defaultValue": "'var(--theme-primary-color-contrast, var(--gray-900))'"
}
};
}
static get elementRef() { return "el"; }
}