@dso-toolkit/core 59.0.0 → 60.0.0

package/dist/collection/components/tooltip/tooltip.css

@@ -3,19 +3,19 @@
 }
 
 :host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow {
-  margin-left: 3px;
+  margin-inline-start: 3px;
 }
 :host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 :host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow {
-  margin-left: 3px;
+  margin-inline-start: 3px;
 }
 :host-context(dso-toggletip) *[data-popper-placement=left] {
-  margin-right: -8px !important;
+  margin-inline-end: -8px !important;
 }
 :host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 *,
@@ -59,7 +59,8 @@
   display: inline-block;
   font-size: 1rem;
   max-width: 640px;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   position: relative;
 }
 .tooltip .tooltip-inner.dso-small {
@@ -72,42 +73,50 @@
   width: 0;
 }
 .tooltip[data-popper-placement=top] {
-  margin-top: -3px;
-  padding: 6px 0;
+  margin-block-start: -3px;
+  padding-block: 6px;
+  padding-inline: 0;
 }
 .tooltip[data-popper-placement=top] .tooltip-arrow {
-  border-top-color: #fff;
-  border-width: 6px 6px 0;
   bottom: 0;
-  margin-left: -3px;
+  border-block-start-color: #fff;
+  border-width: 6px;
+  border-block-end-width: 0;
+  margin-inline-start: -3px;
 }
 .tooltip[data-popper-placement=right] {
-  margin-left: 3px;
-  padding: 0 6px;
+  margin-inline-start: 3px;
+  padding-block: 0;
+  padding-inline: 6px;
 }
 .tooltip[data-popper-placement=right] .tooltip-arrow {
-  border-right-color: #fff;
-  border-width: 6px 6px 6px 0;
   left: 0;
-  margin-top: -3px;
+  border-inline-end-color: #fff;
+  border-width: 6px;
+  border-inline-start-width: 0;
+  margin-block-start: -3px;
 }
 .tooltip[data-popper-placement=bottom] {
-  margin-top: 3px;
-  padding: 6px 0;
+  margin-block-start: 3px;
+  padding-block: 6px;
+  padding-inline: 0;
 }
 .tooltip[data-popper-placement=bottom] .tooltip-arrow {
-  border-bottom-color: #fff;
-  border-width: 0 6px 6px;
   top: 0;
-  margin-left: -3px;
+  border-block-end-color: #fff;
+  border-width: 6px;
+  border-block-start-width: 0;
+  margin-inline-start: -3px;
 }
 .tooltip[data-popper-placement=left] {
-  margin-left: -3px;
-  padding: 0 6px;
+  margin-inline-start: -3px;
+  padding-block: 0;
+  padding-inline: 6px;
 }
 .tooltip[data-popper-placement=left] .tooltip-arrow {
-  border-left-color: #fff;
-  border-width: 6px 0 6px 6px;
   right: 0;
-  margin-top: -3px;
+  border-inline-start-color: #fff;
+  border-width: 6px;
+  border-inline-end-width: 0;
+  margin-block-start: -3px;
 }

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

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import { viewerGridSizeLabelMap, } from "../viewer-grid.interfaces";
+export const DocumentPanel = ({ tabView, panelSize, shrinkDocumentPanel, expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd, }) => (h("div", { class: "dso-document-panel", onTransitionEnd: (e) => {
+    if (e.propertyName === "flex-basis") {
+      dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });
+    }
+  } }, !tabView && (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte documentpaneel: ", viewerGridSizeLabelMap[panelSize]), panelSize !== "small" && (h("button", { type: "button", class: "shrink", onClick: shrinkDocumentPanel }, h("span", { class: "sr-only" }, "Documentpaneel smaller maken"), h("dso-icon", { icon: "chevron-right" }))), panelSize !== "large" && (h("button", { type: "button", class: "expand", onClick: expandDocumentPanel }, h("span", { class: "sr-only" }, "Documentpaneel breder maken"), h("dso-icon", { icon: "chevron-left" }))))), h("div", { class: "content" }, h("slot", { name: "document-panel" }))));
+//# sourceMappingURL=document-panel.js.map

package/dist/collection/components/viewer-grid/components/document-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/document-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAGL,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AAUnC,MAAM,CAAC,MAAM,aAAa,GAAsD,CAAC,EAC/E,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,sCAAsC,GACvC,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAC,oBAAoB,EAC1B,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;IACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;MACnC,sCAAsC,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;KACzE;EACH,CAAC;EAEA,CAAC,OAAO,IAAI,CACX,WAAK,KAAK,EAAC,gBAAgB;IACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;MAChC,sBAAsB,CAAC,SAAS,CAAC,CACrD;IACN,SAAS,KAAK,OAAO,IAAI,CACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,mBAAmB;MAC/D,YAAM,KAAK,EAAC,SAAS,mCAAoC;MACzD,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACV;IACA,SAAS,KAAK,OAAO,IAAI,CACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,mBAAmB;MAC/D,YAAM,KAAK,EAAC,SAAS,kCAAmC;MACxD,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC,CACV,CACG,CACP;EACD,WAAK,KAAK,EAAC,SAAS;IAClB,YAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <div class=\"sizing-buttons\">\r\n        <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n          Breedte documentpaneel: {viewerGridSizeLabelMap[panelSize]}\r\n        </span>\r\n        {panelSize !== \"small\" && (\r\n          <button type=\"button\" class=\"shrink\" onClick={shrinkDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        )}\r\n        {panelSize !== \"large\" && (\r\n          <button type=\"button\" class=\"expand\" onClick={expandDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n        )}\r\n      </div>\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n"]}

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

