@utrecht/web-component-library-stencil/dist/components/utrecht-backdrop.js

Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { c as clsx } from './clsx.js';

const backdropCss = ".utrecht-backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-opacity);--_utrecht-backdrop-fade-in-animation-duration:var(--utrecht-backdrop-fade-in-animation-duration, 0);animation-duration:min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));animation-name:utrecht-backdrop-fade-in;animation-timing-function:ease-in-out;background-color:var(--utrecht-backdrop-background-color);color:var(--utrecht-backdrop-color);opacity:var(--_utrecht-backdrop-opacity);-webkit-user-select:none;user-select:none;display:block;inset-block-end:0;inset-block-start:0;inset-inline-end:0;inset-inline-start:0;position:absolute;z-index:var(--utrecht-backdrop-z-index)}@keyframes utrecht-backdrop-fade-in{from{opacity:0%}to{opacity:var(--_utrecht-backdrop-opacity)}}@media (prefers-reduced-motion: reduce){.utrecht-backdrop{--_utrecht-backdrop-fade-in-animation-duration:0}}@media (prefers-reduced-transparency: reduce){.utrecht-backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity, 100%)}}.utrecht-backdrop--reduced-motion{--_utrecht-backdrop-fade-in-animation-duration:0}.utrecht-backdrop--reduced-transparency{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity, 100%)}.utrecht-backdrop--viewport{position:fixed}:host{display:block}:host([hidden]){display:none !important}";
const UtrechtBackdropStyle0 = backdropCss;

const Backdrop = /*@__PURE__*/ proxyCustomElement(class Backdrop extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.viewport = undefined;
    }
    render() {
        const { viewport } = this;
        return (h("div", { key: 'd07d4784d5580dd3efa7657bf959999cd01c17b3', class: clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport') }, h("slot", { key: '8c0ce6f7e70c30bb6f0c4a865287cc5d96852f68' })));
    }
    static get style() { return UtrechtBackdropStyle0; }
}, [1, "utrecht-backdrop", {
        "viewport": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["utrecht-backdrop"];
    components.forEach(tagName => { switch (tagName) {
        case "utrecht-backdrop":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Backdrop);
            }
            break;
    } });
}

const UtrechtBackdrop = Backdrop;
const defineCustomElement = defineCustomElement$1;

export { UtrechtBackdrop, defineCustomElement };

//# sourceMappingURL=utrecht-backdrop.js.map