@utrecht/web-component-library-stencil 1.0.0-alpha.595 → 1.0.0-alpha.596

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() appearance: string;\n  @Prop() busy: boolean;\n  @Prop() disabled: boolean;\n  @Prop({ attribute: 'readonly', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;\n  @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;\n  @Element() hostElement: HTMLElement;\n  @Prop() type: string;\n\n  render() {\n    const handleReset = () => {\n      const event = this.utrechtRequestReset.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.reset();\n      }\n    };\n\n    const handleSubmit = () => {\n      const event = this.utrechtRequestSubmit.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.requestSubmit();\n      }\n    };\n\n    const handleClick = () => {\n      if (this.type === 'reset') {\n        handleReset();\n      } else if (this.type === 'submit') {\n        handleSubmit();\n      } else {\n        const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n        if (button) {\n          button.click();\n        }\n      }\n    };\n\n    const {\n      hostElement,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-button',\n          this.busy && 'utrecht-button--busy',\n          this.disabled && 'utrecht-button--disabled',\n          this.type === 'submit' && 'utrecht-button--submit',\n          this.appearance === 'primary-action-button' && 'utrecht-button--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button--subtle',\n        )}\n        aria-busy={this.busy ? 'true' : null}\n        disabled={this.disabled}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() appearance: string;\n  @Prop() busy: boolean;\n  @Prop() disabled: boolean;\n  @Prop() expanded: boolean | string | 'false' | 'true';\n  @Prop() pressed: boolean | string | 'false' | 'true';\n  @Prop({ attribute: 'readonly', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;\n  @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;\n  @Element() hostElement: HTMLElement;\n  @Prop() type: string;\n\n  render() {\n    const handleReset = () => {\n      const event = this.utrechtRequestReset.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.reset();\n      }\n    };\n\n    const handleSubmit = () => {\n      const event = this.utrechtRequestSubmit.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.requestSubmit();\n      }\n    };\n\n    const handleClick = () => {\n      if (this.type === 'reset') {\n        handleReset();\n      } else if (this.type === 'submit') {\n        handleSubmit();\n      } else {\n        const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n        if (button) {\n          button.click();\n        }\n      }\n    };\n\n    const {\n      hostElement,\n      expanded,\n      pressed,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-button',\n          this.busy && 'utrecht-button--busy',\n          this.disabled && 'utrecht-button--disabled',\n          pressed && 'utrecht-button--pressed',\n          this.type === 'submit' && 'utrecht-button--submit',\n          this.appearance === 'primary-action-button' && 'utrecht-button--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button--subtle',\n        )}\n        aria-busy={this.busy ? 'true' : null}\n        aria-expanded={\n          typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null\n        }\n        aria-pressed={\n          typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null\n        }\n        disabled={this.disabled}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/flex-wrap-fallback.css

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.utrecht-flex-wrap-fallback__content--hidden,
+.utrecht-flex-wrap-fallback__fallback--hidden {
+  block-size: 0;
+  opacity: 0%;
+  outline: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: relative;
+  user-select: none;
+}

package/dist/collection/components/flex-wrap-fallback.js

