@dso-toolkit/core 97.0.0 → 97.1.0

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;
@@ -204,16 +218,16 @@ button::-moz-focus-inner {
 }
 
 @media screen and (min-width: 1032px) {
-  :host([main-size=small]) .dso-main-panel,
-  :host([document-panel-size=small]) .dso-document-panel {
+  :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 {
+  :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;
@@ -221,16 +235,16 @@ button::-moz-focus-inner {
   }
 }
 @media screen and (min-width: 1032px) {
-  :host([main-size=medium]) .dso-main-panel,
-  :host([document-panel-size=medium]) .dso-document-panel {
+  :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 {
+  :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;
@@ -238,16 +252,16 @@ button::-moz-focus-inner {
   }
 }
 @media screen and (min-width: 1032px) {
-  :host([main-size=large]) .dso-main-panel,
-  :host([document-panel-size=large]) .dso-document-panel {
+  :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 {
+  :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;
@@ -255,51 +269,50 @@ button::-moz-focus-inner {
   }
 }
 @media screen and (min-width: 1032px) {
-  :host {
+  :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 {
+  :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;
   }
@@ -572,22 +585,101 @@ button::-moz-focus-inner {
   .dso-tertiary {
     font-weight: 300;
   }
-  .overlay {
+  :host(:not([print])) .overlay {
     inline-size: calc(100vw - 32px);
   }
-  .filter-panel,
-  .overlay {
-    margin-inline: 0;
+  :host(:not([print])) .filter-panel,
+  :host(:not([print])) .overlay {
     max-inline-size: 100vw;
     inset-block-start: 0;
   }
-  .filter-panel {
+  :host(:not([print])) .filter-panel {
+    margin-inline: 0;
     inset-inline-start: -100vw;
     inline-size: 100vw;
   }
 }
 @media screen and (min-width: 992px) {
-  :host([filter-panel-open]) .dso-main-panel {
+  :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: 'c8163259cf270ae725e6d2b22a5dc01d51b0854e' }, h("slot", { key: '5d86a61c909831bf802c141790c8a868659dafd6', name: "top-bar" }), h("div", { key: 'b6abfe50bb21765df784b402682a5073d7100786', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '20ef38287a6a2d11cdada6cf3410dfe433542334', class: "dso-navbar" }, h("ul", { key: '3adb88046f1b4d10c38358bbbbe8ce3a53b9637c', 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: 'e4679845397b45fed3eac3838f87cc87b0e82198', 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: '3d3c8a80b76e0e5e86a336ecbdc31717b38f199c', 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: '10693e3cea48121e69805a61a6474017c0aa7cd3', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '37f734161cff35cd68490b36aebb05266e48f268', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '672ea01b4072bcbf97c572f7bd1edf1d2c9a7a5e', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '984a1885bb942e05443ef43a5c5fab54c32bc4b3', 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,