@limetech/lime-elements
Version:
156 lines (155 loc) • 6.62 kB
JavaScript
import { h, Host } from "@stencil/core";
import { getHeading, getIcon } from "./callout.helpers";
/**
* Callouts—also known as Admonitions—are useful for including supportive or
* special content within a large piece of text, or even inside a user
* interface.
*
* When used in a document or text based user interface, the callout attracts
* the reader's attention to a particular piece of information, without
* significantly interrupting their flow of reading the document.
*
* In a user interface, a callout is more intrusive to the end-user. Still, it
* could be a good choice when you intend to slightly disturb the user's
* attention, and challenge them to pay extra attention to the information
* presented. In such cases, a callout should not be used as a static and
* constantly present element of the UI. Rather, it should be displayed when
* something unusual or remarkable demands the user's attention.
*
* @exampleComponent limel-example-callout-note
* @exampleComponent limel-example-callout-important
* @exampleComponent limel-example-callout-tip
* @exampleComponent limel-example-callout-caution
* @exampleComponent limel-example-callout-warning
* @exampleComponent limel-example-callout-rich-content
* @exampleComponent limel-example-callout-custom-heading
* @exampleComponent limel-example-callout-custom-icon
* @exampleComponent limel-example-callout-styles
* @exampleComponent limel-example-custom-type
* @exampleComponent limel-example-callout-composite
*/
export class Callout {
constructor() {
/**
* 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' }))));
}
static get is() { return "limel-callout"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["callout.scss"]
};
}
static get styleUrls() {
return {
"$": ["callout.css"]
};
}
static get properties() {
return {
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Heading of the callout, which can be used to override the\ndefault heading which is displayed based on the chosen `type`."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "heading"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Icon of the callout, which can be used to override the\ndefault icon which is displayed based on the chosen `type`."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "icon"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "CalloutType",
"resolved": "\"caution\" | \"important\" | \"note\" | \"tip\" | \"warning\"",
"references": {
"CalloutType": {
"location": "import",
"path": "../callout/callout.types",
"id": "src/components/callout/callout.types.ts::CalloutType",
"referenceLocation": "CalloutType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines how the component is visualized, for example\nwhich heading, color or icon is used in its user interface."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "type",
"defaultValue": "'note'"
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Languages",
"resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
"references": {
"Languages": {
"location": "import",
"path": "../date-picker/date.types",
"id": "src/components/date-picker/date.types.ts::Languages",
"referenceLocation": "Languages"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the language for translations.\nWill translate the default headings for supported languages."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "language",
"defaultValue": "'en'"
}
};
}
}