@dso-toolkit/core 96.0.0 → 97.0.0-ghi-3769.1

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '886a7873e55563734f1f92bbc16acda7444c3fd5', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '1322fbf91f68d407b780874718426bce6f85a84f', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8476d2c687efb7e123fa68647a36816a890c1d6d' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '2d19c6840a218db161201403d416f308823a95e1', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '89ae14ee04ca0180e4491030cf2cae5d0e128c65', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '1a97088de2e8e5b124e1a034e173ef23aeed3395' }, "Heel moeilijk"), h("span", { key: '53c3a2d92e833254faa16955b835d29417309fe7' }, "Heel makkelijk")), h("div", { key: 'c5b5b9bc780ddcfde1349a8cf92dd3fc72bdd37f', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '1677870899bb965a52c65231446680da2bd1bcd2', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f7c31ea7cef21dad9c1cfa58a382e730ccc9447e', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '4040f276b4f74426f712068e17bcac8973d24655' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '1ba28f0e44795ce41b86d510f0c04c59e693e487', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '6d9b4a7ab6a468117bb2efa88494b3553862fa9e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '4fed647d59637e56d3f8ee5ecfa8b0ca7fe79b8e' }, "Heel moeilijk"), h("span", { key: '7bf78ac6e98558e6a7f6e48620f3fff910af83e1' }, "Heel makkelijk")), h("div", { key: '76b0ad0bf0d91a200410cc0a28660cf65d175043', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'b5d82b6b382a2c7bc376aabc460e9b9d83e0de0c', type: "submit", class: "dso-secondary" }, h("span", { key: '7bceeca13f9a7f589b32ae456cb1671b30d3e1c0' }, "Antwoord verzenden")))));
+        })), h("button", { key: '0faabc7920e2b36079dc259a59456013a752bfb0', type: "submit", class: "dso-secondary" }, h("span", { key: 'a72c193c90971b95cfdecc2d61ceb5f480f688a1' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -23,7 +23,7 @@ export class Table {
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: 'db1c75206b568297a2b6371a470baf2bd3ac0a0b', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'a2c8226b04cacd8745f4ad3df29dac7f2fff5a40', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption ?? "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
+        return (h(Host, { key: 'c76e43a3d307c5a13aa57d4b328552b62947cb73', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '977e54037c55d351d7d91bab8be937089aaa98ff', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption ?? "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

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

@@ -60,7 +60,7 @@ export class Tabs {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: 'eda4f3cabd4f4a373ebf5e5b2fce9c5a336f4680' }, h("div", { key: '445a0b6a745a1f45eca44ca59def6f4557904748', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'd344d2c68cc0bd6d0abbea591a7ffa22b17dbdf7' })), h("div", { key: 'c17a1774b3cf81c30e07c0c8446f05d8a6e86b95', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'c32d940c2e5fe01b67919d7253bb5d2666146f6f', name: "panel" }))));
+        return (h(Host, { key: 'b9568d7dc32c55b0b54c37b28756274bb57cbacf' }, h("div", { key: '314522c3eba0fb007ce5d214d309ab20a4a9e53c', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '0ea47d9bd541ee8657b5c9be2f24b6f641051c17' })), h("div", { key: 'd7a531a6ee574d7deb3455c3f43d16f40a0faf1b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '65e458b46fcf351079f225fb49336ffcc5dd7982', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tijdreis-banner/tijdreis-banner.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: 'b65c1136049ad6b7918279ca9fa86a121a3a7229' }, h("dso-icon", { key: 'd43d86fe908ab5e18cb8a0c9f0250581df87cd69', icon: "clock-outline" }), h("slot", { key: 'cec5c61d9cb0607709a4c91ff4002096b2b5beca' }), h("slot", { key: '7593a8ee780a5223cfd95e94b89a515e64a96596', name: "button" })));
+        return (h(Fragment, { key: '66e8423f1014107ccb518d0dc3c81930997a65d7' }, h("dso-icon", { key: '39b66a7b7f7ab1f75d3b31793ba1bd40a732ea66', icon: "clock-outline" }), h("slot", { key: '2d0cc6f630dd371fd3f81a8372c38b79bde279ff' }), h("slot", { key: '5044fee1b5aa973c5fda7bbb99679acf44a946bb', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -186,7 +186,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '9a75836090377cb7879137ee38c035fa26cc80bb', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '052ac3644a784807e9ae1f4cdff9768c2c963ea5', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '7fe84463e825db6555683ec5ec67cb3379c5e597', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'f6d16f4d5f3a8cb1bd32df5f1648e70e286210c7', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '75b902c9d43ca01c48973c5043cb55a387c292f6' })))));
+        return (h(Host, { key: '5d392cd8db6f4fcb40ff59caa691a7d5d934a131', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '780a52b475cb6e70de39d0b8504838a12ebec54c', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '563bbf50ff151581d813b9733eabfe399600b6bd', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'a9aef05954ee275aaa14d72ff98aedc4c914127c', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'ffdfb31efc7f3006f9c42c0fe0e45d18698641c6' })))));
     }
     activatePopper() {
         this.hidden = false;

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

@@ -170,7 +170,7 @@ export class TreeView {
         return false;
     }
     render() {
-        return (h("div", { key: 'e90b2994f145f8ac781f67f53e1f65859dce9ef4', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '1f84ee285eb80bbb485c147bbd3f32de2e324e9c', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: '8fa6eac8e8c49987f8d84e3eb5d6a36cca0aa4fc', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '7e985edbbd740375b87cdc4de51acf898ce1a653', role: "tree", "aria-label": "Objectenboom" }, this.collection?.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/components/main-panel.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { clsx } from "clsx";
-export const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
+export const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, printFilterPanel, }) => (h("div", { class: clsx("dso-main-panel", {
         compact: !tabView && documentPanelOpen && !mainPanelExpanded,
         contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,
         expanded: !tabView && documentPanelOpen && mainPanelExpanded,
@@ -9,4 +9,4 @@ export const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpan
         if (e.propertyName === "flex-basis") {
             dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
         }
-    } }, !tabView && documentPanelOpen && (h("div", { class: "toggle-button" }, h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }))));
+    } }, !tabView && documentPanelOpen && (h("div", { class: "toggle-button" }, h("dso-icon-button", { variant: "map", label: `Zoeken paneel ${mainPanelHidden ? "tonen" : "verbergen"}`, icon: mainPanelHidden ? "chevron-right" : "chevron-left", onDsoClick: toggleMainPanel }))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, printFilterPanel, h("slot", { name: "main" }))));

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

