@dso-toolkit/core 65.0.2 → 66.1.0

package/dist/cjs/dso-legend-item.cjs.entry.js

@@ -32,10 +32,10 @@ const LegendItem = class {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (index.h(index.Host, { key: '3a732bff9d1e998b7468c7e508edf41e472cdf1f', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '8b2bba6b998955c91e5d67fa6dcd4424807b7c2a', class: clsx.clsx("legend-item", {
+        return (index.h(index.Host, { key: 'f3ed2e3af15bc7afaefe3e7dc1867e5d009343a9', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '426bdfbe6aee907c9999a3deb7651fffbafee29b', class: clsx.clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, index.h("div", { key: '1f3bb12d214ed0877786a195dbae6185b00b6c97', hidden: !hasSymbol }, index.h("slot", { key: '032e27bcad7cf0a711e7afe05f782c7d51246d1d', name: "symbol" })), index.h("div", { key: '7ba425d10db6401e450090b94824bb66ff709e9b' }, index.h("slot", { key: 'a4f911e41c0a700a4aa13a7fb4aab1fcdbeffe8a' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: 'f094a3c424c1d1fd181b57bfd51638bfb8ea0797', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: '025272a3802507a54d2e50741dd79ed8bd1ba130', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: 'a1f96e0028b2af5d115216676bb2a2f31403f53d', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: 'b2c18e31618d3ce43536c1b2d3d48f5d66c16658', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'ef084b28d39bac92df86f5e4e9f441588fa77d3f', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: '2ca66b1cadf279727750086f02e3423029b39fec', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '6fe03e75ecbc08e02956d75c10212ad3f566d6f4', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '061973981aa31be8a7b1ab51f94e301a1c4aa68b', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '9817bbb5df6790ecf30c97c688aed899a7b9ef9e', name: "body" }))));
+            }) }, index.h("div", { key: '4745ac64124b02f4744d7d8b1c1b58e6d6b8cb7c', hidden: !hasSymbol }, index.h("slot", { key: '16557ca73d29fe764a5d830036e5e4b38adc5c15', name: "symbol" })), index.h("div", { key: '50545fc88deb5d382a473b4e379a16a178de041d' }, index.h("slot", { key: '9b0d7272f4d3fa3aad9041ebd08641bce90eded8' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '489ada2ea0a5c9119929a96a53a03753543c79f7', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: '16853ececc9b1281edca10fd0713eaa561f75d81', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: 'b8ec91d205b0e46c2ac67cc3c55c8aad0719d874', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: '4768c9bf633e54e6ad4b391a4c7cce38029ebe4f', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'dca39e77e8506bf21c008c0ea7cc3c615d0037eb', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: 'a79baa28a2f466d2accba74b9440cd4cb0afdf7e', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '80bd62ff175e0913bcbed1031be74a9f41cdfbdf', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: 'c2aa88a49822109a0d4e8c110e0467b29d1fe764', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '4cd3703e27f8d3b847aad0f59783a6a65363c60b', name: "body" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-list-button.cjs.entry.js

@@ -125,7 +125,7 @@ const ListButton = class {
     render() {
         const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (index.h("div", { key: 'd40fdadfac45c00b7657ff365ddfac8769c72710', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: '916de1d699fdb155530dfb5aa5b4b9315eb78b33', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: 'cf718524bcc8bff10602d19701319522276390b6', class: "dso-selectable" }, index.h("input", { key: '2d36b3e7a9377ff765cbfbbd19874f2db49786e4', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), index.h("label", { key: 'b5997457d4260bcf7971d2e57c7cb22ba036ef17', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: 'c3747912f68572b004672ae49d770037cc40ed3c', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: '85bd8620045f43ee3af685fcc9805f287b992ebd', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '0936df007aa982b94bd63f63d2744dc342d0ec96', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: '4e54fda951864d13c59bbf70f9052b7aeabb6bdb', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: '8bd1030c7f7e779da73c67886c6da74e59eee9e9', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (index.h("button", { key: 'eeaf4920e388b5315a705859832fafe6d14920e3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: '60020bb171ed5b33e9850bc7472a7caa08bfbfd6', icon: "minus-circle" }), index.h("span", { key: '6f085b670db936d7ae44405a87d5aa04e663de8e', class: "sr-only" }, "Aantal verlagen"))), index.h("div", { key: 'aeacf135c45b4b255a5399dcded381769cc5962b', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (index.h("input", { key: '84dd0679203c6ff85ea858e689366fb952a9e666', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), index.h("form", { key: '19b9381145862bf3893284594479ff009f37a310', onSubmit: (e) => this.setCount(e) }, index.h("div", { key: 'e6bb25bd9ba9b848431e7451154ab91888f3193d', ref: (element) => (this.manualInputWrapperElement = element) }, index.h("input", { key: 'da5757dc2be34a994e1a54ceae73e176cccb99b8', class: clsx.clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (index.h("button", { key: 'cce6b85e2cbb094c7dbe9b008320758c075106d6', class: clsx.clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (index.h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (index.h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (index.h("button", { key: '09fd129b37155929d83573123cb15fd4c072cee3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: '53bc95e299e1c0af676e397382f15137016c58e7', icon: "plus-circle" }), index.h("span", { key: 'a22ef9ead527e8ba09685fc9ec89b26661f22c7e', class: "sr-only" }, "Aantal verhogen")))))));
+        return (index.h("div", { key: 'e7bf049a644612d767b69bd7b8f9a7a2a3415aee', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'ea3f55d4606d1b5d918e87f85dd41fb88359129b', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: 'b380324080a4b14237d0ba9c577cb94ac86e3537', class: "dso-selectable" }, index.h("input", { key: '28a63c6a3f6c2db3ff0ec6a496ecb3d47fe259da', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), index.h("label", { key: '9d504627106c1a20a8e163366ba5d2609acb0d34', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: 'ed2ba786c38106c3ff4b3d6087627fe22a318ff6', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: '6e7c6a7846ab52e6af57844def31d11de17c5883', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '791c2945ae74a09a4dcce87e8e5a50bb8ae5370c', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: '73ab87343afd7b01762c9207f9f9871606a8e7a5', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: '44b882307beab09c69b324374af82c03d4dc3ceb', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (index.h("button", { key: '403a0f1f8897191e9a32c6567ae4e094a89418ca', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: 'f7e054b48d58184d8403a30839d6b5042ef95076', icon: "minus-circle" }), index.h("span", { key: 'dbc39db429a1a134d4bd6b092034bc26bba2b008', class: "sr-only" }, "Aantal verlagen"))), index.h("div", { key: 'b68d42b10d5066d00ccd30bc1710fca145801c29', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (index.h("input", { key: 'f26110be0cd8171ec879108ce8c0630cd18e797d', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), index.h("form", { key: 'db761f994cc9e8f681e85e618fce6cfab5087083', onSubmit: (e) => this.setCount(e) }, index.h("div", { key: '724b28bf6a1ddc86e44c6d1f1ae0bb7ede612937', ref: (element) => (this.manualInputWrapperElement = element) }, index.h("input", { key: '0bd8409e0ecb7fce7c65ac479145bfdf61601e59', class: clsx.clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (index.h("button", { key: '1c72996a4eb4a280c0dfc46748c4ce075a11453b', class: clsx.clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (index.h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (index.h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (index.h("button", { key: '69cdc0b55ca1c4bbd87d9869374d00777bb39916', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: '968533a4f8a8a0a322309f98f49814faf4df98be', icon: "plus-circle" }), index.h("span", { key: 'b2bf82b374c5244b0574a44215f06a2b4f988ab2', class: "sr-only" }, "Aantal verhogen")))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dso-logo.cjs.entry.js

@@ -27,7 +27,7 @@ const Logo = class {
     }
     render() {
         return (index.h(index.Fragment, null, this.logoUrl ? (index.h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, index.h(DsoLogo, null))) : (index.h(DsoLogo, null)), this.label &&
-            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '5f99258c907bac9a3b9de9b194c860986947faa9', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '4539eec0153c2ad7ce3ec0797ba61a5080f02e76', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = DsoLogoStyle0;

package/dist/cjs/dso-map-base-layers.cjs.entry.js

@@ -32,7 +32,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: '6202c08aabadaf082aa7268b9869e9961db25323', class: "form-group dso-radios" }, index.h("legend", { key: '4f98ce54b7cc0ac7043dcfdbf6ba5dc0c14eaff7', class: "sr-only" }, "Achtergrond"), index.h("div", { key: 'afc2b38161a7706c8d2b3a616cbd61b1304772f2', class: "dso-label-container" }, index.h("span", { key: 'e205e3bc1f4725b8c38df48da06eb2bacbeafd91', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { key: '042feb469b10a84622a1c3c1986df3d25bd3be3d', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (index.h("fieldset", { key: '3658bb4710a5d3d54f805f0246cc2167d19fbd9a', class: "form-group dso-radios" }, index.h("legend", { key: '777f25fc490dce9b6b4d8015ed7af355528a7699', class: "sr-only" }, "Achtergrond"), index.h("div", { key: '698d8f5dd021b8ded00fe7f1bec99b88be71b576', class: "dso-label-container" }, index.h("span", { key: '435580370bd7d68b36f425d0d75d67dfd7184580', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { key: '903b11b76609320aa36ab7a8b0a617cd19362997', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
 };
 MapBaseLayers.style = DsoMapBaseLayersStyle0;

package/dist/cjs/dso-map-controls.cjs.entry.js

@@ -66,7 +66,7 @@ const MapControls = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'b41883b94f5e3333343021ea1bcc6461b5ddb00a' }, index.h("button", { key: '1dd02163b1007a0401cd3262dd0096c14fb24d02', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { key: '39b35af58f5db864fe57b5f73b50fd03099a7c35', icon: "layers" }), index.h("span", { key: '2b8db6cd75c639f4960fb6fea6aa5ea10b346b91' }, "Kaartlagen")), index.h("div", { key: '992ad8d136703549b54d209d4f0353b044266036', class: "zoom-buttons" }, index.h("button", { key: '9c2308d3b4519a912839bb7bd279263c43358e99', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, index.h("span", { key: '8f8c8a3834eb7a382202e601bb965af8f81b5551' }, "Zoom in"), index.h("dso-icon", { key: 'c941dc9d1759127cea74d053423e30617db34a48', icon: "plus" })), index.h("button", { key: 'f85503edb7f8d13cb7adf5c63574966d8e5b7450', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, index.h("span", { key: 'e16c47520350de121d8729ec2e2e5e56039edb6e' }, "Zoom uit"), index.h("dso-icon", { key: 'efc5b88940f06bec9c4823025b989777ed13ec72', icon: "minus" }))), index.h("section", { key: 'f32404ee213539b03736cd18e22040906b77feca', hidden: this.hideContent }, index.h("header", { key: '746ae45a47d5cca218aa32287658fed5b34e04a8' }, index.h("h2", { key: 'b6ea4b4e95271620f44dcd5e21e8cfbd51d3ef73' }, this.panelTitle), index.h("button", { key: 'a29f8bc57db84589e98a377f4a80243952cd9b91', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, index.h("span", { key: '290e9b1374945030e0d01495fc92a792f4cbb39d' }, "Verberg paneel ", this.panelTitle), index.h("dso-icon", { key: '6f16acda8d9002dd24993226d682c9082dad4c81', icon: "times" }))), index.h("dso-scrollable", { key: '72166f0fd12f7fe77bdd3ac6682e904380a5baaa' }, index.h("div", { key: 'b9a7225e47fb4bbc78f6ce46c0b9048b2acbccc3', class: "content" }, index.h("slot", { key: '0c76b990517858b062abdfe30df6beccd16f735f' }))))));
+        return (index.h(index.Host, { key: '90b70306a6a949c5c476e1dff5674117162c6c45' }, index.h("button", { key: 'bce19eedd68b22975e6cea9401cd52558709772c', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { key: '66f725dcb18892c46f62b381958c08b2c00ff5e9', icon: "layers" }), index.h("span", { key: '83990c0b5a4b6b6deb698aa13096c09daa5fb13b' }, "Kaartlagen")), index.h("div", { key: 'b4033b5d836c21e88719419b861d45a5ceb850ff', class: "zoom-buttons" }, index.h("button", { key: 'beba5fd412d7050037ce403a95bce92832bbc123', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, index.h("span", { key: '3bbf8907a376b22d57c595ac155a86e9a91ed123' }, "Zoom in"), index.h("dso-icon", { key: 'f1f820b0854d1a3f3056f88225fc446d970fe97b', icon: "plus" })), index.h("button", { key: 'e97da939c757a68527703c052751e41284fd99d7', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, index.h("span", { key: '16667fea438726e529fe5b7dda73b37f4e2042af' }, "Zoom uit"), index.h("dso-icon", { key: '1ba3ffaa108ed4bdfce3aba80060e5ae1a657ea2', icon: "minus" }))), index.h("section", { key: 'b02968e3ca6967d3af0c3231f6cb54b826e29c88', hidden: this.hideContent }, index.h("header", { key: '553cbeb52ed118aab913d739f4a4273fe318068d' }, index.h("h2", { key: 'c86f34e526b42856d539fa5e7c8f0f78c44a02f6' }, this.panelTitle), index.h("button", { key: 'd168e7f5972f8aba349f6d314c1f215a3f358d9c', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, index.h("span", { key: '15dd92a796f4944eeab386c100ad8f625d9f987c' }, "Verberg paneel ", this.panelTitle), index.h("dso-icon", { key: '4da15bc6df5f507d742b2c489cb2513d8d34e60b', icon: "times" }))), index.h("dso-scrollable", { key: '9d13f21fdc5c49b5708aa7faed8dae04806375fd' }, index.h("div", { key: '26591e1aff5b87bcb61333a53cfe02c7e823fb2e', class: "content" }, index.h("slot", { key: 'f33b663a5690932a745a0438db4188c3d9e5c135' }))))));
     }
     static get watchers() { return {
         "open": ["watchOpen"]

package/dist/cjs/dso-map-overlays.cjs.entry.js

@@ -33,7 +33,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: '9690b8f1aced2232adc3cda2c519921e2deb4611', class: "form-group dso-checkboxes" }, index.h("legend", { key: '812287677e887e635f2256afcc747008b3b67e87', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: 'e901a9c7115f2f1bf02afe3be33579952aa0bab1', class: "dso-label-container" }, index.h("span", { key: '7ae751d72d3142ebdbb1bad7b9ca2d70860ac400', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { key: 'dda63540f9a602103bee0c9b8321d4f9ab9e3b67', class: "dso-field-container" }, this.overlays.map((overlay) => (index.h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? index.h("p", { slot: "info" }, overlay.info) : null))))));
+        return (index.h("fieldset", { key: 'b5f18235c37359b2b309019f8e8a2b160d332aa7', class: "form-group dso-checkboxes" }, index.h("legend", { key: 'fde629e752057bd8f70bd3f1c14acf6b5d768db4', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: '8eb1b33fa8586482db4d89ee2e495d2e2124a3f3', class: "dso-label-container" }, index.h("span", { key: '1642765d6f64ce34d490f1a06aa54001f1dd3d8a', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { key: 'b6b5964687ede94e3c52150aabbc494d6d82be9b', class: "dso-field-container" }, this.overlays.map((overlay) => (index.h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? index.h("p", { slot: "info" }, overlay.info) : null))))));
     }
 };
 MapOverlays.style = DsoMapOverlaysStyle0;

package/dist/cjs/dso-mark-bar.cjs.entry.js

@@ -55,7 +55,7 @@ const MarkBar = class {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (index.h("div", { key: '3df6289ae5ac91adf0ba9473e38adab8dc6b91f4', class: "dso-mark-bar" }, index.h("div", { key: '702a95a26990c2afdc62726b23f2c5e278b2649c', class: "dso-mark-bar-input" }, index.h("input", { key: 'adbe69018b986b2ca4d73099ff8c6ece2fac1e5a', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), index.h("label", { key: '26a364def7585a8390c70f124b7be806fabda74c', htmlFor: "search-input" }, index.h("dso-icon", { key: 'bd2c98273728bff66236989d40807de2995eb2aa', class: "dso-search-icon", icon: "search" }), index.h("span", { key: '4cde1a75df6bb62dd1970c8aae52e31ac8ff9d00', class: "label-text" }, this.label)), index.h("button", { key: '103d37170e51d078da432eb43fbd8edb5540758b', type: "button", onClick: this.handleClear }, index.h("dso-icon", { key: 'b11abdeabc4c91964ea0aad97c10ccb6a420cb5a', icon: "times" }), index.h("span", { key: 'c4718f33f2c0acd1f78292a542351097b4ff31a1', class: "sr-only" }, "Zoekopdracht legen"))), index.h("div", { key: '015d21fe0562ae31d55d46ce15353ad0853fb8db', class: "dso-button-container" }, index.h("span", { key: 'ad2efabb6240583c0279309e13111355a899a73d', class: "divider" }), index.h("button", { key: 'd48f48ebb1be93f4b8132353ee0749bd1e4a5428', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, index.h("dso-icon", { key: 'cca9b200cbfc41d8af151f08077a0c3c48999a85', icon: "chevron-up", class: "hydrated" }), index.h("span", { key: 'b21a8eabf37d9319f89908e1ec29e05f941cd5a4', class: "sr-only" }, "Vorig zoekresultaat")), index.h("span", { key: '5a6a7483b0ecaa818f5a40370030230a26b13988' }, current, "/", totalCount), index.h("button", { key: 'cf226989ea402fcb66d5549b48867bc20a923c79', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, index.h("dso-icon", { key: '9b1a3178daa8746ca7434e7f4c03755f62deeece', icon: "chevron-down", class: "hydrated" }), index.h("span", { key: '71e707b2cfe6de7679819ee4fc8c5910a6681cd1', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (index.h("div", { key: '38315a5c6fdd546f5bdb68a69989c7564d2fc984', class: "dso-mark-bar" }, index.h("div", { key: '9227d64e53424a72c38dd73e6d4d98d8bc2b10ee', class: "dso-mark-bar-input" }, index.h("input", { key: 'ec64eca77b63b2b674e866fa18de418fc85a744b', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), index.h("label", { key: '15a7a40c3bfe98846d085ad29fad50124af73c38', htmlFor: "search-input" }, index.h("dso-icon", { key: '1519f069586b8ba7369867d553419a52bce72bf5', class: "dso-search-icon", icon: "search" }), index.h("span", { key: '3ba6cdfb9014ef20ad68ad85be10c584cde1d09b', class: "label-text" }, this.label)), index.h("button", { key: '49ee8be37cd063d583e9a5f20687a3b2aff37fb3', type: "button", onClick: this.handleClear }, index.h("dso-icon", { key: 'db43938400494f54bcb14016164c76ad5f6d85f8', icon: "times" }), index.h("span", { key: 'c187ac415225cb620f187f380e582729ce209b51', class: "sr-only" }, "Zoekopdracht legen"))), index.h("div", { key: 'a568e7b12daa1915f335f596d1ff4e98041f4eaf', class: "dso-button-container" }, index.h("span", { key: 'e0669d5e0ce2382728f0a2b145130fc36c379087', class: "divider" }), index.h("button", { key: '0b9eeb4451d580469f77550eca153c4d58c1aea2', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, index.h("dso-icon", { key: 'eb2bb9a30279691ed08c4ae033850dfee029d444', icon: "chevron-up", class: "hydrated" }), index.h("span", { key: 'f9a46edc77309ec09e1c805fb7ca2e436d472d83', class: "sr-only" }, "Vorig zoekresultaat")), index.h("span", { key: '6f75282b1ae0c76e65f32383ac10ff751be0a561' }, current, "/", totalCount), index.h("button", { key: '048cd720312a6485c5d6882c56cc2f610bd74c7a', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, index.h("dso-icon", { key: 'e8a081ab544f0af52204d990b1ac6bc65a2fd901', icon: "chevron-down", class: "hydrated" }), index.h("span", { key: 'c6761a83ce03cf977ea673949e2b6b102bcfc8e3', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
 };
 MarkBar.style = DsoMarkBarStyle0;

package/dist/cjs/dso-modal.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-848434f1.js');
 const getActiveElement = require('./get-active-element-05f06ef1.js');
 const v4 = require('./v4-7014b8b0.js');
 
-const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";
 const DsoModalStyle0 = modalCss;
 
 const Modal = class {
@@ -43,10 +43,10 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (index.h("dialog", { key: '4d48030b3432279a8e2df190e1f4ad1fc48c9c3f', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (index.h("dialog", { key: '7d60b29c6ebf626653447f0684c2fd524dd0d39f', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, index.h("div", { key: '0baad3eadc4cb8b63de70cfdfb7b131d2dc9fd06', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", { key: '176addc8c6b77a1df17fcaf318f7c223e38976e0' }, index.h("div", { key: '66f6999737317fea2762ba995fa241e0e0853a8a', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '4e4fb13dfc8989ac6892746707c9643020e9974d', name: "body" }))), this.hasFooter && (index.h("div", { key: '702cd2d1749a76937441c0514a424660f02d2571', class: "dso-footer" }, index.h("slot", { key: '27d2d4151e3bf97b871f01f8f0d537d69f7b9ce5', name: "footer" }))))));
+            } }, index.h("div", { key: 'c15644a770097b08db2ddd7d720ab629730cbf5b', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", { key: '2ce76e5936cd00e1127397e6a2bd3268855f8de0' }, index.h("div", { key: '4674be860f24edb85b4cfe95919be480b905f0eb', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '617f8bc8c264ac3ecf87759b7f6cde8c24a2ded8', name: "body" }))), this.hasFooter && (index.h("div", { key: 'fc33d41ff52ff698cc525defe28f5b3975ed4b98', class: "dso-footer" }, index.h("slot", { key: '6de996d2003a521dc8c9863ae2cb58d0b65a8144', name: "footer" }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-modal.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-modal.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,6gNAA6gN,CAAC;AAC/hN,uBAAe,QAAQ;;MCUV,KAAK;;;;sBAOPA,KAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAGC,iCAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACEC,qEACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAEDA,kEAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACdA,iBAAK,KAAK,EAAC,YAAY,IACrBA,gBAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnBA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9FA,sBAAU,IAAI,EAAC,OAAO,GAAY,EAClCA,kBAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAENA,kBAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAEDA,+EACEA,kEAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/BA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACbA,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;","names":["v4","getActiveElement","h"],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\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// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-modal.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,ylNAAylN,CAAC;AAC3mN,uBAAe,QAAQ;;MCUV,KAAK;;;;sBAOPA,KAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAGC,iCAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACEC,qEACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAEDA,kEAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACdA,iBAAK,KAAK,EAAC,YAAY,IACrBA,gBAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnBA,oBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9FA,sBAAU,IAAI,EAAC,OAAO,GAAY,EAClCA,kBAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAENA,kBAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAEDA,+EACEA,kEAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/BA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACbA,kEAAK,KAAK,EAAC,YAAY,IACrBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;","names":["v4","getActiveElement","h"],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\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// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-plekinfo-card.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-848434f1.js');
+const isModifiedEvent = require('./is-modified-event-f643edb2.js');
+
+const plekinfoCardCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}del{text-decoration:line-through}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::slotted([slot=heading]){align-items:center !important;display:flex !important;font-size:1.125em !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}.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}";
+const DsoPlekinfoCardStyle0 = plekinfoCardCss;
+
+const WrapWijzigactie = ({ wijzigactie }, children) => {
+    if (wijzigactie === "voegtoe") {
+        return index.h("ins", { class: "dso-plekinfo-card-container" }, children);
+    }
+    if (wijzigactie === "verwijder") {
+        return index.h("del", { class: "dso-plekinfo-card-container" }, children);
+    }
+    return index.h("div", { class: "dso-plekinfo-card-container" }, children);
+};
+const PlekinfoCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoPlekinfoCardClick = index.createEvent(this, "dsoPlekinfoCardClick", 7);
+        this.wijzigactie = undefined;
+        this.href = undefined;
+        this.active = undefined;
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => index.forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
+    }
+    clickEventHandler(e) {
+        if (!(e.target instanceof HTMLElement) || !this.href) {
+            return;
+        }
+        return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent.isModifiedEvent(e) });
+    }
+    get symbolSlottedElement() {
+        return this.host.querySelector("[slot='symbol']");
+    }
+    get metaSlottedElement() {
+        return this.host.querySelector("[slot='meta']");
+    }
+    render() {
+        const hasSymbol = this.symbolSlottedElement !== null;
+        return (index.h(index.Host, { key: '37cd380e9794177ebec616327eabaedbbe5d7fc5', "has-symbol": hasSymbol }, index.h(WrapWijzigactie, { key: '349d9142ce7a49ec456b2d2431fe690b31dff7db', wijzigactie: this.wijzigactie }, index.h("div", { key: '4f7a68e5fbdcdd1cedad76e15949d1073b79d246', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, index.h("slot", { key: '3fdc691ed1a17ee8d580a3d70cf343e5c115f3c2', name: "symbol" })), index.h("div", { key: 'b0d118f634389a8eff0ab0997f98ce9badac3ff3', class: "dso-plekinfo-card-heading" }, index.h("a", { key: 'c7d18df577714e0afe5c62a33be189f4681343c5', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: '3d8318ec4f0bf9e0479067a90a990ffbfcb49d53', name: "heading" }), index.h("dso-icon", { key: 'a1b5beefcd8ffbfc05f41e15a018a1c6fb41e4dd', icon: "chevron-right" })), this.metaSlottedElement !== null && index.h("slot", { key: 'dfb3867000025ad5aa55e2bccd7257d1ad27d340', name: "meta" })), index.h("div", { key: 'c1237a91ede9d02c37036383642635db0d5501c9', class: "dso-plekinfo-card-content" }, index.h("slot", { key: 'f168d9ce668308ec4afe95b6f893de53cecf49d5', name: "content" })))));
+    }
+    get host() { return index.getElement(this); }
+};
+PlekinfoCard.style = DsoPlekinfoCardStyle0;
+
+exports.dso_plekinfo_card = PlekinfoCard;
+
+//# sourceMappingURL=dso-plekinfo-card.cjs.entry.js.map

package/dist/cjs/dso-plekinfo-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-plekinfo-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,ovHAAovH,CAAC;AAC7wH,8BAAe,eAAe;;ACoB9B,MAAM,eAAe,GAA8C,CAAC,EAAE,WAAW,EAAE,EAAE,QAAQ;IAC3F,IAAI,WAAW,KAAK,SAAS,EAAE;QAC7B,OAAOA,iBAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,IAAI,WAAW,KAAK,WAAW,EAAE;QAC/B,OAAOA,iBAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,OAAOA,iBAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;AACnE,CAAC,CAAC;MAaW,YAAY;;;;;;;;IA8BvB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAMC,iBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;KAC9B;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAEC,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAClG;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KACnD;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QAErD,QACEF,QAACG,UAAI,mEAAa,SAAS,IACzBH,QAAC,eAAe,qDAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAC5CA,kEAAK,KAAK,EAAC,0BAA0B,EAAC,MAAM,EAAE,CAAC,SAAS,IACtDA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACNA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAClFA,mEAAM,IAAI,EAAC,SAAS,GAAG,EACvBA,uEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,EACH,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAIA,mEAAM,IAAI,EAAC,MAAM,GAAG,CACrD,EACNA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,mEAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACU,CACb,EACP;KACH;;;;;;;","names":["h","forceUpdate","isModifiedEvent","Host"],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/plekinfo-card\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-plekinfo-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\r\n  .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  .dso-plekinfo-card-symbol {\r\n    grid-row: span 2;\r\n\r\n    margin-inline-end: units.$u1;\r\n  }\r\n\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover;\r\n  }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n  }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-verwijder;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active;\r\n  }\r\n\r\n  ins.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-voegtoe;\r\n  }\r\n\r\n  del.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-verwijder;\r\n  }\r\n}\r\n\r\n:host([has-symbol]) {\r\n  .dso-plekinfo-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-plekinfo-card-heading,\r\n    .dso-plekinfo-card-content {\r\n      grid-column: 2 /-1;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\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\r\n::slotted([slot=\"heading\"]) {\r\n  align-items: center !important;\r\n  display: flex !important;\r\n  font-size: 1.125em !important;\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !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.heading-anchor {\r\n  display: flex;\r\n  gap: units.$u1 * 0.5;\r\n\r\n  color: plekinfo-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: plekinfo-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: plekinfo-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","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\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.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\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            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-progress-bar.cjs.entry.js

@@ -17,7 +17,7 @@ const ProgressBar = class {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (index.h("div", { key: 'd1b4e6eb8fc5a1ee9b96f0774474420c271f759b', class: "progress" }, index.h("span", { key: 'b7a00ad201b2c7001c6ec7286b4aed496b7d8d2a', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("span", { key: '471b0487eeec277707610bc0b81bb2c860fe02ac', style: { width: `${progressPercentage}` } })), index.h("span", { key: '513aa7c0f9881c9d95d54264553b16ddf0121e42', id: "progress-bar-label" }, index.h("slot", { key: '6ad0ef5debf6fb5d67c3b38ab0ad148c855a4242' }))));
+        return (index.h("div", { key: '6a49ff9babffe7922e2a3a5b545cd3d132e39787', class: "progress" }, index.h("span", { key: 'e5a05911d83b5ffcc9c9fe800944b30ba74ca19a', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("span", { key: '425b8690e838da624b0436fe6b50fc0383d05cf4', style: { width: `${progressPercentage}` } })), index.h("span", { key: 'ad1bbcaed9fc43340b1e6a21a7d82ccef0cf4256', id: "progress-bar-label" }, index.h("slot", { key: '12c73a2b1de830c868f72d9c40b50808958955eb' }))));
     }
 };
 ProgressBar.style = DsoProgressBarStyle0;

package/dist/cjs/dso-progress-indicator.cjs.entry.js

@@ -15,7 +15,7 @@ const Progressindicator = class {
         this.block = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '440766221ff19b173b505532d6b60be79b623317' }, index.h("span", { key: '781521a235e3b3c364366557640730aee91bccd7', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { key: 'ceecb6ba70c42f432d59ae0fc12402c4e35034c2', icon: "spinner" })), index.h("span", { key: '0ef394a7b0d5923b4553d281a4f867b0e89fa441', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+        return (index.h(index.Host, { key: '883509272d723b8104ffbcb476d6ba9007104088' }, index.h("span", { key: '27bc8c852af735c19e928e5bf07ca856f26846ae', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { key: '21d86cd9a6573926b376e4e478945477ea191776', icon: "spinner" })), index.h("span", { key: '2957362f7e96d955310de9821f7744e88892324c', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
     }
 };
 Progressindicator.style = DsoProgressIndicatorStyle0;

package/dist/cjs/dso-project-item.cjs.entry.js

@@ -13,7 +13,7 @@ const ProjectItem = class {
         this.label = undefined;
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("div", { key: '7e8ce0768a4d29b8f0e0870e514fb0cb839dca70', class: "project-item-header" }, index.h("div", { key: '5c7b01e378c96a972b1780aff226af0437569148', class: "project-item-title" }, index.h("slot", { key: 'e8af48f1b1ef400f6598b299dc424e1c068c493a', name: "title" }), this.label && (index.h("dso-label", { key: '7d4d6bfb4104391af6feeef50c8abfdf0112a19c', status: "danger", compact: true }, this.label))), index.h("div", { key: 'cb66a125f18494e5504a86a530a92fc07b972fd9', class: "project-item-actions" }, index.h("slot", { key: '3fd674fe94215b163cbd741febf8a255d2e69ee6', name: "actions" }))), index.h("div", { key: 'cee317bf938c9d5f3943f2f5df46377748963108', class: "project-item-info" }, index.h("div", { key: '91402c05f20e06d21e219be63da508c2116beb45', class: "project-item-progress" }, index.h("slot", { key: '60fe0fa198bd97e757ce867460ef1b0124a56129', name: "progress" })), index.h("div", { key: '2f2252fe030f12d87d956848aca9bd6559794fbf', class: "project-item-status" }, index.h("slot", { key: '7e15b524f5ca6d20dc8b9550dd80162614e1c3c6', name: "status" })))));
+        return (index.h(index.Fragment, null, index.h("div", { key: '86884445244ba13707f047d729a8b193ee381635', class: "project-item-header" }, index.h("div", { key: '326f36e6b4765e903f18781a8c465b4741153a50', class: "project-item-title" }, index.h("slot", { key: 'd48ca3b2801f525970effc4f6c48caf6f467a12c', name: "title" }), this.label && (index.h("dso-label", { key: '046b005d9a0dcae01c34c6549878fc4205a1f24d', status: "danger", compact: true }, this.label))), index.h("div", { key: 'f2e5e03cfa19b75fea2e7da0d20a44fb23e28573', class: "project-item-actions" }, index.h("slot", { key: '939dcd5c9312905143d429ef25acbcb9b71d68dc', name: "actions" }))), index.h("div", { key: '116ad5128076f3c07d5a7314a6aae6d35c4003b2', class: "project-item-info" }, index.h("div", { key: 'e827260fe0ddc522827433e26cf8521400f5ca0b', class: "project-item-progress" }, index.h("slot", { key: '91113a46e216c0fb1a7b27ed997e77ac3e33cfa1', name: "progress" })), index.h("div", { key: 'bc23f3f23342c7f1285839406cf1a0108d546fdd', class: "project-item-status" }, index.h("slot", { key: '865229ea9fcf2243778e4e4d52a67941c9cc6604', name: "status" })))));
     }
 };
 ProjectItem.style = DsoProjectItemStyle0;

package/dist/cjs/dso-renvooi_2.cjs.entry.js

@@ -56,7 +56,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("button", Object.assign({ key: '2a589d57cb3a34fbc7d545ba463eb5dfdc7c8e3b', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index.h("svg", { key: 'daeae3ad7945cca85dbcfcd0393088c2247d3063', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index.h("g", { key: '1dc77f9db7e0c8e8a4118a12dd7e153092fd7c3d', fill: "none", "fill-rule": "evenodd" }, index.h("rect", { key: '44f1f0491a5e32eea07435b4bb5d2ac5e10e5dc1', width: "40", height: "20", fill: "currentColor", rx: "10" }), index.h("circle", { key: '4a5c4a0f67804163ae09155e1fa1bad50d7b6202', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index.h("label", { key: '4a68fb9b36dc403cfb3f48614b603a218453454f', htmlFor: this.identifier }, index.h("slot", { key: 'b41750cfec394016cfd4b9dd75b5ffa8c8dad754' })))));
+        return (index.h(index.Fragment, null, index.h("button", Object.assign({ key: '1d0bd72208407db78bf18151ca091cc52ee8fb01', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index.h("svg", { key: 'aeab86c82b268e0090b94867fd8f404cc2c52ba2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index.h("g", { key: '8ba58bfc4e94d0ef9ed98a2a3a6c6820f7ad0e43', fill: "none", "fill-rule": "evenodd" }, index.h("rect", { key: '992551dcb7d56e2db0f71816b2d7af218dc1b1f3', width: "40", height: "20", fill: "currentColor", rx: "10" }), index.h("circle", { key: 'a3aca9759480ab267897c3d156945e8df7f6af70', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index.h("label", { key: '688ed90390ee4454f4361b8d44018a7f40502886', htmlFor: this.identifier }, index.h("slot", { key: '1681d2d582523acb101921eb6653328676213392' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-responsive-element.cjs.entry.js

@@ -50,7 +50,7 @@ const ResponsiveElement = class {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: 'da7d53fadbf366d94af9b81a7fbe82d5b841fae6', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: '7f5760e962121bb49d6df0bbec7480f8cdca2e0b' })));
+        return (index.h(index.Host, { key: '7df8a0107dec10534a1ee68c12b0718675ca37d0', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: '376cdb5c8b4b349877b7289b9bb5b0ae597620b6' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-scrollable.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-848434f1.js');
 const clsx = require('./clsx-fc789adc.js');
-const index = require('./index-7244933f.js');
+const index = require('./index-a49786b9.js');
 
 const scrollableCss = ":host{display:block;block-size:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{block-size:100%;max-block-size:inherit;min-block-size:inherit;position:relative}.dso-shadow-container .dso-scroll-container{block-size:100%;max-block-size:inherit;min-block-size:inherit;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;block-size:24px;inset-inline-start:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;inline-size:100%;pointer-events:none;z-index:1}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));inset-block-start:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));inset-block-end:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
 const DsoScrollableStyle0 = scrollableCss;
@@ -91,9 +91,9 @@ const Scrollable = class {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (index$1.h("div", { key: 'b786c2765a723299a16956239d0a3f2814bdb365', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: '32629e90bd713faf99192825f4d5f6b730949724', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
+        return (index$1.h("div", { key: 'ff6794620912d49f124f4bac4222fd278dbd6b29', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: '532d8178bd3755a10e3d3adbe582c8dfa894347a', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: '3d02e6603fb849f9535529ae5143452e0ee0484e' }))));
+            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: 'ae425415162ffd8d13adae1e42c9e4728106d5d5' }))));
     }
     get host() { return index$1.getElement(this); }
 };

package/dist/cjs/dso-tabs.cjs.entry.js

@@ -69,7 +69,7 @@ const Tabs = class {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: 'ce49553d33f63de258e8ff3466fa37d539e4734f' }, index.h("div", { key: '22a863b05306509b718237a071a072a52c3cfd73', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, index.h("slot", { key: '75d01af59d70f79e059948d9239c7c9ccdef297b' })), index.h("div", { key: '2304bbce1b0c27566ae04f7c1c5dd13cd9e588eb', role: "tabpanel", tabindex: "0" }, index.h("slot", { key: 'bc1a82a606d37dd50beb5f5acd575cc57b41182e', name: "panel" }))));
+        return (index.h(index.Host, { key: 'd115f11054298f6f4ba09e97f0e8c1b726aac09c' }, index.h("div", { key: '74e724fc01facb00f7ca14f3420b68172c313927', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, index.h("slot", { key: '7d65307f3dd7372b30eccf57ae2c552451d0920f' })), index.h("div", { key: '251184652aace25225b69336bf9c0bae0ab98e68', role: "tabpanel", tabindex: "0" }, index.h("slot", { key: '79e95365db5486bd5e54161919f653df5ac525cc', name: "panel" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-toggletip.cjs.entry.js

@@ -49,7 +49,7 @@ const Toggletip = class {
         this.secondary = undefined;
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: 'd814dd230c0a2b7dd143f0c461a7c35c5a0e8256', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: '8335db4a80d8bf7fdec4251caa9a3d4c5520b8f4', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: 'e4f9747977cd810999eb63ee413e63827ce106e3' }))));
+        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: 'f7e6f87ddaa464cbf64ca4b18341a33611e3f72a', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: '29128e6c5cc5c3ea6d17aa3a27f76b09c00b059f', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: '6d4157cdfa69e23487aa758fbd8d8f3dac612bea' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-toolkit.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section.cjs\",[[1,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select.cjs\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item.cjs\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item.cjs\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header.cjs\",[[6,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls.cjs\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"role\":[1],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card.cjs\",[[1,\"dso-card\",{\"clickable\":[516],\"imageShape\":[513,\"image-shape\"],\"href\":[513],\"mode\":[513]}]]],[\"dso-date-picker-legacy.cjs\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-helpcenter-panel.cjs\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button.cjs\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"],\"manual\":[4],\"manualInputWrapperElement\":[32],\"manualCount\":[32]},null,{\"manual\":[\"watchManualCallback\"]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-accordion.cjs\",[[1,\"dso-accordion\",{\"variant\":[513],\"reverseAlign\":[516,\"reverse-align\"],\"_getState\":[64]},null,{\"variant\":[\"updateVariant\"],\"reverseAlign\":[\"updateReverseAlign\"]}]]],[\"dso-action-list.cjs\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner.cjs\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container.cjs\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box.cjs\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar.cjs\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab.cjs\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid.cjs\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelOpen\":[516,\"filterpanel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterpanelOpen\":[\"filterpanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dso-label_2.cjs\",[[1,\"dso-label\",{\"compact\":[4],\"removable\":[4],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[1,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-toggletip.cjs\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu.cjs\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable.cjs\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info-button.cjs\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-info_2.cjs\",[[6,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-renvooi_2.cjs\",[[4,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-renvooi\",{\"value\":[1]}]]],[\"dso-alert_6.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516]}],[1,\"dso-panel\"],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[4,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[4]}]]],[\"dso-responsive-element.cjs\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section.cjs\",[[1,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select.cjs\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item.cjs\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item.cjs\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header.cjs\",[[6,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls.cjs\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"role\":[1],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card.cjs\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy.cjs\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card.cjs\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel.cjs\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button.cjs\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"],\"manual\":[4],\"manualInputWrapperElement\":[32],\"manualCount\":[32]},null,{\"manual\":[\"watchManualCallback\"]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card.cjs\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"active\":[516]}]]],[\"dso-accordion.cjs\",[[1,\"dso-accordion\",{\"variant\":[513],\"reverseAlign\":[516,\"reverse-align\"],\"_getState\":[64]},null,{\"variant\":[\"updateVariant\"],\"reverseAlign\":[\"updateReverseAlign\"]}]]],[\"dso-action-list.cjs\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner.cjs\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container.cjs\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box.cjs\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar.cjs\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab.cjs\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid.cjs\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelOpen\":[516,\"filterpanel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterpanelOpen\":[\"filterpanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-toggletip.cjs\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu.cjs\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable.cjs\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info-button.cjs\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-info_2.cjs\",[[6,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_2.cjs\",[[1,\"dso-label\",{\"compact\":[4],\"removable\":[4],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[1,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-alert_6.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516]}],[1,\"dso-panel\"],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[4,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[4]}]]],[\"dso-responsive-element.cjs\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-renvooi_2.cjs\",[[4,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-renvooi\",{\"value\":[1]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/dso-tree-view.cjs.entry.js

@@ -199,7 +199,7 @@ const TreeView = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '297a05e4f779433dea7c7e297200b5205c9a835e', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, index.h("ul", { key: '095ee29e9af3861b29e413e7120e79ca32a46364', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => (index.h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index$1, level: 1, setSize: this.collection.length }))))));
+        return (index.h("div", { key: '733757192ac89c90806872d71a6b9d1079a33514', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, index.h("ul", { key: '29f84b165163e1ada0f411e8127ac3e213a775b0', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => (index.h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index$1, level: 1, setSize: this.collection.length }))))));
     }
 };
 TreeView.style = DsoTreeViewStyle0;

package/dist/cjs/dso-viewer-grid.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-848434f1.js');
 const clsx = require('./clsx-fc789adc.js');
-const index$1 = require('./index-7244933f.js');
+const index$1 = require('./index-a49786b9.js');
 
 const viewerGridVrkTabs = ["main", "map"];
 const viewerGridVdkTabs = ["search", "map", "document"];
@@ -253,7 +253,7 @@ const ViewerGrid = class {
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (index.h(index.Fragment, null, this.tabView && (index.h("nav", { key: '8ca85b7872476a2afdcb8d41d9d7d3d8fd9d130c', class: "dso-navbar" }, index.h("ul", { key: '83195a76dbb5770f6a38fe8feec3c1f85a70f102', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (index.h("li", { key: tab, class: clsx.clsx({ "dso-active": this.activeTab === tab }) }, index.h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (index.h(MainPanel, { key: '2b13de9e342ee70f4b6f225742f19f4a48387f49', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), index.h(Filterpanel, { key: 'c31ce856aacd1c762e4988187e71533c09a554f6', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (index.h("div", { key: '31e87407557de7024832b5cc57b8e4d0cd882e6f', class: "map", ref: (element) => (this.mapElement = element) }, index.h("slot", { key: '6ed2d2a928d67f175293c4b16dffc5f836a1beba', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (index.h(DocumentPanel, { key: '32d6858043486f36421a73ab0431cf49db6d0d8b', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), index.h(Overlay, { key: '3e947e34d6693ecfef90f1606d5e8af37fd28efc', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (index.h(index.Fragment, null, this.tabView && (index.h("nav", { key: '5bb28bca2da923349ff553a3e32ad6afc6292189', class: "dso-navbar" }, index.h("ul", { key: '0ec74cb43fb25056ca47b063c94e19deaf12e5a2', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (index.h("li", { key: tab, class: clsx.clsx({ "dso-active": this.activeTab === tab }) }, index.h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (index.h(MainPanel, { key: '92b77fad12d794fe466f0eefb1c077545887970b', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), index.h(Filterpanel, { key: 'ecb109bf285a6838c5ec84ef069bd53ba581c5a7', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (index.h("div", { key: 'b4a056be215b05ffb730f82aee8eebb7adf1c7b1', class: "map", ref: (element) => (this.mapElement = element) }, index.h("slot", { key: '26a55ded1adf6f6d12814c4f327538e6cc14dbe8', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (index.h(DocumentPanel, { key: 'b2ebd498fa85c639196525cda9f4386613bae869', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), index.h(Overlay, { key: '718aa0f258d94bad2336b14f13cd0ba26d465205', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {