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

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}

package/dist/esm/{index-380964e2.js → index-46090ad9.js}

@@ -374,6 +374,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
         else if (memberName === 'key')
             ;
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -649,6 +655,7 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
         const vnode = vnodes[index];
         if (vnode) {
             const elm = vnode.$elm$;
+            nullifyVNodeRefs(vnode);
             if (elm) {
                 {
                     // we're removing this element
@@ -1147,6 +1154,19 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
     }
     return slotNameAttr === '';
 };
+/**
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
+ * calling them with `null`. This signals that the DOM element corresponding to
+ * the VDom node has been removed from the DOM.
+ *
+ * @param vNode a virtual DOM node
+ */
+const nullifyVNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+    }
+};
 /**
  * The main entry point for Stencil's virtual DOM-based rendering engine
  *
@@ -1421,6 +1441,9 @@ const postUpdateComponent = (hostRef) => {
     else {
         endPostUpdate();
     }
+    {
+        hostRef.$onInstanceResolve$(elm);
+    }
     // load events fire from bottom to top
     // the deepest elements load first then bubbles up
     {
@@ -1505,6 +1528,16 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     enumerable: true,
                 });
             }
+            else if (flags & 1 /* PROXY_FLAGS.isElementConstructor */ &&
+                memberFlags & 64 /* MEMBER_FLAGS.Method */) {
+                // proxyComponent - method
+                Object.defineProperty(prototype, memberName, {
+                    value(...args) {
+                        const ref = getHostRef(this);
+                        return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
+                    },
+                });
+            }
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
@@ -1826,6 +1859,9 @@ const registerHost = (elm, cmpMeta) => {
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
+    {
+        hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r));
+    }
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
         elm['s-p'] = [];
@@ -1904,6 +1940,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './utrecht-digid-button.entry.js').then(processMod, consoleError);
+        case 'utrecht-drawer':
+          return import(
+            /* webpackMode: "lazy" */
+            './utrecht-drawer.entry.js').then(processMod, consoleError);
         case 'utrecht-eherkenning-logo':
           return import(
             /* webpackMode: "lazy" */
@@ -2901,4 +2941,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-380964e2.js.map
+//# sourceMappingURL=index-46090ad9.js.map