@dso-toolkit/core 59.0.1 → 60.0.0

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

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

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

@@ -1,2 +1,14 @@
-export const tabs = ["main", "map"];
+export const viewerGridVrkTabs = ["main", "map"];
+export const viewerGridVdkTabs = ["search", "map", "document"];
+export const viewerGridTabLabelMap = {
+  main: "Hoofdpaneel",
+  map: "Kaart",
+  document: "Document",
+  search: "Zoeken",
+};
+export const viewerGridSizeLabelMap = {
+  small: "smal",
+  medium: "middel",
+  large: "breed",
+};
 //# sourceMappingURL=viewer-grid.interfaces.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"AAyBA,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,KAAK,CAAU,CAAC","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\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 type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n\r\nexport const tabs = [\"main\", \"map\"] as const;\r\n\r\nexport type Tabs = (typeof tabs)[number];\r\n\r\nexport type TabLabelMap = { [key in Tabs]: string };\r\n"]}
+{"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"AAuCA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,KAAK,CAAU,CAAC;AAG1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAU,CAAC;AAOxE,MAAM,CAAC,MAAM,qBAAqB,GAA0B;EAC1D,IAAI,EAAE,aAAa;EACnB,GAAG,EAAE,OAAO;EACZ,QAAQ,EAAE,UAAU;EACpB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAA2B;EAC5D,KAAK,EAAE,MAAM;EACb,MAAM,EAAE,QAAQ;EAChB,KAAK,EAAE,OAAO;CACf,CAAC","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"]}