@duetds/components
Version:
This package includes Duet Core Components and related tools.
65 lines (64 loc) • 4.77 kB
JavaScript
import { r as registerInstance, h, c as getElement } from './core-12b6bfe8.js';
import { j as jsUtils_6 } from './js-utils-b3b951a3.js';
import { d as duetIcons } from './icons-cfd0386d.js';
var DuetAlert = /** @class */ (function () {
function DuetAlert(hostRef) {
registerInstance(this, hostRef);
/**
* 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.
*/
DuetAlert.prototype.componentWillLoad = function () {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
};
/**
* render() function
* Always the last one in the class.
*/
DuetAlert.prototype.render = function () {
var _a;
return (h("div", { class: (_a = {
"duet-alert": true,
"duet-alert-has-icon": this.icon !== "",
"duet-p-0": this.padding === "none",
"duet-m-0": this.margin === "none"
},
_a[this.variation] = true,
_a["duet-theme-turva"] = this.theme === "turva",
_a), role: "alert" }, h("div", { class: "duet-alert-container" }, this.icon !== "" ? (h("span", { "aria-hidden": "true", class: "duet-alert-icon", innerHTML: duetIcons[jsUtils_6(this.icon)].svg })) : (""), h("span", null, h("slot", null)))));
};
Object.defineProperty(DuetAlert.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetAlert, "style", {
get: function () { return ":host{background:transparent;border:0;padding:0}.duet-alert,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;display:block;width:100%}.duet-alert{background:transparent;border:0;padding:0;margin-bottom:16px!important;padding:16px!important;text-align:center;background:#f2f8fb;border:1px solid #0077b3;border-radius:4px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;color:#00294d;font-weight:400;line-height:1.25}.duet-alert.duet-p-0{padding:0!important}.duet-alert.duet-m-0{margin:0!important}.duet-alert.duet-theme-turva,.duet-theme-turva .duet-alert{color:#111;background:#f3f3f3;border-color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-alert.warning{background:#fffbf4;border-color:#f7b228}.duet-alert.warning.duet-theme-turva,.duet-theme-turva .duet-alert.warning{background:#fffaf3;border-color:#faa40f}.duet-alert.danger{background:#fdf4f7;border-color:#de2362}.duet-alert.danger.duet-theme-turva,.duet-theme-turva .duet-alert.danger{background:#fdf4f3;border-color:#e02a0d}.duet-alert.success{background:#f2f9f7;border-color:#00875a}.duet-alert.success.duet-theme-turva,.duet-theme-turva .duet-alert.success{background:#f3f9f6;border-color:#08874e}.duet-alert-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0 auto!important;text-align:center}.duet-alert-has-icon .duet-alert-container{margin-top:2px!important}.duet-alert-icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;display:inline-block;-ms-flex-item-align:center;align-self:center;width:20px;height:20px;min-width:20px;margin:0 16px 0 0!important}.duet-alert-icon svg{fill:currentColor;display:block;width:100%;height:100%}"; },
enumerable: true,
configurable: true
});
return DuetAlert;
}());
export { DuetAlert as duet_alert };