@dso-toolkit/core 97.1.1 → 99.0.0

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

@@ -26,7 +26,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '3aa5321028e39927f51868b8df0288c723c6e81f', class: "form-group dso-radios" }, h("legend", { key: '9dee1ff46863dfc8fd94cd73777201d3bf17cca2', class: "sr-only" }, "Achtergrond"), h("div", { key: 'da4dda9ea7b656d44d3468fe78d0346b5d3d9179', class: "dso-label-container" }, h("span", { key: 'cc513f63127c63878aa0429c0f84cd858f01ea6c', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '4561bb74c2f00ddc62de4d8764fa18d1f74d9dd7', 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: 'f905ab8e7758f4ee8eadd3687fc18445770bf611', class: "form-group dso-radios" }, h("legend", { key: 'd498d24d45289126c215c7efb691d0ea540f309a', class: "sr-only" }, "Achtergrond"), h("div", { key: '77a480daed34c328881671403de969757f35c4c8', class: "dso-label-container" }, h("span", { key: '00d32dd55f7061bb15c4fb03f2e7e8381068aa61', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '6793671b625b99be9dfc32d07c64947f41e0f046', 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.css

@@ -27,7 +27,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,13 +58,13 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -74,7 +74,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -82,7 +82,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -92,7 +92,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -209,20 +209,24 @@ label.dso-primary.dso-spinner-right::after {
 a.dso-primary.download::after,
 button.dso-primary.download::after,
 label.dso-primary.download::after {
-  background: url("./di.svg#download-wit") no-repeat center;
+  background-image: var(--_dso-di-download-wit);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
 label.dso-primary.extern::after {
-  background: url("./di.svg#external-link-wit") no-repeat center;
+  background-image: var(--_dso-di-external-link-wit);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -233,7 +237,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -264,13 +268,13 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -280,7 +284,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -288,7 +292,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -298,7 +302,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -451,40 +455,44 @@ label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
 a.dso-secondary.download::after,
 button.dso-secondary.download::after,
 label.dso-secondary.download::after {
-  background: url("./di.svg#download") no-repeat center;
+  background-image: var(--_dso-di-download-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
+  background-image: var(--_dso-di-download-bosgroen);
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
+  background-image: var(--_dso-di-download-grasgroen-40);
 }
 a.dso-secondary.extern::after,
 button.dso-secondary.extern::after,
 label.dso-secondary.extern::after {
-  background: url("./di.svg#external-link") no-repeat center;
+  background-image: var(--_dso-di-external-link-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
+  background-image: var(--_dso-di-external-link-bosgroen);
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
+  background-image: var(--_dso-di-external-link-grasgroen-40);
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -495,7 +503,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -529,7 +537,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -560,13 +568,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -576,7 +584,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -584,7 +592,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -594,7 +602,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +673,7 @@ label.dso-tertiary {
   border: 0;
   line-height: 1;
   padding-inline: 0;
-  padding-block: var(--_dt-button-padding-block-tertiary, 0);
+  padding-block: var(--_dso-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -762,44 +770,48 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
 label.dso-tertiary.download::after {
-  background: url("./di.svg#download") no-repeat center;
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-grasgroen));
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
+  background-image: var(--_dso-di-download-grasgroen-40);
 }
 a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
 button.dso-tertiary.download:not([disabled]):hover::after,
 button.dso-tertiary.download:not([disabled]):active::after,
 label.dso-tertiary.download:not([disabled]):hover::after,
 label.dso-tertiary.download:not([disabled]):active::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-bosgroen));
 }
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
 label.dso-tertiary.extern::after {
-  background: url("./di.svg#external-link") no-repeat center;
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-grasgroen));
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
+  background-image: var(--_dso-di-external-link-grasgroen-40);
 }
 a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
 button.dso-tertiary.extern:not([disabled]):hover::after,
 button.dso-tertiary.extern:not([disabled]):active::after,
 label.dso-tertiary.extern:not([disabled]):hover::after,
 label.dso-tertiary.extern:not([disabled]):active::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-bosgroen));
 }
 a.dso-map,
 button.dso-map,
@@ -810,7 +822,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,13 +845,13 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -849,7 +861,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -857,7 +869,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -867,7 +879,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1055,14 +1067,13 @@ a.dso-secondary, a.dso-secondary:visited {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:focus-visible {
-  color: #275937;
   text-decoration: none;
 }
 a.dso-tertiary {
   text-decoration: none;
 }
 a.dso-tertiary, a.dso-tertiary:visited {
-  color: #39870c;
+  color: var(--_dso-button-tertiary-color, #39870c);
 }
 
 .dso-primary + .dso-primary,
@@ -1074,8 +1085,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
-  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
+  margin-block-start: var(--_dso-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dso-button-after-button-margin-inline-start, 16px);
 }
 
 :host {

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

@@ -102,7 +102,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: 'e5158da3b8ee95b2f986085602f05da493a4947f' }, h("dso-icon-button", { key: '65257dc5997914df1a5a785ca1887edd4a98fdd4', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '219cdeded2fa6bae9d623342be95450aaff5f853', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '2d1ebc2df35b1dcd9d53999ecc252c84c9927f4d', icon: "layers" }), h("span", { key: '14bb116f7ab4e0e6a1529cfa24bc6076edb086a0' }, this.text("layersButton"))), h("dso-button-group", { key: '5291467bd1b07e0dfa9030e5f3204bd6e65ff721', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '00e7da46844f221d7dab74dbe18961f862eb0aa6', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '5ed2e25155b3ec21b6c7d178b34ea244b36fb68e', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: '5d78bf591aff9a9ec0f532052500fc2a0cfb7544', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '2424a154e64b66d13637332701c29e9dea59a24b' }, h("h2", { key: 'd4f456aca7404e12cef849749429525bc21a5b18', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'f6ad6c2198401afc897398ab9c5baf80061ec387', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '3d6d2cf40fdbd3a34f953bd79cf193488396487c' }, h("div", { key: 'f7d6fdd2b3f402e5e7b21c845adf018133455568', class: "content" }, h("slot", { key: 'fd8c1a9dab2f34be0d7290380db341bb0713d7dd' }))))));
+        return (h(Fragment, { key: '703fbea408b19cf0e0838a2978e2a798c76dd1c1' }, h("dso-icon-button", { key: 'e9fbef89d1b944712295514f0d02e8322b5cd21f', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: 'd839e614a64f7d2812d892582f0c8809f81e934a', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'abc286d1b6d791c9c3b62094e1be67586a623de3', icon: "layers" }), h("span", { key: '8a0ab41791f4e91284cbda3ce0539ec17488328a' }, this.text("layersButton"))), h("dso-button-group", { key: '051129619c434c8cbc458f812d66649b380cf71c', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '69917e8ed0bbb1f2ffa712dce666912dae10e006', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '4bf7591313b9cc8846b64a491e7f497ac0d3a6b4', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: 'f9ede31ee15774c190504cadbcce5cd3becc9599', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '18b6c39ec9f018dc3c8eb557a589f0fbdb0593fc' }, h("h2", { key: 'ff0ebbb9e55284eca4f148de601de84bec921d12', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'dc59d9005f02891d9f74a4e4aecc643b634cbb34', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '1c009dd9ce9ae7fa7aeb1ae985942a377060144a' }, h("div", { key: '2846b3c3a3cbf32328ef4d0f4a883c8b6468ec7d', class: "content" }, h("slot", { key: 'c19ca5d6d26fad36c766b292d610ad8096b630d7' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/components/map-layer-object.css

@@ -22,23 +22,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=voegtoe]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -50,6 +41,8 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -57,7 +50,7 @@
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 :host([wijzigactie=verwijder]) {
@@ -65,23 +58,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=verwijder]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -93,13 +77,15 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 .map-layer-object {

package/dist/collection/components/map-layer/components/map-layer-object.js

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: '1a642be25ee5541acf40ab3bc27277dccd5f512c', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '11cfb26baddbbe6a9b79c5fc5036102ab1849d0a', wijzigactie: this.wijzigactie }, h("div", { key: '0a24909155dd4a79aea34e6495bde7e252daafbb', class: "map-layer-object" }, h("div", { key: '7e021d9671e5882550b7fe3c0d71e84f61fafcc6' }, h("slot", { key: 'f0820bbae94e113098d15c67c7a94a8f17feacd4', name: "symbol" })), h("div", { key: '0f3b7c92a402d00a815ed08f53d711ad1a1d7b7f', class: "map-layer-object-heading" }, h("slot", { key: 'ed30748c607132007b4e0051c78f72d501447894' }), h("slot", { key: 'e1f0aeae1e74f20c8b4731e9a7d875ad617aa188', name: "label" })), h("div", { key: '577dce8678ec8d960a2881cb14def62be67060fe', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'acce1e97495382f9162083bb2fada6c99d897bca', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: 'd023dcf456e4905e3a72aff3aebaa1bb3dd49d88', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: 'cea0d380879a5ed1c1ad434fa20d0a5cc9fd8915', wijzigactie: this.wijzigactie }, h("div", { key: 'd19a0d2ac1b03df8d0076cdd9e3bec0e159fb7fa', class: "map-layer-object" }, h("div", { key: 'a8e39951d4821f07da46dc43eba9297fb3ab6845' }, h("slot", { key: '8c085607e45f6d11ee8d8f6e856ba92aaf42cccc', name: "symbol" })), h("div", { key: '699fd97ee911a32a9cbda0b176bd33136de103ca', class: "map-layer-object-heading" }, h("slot", { key: '3966433c904e3973bcde3a76475041d7f8081a0d' }), h("slot", { key: '218d37b9e09a46f5bf75316c9976fb149a2e30b9', name: "label" })), h("div", { key: '22ede0b5e7f39e5c4173a05b39fa1f29a9533623', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '814c7e058adfc38ea557300f19baf2c2a20f248b', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
     }
     static get is() { return "dso-map-layer-object"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/map-layer.css

@@ -19,23 +19,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=voegtoe]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -47,6 +38,8 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -54,7 +47,7 @@
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 :host([wijzigactie=verwijder]) {
@@ -62,23 +55,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=verwijder]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -90,13 +74,15 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 .map-layer {

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

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '430200f8ba05cd91087b9f08c352035a1104af9a', wijzigactie: this.wijzigactie }, h("div", { key: 'b6a47ce341423c7e913c88ddf632396267009f60', class: "map-layer" }, h("div", { key: 'aa41bc1c07f55d756e8203313722ee7554f657ab', class: "map-layer-heading" }, h("slot", { key: '94bd01b181974d47563bffdf98de23c2ba29b417', name: "name" }), h("slot", { key: '22936b4a70c2332db9209c500ba57e934b79378b', name: "label" })), this.activatable && (h("div", { key: '7c0fadf3b83d10e14b3c8256af2e3a4c7a733f71', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '5482011e4ecb74213c5224a767ee40f3e1e0fe5d', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '6d2532733890aeeabbb73e45d9136129c3ab813b' })));
+        return (h(WrapWijzigactie, { key: '69abcef7ed45d6083df302c42a47ae4a117ef82d', wijzigactie: this.wijzigactie }, h("div", { key: 'd57311c429d197dc2fa327475d6bb95ab7f23120', class: "map-layer" }, h("div", { key: '181afe3a5f429d960bb7d686c94c47b8f17b715a', class: "map-layer-heading" }, h("slot", { key: 'b67af00b7fc37feb51ed5897f53ccb0a5c617313', name: "name" }), h("slot", { key: 'a5882b11c7c21f0b88ea8325a2b39ed7db9b9939', name: "label" })), this.activatable && (h("div", { key: '8fd979116876c8898cfeae9bf5b26ea57425d517', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '6ee13d588b60edd18f60aa0312293941593e4819', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '7e0b9a62b81374f302b6c55a63e0549bf2f00f65' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }