@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/collection/components/legend/legend-group/legend-group.js

@@ -0,0 +1,120 @@
+import { Host, h } from "@stencil/core";
+import { i18n } from "../../../utils/i18n";
+import { translations } from "./legend-group.i18n";
+/**
+ * @slot heading - The heading/label for this Legend Group. Should be targeted with `<h3 slot="heading">...</h3>`
+ * @slot options - Controls shown in edit mode (i.e. `dso-input-range`). Only visible when mode is "edit".
+ * @slot - The legend items for this group. Should contain `dso-legend-item` elements.
+ */
+export class LegendGroup {
+    constructor() {
+        this.text = i18n(() => this.host, translations);
+        this.toggleMode = (e) => {
+            this.dsoLegendGroupModeChange.emit({
+                originalEvent: e.detail.originalEvent,
+                next: this.mode === "view" ? "edit" : "view",
+            });
+        };
+    }
+    handleModeChange() {
+        if (this.mode) {
+            const mode = this.mode;
+            this.legendItems.forEach((item) => {
+                item._mode = mode;
+            });
+        }
+    }
+    get legendItems() {
+        return Array.from(this.host.querySelectorAll("dso-legend-item"));
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            // When new legend-items are added, update their mode
+            this.handleModeChange();
+        });
+        this.mutationObserver.observe(this.host, { childList: true });
+        // Initialize child legend-items with current mode
+        this.handleModeChange();
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+        delete this.mutationObserver;
+    }
+    render() {
+        return (h(Host, { key: '4e185d93b6e6d8815aa9321eeffeb046e5da7ae3' }, h("div", { key: '6b5f3de33196e950ee895fc5cd27df23b2d0f2f5', class: "legend-group-header" }, h("slot", { key: 'ddb053565dccf300cbd30d775fbca196e5ee8e84', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'e5b7bf50f3e140b9d5a24a75b14500a3d60c2a8a', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '335dc6acb956623ecc5832a93c055168a16440bd', name: "options" }), h("slot", { key: '7b13d87cda2afd1ac289edbf5a72ae6d580b98a3' })));
+    }
+    static get is() { return "dso-legend-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["legend-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["legend-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LegendMode",
+                    "resolved": "\"edit\" | \"view\" | undefined",
+                    "references": {
+                        "LegendMode": {
+                            "location": "import",
+                            "path": "../legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendMode",
+                            "referenceLocation": "LegendMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether this Legend Group and its child Legend Items are in edit or view mode.\r\nWhen not set, no edit/view toggle icon is shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoLegendGroupModeChange",
+                "name": "dsoLegendGroupModeChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles the mode of the Legend Group."
+                },
+                "complexType": {
+                    "original": "LegendGroupModeChangeEvent",
+                    "resolved": "LegendGroupModeChangeEvent",
+                    "references": {
+                        "LegendGroupModeChangeEvent": {
+                            "location": "import",
+                            "path": "../legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendGroupModeChangeEvent",
+                            "referenceLocation": "LegendGroupModeChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "mode",
+                "methodName": "handleModeChange"
+            }];
+    }
+}

package/dist/collection/components/legend/legend-item/legend-item.i18n.js

@@ -0,0 +1,20 @@
+export const translations = {
+    en: {
+        "dso-legend-item": {
+            delete: "Remove layer",
+            disabledInfo: "More info",
+            options: "Edit layer",
+            makeActive: "Make {{label}} active",
+            makeActiveDefault: "Make active",
+        },
+    },
+    nl: {
+        "dso-legend-item": {
+            delete: "Kaartlaag verwijderen",
+            disabledInfo: "Meer informatie",
+            options: "Kaartlaag bewerken",
+            makeActive: "Maak {{label}} actief",
+            makeActiveDefault: "Maak actief",
+        },
+    },
+};

package/dist/collection/components/{legend-item → legend/legend-item}/legend-item.js

@@ -1,10 +1,11 @@
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
+import { i18n } from "../../../utils/i18n";
+import { translations } from "./legend-item.i18n";
 /**
- * @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot="label">...</h3>` or
- * `<span slot="label">...</span>`
+ * @slot label - The label for this Legend Item. Should be targetted with `<span slot="label">...</span>`
  * @slot symbol - A span where the symbol is styled upon
- * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.
+ * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an options-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.
  */
 export class LegendItem {
     constructor() {
@@ -12,15 +13,17 @@ export class LegendItem {
          * To disable the Legend Item
          */
         this.disabled = false;
+        /** @internal Controls whether this Legend Item is in edit or view mode. Set by the parent Legend Group. */
+        this._mode = "view";
         this.showOptions = false;
+        this.text = i18n(() => this.host, translations);
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
         this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     get symbolSlottedElement() {
@@ -29,15 +32,32 @@ export class LegendItem {
     get optionsSlottedElement() {
         return this.host.querySelector("[slot='options']");
     }
+    renderEditMode() {
+        return (h("dso-icon-button", { label: this.text("delete"), icon: "trash", variant: "tertiary", id: "delete-button", onDsoClick: (e) => this.dsoDelete.emit({ originalEvent: e.detail.originalEvent }) }));
+    }
+    renderViewMode(hasOptions, accessibleLabel) {
+        return [
+            this.active && hasOptions && !this.disabled && (h("dso-icon-button", { label: this.text("options"), icon: "more-horizontal", variant: "tertiary", class: { active: this.showOptions }, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) })),
+            this.activatable && (h("dso-slide-toggle", { accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })),
+        ];
+    }
+    renderRightContent(hasOptions, accessibleLabel) {
+        switch (this._mode) {
+            case "edit":
+                return this.renderEditMode();
+            case "view":
+            default:
+                return this.renderViewMode(hasOptions, accessibleLabel);
+        }
+    }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
         const label = this.host.querySelector("span[slot='label']");
-        let accessibleLabel = "Maak actief";
-        if (label === null || label === void 0 ? void 0 : label.textContent) {
-            accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
-        }
-        return (h(Host, { key: '24af81db658898c1bc2317422cbb6ab38196083d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '174173193d7302d22d265e02a4147c6877241d0f', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '568089b5a568b92d12665a7c0eb78d3315c2c947' }, h("slot", { key: '325f14f024dca0edf52c2684097be1ca5eb6f014', name: "symbol" }))), h("div", { key: 'e72d3ac238b30577082a0edc4ab68de1d3b16f15' }, h("slot", { key: 'a1b4d6b740bd8a5ee32adcc5e40268bfd472c680', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '9bc17eafc23c61d8b53005d02fa4aacad6ca2d8d', position: "bottom" }, this.disabledMessage)), h("div", { key: '9208ae5adae3f59e0ab0a20c0a32b65cc3fbc40f', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: '6489bc065e692b8dce8edb7a56d1d5672f8d21cd', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: 'bb79e502289dd11de8db82d78e00bade9b0a451c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'a3c74cdd73815b7519c9126d278da02c0281dfb6', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'b932318fd0ccb55f02e60e5e49e339453b61d955', name: "options" })))));
+        const accessibleLabel = label?.textContent
+            ? this.text("makeActive", { label: label.textContent.toLowerCase() })
+            : this.text("makeActiveDefault");
+        return (h(Host, { key: 'c39bfa89a95d20e7a9550e5c19caa42f7d5c176b', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '1ca340e2599addfae284da5883c7ff45aeb408a3', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'cfd02a48d5017f4b87e93eca837980828385945b' }, h("slot", { key: 'b9b16c3371b3a3cf8d93de3916ef73a1298a0e63', name: "symbol" }))), h("div", { key: 'd63790838c091aee94e92b36f10ee9319233dfbf' }, h("slot", { key: '94ae680fac284f1d1af980ae238966caf0297d80', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: 'f4be062dfe27d3b3059b548ec741b1cfc696cb0d', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '0d16d02da41abb247afabf93e6d02c38a42f3c95', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'e17ed90b316afa1c3dd85ec5d08b31bb8601ca36', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'bc2988175f08a8d01f5053a9dcefb52fb04d54e4', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '7bd2ae7a7a621368d6a37d07009da5e135e93266', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }
@@ -85,11 +105,11 @@ export class LegendItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Message to be shown behind a toggletip when the Legend Item is disabled"
+                    "text": "Message to be shown in an info-button tooltip when the Legend Item is disabled"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled-message"
             },
             "activatable": {
@@ -129,6 +149,36 @@ export class LegendItem {
                 "setter": false,
                 "reflect": true,
                 "attribute": "active"
+            },
+            "_mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LegendMode | undefined",
+                    "resolved": "\"edit\" | \"view\" | undefined",
+                    "references": {
+                        "LegendMode": {
+                            "location": "import",
+                            "path": "../legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendMode",
+                            "referenceLocation": "LegendMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Controls whether this Legend Item is in edit or view mode. Set by the parent Legend Group."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "_mode",
+                "defaultValue": "\"view\""
             }
         };
     }
@@ -154,8 +204,31 @@ export class LegendItem {
                     "references": {
                         "LegendItemActiveChangeEvent": {
                             "location": "import",
-                            "path": "./legend-item.interfaces",
-                            "id": "src/components/legend-item/legend-item.interfaces.ts::LegendItemActiveChangeEvent"
+                            "path": "../legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendItemActiveChangeEvent",
+                            "referenceLocation": "LegendItemActiveChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoDelete",
+                "name": "dsoDelete",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks the delete button."
+                },
+                "complexType": {
+                    "original": "LegendItemDeleteEvent",
+                    "resolved": "LegendItemDeleteEvent",
+                    "references": {
+                        "LegendItemDeleteEvent": {
+                            "location": "import",
+                            "path": "../legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendItemDeleteEvent",
+                            "referenceLocation": "LegendItemDeleteEvent"
                         }
                     }
                 }
@@ -193,4 +266,3 @@ export class LegendItem {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=legend-item.js.map

package/dist/collection/components/legend/legend.css

@@ -48,6 +48,9 @@
   inset-block-start: 8px;
   inset-inline-end: 8px;
 }
+:host ::slotted(dso-legend-group:last-child) {
+  margin-block-end: 8px;
+}
 :host .content {
   --_dso-form-group-margin-block-end: 0;
   --_dt-scrollable-container-border-end-start-radius: 4px;

package/dist/collection/components/legend/legend.i18n.js

@@ -0,0 +1,12 @@
+export const translations = {
+    en: {
+        "dso-legend": {
+            closeLegend: "Close legend",
+        },
+    },
+    nl: {
+        "dso-legend": {
+            closeLegend: "Sluit legenda",
+        },
+    },
+};

package/dist/collection/components/legend/legend.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=legend.interfaces.js.map

package/dist/collection/components/legend/legend.js

@@ -1,12 +1,15 @@
 import { Host, h } from "@stencil/core";
 import { clsx } from "clsx";
+import { i18n } from "../../utils/i18n";
 import { isModifiedEvent } from "../../utils/is-modified-event";
+import { translations } from "./legend.i18n";
 export class Legend {
     constructor() {
         /**
          * TabItems in the legend topbar
          */
         this.tabItems = [];
+        this.text = i18n(() => this.host, translations);
         this.keyUpHandler = (e) => {
             if (!(e.target instanceof HTMLElement)) {
                 return;
@@ -47,22 +50,20 @@ export class Legend {
         return this.tabs[this.tabs.length - 1];
     }
     moveFocusToTab(tab) {
-        tab === null || tab === void 0 ? void 0 : tab.focus();
+        tab?.focus();
     }
     moveFocusToPreviousTab(focussedTab) {
-        var _a;
         const index = this.tabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.tabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        const next = this.tabs[index - 1] ?? this.lastTab;
         this.moveFocusToTab(next);
     }
     moveFocusToNextTab(focussedTab) {
-        var _a;
         const index = this.tabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.tabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        const next = this.tabs[index + 1] ?? this.firstTab;
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
+        return (h(Host, { key: '18b65b8e93f592afbd4748e8f740b3e37c8f70ae' }, h("div", { key: '20c1927e8ccc27badc91122fcb39b243c1d9de71', class: "topbar" }, h("div", { key: 'dcd9a8c4cf7bcecdd10ba918e0df47ff6929a8fb', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: 'fa3eb71f4bc538a1df4beda9d62260f9930c9651', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '3ebbfbba7d44ef9470bcc088fca6c799f1c81689', class: "content" }, h("div", { key: '071e22193cd0dd97ca1ba6d73427a5f29ee19d0f', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '33342dceb976c0557e33baa77471621f3e565dea' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }
@@ -88,7 +89,8 @@ export class Legend {
                         "LegendTabItem": {
                             "location": "import",
                             "path": "./legend.interfaces",
-                            "id": "src/components/legend/legend.interfaces.ts::LegendTabItem"
+                            "id": "src/components/legend/legend.interfaces.ts::LegendTabItem",
+                            "referenceLocation": "LegendTabItem"
                         }
                     }
                 },
@@ -122,7 +124,8 @@ export class Legend {
                         "LegendContentSwitchEvent": {
                             "location": "import",
                             "path": "./legend.interfaces",
-                            "id": "src/components/legend/legend.interfaces.ts::LegendContentSwitchEvent"
+                            "id": "src/components/legend/legend.interfaces.ts::LegendContentSwitchEvent",
+                            "referenceLocation": "LegendContentSwitchEvent"
                         }
                     }
                 }
@@ -143,7 +146,8 @@ export class Legend {
                         "LegendCloseEvent": {
                             "location": "import",
                             "path": "./legend.interfaces",
-                            "id": "src/components/legend/legend.interfaces.ts::LegendCloseEvent"
+                            "id": "src/components/legend/legend.interfaces.ts::LegendCloseEvent",
+                            "referenceLocation": "LegendCloseEvent"
                         }
                     }
                 }
@@ -151,4 +155,3 @@ export class Legend {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=legend.js.map

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

@@ -151,7 +151,7 @@
   white-space: nowrap;
 }
 .dso-tertiary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -161,7 +161,7 @@
   margin-inline-end: 8px;
 }
 .dso-tertiary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;

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

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=list-button.interfaces.js.map

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

@@ -24,14 +24,12 @@ export class ListButton {
         });
     }
     componentDidRender() {
-        var _a, _b;
-        if (!((_a = this.subcontentSlot) === null || _a === void 0 ? void 0 : _a.hasAttribute("aria-hidden"))) {
-            (_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
+        if (!this.subcontentSlot?.hasAttribute("aria-hidden")) {
+            this.subcontentSlot?.setAttribute("aria-hidden", "true");
         }
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     stepValue(e, direction) {
@@ -67,7 +65,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'a155334345712bda3dd58924d60ccd467923f6fc', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '5f1430413821bc31c793b2ccaed2a00509a3cfc6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '97302b35983f8659e51b7993619c5d007b9eadc5', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '6e0fe1caffbfdfa878b904f558b695def1c18f6f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '9bfec93907458641755c109304a453ebf728b4ad', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'e3feb6e6f3aa1f42efa2e632180459b61a22a7a0', class: "subcontent" }, h("slot", { key: '2971bc8037dabb734ecaf3faf1c338a3537fcac6', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '46543874c528b6db91fed7dd19249dc7547bb86b', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'cf2305047c3bf6f8384829c694ef57642bdd9bbf' }, h("dso-icon-button", { key: '6170297a6ce2a60762ba4bf96e59f49097e80d38', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'e5c419497219f628e34bfdb997fe3b357a9331bd', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '225eed4514828a7f1afa06f2c6de8af19ada8b8d', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: 'f690e4749d2c9ae0d26260e9b7954064ce819f66', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '84a3c91317ca7638ab7a825cbf48f82a215eaf84', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '9584f2d33413500d06cf9697618d86bf79c2bf41', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '24f581bced17e7ef4dc869c93f7a77d294f83913' }, this.label, this.sublabel && h("span", { key: '7862beff9b1a9fda69e0f56c8696e63974328c8f', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '42959be18105f323519c45cfde6a19521ebd9b0f', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'ac71b57bbb9364081d27d8a490816b0d0bbdfd1e', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'b6ff6812d7ca086e692c73cfaaa0a659afee8ad2', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '2e22c7b5c5791c935e28424207e179f0d380a100', class: "subcontent" }, h("slot", { key: '4a5348d41c36b72ea3f23ca3a882629374dc6fff', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '1dc4939e3e40d5e0c5128b474ed10f61ec405638', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'c1b679d8e35c45b03f6b06998eca12604cf3867c' }, h("dso-icon-button", { key: '780b108ff249895a350ba12ea962a8dfe66f2a30', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'd4560eab67b114980224567be80a3efa4abddb38', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '44a0fbc42f5fd080e0c2129169355de92d4e5549', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }
@@ -257,7 +255,8 @@ export class ListButton {
                         "ListButtonChangeEvent": {
                             "location": "import",
                             "path": "./list-button.interfaces",
-                            "id": "src/components/list-button/list-button.interfaces.ts::ListButtonChangeEvent"
+                            "id": "src/components/list-button/list-button.interfaces.ts::ListButtonChangeEvent",
+                            "referenceLocation": "ListButtonChangeEvent"
                         }
                     }
                 }
@@ -278,7 +277,8 @@ export class ListButton {
                         "ListButtonSelectedEvent": {
                             "location": "import",
                             "path": "./list-button.interfaces",
-                            "id": "src/components/list-button/list-button.interfaces.ts::ListButtonSelectedEvent"
+                            "id": "src/components/list-button/list-button.interfaces.ts::ListButtonSelectedEvent",
+                            "referenceLocation": "ListButtonSelectedEvent"
                         }
                     }
                 }
@@ -286,4 +286,3 @@ export class ListButton {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=list-button.js.map

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

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=logo.interfaces.js.map

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

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), 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: 'e3dc493316f373195f1f8cf1c5e190282486796e', class: "logo-ribbon" }, this.ribbon)));
+            (!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: '609cde8cd31ab2b9591fae3ecebb31e44a8069a9', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +155,8 @@ export class Logo {
                         "LogoClickEvent": {
                             "location": "import",
                             "path": "./logo.interfaces",
-                            "id": "src/components/logo/logo.interfaces.ts::LogoClickEvent"
+                            "id": "src/components/logo/logo.interfaces.ts::LogoClickEvent",
+                            "referenceLocation": "LogoClickEvent"
                         }
                     }
                 }
@@ -176,11 +177,11 @@ export class Logo {
                         "LogoLabelClickEvent": {
                             "location": "import",
                             "path": "./logo.interfaces",
-                            "id": "src/components/logo/logo.interfaces.ts::LogoLabelClickEvent"
+                            "id": "src/components/logo/logo.interfaces.ts::LogoLabelClickEvent",
+                            "referenceLocation": "LogoLabelClickEvent"
                         }
                     }
                 }
             }];
     }
 }
-//# sourceMappingURL=logo.js.map

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

@@ -10,4 +10,3 @@ export const translations = {
         },
     },
 };
-//# sourceMappingURL=map-base-layers.i18n.js.map

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

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=map-base-layers.interfaces.js.map

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

@@ -16,10 +16,9 @@ export class MapBaseLayers {
     }
     componentDidRender() {
         this.baseLayers
-            .filter((l) => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+            .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)
             .forEach((o) => {
-            var _a;
-            (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+            this.selectableRefs[o.id]?.toggleInfo(false);
         });
         this.previousBaselayers = this.baseLayers;
     }
@@ -27,7 +26,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'b4e11afffa1cfeda374e2298e0a127c51733fb9d', class: "form-group dso-radios" }, h("legend", { key: '5d5d9deaa63fd457eca1503f460925ca4e51ba25', class: "sr-only" }, "Achtergrond"), h("div", { key: 'd804f723a44d4085a7e983d2587da5bde72b4fec', class: "dso-label-container" }, h("span", { key: 'da3e550984bbe1b3a055d09100cf3d37cab9fe25', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '419aebdce0570fba7d194c285858c2ced4e416ed', 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: '013836ef69dbf09eb10fb4424426f667c541ff7b', class: "form-group dso-radios" }, h("legend", { key: '4c6b54e47138c7511e94df65fc4880250748a0c3', class: "sr-only" }, "Achtergrond"), h("div", { key: '4870d66120554007784f5aef0ad6883a5101144a', class: "dso-label-container" }, h("span", { key: 'ead7e90fec69e6a44621454009d287ff654af649', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '3b605ea9150ed280398aff465ef9e7818789b677', 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"; }
@@ -73,7 +72,8 @@ export class MapBaseLayers {
                         "BaseLayer": {
                             "location": "import",
                             "path": "./map-base-layers.interfaces",
-                            "id": "src/components/map-base-layers/map-base-layers.interfaces.ts::BaseLayer"
+                            "id": "src/components/map-base-layers/map-base-layers.interfaces.ts::BaseLayer",
+                            "referenceLocation": "BaseLayer"
                         }
                     }
                 },
@@ -106,7 +106,8 @@ export class MapBaseLayers {
                         "BaseLayerChangeEvent": {
                             "location": "import",
                             "path": "./map-base-layers.interfaces",
-                            "id": "src/components/map-base-layers/map-base-layers.interfaces.ts::BaseLayerChangeEvent"
+                            "id": "src/components/map-base-layers/map-base-layers.interfaces.ts::BaseLayerChangeEvent",
+                            "referenceLocation": "BaseLayerChangeEvent"
                         }
                     }
                 }
@@ -114,4 +115,3 @@ export class MapBaseLayers {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=map-base-layers.js.map