@@ -0,0 +1,90 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+import { h } from '@stencil/core';
+/**
+ * Checks if an element has `flex-wrap: wrap` and the content wraps over multiple lines
+ */
+const hasFlexboxWrap = (el) => {
+  var _a;
+  const win = (_a = el === null || el === void 0 ? void 0 : el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  const style = win === null || win === void 0 ? void 0 : win.getComputedStyle(el);
+  if (style && style.getPropertyValue('flex-wrap') === 'wrap' && style.getPropertyValue('display') === 'flex') {
+    // TODO: Account for writing-mode vertical
+    return el.firstElementChild.getBoundingClientRect().top !== el.lastElementChild.getBoundingClientRect().top;
+  }
+  else {
+    return false;
+  }
+};
+export class FlexWrapFallback {
+  constructor() {
+    this.flexTarget = undefined;
+    this.resizeObserver = undefined;
+    this.contentWraps = undefined;
+  }
+  connectedCallback() {
+    if (!this.resizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        // TODO: Support updating `flextarget` attribute, switch ResizeObserver to match
+        // TODO: Escape ID selector CSS query
+        const cssSelector = this.flexTarget ? `#${this.flexTarget}` : ':not([slot])';
+        const flexTargetEl = this.hostElement.querySelector(cssSelector);
+        console.log(cssSelector, flexTargetEl);
+        this.contentWraps = !!flexTargetEl && hasFlexboxWrap(flexTargetEl);
+      });
+    }
+    this.resizeObserver.observe(this.hostElement);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.hostElement);
+  }
+  render() {
+    const { contentWraps } = this;
+    return (h("div", null, h("div", { id: "wrap", class: `utrecht-flex-wrap-fallback__content ${contentWraps ? 'utrecht-flex-wrap-fallback__content--hidden' : ''}`, "data-inert": contentWraps, "aria-hidden": contentWraps }, h("slot", null)), h("div", { id: "nowrap", class: `utrecht-flex-wrap-fallback__fallback ${contentWraps ? '' : 'utrecht-flex-wrap-fallback__fallback--hidden'}`, "data-inert": !contentWraps, hidden: !contentWraps }, h("slot", { name: "fallback" }))));
+  }
+  static get is() { return "utrecht-flex-wrap-fallback"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["flex-wrap-fallback.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["flex-wrap-fallback.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "flexTarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "flextarget",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "resizeObserver": {},
+      "contentWraps": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=flex-wrap-fallback.js.map

package/dist/collection/components/flex-wrap-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-wrap-fallback.js","sourceRoot":"","sources":["../../../src/components/flex-wrap-fallback.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;GAEG;AACH,MAAM,cAAc,GAAG,CAAC,EAAW,EAAE,EAAE;;EACrC,MAAM,GAAG,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,0CAAE,WAAW,CAAC;EAE3C,MAAM,KAAK,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,gBAAgB,CAAC,EAAE,CAAC,CAAC;EAExC,IAAI,KAAK,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,MAAM,EAAE;IAC3G,0CAA0C;IAC1C,OAAO,EAAE,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;GAC7G;OAAM;IACL,OAAO,KAAK,CAAC;GACd;AACH,CAAC,CAAC;AAOF,MAAM,OAAO,gBAAgB;;;;;;EAQ3B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACxB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QAC5C,gFAAgF;QAChF,qCAAqC;QACrC,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;QAC7E,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACjE,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;MACrE,CAAC,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EAChD,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACnD,CAAC;EACD,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,OAAO,CACL;MACE,WACE,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,uCACL,YAAY,CAAC,CAAC,CAAC,6CAA6C,CAAC,CAAC,CAAC,EACjE,EAAE,gBACU,YAAY,iBACX,YAAY;QAEzB,eAAa,CACT;MACN,WACE,EAAE,EAAC,QAAQ,EACX,KAAK,EAAE,wCACL,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,8CACtB,EAAE,gBACU,CAAC,YAAY,EACzB,MAAM,EAAE,CAAC,YAAY;QAErB,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACF,CACP,CAAC;EACJ,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, Element, h, Prop, State } from '@stencil/core';\n\n/**\n * Checks if an element has `flex-wrap: wrap` and the content wraps over multiple lines\n */\nconst hasFlexboxWrap = (el: Element) => {\n  const win = el?.ownerDocument?.defaultView;\n\n  const style = win?.getComputedStyle(el);\n\n  if (style && style.getPropertyValue('flex-wrap') === 'wrap' && style.getPropertyValue('display') === 'flex') {\n    // TODO: Account for writing-mode vertical\n    return el.firstElementChild.getBoundingClientRect().top !== el.lastElementChild.getBoundingClientRect().top;\n  } else {\n    return false;\n  }\n};\n\n@Component({\n  tag: 'utrecht-flex-wrap-fallback',\n  styleUrl: 'flex-wrap-fallback.scss',\n  shadow: true,\n})\nexport class FlexWrapFallback {\n  @Element() hostElement: HTMLElement;\n\n  /* ID reference for element with `display: flex;` or `display: inline-flex` and `flex-wrap: wrap` */\n  @Prop({ attribute: 'flextarget', reflect: true }) flexTarget?: string;\n  @State() resizeObserver: ResizeObserver;\n  @State() contentWraps: boolean;\n\n  connectedCallback() {\n    if (!this.resizeObserver) {\n      this.resizeObserver = new ResizeObserver(() => {\n        // TODO: Support updating `flextarget` attribute, switch ResizeObserver to match\n        // TODO: Escape ID selector CSS query\n        const cssSelector = this.flexTarget ? `#${this.flexTarget}` : ':not([slot])';\n        const flexTargetEl = this.hostElement.querySelector(cssSelector);\n        console.log(cssSelector, flexTargetEl);\n        this.contentWraps = !!flexTargetEl && hasFlexboxWrap(flexTargetEl);\n      });\n    }\n\n    this.resizeObserver.observe(this.hostElement);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.unobserve(this.hostElement);\n  }\n  render() {\n    const { contentWraps } = this;\n    return (\n      <div>\n        <div\n          id=\"wrap\"\n          class={`utrecht-flex-wrap-fallback__content ${\n            contentWraps ? 'utrecht-flex-wrap-fallback__content--hidden' : ''\n          }`}\n          data-inert={contentWraps}\n          aria-hidden={contentWraps}\n        >\n          <slot></slot>\n        </div>\n        <div\n          id=\"nowrap\"\n          class={`utrecht-flex-wrap-fallback__fallback ${\n            contentWraps ? '' : 'utrecht-flex-wrap-fallback__fallback--hidden'\n          }`}\n          data-inert={!contentWraps}\n          hidden={!contentWraps}\n        >\n          <slot name=\"fallback\"></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/components/button.js

@@ -13,6 +13,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     this.appearance = undefined;
     this.busy = undefined;
     this.disabled = undefined;
+    this.expanded = undefined;
+    this.pressed = undefined;
     this.form = undefined;
     this.formAction = undefined;
     this.formEnctype = undefined;
@@ -54,7 +56,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
       }
     };
-    const { hostElement, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
+    const { hostElement, expanded, pressed, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
     let button = hostElement.querySelector('button[hidden]');
     const needsButton = !!(name ||
       form ||
@@ -99,7 +101,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
       button.style.display = 'none';
       button.value = value || '';
     }
-    return (h("button", { class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick }, h("slot", null)));
+    return (h("button", { class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', pressed && 'utrecht-button--pressed', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, "aria-expanded": typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null, "aria-pressed": typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick }, h("slot", null)));
   }
   get hostElement() { return this; }
   static get style() { return buttonCss; }
@@ -107,6 +109,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     "appearance": [1],
     "busy": [4],
     "disabled": [4],
+    "expanded": [8],
+    "pressed": [8],
     "form": [513, "readonly"],
     "formAction": [513, "formaction"],
     "formEnctype": [513, "formenctype"],

package/dist/components/button.js.map

@@ -1 +1 @@
-{"file":"button.js","mappings":"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","names":[],"sources":["./src/components/button.scss?tag=utrecht-button&encapsulation=shadow","./src/components/button.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/button/css\";\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() appearance: string;\n  @Prop() busy: boolean;\n  @Prop() disabled: boolean;\n  @Prop({ attribute: 'readonly', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;\n  @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;\n  @Element() hostElement: HTMLElement;\n  @Prop() type: string;\n\n  render() {\n    const handleReset = () => {\n      const event = this.utrechtRequestReset.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.reset();\n      }\n    };\n\n    const handleSubmit = () => {\n      const event = this.utrechtRequestSubmit.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.requestSubmit();\n      }\n    };\n\n    const handleClick = () => {\n      if (this.type === 'reset') {\n        handleReset();\n      } else if (this.type === 'submit') {\n        handleSubmit();\n      } else {\n        const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n        if (button) {\n          button.click();\n        }\n      }\n    };\n\n    const {\n      hostElement,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-button',\n          this.busy && 'utrecht-button--busy',\n          this.disabled && 'utrecht-button--disabled',\n          this.type === 'submit' && 'utrecht-button--submit',\n          this.appearance === 'primary-action-button' && 'utrecht-button--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button--subtle',\n        )}\n        aria-busy={this.busy ? 'true' : null}\n        disabled={this.disabled}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"button.js","mappings":"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","names":[],"sources":["./src/components/button.scss?tag=utrecht-button&encapsulation=shadow","./src/components/button.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/button/css\";\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() appearance: string;\n  @Prop() busy: boolean;\n  @Prop() disabled: boolean;\n  @Prop() expanded: boolean | string | 'false' | 'true';\n  @Prop() pressed: boolean | string | 'false' | 'true';\n  @Prop({ attribute: 'readonly', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;\n  @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;\n  @Element() hostElement: HTMLElement;\n  @Prop() type: string;\n\n  render() {\n    const handleReset = () => {\n      const event = this.utrechtRequestReset.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.reset();\n      }\n    };\n\n    const handleSubmit = () => {\n      const event = this.utrechtRequestSubmit.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.requestSubmit();\n      }\n    };\n\n    const handleClick = () => {\n      if (this.type === 'reset') {\n        handleReset();\n      } else if (this.type === 'submit') {\n        handleSubmit();\n      } else {\n        const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n        if (button) {\n          button.click();\n        }\n      }\n    };\n\n    const {\n      hostElement,\n      expanded,\n      pressed,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-button',\n          this.busy && 'utrecht-button--busy',\n          this.disabled && 'utrecht-button--disabled',\n          pressed && 'utrecht-button--pressed',\n          this.type === 'submit' && 'utrecht-button--submit',\n          this.appearance === 'primary-action-button' && 'utrecht-button--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button--subtle',\n        )}\n        aria-busy={this.busy ? 'true' : null}\n        aria-expanded={\n          typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null\n        }\n        aria-pressed={\n          typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null\n        }\n        disabled={this.disabled}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-flex-wrap-fallback.d.ts

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

package/dist/components/utrecht-flex-wrap-fallback.js

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const flexWrapFallbackCss = ":host{display:block}:host([hidden]){display:none !important}.utrecht-flex-wrap-fallback__content--hidden,.utrecht-flex-wrap-fallback__fallback--hidden{block-size:0;opacity:0%;outline:0;overflow:hidden;pointer-events:none;position:relative;user-select:none}";
+
+/**
+ * Checks if an element has `flex-wrap: wrap` and the content wraps over multiple lines
+ */
+const hasFlexboxWrap = (el) => {
+  var _a;
+  const win = (_a = el === null || el === void 0 ? void 0 : el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  const style = win === null || win === void 0 ? void 0 : win.getComputedStyle(el);
+  if (style && style.getPropertyValue('flex-wrap') === 'wrap' && style.getPropertyValue('display') === 'flex') {
+    // TODO: Account for writing-mode vertical
+    return el.firstElementChild.getBoundingClientRect().top !== el.lastElementChild.getBoundingClientRect().top;
+  }
+  else {
+    return false;
+  }
+};
+const FlexWrapFallback = /*@__PURE__*/ proxyCustomElement(class FlexWrapFallback extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.flexTarget = undefined;
+    this.resizeObserver = undefined;
+    this.contentWraps = undefined;
+  }
+  connectedCallback() {
+    if (!this.resizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        // TODO: Support updating `flextarget` attribute, switch ResizeObserver to match
+        // TODO: Escape ID selector CSS query
+        const cssSelector = this.flexTarget ? `#${this.flexTarget}` : ':not([slot])';
+        const flexTargetEl = this.hostElement.querySelector(cssSelector);
+        console.log(cssSelector, flexTargetEl);
+        this.contentWraps = !!flexTargetEl && hasFlexboxWrap(flexTargetEl);
+      });
+    }
+    this.resizeObserver.observe(this.hostElement);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.hostElement);
+  }
+  render() {
+    const { contentWraps } = this;
+    return (h("div", null, h("div", { id: "wrap", class: `utrecht-flex-wrap-fallback__content ${contentWraps ? 'utrecht-flex-wrap-fallback__content--hidden' : ''}`, "data-inert": contentWraps, "aria-hidden": contentWraps }, h("slot", null)), h("div", { id: "nowrap", class: `utrecht-flex-wrap-fallback__fallback ${contentWraps ? '' : 'utrecht-flex-wrap-fallback__fallback--hidden'}`, "data-inert": !contentWraps, hidden: !contentWraps }, h("slot", { name: "fallback" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return flexWrapFallbackCss; }
+}, [1, "utrecht-flex-wrap-fallback", {
+    "flexTarget": [513, "flextarget"],
+    "resizeObserver": [32],
+    "contentWraps": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-flex-wrap-fallback"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-flex-wrap-fallback":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlexWrapFallback);
+      }
+      break;
+  } });
+}
+
+const UtrechtFlexWrapFallback = FlexWrapFallback;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFlexWrapFallback, defineCustomElement };
+
+//# sourceMappingURL=utrecht-flex-wrap-fallback.js.map

package/dist/components/utrecht-flex-wrap-fallback.js.map

@@ -0,0 +1 @@
+{"file":"utrecht-flex-wrap-fallback.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,kQAAkQ;;ACQ9R;;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAW;;EACjC,MAAM,GAAG,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,0CAAE,WAAW,CAAC;EAE3C,MAAM,KAAK,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,gBAAgB,CAAC,EAAE,CAAC,CAAC;EAExC,IAAI,KAAK,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,MAAM,EAAE;;IAE3G,OAAO,EAAE,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;GAC7G;OAAM;IACL,OAAO,KAAK,CAAC;GACd;AACH,CAAC,CAAC;MAOW,gBAAgB;;;;;;;;;EAQ3B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACxB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;;;QAGvC,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE,GAAG,cAAc,CAAC;QAC7E,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACjE,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;OACpE,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC/C;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAClD;EACD,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,QACE,eACE,WACE,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,uCACL,YAAY,GAAG,6CAA6C,GAAG,EACjE,EAAE,gBACU,YAAY,iBACX,YAAY,IAEzB,eAAa,CACT,EACN,WACE,EAAE,EAAC,QAAQ,EACX,KAAK,EAAE,wCACL,YAAY,GAAG,EAAE,GAAG,8CACtB,EAAE,gBACU,CAAC,YAAY,EACzB,MAAM,EAAE,CAAC,YAAY,IAErB,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flex-wrap-fallback.scss?tag=utrecht-flex-wrap-fallback&encapsulation=shadow","./src/components/flex-wrap-fallback.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:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n.utrecht-flex-wrap-fallback__content--hidden,\n.utrecht-flex-wrap-fallback__fallback--hidden {\n  block-size: 0;\n  opacity: 0%;\n  outline: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: relative;\n  user-select: none;\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, Element, h, Prop, State } from '@stencil/core';\n\n/**\n * Checks if an element has `flex-wrap: wrap` and the content wraps over multiple lines\n */\nconst hasFlexboxWrap = (el: Element) => {\n  const win = el?.ownerDocument?.defaultView;\n\n  const style = win?.getComputedStyle(el);\n\n  if (style && style.getPropertyValue('flex-wrap') === 'wrap' && style.getPropertyValue('display') === 'flex') {\n    // TODO: Account for writing-mode vertical\n    return el.firstElementChild.getBoundingClientRect().top !== el.lastElementChild.getBoundingClientRect().top;\n  } else {\n    return false;\n  }\n};\n\n@Component({\n  tag: 'utrecht-flex-wrap-fallback',\n  styleUrl: 'flex-wrap-fallback.scss',\n  shadow: true,\n})\nexport class FlexWrapFallback {\n  @Element() hostElement: HTMLElement;\n\n  /* ID reference for element with `display: flex;` or `display: inline-flex` and `flex-wrap: wrap` */\n  @Prop({ attribute: 'flextarget', reflect: true }) flexTarget?: string;\n  @State() resizeObserver: ResizeObserver;\n  @State() contentWraps: boolean;\n\n  connectedCallback() {\n    if (!this.resizeObserver) {\n      this.resizeObserver = new ResizeObserver(() => {\n        // TODO: Support updating `flextarget` attribute, switch ResizeObserver to match\n        // TODO: Escape ID selector CSS query\n        const cssSelector = this.flexTarget ? `#${this.flexTarget}` : ':not([slot])';\n        const flexTargetEl = this.hostElement.querySelector(cssSelector);\n        console.log(cssSelector, flexTargetEl);\n        this.contentWraps = !!flexTargetEl && hasFlexboxWrap(flexTargetEl);\n      });\n    }\n\n    this.resizeObserver.observe(this.hostElement);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.unobserve(this.hostElement);\n  }\n  render() {\n    const { contentWraps } = this;\n    return (\n      <div>\n        <div\n          id=\"wrap\"\n          class={`utrecht-flex-wrap-fallback__content ${\n            contentWraps ? 'utrecht-flex-wrap-fallback__content--hidden' : ''\n          }`}\n          data-inert={contentWraps}\n          aria-hidden={contentWraps}\n        >\n          <slot></slot>\n        </div>\n        <div\n          id=\"nowrap\"\n          class={`utrecht-flex-wrap-fallback__fallback ${\n            contentWraps ? '' : 'utrecht-flex-wrap-fallback__fallback--hidden'\n          }`}\n          data-inert={!contentWraps}\n          hidden={!contentWraps}\n        >\n          <slot name=\"fallback\"></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1468,6 +1468,17 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+const safeCall = (instance, method, arg) => {
+    if (instance && instance[method]) {
+        try {
+            return instance[method](arg);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    return undefined;
+};
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1649,6 +1660,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1677,6 +1689,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1725,6 +1742,10 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
         endConnected();
     }
 };
@@ -1741,7 +1762,11 @@ const setContentReference = (elm) => {
 };
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
-        getHostRef(elm);
+        const hostRef = getHostRef(elm);
+        const instance = hostRef.$lazyInstance$ ;
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1888,10 +1913,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
       }
       switch(bundleId) {
         
-        case 'utrecht-alert_44':
+        case 'utrecht-alert_46':
           return import(
             /* webpackMode: "lazy" */
-            './utrecht-alert_44.entry.js').then(processMod, consoleError);
+            './utrecht-alert_46.entry.js').then(processMod, consoleError);
         case 'utrecht-backdrop':
           return import(
             /* webpackMode: "lazy" */
@@ -1940,10 +1965,6 @@ 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" */
@@ -2941,4 +2962,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-46090ad9.js.map
+//# sourceMappingURL=index-bec436fa.js.map