@dso-toolkit/core 62.23.0 → 62.25.0

package/dist/collection/components/list-button/list-button.js

@@ -113,7 +113,7 @@ export class ListButton {
     render() {
         const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '595469d188c512dc1b34eda805e41c564e29ba4a', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '5111da2a36969b0acae7190c2613124d9217ed8b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '4db309ba5edc6caaccc40ce6016bea0fa4997df4', class: "dso-selectable" }, h("input", { key: '6f4f46ee4fd6705e169ee622b4134e0ad561a505', 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 }), h("label", { key: '9fedd5d531c56983b5c89d7bf65a47fa0aca3523', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '002a567fe3d9504f27be61bf801a8ae48decd5d1', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '432d4922ddcc649daa4f1c9311250748b39b89f5', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '894a6fa32ca6edeab9dd436d50c7b063a1a5273b', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'da5f033e670f95b2893df0301f3a23f37c0df382', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '7b4384dc1b1eaeb9255eb3e2937a95635c2567a5', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: '479bab779cc2e589289a6fbb694c71a62194019b', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '5cff6d05687291a9bf52940a93358fe0f25a8305', icon: "minus-circle" }), h("span", { key: '5e7295c692372eba158405fdebc5c02bcc361b2f', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: '057f3e693f7c5f07cef6e5d606e91b8096bb1ed8', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: '9497f8c030c2dbb6c9cc59965c83d0ea854a3e21', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: '1d8f5e6bdc517a893f78ce9af3175190321a82f3', onSubmit: (e) => this.setCount(e) }, h("div", { key: '80e89a920948228037750489f28a341c7eda82d2', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: '7540fa096742a46fe53504f08a2786d720b49a04', class: 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 && (h("button", { key: 'e6f3b0761e87577626308b192332adfe95771601', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: '8834a819b42cfe8b7d2f701927c39a2215ec86c7', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'cf26acf0a0eb6150ac6b6e76b4e1a479b5ff7516', icon: "plus-circle" }), h("span", { key: '3db09a5efa814148c99e38a181aa8d188479742c', class: "sr-only" }, "Aantal verhogen")))))));
+        return (h("div", { key: 'd40fdadfac45c00b7657ff365ddfac8769c72710', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '916de1d699fdb155530dfb5aa5b4b9315eb78b33', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'cf718524bcc8bff10602d19701319522276390b6', class: "dso-selectable" }, 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 }), h("label", { key: 'b5997457d4260bcf7971d2e57c7cb22ba036ef17', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: 'c3747912f68572b004672ae49d770037cc40ed3c', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '85bd8620045f43ee3af685fcc9805f287b992ebd', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '0936df007aa982b94bd63f63d2744dc342d0ec96', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '4e54fda951864d13c59bbf70f9052b7aeabb6bdb', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '8bd1030c7f7e779da73c67886c6da74e59eee9e9', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: 'eeaf4920e388b5315a705859832fafe6d14920e3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '60020bb171ed5b33e9850bc7472a7caa08bfbfd6', icon: "minus-circle" }), h("span", { key: '6f085b670db936d7ae44405a87d5aa04e663de8e', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: 'aeacf135c45b4b255a5399dcded381769cc5962b', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: '84dd0679203c6ff85ea858e689366fb952a9e666', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: '19b9381145862bf3893284594479ff009f37a310', onSubmit: (e) => this.setCount(e) }, h("div", { key: 'e6bb25bd9ba9b848431e7451154ab91888f3193d', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: 'da5757dc2be34a994e1a54ceae73e176cccb99b8', class: 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 && (h("button", { key: 'cce6b85e2cbb094c7dbe9b008320758c075106d6', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: '09fd129b37155929d83573123cb15fd4c072cee3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '53bc95e299e1c0af676e397382f15137016c58e7', icon: "plus-circle" }), h("span", { key: 'a22ef9ead527e8ba09685fc9ec89b26661f22c7e', class: "sr-only" }, "Aantal verhogen")))))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js

