@dso-toolkit/core 64.0.0 → 65.0.1

package/dist/collection/components/tabs/tabs.js

@@ -0,0 +1,83 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+/**
+ * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.
+ * @slot panel - The panel with the content for the active tab
+ */
+export class Tabs {
+    constructor() {
+        // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.
+        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;
+            }
+        };
+    }
+    get enabledTabs() {
+        // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft
+        return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce((tabs, tab) => {
+            if (!tab.disabled) {
+                tabs.push(tab);
+            }
+            return tabs;
+        }, []);
+    }
+    get firstTab() {
+        return this.enabledTabs[0];
+    }
+    get lastTab() {
+        return this.enabledTabs[this.enabledTabs.length - 1];
+    }
+    moveFocusToTab(tab) {
+        tab === null || tab === void 0 ? void 0 : tab._dsoFocus();
+    }
+    moveFocusToPreviousTab(focussedTab) {
+        var _a;
+        const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.enabledTabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        this.moveFocusToTab(next);
+    }
+    moveFocusToNextTab(focussedTab) {
+        var _a;
+        const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.enabledTabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        this.moveFocusToTab(next);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) !== null && _a !== void 0 ? _a : (this.mutationObserver = new MutationObserver(() => forceUpdate(this.host)));
+        this.mutationObserver.observe(this.host, { childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Host, { key: 'ce49553d33f63de258e8ff3466fa37d539e4734f' }, h("div", { key: '22a863b05306509b718237a071a072a52c3cfd73', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '75d01af59d70f79e059948d9239c7c9ccdef297b' })), h("div", { key: '2304bbce1b0c27566ae04f7c1c5dd13cd9e588eb', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'bc1a82a606d37dd50beb5f5acd575cc57b41182e', name: "panel" }))));
+    }
+    static get is() { return "dso-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[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.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\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      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -40,7 +40,7 @@ export class Toggletip {
         this.secondary = undefined;
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: '3304cffaef15d2628de0d345889ba52dbf60514a', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '4d120364ab6288ded65ea048f7dd7ec18b4f16e0', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'ab233a002b03fa23345df374366d2ba8f08b2b63' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: 'd814dd230c0a2b7dd143f0c461a7c35c5a0e8256', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '8335db4a80d8bf7fdec4251caa9a3d4c5520b8f4', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'e4f9747977cd810999eb63ee413e63827ce106e3' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -168,7 +168,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'b8b24b9fcb5d6de63f40ac2c28aa3cae220935d1', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '837abccdba48399a6bda370059d7f59ecabf1d4d', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '9c6c0250d521e51cfc635a82ddd57d49bb81dd53', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'efd8935a506723d1a1b537896526249f7e89d559', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '125db28c4ee8f322d6014013c001393267e52829' })))));
+        return (h(Host, { key: '1dd2e74dbeb0555c9ddf87f129fa0c71761a1838', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'ee9a42aebfda6d2b72b9ca2843997c543b534ee8', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '3f692092ef311ed2c23f24c4c039cd690a1456cd', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '1f47431cd04dffd0f6eec3728c140e0e2bbbd2c5', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'a1e76e41487efc675edd80608d610e4fbf0f227e' })))));
     }
     activatePopper() {
         var _a;

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

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

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

@@ -53,11 +53,6 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
 }
 .shrink:focus, .shrink:focus-visible,
 .expand:focus,
