@dso-toolkit/core 79.0.1 → 80.0.0

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,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,IAAI,MAAM,MAAM,CAAC;AAcxB,MAAM,CAAC,MAAM,SAAS,GAAkD,CAAC,EACvE,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,6BAA6B,GAC9B,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;QAC5B,OAAO,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAAC,iBAAiB;QAC5D,UAAU,EAAE,CAAC,OAAO,IAAI,CAAC,iBAAiB,IAAI,CAAC,iBAAiB;QAChE,QAAQ,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,iBAAiB;QAC5D,SAAS,EAAE,eAAe;KAC3B,CAAC,EACF,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE,CAAC;YACpC,6BAA6B,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IAEA,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAChC,WAAK,KAAK,EAAC,eAAe;QACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,eAAe;YAC5C,YAAM,KAAK,EAAC,SAAS;;gBAAgB,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAQ;YACpF,gBAAU,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAa,CACxE,CACL,CACP;IACD,WAAK,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;QACzD,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\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      contracted: !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 && documentPanelOpen && (\r\n      <div class=\"toggle-button\">\r\n        <button type=\"button\" onClick={toggleMainPanel}>\r\n          <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</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    </div>\r\n  </div>\r\n);\r\n"]}
+{"version":3,"file":"main-panel.js","sourceRoot":"","sources":["../../../../../src/components/viewer-grid/components/main-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,IAAI,MAAM,MAAM,CAAC;AAcxB,MAAM,CAAC,MAAM,SAAS,GAAkD,CAAC,EACvE,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,6BAA6B,GAC9B,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;QAC5B,OAAO,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAAC,iBAAiB;QAC5D,UAAU,EAAE,CAAC,OAAO,IAAI,CAAC,iBAAiB,IAAI,CAAC,iBAAiB;QAChE,QAAQ,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,iBAAiB;QAC5D,SAAS,EAAE,eAAe;KAC3B,CAAC,EACF,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE,CAAC;YACpC,6BAA6B,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IAEA,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAChC,WAAK,KAAK,EAAC,eAAe;QACxB,uBACE,OAAO,EAAC,KAAK,EACb,KAAK,EAAE,iBAAiB,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,EACjE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,EACxD,UAAU,EAAE,eAAe,GACV,CACf,CACP;IACD,WAAK,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;QACzD,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\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      contracted: !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 && documentPanelOpen && (\r\n      <div class=\"toggle-button\">\r\n        <dso-icon-button\r\n          variant=\"map\"\r\n          label={`Zoeken paneel ${mainPanelHidden ? \"tonen\" : \"verbergen\"}`}\r\n          icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}\r\n          onDsoClick={toggleMainPanel}\r\n        ></dso-icon-button>\r\n      </div>\r\n    )}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n    </div>\r\n  </div>\r\n);\r\n"]}

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

@@ -2,5 +2,5 @@ import { h } from "@stencil/core";
 export const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", ref: ref, onCancel: (e) => {
         e.preventDefault();
         dsoCloseOverlay(e);
