@dso-toolkit/core 75.1.0 → 77.0.0

package/dist/esm/dso-button-group.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-C-b4jsbt.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+
+const buttonGroupCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}";
+
+const ButtonGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The direction in which the buttons are displayed.
+         *
+         * Defaults to `row`.
+         */
+        this.direction = "row";
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            forceUpdate(this);
+        });
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    get hasMapButtons() {
+        return !!this.host.querySelector(":scope > .dso-map");
+    }
+    render() {
+        return (h("div", { key: '0833d62def3ca95de506748637bfb925c73f4b3a', class: clsx("container", { "has-map-buttons": this.hasMapButtons }), role: "group" }, h("slot", { key: '2185893b0e429692b16d40460cf4f877e2a0d1e5' })));
+    }
+    get host() { return getElement(this); }
+};
+ButtonGroup.style = buttonGroupCss;
+
+export { ButtonGroup as dso_button_group };
+//# sourceMappingURL=dso-button-group.entry.js.map
+
+//# sourceMappingURL=dso-button-group.entry.js.map

package/dist/esm/dso-button-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dso-button-group.entry.js","sources":["src/components/button-group/button-group.scss?tag=dso-button-group&encapsulation=shadow","src/components/button-group/button-group.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n.container {\r\n  display: inline-flex;\r\n  border-radius: button.$border-radius;\r\n\r\n  &.has-map-buttons {\r\n    @include button.map-box-shadow();\r\n\r\n    background-color: colors.$grijs-20;\r\n    gap: 1px;\r\n  }\r\n}\r\n\r\n::slotted(*) {\r\n  margin: 0 !important;\r\n}\r\n\r\n:host([direction=\"row\"]) {\r\n  ::slotted(:not(:first-child)) {\r\n    border-start-start-radius: 0 !important;\r\n    border-end-start-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(:not(:last-child)) {\r\n    border-start-end-radius: 0 !important;\r\n    border-end-end-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(.dso-secondary) {\r\n    margin-inline-start: -1px !important;\r\n  }\r\n}\r\n\r\n:host([direction=\"column\"]) {\r\n  .container {\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::slotted(*) {\r\n    text-align: center !important;\r\n  }\r\n\r\n  ::slotted(:not(:first-child)) {\r\n    border-start-start-radius: 0 !important;\r\n    border-start-end-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(:not(:last-child)) {\r\n    border-end-start-radius: 0 !important;\r\n    border-end-end-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(.dso-secondary) {\r\n    margin-block-start: -1px !important;\r\n  }\r\n}\r\n\r\n::slotted(:focus-visible) {\r\n  z-index: 1 !important;\r\n}\r\n\r\n::slotted(.dso-map) {\r\n  box-shadow: none !important;\r\n}\r\n","import { Component, ComponentInterface, Element, Prop, forceUpdate, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ButtonGroupDirection } from \"./button-group.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-button-group\",\r\n  styleUrl: \"button-group.scss\",\r\n  shadow: true,\r\n})\r\nexport class ButtonGroup implements ComponentInterface {\r\n  /**\r\n   * The direction in which the buttons are displayed.\r\n   *\r\n   * Defaults to `row`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  direction: ButtonGroupDirection = \"row\";\r\n\r\n  @Element()\r\n  private host!: HTMLDsoButtonGroupElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      forceUpdate(this);\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  get hasMapButtons(): boolean {\r\n    return !!this.host.querySelector(\":scope > .dso-map\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={clsx(\"container\", { \"has-map-buttons\": this.hasMapButtons })} role=\"group\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,ypCAAypC;;MCUnqC,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;AAIG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAyB,KAAK;AAgCxC;IAzBC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAChD,WAAW,CAAC,IAAI,CAAC;AACnB,SAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACvC,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;AAGrC,IAAA,IAAI,aAAa,GAAA;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC;;IAGvD,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,EAAA,EACpF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}

package/dist/esm/dso-card-container.entry.js

@@ -11,7 +11,7 @@ const CardContainer = class {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '587a029adba2baa1af6a6edb83d5d788aa37c203', class: "dso-card-list" }, h("slot", { key: 'c6041cd186eddc4b89e073920ff8e891dd4e25cf' }))), this.mode === "grid" && (h("div", { key: '14cb5bd647f49a80ce52e9bd5a3cc59b7a9d5144', class: "dso-card-grid" }, h("slot", { key: '9e0b205698806f14085e82a85631afd49665f1e3' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '90b07c1be81c9e8891fc3c56d9d67304347c2756', class: "dso-card-list" }, h("slot", { key: '28fd7e44a59870508de16cefaf245146004319bc' }))), this.mode === "grid" && (h("div", { key: '8a73e7edf8c218f0dee90aac272b148207c20d13', class: "dso-card-grid" }, h("slot", { key: '9406a30a0ddf5ac7d1c48b5e0003f61936945783' })))));
     }
 };
 CardContainer.style = cardContainerCss;

