@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
63 lines (58 loc) • 6.23 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
import { c as clsx } from './p-e91d8a25.js';
const drawerCss = ".utrecht-drawer{--_utrecht-drawer-backdrop-min-size:max(var(--utrecht-drawer-backdrop-min-size), 44px);background-color:var(--utrecht-drawer-background-color, Canvas);border-color:var(--utrecht-drawer-border-color, currentColor);border-width:var(--utrecht-drawer-border-width, 0);box-sizing:border-box;color:var(--utrecht-drawer-color, CanvasText);overflow:auto;padding-block-end:var(--utrecht-drawer-padding-block-end);padding-block-start:var(--utrecht-drawer-padding-block-start);padding-inline-end:var(--utrecht-drawer-padding-inline-end);padding-inline-start:var(--utrecht-drawer-padding-inline-start);position:fixed;z-index:var(--utrecht-drawer-z-index, 1)}.utrecht-drawer::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}@keyframes utrecht-backdrop-fade-in{from{opacity:0%}to{opacity:var(--_utrecht-backdrop-opacity)}}@media (prefers-reduced-motion: reduce){.utrecht-drawer::backdrop{--_utrecht-backdrop-fade-in-animation-duration:0}}@media (prefers-reduced-transparency: reduce){.utrecht-drawer::backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity, 100%)}}.utrecht-drawer--inline-start{block-size:100%;inset-block-end:0;inset-block-start:0;max-block-size:100%;max-inline-size:min(var(--utrecht-drawer-max-inline-size, 100%), 100% - var(--_utrecht-drawer-backdrop-min-size, 44px));min-inline-size:var(--utrecht-drawer-min-inline-size, calc(320px - var(--_utrecht-drawer-backdrop-min-size)));border-end-end-radius:var(--utrecht-drawer-border-radius);border-inline-start-width:0;border-start-end-radius:var(--utrecht-drawer-border-radius);inset-inline-end:auto;inset-inline-start:0}.utrecht-drawer--inline-end{block-size:100%;inset-block-end:0;inset-block-start:0;max-block-size:100%;max-inline-size:min(var(--utrecht-drawer-max-inline-size, 100%), 100% - var(--_utrecht-drawer-backdrop-min-size, 44px));min-inline-size:var(--utrecht-drawer-min-inline-size, calc(320px - var(--_utrecht-drawer-backdrop-min-size)));border-end-start-radius:var(--utrecht-drawer-border-radius);border-inline-end-width:0;border-start-start-radius:var(--utrecht-drawer-border-radius);inset-inline-end:0;inset-inline-start:auto}.utrecht-drawer--block-start{block-size:fit-content;inline-size:100%;inset-inline-end:0;inset-inline-start:0;max-block-size:min(var(--utrecht-drawer-max-block-size), 100% - var(--_utrecht-drawer-backdrop-min-size));max-inline-size:100%;min-block-size:var(--utrecht-drawer-min-block-size, calc(256px - var(--_utrecht-drawer-backdrop-min-size)));border-block-start-width:0;border-end-end-radius:var(--utrecht-drawer-border-radius);border-end-start-radius:var(--utrecht-drawer-border-radius);inset-block-end:auto;inset-block-start:0}.utrecht-drawer--block-end{block-size:fit-content;inline-size:100%;inset-inline-end:0;inset-inline-start:0;max-block-size:min(var(--utrecht-drawer-max-block-size), 100% - var(--_utrecht-drawer-backdrop-min-size));max-inline-size:100%;min-block-size:var(--utrecht-drawer-min-block-size, calc(256px - var(--_utrecht-drawer-backdrop-min-size)));border-block-end-width:0;border-start-end-radius:var(--utrecht-drawer-border-radius);border-start-start-radius:var(--utrecht-drawer-border-radius);inset-block-end:0;inset-block-start:auto}:host{display:contents}:host([hidden]){display:none !important}";
const UtrechtDrawerStyle0 = drawerCss;
const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.align = undefined;
this.open = false;
}
render() {
const { align, open } = this;
return (h("dialog", { key: '74c0651d9d67f1aecc51e60ef7d9921349a2481a', ref: (el) => (this.dialogElement = el), class: clsx('utrecht-drawer', {
'utrecht-drawer--block-end': align === 'block-end',
'utrecht-drawer--block-start': align === 'block-start',
'utrecht-drawer--inline-end': align === 'inline-end' || !align,
'utrecht-drawer--inline-start': align === 'inline-start',
}), open: open }, h("slot", { key: 'f492b473e63c570e4a0f3f802a1c8b453c6b1a30' })));
}
async close() {
var _a;
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
}
async showModal() {
var _a, _b;
// Dialog must not be `open` initially, prevent the following error:
// "Cannot call showModal() on an open non-modal dialog"
// Close the dialog first, to transition from non-modal to modal.
// Ideally we would't `close()` the dialog when we know the dialog is already modal.
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
(_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.showModal();
}
static get style() { return UtrechtDrawerStyle0; }
}, [1, "utrecht-drawer", {
"align": [1],
"open": [4],
"close": [64],
"showModal": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-drawer"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-drawer":
if (!customElements.get(tagName)) {
customElements.define(tagName, Drawer);
}
break;
} });
}
const UtrechtDrawer = Drawer;
const defineCustomElement = defineCustomElement$1;
export { UtrechtDrawer, defineCustomElement };
//# sourceMappingURL=utrecht-drawer.js.map