@dso-toolkit/core 62.23.0 → 62.24.0

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

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-48d7533e.js');
+const clsx = require('./clsx-fc789adc.js');
+const index = require('./index-a5d31aab.js');
+const v4 = require('./v4-c23234d2.js');
+
+const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-width:100%;padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label{background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding:0 8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
+const DsoLabelStyle0 = labelCss;
+
+const resizeObserver = new ResizeObserver(index.debounce((entries) => {
+    entries.forEach(({ target }) => {
+        if (isDsoLabelComponent(target)) {
+            target._truncateLabel();
+        }
+    });
+}, 150));
+function isDsoLabelComponent(element) {
+    return element.tagName === "DSO-LABEL";
+}
+function hasEllipses(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+const Label = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.dsoRemoveClick = index$1.createEvent(this, "dsoRemoveClick", 7);
+        this.compact = undefined;
+        this.removable = undefined;
+        this.status = undefined;
+        this.removeHover = undefined;
+        this.removeFocus = undefined;
+        this.truncate = undefined;
+        this.textHover = undefined;
+        this.textFocus = undefined;
+        this.isTruncated = false;
+        this.labelText = "";
+    }
+    watchRemovable(removable) {
+        if (removable) {
+            this.startMutationObserver();
+        }
+        else {
+            this.stopMutationObserver();
+        }
+    }
+    watchTruncate(truncate) {
+        if (truncate) {
+            this.startTruncate();
+        }
+        else {
+            this.stopTruncate();
+        }
+    }
+    keyDownListener(event) {
+        if (event.key === "Escape") {
+            this.textHover = false;
+            this.textFocus = false;
+        }
+    }
+    /**
+     * @internal
+     */
+    async _truncateLabel() {
+        setTimeout(() => {
+            this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);
+        });
+    }
+    syncLabelText() {
+        var _a, _b;
+        this.labelText = (_b = (_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.startTruncate();
+        }
+        if (this.removable) {
+            this.startMutationObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.stopTruncate();
+        this.stopMutationObserver(true);
+    }
+    /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
+    startMutationObserver() {
+        this.mutationObserver = new MutationObserver(() => this.syncLabelText());
+        this.mutationObserver.observe(this.host, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        this.syncLabelText();
+    }
+    stopMutationObserver(force = false) {
+        var _a;
+        if (force || !(this.truncate && this.removable)) {
+            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            delete this.mutationObserver;
+        }
+    }
+    startTruncate() {
+        resizeObserver.observe(this.host);
+        this.startMutationObserver();
+        this._truncateLabel();
+    }
+    stopTruncate() {
+        resizeObserver.unobserve(this.host);
+        this.stopMutationObserver();
+        this.isTruncated = false;
+    }
+    render() {
+        return (index$1.h(index$1.Fragment, { key: '7d0859b14bf6b8b6bc1f1ea7f6e6428431cc1197' }, index$1.h("span", { key: 'b1c8c1302f21caaaebb0193a171a95e4330b92b8', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
+                [`dso-label-${this.status}`]: this.status,
+                "dso-compact": this.compact && !this.removable,
+                "dso-hover": this.removeHover || this.removeFocus,
+            }) }, index$1.h("slot", { key: '5f3f5b65b4e4b44949b817800b505c5db1d25275', name: "symbol" }), index$1.h("span", { key: '6070e0d015cf2464121cf0dfb0088676ab00628b', class: clsx.clsx("dso-label-content", {
+                "dso-truncate": !!this.truncate,
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '04b20cade12d23246ce7b21e1aae447689e9c1c7' })), this.removable && (index$1.h("button", { key: 'bb184213b1ca01f83e2a1f265429293f3dda8f3b', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { key: '9805c7dcd105ba5a6a59e75e822250defb107940', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: '19fef3d7fbd4b017cc880bc02fb3408706536933', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: 'c136e39ed459e5c4680888b2a27bd0c17485406b', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+    }
+    get host() { return index$1.getElement(this); }
+    static get watchers() { return {
+        "removable": ["watchRemovable"],
+        "truncate": ["watchTruncate"]
+    }; }
+};
+Label.style = DsoLabelStyle0;
+
+const slideToggleCss = "button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";
+const DsoSlideToggleStyle0 = slideToggleCss;
+
+const SlideToggle = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.dsoActiveChange = index$1.createEvent(this, "dsoActiveChange", 5);
+        this.checked = false;
+        this.disabled = false;
+        this.accessibleLabel = undefined;
+        this.labelledbyId = undefined;
+        this.hasVisibleLabel = undefined;
+        this.identifier = v4.v4();
+    }
+    handleSwitch(e) {
+        this.dsoActiveChange.emit({
+            originalEvent: e,
+            checked: !this.checked,
+        });
+    }
+    componentWillLoad() {
+        this.hasVisibleLabel = this.host.querySelector("*") !== null;
+    }
+    render() {
+        return (index$1.h(index$1.Fragment, null, index$1.h("button", Object.assign({ key: 'f8675793bcdd4b88ca76fa4e3739a5e7a76ebbb0', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: '3aea12f6ceb0ca2aaa708afe2345f9fc45b5f982', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '8e1d9f35b03bc2c5eae7fe28b5f0966f76eb70d4', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: 'bdf984ae055e5b6b994da64526b260082935b43e', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: 'bc009a77fdf29e0901b089d22cf73383b3172c9c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: 'c623527a4f867e5bb7745d97f77d5f6515e8b9fd', htmlFor: this.identifier }, index$1.h("slot", { key: 'bef77c8f156edc05a4e549d0a9aa0d5c33e6797f' })))));
+    }
+    get host() { return index$1.getElement(this); }
+};
+SlideToggle.style = DsoSlideToggleStyle0;
+
+exports.dso_label = Label;
+exports.dso_slide_toggle = SlideToggle;
+
+//# sourceMappingURL=dso-label_2.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dso-label.dso-slide-toggle.entry.cjs.js","mappings":"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","names":["debounce","h","Fragment","clsx","v4"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-width: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -32,10 +32,10 @@ const LegendItem = class {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (index.h(index.Host, { key: 'e50f1d84ed48c4fc88ebdf2d473ee0f67bec22fe', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '98ccac5c97c900a0eefe58baa4d69747847b2fbf', class: clsx.clsx("legend-item", {
+        return (index.h(index.Host, { key: '3a732bff9d1e998b7468c7e508edf41e472cdf1f', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '8b2bba6b998955c91e5d67fa6dcd4424807b7c2a', class: clsx.clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, index.h("div", { key: 'f73cdf97e65e6d50fd8c8e073c2abf902d148511', hidden: !hasSymbol }, index.h("slot", { key: 'd18b7efd00c137f3b9fe96b00eabbafe9f8c8ae1', name: "symbol" })), index.h("div", { key: '8a0a4212aa989367d869a949bba1984af4e3d2c1' }, index.h("slot", { key: '35285a0f129c3d0e64f5925b5e46e1d1246603fd' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '93727ab6ba53cd605b1a0df5a5d14b281653cef7', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: '5d72df7e74cc74cb2e5cdede86bace5129c97906', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: '6cb45e90d3e30e709f6bed348ae29e2931c34f11', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: '3ec5613fc71e021bcaca961ab4d858f7aeb408c2', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: '690784310b84fa49590680db6b7ab42aec5e34e8', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: 'df9051dcd36487f51cbfb6014e4921ce405db3e3', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '8d047e9c90f888a5b3a60c41829845bd1bcd0538', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '8f90acc7de95c518749e0cdbd100f38195911dbb', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '9d743680ea76b8daec3ef131ca244603eba4a996', name: "body" }))));
+            }) }, index.h("div", { key: '1f3bb12d214ed0877786a195dbae6185b00b6c97', hidden: !hasSymbol }, index.h("slot", { key: '032e27bcad7cf0a711e7afe05f782c7d51246d1d', name: "symbol" })), index.h("div", { key: '7ba425d10db6401e450090b94824bb66ff709e9b' }, index.h("slot", { key: 'a4f911e41c0a700a4aa13a7fb4aab1fcdbeffe8a' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: 'f094a3c424c1d1fd181b57bfd51638bfb8ea0797', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: '025272a3802507a54d2e50741dd79ed8bd1ba130', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: 'a1f96e0028b2af5d115216676bb2a2f31403f53d', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: 'b2c18e31618d3ce43536c1b2d3d48f5d66c16658', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'ef084b28d39bac92df86f5e4e9f441588fa77d3f', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: '2ca66b1cadf279727750086f02e3423029b39fec', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '6fe03e75ecbc08e02956d75c10212ad3f566d6f4', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '061973981aa31be8a7b1ab51f94e301a1c4aa68b', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '9817bbb5df6790ecf30c97c688aed899a7b9ef9e', name: "body" }))));
     }
     get host() { return index.getElement(this); }
 };

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

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

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

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

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

@@ -32,7 +32,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: '9393b34468f7e7c35fd8933d344353c42a50f627', class: "form-group dso-radios" }, index.h("legend", { key: 'aa1cf5cc8c0d9874c7b443072637bcacb9dca799', class: "sr-only" }, "Achtergrond"), index.h("div", { key: '7c4236d2023cd6712e5f5761151990d7614a6c39', class: "dso-label-container" }, index.h("span", { key: '3195ba776a980eed4eb47bf224d8617aa5debda4', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { key: '6561ad34fa4d0eeb3ec152c75e891109b8c1eda0', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (index.h("fieldset", { key: 'ce4733538fc133e4d016ebe43df3b13a58797446', class: "form-group dso-radios" }, index.h("legend", { key: 'b1f4ceb4f0c8d9fefce0ca9646e02097e95afbd4', class: "sr-only" }, "Achtergrond"), index.h("div", { key: '702d557a61547834151275a488d207d3b78d3407', class: "dso-label-container" }, index.h("span", { key: 'e44d8e0a6d88ab41a8c36989229bc4d577f9c61f', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { key: '0b97e49d0288373b77f8edcc15efa1f77c440c8c', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
 };
 MapBaseLayers.style = DsoMapBaseLayersStyle0;

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

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

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

@@ -33,7 +33,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: 'e2e4fd68c19725e3ab86f6a3226a096499f8bfd6', class: "form-group dso-checkboxes" }, index.h("legend", { key: 'e91f746f3ce067afe57835da2996804dba471ce3', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: '81894c2733ee1717602906057def15e6c2b94ede', class: "dso-label-container" }, index.h("span", { key: 'd2e15d075b1796bb7eb63a423f5ea0f0618d0367', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { key: '27a3141b73c4fabcc6c22b341bc314749bd77e2a', class: "dso-field-container" }, this.overlays.map((overlay) => (index.h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? index.h("p", { slot: "info" }, overlay.info) : null))))));
+        return (index.h("fieldset", { key: 'e064b6e3c8270a7ae1a88a75310e643184b0c871', class: "form-group dso-checkboxes" }, index.h("legend", { key: 'be69f5fb324f9699693c8a59e02488d1ef299f80', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: '31c5b7a451d53c2bb88078741a6bf003a5f38171', class: "dso-label-container" }, index.h("span", { key: 'f923ee4a9eab8445103642d68478e76f1393fa31', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { key: 'a3f52d6e7f87ecfdb6dd5ec354e728ec78ff392a', class: "dso-field-container" }, this.overlays.map((overlay) => (index.h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? index.h("p", { slot: "info" }, overlay.info) : null))))));
     }
 };
 MapOverlays.style = DsoMapOverlaysStyle0;

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

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

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

@@ -43,10 +43,10 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (index.h("dialog", { key: '8667722ca1444f173b011507c9c4a06ff3ddeddd', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (index.h("dialog", { key: '105a90e070e128bc42e652e71e2d65d7075c3b22', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, index.h("div", { key: '0ebf13e604a159c4bb08c96fd0d87011b09fd6e7', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", { key: '434522fd8d1c2d518a7bbb410dafc674f3f72c99' }, index.h("div", { key: '8399490f6dd67d60a30646c1e2727535dae856a6', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '6f27377f5311c753944b9f1f3f019c84bd41b15a', name: "body" }))), this.hasFooter && (index.h("div", { key: 'd8d14ec73fc2c2c3fe099d03cf83b992a8f6378a', class: "dso-footer" }, index.h("slot", { key: '1b780ea4a62678c453050e32831ca5c0dc26b36c', name: "footer" }))))));
+            } }, index.h("div", { key: '62928005e012b28a4bb3292577d338a19564d900', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", { key: 'a3b8ca827f4f810111748c8afce16376a2855ea2' }, index.h("div", { key: 'e1b8da8b7f989fb9218225717b42a442ccdbba68', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '75d7237cd6361428ee1a8fde43297105c13a5a70', name: "body" }))), this.hasFooter && (index.h("div", { key: 'ccba551213f760dc116181a15c5d14ccc4e69b55', class: "dso-footer" }, index.h("slot", { key: '723581c8230a74655480866e0cb319c0e3f40215', name: "footer" }))))));
     }
     get host() { return index.getElement(this); }
 };

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

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

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

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

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

@@ -50,7 +50,7 @@ const ResponsiveElement = class {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '2029e4f353845ef8216aca8b34766d1994dc1978', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: '1091f3ff1b743749016eb05770a1832b71addad4' })));
+        return (index.h(index.Host, { key: 'fe62bfb3fa9345115e9959500e8c3906efa28261', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: 'dea7899ed18de4e28962d3a824f257c39f7057e9' })));
     }
     get host() { return index.getElement(this); }
 };

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/dsot-document-component-demo.cjs.entry.js

@@ -1791,7 +1791,7 @@ const DocumentComponentDemo = class {
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (index.h("dso-responsive-element", { key: '594b7e40f33534d158c7e8e8f436f8ebadf20cfb', class: "dso-document-components" }, index.h("div", { key: 'f5d68621dd35ceae0d7f60d2b92495f60c8b44e8', class: "dso-navbar" }, index.h("ul", { key: '720243838067818c52eb682d04e76803757ebe72', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (index.h("li", { class: this.document === d ? "dso-active" : undefined }, index.h(MenuButton, { documentComponent: d })))))), this.document && index.h(DocumentComponent, { key: '1518c7a6344005e98c6aee5b7ee574a354280a6e', path: [this.document] })));
+        return (index.h("dso-responsive-element", { key: '72a88e08b7dba5711320033f867992356844faf0', class: "dso-document-components" }, index.h("div", { key: 'e818c08411681f11a2c03127950fcdb7aed43dfd', class: "dso-navbar" }, index.h("ul", { key: 'a39cd84e15d36521e51c1d19ccded5b24a504e86', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (index.h("li", { class: this.document === d ? "dso-active" : undefined }, index.h(MenuButton, { documentComponent: d })))))), this.document && index.h(DocumentComponent, { key: '8a315805356fa2b3ec5c65681216291a856e9c92', path: [this.document] })));
     }
     static get watchers() { return {
         "jsonFile": ["jsonFileWatcher"],