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

Lime Elements

'use strict';

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

const index = require('./index-174a078a.js');
const translations = require('./translations-d2be6dd7.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 translations.translate.get(key, language);
  }
  catch (_a) {
    return translations.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) {
    index.registerInstance(this, hostRef);
    this.heading = undefined;
    this.icon = undefined;
    this.type = 'note';
    this.language = 'en';
  }
  render() {
    return [
      index.h("div", { class: "side", role: "presentation" }, index.h("limel-icon", { name: getIcon(this.icon, this.type) })),
      index.h("div", { class: "main" }, index.h("h1", { class: "heading" }, getHeading(this.heading, this.type, this.language)), index.h("slot", null)),
    ];
  }
};
Callout.style = calloutCss;

exports.limel_callout = Callout;

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