@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
56 lines (51 loc) • 5.09 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { c as clsx } from './clsx.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{row-gap:var(--utrecht-alert-content-row-gap)}.utrecht-alert__message{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 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 HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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 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