@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
53 lines (48 loc) • 5.12 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
import { c as clsx } from './p-e91d8a25.js';
const alertCss = ".utrecht-alert{background-color:var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));border-color:var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));border-radius:var(--utrecht-alert-border-radius, 0);border-style:solid;border-width:var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));color:var(--_utrecht-alert-color, var(--utrecht-alert-color));column-gap:var(--utrecht-alert-column-gap);display:flex;flex-direction:row;margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));--utrecht-icon-size:var(--utrecht-alert-icon-size);--utrecht-icon-inset-block-start:var(--utrecht-alert-icon-inset-block-start)}.utrecht-alert__content{display:flex;flex-direction:column;row-gap:var(--utrecht-alert-content-row-gap)}.utrecht-alert__message{--utrecht-heading-color:var(--utrecht-alert-color);--utrecht-paragraph-color:var(--utrecht-alert-color);display:flex;flex-direction:column;row-gap:var(--utrecht-alert-message-row-gap)}.utrecht-alert--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert--ok{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-ok-color);--_utrecht-alert-background-color:var(--utrecht-alert-ok-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-ok-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-ok-border-width);--_utrecht-alert-color:var(--utrecht-alert-ok-color)}.utrecht-alert--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}.utrecht-alert--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}:host{display:block}:host([hidden]){display:none !important}";
const UtrechtAlertStyle0 = alertCss;
const enumGuard = (values) => (x) => values.includes(x);
const ROLES = ['status', 'alert'];
const isAlertRole = enumGuard(ROLES);
const TYPES = ['error', 'warning', 'info', 'ok'];
const isAlertType = enumGuard(TYPES);
const typeToRole = {
info: 'status',
ok: 'status',
warning: 'alert',
error: 'alert',
};
const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.type = undefined;
}
render() {
const computedType = isAlertType(this.type) ? this.type : 'info';
const computedRole = isAlertRole(typeToRole[computedType]) ? typeToRole[computedType] : 'status';
return (h("div", { key: 'b55c15b4ba985f5cf49b3edf8564ad698ab08332', class: clsx('utrecht-alert', `utrecht-alert--${computedType}`) }, h("div", { key: '979fba4b78603a6a46c4c61e28a0c7b0411567f7', class: "utrecht-alert__icon" }, h("slot", { key: 'fce4262e8df49413c6fc2af1448766d647988b7e', name: "icon" })), h("div", { key: '4494157b106bca1c9213b78c44c36c34b04a01a0', class: "utrecht-alert__content" }, h("div", { key: '654e071124ad372ec08fb474532da28de9ab8a2b', class: "utrecht-alert__message", role: computedRole }, h("slot", { key: '171e19b07378e008490b5db0ff2f6a9ffba5dbef' })))));
}
static get style() { return UtrechtAlertStyle0; }
}, [1, "utrecht-alert", {
"type": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-alert"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-alert":
if (!customElements.get(tagName)) {
customElements.define(tagName, Alert);
}
break;
} });
}
const UtrechtAlert = Alert;
const defineCustomElement = defineCustomElement$1;
export { UtrechtAlert, defineCustomElement };
//# sourceMappingURL=utrecht-alert.js.map