@limetech/lime-elements/dist/esm/limel-callout.entry.js

Lime Elements

import { r as registerInstance, h } from './index-2714248e.js';
import { t as translate } from './translations-91c611da.js';

const calloutIcons = {
  note: 'info',
  important: 'exclamation_mark',
  tip: 'idea',
  caution: 'high_priority',
  warning: 'error',
};
/**
 *
 * @param icon
 * @param type
 */
function getIcon(icon, type = 'note') {
  var _a;
  if (icon) {
    return icon;
  }
  return (_a = calloutIcons[type]) !== null && _a !== void 0 ? _a : calloutIcons.note;
}
/**
 *
 * @param heading
 * @param type
 * @param language
 */
function getHeading(heading, type = 'note', language = 'en') {
  if (heading) {
    return heading;
  }
  const key = `callout.${type}`;
  try {
    return translate.get(key, language);
  }
  catch (_a) {
    return translate.get(key, 'en');
  }
}

const calloutCss = ":host(limel-callout){display:flex;border-radius:0.5rem;overflow:hidden;--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-contrast-100))\n  );color:var(--callout-text-color, rgb(var(--contrast-1100)));font-size:var(--limel-theme-default-font-size)}:host([type=note]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-gray-default))\n  )}:host([type=important]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-sky-default))\n  )}:host([type=tip]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-green-default))\n  )}:host([type=caution]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-orange-light))\n  )}:host([type=warning]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-red-dark))\n  )}.side{padding:0.25rem;position:relative}.side:before{content:\"\";position:absolute;inset:0;opacity:0.2;background-color:var(--limel-callout-tint-color)}.side limel-icon{width:1.5rem;color:var(--limel-callout-tint-color);margin-top:0.0625rem}.main{display:flex;flex:1;flex-direction:column;gap:0.5rem;padding:0.25rem 0.5rem 0.5rem 0.5rem;background-color:var(--callout-background-color, rgb(var(--contrast-300)))}.heading{margin:0;font-size:1rem;font-weight:600}";

const Callout = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.heading = undefined;
    this.icon = undefined;
    this.type = 'note';
    this.language = 'en';
  }
  render() {
    return [
      h("div", { class: "side", role: "presentation" }, h("limel-icon", { name: getIcon(this.icon, this.type) })),
      h("div", { class: "main" }, h("h1", { class: "heading" }, getHeading(this.heading, this.type, this.language)), h("slot", null)),
    ];
  }
};
Callout.style = calloutCss;

export { Callout as limel_callout };

//# sourceMappingURL=limel-callout.entry.js.map