@@ -71,6 +66,15 @@ button::-moz-focus-inner {
 .overlay-close-button:active {
   outline: 0;
 }
+.shrink,
+.expand,
+.overlay-close-button {
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
 .shrink[disabled],
 .expand[disabled],
 .overlay-close-button[disabled] {
@@ -302,9 +306,24 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+}
+.sizing-buttons button:focus, .sizing-buttons button:focus-visible,
+.toggle-button button:focus,
+.toggle-button button:focus-visible {
+  outline-offset: 2px;
+}
+.sizing-buttons button:active,
+.toggle-button button:active {
+  outline: 0;
+}
+.sizing-buttons button,
+.toggle-button button {
   background-color: #fff;
   border-color: #39870c;
   color: #39870c;
+}
+.sizing-buttons button,
+.toggle-button button {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -312,23 +331,6 @@ button::-moz-focus-inner {
   min-inline-size: 56px;
   padding-block: 11px;
   padding-inline: 15px;
-  border: 0;
-  padding: 8px;
-  border-radius: 0;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
-  flex: 0 0 100%;
-  block-size: 40px;
-  min-inline-size: auto;
-  inline-size: 40px;
-}
-.sizing-buttons button:focus, .sizing-buttons button:focus-visible,
-.toggle-button button:focus,
-.toggle-button button:focus-visible {
-  outline-offset: 2px;
-}
-.sizing-buttons button:active,
-.toggle-button button:active {
-  outline: 0;
 }
 .sizing-buttons button:hover,
 .toggle-button button:hover {
@@ -452,6 +454,17 @@ button::-moz-focus-inner {
   color: #fff;
   outline: none;
 }
+.sizing-buttons button,
+.toggle-button button {
+  border: 0;
+  padding: 8px;
+  border-radius: 0;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
+  flex: 0 0 100%;
+  block-size: 40px;
+  min-inline-size: auto;
+  inline-size: 40px;
+}
 .sizing-buttons button:hover dso-icon,
 .toggle-button button:hover dso-icon {
   color: #fff;
@@ -529,9 +542,20 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  line-height: 1rem;
+}
+.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {
+  outline-offset: 2px;
+}
+.filterpanel-buttons .cancel-button:active {
+  outline: 0;
+}
+.filterpanel-buttons .cancel-button {
   background-color: #fff;
   border-color: #39870c;
   color: #39870c;
+}
+.filterpanel-buttons .cancel-button {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -539,13 +563,6 @@ button::-moz-focus-inner {
   min-inline-size: 56px;
   padding-block: 11px;
   padding-inline: 15px;
-  line-height: 1rem;
-}
-.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {
-  outline-offset: 2px;
-}
-.filterpanel-buttons .cancel-button:active {
-  outline: 0;
 }
 .filterpanel-buttons .cancel-button:hover {
   background-color: #d7e7ce;
@@ -664,9 +681,20 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  line-height: 1rem;
+}
+.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {
+  outline-offset: 2px;
+}
+.filterpanel-buttons .apply-button:active {
+  outline: 0;
+}
+.filterpanel-buttons .apply-button {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
+}
+.filterpanel-buttons .apply-button {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -674,13 +702,6 @@ button::-moz-focus-inner {
   min-inline-size: 56px;
   padding-block: 11px;
   padding-inline: 15px;
-  line-height: 1rem;
-}
-.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {
-  outline-offset: 2px;
-}
-.filterpanel-buttons .apply-button:active {
-  outline: 0;
 }
 .filterpanel-buttons .apply-button:hover {
   background-color: #275937;
@@ -938,11 +959,6 @@ button::-moz-focus-inner {
   .dso-nav.dso-nav-main > li > a,
   .dso-nav.dso-nav-main > li > button {
     text-decoration: none;
-    font-size: 1.25em;
-    line-height: 1;
-    margin-block-start: 8px;
-    padding-block: 8px 7px;
-    padding-inline: 16px;
   }
   .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,
   .dso-nav.dso-nav-main > li > button:hover,
@@ -950,16 +966,20 @@ button::-moz-focus-inner {
   .dso-nav.dso-nav-main > li > button:active {
     text-decoration: underline;
   }
+  .dso-nav.dso-nav-main > li > a,
+  .dso-nav.dso-nav-main > li > button {
+    font-size: 1.25em;
+    line-height: 1;
+    margin-block-start: 8px;
+    padding-block: 8px 7px;
+    padding-inline: 16px;
+  }
   .dso-nav.dso-nav-sub > li {
     display: inline-block;
   }
   .dso-nav.dso-nav-sub > li > a,
   .dso-nav.dso-nav-sub > li > button {
     text-decoration: none;
-    font-size: 1rem;
-    margin-block-start: 4px;
-    padding-block: 4px 3px;
-    padding-inline: 8px;
   }
   .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,
   .dso-nav.dso-nav-sub > li > button:hover,
@@ -967,6 +987,13 @@ button::-moz-focus-inner {
   .dso-nav.dso-nav-sub > li > button:active {
     text-decoration: underline;
   }
+  .dso-nav.dso-nav-sub > li > a,
+  .dso-nav.dso-nav-sub > li > button {
+    font-size: 1rem;
+    margin-block-start: 4px;
+    padding-block: 4px 3px;
+    padding-inline: 8px;
+  }
 }
 @media screen and (max-width: 807.99px) {
   .dso-navbar {
@@ -993,11 +1020,6 @@ button::-moz-focus-inner {
     text-align: start;
     user-select: none;
     vertical-align: middle;
-    border: 0;
-    color: #39870c;
-    line-height: 1;
-    padding: 0;
-    background-color: transparent;
     font-weight: 300;
   }
   .dso-tertiary:focus, .dso-tertiary:focus-visible {
@@ -1006,6 +1028,13 @@ button::-moz-focus-inner {
   .dso-tertiary:active {
     outline: 0;
   }
+  .dso-tertiary {
+    border: 0;
+    color: #39870c;
+    line-height: 1;
+    padding: 0;
+    background-color: transparent;
+  }
   .dso-tertiary[disabled] {
     color: #afcf9d;
   }

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

@@ -154,7 +154,7 @@ export class ViewerGrid {
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (h(Fragment, null, this.tabView && (h("nav", { key: 'bcb65a8fa594201784f5fc536fa1dc51ae238a1f', class: "dso-navbar" }, h("ul", { key: 'e62921b7bf9f979d1bdac44bf3db0bd3c9d82f2b', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'c2ba30c5affc612141c56c982f835cfb4fe039c3', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: '3ad738a4713c918cba274d288ef11d729b2190b1', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'd9feb8fd090c4e097c9f388c628766c8a7a89386', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'df77620a663614e4417a022aa3ed5055583d6fc6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '9ae25c1ba5377b5c2fc098f482cca838d745f0c1', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '8fb16e4308769043332bfd4d679950612a3d16bb', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (h(Fragment, null, this.tabView && (h("nav", { key: '8ca85b7872476a2afdcb8d41d9d7d3d8fd9d130c', class: "dso-navbar" }, h("ul", { key: '83195a76dbb5770f6a38fe8feec3c1f85a70f102', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '2b13de9e342ee70f4b6f225742f19f4a48387f49', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'c31ce856aacd1c762e4988187e71533c09a554f6', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '31e87407557de7024832b5cc57b8e4d0cd882e6f', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '6ed2d2a928d67f175293c4b16dffc5f836a1beba', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '32d6858043486f36421a73ab0431cf49db6d0d8b', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '3e947e34d6693ecfef90f1606d5e8af37fd28efc', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/annotation-locatie.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './renvooi.js';
 import { d as defineCustomElement$2 } from './slide-toggle.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const annotationCss = "a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-download\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url(\"./dso-icons.svg#img-download-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0;background-image:url(\"./dso-icons.svg#img-external-link\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url(\"./dso-icons.svg#img-external-link-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-call-grasgroen\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:url(\"./dso-icons.svg#img-call-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0;background-image:url(\"./dso-icons.svg#img-email-grasgroen\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:url(\"./dso-icons.svg#img-email-scampi\")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919;text-decoration:line-through}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}";
+const annotationCss = "a{background-color:transparent;color:var(--link-color);text-decoration:underline}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:url(\"./dso-icons.svg#img-download\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:url(\"./dso-icons.svg#img-download-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:1.5em;background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:url(\"./dso-icons.svg#img-external-link\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:url(\"./dso-icons.svg#img-external-link-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:url(\"./dso-icons.svg#img-call-grasgroen\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:url(\"./dso-icons.svg#img-call-scampi\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:1.5em;background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:url(\"./dso-icons.svg#img-email-grasgroen\")}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:url(\"./dso-icons.svg#img-email-scampi\")}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=voegtoe]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=voegtoe]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([wijzigactie=verwijder]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([wijzigactie=verwijder]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([wijzigactie=verwijder]){text-decoration:line-through}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}";
 const DsoAnnotationLocatieStyle0 = annotationCss;
 
 const AnnotationLocatie = /*@__PURE__*/ proxyCustomElement(class AnnotationLocatie extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"annotation-locatie.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,gpIAAgpI,CAAC;AACvqI,mCAAe,aAAa;;MCgBf,iBAAiB;;;;;;QAkCpB,YAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;;IAErC,iBAAiB;QACf,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;IAED,oBAAoB;QAClB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAE7C,QACE,EAAC,cAAc,qDACb,MAAM,EAAE,UAAU,GAAG,EAAC,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,kBACE,YAAM,KAAK,EAAC,SAAS,IACnB,mBAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,EAAC,2BAA2B,OAAG,CACzD,GAEL,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"annotation-locatie.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,m+IAAm+I,CAAC;AAC1/I,mCAAe,aAAa;;MCgBf,iBAAiB;;;;;;QAkCpB,YAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;;IAErC,iBAAiB;QACf,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;IAED,oBAAoB;QAClB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAE7C,QACE,EAAC,cAAc,qDACb,MAAM,EAAE,UAAU,GAAG,EAAC,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,kBACE,YAAM,KAAK,EAAC,SAAS,IACnB,mBAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,EAAC,2BAA2B,OAAG,CACzD,GAEL,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}