-    } }, h("button", { type: "button", class: "overlay-close-button", onClick: dsoCloseOverlay }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" })));
+    } }, h("dso-icon-button", { class: "overlay-close-button", icon: "times", variant: "tertiary", label: "Sluiten", onDsoClick: dsoCloseOverlay }), h("slot", { name: "overlay" })));
 //# sourceMappingURL=overlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../../../../src/components/viewer-grid/components/overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,OAAO,GAAgD,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAChG,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,eAAe,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,eAAe;QACzE,gBAAU,IAAI,EAAC,OAAO,GAAY;QAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B;IACT,YAAM,IAAI,EAAC,SAAS,GAAG,CAChB,CACV,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n"]}
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../../../../src/components/viewer-grid/components/overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,OAAO,GAAgD,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAChG,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QACd,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,eAAe,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,uBACE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,EACf,UAAU,EAAE,eAAe,GAC3B;IACF,YAAM,IAAI,EAAC,SAAS,GAAG,CAChB,CACV,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <dso-icon-button\r\n      class=\"overlay-close-button\"\r\n      icon=\"times\"\r\n      variant=\"tertiary\"\r\n      label=\"Sluiten\"\r\n      onDsoClick={dsoCloseOverlay}\r\n    />\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n"]}

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { viewerGridSizeLabelMap } from "../viewer-grid.interfaces";
-const SizingButton = ({ className, onClick, label, icon }) => (h("button", { type: "button", class: className, onClick: onClick }, h("span", { class: "sr-only" }, label), h("dso-icon", { icon: icon })));
+const SizingButton = ({ className, onClick, label, icon }) => (h("dso-icon-button", { variant: "map", class: className, onDsoClick: onClick, icon: icon, label: label }));
 export const SizingButtons = ({ shrink, expand, size, panelLabel, placement, }) => {
     const buttons = [];
     if (size !== "small") {

package/dist/collection/components/viewer-grid/components/sizing-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizing-buttons.js","sourceRoot":"","sources":["../../../../../src/components/viewer-grid/components/sizing-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAuB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AASxF,MAAM,YAAY,GAA0C,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACnG,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO;IACtD,YAAM,KAAK,EAAC,SAAS,IAAE,KAAK,CAAQ;IACpC,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC1B,CACV,CAAC;AAUF,MAAM,CAAC,MAAM,aAAa,GAA2C,CAAC,EACpE,MAAM,EACN,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,OAAO,CAAC,IAAI,CACV,EAAC,YAAY,IACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,GAAG,UAAU,gBAAgB,EACpC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,EAC9D,SAAS,EAAC,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC;IAED,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,OAAO,CAAC,IAAI,CACV,EAAC,YAAY,IACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,GAAG,UAAU,eAAe,EACnC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAC9D,SAAS,EAAC,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;QACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;YAChD,UAAU,CAAC,iBAAiB,EAAE;;YAAI,sBAAsB,CAAC,IAAI,CAAC,CAClE;QACN,OAAO,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n  className: string;\r\n  onClick: any;\r\n  label: string;\r\n  icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n  <button type=\"button\" class={className} onClick={onClick}>\r\n    <span class=\"sr-only\">{label}</span>\r\n    <dso-icon icon={icon}></dso-icon>\r\n  </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n  panelLabel: string;\r\n  size: ViewerGridPanelSize;\r\n  expand: () => void;\r\n  shrink: () => void;\r\n  placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n  shrink,\r\n  expand,\r\n  size,\r\n  panelLabel,\r\n  placement,\r\n}) => {\r\n  const buttons = [];\r\n\r\n  if (size !== \"small\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={shrink}\r\n        label={`${panelLabel} smaller maken`}\r\n        icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n        className=\"shrink\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  if (size !== \"large\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={expand}\r\n        label={`${panelLabel} breder maken`}\r\n        icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n        className=\"expand\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div class=\"sizing-buttons\">\r\n      <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n      </span>\r\n      {buttons}\r\n    </div>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"sizing-buttons.js","sourceRoot":"","sources":["../../../../../src/components/viewer-grid/components/sizing-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAuB,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AASxF,MAAM,YAAY,GAA0C,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACnG,uBAAiB,OAAO,EAAC,KAAK,EAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CACnG,CAAC;AAUF,MAAM,CAAC,MAAM,aAAa,GAA2C,CAAC,EACpE,MAAM,EACN,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,OAAO,CAAC,IAAI,CACV,EAAC,YAAY,IACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,GAAG,UAAU,gBAAgB,EACpC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,EAC9D,SAAS,EAAC,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC;IAED,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,OAAO,CAAC,IAAI,CACV,EAAC,YAAY,IACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,GAAG,UAAU,eAAe,EACnC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAC9D,SAAS,EAAC,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;QACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;YAChD,UAAU,CAAC,iBAAiB,EAAE;;YAAI,sBAAsB,CAAC,IAAI,CAAC,CAClE;QACN,OAAO,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n  className: string;\r\n  onClick: any;\r\n  label: string;\r\n  icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n  <dso-icon-button variant=\"map\" class={className} onDsoClick={onClick} icon={icon} label={label} />\r\n);\r\n\r\ninterface SizingButtonProps {\r\n  panelLabel: string;\r\n  size: ViewerGridPanelSize;\r\n  expand: () => void;\r\n  shrink: () => void;\r\n  placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n  shrink,\r\n  expand,\r\n  size,\r\n  panelLabel,\r\n  placement,\r\n}) => {\r\n  const buttons = [];\r\n\r\n  if (size !== \"small\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={shrink}\r\n        label={`${panelLabel} smaller maken`}\r\n        icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n        className=\"shrink\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  if (size !== \"large\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={expand}\r\n        label={`${panelLabel} breder maken`}\r\n        icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n        className=\"expand\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div class=\"sizing-buttons\">\r\n      <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n      </span>\r\n      {buttons}\r\n    </div>\r\n  );\r\n};\r\n"]}

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

