@utrecht/web-component-library-stencil 1.0.0-alpha.591 → 1.0.0-alpha.593

package/dist/collection/components/drawer.css

@@ -0,0 +1,131 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.utrecht-drawer {
+  /* minimum size for backdrop with light-dismiss is 44px x 44px to meet WCAG SC 2.5.5 */
+  --_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: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/components/drawer.js

@@ -0,0 +1,123 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+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", { 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", null)));
+  }
+  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"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "showModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=drawer.js.map

package/dist/collection/components/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,MAAM;;;gBAEO,KAAK;;EAI7B,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC7B,OAAO,CACL,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EAC3D,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;QAC5B,2BAA2B,EAAE,KAAK,KAAK,WAAW;QAClD,6BAA6B,EAAE,KAAK,KAAK,aAAa;QACtD,4BAA4B,EAAE,KAAK,KAAK,YAAY,IAAI,CAAC,KAAK;QAC9D,8BAA8B,EAAE,KAAK,KAAK,cAAc;OACzD,CAAC,EACF,IAAI,EAAE,IAAI;MAEV,eAAa,CACN,CACV,CAAC;EACJ,CAAC;EAGD,KAAK,CAAC,KAAK;;IACT,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAC;EAC9B,CAAC;EAGD,KAAK,CAAC,SAAS;;IACb,oEAAoE;IACpE,wDAAwD;IACxD,iEAAiE;IACjE,oFAAoF;IACpF,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAC;IAC5B,MAAA,IAAI,CAAC,aAAa,0CAAE,SAAS,EAAE,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  @Prop() align: string;\n  @Prop() open: boolean = false;\n\n  dialogElement!: HTMLDialogElement;\n\n  render() {\n    const { align, open } = this;\n    return (\n      <dialog\n        ref={(el) => (this.dialogElement = el as HTMLDialogElement)}\n        class={clsx('utrecht-drawer', {\n          'utrecht-drawer--block-end': align === 'block-end',\n          'utrecht-drawer--block-start': align === 'block-start',\n          'utrecht-drawer--inline-end': align === 'inline-end' || !align,\n          'utrecht-drawer--inline-start': align === 'inline-start',\n        })}\n        open={open}\n      >\n        <slot></slot>\n      </dialog>\n    );\n  }\n\n  @Method()\n  async close() {\n    this.dialogElement?.close();\n  }\n\n  @Method()\n  async showModal() {\n    // Dialog must not be `open` initially, prevent the following error:\n    // \"Cannot call showModal() on an open non-modal dialog\"\n    // Close the dialog first, to transition from non-modal to modal.\n    // Ideally we would't `close()` the dialog when we know the dialog is already modal.\n    this.dialogElement?.close();\n    this.dialogElement?.showModal();\n  }\n}\n"]}

package/dist/collection/components/html-content.css

@@ -707,6 +707,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-inline-end: var(--utrecht-button-margin-inline-end);
   margin-inline-start: var(--utrecht-button-margin-inline-start);
 }
+.utrecht-html button[hidden] {
+  display: none;
+}
 .utrecht-html button[type=submit i],
 .utrecht-html input[type=submit i] {
   cursor: var(--utrecht-action-submit-cursor, revert);
@@ -819,6 +822,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html fieldset {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
+  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;
@@ -830,6 +834,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: 0;
   --utrecht-space-around: 1;
 }
+.utrecht-html fieldset[hidden] {
+  display: none;
+}
 .utrecht-html figure {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
@@ -859,6 +866,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
 }
+.utrecht-html legend[hidden] {
+  display: none;
+}
 .utrecht-html fieldset:disabled > legend {
   color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
 }
@@ -1115,6 +1125,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: var(--utrecht-code-block-padding-inline-start);
   white-space: pre;
 }
+.utrecht-html pre[hidden]:has(> code:only-child) {
+  display: none;
+}
 .utrecht-html pre:has(> code:only-child) > code {
   display: contents;
 }

package/dist/components/utrecht-drawer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtDrawer extends Components.UtrechtDrawer, HTMLElement {}
+export const UtrechtDrawer: {
+  prototype: UtrechtDrawer;
+  new (): UtrechtDrawer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-drawer.js

@@ -0,0 +1,62 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.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:block}:host([hidden]){display:none !important}";
+
+const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.align = undefined;
+    this.open = false;
+  }
+  render() {
+    const { align, open } = this;
+    return (h("dialog", { 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", null)));
+  }
+  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 drawerCss; }
+}, [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

package/dist/components/utrecht-drawer.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-drawer.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+uHAA+uH;;MCcpvH,MAAM;;;;;;gBAEO,KAAK;;EAI7B,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC7B,QACE,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EAC3D,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;QAC5B,2BAA2B,EAAE,KAAK,KAAK,WAAW;QAClD,6BAA6B,EAAE,KAAK,KAAK,aAAa;QACtD,4BAA4B,EAAE,KAAK,KAAK,YAAY,IAAI,CAAC,KAAK;QAC9D,8BAA8B,EAAE,KAAK,KAAK,cAAc;OACzD,CAAC,EACF,IAAI,EAAE,IAAI,IAEV,eAAa,CACN,EACT;GACH;EAGD,MAAM,KAAK;;IACT,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAC;GAC7B;EAGD,MAAM,SAAS;;;;;;IAKb,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAC;IAC5B,MAAA,IAAI,CAAC,aAAa,0CAAE,SAAS,EAAE,CAAC;GACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/drawer.scss?tag=utrecht-drawer&encapsulation=shadow","./src/components/drawer.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/drawer/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  @Prop() align: string;\n  @Prop() open: boolean = false;\n\n  dialogElement!: HTMLDialogElement;\n\n  render() {\n    const { align, open } = this;\n    return (\n      <dialog\n        ref={(el) => (this.dialogElement = el as HTMLDialogElement)}\n        class={clsx('utrecht-drawer', {\n          'utrecht-drawer--block-end': align === 'block-end',\n          'utrecht-drawer--block-start': align === 'block-start',\n          'utrecht-drawer--inline-end': align === 'inline-end' || !align,\n          'utrecht-drawer--inline-start': align === 'inline-start',\n        })}\n        open={open}\n      >\n        <slot></slot>\n      </dialog>\n    );\n  }\n\n  @Method()\n  async close() {\n    this.dialogElement?.close();\n  }\n\n  @Method()\n  async showModal() {\n    // Dialog must not be `open` initially, prevent the following error:\n    // \"Cannot call showModal() on an open non-modal dialog\"\n    // Close the dialog first, to transition from non-modal to modal.\n    // Ideally we would't `close()` the dialog when we know the dialog is already modal.\n    this.dialogElement?.close();\n    this.dialogElement?.showModal();\n  }\n}\n"],"version":3}