@dso-toolkit/core 84.0.0 → 85.0.0

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

@@ -0,0 +1,154 @@
+import { Host, h } from "@stencil/core";
+import { clsx } from "clsx";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+export class Legend {
+    constructor() {
+        /**
+         * TabItems in the legend topbar
+         */
+        this.tabItems = [];
+        this.keyUpHandler = (e) => {
+            if (!(e.target instanceof HTMLElement)) {
+                return;
+            }
+            switch (e.key) {
+                case "ArrowRight":
+                case "ArrowDown":
+                    this.moveFocusToNextTab(e.target);
+                    break;
+                case "ArrowLeft":
+                case "ArrowUp":
+                    this.moveFocusToPreviousTab(e.target);
+                    break;
+                default:
+                    return;
+            }
+        };
+        // A button handles an "enter" and a "space" keypress as a normal click."
+        this.clickHandler = (e) => {
+            const index = this.tabs.findIndex((tab) => tab === e.currentTarget);
+            const tabItem = this.tabItems[index];
+            if (!tabItem || tabItem.active) {
+                return;
+            }
+            this.dsoContentSwitch.emit({
+                originalEvent: e,
+                isModifiedEvent: isModifiedEvent(e),
+            });
+        };
+    }
+    get tabs() {
+        return Array.from(this.host.shadowRoot.querySelectorAll('[role="tab"]'));
+    }
+    get firstTab() {
+        return this.tabs[0];
+    }
+    get lastTab() {
+        return this.tabs[this.tabs.length - 1];
+    }
+    moveFocusToTab(tab) {
+        tab === null || tab === void 0 ? void 0 : 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;
+        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;
+        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' })))));
+    }
+    static get is() { return "dso-legend"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["legend.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["legend.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tabItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LegendTabItem[]",
+                    "resolved": "LegendTabItem[]",
+                    "references": {
+                        "LegendTabItem": {
+                            "location": "import",
+                            "path": "./legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendTabItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "TabItems in the legend topbar"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoContentSwitch",
+                "name": "dsoContentSwitch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a tabItem is pressed."
+                },
+                "complexType": {
+                    "original": "LegendContentSwitchEvent",
+                    "resolved": "LegendContentSwitchEvent",
+                    "references": {
+                        "LegendContentSwitchEvent": {
+                            "location": "import",
+                            "path": "./legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendContentSwitchEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoClose",
+                "name": "dsoClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user closes the Legend."
+                },
+                "complexType": {
+                    "original": "LegendCloseEvent",
+                    "resolved": "LegendCloseEvent",
+                    "references": {
+                        "LegendCloseEvent": {
+                            "location": "import",
+                            "path": "./legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendCloseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=legend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../../../src/components/legend/legend.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from \"./legend.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-legend\",\r\n  styleUrl: \"legend.scss\",\r\n  shadow: true,\r\n})\r\nexport class Legend implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendElement;\r\n\r\n  /**\r\n   * TabItems in the legend topbar\r\n   */\r\n  @Prop()\r\n  tabItems: LegendTabItem[] = [];\r\n\r\n  /**\r\n   * Emitted when a tabItem is pressed.\r\n   */\r\n  @Event()\r\n  dsoContentSwitch!: EventEmitter<LegendContentSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted when the user closes the Legend.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<LegendCloseEvent>;\r\n\r\n  private get tabs() {\r\n    return Array.from(this.host.shadowRoot!.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'));\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.tabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.tabs[this.tabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLButtonElement | undefined) {\r\n    tab?.focus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  // A button handles an \"enter\" and a \"space\" keypress as a normal click.\"\r\n  private clickHandler = (e: MouseEvent) => {\r\n    const index = this.tabs.findIndex((tab) => tab === e.currentTarget);\r\n    const tabItem = this.tabItems[index];\r\n\r\n    if (!tabItem || tabItem.active) {\r\n      return;\r\n    }\r\n\r\n    this.dsoContentSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"topbar\">\r\n          <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n            {this.tabItems.map((tabItem) => (\r\n              <button\r\n                class={clsx(\"tab\", { active: tabItem.active })}\r\n                role=\"tab\"\r\n                aria-selected={tabItem.active ? \"true\" : \"false\"}\r\n                {...(!tabItem.active ? { tabIndex: -1 } : {})}\r\n                onClick={this.clickHandler}\r\n              >\r\n                {tabItem.label}\r\n              </button>\r\n            ))}\r\n          </div>\r\n\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Sluit legenda\"\r\n            class=\"close-button\"\r\n            onClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        </div>\r\n\r\n        <dso-scrollable class=\"content\">\r\n          <div role=\"tabpanel\" tabIndex={0}>\r\n            <slot />\r\n          </div>\r\n        </dso-scrollable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,7 +1,6 @@
 :host {
   display: block;
   padding-block: 4px;
-  padding-inline: 4px;
 }
 
 *,
@@ -22,6 +21,14 @@
   position: relative;
 }
 
+::slotted(h3) {
+  margin: 0 !important;
+}
+
+::slotted([slot=options]) {
+  margin-block-start: 8px;
+}
+
 .legend-item {
   display: flex;
   position: relative;

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

@@ -1,7 +1,8 @@
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
 /**
- * @slot The label for this Legend Item
+ * @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot="label">...</h3>` or
+ * `<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.
  */
@@ -15,7 +16,7 @@ export class LegendItem {
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
-        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
     }
     disconnectedCallback() {
         var _a;
@@ -31,7 +32,12 @@ export class LegendItem {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: 'd4e2f6d842f7ca0157c262d6f4512e1decf04a9d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'cfd02f4df6aa26b14fdbee59b466f90f8d8cbee2', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '0d2c32702db90dbe44583a44c50055aba1958cf4' }, h("slot", { key: 'bebec9612d2ddbb73f930b6d7fd6826e8f30e8af', name: "symbol" }))), h("div", { key: 'b4badff0166ace15d3e1fc0be215705801af1067' }, h("slot", { key: '23ca6f63fd79d869ee906a3a857b3c56a837364c' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '648ce50e21c68c7f400c8a08a7e5df6704d19a43', position: "bottom" }, this.disabledMessage)), h("div", { key: 'b296b98e92f779c77020ec235c2d4cbfe061c4f0', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: 'de4322f255b6a23a211789b565f190c222ea7d71', 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: '2734a9783b1b31c6883180c44c0db2f290346543', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '33c1543398c746f35d528032f6f47ee72d18cdf2', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'c2c87a85c16b32f663a640349008bca4fb01adae', name: "options" })))));
+        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" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @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.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {this.active && hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel=\"Maak actief\"\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot=\"label\">...</h3>` or\r\n * `<span slot=\"label\">...</span>`\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @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.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    const label = this.host.querySelector(\"span[slot='label']\");\r\n    let accessibleLabel = \"Maak actief\";\r\n    if (label?.textContent) {\r\n      accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;\r\n    }\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot name=\"label\" />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {this.active && hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel={accessibleLabel}\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -125,8 +125,6 @@
   background-color: #fff;
   border-color: #e5e5e5;
   color: #666;
-}
-.dso-button-group.dso-disabled > * {
   pointer-events: none;
 }
 .dso-button-group > * {
@@ -150,8 +148,6 @@
   flex-wrap: nowrap;
   padding-block: 0;
   padding-inline: 16px;
-}
-.dso-button-group > .dso-input-number {
   background-color: #fff;
   border-color: #ccc;
   color: #191919;
@@ -169,8 +165,6 @@
 }
 .dso-button-group > *.dso-selected + .dso-input-number {
   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
-}
-.dso-button-group > *.dso-selected + .dso-input-number {
   background-color: #fff;
   border-color: #39870c;
   color: #191919;
@@ -186,10 +180,6 @@
 .dso-button-group > *[disabled] + .dso-input-number,
 .dso-button-group > *[disabled] + .dso-input-number:hover {
   opacity: 1;
-}
-.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
-.dso-button-group > *[disabled] + .dso-input-number,
-.dso-button-group > *[disabled] + .dso-input-number:hover {
   background-color: #fff;
   border-color: #ccc;
   color: #666;
@@ -219,8 +209,6 @@
   background-color: #fff;
   border-color: #ccc;
   color: #191919;
-}
-.dso-list-button {
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;
@@ -247,8 +235,6 @@
   background-color: #fff;
   border-color: #ccc;
   color: #666;
-}
-.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {
   opacity: 1;
 }
 .dso-list-button dso-selectable:not(:last-child) {

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

@@ -67,7 +67,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'c27cab802da7b149c54da89e044000879b35a1ea', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'bdb5da45f124bad1335734fc0670bdc63b0b3e0a', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'f6a6593be437c4bddaad0342061e27f64fce08ee', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '14ff0ccfe9c54f1a133264435fcdc9fda42a2c97', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '68b35d92a01ad90522ee630bdc8836e89cb5f134', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '9ddaf40939b76068574b42857667c6acf8c1235f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: 'f1a64f125d1e69d9105093b7fda37d596b4e59c1', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '6e48a9e6a9911c0a1e6bd8c47ccb54a07bb63ea9', class: "subcontent" }, h("slot", { key: 'dc3e3eb22ee6cf0a165929ea205777f5d2275412', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'c83d39740d933691268167f6bf8c1caf03427320', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '70b5184ffed37bd800054eee6cd075e5e87a3e6d' }, h("dso-icon-button", { key: '9916a89644c6dbef589cc6576ed227100b99c734', 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: 'edf865339b29c1cbd0092e9fbc3f4ee8bb69223a', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '847465aa1ce444b5c158075539931d244d0efdaa', 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: '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") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

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: '25100f9a1520b25402d3606e13d50d72e4b42147', 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: 'e3dc493316f373195f1f8cf1c5e190282486796e', 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

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '7a2f2b49ef2ccabe6ebc3e0e5c7ed76c5b72a746', class: "form-group dso-radios" }, h("legend", { key: 'a19b169cc43a70f2e38ceba818bf450952339ff8', class: "sr-only" }, "Achtergrond"), h("div", { key: '64c795570bab8cb5b3992edc2dac4dd6569a5f11', class: "dso-label-container" }, h("span", { key: '1824e0e617af0ef91df2bdf978bbf16645038a62', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'f5d41837ed502d2adea72f7ddaebf01f499ef251', 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: '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))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,10 +58,6 @@ 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);
-}
-a.dso-primary,
-button.dso-primary,
-label.dso-primary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -263,10 +259,6 @@ 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);
-}
-a.dso-secondary,
-button.dso-secondary,
-label.dso-secondary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -702,10 +694,6 @@ 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);
-}
-a.dso-map,
-button.dso-map,
-label.dso-map {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;

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

@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, { key: '722122cab93d6027100d73c0a062808c211fa86f' }, h("button", { key: '9c2494d749d43f2027010f9bed93f61d8255fdc1', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'b4e4c503dfa2b35f2a1567c95e90d1f8622f9b11', icon: "layers" }), h("span", { key: '0e43af8aa45adba0719a4cfdc35189014fc1c60a' }, this.text("layersButton"))), h("dso-button-group", { key: '08fdb4c7547322a9bd300303f8e0a8658c793218', class: "zoom-buttons", direction: "column" }, h("button", { key: 'ca9932bcaf47796eac7bceb314f5455c8accd40c', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '878448cf48eac59999e72d7fc6e5b54ac62cf518', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: 'e121e3eb29330509e3fe7fb56e9514b7a8ddd39b', icon: "plus" })), h("button", { key: '21f4a250c6f32ee8a9848e270cd01fcadab646ac', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '076869983f44e00f1cfc0a9a8f2ace5c8fb5cc28', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'c3b9436f36f15a2da4928f1ce315afbdd2ecbb2b', icon: "minus" }))), h("section", { key: '0d5fbd3b1a98ae9bd18acf92e33032b10e5f7033', hidden: this.hideContent }, h("header", { key: 'f1975ef9f36394fa6f6dee8b10a23f8c743a20ae' }, h("h2", { key: 'af03b33a9505f1bcb2dfce82316c7c977773ea06' }, this.text("title")), h("button", { key: 'c711ae9d9cd0de0958b10fa1bfbb9cca327b11c3', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5cd14d3d0ae393c28e2cff37208d51391a1fb355', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '21d1c28b34ae17a3f5429c0179e3fd2159e98591', icon: "times" }))), h("dso-scrollable", { key: '15bc3d4ee0d7060b10ce197780829c7ab9c0838a' }, h("div", { key: '7cdf7b9433a9b5ce96d4bf28823858bcf1f8b578', class: "content" }, h("slot", { key: 'b89f849740d209313f059e08893825031f3828ef' }))))));
+        return (h(Fragment, { key: '524335d692fdfbaaf7060919b018350cfb02227a' }, h("button", { key: '73236dc19d7a737a433c63c12bc78c74429346c4', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '13048c13b65e68b8c9b4f06720997d5464a93c08', icon: "layers" }), h("span", { key: '5b530075e4c3424ab712ebf3eb2676e8529282f8' }, this.text("layersButton"))), h("dso-button-group", { key: '6410b36883686d32a44257e49aa0335371513c14', class: "zoom-buttons", direction: "column" }, h("button", { key: '555763ec8a3f18e25f154e96cd2f0e798e5cf9fd', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'c64e310a910b8152a5db1380931663efe14e0f40', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: 'bd16af8e69a17ea43c99acc806ec5849334c6fdf', icon: "plus" })), h("button", { key: '8b7250ddd0dda081989ac4ee999482cd53fc472f', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'c3eb515a6ceee241639e7d4be170d7a624ad7cdc', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: '2c9b0796853d8acdf69037bcc0f27c1a6553cdbc', icon: "minus" }))), h("section", { key: '1b673eb2e40686c4760cbb8a71327e8e52151478', hidden: this.hideContent }, h("header", { key: '6419f5fe83c202e1110fae27339b8c1fbd31b116' }, h("h2", { key: 'cd7186cae05c68a8ef4340ef10ac0ef4010039d4' }, this.text("title")), h("button", { key: '422c6d0b671b8b9618d5a44b144a16bedf243d8f', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5ad7d9a46c1b6e92c518a6579c256b3bf5bc500a', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '690f0dff0598dad4a293a789fc1a0169467c8c43', icon: "times" }))), h("dso-scrollable", { key: '47eaf3c3a078bd6a986a760674ec436450f9737f' }, h("div", { key: '41b06e6b50c1e8f09c6ac3ae322c709bf2f8dc10', class: "content" }, h("slot", { key: 'ed5514912e3aea637b67a2caf4b96d955dc75ab9' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: 'a61fca7133f8a893add201a6ba37dd2db5dde743', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'cff4c90be1e1ec46f2a7f8459d09b2d43d00ce19', class: "map-layer-object" }, h("div", { key: '2ae0d14b1a8b1527627ccb131424a7df7564e824' }, h("slot", { key: 'f30274ff0683426b07cc672f543f6166ae810a42', name: "symbol" })), h("div", { key: '5027d7eb2f8da853c8de3254b74914d0dbbe04dc' }, h("slot", { key: '5c10b5bdcc99daaf31b107c3879958d4e92a991b' })), h("div", { key: '1131bf40d2d75b69a78eef8f19c5d3f416567412', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '12725933d2a3c3ace96c5ace4dc5712d0d506f6f', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))));
+        return (h(Host, { key: '30bafb9fba2e324b90973e201b777ed1e4c2edb7', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'e16b36b39faa9eef52d42ae4e2ea10ef6e447b85', class: "map-layer-object" }, h("div", { key: 'd1b45348875bc6168c49c1dcb0c0a9586b2a854c' }, h("slot", { key: 'aa1363f10e2755e130866834cb2d90ce40247f28', name: "symbol" })), h("div", { key: '159fa97b818465cf269654ccaf420621bae2ef65' }, h("slot", { key: 'd0aba82b3df09e78a2fdb8a90f11eb128651dd10' })), h("div", { key: '703dc4b02c42de955850fd473b0e72db7b6df84e', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'c957e6475e55e583ab609c44c8850043f5cc99e6', 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.js

@@ -18,7 +18,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(Fragment, { key: 'f7a9febc99f223bbaae4a60c49566e94a630e545' }, h("div", { key: '621f18ff0f293bc0ff805a4355b7c43038413584', class: "map-layer" }, h("span", { key: '52a17c153fa213953bfd6bd005780995ea0519f9', class: "map-layer-label" }, this.label), this.activatable && (h("div", { key: 'e8e0f4c6e7136621dbc0dc8d46ef8efdf43fdda6', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'e04a1f31755eaae48fa185d361478bffa917fe22', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '9d28c70969a368bbd4bb4a721bbcaca9255b9698' })));
+        return (h(Fragment, { key: '4355e5b07cda338b718214642054803ac24daf84' }, h("div", { key: '4a21ae78c755bf65d33a441a847cb1fe38e714a2', class: "map-layer" }, h("span", { key: '074f5708e406e28a7b8223c15c11e292ec56cefe', class: "map-layer-label" }, this.label), this.activatable && (h("div", { key: 'cb3b8004e02c452e76f71e667e9a34dcee2c9f86', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '158a228b06dd32f5f7097aec8b3e5a1403f299b7', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'b265537514ffd9feaed3edd18f5864bd4a7f4c64' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '80f2fc77db0fe01fe9e1272622bd7ffcc514a191', class: "form-group dso-checkboxes" }, h("legend", { key: '658232929de2aa1b0616dca0c12fb5b5ef8f8709', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'c0c291d0724e19e4f30df8bbb3736d2f83fe7552', class: "dso-label-container" }, h("span", { key: 'bd64327912581d427fb7277a349da2d01908e40f', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '372acf1a210dc97b282e3e889b28352a880b155a', 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: '5677296e800c2c88ea5a6673303561405112ae8c', class: "form-group dso-checkboxes" }, h("legend", { key: '79422ea4c05439d17589479b04ed8e006f1ca6c2', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'a06f69b1ffe8a3708a2cf464329db67e4a6ae271', class: "dso-label-container" }, h("span", { key: '700705da846f5cdbf271a5ee350e3ce28b51d60b', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '24ca7eacbf9efe9bd89b721c611f2081e05aa2c5', 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: 'efd4d5aeab981b0a61a4b2a79d8098a907ef6d63', class: "dso-mark-bar" }, h("div", { key: '40efb59d5c0bcbe6ab271e88d1c5fc599ca79a66', class: "dso-mark-bar-input" }, h("input", { key: 'ea6117a0218b34b780e8e383d1e4d3b49beb99fe', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'e30c6afd4344b6ec13316a5a2a2147d364c71373', htmlFor: "search-input" }, h("dso-icon", { key: 'ed6c04ed53bcdeaea2547f5b4e7ce53c084a53fc', class: "dso-search-icon", icon: "search" }), h("span", { key: '6ee71ee1e63d65d79f13b03fe7cc29cdb50157e1', class: "label-text" }, this.label)), h("dso-icon-button", { key: '03e173fc78136fa255ee1a0790bc74290649b4ad', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '1bd44063ed8bf564d7dd43c5b7f6973e42238f0b', class: "dso-button-container" }, h("span", { key: '347612ee2a6ac3be28f5ea0425499e1896dd94ce', class: "divider" }), h("dso-icon-button", { key: '830789193f1d31d1bbe099fb435beed7b1d24dd3', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '1eb7cc36f9868b8a2b82a3a75ebce890cd30c350' }, current, "/", totalCount), h("dso-icon-button", { key: 'b4bf13a6be43b48529da397b9144f6ec543e3e11', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: '479f935010eaa312fb947a2bc86f4120156f72b7', class: "dso-mark-bar" }, h("div", { key: '6f800ec39af642b5947ea302440756826c32468e', class: "dso-mark-bar-input" }, h("input", { key: '39a5a73bab3522acdbe6e8d18727c453bb1ffb73', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'de1aa601a7d49e90a707002c6554ef12970d354c', htmlFor: "search-input" }, h("dso-icon", { key: 'ed3c5a20769c9cb5137300b6c7bf83bd02e33bb0', class: "dso-search-icon", icon: "search" }), h("span", { key: '6cbbfbfece06520c7f7ca7148f92227d76489c6e', class: "label-text" }, this.label)), h("dso-icon-button", { key: '0e2b0f00578e857ee292e2c276516efcebcbba98', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '753c2a3ae343240ba4234631b8ea93318e22632e', class: "dso-button-container" }, h("span", { key: '9ec607afe4347550280631389368f2847bb53fe6', class: "divider" }), h("dso-icon-button", { key: 'ea6c03677bfd7a89b34d0a4416e8d5f38dab2124', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'b5fbeba0936fd222057f7ec38fc90e2c0c4c0cbe' }, current, "/", totalCount), h("dso-icon-button", { key: '01ee5a34b52a660705b451ecf9b72ba738c7fe1d', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '0ee1f785d5888d1f707e0f1fce8fa6ab1f2427a5', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '0e1245d652fc0f873654fdd287c5bd7181576172', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'c7bdf807b9b67457423282b0ab46c711d994b8aa' }, h("div", { key: 'c543ec7c4f2b26f9a30ce58fc75c6f7a4a9e1424', class: "dso-body", tabIndex: 0 }, h("slot", { key: '0644e6d51924c25b2d05ccd86efadae9d869d173', name: "body" }))), this.hasFooter && (h("div", { key: '2d581222f09440ac9229e5600941549697c31324', class: "dso-footer" }, h("slot", { key: 'e17f745fa99710140eaa27f77a5d4e190a6f4310', name: "footer" }))))));
+        return (h("dialog", { key: '8160801bfd3f476ae7d62fd6b0473a50eb98b83d', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '05ce0361e4a8d0dd3f382990650beef517b1efc5', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '2078683c54e36bfdcbf519cdb735c1c311ffbd9e' }, h("div", { key: '155f55ed093e9dfbe3fba7866bfa3da07ef2fe06', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'ef2d5cce45c436c08a982b26a79810f0f542d3ba', name: "body" }))), this.hasFooter && (h("div", { key: 'f7c67dcc310923290d1589601c472c365c359a48', class: "dso-footer" }, h("slot", { key: 'ad642cfe380238b4a7266e5a0029216576901efc', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.css

@@ -112,8 +112,6 @@
   font-size: 1rem;
   position: relative;
   z-index: 2;
-}
-.onboarding-tip-inner {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -38,7 +38,7 @@ export class OnboardingTip {
         this.cleanUp = undefined;
     }
     render() {
-        return (h(Host, { key: '330e802344482a5824799785cc774cbeab5a928a', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '4315d4b92cb202979ea7c10a2bc67e2fb79d94a0', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'c24ff00ce53904b7e816acd8babab2cce4616c18', class: "onboarding-tip-inner" }, h("div", { key: 'ebcf64f2c2456945d8e1556c8689c6e4a4e69749', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '833ebf70796b355e76545c57a71574799d864de9', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'e4e30b67043792b797dd5dfd75eff200d86d2cf1', icon: "light-bulb" }), h("slot", { key: '6d67caf1735aa203a5124976a6215dc0d20647a0', name: "heading" }))), h("dso-icon-button", { key: 'aedd766ec0fe895c6a2997d5d856dea1018ad9d6', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'a04f4899e08c4de4a344a6726649304841565fdd' }))), h("div", { key: 'cd61729dfed4a9b1afc6493b82c64e1c45914109', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'd60e322e9eb46e0271a0172db57e82b1e170e193', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f463fe476aaa88b2e1de6506c97d2a8c32b82e09', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'b3d99d6b2c7bb5029409fd9d2e131c5aff5cf328', class: "onboarding-tip-inner" }, h("div", { key: '658a012c2e7358c317b76571b8f13270ad5d0960', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'dfa159ff194062122bf9760233ff09a579f79b69', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '45d18025a2918ffee7defff889b807989157c939', icon: "light-bulb" }), h("slot", { key: '6708d1880a299184800721b43111e695bbd60b21', name: "heading" }))), h("dso-icon-button", { key: 'f946318abace8994e4686ee363765e90c962701a', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b15cbc5b14e9ba3156161e4886708de46ee28a33' }))), h("div", { key: '1d6f4ff0a16e4b50b7cbdec2d42ff558093a8f21', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.css

@@ -11,8 +11,6 @@
   --_dso-alert-warning-border-color: initial;
   background-color: #fff;
   color: #191919;
-}
-.dso-tooltip {
   border-radius: 4px;
   overflow: unset;
   margin: 0;
@@ -34,8 +32,6 @@
   --_dso-alert-warning-border-color: initial;
   background-color: #fff;
   color: #191919;
-}
-.dso-tooltip .tooltip-inner {
   font-family: Asap, sans-serif;
   font-size: 1rem;
   font-weight: normal;
@@ -52,8 +48,6 @@
   --_dso-alert-warning-border-color: initial;
   background-color: #fff;
   color: #191919;
-}
-.dso-tooltip .tooltip-arrow {
   position: absolute;
   border-start-start-radius: 4px;
   block-size: 10px;
@@ -63,7 +57,7 @@
 }
 
 :host {
-  display: inline-block;
+  display: inline;
   --_dt-rich-content-margin-block: 8px;
 }
 
@@ -96,6 +90,8 @@
   background-color: transparent;
   cursor: pointer;
   vertical-align: baseline;
+  display: inline;
+  overflow-wrap: break-word;
 }
 .toggletip-button, .toggletip-button:hover, .toggletip-button:focus-visible, .toggletip-button:active {
   text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);
@@ -105,4 +101,12 @@
 .toggletip-button dso-icon {
   margin-inline-start: 4px;
   vertical-align: middle;
+}
+
+.icon-container {
+  position: relative;
+  padding-inline-end: 28px;
+}
+.icon-container dso-icon {
+  position: absolute;
 }