@@ -1,3 +1,4 @@
+export { DocumentPanel } from "./document-panel";
 export { Filterpanel } from "./filterpanel";
 export { MainPanel } from "./main-panel";
 export { Overlay } from "./overlay";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { Filterpanel } from \"./filterpanel\";\r\nexport { MainPanel } from \"./main-panel\";\r\nexport { Overlay } from \"./overlay\";\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { DocumentPanel } from \"./document-panel\";\r\nexport { Filterpanel } from \"./filterpanel\";\r\nexport { MainPanel } from \"./main-panel\";\r\nexport { Overlay } from \"./overlay\";\r\n"]}

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

@@ -1,10 +1,14 @@
 import { h } from "@stencil/core";
-export const MainPanel = ({ ref, tabView, mainSize, shrinkMain, expandMain, }) => {
-  const sizeLabelMap = {
-    small: "smal",
-    medium: "middel",
-    large: "breed",
-  };
-  return (h("div", { class: "dso-main-panel", ref: ref }, !tabView && (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte hoofdpaneel: ", sizeLabelMap[mainSize]), h("button", { type: "button", class: "shrink", disabled: mainSize === "small", onClick: shrinkMain }, h("span", { class: "sr-only" }, "Hoofdpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: mainSize === "large", onClick: expandMain }, h("span", { class: "sr-only" }, "Hoofdpaneel breder maken"), h("dso-icon", { icon: "chevron-right" })))), h("div", { class: "main" }, h("slot", { name: "main" }))));
-};
+import clsx from "clsx";
+import { viewerGridSizeLabelMap, } from "../viewer-grid.interfaces";
+export const MainPanel = ({ mode, tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, shrinkMain, expandMain, expandContent, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
+    compact: !tabView && documentPanelOpen && !mainPanelExpanded,
+    expanded: !tabView && documentPanelOpen && mainPanelExpanded,
+    collapsed: mainPanelHidden,
+  }), onTransitionEnd: (e) => {
+    if (e.propertyName === "flex-basis") {
+      dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
+    }
+  } }, !tabView &&
+  (!documentPanelOpen ? (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte ", mode === "vdk" ? "zoeken paneel" : "hoofdpaneel", ": ", viewerGridSizeLabelMap[mainSize]), mainSize !== "small" && (h("button", { type: "button", class: "shrink", onClick: shrinkMain }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " smaller maken"), h("dso-icon", { icon: "chevron-left" }))), mainSize !== "large" && (h("button", { type: "button", class: "expand", onClick: expandMain }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " breder maken"), h("dso-icon", { icon: "chevron-right" }))))) : (h("div", { class: "toggle-button" }, h("button", { type: "button", onClick: toggleMainPanel }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " ", mainPanelHidden ? "Tonen" : "Verbergen"), h("dso-icon", { icon: mainPanelHidden ? "chevron-right" : "chevron-left" }))))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }), !tabView && documentPanelOpen && (h("button", { class: "dso-tertiary expand-button", onClick: expandContent }, h("dso-icon", { icon: mainPanelExpanded ? "chevron-up" : "chevron-down" }), h("span", null, mainPanelExpanded ? "Verberg" : "Toon", " documenten op gekozen locatie"))), documentPanelOpen && mainPanelExpanded && h("slot", { name: "main-expanded" }))));
 //# sourceMappingURL=main-panel.js.map

package/dist/collection/components/viewer-grid/components/main-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"main-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/main-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,CAAC,MAAM,SAAS,GAAkD,CAAC,EACvE,GAAG,EACH,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE,EAAE;EACH,MAAM,YAAY,GAAiB;IACjC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;GACf,CAAC;EAEF,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,GAAG;IACjC,CAAC,OAAO,IAAI,CACX,WAAK,KAAK,EAAC,gBAAgB;MACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;QACnC,YAAY,CAAC,QAAQ,CAAC,CACvC;MACP,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,EAAE,OAAO,EAAE,UAAU;QACtF,YAAM,KAAK,EAAC,SAAS,gCAAiC;QACtD,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC;MACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,EAAE,OAAO,EAAE,UAAU;QACtF,YAAM,KAAK,EAAC,SAAS,+BAAgC;QACrD,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACL,CACP;IACD,WAAK,KAAK,EAAC,MAAM;MACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { LabelSizeMap, MainSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  ref: ((element: HTMLDivElement | undefined) => void) | undefined;\r\n  tabView: boolean;\r\n  mainSize: MainSize;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  ref,\r\n  tabView,\r\n  mainSize,\r\n  shrinkMain,\r\n  expandMain,\r\n}) => {\r\n  const sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  return (\r\n    <div class=\"dso-main-panel\" ref={ref}>\r\n      {!tabView && (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte hoofdpaneel: {sizeLabelMap[mainSize]}\r\n          </span>\r\n          <button type=\"button\" class=\"shrink\" disabled={mainSize === \"small\"} onClick={shrinkMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n          <button type=\"button\" class=\"expand\" disabled={mainSize === \"large\"} onClick={expandMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        </div>\r\n      )}\r\n      <div class=\"main\">\r\n        <slot name=\"main\" />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"main-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/main-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridMode,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  mode: ViewerGridMode;\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n  expandContent: () => void;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  mode,\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  shrinkMain,\r\n  expandMain,\r\n  expandContent,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView &&\r\n      (!documentPanelOpen ? (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte {mode === \"vdk\" ? \"zoeken paneel\" : \"hoofdpaneel\"}: {viewerGridSizeLabelMap[mainSize]}\r\n          </span>\r\n          {mainSize !== \"small\" && (\r\n            <button type=\"button\" class=\"shrink\" onClick={shrinkMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n          )}\r\n          {mainSize !== \"large\" && (\r\n            <button type=\"button\" class=\"expand\" onClick={expandMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </div>\r\n      ) : (\r\n        <div class=\"toggle-button\">\r\n          <button type=\"button\" onClick={toggleMainPanel}>\r\n            <span class=\"sr-only\">\r\n              {mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} {mainPanelHidden ? \"Tonen\" : \"Verbergen\"}\r\n            </span>\r\n            <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n          </button>\r\n        </div>\r\n      ))}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n      {!tabView && documentPanelOpen && (\r\n        <button class=\"dso-tertiary expand-button\" onClick={expandContent}>\r\n          <dso-icon icon={mainPanelExpanded ? \"chevron-up\" : \"chevron-down\"}></dso-icon>\r\n          <span>{mainPanelExpanded ? \"Verberg\" : \"Toon\"} documenten op gekozen locatie</span>\r\n        </button>\r\n      )}\r\n      {documentPanelOpen && mainPanelExpanded && <slot name=\"main-expanded\" />}\r\n    </div>\r\n  </div>\r\n);\r\n"]}

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

@@ -4,6 +4,12 @@
   box-sizing: border-box;
 }
 
+:host([mode=vdk]) .overlay {
+  height: calc(100% - 32px);
+  margin-block: 16px;
+  margin-inline: auto 16px;
+}
+
 button {
   -webkit-appearance: button;
   color: inherit;
@@ -198,11 +204,6 @@ button::-moz-focus-inner {
 .overlay-close-button:hover {
   cursor: pointer;
 }
-.shrink[disabled],
-.expand[disabled],
-.overlay-close-button[disabled] {
-  display: none;
-}
 
 .overlay-close-button {
   position: absolute;
@@ -210,6 +211,16 @@ button::-moz-focus-inner {
   right: 16px;
 }
 
+.content.invisible {
+  visibility: hidden;
+}
+
+.dso-main-panel .content,
+.dso-document-panel .content {
+  height: 100%;
+  padding: 0 16px 8px;
+}
+
 .dso-main-panel {
   background-color: #fff;
   flex-shrink: 0;
@@ -218,26 +229,158 @@ button::-moz-focus-inner {
   transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;
   z-index: 100;
 }
+.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {
+  left: -432px;
+}
+.dso-main-panel.compact {
+  flex-shrink: unset;
+  flex-grow: unset;
+  position: absolute;
+  transition: none;
+}
+.dso-main-panel.expanded.collapsed {
+  position: absolute;
+  height: 100%;
+}
 .dso-main-panel .dso-filterblok-address {
   font-weight: bold;
   margin: 8px 0;
 }
-.dso-main-panel .main {
-  height: 100%;
-  padding: 0 16px 8px;
+.dso-main-panel .sizing-buttons,
+.dso-main-panel .toggle-button {
+  left: calc(100% + 1px);
+  transition: left 200ms ease-in;
+  padding: 0 4px 4px 0;
+}
+.dso-main-panel .sizing-buttons button,
+.dso-main-panel .toggle-button button {
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.dso-main-panel .expand-button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+  padding-block: 16px;
+}
+.dso-main-panel .expand-button:focus, .dso-main-panel .expand-button:focus-visible {
+  outline-offset: 2px;
+}
+.dso-main-panel .expand-button:active {
+  outline: 0;
+}
+.dso-main-panel .expand-button[disabled] {
+  color: #afcf9d;
+}
+.dso-main-panel .expand-button[disabled].dso-spinner-left, .dso-main-panel .expand-button[disabled].dso-spinner-right {
+  color: #39870c;
+}
+.dso-main-panel .expand-button:not([disabled]):hover {
+  color: #275937;
+  text-decoration: underline;
+  text-underline-position: under;
+}
+.dso-main-panel .expand-button:not([disabled]):active {
+  color: #173521;
+}
+.dso-main-panel .expand-button.dso-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+.dso-main-panel .expand-button.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dso-main-panel .expand-button.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-right: 8px;
+}
+.dso-main-panel .expand-button.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-left: 8px;
+}
+.dso-main-panel .expand-button dso-icon + span:not(.sr-only),
+.dso-main-panel .expand-button svg.di + span:not(.sr-only),
+.dso-main-panel .expand-button span:not(.sr-only) + dso-icon,
+.dso-main-panel .expand-button span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+.dso-main-panel .expand-button svg.di.di-chevron-down + span:not(.sr-only),
+.dso-main-panel .expand-button svg.di.di-chevron-up + span:not(.sr-only),
+.dso-main-panel .expand-button span:not(.sr-only) + svg.di.di-chevron-down,
+.dso-main-panel .expand-button span:not(.sr-only) + svg.di.di-chevron-up {
+  margin-left: 4px;
+}
+.dso-main-panel .expand-button dso-icon[icon=chevron-left] + span:not(.sr-only),
+.dso-main-panel .expand-button dso-icon[icon=chevron-right] + span:not(.sr-only),
+.dso-main-panel .expand-button svg.di.di-angle-down + span:not(.sr-only),
+.dso-main-panel .expand-button svg.di.di-angle-up + span:not(.sr-only),
+.dso-main-panel .expand-button span:not(.sr-only) + svg.di.di-angle-down,
+.dso-main-panel .expand-button span:not(.sr-only) + svg.di.di-angle-up,
+.dso-main-panel .expand-button span:not(.sr-only) + dso-icon[icon=chevron-left],
+.dso-main-panel .expand-button span:not(.sr-only) + dso-icon[icon=chevron-right] {
+  margin-left: 0;
+}
+.dso-main-panel .expand-button dso-icon,
+.dso-main-panel .expand-button svg.di,
+.dso-main-panel .expand-button span {
+  vertical-align: middle;
 }
 
-.sizing-buttons {
-  left: calc(100% + 1px);
+.dso-document-panel {
+  background-color: #fff;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;
+  z-index: 100;
+}
+.dso-document-panel .sizing-buttons {
+  right: calc(100% + 1px);
+  transition: right 200ms ease-in;
+  padding: 0 0 4px 4px;
+}
+.dso-document-panel .sizing-buttons button {
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.sizing-buttons,
+.toggle-button {
   overflow-x: hidden;
-  padding: 0 4px 4px 0;
   position: absolute;
   top: 16px;
-  transition: left 200ms ease-in;
   width: 44px;
   z-index: -1;
 }
-.sizing-buttons button {
+.sizing-buttons button,
+.toggle-button button {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
@@ -259,52 +402,66 @@ button::-moz-focus-inner {
   border: 0;
   padding: 8px;
   border-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
   flex: 0 0 100%;
   height: 40px;
   min-width: auto;
   width: 40px;
 }
-.sizing-buttons button:focus, .sizing-buttons button:focus-visible {
+.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 {
+.sizing-buttons button:active,
+.toggle-button button:active {
   outline: 0;
 }
-.sizing-buttons button:hover {
+.sizing-buttons button:hover,
+.toggle-button button:hover {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
 }
-.sizing-buttons button:active {
+.sizing-buttons button:active,
+.toggle-button button:active {
   background-color: #275937;
   border-color: #275937;
   color: #fff;
 }
-.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {
+.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,
+.toggle-button button[disabled],
+.toggle-button button[disabled]:hover {
   background-color: #fff;
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.sizing-buttons button.dso-small {
+.sizing-buttons button.dso-small,
+.toggle-button button.dso-small {
   line-height: 1rem;
 }
 .sizing-buttons button.dso-small dso-icon,
-.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before {
+.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,
+.toggle-button button.dso-small dso-icon,
+.toggle-button button.dso-small svg.di,
+.toggle-button button.dso-small.extern::after,
+.toggle-button button.dso-small.download::after,
+.toggle-button button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.sizing-buttons button.dso-small.dso-spinner-left::before {
+.sizing-buttons button.dso-small.dso-spinner-left::before,
+.toggle-button button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.sizing-buttons button.dso-small.dso-spinner-right::after {
+.sizing-buttons button.dso-small.dso-spinner-right::after,
+.toggle-button button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
-.sizing-buttons button > span {
+.sizing-buttons button > span,
+.toggle-button button > span {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -314,12 +471,15 @@ button::-moz-focus-inner {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
-.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {
+.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],
+.toggle-button button.dso-spinner-left[disabled],
+.toggle-button button.dso-spinner-right[disabled] {
   background-color: #fff;
   border-color: #39870c;
   color: #39870c;
 }
-.sizing-buttons button.dso-spinner-left::before {
+.sizing-buttons button.dso-spinner-left::before,
+.toggle-button button.dso-spinner-left::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -329,7 +489,8 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {
+.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,
+.toggle-button button.dso-spinner-left:not([disabled]):hover::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -339,11 +500,13 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {
+.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,
+.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
-.sizing-buttons button.dso-spinner-right::after {
+.sizing-buttons button.dso-spinner-right::after,
+.toggle-button button.dso-spinner-right::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -353,7 +516,8 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {
+.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,
+.toggle-button button.dso-spinner-right:not([disabled]):hover::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
   content: "";
@@ -363,17 +527,20 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {
+.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,
+.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
-.sizing-buttons button:focus-visible {
+.sizing-buttons button:focus-visible,
+.toggle-button button:focus-visible {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
   outline: none;
 }
-.sizing-buttons button:hover dso-icon {
+.sizing-buttons button:hover dso-icon,
+.toggle-button button:hover dso-icon {
   color: #fff;
 }
 
@@ -677,20 +844,16 @@ button::-moz-focus-inner {
 }
 
 @media screen and (min-width: 808px) {
-  :host {
-    display: flex;
-    height: 100vh;
-    overflow: hidden;
-    position: relative;
-  }
-  :host([small]) .dso-main-panel {
+  :host([main-size=small]) .dso-main-panel,
+  :host([document-panel-size=small]) .dso-document-panel {
     flex-basis: 375px;
     min-width: 0;
     max-width: 375px;
   }
 }
 @media screen and (min-width: 808px) and (max-width: 375px) {
-  :host([small]) .dso-main-panel {
+  :host([main-size=small]) .dso-main-panel,
+  :host([document-panel-size=small]) .dso-document-panel {
     flex-basis: 100vw;
     max-width: 100vw;
     min-width: 0;
@@ -698,14 +861,16 @@ button::-moz-focus-inner {
   }
 }
 @media screen and (min-width: 808px) {
-  :host([medium]) .dso-main-panel {
+  :host([main-size=medium]) .dso-main-panel,
+  :host([document-panel-size=medium]) .dso-document-panel {
     flex-basis: 624px;
     min-width: 375px;
     max-width: 624px;
   }
 }
 @media screen and (min-width: 808px) and (max-width: 624px) {
-  :host([medium]) .dso-main-panel {
+  :host([main-size=medium]) .dso-main-panel,
+  :host([document-panel-size=medium]) .dso-document-panel {
     flex-basis: 100vw;
     max-width: 100vw;
     min-width: 375px;
@@ -713,14 +878,16 @@ button::-moz-focus-inner {
   }
 }
 @media screen and (min-width: 808px) {
-  :host([large]) .dso-main-panel {
+  :host([main-size=large]) .dso-main-panel,
+  :host([document-panel-size=large]) .dso-document-panel {
     flex-basis: 60%;
     min-width: 768px;
     max-width: 1024px;
   }
 }
 @media screen and (min-width: 808px) and (max-width: 768px) {
-  :host([large]) .dso-main-panel {
+  :host([main-size=large]) .dso-main-panel,
+  :host([document-panel-size=large]) .dso-document-panel {
     flex-basis: 100vw;
     max-width: 100vw;
     min-width: 768px;
@@ -728,11 +895,33 @@ button::-moz-focus-inner {
   }
 }
 @media screen and (min-width: 808px) {
-  .dso-main-panel {
+  :host {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+  }
+  :host .dso-main-panel.compact,
+  :host .dso-main-panel.expanded {
+    flex-basis: unset;
+    min-width: unset;
+    max-width: unset;
+    width: 440px;
+  }
+  :host .dso-main-panel.compact .content,
+  :host .dso-main-panel.expanded .content {
+    height: auto;
+    overflow-y: auto;
+  }
+}
+@media screen and (min-width: 808px) {
+  .dso-main-panel,
+  .dso-document-panel {
     box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
     padding-right: 8px;
   }
-  .dso-main-panel .main {
+  .dso-main-panel .content,
+  .dso-document-panel .content {
     overflow-y: scroll;
   }
 }