@limetech/lime-elements
Version:
142 lines (141 loc) • 4.76 kB
JavaScript
import { h } 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() {
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)),
];
}
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`."
},
"attribute": "heading",
"reflect": true
},
"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`."
},
"attribute": "icon",
"reflect": true
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "CalloutType",
"resolved": "\"caution\" | \"important\" | \"note\" | \"tip\" | \"warning\"",
"references": {
"CalloutType": {
"location": "import",
"path": "../callout/callout.types"
}
}
},
"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."
},
"attribute": "type",
"reflect": true,
"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"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the language for translations.\nWill translate the default headings for supported languages."
},
"attribute": "language",
"reflect": false,
"defaultValue": "'en'"
}
};
}
}
//# sourceMappingURL=callout.js.map