genie-component-library/dist/cjs/genie-card.cjs.entry.js

Genie Component Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-f6f3ecf6.js');

const SCHEME = /^[a-z][a-z0-9+\-.]*:/;
const openURL = async (url, ev) => {
  if (url != null && url[0] !== '#' && !SCHEME.test(url)) {
    const router = document.querySelector('ion-router');
    if (router) {
      if (ev != null) {
        ev.preventDefault();
      }
      return router.push(url, 'forward');
    }
  }
  return false;
};

const genieCardCss = ":host{font-size:100%;line-height:1.6;box-sizing:border-box;display:block;background:var(--color-background, #fff);padding:0;border-radius:var(--border-radius, 25px);box-shadow:0 7px 20px rgba(100, 28, 2, 0.135);transition:background-color 300ms ease, color 300ms ease;position:relative;z-index:1}:host h3{color:var(--heading-color-override, var(--color-primary, #503f9d));line-height:1.2;font-size:var(--heading-font-size, 30px)}:host a{text-decoration:none}:host .card-native{display:block;border:none;margin:0;padding:2em;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;text-align:inherit;outline:none;}:host .card-native::-moz-focus-inner{border:0;padding:0}:host a.card-link{content:\"\";display:block;position:absolute;bottom:0;right:0;width:50px;height:50px;border-radius:var(--a-border-radius, 0 25px);cursor:pointer;transition:inherit;background-color:var(--color-accent, #fb6f3c);text-align:center}:host a.card-link svg{stroke:var(--color-background, #fff);width:30px;height:30px;padding-top:10px}:host p{font-size:var(--text-font-size, 16px);color:var(--text-color-override, var(--color-primary, #503f9d));text-decoration:none}:host(.card-is-link){cursor:pointer}:host(:hover:not(.no-hover)){background-color:var(--color-accent, #fb6f3c)}:host(:hover:not(.no-hover)) h3{color:var(--heading-color-override-hover, var(--color-background, #fff))}:host(:hover:not(.no-hover)) p{color:var(--text-color-override-hover, var(--color-background, #fff))}:host(:hover:not(.no-hover)) a.card-link{background-color:var(--color-background, #fff)}:host(:hover:not(.no-hover)) a.card-link svg{stroke:var(--color-accent, #fb6f3c)}";

const GenieCard = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * 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 = (index.h("a", Object.assign({ onClick: (ev) => openURL(href, ev) }, linkAttrs, { "aria-label": heading, part: "card-link", class: "card-link", href: this.href }), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("title", null, "ionicons-v5-o"), index.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"
        } }), index.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"
        } }), index.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 (index.h(index.Host, { part: "card", class: {
        "has-link": !!this.href,
        "card-is-link": !!this.button,
        "no-hover": this.noHover
      } }, index.h(TagType, Object.assign({}, attrs, { class: "card-native", disabled: this.disabled }), index.h("slot", { name: "start" }), index.h("h3", { part: "card-heading" }, this.heading), index.h("slot", null), index.h("p", { part: "card-text" }, this.text), index.h("slot", { name: "end" }), link)));
  }
};
GenieCard.style = genieCardCss;

exports.genie_card = GenieCard;