@@ -15,8 +15,8 @@ export class Logo {
         this.ribbon = undefined;
     }
     render() {
-        return (h(Host, { key: 'b04f1170ed654ad0785d65761c0b81665b09befc', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, null))) : (h(DsoLogo, null)), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'fb457df019fe2fbaa97276083c6d46e3f6679329', class: "logo-ribbon" }, this.ribbon)));
+        return (h(Host, { key: 'd57dfbb27ec2be56630b4a78ade3a9922e81c3c3', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, null))) : (h(DsoLogo, null)), this.label &&
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '8c22fc7c3b90a05312eedb04dd9c356cba7fa27e', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -22,7 +22,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '9393b34468f7e7c35fd8933d344353c42a50f627', class: "form-group dso-radios" }, h("legend", { key: 'aa1cf5cc8c0d9874c7b443072637bcacb9dca799', class: "sr-only" }, "Achtergrond"), h("div", { key: '7c4236d2023cd6712e5f5761151990d7614a6c39', class: "dso-label-container" }, h("span", { key: '3195ba776a980eed4eb47bf224d8617aa5debda4', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '6561ad34fa4d0eeb3ec152c75e891109b8c1eda0', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (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 ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'ce4733538fc133e4d016ebe43df3b13a58797446', class: "form-group dso-radios" }, h("legend", { key: 'b1f4ceb4f0c8d9fefce0ca9646e02097e95afbd4', class: "sr-only" }, "Achtergrond"), h("div", { key: '702d557a61547834151275a488d207d3b78d3407', class: "dso-label-container" }, h("span", { key: 'e44d8e0a6d88ab41a8c36989229bc4d577f9c61f', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '0b97e49d0288373b77f8edcc15efa1f77c440c8c', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (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 ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-controls/map-controls.js

@@ -54,7 +54,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Host, { key: '3f7ce2dd7cc11f02be90577764970adf85172967' }, h("button", { key: 'a1c1a07a05ff312f23ed8b6aa02ec02d8b2d34e2', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'e4da397ae7087125ea14e170813be8865a8348dc', icon: "layers" }), h("span", { key: '2fca94571636536e03a555f757104026efeec391' }, "Kaartlagen")), h("div", { key: '71fb31b517376f797914b8de132aac888ec63a23', class: "zoom-buttons" }, h("button", { key: '44c2cc9aa939657400638d86d163f26eff6a9d0a', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'c5ab82f953c0a432e0a7f57a65abc524534da557' }, "Zoom in"), h("dso-icon", { key: 'fd575a867cbf47779083c96f5fce23784a18dfc1', icon: "plus" })), h("button", { key: '0dd2fbc677a7c411b64418be261a46cf61e12dcd', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '6b5292a0cc6055db0e9ec5cbcbc96c4cdf052be7' }, "Zoom uit"), h("dso-icon", { key: '09d6f4b412ac2c2abd8bdcf9f9e41333c383cb5b', icon: "minus" }))), h("section", { key: '1e881bfac904ed3b423111cc6ee38ad448f47226', hidden: this.hideContent }, h("header", { key: '6674658c959a06baea1e9a352f3390877e2ecc24' }, h("h2", { key: 'e69abd4f06d843d46a0315cf0f9af3b06e4b84fc' }, this.panelTitle), h("button", { key: '62a73366df821988b470161bab7bd898a93487b7', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'b38bf7e6d2f44cc94605d177ec69df31650079de' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: 'a272d1b7cace86845713c69186e86066a212998d', icon: "times" }))), h("dso-scrollable", { key: '2eceb3fffae1d00e66ff289ddf7252a289427ed1' }, h("div", { key: 'dec6be8e301f0ce247086c01f608b240fc56509f', class: "content" }, h("slot", { key: '97d929c30fc07e77ce586841a71f0a52e347bcc6' }))))));
+        return (h(Host, { key: '811ed45e16756a18deea944ab3a830de0337515c' }, h("button", { key: '5eb63aafc7e83f90fbb93a8ffef51189f86dabfd', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '10c61d07bdabde651a1b054bdfcffff96b09ffa6', icon: "layers" }), h("span", { key: '495d5f0f496812b699b0d73384ff7a3cf44cdf83' }, "Kaartlagen")), h("div", { key: 'f7cc57743bd35805fe1290884c42be7b9f28deec', class: "zoom-buttons" }, h("button", { key: 'dc849568c9f89a3a97e089a748e4f9cab1bb244a', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'e2f3dc349c28b85641c31b31fb562ac3d978ad8f' }, "Zoom in"), h("dso-icon", { key: '685d9951a3f210d41c127445221fbc4202f81f8b', icon: "plus" })), h("button", { key: 'c207b3d18695514f2450e0541bd96a9959e79c41', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '5ae124eec302ed0eb4311a863724319efe11ac07' }, "Zoom uit"), h("dso-icon", { key: '0d42226e456acc25c35a27e8b2f218b22c6f4108', icon: "minus" }))), h("section", { key: 'f1c8eeaae2dc0b107abe12068ab0c1dc55a083ab', hidden: this.hideContent }, h("header", { key: '30fbc77b30f39fb09f1aaca1ccbcf9d159aec5c1' }, h("h2", { key: '4ef3fd5e1af61d3c6e904ab3185db652fdfa6bca' }, this.panelTitle), h("button", { key: 'ec6d354424c9e918ed8b548944be847697f8ff39', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'ff58412ce86c3d0831acb22e82b3ff70707417c4' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '4dd038854693f096c3436f2a4c2a94748a9787e1', icon: "times" }))), h("dso-scrollable", { key: '645eb72dc729951ff79034339b905e36e91e4e7b' }, h("div", { key: '6df947228a9dc9bf2ed52ab9b3ce0874ed2618cb', class: "content" }, h("slot", { key: '810c62ea5de995e1423f664e11411213df18bfec' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-overlays/map-overlays.js

@@ -23,7 +23,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'e2e4fd68c19725e3ab86f6a3226a096499f8bfd6', class: "form-group dso-checkboxes" }, h("legend", { key: 'e91f746f3ce067afe57835da2996804dba471ce3', class: "sr-only" }, "Kaartlagen"), h("div", { key: '81894c2733ee1717602906057def15e6c2b94ede', class: "dso-label-container" }, h("span", { key: 'd2e15d075b1796bb7eb63a423f5ea0f0618d0367', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: '27a3141b73c4fabcc6c22b341bc314749bd77e2a', class: "dso-field-container" }, this.overlays.map((overlay) => (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 ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'e064b6e3c8270a7ae1a88a75310e643184b0c871', class: "form-group dso-checkboxes" }, h("legend", { key: 'be69f5fb324f9699693c8a59e02488d1ef299f80', class: "sr-only" }, "Kaartlagen"), h("div", { key: '31c5b7a451d53c2bb88078741a6bf003a5f38171', class: "dso-label-container" }, h("span", { key: 'f923ee4a9eab8445103642d68478e76f1393fa31', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'a3f52d6e7f87ecfdb6dd5ec354e728ec78ff392a', class: "dso-field-container" }, this.overlays.map((overlay) => (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 ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '68ad558bacca7efb6cbbec4d6a3e345414db5b39', class: "dso-mark-bar" }, h("div", { key: '76a7f907fa25df303f020af3e65b56c4d866d2a6', class: "dso-mark-bar-input" }, h("input", { key: 'a2fce14c437aeea11c63e9200ca48252bd234e7d', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'ba3fb2615d6677f4c22f2092f4582d6af2dbddad', htmlFor: "search-input" }, h("dso-icon", { key: '1ea33ee9cf987d87316b59daf2b009623f18a77d', class: "dso-search-icon", icon: "search" }), h("span", { key: 'ff7cf3471e76569ac81766f4fbdba79fdf2c20d4', class: "label-text" }, this.label)), h("button", { key: '637da769c9d368f27f730e229e92e79154f3857a', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'fdb73d9af338db53efe1261f4c75feabc288e5ee', icon: "times" }), h("span", { key: '0d87808d814626e9160b80bef23242301c92366b', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'bd7c2ba5488192fae27824cca3fcc4fb7c343e3c', class: "dso-button-container" }, h("span", { key: '352e98377532aa5831191846a0dc27a07d45bf6d', class: "divider" }), h("button", { key: '2f0ed4ad58a39dbd6147073195af38e88b6ff6f2', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '02708b431889f4fe8ea23a0164cac58df6c6bfde', icon: "chevron-up", class: "hydrated" }), h("span", { key: '652bbfe037f969931eeac2150a3475ae025d8789', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'f82a43c76c9322a5b63a95ee59964abe2707d178' }, current, "/", totalCount), h("button", { key: '4b229b7a3d4e08cee35c5bb584b506cac33b8a36', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '918ea364d78b2f5925556ab7b73da32bf90fbabc', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a4f86a58b2fdb574cff3b51f0948932b5819eb50', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '86eb7b642e9767352fbc75a1daba29afcf55ce03', class: "dso-mark-bar" }, h("div", { key: '09ae8802d957d6b211c29bf63862a31c1aa73226', class: "dso-mark-bar-input" }, h("input", { key: 'aad7ce3b0fc2885f83a09763be64d83adbaf565a', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'a734d54fdde110aeb8c8cc4f01c1a0cf01c414ac', htmlFor: "search-input" }, h("dso-icon", { key: '3b608e3b58be2c1523481711906ccd6930ec3fb7', class: "dso-search-icon", icon: "search" }), h("span", { key: 'e2f2ef89c4444c90688947010f01c551a4604b2c', class: "label-text" }, this.label)), h("button", { key: '6d5ecdef20b596f3ce1c7a7a0240c11bc4f474c7', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'e28f8ff586da9c44be6dce7ebe60f0c2ab06068e', icon: "times" }), h("span", { key: 'b84ebcfa78721dfed4f195d4a684c66e2e1aca48', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'ee0f15d11fc4997a51771eb13cbd75da919530ef', class: "dso-button-container" }, h("span", { key: 'c8bd69aa13ce337b8845d60bf38dee4c04cce547', class: "divider" }), h("button", { key: 'f235b21d3d068fbcef70b4d92d636ac2ffa0da39', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '587848082507cd57cd90e4c0f81be53d8e4df0b6', icon: "chevron-up", class: "hydrated" }), h("span", { key: '3f8e9c78ddc70fedc638528bfb0000b9ce4f91c9', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '88e285a9a36594ddfc782539fd66f566496526ed' }, current, "/", totalCount), h("button", { key: '732c37e44fb2eb9989754d606776c15d95b328c4', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '72032a6914db0c1cdf967e02e470649f61056219', icon: "chevron-down", class: "hydrated" }), h("span", { key: '13cf1a7f9931e5bff22dbec53cfbf9464d8a5c72', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -33,10 +33,10 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '8667722ca1444f173b011507c9c4a06ff3ddeddd', 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 (h("dialog", { key: '105a90e070e128bc42e652e71e2d65d7075c3b22', 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 });
-            } }, h("div", { key: '0ebf13e604a159c4bb08c96fd0d87011b09fd6e7', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: '434522fd8d1c2d518a7bbb410dafc674f3f72c99' }, h("div", { key: '8399490f6dd67d60a30646c1e2727535dae856a6', class: "dso-body", tabIndex: 0 }, h("slot", { key: '6f27377f5311c753944b9f1f3f019c84bd41b15a', name: "body" }))), this.hasFooter && (h("div", { key: 'd8d14ec73fc2c2c3fe099d03cf83b992a8f6378a', class: "dso-footer" }, h("slot", { key: '1b780ea4a62678c453050e32831ca5c0dc26b36c', name: "footer" }))))));
+            } }, h("div", { key: '62928005e012b28a4bb3292577d338a19564d900', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: 'a3b8ca827f4f810111748c8afce16376a2855ea2' }, h("div", { key: 'e1b8da8b7f989fb9218225717b42a442ccdbba68', class: "dso-body", tabIndex: 0 }, h("slot", { key: '75d7237cd6361428ee1a8fde43297105c13a5a70', name: "body" }))), this.hasFooter && (h("div", { key: 'ccba551213f760dc116181a15c5d14ccc4e69b55', class: "dso-footer" }, h("slot", { key: '723581c8230a74655480866e0cb319c0e3f40215', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/ozon-content.js

@@ -24,7 +24,7 @@ export class OzonContent {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '1120ae597aac87e4d5b908c44bf77d096818f816' }, transformed);
+        return h(Fragment, { key: '0084a8526897788dc1f037f0f1a49f6da2ea14b6' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -8,7 +8,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '1a45c38772e90c8b968b3f7b977f268e2b4690a6', class: "progress" }, h("span", { key: '313b816b1e77a99897f35766f283cbdc241e7e7d', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '319575966c1dd86f400a850b7b73945d487b306c', style: { width: `${progressPercentage}` } })), h("span", { key: 'afc0c3b8043f59cbaa30b175af3e4dfb4397af80', id: "progress-bar-label" }, h("slot", { key: 'd1340fc1c5180795f6b7a4277b54cf79eba1327b' }))));
+        return (h("div", { key: 'ff4d4c40756266cb3148ad99654ed7cc4583f317', class: "progress" }, h("span", { key: 'e22b0de3d25d8db1108adbe270efe535eaf63691', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '7071ce188554ec8c59f43dd14d1106801abdecb0', style: { width: `${progressPercentage}` } })), h("span", { key: 'e0cc46668cd3ef7de11cce700a7b8d90080f136e', id: "progress-bar-label" }, h("slot", { key: '2e118c2588641d6cd350a1fe9bc59a965770a183' }))));
     }
     static get is() { return "dso-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.block = undefined;
     }
     render() {
-        return (h(Host, { key: '58f7e538a65dac546f928bf2e0269c774351d92c' }, h("span", { key: '6dbca482e53cadb5a2af0040c59c251f879300f5', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'cd665e310c1a2b00f4694c47c28fe0a21e3dc117', icon: "spinner" })), h("span", { key: '7a900e5d798cd6e0b79f5735521e3c7193953109', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+        return (h(Host, { key: '68ff0b6ed51e192610a23c9bf9715fc9d757fba1' }, h("span", { key: 'f340d8a00dc48655e525329b25870d53975a8f7f', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '841182f2410e0c23d44b1359a00482ae44501a08', icon: "spinner" })), h("span", { key: 'c498a9297a8c3196b497bea9bd32c446b49c1fb3', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/responsive-element/responsive-element.js

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '2029e4f353845ef8216aca8b34766d1994dc1978', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '1091f3ff1b743749016eb05770a1832b71addad4' })));
+        return (h(Host, { key: 'fe62bfb3fa9345115e9959500e8c3906efa28261', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'dea7899ed18de4e28962d3a824f257c39f7057e9' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -81,9 +81,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '728914b36a4de1fc393f0de5c9d72630e5d36cf6', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '9a19dccb10a5492accf5935d5bba29669ec43253', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '9c53005e7c9885cf72e912f4f557bbbf6f7d5b50', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '30333683609d1fd13fbccb3d9756f7e3948fc090', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '4065ef31dbe24cb64d47d5470ba256a9edc42f56' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'bb8bd480c431862ccc7db6847c97161fc92e738d' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.js

@@ -63,7 +63,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '9b3a5a7eded8a2c4fa778a78506cf3830eeb2158' }, h("div", { key: '77eb55ac077f2165af3eeabbc7d905aafa9ac00b', class: "dso-selectable-container" }, h("div", { key: '2a76089b151a5bda6f92fc6db37520a36a4c0c8a', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '753871d7f427daac250481c45d53f277ce0e9aaa', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '33b894964ac606b03da670d53dcd4766ed73ce9c', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '625d8c5d96d9e40cce6bbe2d06ed27cb51093d05', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '762e207474ba137a6e49c18f4f95012715867768' }, h("slot", { key: '4d7c20a761021788cd034fd0b6fc1f1fb9b73045', name: "info" })))), h("slot", { key: '95f6353ece9a423f9e1a6f300ae67f456465199b', name: "options" })));
+        return (h(Fragment, { key: '1f81229a1f1fef108068804fad7761151b9c074f' }, h("div", { key: 'fbd1cf9ab0ff933b7c0fb183c6be54c543502967', class: "dso-selectable-container" }, h("div", { key: '5d5b101e3b05e07a36b4cb1f0927bd55ccc459db', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '094554197b315b6a992a43360b229f0d898ae480', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '68d97d170c77ad983efcd6511ce23df320d3b23d', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '54eca001300dd947e79f5f5cb9c91fc9f44a6a94', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'f3d478436c5b8428b10802953423aa237fb6c4a3' }, h("slot", { key: 'c0b0a05b5997a90a11581b7be95f3443e2cbb8a7', name: "info" })))), h("slot", { key: '7c8d8bd9c10289b068d1e544995cbebfbb7ee8e7', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -19,7 +19,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: 'ea4d8bc2eb5fa0a52ac79f17f159a9ee26e09d2a', 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 } : {})), h("svg", { key: '9acfafd7ef96b83c925f047df6c32a291d838ae9', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '88eebbcb44f052156eca94252415c5d25c63e680', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'eace61a8f842a075dab3d9426e69116ea3315f6e', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '3291d73f3eadedb5f14bbdbaa1f5d44cafd28914', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'a4d94570566b9fe47ca66d0996bec90991b8108b', htmlFor: this.identifier }, h("slot", { key: 'c57f79aee4166a947a22d7b4ae1de4b976b11a0d' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: 'f8675793bcdd4b88ca76fa4e3739a5e7a76ebbb0', 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 } : {})), h("svg", { key: '3aea12f6ceb0ca2aaa708afe2345f9fc45b5f982', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '8e1d9f35b03bc2c5eae7fe28b5f0966f76eb70d4', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'bdf984ae055e5b6b994da64526b260082935b43e', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'bc009a77fdf29e0901b089d22cf73383b3172c9c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'c623527a4f867e5bb7745d97f77d5f6515e8b9fd', htmlFor: this.identifier }, h("slot", { key: 'bef77c8f156edc05a4e549d0a9aa0d5c33e6797f' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get originalStyleUrls() {
@@ -135,7 +135,7 @@ export class SlideToggle {
                 "name": "dsoActiveChange",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when user checks or unchecks the Slide Toggle."

package/dist/collection/components/slide-toggle/slide-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide-toggle.js","sourceRoot":"","sources":["../../../../src/components/slide-toggle/slide-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAQ1B,MAAM,OAAO,WAAW;;uBAQZ,KAAK;wBAMJ,KAAK;;;;0BAqBH,EAAE,EAAE;;IAQT,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAChC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAEvE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;oBAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS;wBAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG;wBAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC;YACR,IAAI,CAAC,eAAe,IAAI,CACvB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU;gBAC7B,8DAAQ,CACF,CACT,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"slide-toggle.js","sourceRoot":"","sources":["../../../../src/components/slide-toggle/slide-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAQ1B,MAAM,OAAO,WAAW;;uBAQZ,KAAK;wBAMJ,KAAK;;;;0BAqBH,EAAE,EAAE;;IAQT,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAChC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAEvE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;oBAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS;wBAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG;wBAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC;YACR,IAAI,CAAC,eAAe,IAAI,CACvB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU;gBAC7B,8DAAQ,CACF,CACT,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/table/table.js

@@ -30,7 +30,7 @@ export class Table {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '605ee565237f1ce87f0f14227d5c4ccb1b351dd6' }, this.modalActive && this.placeholderHeight && (h("div", { key: '2bc2d841dc4bd4aa15bcab5a524904c6c1500caf', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '83c49337946c1fc4d0a517146ae6a5b10d3efdcb', class: "dso-modal-overlay" }), h("div", { key: '9e34e315aa68e77aac7b8a03cdd3665022f1ccb4', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '6c24562e2b880a31b43f901d07d63e2d34b05783', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'b4d32a6806dd03d04a88610110b640218c57bb70', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'fcf050303d05bfb43abd03fec837bfbdb650a307', class: "dso-responsive-message" }, h("span", { key: '6902e0cddc1beade3442fa95245de48dc681c6af' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'e7f06763d9ac12691f0892fdffaae2bd342bdead', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'b890a79fce379dc6da7a16448149804646980d7b', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'e4a545c2e8d6e906f58846a2b2f0a5e1fa1ceddf' }, "vergroten"), h("dso-icon", { key: '9f57a35173d80f2e4e736db291bfe96b71149946', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'ee12a47f142adc1da660830275694ad7c4156455', class: "dso-header" }, h("h2", { key: '64f262b2f51d37d9e34f6ad954b7f3a11576ecdb', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'e679cec677928196d2914c68b08e855b30988cf4', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'a274c98599ae8c2ad411ceaae206d2119dbec70f', icon: "times" }), h("span", { key: '77d762a3e7b5d8ffedefa4339207bbeac779fbeb', class: "sr-only" }, "Sluiten")))), h("div", { key: '61d3425f47548b34d0dda4bf7bd739d8484e218c', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'cb1932c38d91d7d4c87004c027348f8903ffd79f' }))))));
+        return (h(Host, { key: 'b629c1e25c4d60aa60df91f1853994583c2f2d07' }, this.modalActive && this.placeholderHeight && (h("div", { key: '4e7442a495c7be75cb3bb5370134c1101f02aee2', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'f33754de281a49d8130a5e6dd11d416a167ba920', class: "dso-modal-overlay" }), h("div", { key: 'ffbf7075107a77dc3647a69fe599f37e6bc419cc', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'a94cd512f42be3b1051164d451b552a7bcfeedc3', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '139e9caf1f0c8c755ec7803b5259a3e06468c3ac', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'cac3717161b89afe97ad1059040654b0cf48e436', class: "dso-responsive-message" }, h("span", { key: '06390037b80f1351407fb07e761f563ed2edebc1' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '32a6a1ddfd6ea7a05ec6e97d582fdc2a4c99ae79', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'eae2830da62a081b82b4ef51d49adb92da2bf5bb', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '7bc7f04268324863e5d6712d4ffab4c6a46b08dc' }, "vergroten"), h("dso-icon", { key: '04fea1be6bd15d834decf67ffa40ea165d1a7f7b', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'fb55b553daea04a348736fd01ff5d5f85d0723c0', class: "dso-header" }, h("h2", { key: '7943854e13ee199057a599544473c7af2734be1e', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '637d2d54a71d80ea703ecc68df033f6f4eb045d8', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'c52e6f3dc6c0e29672ecc8589382897c2f540cb4', icon: "times" }), h("span", { key: '1df50db1609abe3fc64da59b8c24caeb161bea15', class: "sr-only" }, "Sluiten")))), h("div", { key: '6f2b09f672600b36d1e4a13055c11e7083f611ef', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'bca7497b58cf07b16a22dd1c488650d19ac4aa41' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/toggletip/toggletip.js

@@ -35,7 +35,7 @@ export class Toggletip {
         this.secondary = undefined;
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: '10e013466bfab32ebbcc95f6a61478a223e46bf8', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '28220af6f2f8f8238cabec4cfa2a439c46270744', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '060aa920f22dbf083bc17557a2cca924e93988ea' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: '98f0254a5ec612596ac32d0f4a5dcde1ce69ff2e', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'c1ce14c551312bca9ef753d7b83c683b62c2ae58', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '6c4cb2adea2902aa49efc686d7418907f10fe5e3' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -168,7 +168,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '66a3f32c6fdf67da8f7139d077a1b0aad763a73d', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '267e5ed9b419c508281c82ddd5ec4574fdfec538', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '76605429685029003c414c272bd40b545c3703d1', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'a7d654c79eba063a19c4ff6e136c37b68fe9b7e3', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '193e821c7bb1f407b34478a064bb61d2154303f4' })))));
+        return (h(Host, { key: '689567701eba43956564aeeab008a6c26000a89e', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '1ab019bbf0f6e410b9f3a45230d57aeef1f580bd', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '3880c6433cbbecbe9b8b05f06baf935e11f8729a', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'fb7232c84755031e1beea392c7789b83011efa6a', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '82a1c75c1f74074993a4a136da62d09d5af0200e' })))));
     }
     activatePopper() {
         var _a;

package/dist/collection/components/tree-view/tree-view.js

@@ -175,7 +175,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: '617360ff6c43f0ef6fa5f80a4d52032e4e9688f5', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '68b6d0725280fd9f7500c4d66e71bbfd693c08c5', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'e4651d8f9c3a185c7ded70b677c83178be7181e8', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '062945ce97ff42458de8636b954c3ff70aab5202', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -154,7 +154,7 @@ export class ViewerGrid {
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (h(Fragment, null, this.tabView && (h("nav", { key: 'd6a4b1568e5847be455fffe3e0e0773794fdce9b', class: "dso-navbar" }, h("ul", { key: '24a5a3b03d32feff24f79f13588b3cc536f02e18', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '33fe19de440af3985e071ad1e304b0168f356a98', 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 })), h(Filterpanel, { key: 'aad2a173b6bbedc1894eb4a88837db7e485927cb', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'aa7067f1557d343df8d36603cf50a917ca68b768', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '9716dff8586f48d42513cec36dad02e689d5f2f6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '45fffa329cbc250e5f661448df67619c11629dea', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '4b3f26166e7694709c69c6c27ec3ab555f6ba7fb', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (h(Fragment, null, this.tabView && (h("nav", { key: '599c946e81dd4bf7c4604af1e7eee607795e258e', class: "dso-navbar" }, h("ul", { key: '7ecbe856998a52c5930016d7aefbdcb89dd7df53', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'a4cc61bea78323dc334498b5712bfaaacad4ebf3', 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 })), h(Filterpanel, { key: 'd4ef62bdabba185acac8aa979a1960f06b49badd', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '8e5589e2bafd04feec2cb33b10d56e2e295d47fb', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '6ca0b6bd7950014a129d1667cf62d681d63beaa3', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'bc120705d49a3ebcb750b79f2838d1eb0179facd', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'a7458ef8892524572b84833571437ea1b6afbefa', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from \"./components\";\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from \"./components\";\r\n\r\nexport { AutosuggestMarkItem } from \"./components/autosuggest/autosuggest.interfaces\";\r\n"]}

package/dist/components/annotation-gewijzigde-locatie.js

@@ -0,0 +1,37 @@
+import { h, Fragment } from '@stencil/core/internal/client';
+
+const AnnotationDiffRenderer = ({ value }) => {
+    if (typeof value === "string" || !value) {
+        return value;
+    }
+    if ("toegevoegd" in value) {
+        return h("ins", null, value.toegevoegd);
+    }
+    if ("verwijderd" in value) {
+        return h("del", null, value.verwijderd);
+    }
+    if (Array.isArray(value)) {
+        return (h(Fragment, null, value.map((v, i, { length }) => (h(Fragment, null,
+            h(AnnotationDiffRenderer, { value: v }),
+            i < length - 1 ? ", " : "")))));
+    }
+    return (h(Fragment, null,
+        h("del", null, value.was),
+        " ",
+        h("ins", null, value.wordt)));
+};
+
+const AnnotationBody = ({ title, data, active, dsoActiveChange }) => (h("div", { class: "annotation-body" },
+    h("div", { class: "annotation-symbol" },
+        h("slot", { name: "symbool" })),
+    h("div", { class: "annotation-info" },
+        h("p", { class: "annotation-title" }, title),
+        data && h("p", { class: "annotation-data" }, data)),
+    h("div", { class: "annotation-control" },
+        h("dso-slide-toggle", { accessibleLabel: "Toon op kaart", checked: active, onDsoActiveChange: (e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e }) }))));
+
+const AnnotationGewijzigdeLocatie = () => (h("dso-label", { class: "gewijzigde-locatie", status: "warning", compact: true }, "gewijzigde locatie"));
+
+export { AnnotationBody as A, AnnotationDiffRenderer as a, AnnotationGewijzigdeLocatie as b };
+
+//# sourceMappingURL=annotation-gewijzigde-locatie.js.map

package/dist/components/annotation-gewijzigde-locatie.js.map

@@ -0,0 +1 @@
+{"file":"annotation-gewijzigde-locatie.js","mappings":";;MAQa,sBAAsB,GAAqD,CAAC,EAAE,KAAK,EAAE;IAChG,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;QACvC,OAAO,KAAK,CAAC;KACd;IAED,IAAI,YAAY,IAAI,KAAK,EAAE;QACzB,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;KACtC;IAED,IAAI,YAAY,IAAI,KAAK,EAAE;QACzB,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;KACtC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,QACE,kBACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAC1B;YACE,EAAC,sBAAsB,IAAC,KAAK,EAAE,CAAC,GAAI;YACnC,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,CAC1B,CACJ,CAAC,CACD,EACH;KACH;IAED,QACE;QACE,eAAM,KAAK,CAAC,GAAG,CAAO;;QAAC,eAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,EACH;AACJ;;MC7Ba,cAAc,GAA6C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAC/G,WAAK,KAAK,EAAC,iBAAiB;IAC1B,WAAK,KAAK,EAAC,mBAAmB;QAC5B,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB;IACN,WAAK,KAAK,EAAC,iBAAiB;QAC1B,SAAG,KAAK,EAAC,kBAAkB,IAAE,KAAK,CAAK;QACtC,IAAI,IAAI,SAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAK,CAC1C;IACN,WAAK,KAAK,EAAC,oBAAoB;QAC7B,wBACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC7G,CACE,CACF;;MCxBK,2BAA2B,GAAG,OACzC,iBAAW,KAAK,EAAC,oBAAoB,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,+BAElD;;;;","names":[],"sources":["src/components/annotation/annotation-diff-renderer.tsx","src/components/annotation/annotation-body.tsx","src/components/annotation/annotation-gewijzigde-locatie.tsx"],"sourcesContent":["import { FunctionalComponent, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { AnnotationDiff } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationDiffRendererProps {\r\n  value: AnnotationDiff | string | undefined | Array<AnnotationDiff | string | undefined>;\r\n}\r\n\r\nexport const AnnotationDiffRenderer: FunctionalComponent<AnnotationDiffRendererProps> = ({ value }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    return value;\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return <ins>{value.toegevoegd}</ins>;\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return <del>{value.verwijderd}</del>;\r\n  }\r\n\r\n  if (Array.isArray(value)) {\r\n    return (\r\n      <>\r\n        {value.map((v, i, { length }) => (\r\n          <>\r\n            <AnnotationDiffRenderer value={v} />\r\n            {i < length - 1 ? \", \" : \"\"}\r\n          </>\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n    </>\r\n  );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationBodyProps {\r\n  title: JSX.Element;\r\n  data?: JSX.Element;\r\n  active: boolean | undefined;\r\n  dsoActiveChange: EventEmitter<AnnotationActiveChangeEvent>;\r\n}\r\n\r\nexport const AnnotationBody: FunctionalComponent<AnnotationBodyProps> = ({ title, data, active, dsoActiveChange }) => (\r\n  <div class=\"annotation-body\">\r\n    <div class=\"annotation-symbol\">\r\n      <slot name=\"symbool\" />\r\n    </div>\r\n    <div class=\"annotation-info\">\r\n      <p class=\"annotation-title\">{title}</p>\r\n      {data && <p class=\"annotation-data\">{data}</p>}\r\n    </div>\r\n    <div class=\"annotation-control\">\r\n      <dso-slide-toggle\r\n        accessibleLabel=\"Toon op kaart\"\r\n        checked={active}\r\n        onDsoActiveChange={(e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e })}\r\n      />\r\n    </div>\r\n  </div>\r\n);\r\n","import { h } from \"@stencil/core\";\r\n\r\nexport const AnnotationGewijzigdeLocatie = () => (\r\n  <dso-label class=\"gewijzigde-locatie\" status=\"warning\" compact>\r\n    gewijzigde locatie\r\n  </dso-label>\r\n);\r\n"],"version":3}

package/dist/components/attachments-counter.js

@@ -12,7 +12,7 @@ const AttachmentsCounter = /*@__PURE__*/ proxyCustomElement(class AttachmentsCou
         this.count = undefined;
     }
     render() {
-        return (h("span", { key: 'cd8239d516bd4ea96cdb3d6273d092e1441aa5bb', class: "dso-attachments" }, this.count, " ", h("span", { key: 'b050b4ad32bbab6403b7cff89fe7f2f5c1aa5786', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '2ad49e0eb4a1f41bee68b5348a25ab1a5fce7b0e', icon: "paperclip" })));
+        return (h("span", { key: '54b3a9b513d57c2ee0aa40d654e365445affd021', class: "dso-attachments" }, this.count, " ", h("span", { key: 'ca1ae3ac9b052e1e4aba77487aa82c91c1d8577c', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '234da788bfb62fce6fa08f6d99fd0fc7a863b5f8', icon: "paperclip" })));
     }
     static get style() { return DsoAttachmentsCounterStyle0; }
 }, [1, "dso-attachments-counter", {

package/dist/components/badge.js

@@ -12,7 +12,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         this.status = undefined;
     }
     render() {
-        return (h("span", { key: '17c5db4cee662c7ca0b066f8386c47eabe2f05e4', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'c6f05d23f5f0446909f27786b0aea8e461c2f1d1' })));
+        return (h("span", { key: 'fd6c32075509a81c31f1e21afab9de5aa7e38039', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'ad352b0cfe534421fd566277b54c31c2bcaabcf9' })));
     }
     static get style() { return DsoBadgeStyle0; }
 }, [1, "dso-badge", {

package/dist/components/document-component.js

@@ -115,7 +115,7 @@ const DocumentComponent = /*@__PURE__*/ proxyCustomElement(class DocumentCompone
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: '180d4956e89e98c29250f16f619e9ef66a47defb', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '3f0c32dcfd7b66ce0a02f02791ccc2bc950725d6', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'edd759244d2b77925737d4e4e975fdd2ef3c057f', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '44b7d61fc8cebdb8c3af0163286ff92fa9339837', class: "heading" }, h(Heading, { key: '193715c5f57a576859cc5ce6a4cffd0b3a26ba30', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: '32fec5ecbcedd1fed7dc0e0168a2890591b765ea', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '63154eb51701917a122fda008cc25ae018c682cd', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '21c5e1b1f086ada567c461a520f92a0ab74c0d20', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '153d54d2edbef88cd640ac2925001974ed40ae64', id: "heading-title" }, this.notApplicable && h("span", { key: '58054c0c706d0ad35b336cb927bf2502678c6958', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: '4c3f9c0e3c769a089a4178147e7aabd8c0bb35f3' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: 'a8668569851e3040436be00e2457424c628cc8e3', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: 'bfb6d40c14d2ac261959cd876d0d46507e4a4774', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: '5321c1545a0e6bed5f6e5353b5cfc28dfea098a5', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: 'f37bf908169191a84343f3f96016f0f9c15cc118', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '3691c99c7c803fcb00fba16dfa3e0796d3686e58', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '6d2fed031d753bf7cff29d102ff5f8448fc2428b', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { key: '305867e647f4b1478e4ea7c0570933df69ac2f5b', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { key: '5d48caf78f99bc755a42465c4b0aa38bd37d1936', class: "annotation-container", part: "_annotation-container" }, h("slot", { key: '9499614c5000ad008321a9de1ebb1e65536012f8', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: '438a136e8389683a5468266951edd736ac26a7d0', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: 'e1773708ff6469934632603a9120530554d08696', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '2dea9c710ee1036a7ed06ec0a64fe889d973dce1', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '752f5261e5ee723f095dcb19735905ea24cd5bf1', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: '894adb54eaff81395719c8967e1ae1f604087c7e', class: "children-container", part: "_children-container" }, h("slot", { key: 'dacd50c2867c6b832d45084a250c13c14c956198' }))));
+        return (h(Host, { key: '9dbd54a67bbf583b2c9db8b159ba709bd1e9111b', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '3f4b58120079753f4cc2c69310e88b76e9f0f2ae', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '75f0d2f067830daa732e3c8e8af6611702312ac8', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'b1f079fbe976495d789cbbf81d5f6afaabe0a5ee', class: "heading" }, h(Heading, { key: '40c631e7cb155734be99c816d3a8411679ae8144', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: 'ea6fe08e091ce6acf6129d451d72e653896de93d', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: 'd97d8e98b27d6c36d604b75ddfdde8d6ceddf79c', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '986060b08f90783a7a5a05549275fd621d3bee25', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '58ffa9527fc168187d5005710f41c5b2996bc803', id: "heading-title" }, this.notApplicable && h("span", { key: '08aff61f4665a09f1271f59a2fe2e594a6bf167e', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: 'ce8285ed0ee76cfde5e6255fdd674ff8356f96bf' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: '6dfc27b8ce553a5d9dfa7fb957c431de7622942d', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: '8052ce5083f0032d7c13e0fc7aded8c68be5b256', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: 'eca112e692e78ac6b2dceabb14eaaa8f3e2ac39b', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '3dd7b71002beb1a2a860960790bbe9d999331189', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '68fc34b5da1558e440ac4edd48249e8e44120c79', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '6aec245dd6d56d9aebd52b89e93f740a02423fbb', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { key: '3eddb2e0766a7f7f48c5c476760e1c4066730604', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { key: '720747bbcaeb1caaf2e944737723361449e8b47d', class: "annotation-container", part: "_annotation-container" }, h("slot", { key: '5ceb1bb029eaf50c7a6d8c689d82aebb066b2b91', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: 'fe5eadfa9fb9b080ab2c611e678c3b3685de5675', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '85075a86cad5db60ac20fa10eb329d66836e063a', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: 'c2805d0679ef7ca5ca87f2e43f1450f568954ee3', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '044236d783f05cc89eb381b44f71920cd33abe25', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: '59f76cb70ed4878b076ede1023347b5092962650', class: "children-container", part: "_children-container" }, h("slot", { key: '911f9a835801979ed3db2f13ae81137d4c13689f' }))));
     }
     static get style() { return DsoDocumentComponentStyle0; }
 }, [1, "dso-document-component", {

package/dist/components/dropdown-menu.js

@@ -214,7 +214,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: 'eb56d9c3c656eb150bd5aaca3dac3b8a08c8cd72', onFocusout: this.focusOutListener }, h("slot", { key: 'de13bf1d689fe5b7923765ff34d9419e0f4504d6', name: "toggle" }), h("div", { key: 'a49e77fa7e5fd6d9f77aa05d6e14674779665af0', hidden: !this.open }, h("slot", { key: 'f6c6c8529f638e5a0ff7f76764cd5a96e975e97f' }))));
+        return (h(Host, { key: '77ac6cc50a707d48310edd4224d192d9e8e3cc1b', onFocusout: this.focusOutListener }, h("slot", { key: '3388875ba46e7f5b9711ab3ebdd08daa39e98d22', name: "toggle" }), h("div", { key: '68362bca01cb7f86c6a2e9f760aa5af7a25fcf14', hidden: !this.open }, h("slot", { key: '653ec1ca00468188bf45ef2f6bde361ff8590f56' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/dso-annotation-activiteit.d.ts

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

package/dist/components/dso-annotation-activiteit.js

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { A as AnnotationBody, a as AnnotationDiffRenderer, b as AnnotationGewijzigdeLocatie } from './annotation-gewijzigde-locatie.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './label.js';
+import { d as defineCustomElement$3 } from './slide-toggle.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const annotationCss = "ins{text-decoration:none;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}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\")}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919;text-decoration:line-through}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\")}:host{display:block}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919;text-decoration:line-through}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}";
+const DsoAnnotationActiviteitStyle0 = annotationCss;
+
+const AnnotationActiviteit = /*@__PURE__*/ proxyCustomElement(class AnnotationActiviteit extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoActiveChange = createEvent(this, "dsoActiveChange", 7);
+        this.wijzigactie = undefined;
+        this.active = undefined;
+        this.gewijzigdeLocatie = undefined;
+        this.naam = undefined;
+        this.regelKwalificatie = undefined;
+        this.locatieNoemers = undefined;
+        this.regelKwalificatieVoorzetsel = undefined;
+    }
+    render() {
+        return (h(AnnotationBody, { key: 'e65c359d4d277852b980dfcb94a8095b760fe291', active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(AnnotationDiffRenderer, { value: this.naam }), data: h(Fragment, null, h("span", { class: "content" }, this.regelKwalificatie && (h(Fragment, null, h(AnnotationDiffRenderer, { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, h(AnnotationDiffRenderer, { value: this.locatieNoemers })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+    }
+    static get style() { return DsoAnnotationActiviteitStyle0; }
+}, [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"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-annotation-activiteit", "dso-icon", "dso-label", "dso-slide-toggle", "dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-annotation-activiteit":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AnnotationActiviteit);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-slide-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoAnnotationActiviteit = AnnotationActiviteit;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAnnotationActiviteit, defineCustomElement };
+
+//# sourceMappingURL=dso-annotation-activiteit.js.map

package/dist/components/dso-annotation-activiteit.js.map

@@ -0,0 +1 @@
+{"file":"dso-annotation-activiteit.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,i9GAAi9G,CAAC;AACx+G,sCAAe,aAAa;;MCaf,oBAAoB;;;;;;;;;;;;;;IAiD/B,MAAM;QACJ,QACE,EAAC,cAAc,qDACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EAAE,EAAC,sBAAsB,IAAC,KAAK,EAAE,IAAI,CAAC,IAAI,GAAI,EACnD,IAAI,EACF,kBACE,YAAM,KAAK,EAAC,SAAS,IAClB,IAAI,CAAC,iBAAiB,KACrB,kBACE,EAAC,sBAAsB,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAAI,EAAC,GAAG,CAC5D,CACJ,EACA,IAAI,CAAC,2BAA2B,IAAI,GAAG,IAAI,CAAC,2BAA2B,IAAI,EAC5E,EAAC,sBAAsB,IAAC,KAAK,EAAE,IAAI,CAAC,cAAc,GAAI,CACjD,EACN,IAAI,CAAC,iBAAiB,IAAI,EAAC,2BAA2B,OAAG,CACzD,GAEL,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-activiteit&encapsulation=shadow","src/components/annotation/annotation-activiteit/annotation-activiteit.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\" as *;\r\n@use \"~dso-toolkit/src/components/delete/delete\" as *;\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, EventEmitter } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationDiff, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationDiffRenderer } from \"../annotation-diff-renderer\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-activiteit\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationActiviteit implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De naam van de activiteit.\r\n   */\r\n  @Prop()\r\n  naam?: AnnotationDiff | string;\r\n\r\n  /**\r\n   * De activiteit regel kwalificatie.\r\n   */\r\n  @Prop()\r\n  regelKwalificatie?: AnnotationDiff | string;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemers?: Array<AnnotationDiff | string>;\r\n\r\n  /**\r\n   * Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.\r\n   */\r\n  @Prop()\r\n  regelKwalificatieVoorzetsel?: string;\r\n\r\n  render() {\r\n    return (\r\n      <AnnotationBody\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={<AnnotationDiffRenderer value={this.naam} />}\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.regelKwalificatie && (\r\n                <>\r\n                  <AnnotationDiffRenderer value={this.regelKwalificatie} />{\" \"}\r\n                </>\r\n              )}\r\n              {this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `}\r\n              <AnnotationDiffRenderer value={this.locatieNoemers} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}