@duetds/components
Version:
This package includes Duet Core Components and related tools.
155 lines (154 loc) • 5.18 kB
JavaScript
import { h } from "@stencil/core";
import { sanitizeString } from "@duetds/js-utils";
import duetIcons from "@duetds/icons";
export class DuetAlert {
constructor() {
/**
* Theme of the card. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Icon to display to the left of the content.
*/
this.icon = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Controls the padding of the component. Can be one of: "auto", "none".
*/
this.padding = "auto";
/**
* Style variation of the alert. Can be one of: "default", "success", "danger", "warning".
*/
this.variation = "default";
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
return (h("div", { class: {
"duet-alert": true,
"duet-alert-has-icon": this.icon !== "",
"duet-p-0": this.padding === "none",
"duet-m-0": this.margin === "none",
[this.variation]: true,
"duet-theme-turva": this.theme === "turva",
}, role: "alert" },
h("div", { class: "duet-alert-container" },
this.icon !== "" ? (h("span", { "aria-hidden": "true", class: "duet-alert-icon", innerHTML: duetIcons[sanitizeString(this.icon)].svg })) : (""),
h("span", null,
h("slot", null)))));
}
static get is() { return "duet-alert"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["duet-alert.scss"]
}; }
static get styleUrls() { return {
"$": ["duet-alert.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Theme of the card. Can be one of: \"default\", \"turva\"."
},
"attribute": "theme",
"reflect": false,
"defaultValue": "\"\""
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Icon to display to the left of the content."
},
"attribute": "icon",
"reflect": false,
"defaultValue": "\"\""
},
"margin": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the margin of the component. Can be one of: \"auto\", \"none\"."
},
"attribute": "margin",
"reflect": false,
"defaultValue": "\"auto\""
},
"padding": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the padding of the component. Can be one of: \"auto\", \"none\"."
},
"attribute": "padding",
"reflect": false,
"defaultValue": "\"auto\""
},
"variation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Style variation of the alert. Can be one of: \"default\", \"success\", \"danger\", \"warning\"."
},
"attribute": "variation",
"reflect": false,
"defaultValue": "\"default\""
}
}; }
static get elementRef() { return "element"; }
}