@@ -131,13 +131,27 @@ button::-moz-focus-inner {
   z-index: -1;
 }
 
-.map {
+.map-area {
   block-size: 100%;
   inline-size: 100%;
   overflow: hidden;
   position: relative;
 }
 
+.map {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+slot[name=legend] {
+  display: block;
+  position: absolute;
+  inset-block-end: 16px;
+  inset-inline-start: 16px;
+  z-index: 1;
+}
+
 .filter-panel,
 .overlay {
   background-color: #fff;
@@ -160,7 +174,7 @@ button::-moz-focus-inner {
   inline-size: 100%;
   transition: inset-inline-start 200ms ease-in;
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 768px) {
   .filter-panel {
     inline-size: 100vw;
   }
@@ -168,7 +182,7 @@ button::-moz-focus-inner {
     display: none !important;
   }
 }
-@media screen and (min-width: 992px) {
+@media (min-width: 992px) {
   .filter-panel {
     max-inline-size: 380px;
   }
@@ -197,114 +211,114 @@ button::-moz-focus-inner {
 .overlay::backdrop {
   background-color: rgba(0, 0, 0, 0.5);
 }
-@media screen and (max-width: 624px) {
+@media (max-width: 624px) {
   .overlay {
     inline-size: 100vw;
   }
 }
 
-@media screen and (min-width: 1032px) {
-  :host([main-size=small]) .dso-main-panel,
-  :host([document-panel-size=small]) .dso-document-panel {
+@media (min-width: 1032px) {
+  :host(:not([print])[main-size=small]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
     flex-basis: 375px;
     min-inline-size: 0;
     max-inline-size: 375px;
   }
 }
-@media screen and (min-width: 1032px) and (max-width: 375px) {
-  :host([main-size=small]) .dso-main-panel,
-  :host([document-panel-size=small]) .dso-document-panel {
+@media (min-width: 1032px) and (max-width: 375px) {
+  :host(:not([print])[main-size=small]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
     flex-basis: 100vw;
     max-inline-size: 100vw;
     min-inline-size: 0;
     transition: none;
   }
 }
-@media screen and (min-width: 1032px) {
-  :host([main-size=medium]) .dso-main-panel,
-  :host([document-panel-size=medium]) .dso-document-panel {
+@media (min-width: 1032px) {
+  :host(:not([print])[main-size=medium]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
     flex-basis: 624px;
     min-inline-size: 375px;
     max-inline-size: 624px;
   }
 }
-@media screen and (min-width: 1032px) and (max-width: 624px) {
-  :host([main-size=medium]) .dso-main-panel,
-  :host([document-panel-size=medium]) .dso-document-panel {
+@media (min-width: 1032px) and (max-width: 624px) {
+  :host(:not([print])[main-size=medium]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
     flex-basis: 100vw;
     max-inline-size: 100vw;
     min-inline-size: 375px;
     transition: none;
   }
 }
-@media screen and (min-width: 1032px) {
-  :host([main-size=large]) .dso-main-panel,
-  :host([document-panel-size=large]) .dso-document-panel {
+@media (min-width: 1032px) {
+  :host(:not([print])[main-size=large]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=large]) .dso-document-panel {
     flex-basis: 60%;
     min-inline-size: 768px;
     max-inline-size: 1024px;
   }
 }
-@media screen and (min-width: 1032px) and (max-width: 768px) {
-  :host([main-size=large]) .dso-main-panel,
-  :host([document-panel-size=large]) .dso-document-panel {
+@media (min-width: 1032px) and (max-width: 768px) {
+  :host(:not([print])[main-size=large]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=large]) .dso-document-panel {
     flex-basis: 100vw;
     max-inline-size: 100vw;
     min-inline-size: 768px;
     transition: none;
   }
 }
-@media screen and (min-width: 1032px) {
-  :host {
+@media (min-width: 1032px) {
+  :host(:not([print])) {
     display: flex;
     flex-direction: column;
     block-size: 100vh;
     overflow: clip;
     position: relative;
   }
-  :host .dso-main-panel.compact,
-  :host .dso-main-panel.expanded {
+  :host(:not([print])) .dso-main-panel.compact,
+  :host(:not([print])) .dso-main-panel.expanded {
     flex-basis: unset;
     min-inline-size: unset;
     max-inline-size: unset;
     inline-size: 440px;
   }
-  :host .viewer-grid-columns {
+  :host(:not([print])) .viewer-grid-columns {
     display: flex;
     overflow: hidden;
     flex-grow: 1;
   }
-  .dso-main-panel,
-  .dso-document-panel {
+  :host(:not([print])) .dso-main-panel,
+  :host(:not([print])) .dso-document-panel {
     box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
   }
-  .dso-main-panel .content,
-  .dso-document-panel .content {
+  :host(:not([print])) .dso-main-panel .content,
+  :host(:not([print])) .dso-document-panel .content {
     overflow-y: auto;
   }
-  .filter-panel {
+  :host(:not([print])) .filter-panel {
     margin-inline: 0 auto;
     inline-size: calc(100vw - 40px);
   }
-  .filter-panel[open] {
+  :host(:not([print])) .filter-panel[open] {
     border-inline-end: 1px solid #e5e5e5;
   }
-  .overlay {
+  :host(:not([print])) .overlay {
     box-shadow: -2px 0 5px #666;
     margin-inline: auto 0;
   }
 }
-@media screen and (min-width: 1032px) and (max-width: 1031.99px) {
-  :host([filter-panel-open]) .dso-main-panel {
+@media (min-width: 1032px) and (max-width: 1031.99px) {
+  :host(:not([print])[filter-panel-open]) .dso-main-panel {
     margin-inline-start: 380px;
     max-inline-size: calc(100vw - 380px);
   }
-  .filter-panel {
+  :host(:not([print])) .filter-panel {
     inline-size: 380px;
     inset-inline-start: -380px;
   }
 }
-@media screen and (max-width: 1031.99px) {
+@media (max-width: 1031.99px) {
   .dso-navbar {
     min-block-size: 32px;
   }
@@ -327,7 +341,7 @@ button::-moz-focus-inner {
     display: none;
   }
 }
-@media screen and (max-width: 1031.99px) {
+@media (max-width: 1031.99px) {
   .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {
     margin-inline-end: 8rem;
   }
@@ -572,22 +586,101 @@ button::-moz-focus-inner {
   .dso-tertiary {
     font-weight: 300;
   }
-  .overlay {
+  :host(:not([print])) .overlay {
     inline-size: calc(100vw - 32px);
   }
-  .filter-panel,
-  .overlay {
+  :host(:not([print])) .filter-panel,
+  :host(:not([print])) .overlay {
     margin-inline: 0;
     max-inline-size: 100vw;
     inset-block-start: 0;
   }
-  .filter-panel {
+  :host(:not([print])) .filter-panel {
     inset-inline-start: -100vw;
     inline-size: 100vw;
   }
 }
-@media screen and (min-width: 992px) {
-  :host([filter-panel-open]) .dso-main-panel {
+@media (min-width: 992px) {
+  :host(:not([print])[filter-panel-open]) .dso-main-panel {
     margin-inline-start: 380px;
   }
+}
+:host([print]) {
+  display: flex;
+  flex-direction: column;
+  block-size: auto;
+  overflow: visible;
+}
+:host([print]) .viewer-grid-columns {
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+}
+:host([print]) .map-area {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  block-size: auto;
+  overflow: visible;
+  flex-shrink: 0;
+  order: -1;
+}
+:host([print]) .map {
+  flex: 1;
+  min-inline-size: 0;
+  align-self: stretch;
+  min-block-size: 400px;
+  position: relative;
+  inset: auto;
+}
+:host([print]) slot[name=legend] {
+  position: relative;
+  inset: auto;
+  flex-shrink: 0;
+  --_dso-legend-content-max-block-size: none;
+}
+:host([print]) .dso-main-panel {
+  block-size: auto;
+  box-shadow: none;
+  inline-size: 100%;
+  max-inline-size: none;
+  min-inline-size: 0;
+  position: relative;
+  margin-inline-start: 0px;
+}
+:host([print]) .dso-main-panel .content {
+  align-items: flex-start;
+  block-size: auto;
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  overflow-y: visible;
+}
+:host([print]) .dso-main-panel .content slot[name=main] {
+  display: block;
+  flex: 1;
+  min-inline-size: 0;
+}
+:host([print]) .filter-panel {
+  block-size: auto;
+  box-shadow: none;
+  flex-shrink: 0;
+  inline-size: 380px;
+  margin-inline: 0;
+  max-inline-size: none;
+  min-inline-size: 0;
+  position: relative;
+  transition: none;
+}
+:host([print]) .dso-document-panel {
+  block-size: auto;
+  box-shadow: none;
+  inline-size: 100%;
+  max-inline-size: none;
+  min-inline-size: 0;
+  position: static;
+}
+:host([print]) .dso-document-panel .content {
+  block-size: auto;
+  overflow-y: visible;
 }

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

@@ -19,6 +19,7 @@ const minMapElementWidth = 440;
  * @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.
  * @slot main
  * @slot map
+ * @slot legend - Een slot die kan worden gevuld met een legend component.
  * @slot filter-panel
  * @slot overlay
  * @slot document-panel
@@ -38,6 +39,10 @@ export class ViewerGrid {
          * Set to true when document panel should show.
          */
         this.documentPanelOpen = false;
+        /**
+         * Set to true to apply print layout programmatically, e.g. for print preview.
+         */
+        this.print = false;
         /**
          * Size of the panel when component loads.
          *
@@ -134,6 +139,9 @@ export class ViewerGrid {
             });
         }
     }
+    renderFilterPanel() {
+        return (h(FilterPanel, { open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) }));
+    }
     connectedCallback() {
         window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
     }
@@ -155,7 +163,9 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, { key: '107327f469c7793fd1fc1c90b0367936ded7c88a' }, h("slot", { key: 'a6139fd224901aefc82e551f30f38f237168a29d', name: "top-bar" }), h("div", { key: '5c92640e25e5ef42f86bcef3e00b1b521cbd4293', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '9172291d20e7e758fb4e53b054617169602c36e0', class: "dso-navbar" }, h("ul", { key: '40f1a4bdee9491b38799d010053482bd7b48ab99', class: "dso-nav dso-nav-sub" }, viewerGridTabs.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 === "search")) && (h(MainPanel, { key: '306084b98dc9ed3e4400cfd9f6ab30b7cef2a374', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: '425c35dd78e48924d9f61308ac10744d206a9074', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'c9a9d4d612b592bfe5d8d3aa8266a89771a1b4cc', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '162a97b0413668dfe6020a427c0523f8fae87fd6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '678ac7f6c01a58c157c8e9337d2740e00590f0b8', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'c7adca136159a2810210f51c7a09381b38452b29', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: '26216b09a538c9527b0fb3c58d23924823664819' }, h("slot", { key: 'afe7a843a065fc8ac415cf94da9e11ca92820f3a', name: "top-bar" }), h("div", { key: 'c9f2ac9868069fa3a90c5b4c9fa25959085d94b4', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'ac1389f48e0618fcc213ccb14371cc31ab53f8ab', class: "dso-navbar" }, h("ul", { key: '30af55082ca83de47cf5ffeec1bd4670594d8773', class: "dso-nav dso-nav-sub" }, viewerGridTabs.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 === "search") || this.print) && (h(MainPanel, { key: 'cba32eb46e34c894e303dd4fdf85c1079249d562', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: '44c4697c437a2ccf61a570c40f349f99bbd9baf5', class: "map-area" }, h("div", { key: 'e10b51a4a8e96b8b0417f2351134ec3de7a1641d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'd240e2e04ccd05dbd1314ee4c04a8af1bc4076a3', name: "map" })), h("slot", { key: '6ae2b90c8d7fe7f68d4a4eb9bd01c6054659f8de', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
+            (this.tabView && this.activeTab === "document") ||
+            this.print) && (h(DocumentPanel, { key: 'fb9680a12c8a9d29627af0583bfc7f5157448619', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e92e5a979b4529ae948c4c3d47af3fa40a0460f4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -250,6 +260,26 @@ export class ViewerGrid {
                 "attribute": "document-panel-open",
                 "defaultValue": "false"
             },
+            "print": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to apply print layout programmatically, e.g. for print preview."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "print",
+                "defaultValue": "false"
+            },
             "mainSize": {
                 "type": "string",
                 "mutable": false,

package/dist/components/button-group.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as o,forceUpdate as r,h as n,transformTag as d}from"@stencil/core/internal/client";import{c as e}from"./clsx.js";const s=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.direction="row"}connectedCallback(){this.mutationObserver=new MutationObserver((()=>{r(this)})),this.mutationObserver.observe(this.host,{childList:!0,attributes:!0})}disconnectedCallback(){this.mutationObserver?.disconnect()}get hasMapButton(){const t=null!==this.host.querySelector(":scope > dso-icon-button[variant='map']"),o=null!==this.host.querySelector(":scope > .dso-map");return t||o}render(){return n("div",{key:"0cd0a65e9b4ed512a7f51248628b5729e591e5a9",class:e("container",{"has-map-buttons":this.hasMapButton}),role:"group"},n("slot",{key:"529bd12bf8558e3d8f0a7d76bb49c9c0200714ed"}))}get host(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px;--_dt-icon-button-map-box-shadow:0}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-end-start-radius:0}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-start-end-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-inline-end-width:0}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-start-end-radius:0}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-end-start-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-block-end-width:0}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}"}},[257,"dso-button-group",{direction:[513]}]);function i(){"undefined"!=typeof customElements&&["dso-button-group"].forEach((t=>{"dso-button-group"===t&&(customElements.get(d(t))||customElements.define(d(t),s))}))}export{s as B,i as d}
+import{proxyCustomElement as t,HTMLElement as o,forceUpdate as r,h as n,transformTag as e}from"@stencil/core/internal/client";import{c as d}from"./clsx.js";const s=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.direction="row"}connectedCallback(){this.mutationObserver=new MutationObserver((()=>{r(this)})),this.mutationObserver.observe(this.host,{childList:!0,attributes:!0})}disconnectedCallback(){this.mutationObserver?.disconnect()}get hasMapButton(){const t=null!==this.host.querySelector(":scope > dso-icon-button[variant='map']"),o=null!==this.host.querySelector(":scope > .dso-map");return t||o}render(){return n("div",{key:"17449365a1695edc203f63523e1fefdbeeabb38b",class:d("container",{"has-map-buttons":this.hasMapButton}),role:"group"},n("slot",{key:"2896d199e2064cc340ade13c0adeb6b3cda89452"}))}get host(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px;--_dt-icon-button-map-box-shadow:0}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-end-start-radius:0}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-start-end-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-inline-end-width:0}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-start-end-radius:0}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-end-start-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-block-end-width:0}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}"}},[257,"dso-button-group",{direction:[513]}]);function i(){"undefined"!=typeof customElements&&["dso-button-group"].forEach((t=>{"dso-button-group"===t&&(customElements.get(e(t))||customElements.define(e(t),s))}))}export{s as B,i as d}