@@ -44,177 +44,9 @@ button::-moz-focus-inner {
   border: 0;
 }
 
-.shrink,
-.expand,
-.overlay-close-button {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-}
-.shrink:focus, .shrink:focus-visible,
-.expand:focus,
-.expand:focus-visible,
-.overlay-close-button:focus,
-.overlay-close-button:focus-visible {
-  outline-offset: 2px;
-}
-.shrink:active,
-.expand:active,
-.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] {
-  color: #afcf9d;
-}
-.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,
-.expand[disabled].dso-spinner-left,
-.expand[disabled].dso-spinner-right,
-.overlay-close-button[disabled].dso-spinner-left,
-.overlay-close-button[disabled].dso-spinner-right {
-  color: #39870c;
-}
-.shrink:not([disabled]):hover,
-.expand:not([disabled]):hover,
-.overlay-close-button:not([disabled]):hover {
-  color: #275937;
-  text-decoration: underline;
-  text-underline-position: under;
-}
-.shrink:not([disabled]):active,
-.expand:not([disabled]):active,
-.overlay-close-button:not([disabled]):active {
-  color: #173521;
-}
-.shrink.dso-align,
-.expand.dso-align,
-.overlay-close-button.dso-align {
-  line-height: calc(1.5em - 1px);
-  padding-block: 11px;
-  padding-inline: 0;
-  position: relative;
-}
-.shrink.dso-truncate,
-.expand.dso-truncate,
-.overlay-close-button.dso-truncate {
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.shrink.dso-spinner-left::before,
-.expand.dso-spinner-left::before,
-.overlay-close-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;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.shrink.dso-spinner-right::after,
-.expand.dso-spinner-right::after,
-.overlay-close-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;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.shrink dso-icon + span:not(.sr-only),
-.shrink svg.di + span:not(.sr-only),
-.shrink span:not(.sr-only) + dso-icon,
-.shrink span:not(.sr-only) + svg.di,
-.expand dso-icon + span:not(.sr-only),
-.expand svg.di + span:not(.sr-only),
-.expand span:not(.sr-only) + dso-icon,
-.expand span:not(.sr-only) + svg.di,
-.overlay-close-button dso-icon + span:not(.sr-only),
-.overlay-close-button svg.di + span:not(.sr-only),
-.overlay-close-button span:not(.sr-only) + dso-icon,
-.overlay-close-button span:not(.sr-only) + svg.di {
-  margin-inline-start: 8px;
-}
-.shrink svg.di.di-chevron-down + span:not(.sr-only),
-.shrink svg.di.di-chevron-up + span:not(.sr-only),
-.shrink span:not(.sr-only) + svg.di.di-chevron-down,
-.shrink span:not(.sr-only) + svg.di.di-chevron-up,
-.expand svg.di.di-chevron-down + span:not(.sr-only),
-.expand svg.di.di-chevron-up + span:not(.sr-only),
-.expand span:not(.sr-only) + svg.di.di-chevron-down,
-.expand span:not(.sr-only) + svg.di.di-chevron-up,
-.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),
-.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),
-.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,
-.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
-.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),
-.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),
-.shrink svg.di.di-angle-down + span:not(.sr-only),
-.shrink svg.di.di-angle-up + span:not(.sr-only),
-.shrink span:not(.sr-only) + svg.di.di-angle-down,
-.shrink span:not(.sr-only) + svg.di.di-angle-up,
-.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],
-.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],
-.expand dso-icon[icon=chevron-left] + span:not(.sr-only),
-.expand dso-icon[icon=chevron-right] + span:not(.sr-only),
-.expand svg.di.di-angle-down + span:not(.sr-only),
-.expand svg.di.di-angle-up + span:not(.sr-only),
-.expand span:not(.sr-only) + svg.di.di-angle-down,
-.expand span:not(.sr-only) + svg.di.di-angle-up,
-.expand span:not(.sr-only) + dso-icon[icon=chevron-left],
-.expand span:not(.sr-only) + dso-icon[icon=chevron-right],
-.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),
-.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),
-.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),
-.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),
-.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,
-.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,
-.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],
-.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-inline-start: 0;
-}
-.shrink dso-icon,
-.shrink svg.di,
-.shrink span,
-.expand dso-icon,
-.expand svg.di,
-.expand span,
-.overlay-close-button dso-icon,
-.overlay-close-button svg.di,
-.overlay-close-button span {
-  vertical-align: middle;
-}
-.shrink:hover,
-.expand:hover,
-.overlay-close-button:hover {
-  cursor: pointer;
-}
-
 .overlay-close-button {
   position: absolute;
+  line-height: 1;
   inset-block-start: 8px;
   inset-inline-end: 16px;
 }
