@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
67 lines (66 loc) • 2.44 kB
JavaScript
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
import { h } from "@stencil/core";
import clsx from "clsx";
const enumGuard = (values) => (x) => values.includes(x);
const ROLES = ['status', 'alert'];
const TYPES = ['error', 'warning', 'info', 'ok'];
const isAlertType = enumGuard(TYPES);
const typeToRole = {
info: 'status',
ok: 'status',
warning: 'alert',
error: 'alert',
};
export class Alert {
constructor() {
this.type = undefined;
}
render() {
const computedType = isAlertType(this.type) ? this.type : 'info';
const computedRole = typeToRole[computedType];
return (h("div", { key: '9ce4e209c150dee7dc3495978cac5203f76be88f', class: clsx('utrecht-alert', {
'utrecht-alert--error': computedType === 'error',
'utrecht-alert--info': computedType === 'info',
'utrecht-alert--ok': computedType === 'ok',
'utrecht-alert--warning': computedType === 'warning',
}) }, h("div", { key: '0ef049514f7b3d3bc885e059c80fe64d9d769660', class: "utrecht-alert__icon" }, h("slot", { key: '821be68c9f840049340a8a92e06a74a7f56856f5', name: "icon" })), h("div", { key: '375e985a21bdb913deb4e1bd3b7d6e1c40bffe0c', class: "utrecht-alert__content" }, h("div", { key: 'a5b7bcc31d931726fbfe3a4c5714e20b6cf842b5', class: "utrecht-alert__message", role: computedRole }, h("slot", { key: '9f62ddc6ad9fad8aa6bc9e5c54b57e2f3f96b0b7' })))));
}
static get is() { return "utrecht-alert"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["alert.scss"]
};
}
static get styleUrls() {
return {
"$": ["alert.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false
}
};
}
}
//# sourceMappingURL=alert.js.map