@limetech/lime-elements
Version:
65 lines (60 loc) • 3.4 kB
JavaScript
import { r as registerInstance, h, H as Host } from './index-DBTJNfo7.js';
import { t as translate } from './translations-DVRaJQvC.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 = () => `*,*::before,*::after{box-sizing:border-box;min-height:0;min-width:0}:host(limel-callout){box-sizing:border-box;display:flex;border-radius:0.5rem;overflow:hidden;--limel-callout-tint-color:var( --callout-color, rgb(var(--color-contrast-100)) );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( --callout-color, rgb(var(--color-gray-default)) )}:host([type=important]){--limel-callout-tint-color:var( --callout-color, rgb(var(--color-sky-default)) )}:host([type=tip]){--limel-callout-tint-color:var( --callout-color, rgb(var(--color-green-default)) )}:host([type=caution]){--limel-callout-tint-color:var( --callout-color, rgb(var(--color-orange-light)) )}:host([type=warning]){--limel-callout-tint-color:var( --callout-color, rgb(var(--color-red-dark)) )}.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);
/**
* Defines how the component is visualized, for example
* which heading, color or icon is used in its user interface.
*/
this.type = 'note';
/**
* Defines the language for translations.
* Will translate the default headings for supported languages.
*/
this.language = 'en';
}
render() {
return (h(Host, { key: '9af3d9dc95f93714f7f334695d64f7f02b8b52e2' }, h("div", { key: '014e90ead94b3c88f33dcb40de1a56d6b85c4c9b', class: "side", role: "presentation" }, h("limel-icon", { key: '042773fb922877be2b6ef77c276a4b24c48517e2', name: getIcon(this.icon, this.type) })), h("div", { key: 'b211a6f7eb0d2680ef96adbbb5b4646c44e8d147', class: "main" }, h("h1", { key: '7e4f4d05a54cc719b51144a21b28cfc1b1024a52', class: "heading" }, getHeading(this.heading, this.type, this.language)), h("slot", { key: 'd1f333b26662b75cd403e3048229e6926e4279ed' }))));
}
};
Callout.style = calloutCss();
export { Callout as limel_callout };