genie-component-library/dist/collection/components/genie-card/genie-card.js

Genie Component Library

import { Component, Prop, h, Host } from "@stencil/core";
import { openURL } from "../../utils/utils";
/**
 * @slot - Content is placed between the heading and text
 * @slot start - Content is placed above heading
 * @slot end - Content is placed after the text
 *
 * @part card - Main card wrapper
 * @part card-heading - Card Heading
 * @part card-text - Card Text
 * @part card-link - Card Link
 */
export class GenieCard {
  constructor() {
    /**
     * Don't alter style on hover
     */
    this.noHover = false;
    /**
     * If `true`, a button tag will be rendered and the card will be tappable.
     */
    this.button = false;
    /**
     * The type of the button. Only used when an `onclick` or `button` property is present.
     */
    this.type = "button";
    /**
     * If `true`, the user cannot interact with the card.
     */
    this.disabled = false;
  }
  render() {
    let link;
    const { href, button, heading } = this;
    const TagType = button
      ? href === undefined
        ? "button"
        : "a"
      : "div";
    const attrs = TagType === "button"
      ? { type: this.type, onClick: (ev) => openURL(href, ev)
      }
      : TagType === "a"
        ? {
          download: this.download,
          href: this.href,
          rel: this.rel,
          target: this.target,
          onClick: (ev) => openURL(href, ev)
        }
        : {};
    if (href) {
      const linkAttrs = {
        download: this.download,
        href: this.href,
        rel: this.rel,
        target: this.target
      };
      link = (h("a", Object.assign({ onClick: (ev) => openURL(href, ev) }, linkAttrs, { "aria-label": heading, part: "card-link", class: "card-link", href: this.href }),
        h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
          h("title", null, "ionicons-v5-o"),
          h("path", { d: "M200.66,352H144a96,96,0,0,1,0-192h55.41", style: {
              fill: "none",
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              "stroke-width": "48px"
            } }),
          h("path", { d: "M312.59,160H368a96,96,0,0,1,0,192H311.34", style: {
              fill: "none",
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              "stroke-width": "48px"
            } }),
          h("line", { x1: "169.07", y1: "256", x2: "344.93", y2: "256", style: {
              fill: "none",
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              "stroke-width": "48px"
            } }))));
    }
    return (h(Host, { part: "card", class: {
        "has-link": !!this.href,
        "card-is-link": !!this.button,
        "no-hover": this.noHover
      } },
      h(TagType, Object.assign({}, attrs, { class: "card-native", disabled: this.disabled }),
        h("slot", { name: "start" }),
        h("h3", { part: "card-heading" }, this.heading),
        h("slot", null),
        h("p", { part: "card-text" }, this.text),
        h("slot", { name: "end" }),
        link)));
  }
  static get is() { return "genie-card"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["genie-card.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["genie-card.css"]
  }; }
  static get properties() { return {
    "heading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "heading",
      "reflect": false
    },
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "text",
      "reflect": false
    },
    "noHover": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Don't alter style on hover"
      },
      "attribute": "no-hover",
      "reflect": false,
      "defaultValue": "false"
    },
    "button": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, a button tag will be rendered and the card will be tappable."
      },
      "attribute": "button",
      "reflect": false,
      "defaultValue": "false"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"submit\" | \"reset\" | \"button\"",
        "resolved": "\"button\" | \"reset\" | \"submit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The type of the button. Only used when an `onclick` or `button` property is present."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "\"button\""
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the card."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "download": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | undefined",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
      },
      "attribute": "download",
      "reflect": false
    },
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | undefined",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
      },
      "attribute": "href",
      "reflect": false
    },
    "rel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | undefined",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
      },
      "attribute": "rel",
      "reflect": false
    },
    "target": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | undefined",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
      },
      "attribute": "target",
      "reflect": false
    }
  }; }
}