@dso-toolkit/core 67.3.1 → 68.0.0

package/dist/esm/dso-viewer-grid.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, F as Fragment, a as getElement } from './index-60b7c895.js';
+import { h, r as registerInstance, c as createEvent, F as Fragment, a as getElement } from './index-b281ec90.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { d as debounce } from './index-e112e225.js';
 
@@ -120,6 +120,43 @@ const ViewerGrid = class {
         this.dsoMainPanelExpand = createEvent(this, "dsoMainPanelExpand", 7);
         this.dsoMainPanelToggle = createEvent(this, "dsoMainPanelToggle", 7);
         this.mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;
+        /**
+         * VRK or VDK implementation.
+         */
+        this.mode = "vrk";
+        /**
+         * Set to true when filterpanel should show.
+         */
+        this.filterpanelOpen = false;
+        /**
+         * Set to true when overlay should show.
+         */
+        this.overlayOpen = false;
+        /**
+         * **VDK only.** Set to true when document panel should show.
+         */
+        this.documentPanelOpen = false;
+        /**
+         * Size of the panel when component loads.
+         *
+         * Default size is `large`.
+         */
+        this.mainSize = "large";
+        /**
+         * **VDK only.** Size of the panel when component loads.
+         *
+         * Default size is `large`.
+         */
+        this.documentPanelSize = "large";
+        /**
+         * **VDK only.** Set to show main panel expanded.
+         */
+        this.mainPanelExpanded = false;
+        /**
+         * **VDK only.** Set to hide the main panel.
+         */
+        this.mainPanelHidden = false;
+        this.tabView = window.innerWidth < tabViewBreakpoint;
         this.switchActiveTab = (tab) => {
             this.dsoActiveTabSwitch.emit({
                 tab,
@@ -165,16 +202,6 @@ const ViewerGrid = class {
         this.handleFilterpanelCancel = (mouseEvent) => {
             this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
         };
-        this.mode = "vrk";
-        this.filterpanelOpen = false;
-        this.overlayOpen = false;
-        this.documentPanelOpen = false;
-        this.mainSize = "large";
-        this.activeTab = undefined;
-        this.documentPanelSize = "large";
-        this.mainPanelExpanded = false;
-        this.mainPanelHidden = false;
-        this.tabView = window.innerWidth < tabViewBreakpoint;
     }
     get filterpanelSlot() {
         return this.host.querySelector("[slot='filterpanel']");
@@ -249,7 +276,7 @@ const ViewerGrid = class {
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (h(Fragment, null, this.tabView && (h("nav", { key: '5bb28bca2da923349ff553a3e32ad6afc6292189', class: "dso-navbar" }, h("ul", { key: '0ec74cb43fb25056ca47b063c94e19deaf12e5a2', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '92b77fad12d794fe466f0eefb1c077545887970b', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'ecb109bf285a6838c5ec84ef069bd53ba581c5a7', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'b4a056be215b05ffb730f82aee8eebb7adf1c7b1', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '26a55ded1adf6f6d12814c4f327538e6cc14dbe8', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'b2ebd498fa85c639196525cda9f4386613bae869', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '718aa0f258d94bad2336b14f13cd0ba26d465205', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (h(Fragment, null, this.tabView && (h("nav", { key: 'd5873dcccbb0e3924ef7faa1f5ddbb42d1ac409c', class: "dso-navbar" }, h("ul", { key: 'c56fc8fefe943280b371173a98e8efe06e7c42a4', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'fc81d5e7a184c57fdc167aa4446d533079c553f4', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'bf4ee43c574db2ffe1a5b19444a6c2c0fbd5a562', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '6bb7a4e5ffc92664d3ec41e193b9060a5d9fee7d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'b90a125e730e877462178784a6f643ee9d140da3', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'b7c0df6c3cedb78dfc86308496c532bd240dc354', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'd4e9cb92bb22d2e8169ddc8535f316d174753c6d', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dso-viewer-grid.entry.js.map

@@ -1 +1 @@
-{"file":"dso-viewer-grid.entry.js","mappings":"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","names":[],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  main: \"Hoofdpaneel\",\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\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","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\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      <SizingButtons\r\n        panelLabel=\"Documentpaneel\"\r\n        size={panelSize}\r\n        expand={expandDocumentPanel}\r\n        shrink={shrinkDocumentPanel}\r\n        placement=\"right\"\r\n      />\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\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  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  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 && mode === \"vdk\",\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      ((mode === \"vrk\" && (\r\n        <SizingButtons\r\n          panelLabel=\"Hoofdpaneel\"\r\n          size={mainSize}\r\n          expand={expandMain}\r\n          shrink={shrinkMain}\r\n          placement=\"left\"\r\n        />\r\n      )) ||\r\n        (mode === \"vdk\" && 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","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","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n  .overlay {\r\n    block-size: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  inset-block-start: units.$u1;\r\n  inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    block-size: 100%;\r\n    padding-block: 0;\r\n    padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      inset-inline-start: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact,\r\n  &.contracted {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    block-size: 100%;\r\n  }\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin-block: units.$u1;\r\n    margin-inline: 0;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    inset-inline-start: calc(100% + 1px);\r\n    transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: 0 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-end-end-radius: 4px;\r\n      border-start-end-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    inset-block-start: auto;\r\n    inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n    inset-inline-end: calc(100% + 1px);\r\n    transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-end-start-radius: 4px;\r\n      border-start-start-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n  inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      border: 0;\r\n      padding: 8px;\r\n      border-radius: 0;\r\n      box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n      flex: 0 0 100%;\r\n      block-size: core-viewer-grid-variables.$resize-button-size;\r\n      min-inline-size: auto;\r\n      inline-size: core-viewer-grid-variables.$resize-button-size;\r\n    }\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline-offset: -1px;\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  block-size: 100%;\r\n  margin-block: 0;\r\n  max-block-size: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding-block: units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-start: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-inline-size) {\r\n    inline-size: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include heading.base();\r\n    @include heading.margin-large();\r\n    @include heading.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding-block: units.$u5 units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-end: 0;\r\n  inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: end;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-inline-start: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-inline-size: 0;\r\n    max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-inline-size: core-viewer-grid-variables.$small;\r\n    max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-inline-size: core-viewer-grid-variables.$large-min;\r\n    max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    block-size: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-inline-size: unset;\r\n      max-inline-size: unset;\r\n      inline-size: 440px;\r\n\r\n      .content {\r\n        block-size: auto;\r\n        overflow-y: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n    .content {\r\n      overflow-y: auto;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n    inline-size: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      inset-block-start: 0;\r\n      inset-block-end: 0;\r\n      inset-inline-end: 0;\r\n      inset-inline-start: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-inline-size + 40px}) {\r\n        inset-inline-start: auto;\r\n        inline-size: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    inline-size: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      font-weight: 300;\r\n    }\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-inline-size: 100vw;\r\n    inset-block-start: 0;\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n","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  ViewerGridPanelSize,\r\n  ViewerGridVdkTab,\r\n  ViewerGridVrkTab,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridMode,\r\n  viewerGridTabLabelMap,\r\n  viewerGridVdkTabs,\r\n  viewerGridVrkTabs,\r\n  ViewerGridTab,\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 main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\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   * VRK or VDK implementation.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * Set to true when filterpanel 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   * **VDK only.** 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?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** 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   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** 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 cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\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   * **VDK only.** Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * **VDK only.** 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='filterpanel']\");\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 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\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.mode === \"vdk\" &&\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 emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\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  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\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?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && 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.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.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 === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\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            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={this.handleFilterpanelApply}\r\n          onCancel={this.handleFilterpanelCancel}\r\n        ></Filterpanel>\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      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-viewer-grid.entry.js","mappings":"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","names":[],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  main: \"Hoofdpaneel\",\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\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","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\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      <SizingButtons\r\n        panelLabel=\"Documentpaneel\"\r\n        size={panelSize}\r\n        expand={expandDocumentPanel}\r\n        shrink={shrinkDocumentPanel}\r\n        placement=\"right\"\r\n      />\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\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  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  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 && mode === \"vdk\",\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      ((mode === \"vrk\" && (\r\n        <SizingButtons\r\n          panelLabel=\"Hoofdpaneel\"\r\n          size={mainSize}\r\n          expand={expandMain}\r\n          shrink={shrinkMain}\r\n          placement=\"left\"\r\n        />\r\n      )) ||\r\n        (mode === \"vdk\" && 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","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","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n  .overlay {\r\n    block-size: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  inset-block-start: units.$u1;\r\n  inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    block-size: 100%;\r\n    padding-block: 0;\r\n    padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      inset-inline-start: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact,\r\n  &.contracted {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    block-size: 100%;\r\n  }\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin-block: units.$u1;\r\n    margin-inline: 0;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    inset-inline-start: calc(100% + 1px);\r\n    transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: 0 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-end-end-radius: 4px;\r\n      border-start-end-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    inset-block-start: auto;\r\n    inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n    inset-inline-end: calc(100% + 1px);\r\n    transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-end-start-radius: 4px;\r\n      border-start-start-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n  inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      border: 0;\r\n      padding: 8px;\r\n      border-radius: 0;\r\n      box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n      flex: 0 0 100%;\r\n      block-size: core-viewer-grid-variables.$resize-button-size;\r\n      min-inline-size: auto;\r\n      inline-size: core-viewer-grid-variables.$resize-button-size;\r\n    }\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline-offset: -1px;\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  block-size: 100%;\r\n  margin-block: 0;\r\n  max-block-size: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding-block: units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-start: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-inline-size) {\r\n    inline-size: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include heading.base();\r\n    @include heading.margin-large();\r\n    @include heading.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding-block: units.$u5 units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-end: 0;\r\n  inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: end;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-inline-start: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-inline-size: 0;\r\n    max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-inline-size: core-viewer-grid-variables.$small;\r\n    max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-inline-size: core-viewer-grid-variables.$large-min;\r\n    max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    block-size: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-inline-size: unset;\r\n      max-inline-size: unset;\r\n      inline-size: 440px;\r\n\r\n      .content {\r\n        block-size: auto;\r\n        overflow-y: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n    .content {\r\n      overflow-y: auto;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n    inline-size: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      inset-block-start: 0;\r\n      inset-block-end: 0;\r\n      inset-inline-end: 0;\r\n      inset-inline-start: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-inline-size + 40px}) {\r\n        inset-inline-start: auto;\r\n        inline-size: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    inline-size: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      font-weight: 300;\r\n    }\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-inline-size: 100vw;\r\n    inset-block-start: 0;\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n","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  ViewerGridPanelSize,\r\n  ViewerGridVdkTab,\r\n  ViewerGridVrkTab,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridMode,\r\n  viewerGridTabLabelMap,\r\n  viewerGridVdkTabs,\r\n  viewerGridVrkTabs,\r\n  ViewerGridTab,\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 main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\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   * VRK or VDK implementation.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * Set to true when filterpanel 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   * **VDK only.** 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?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** 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   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** 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 cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\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   * **VDK only.** Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * **VDK only.** 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='filterpanel']\");\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 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\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.mode === \"vdk\" &&\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 emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\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  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\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?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && 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.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.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 === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\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            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={this.handleFilterpanelApply}\r\n          onCancel={this.handleFilterpanelCancel}\r\n        ></Filterpanel>\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      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dsot-document-component-demo.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-60b7c895.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-b281ec90.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
 
 /**
@@ -1627,6 +1627,23 @@ const DocumentComponentDemo = class {
         registerInstance(this, hostRef);
         this.dsotOzonContentAnchorClick = createEvent(this, "dsotOzonContentAnchorClick", 7);
         this.dsotTableOfContentsClick = createEvent(this, "dsotTableOfContentsClick", 3);
+        /**
+         * Show canvas to where Document Component extends.
+         */
+        this.showCanvas = false;
+        /**
+         * The default state for all Document Components.
+         */
+        this.openDefault = false;
+        /**
+         * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
+         */
+        this.mode = "document";
+        this.openOrClosed = [];
+        this.openedAnnotation = [];
+        this.filtered = [];
+        this.notApplicable = [];
+        this.activeAnnotationSelectables = [];
         this.handleRecursiveToggle = (documentComponent, detail) => {
             const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
             if (!embeddedDocuments) {
@@ -1651,17 +1668,6 @@ const DocumentComponentDemo = class {
             const { labelXml, nummerXml, type } = documentComponent;
             return (h("button", { type: "button", onClick: () => (this.document = documentComponent) }, !labelXml && !nummerXml ? (h("span", null, h("i", null, type))) : (h(Fragment, null, labelXml && (h(Fragment, null, h("dso-ozon-content", { content: labelXml, inline: true }))), nummerXml && (h(Fragment, null, " ", h("dso-ozon-content", { content: nummerXml, inline: true })))))));
         };
-        this.showCanvas = false;
-        this.jsonFile = undefined;
-        this.openDefault = false;
-        this.mode = "document";
-        this.response = undefined;
-        this.document = undefined;
-        this.openOrClosed = [];
-        this.openedAnnotation = [];
-        this.filtered = [];
-        this.notApplicable = [];
-        this.activeAnnotationSelectables = [];
     }
     async jsonFileWatcher() {
         this.openOrClosed = [];
@@ -1798,7 +1804,7 @@ const DocumentComponentDemo = class {
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: 'e8d87d6fb258291450ee5b9ccc781b3bc7ae0d48', class: "dso-document-components" }, h("div", { key: '5338abe33e005cbea80c416c518ebae99b793531', class: "dso-navbar" }, h("ul", { key: 'c5de257adb65448d9ed791571308c5ab27ccc0d0', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '625663d2be822cea4d3b2d8ab32ec365daa53430', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '99c88d8329386d683152c853cce87e0c89ba1733', class: "dso-document-components" }, h("div", { key: '8d279ced8931c15396942557e0f3b7b58d65f416', class: "dso-navbar" }, h("ul", { key: '8b7adc58151c460c4cc252935e9aaf206d35c986', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '213829fba9eb5ee7b78983a16c63ae1c68666c28', path: [this.document] })));
     }
     static get watchers() { return {
         "jsonFile": ["jsonFileWatcher"],