soft-components/dist/collection/components/sc-card/sc-card.js

Simple soft flexible set of web components

import { Component, Host, h, Prop, Element } from '@stencil/core';
import { hasSlot } from '../../utils/component';
export class Card {
  constructor() {
    /**
     * if true, card will appear engraved instead of raised by default.
     */
    this.engraved = false;
    /**
     * If this card has bordered style
     */
    this.bordered = false;
    /**
     * Position of featured media in the card
     */
    this.mediaPosition = null;
    /**
     * Use mouse as the light source (ray-tracing)
     */
    this.rayTracing = false;
  }
  componentWillLoad() {
    this.hasCustomTitle = hasSlot(this.el, 'custom-title');
    this.hasOverflowMenu = hasSlot(this.el, 'overflow-menu');
    this.hasMedia = hasSlot(this.el, 'media-content');
  }
  render() {
    const { engraved, bordered } = this;
    return (h(Host, { class: { engraved, bordered } },
      this.rayTracing && h("sc-ray-tracer", { element: this.el }),
      this.hasMedia && (h("div", { class: "card-media" },
        h("slot", { name: "media-content" }))),
      h("div", { class: "card-inner" },
        h("div", { class: "overflow-menu" },
          h("slot", { name: "overflow-menu" })),
        this.hasCustomTitle || this.cardTitle || this.cardSubtitle ? (h("div", { class: "card-title-container" }, this.hasCustomTitle ? (h("slot", { name: "custom-title" })) : (h("div", null,
          this.cardTitle && (h("div", { class: "card-title" }, this.cardTitle)),
          this.cardSubtitle && (h("div", { class: "card-subtitle" }, this.cardSubtitle)))))) : null,
        h("div", { class: "card-content" },
          h("slot", null)))));
  }
  static get is() { return "sc-card"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-card.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-card.css"]
  }; }
  static get properties() { return {
    "engraved": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean | undefined",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "if true, card will appear engraved instead of raised by default."
      },
      "attribute": "engraved",
      "reflect": false,
      "defaultValue": "false"
    },
    "cardTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Title of the card"
      },
      "attribute": "card-title",
      "reflect": false
    },
    "cardSubtitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Subtitle of the card"
      },
      "attribute": "card-subtitle",
      "reflect": false
    },
    "bordered": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean | undefined",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If this card has bordered style"
      },
      "attribute": "bordered",
      "reflect": true,
      "defaultValue": "false"
    },
    "mediaPosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "| 'top'\n    | 'left'\n    | 'right'\n    | 'bottom'\n    | 'start' // responsive top left\n    | 'end' // responsive bottom right\n    | undefined",
        "resolved": "\"bottom\" | \"end\" | \"left\" | \"right\" | \"start\" | \"top\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Position of featured media in the card"
      },
      "attribute": "media-position",
      "reflect": true,
      "defaultValue": "null"
    },
    "rayTracing": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Use mouse as the light source (ray-tracing)"
      },
      "attribute": "ray-tracing",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get elementRef() { return "el"; }
}