@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
39 lines (34 loc) • 6.33 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
const statusBadgeCss = ".utrecht-status-badge{background-color:var(--utrecht-badge-background-color, hsl(0, 0%, 0%));border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, hsl(0, 0%, 100%));display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:var(--utrecht-badge-font-style, normal);font-weight:var(--utrecht-badge-font-weight, bold);line-height:var(--utrecht-badge-line-height, 1em);max-block-size:max-content;max-inline-size:max-content;min-block-size:1em;min-inline-size:1em;padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-status-badge{border-color:currentColor;border-style:solid;border-width:1px}}.utrecht-status-badge{--utrecht-badge-background-color:var(--utrecht-status-badge-background-color);--utrecht-badge-border-radius:var(--utrecht-status-badge-border-radius);--utrecht-badge-color:var(--utrecht-status-badge-color);--utrecht-badge-font-size:var(--utrecht-status-badge-font-size, inherit);--utrecht-badge-font-style:var(--utrecht-status-badge-font-style);--utrecht-badge-font-weight:var(--utrecht-status-badge-font-weight);--utrecht-badge-line-height:var(--utrecht-status-badge-line-height);--utrecht-badge-padding-block:var(--utrecht-status-badge-padding-block);--utrecht-badge-padding-inline:var(--utrecht-status-badge-padding-inline);border-color:var(--utrecht-status-badge-border-color, transparent);border-width:var(--utrecht-status-badge-border-width);font-family:var(--utrecht-status-badge-font-family, inherit);letter-spacing:var(--utrecht-status-badge-letter-spacing, inherit);min-block-size:var(--utrecht-status-badge-min-block-size, 1em);min-inline-size:var(--utrecht-status-badge-min-inline-size, 1em);text-transform:var(--utrecht-status-badge-text-transform, inherit)}.utrecht-status-badge--danger{background-color:var(--utrecht-status-badge-danger-background-color, hsl(0, 100%, 40%));border-color:var(--utrecht-status-badge-danger-border-color);color:var(--utrecht-status-badge-danger-color, white)}.utrecht-status-badge--warning{background-color:var(--utrecht-status-badge-warning-background-color, hsl(48, 100%, 50%));border-color:var(--utrecht-status-badge-warning-border-color);color:var(--utrecht-status-badge-warning-color, white)}.utrecht-status-badge--safe{background-color:var(--utrecht-status-badge-safe-background-color, hsl(90, 30%, 50%));border-color:var(--utrecht-status-badge-safe-border-color);color:var(--utrecht-status-badge-safe-color, white)}.utrecht-status-badge--neutral{background-color:var(--utrecht-status-badge-neutral-background-color, black);border-color:var(--utrecht-status-badge-neutral-border-color);color:var(--utrecht-status-badge-neutral-color, white)}.utrecht-status-badge--valid{background-color:var(--utrecht-status-badge-valid-background-color, var(--utrecht-status-badge-safe-background-color, hsl(90, 30%, 50%)));border-color:var(--utrecht-status-badge-valid-border-color);color:var(--utrecht-status-badge-valid-color, var(--utrecht-status-badge-safe-color, white))}.utrecht-status-badge--invalid{background-color:var(--utrecht-status-badge-invalid-background-color, var(--utrecht-status-badge-danger-background-color, hsl(39, 100%, 50%)));border-color:var(--utrecht-status-badge-invalid-border-color);color:var(--utrecht-status-badge-invalid-color, var(--utrecht-status-badge-danger-color, white))}.utrecht-status-badge--error{background-color:var(--utrecht-status-badge-error-background-color, var(--utrecht-status-badge-danger-background-color, hsl(0, 100%, 30%)));color:var(--utrecht-status-badge-error-color, var(--utrecht-status-badge-danger-color, white))}.utrecht-status-badge--success{background-color:var(--utrecht-status-badge-success-background-color, var(--utrecht-status-badge-safe-background-color, hsl(90, 30%, 50%)));border-color:var(--utrecht-status-badge-success-border-color);color:var(--utrecht-status-badge-success-color, var(--utrecht-status-badge-safe-color, white))}.utrecht-status-badge--active{background-color:var(--utrecht-status-badge-active-background-color, var(--utrecht-status-badge-safe-background-color, hsl(90, 30%, 50%)));border-color:var(--utrecht-status-badge-active-border-color);color:var(--utrecht-status-badge-active-color, var(--utrecht-status-badge-safe-color, white))}.utrecht-status-badge--inactive{background-color:var(--utrecht-status-badge-inactive-background-color, var(--utrecht-status-badge-danger-background-color, hsl(0, 100%, 40%)));border-color:var(--utrecht-status-badge-inactive-border-color);color:var(--utrecht-status-badge-inactive-color, var(--utrecht-status-badge-danger-color, white))}:host{display:inline-block}:host([hidden]){display:none !important}";
const UtrechtStatusBadgeStyle0 = statusBadgeCss;
const StatusBadge = /*@__PURE__*/ proxyCustomElement(class StatusBadge extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.status = undefined;
}
render() {
return (h("div", { key: '1c72d28a3df7a18f75612496eef6ad4b2087dcaf', class: `utrecht-status-badge utrecht-status-badge--${this.status || 'neutral'}` }, h("slot", { key: '51b8e21b70cf352d86d49c445e87655689af44bf' })));
}
static get style() { return UtrechtStatusBadgeStyle0; }
}, [1, "utrecht-status-badge", {
"status": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-status-badge"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-status-badge":
if (!customElements.get(tagName)) {
customElements.define(tagName, StatusBadge);
}
break;
} });
}
const UtrechtStatusBadge = StatusBadge;
const defineCustomElement = defineCustomElement$1;
export { UtrechtStatusBadge, defineCustomElement };
//# sourceMappingURL=utrecht-status-badge.js.map