@@ -262,10 +94,8 @@ button::-moz-focus-inner {
   padding-block: 0 8px;
   padding-inline: 0 4px;
 }
-.dso-main-panel .sizing-buttons button,
-.dso-main-panel .toggle-button button {
-  border-end-end-radius: 4px;
-  border-start-end-radius: 4px;
+.dso-main-panel .toggle-button {
+  --_dso-icon-button-map-border-radius: 0 4px 4px 0;
 }
 
 .dso-document-panel {
@@ -284,9 +114,10 @@ button::-moz-focus-inner {
   padding-block: 0 8px;
   padding-inline: 4px 0;
 }
-.dso-document-panel .sizing-buttons button {
-  border-end-start-radius: 4px;
-  border-start-start-radius: 4px;
+.dso-document-panel .sizing-buttons .shrink,
+.dso-document-panel .sizing-buttons .expand {
+  --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;
+  --_dso-icon-button-map-border-radius: 4px 0 0 4px;
 }
 
 .sizing-buttons,
@@ -297,177 +128,6 @@ button::-moz-focus-inner {
   inline-size: 44px;
   z-index: -1;
 }
-.sizing-buttons button,
-.toggle-button button {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  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: var(--_dso-button-secondary-background-color, #fff);
-  border-color: var(--_dso-button-secondary-border-color, #39870c);
-  color: var(--_dso-button-secondary-color, #39870c);
-}
-.sizing-buttons button,
-.toggle-button button {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-.sizing-buttons button:hover,
-.toggle-button button:hover {
-  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
-  color: var(--_dso-button-secondary-hover-color, #275937);
-}
-.sizing-buttons button:active,
-.toggle-button button:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #275937);
-  border-color: var(--_dso-button-secondary-active-border-color, #275937);
-  color: var(--_dso-button-secondary-active-color, #fff);
-}
-.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,
-.toggle-button button[disabled],
-.toggle-button button[disabled]:hover {
-  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
-  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
-  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-}
-.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,
-.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-block-end: -4px;
-  margin-block-start: -4px;
-}
-.sizing-buttons button.dso-small.dso-spinner-left::before,
-.toggle-button button.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.sizing-buttons button.dso-small.dso-spinner-right::after,
-.toggle-button button.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.sizing-buttons button > span,
-.toggle-button button > span {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.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,
-.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: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.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: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,
-.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.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: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.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: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,
-.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-.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;
-}
-.sizing-buttons button:focus-visible,
-.toggle-button button:focus-visible {
-  outline-offset: -1px;
-}
 
 .map {
   block-size: 100%;
@@ -520,32 +180,10 @@ button::-moz-focus-inner {
   color: #275937;
 }
 .filter-panel .dso-close {
-  -webkit-appearance: button;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
+  --_dso-icon-button-tertiary-color: #191919;
   position: absolute;
-  inset-block-start: 16px;
-  inset-inline-end: 16px;
-  block-size: 32px;
-  inline-size: 32px;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-  text-align: center;
-}
-.filter-panel .dso-close[disabled] {
-  cursor: default;
-}
-.filter-panel .dso-close::-moz-focus-inner {
-  border: 0;
-  padding: 0;
+  inset-block-start: 20px;
+  inset-inline-end: 20px;
 }
 
 .overlay {

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

@@ -158,7 +158,7 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, null, h("slot", { key: 'ac6069fa519432697e22d6f5675da589a8e39026', name: "top-bar" }), h("div", { key: '8649818c89255fa5f928b422aa0522f807fc6313', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '4b0939e88ed178a5d2f951e7d17be7fa38bbb9fd', class: "dso-navbar" }, h("ul", { key: 'f06385a28cb4cf3aa20587b1fcf4a2189dfe49aa', 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: '5ec42973090737a661a3a3cce7c1b443043e7351', 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: 'c007f7915f4c4d2fe372700aa4d39cf1b7e1b8b7', 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: '7556ea286b75bf6a0ada1c086aa69732ba008262', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'ff2507e5a54987f338e8fc5671deef0886f01d71', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'c1b327f81a4a7e77a9f83cc260e77c07d423cd7b', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'd07c8f2a88b40d3462b49f41af7b107dce9e1210', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: '187f6008a7a17f966cc95014b496836f939c99f0' }, h("slot", { key: 'ce5feb14b2bd1925a9e727ee865f0a9b3244151f', name: "top-bar" }), h("div", { key: '58758274f6029b7f288035d0bc6a981b36cd4da8', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '2bbf3fe80654866b9afb4f05362d3e390144ed7f', class: "dso-navbar" }, h("ul", { key: 'ba808de2ac61506fbc5ed726e98de16d512546e4', 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: '27171fa4924f1b3129f37c7ff1b0dfe86ec4b24d', 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: 'eefefe016d913a68e4b777654690f635575dd061', 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: '257e99001e125ebedb63f528d45f48e8ae4b8a25', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'ac6e42e98a57eaccb167e7510f7a749cc6282611', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'feb75b3bc7dce62272cfc1216c5a7c2acccb2268', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'f2cbdf0bba4190bc9df0ea9178ceacb25ed0ff38', 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/collection/components/viewer-grid/viewer-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewer-grid.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/viewer-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, FilterPanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseFilterPanelEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridPanelSize,\r\n  ViewerGridTab,\r\n  viewerGridTabLabelMap,\r\n  viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * The title of the filter panel\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelTitle?: string;\r\n\r\n  /**\r\n   * Set to true when filter panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridTab;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user wants to close the filter panel.\r\n   */\r\n  @Event()\r\n  dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filter panel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterPanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterPanelSlot() {\r\n    return this.host.querySelector(\"[slot='filter-panel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterPanelOpen\")\r\n  filterPanelOpenWatcher(open: boolean) {\r\n    if (!this.filterPanelSlot) {\r\n      console.warn(\"slot 'filter-panel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterPanel?.show();\r\n    } else {\r\n      this.filterPanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterPanelOpen && this.filterPanelSlot) {\r\n      this.filterPanel?.show();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <slot name=\"top-bar\" />\r\n        <div class=\"viewer-grid-columns\">\r\n          {this.tabView && (\r\n            <nav class=\"dso-navbar\">\r\n              <ul class=\"dso-nav dso-nav-sub\">\r\n                {viewerGridTabs.map((tab) => (\r\n                  <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                    <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                      {viewerGridTabLabelMap[tab]}\r\n                    </button>\r\n                  </li>\r\n                ))}\r\n              </ul>\r\n            </nav>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <MainPanel\r\n              tabView={this.tabView}\r\n              mainSize={this.mainSize}\r\n              documentPanelOpen={this.documentPanelOpen}\r\n              mainPanelExpanded={this.mainPanelExpanded}\r\n              mainPanelHidden={this.mainPanelHidden}\r\n              toggleMainPanel={this.toggleMainPanel}\r\n              dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n            ></MainPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <FilterPanel\r\n              title={this.filterPanelTitle}\r\n              ref={(element) => (this.filterPanel = element)}\r\n              dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n            ></FilterPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n            <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n              <slot name=\"map\" />\r\n            </div>\r\n          )}\r\n          {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n            <DocumentPanel\r\n              tabView={this.tabView}\r\n              panelSize={this.documentPanelSize}\r\n              shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n              expandDocumentPanel={this.expandDocumentPanel}\r\n              dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n            ></DocumentPanel>\r\n          )}\r\n          <Overlay\r\n            ref={(element) => (this.overlay = element)}\r\n            dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n          ></Overlay>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"viewer-grid.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/viewer-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, FilterPanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseFilterPanelEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridPanelSize,\r\n  ViewerGridTab,\r\n  viewerGridTabLabelMap,\r\n  viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * The title of the filter panel\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelTitle?: string;\r\n\r\n  /**\r\n   * Set to true when filter panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterPanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridTab;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user wants to close the filter panel.\r\n   */\r\n  @Event()\r\n  dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filter panel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterPanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterPanelSlot() {\r\n    return this.host.querySelector(\"[slot='filter-panel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterPanelOpen\")\r\n  filterPanelOpenWatcher(open: boolean) {\r\n    if (!this.filterPanelSlot) {\r\n      console.warn(\"slot 'filter-panel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterPanel?.show();\r\n    } else {\r\n      this.filterPanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterPanelOpen && this.filterPanelSlot) {\r\n      this.filterPanel?.show();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot name=\"top-bar\" />\r\n        <div class=\"viewer-grid-columns\">\r\n          {this.tabView && (\r\n            <nav class=\"dso-navbar\">\r\n              <ul class=\"dso-nav dso-nav-sub\">\r\n                {viewerGridTabs.map((tab) => (\r\n                  <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                    <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                      {viewerGridTabLabelMap[tab]}\r\n                    </button>\r\n                  </li>\r\n                ))}\r\n              </ul>\r\n            </nav>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <MainPanel\r\n              tabView={this.tabView}\r\n              mainSize={this.mainSize}\r\n              documentPanelOpen={this.documentPanelOpen}\r\n              mainPanelExpanded={this.mainPanelExpanded}\r\n              mainPanelHidden={this.mainPanelHidden}\r\n              toggleMainPanel={this.toggleMainPanel}\r\n              dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n            ></MainPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"search\")) && (\r\n            <FilterPanel\r\n              open={this.filterPanelOpen}\r\n              title={this.filterPanelTitle}\r\n              ref={(element) => (this.filterPanel = element)}\r\n              dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n            ></FilterPanel>\r\n          )}\r\n          {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n            <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n              <slot name=\"map\" />\r\n            </div>\r\n          )}\r\n          {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n            <DocumentPanel\r\n              tabView={this.tabView}\r\n              panelSize={this.documentPanelSize}\r\n              shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n              expandDocumentPanel={this.expandDocumentPanel}\r\n              dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n            ></DocumentPanel>\r\n          )}\r\n          <Overlay\r\n            ref={(element) => (this.overlay = element)}\r\n            dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n          ></Overlay>\r\n        </div>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}