package/dist/esm/dso-card.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-C-b4jsbt.js';
 import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
 
-const cardCss = "@charset \"UTF-8\";a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url(\"./di.svg#download\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#download-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-scampi\"))}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-selectable]:not([is-selectable=false])) .dso-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-heading,:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-content{grid-column:2/-1}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-selectable{grid-row:span 2;margin-inline-end:8px}:host([active]:not([active=false])) .dso-card-container{background-color:#e5e5e5}.dso-card-container{padding-block:16px;padding-inline:16px;inline-size:100%;block-size:100%}.dso-card-container:has(.dso-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}.dso-card-container .dso-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-card-container .dso-card-heading{flex-wrap:wrap}}.dso-card-container .dso-card-heading+.dso-card-content{margin-block-start:8px}.heading-anchor{display:flex;gap:4px;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=selectable]){font-size:0 !important;--_dt-selectable-padding-inline-start:24px;--_dt-selectable-input-wrapper-margin-inline-start:-24px;--_dt-selectable-input-wrapper-padding-inline-start:24px}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interactions]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interactions]){flex-basis:100% !important;margin-block-start:16px !important}}";
+const cardCss = "@charset \"UTF-8\";a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a .sr-only+:is(dso-icon,svg.di){margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url(\"./di.svg#download\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#download-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-scampi\"))}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-selectable]:not([is-selectable=false])) .dso-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-heading,:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-content{grid-column:2/-1}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-selectable{grid-row:span 2;margin-inline-end:8px}:host([active]:not([active=false])) .dso-card-container{background-color:#e5e5e5}.dso-card-container{padding-block:16px;padding-inline:16px;inline-size:100%;block-size:100%}.dso-card-container:has(.dso-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}.dso-card-container .dso-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-card-container .dso-card-heading{flex-wrap:wrap}}.dso-card-container .dso-card-heading+.dso-card-content{margin-block-start:8px}.heading-anchor{display:flex;gap:4px;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=selectable]){font-size:0 !important;--_dt-selectable-padding-inline-start:24px;--_dt-selectable-input-wrapper-margin-inline-start:-24px;--_dt-selectable-input-wrapper-padding-inline-start:24px}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interactions]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interactions]){flex-basis:100% !important;margin-block-start:16px !important}}";
 
 const Card = class {
     constructor(hostRef) {
@@ -31,8 +31,8 @@ const Card = class {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: 'ae559eef542b45634fe3e60859befae34b6758f3', "is-selectable": isSelectable }, h("div", { key: 'dbdcd6202dd90afe6163746980568b1da93a1f6b', class: "dso-card-container" }, h("div", { key: 'a2d327a172087119f00e7ad915c376510c812301', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'e8362179580065599e3289f415b7713ce5fa314b', name: "selectable" })), h("div", { key: 'ef113d547acb93eb7ddb7d764d6068e0f6961e6c', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: 'c96225236d6860f3a49bec5699ff8dc1b38b28d6', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'a47b5fb10f0439e2c13f522ff8a14d62dabe8989', name: "heading" }), h("dso-icon", { key: '51186c704c9075ebc38a4dd0e3074d0ddf9f2d56', icon: "external-link" }), h("span", { key: '1273130ce694c0a4ae4247420ba07e69d00fa643', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '8b210a4f08569ec47fe39922d7cd9a5e7eacfe51', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '530f82e059ab739fb981cfa5ab71924ad2c0ccc6', name: "heading" }), h("dso-icon", { key: 'ce5c62061feeda349651c41cdb548b6e4acb941c', icon: "download" })))) || (h("a", { key: 'cd96767ed626d0a2b96fa866d7676c080f8285e1', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'e044d0aff126c3c20827fa1a096b9452266e223f', name: "heading" }), h("dso-icon", { key: '4ea9e29a4b91016bed380b01f2811abc2102a4bb', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '5eb35ed45a897e399a924cd3fa1fd0f73fe08077', name: "interactions" })), h("div", { key: 'b316000aed0849ed15352958be227bc65efe6f48', class: "dso-card-content" }, h("slot", { key: '8c8c02740df6f4a19f4375f61a2dc8a706a74162', name: "content" })))));
+        return (h(Host, { key: '36c7e37e3565af414ebf091a9118b8c881ac18f7', "is-selectable": isSelectable }, h("div", { key: '69e0f342122bd4ac53ca18ea53ca9ea64c1802d1', class: "dso-card-container" }, h("div", { key: '880b4c8a61b841dfda3043f86f1b5ea37c742b44', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '985861bac731aecc3dc914a32db5bce35fc18da0', name: "selectable" })), h("div", { key: '3a77b0bcd5892f7e4a8d2e32c14d0d2eb7024144', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '756424c1507d093386d91ebd1b38f03f415071ac', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '052ff25dc558d89c3e674fb2efa4cfd9c83e385f', name: "heading" }), h("dso-icon", { key: '29f7e56fcdb75c2e4aaf2706e86197108239f1b3', icon: "external-link" }), h("span", { key: '1f8cff9385a86bd2fc4b20ee61f53019051d434d', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: '3a18f6a6570b8967f16526503e2a23b8eea1937e', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c50da6e83a090f725853154d3cbcd46b159ce893', name: "heading" }), h("dso-icon", { key: '06f7c304bffeab5264d2efb08490f00fe5ddf970', icon: "download" })))) || (h("a", { key: '17359530043bde8ca2c8c31a541667da26241c26', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd6e44c271ee256b1f4ab024836854077dd7802ed', name: "heading" }), h("dso-icon", { key: '0d3445bd395ad3df910a42e93cdd3da375315fc9', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '916c08c993eb995d6f572d0d3ae03eb69d17b755', name: "interactions" })), h("div", { key: '464f37a71643a16f2c63aa7ffaa9b0dda9b331fc', class: "dso-card-content" }, h("slot", { key: 'd05e86980f31e1af748768f5b8791fad464cc559', name: "content" })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-card.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-card.entry.js","sources":["src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host([is-selectable]:not([is-selectable=\"false\"])) {\r\n  .dso-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-card-heading,\r\n    .dso-card-content {\r\n      grid-column: 2 /-1;\r\n    }\r\n\r\n    .dso-card-selectable {\r\n      grid-row: span 2;\r\n\r\n      margin-inline-end: units.$u1;\r\n    }\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-card-container {\r\n    background-color: card.$background-color-active;\r\n  }\r\n}\r\n\r\n.dso-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n  block-size: 100%;\r\n\r\n  &:has(.dso-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: card.$background-color-hover;\r\n  }\r\n\r\n  .dso-card-heading {\r\n    align-items: center;\r\n    display: flex;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    + .dso-card-content {\r\n      margin-block-start: units.$u1;\r\n    }\r\n  }\r\n}\r\n\r\n.heading-anchor {\r\n  display: flex;\r\n  gap: units.$u1 * 0.5;\r\n\r\n  color: card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n\r\n::slotted([slot=\"selectable\"]) {\r\n  font-size: 0 !important;\r\n  --_dt-selectable-padding-inline-start: #{units.$u3};\r\n  --_dt-selectable-input-wrapper-margin-inline-start: #{-(units.$u3)};\r\n  --_dt-selectable-input-wrapper-padding-inline-start: #{units.$u3};\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  color: colors.$bosgroen !important;\r\n  line-height: 1.25 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n  --_dt-rich-content-margin-block-end: 0;\r\n  --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interactions\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  margin-inline-start: auto !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u2 !important;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/**\r\n * @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A  slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n */\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Makes the Card active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the Card heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoCardClick!: EventEmitter<CardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host is-selectable={isSelectable}>\r\n        <div class=\"dso-card-container\">\r\n          <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n            <slot name=\"selectable\" />\r\n          </div>\r\n          <div class=\"dso-card-heading\">\r\n            {(this.mode === \"extern\" && (\r\n              <a\r\n                href={this.href}\r\n                class=\"heading-anchor\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n              (this.mode === \"download\" && (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"download\"></dso-icon>\r\n                </a>\r\n              )) || (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                </a>\r\n              )}\r\n            {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n          </div>\r\n          <div class=\"dso-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dso-card.entry.js","sources":["src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/card\";\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host([is-selectable]:not([is-selectable=\"false\"])) {\r\n  .dso-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-card-heading,\r\n    .dso-card-content {\r\n      grid-column: 2 /-1;\r\n    }\r\n\r\n    .dso-card-selectable {\r\n      grid-row: span 2;\r\n\r\n      margin-inline-end: units.$u1;\r\n    }\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-card-container {\r\n    background-color: card.$background-color-active;\r\n  }\r\n}\r\n\r\n.dso-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n  block-size: 100%;\r\n\r\n  &:has(.dso-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: card.$background-color-hover;\r\n  }\r\n\r\n  .dso-card-heading {\r\n    align-items: center;\r\n    display: flex;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    + .dso-card-content {\r\n      margin-block-start: units.$u1;\r\n    }\r\n  }\r\n}\r\n\r\n.heading-anchor {\r\n  display: flex;\r\n  gap: units.$u1 * 0.5;\r\n\r\n  color: card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n\r\n::slotted([slot=\"selectable\"]) {\r\n  font-size: 0 !important;\r\n  --_dt-selectable-padding-inline-start: #{units.$u3};\r\n  --_dt-selectable-input-wrapper-margin-inline-start: #{-(units.$u3)};\r\n  --_dt-selectable-input-wrapper-padding-inline-start: #{units.$u3};\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  color: colors.$bosgroen !important;\r\n  line-height: 1.25 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n  --_dt-rich-content-margin-block-end: 0;\r\n  --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interactions\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  margin-inline-start: auto !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u2 !important;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/**\r\n * @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A  slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n */\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Makes the Card active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the Card heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoCardClick!: EventEmitter<CardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host is-selectable={isSelectable}>\r\n        <div class=\"dso-card-container\">\r\n          <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n            <slot name=\"selectable\" />\r\n          </div>\r\n          <div class=\"dso-card-heading\">\r\n            {(this.mode === \"extern\" && (\r\n              <a\r\n                href={this.href}\r\n                class=\"heading-anchor\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n              (this.mode === \"download\" && (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"download\"></dso-icon>\r\n                </a>\r\n              )) || (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                </a>\r\n              )}\r\n            {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n          </div>\r\n          <div class=\"dso-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/dso-contact-information.entry.js

@@ -7,7 +7,7 @@ const ContactInformation = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '4e473b3cea53cc722e8369c087f9a9aa85fa0ee0', class: "dso-contact-information" }, h("slot", { key: '69b4bd69e9953ce79210348395499e4dd6fa8b73', name: "heading" }), h("slot", { key: 'a4cd6dc9a59a4c8cd6aa32a634b94cf03b2de4bc', name: "anchor-items" }), h("slot", { key: 'c8e026e16f75d5d877efcbfd8150ab83b6e0092d', name: "info-items" })));
+        return (h("div", { key: 'a511c3b7e61371a74f3e55c0a71abaf56768cb52', class: "dso-contact-information" }, h("slot", { key: '98fae6e8614de0c46fb8fb5d55e77f5807dc4231', name: "heading" }), h("slot", { key: 'b84cd2bcc9a9874110d302b16ece15d37ab35896', name: "anchor-items" }), h("slot", { key: '32bae418af1a46f538c8cb4dde38e347f99cf7b1', name: "info-items" })));
     }
 };
 ContactInformation.style = contactInformationCss;

package/dist/esm/dso-date-picker-legacy.entry.js

@@ -711,14 +711,14 @@ const DsoDatePickerLegacy = class {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '957cb5ecd6d41aa4080fdc413ecd3ec720e6f2f5' }, h("div", { key: '7a6fd28aca5e525a44db67316ea232111dd78d83', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '738c2f5561053e525732b03db48f767018186df1', class: "dso-date__input-wrapper" }, h("input", { key: 'be60893ee6894c6872f4a8b11e1a5329592a9cb3', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '64a1581be9c55c14278206fc8bec3516fe9588c3', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '0abea68907579095ed9a0f30cd3fe66f1e99adf7', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '80acee7a48d20a2314a8bbfeba478ffe49bdc2f1', icon: "calendar" })), h("span", { key: 'e8734da932112b02a3d40135b9a0ae7c53762c0a', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'd64fb70897d08a11c6ab4130686128f36ede3635' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'eb265922641b7bbb69ffae331ea25663246865e7', class: {
+        return (h(Host, { key: '0b1ec6d7508b3bd54868d792da349f56723c49f7' }, h("div", { key: '3760db6ad5de67e53d9b663f21d9fa7c19c0c47a', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'f757525e60df0cd5566dba5c188cb9e6483f057d', class: "dso-date__input-wrapper" }, h("input", { key: 'c8ef8c3fb2524c1b996d0eedd5061b4c9b406738', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '0b43d6689f0e9a450b3f5ea98bb7e61739552847', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'fd6f7ae09f4f28fc80f5e59022080a4340cd57ff', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'd956ec013af3fa9969e159093bdc9e83da2040cd', icon: "calendar" })), h("span", { key: '5fb48f01acb482324f576afb50884dfc8bf8ac5c', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'a9e593f6baedfd379febefd8b3259433314b7a03' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '58475a8e3df7056be4486e40c566d8f589bfc4b9', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '0652c8515f40627399a4d2c8e572188d4a272866', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'ffd05e410fb85956e9157325b55c50f6c13ffd2f', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'cba925b52839e002c6725e213e5cd1e4bb9527cc', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '9e5c185d36e1b36c5f434e2f4ba84f9fe05f34ab', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'cb2d54a595e5937dbdfa2493c2a78f3232a694fe', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'caa97ca69898a421dc2be65d0b72d506784b46b3', icon: "times" }), h("span", { key: '53c8e6ed325069aa3f469d2c882749b1a7c6a73a', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '01a8aff75b3f2760466e9a8d1a98183cfc54c5f6', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '014941383091917d6db3b4ef61697feb50f9ca89' }, h("h2", { key: '5bc5c6226ca3e62965d44cb7213c1b3b595d1fed', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '4a8cfec86a434dee22a6e692c3a221f649f2b165', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'e0ccf6cda124982e9193f882300d3883a88979ba', class: "dso-date__select" }, h("select", { key: 'a98658e03f28e9e82224b69d754df240183c2cd9', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'b9aaf2ee2e85356ebbb97c81ec6d2fc60d433aba', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'd5b24a9d0967a9389486c6d2d62c7df973092360', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a7fa892c6141fb05cd9d5e25941b58d3f33103d8', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '9ee19bb1e9323ded05446ea3f3e6a52817a32302', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '0b0f38cf720508e49a03b3336d22b484db8db0a9', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '55688d9e29a9d0e703cf9b05e064670f0eba97ae', icon: "times" }), h("span", { key: 'c851850368265c521ae301d7c9e0c753157d5739', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '0e768e06ffca70d595b49199cc43394f893f1936', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '650fce41916c3ddf60c5148d58300846cbc41bc2' }, h("h2", { key: '93e6938990982c205dbf34105dcfb7beeedfe5fb', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'e956e5066fbd5c56f33cdcacd9f4530a90bd1967', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'a4c988914df53fd0d0af4c808ee1094a72c15bdc', class: "dso-date__select" }, h("select", { key: 'ab5b9dd4f543d13278b4dd65edfae89c00339cc9', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: '2c430302075f436442d64aad4804936d7f47d417', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c53a91bf0f52839fa4aa87c0ef9e2dacbe0df8bb' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '19b52d0d3f0c1a71402515b97e7d13f98f12a105', icon: "chevron-down" }))), h("label", { key: '246fd6c2fb5c7771c139d5786346e12ef8693c3d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '9b2583586116004567611ecfac87d6a98261c157', class: "dso-date__select" }, h("select", { key: '06b592e2eb87d41c85ee5bf4efaed35b51144fd8', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'ef7b607dfc1e493077d79aeffe3dc687b3991e28', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '36d1dec13260dbc32feaf4c9875bdc5e9ca68118' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '34e5fba7b8152bf66b65eecc7ca6469ac09bec34', icon: "chevron-down" })))), h("div", { key: 'b075a1c3c963e89f7aa7708834e9a697fe3aedd9', class: "dso-date__nav" }, h("button", { key: 'ac333335f9a4a81b659d5ca787a594bcc227314b', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '3802f14d7336beabcbd2e22d76c605d6a1610ae3', icon: "chevron-left" }), h("span", { key: 'fd06635f86a685a0e25fa19f911151dc98017cd0', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a6c10604bd06923d4230452a629c4a585651a6e0', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '1d43e6494d836b954eafd7b3d22efe1183e06526', icon: "chevron-right" }), h("span", { key: '4b880ddc1b3dbf49171b4e71ad6949296ce90d91', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '54c119f2a06e35cd6143994eca4a718a917f6638', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: '55a1a117e095115fc80403ca836df2e69951f745', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd18823683d95dae481d4da151cd45637918c6e46' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '087bdd2d44ec99c7ded483fe930e166f91ccd0b4', icon: "chevron-down" }))), h("label", { key: 'f96ca586396432132d9482cbfac0a8896cf8c46d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'ea7f1f0e42bf3344dab30e1a9aa9eff497ca11b5', class: "dso-date__select" }, h("select", { key: 'ab06d22ec2edd4b1d4828b47d4d495932ffd8e14', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '094f3bab580202d91c94658a5084812547c44017', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '1e4eabb3b6a4a546a79c43f91e18f8abffe9cf51' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'ecc4a276f2dd83053cb3759eda3a56bd4161f265', icon: "chevron-down" })))), h("div", { key: 'bbc9b3fad3a82919a006fd78befe7c88140ac97e', class: "dso-date__nav" }, h("button", { key: 'f8d45217ff383c4e140fc34e083fa163908510bb', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'f4a8cee55b8c3c8d5fa4db365e3a88137bc2ab3e', icon: "chevron-left" }), h("span", { key: '2f860a03cda77d7c9621906eb2ebb218635ef4cc', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '2222d594e39d8e7f39400777dc43a00d35f002a5', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '080cf2578b603e2c50e6bf4a50c3f1b4f9189db1', icon: "chevron-right" }), h("span", { key: 'b8388d0ccbd1a04a27737f6948d8bb6013b0322f', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'b9043d6761d0dbe9ce13ba0e4d26f646e0b2ffa5', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-date-picker.entry.js

@@ -147,7 +147,7 @@ const DsoDatePicker = class {
     }
     render() {
         var _a;
-        return (h("input", { key: 'c599e90b8e1029573beb7097dc5364e06759dcd7', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: 'a3e6335fedd3f1934ae485f331130c4975a7c009', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-document-card.entry.js

@@ -27,7 +27,7 @@ const DocumentCard = class {
         return this.host.querySelector("[slot='meta']");
     }
     render() {
-        return (h("div", { key: 'ae16753cb9c198cd7599fdd63fddf6ce2f97cf81', class: "dso-document-card-container" }, h("div", { key: 'af9c0dfd363d424e39db58be668d5f3c33bd007a', class: "dso-document-card-heading" }, h("a", { key: '168715cbc5847cd4bd1498d3305f28250bca5c8a', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '4a21deb471f62a81582b5410946caa66af82ea3b', class: "icon-container" }, h("dso-icon", { key: '211bcb9bfa4af4e9be6733d0e52a5e4fb7b25170', icon: "chevron-right" }), h("slot", { key: '20b41d90d10b20978fd51098d3e094e032eaaf9e', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '8e6c9694b793400757362c48c66809ec98ccfda7', name: "meta" })), h("div", { key: 'd35084e0b9c23553a865ca08a001b9e1b8d556ad', class: "dso-document-card-type" }, h("slot", { key: 'aa0159f40f85fd004b32923b1a7b5b029a576316', name: "type" })), h("div", { key: 'c27e28deca9072c962faa5cd2f947878d80d2d19', class: "dso-document-card-status" }, h("slot", { key: '51a1e2f7564a2384de3c9e72b298fcc6f2479215', name: "status" }))));
+        return (h("div", { key: 'a56e8db95294c83dfa5b558e47d72ee36c22c523', class: "dso-document-card-container" }, h("div", { key: '14fce780fceba683eb4e30cc6f060f7c7ff1dbce', class: "dso-document-card-heading" }, h("a", { key: '3423b19ac876cdd90135094d8d0b1430c4a53d0e', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '611617cd46d12105826465a46c3eb6ac41cb8dc4', class: "icon-container" }, h("dso-icon", { key: '84e9dc5793d9eb51b7748268df8c5b87cb27b24e', icon: "chevron-right" }), h("slot", { key: 'fdbb9ef5d508c67d7432e4aa6dd57d17f4bc730d', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '054d80082247a4eb97136f8e6d199229cb75edf6', name: "meta" })), h("div", { key: 'b7099c9ceaacf8691392fab1cfce9684b83babe2', class: "dso-document-card-type" }, h("slot", { key: '1e7a73fe9efa71d7362ae366ee1f4823b55720d6', name: "type" })), h("div", { key: '34309e92ede40ea37abfe3fc09d7e5270c56c7e9', class: "dso-document-card-status" }, h("slot", { key: 'c708100dfa943e139d3d17e5bd02dcffd02f185e', name: "status" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-dropdown-menu.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-C-b4jsbt.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom-gdsca1fx.js';
 import { t as tabbable } from './index.esm-Pk8qng7t.js';
 import { g as getActiveElement } from './get-active-element-CodDyi2J.js';
-import { h as hasOverflow, c as createPopper } from './has-overflow-CsY83cJO.js';
 import { v as v4 } from './v4-BF0_OXTe.js';
 
-const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}";
+const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}";
 
 const DropdownMenu = class {
     constructor(hostRef) {
@@ -26,70 +26,17 @@ const DropdownMenu = class {
          * Whether the menu is checkable.
          */
         this.checkable = false;
-        /**
-         * Set position strategy of dropdown options
-         */
-        this.strategy = "auto";
         this.focusOutListener = (event) => {
             if (this.open &&
                 (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
-                this.open = false;
+                this.toggleOptions(false);
             }
         };
         this.escape = () => {
             this.button.focus();
-            this.open = false;
+            this.toggleOptions(false);
         };
     }
-    watchPosition() {
-        if (!this.popper) {
-            return;
-        }
-        this.popper.setOptions({
-            placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
-        });
-    }
-    watchOptionsOffset() {
-        var _a;
-        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-            modifiers: [
-                {
-                    name: "offset",
-                    options: {
-                        offset: [0, this.dropdownOptionsOffset],
-                    },
-                },
-            ],
-        });
-    }
-    watchStrategy() {
-        this.setStrategy();
-    }
-    setStrategy() {
-        if (!this.popper) {
-            return;
-        }
-        if (this.strategy === "absolute" || this.strategy === "fixed") {
-            this.popper.setOptions({
-                strategy: this.strategy,
-            });
-            return;
-        }
-        let element = this.host;
-        const boundary = this.boundary || document;
-        while (element && element.parentNode !== boundary) {
-            element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
-            if (element !== null && hasOverflow(element)) {
-                this.popper.setOptions({
-                    strategy: "fixed",
-                });
-                return;
-            }
-        }
-        this.popper.setOptions({
-            strategy: "absolute",
-        });
-    }
     get button() {
         const button = this.host.querySelector('button[slot="toggle"]');
         if (!(button instanceof HTMLButtonElement)) {
@@ -107,50 +54,20 @@ const DropdownMenu = class {
         if (!this.button.id) {
             this.button.id = v4();
         }
-        const options = this.host.querySelector(".dso-dropdown-options");
-        if (!options) {
-            throw new ReferenceError("Dropdown options not found");
+        const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
+        if (!(dropdownOptionsElement instanceof HTMLElement)) {
+            throw new Error("dropdown options element is not instanceof HTMLElement");
         }
-        options.setAttribute("role", "menu");
-        options.setAttribute("aria-labelledby", this.button.id);
+        dropdownOptionsElement.setAttribute("role", "menu");
+        dropdownOptionsElement.setAttribute("aria-labelledby", this.button.id);
         for (const ul of Array.from(this.host.getElementsByTagName("ul"))) {
             ul.setAttribute("role", "group");
             for (const li of Array.from(ul.getElementsByTagName("li"))) {
                 li.setAttribute("role", "none");
             }
         }
-        if (this.popper) {
-            return;
-        }
-        const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
-        if (!(dropdownOptionsElement instanceof HTMLElement)) {
-            throw new Error("dropdown options element is not instanceof HTMLElement");
-        }
-        this.popper = createPopper(this.button, dropdownOptionsElement, {
-            placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
-            modifiers: [
-                {
-                    name: "offset",
-                    options: {
-                        offset: [0, this.dropdownOptionsOffset],
-                    },
-                },
-                {
-                    name: "preventOverflow",
-                    options: {
-                        boundary: this.boundary ? document.querySelector(this.boundary) : null,
-                    },
-                    enabled: this.boundary !== undefined,
-                },
-            ],
-        });
     }
     componentDidRender() {
-        var _a;
-        this.setStrategy();
-        if (this.open) {
-            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
-        }
         for (const li of Array.from(this.host.getElementsByTagName("li"))) {
             for (const tab of this.host.isConnected ? tabbable(li) : []) {
                 tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
@@ -160,14 +77,34 @@ const DropdownMenu = class {
             }
         }
         this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
+        if (this.popoverElement && !this.cleanUp) {
+            const element = this.popoverElement;
+            this.cleanUp = autoUpdate(this.button, element, () => {
+                computePosition(this.button, element, {
+                    strategy: "fixed",
+                    middleware: [
+                        offset(this.dropdownOptionsOffset),
+                        flip({
+                            padding: this.dropdownOptionsOffset,
+                        }),
+                    ],
+                    placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+                }).then(({ x, y }) => {
+                    Object.assign(element.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                    });
+                });
+            });
+        }
     }
     onClick(event) {
         const composedPath = event.composedPath();
         if (this.isToggleButtonEvent(composedPath)) {
-            this.open = !this.open;
+            this.toggleOptions();
         }
         else if (this.open && this.isMenuItemEvent(composedPath)) {
-            this.open = false;
+            this.toggleOptions(false);
         }
     }
     isToggleButtonEvent(composedPath) {
@@ -176,9 +113,19 @@ const DropdownMenu = class {
     isMenuItemEvent(composedPath) {
         return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
     }
+    toggleOptions(force) {
+        var _a, _b;
+        this.open = force !== null && force !== void 0 ? force : !this.open;
+        if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.togglePopover(this.open);
+        }
+        if (!this.open && this.cleanUp) {
+            this.cleanUp();
+            this.cleanUp = undefined;
+        }
+    }
     disconnectedCallback() {
-        var _a;
-        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.toggleOptions(false);
     }
     keyDownListener(event) {
         if (event.defaultPrevented || !this.open) {
@@ -225,15 +172,9 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '7ac2c7b0cb53dd13854266943c3c4722f20d8fd7', onFocusout: this.focusOutListener }, h("slot", { key: '648bbf61fb7eb8062e593c2f1967b9cf46460cfb', name: "toggle" }), h("div", { key: 'd7d75b67cfd48f2734ae56c6b39c73b66b1ca7d8', hidden: !this.open }, h("slot", { key: '9c3d6dc3892a7a9cff71173e412fd7a5e4c0e7d4' }))));
+        return (h(Host, { key: '9afd8972737639f89ad1a4692630873b783e4565', onFocusout: this.focusOutListener }, h("slot", { key: '1dcb47d44aa64263048235e5ef126a9c021fc2d9', name: "toggle" }), h("div", { key: 'ad7d1edefabae59820c974da1b2a37088baaf1ce', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: 'b2a5188261a9edca8d948365152d817b69104936' }))));
     }
     get host() { return getElement(this); }
-    static get watchers() { return {
-        "placement": ["watchPosition"],
-        "dropdownAlign": ["watchPosition"],
-        "dropdownOptionsOffset": ["watchOptionsOffset"],
-        "strategy": ["watchStrategy"]
-    }; }
 };
 DropdownMenu.style = dropdownMenuCss;
 

package/dist/esm/dso-dropdown-menu.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-dropdown-menu.entry.js","sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n","import { Instance as PopperInstance, Placement, createPopper } from \"@popperjs/core\";\r\nimport { Component, Element, Host, Listen, Prop, Watch, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.open = !this.open;\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.open = false;\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["uuidv4"],"mappings":"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"}
+{"version":3,"file":"dso-dropdown-menu.entry.js","sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private popoverElement: HTMLDivElement | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n    dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n    if (this.popoverElement && !this.cleanUp) {\r\n      const element = this.popoverElement;\r\n      this.cleanUp = autoUpdate(this.button, element, () => {\r\n        computePosition(this.button, element, {\r\n          strategy: \"fixed\",\r\n          middleware: [\r\n            offset(this.dropdownOptionsOffset),\r\n            flip({\r\n              padding: this.dropdownOptionsOffset,\r\n            }),\r\n          ],\r\n          placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n        }).then(({ x, y }) => {\r\n          Object.assign(element.style, {\r\n            left: `${x}px`,\r\n            top: `${y}px`,\r\n          });\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.toggleOptions();\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.toggleOptions(false);\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  private toggleOptions(force?: boolean) {\r\n    this.open = force ?? !this.open;\r\n    if (this.popoverElement?.isConnected) {\r\n      this.popoverElement?.togglePopover(this.open);\r\n    }\r\n\r\n    if (!this.open && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.toggleOptions(false);\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.toggleOptions(false);\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.toggleOptions(false);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["uuidv4"],"mappings":"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"}

package/dist/esm/dso-header.entry.js

@@ -151,10 +151,10 @@ const Header = class {
                 ["use-drop-down"]: this.showDropDown,
             }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("slot", { name: "logo" })), this.showDropDown &&
             this.mainMenu &&
-            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
+            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
             this.mainMenu
                 .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
-                .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { placement: "bottom" }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
+                .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", null, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
             this.mainMenu
                 .filter((_, index) => this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems)
                 .map(this.MenuItem)))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line" }), this.text("userHome"))))))))))));