@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
126 lines (125 loc) • 4.22 kB
JavaScript
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
import { h } from "@stencil/core";
import clsx from "clsx";
export class Drawer {
constructor() {
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 is() { return "utrecht-drawer"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["drawer.scss"]
};
}
static get styleUrls() {
return {
"$": ["drawer.css"]
};
}
static get properties() {
return {
"align": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "align",
"reflect": false
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open",
"reflect": false,
"defaultValue": "false"
}
};
}
static get methods() {
return {
"close": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"showModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
}
//# sourceMappingURL=drawer.js.map