npm - @dso-toolkit/core - Versions diffs - 59.0.1 → 60.0.0 - Mend

@dso-toolkit/core 59.0.1 → 60.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

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

	@@ -1 +1 @@
1	- {"file":"dso-viewer-grid.entry.js","mappings":";;;AAyBO,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,KAAK,CAAU;;AClBrC,MAAM,4BAA4B,GAA2D,CAAC,EACnG,OAAO,EACP,QAAQ,GACT,MACC,WAAK,KAAK,EAAC,qBAAqB;EAC9B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,QAAQ;IAC3D,4BAAsB,CACf;EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;IACzD,4BAAsB;IACtB,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACL,CACP;;ACVM,MAAM,WAAW,GAAoD,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,MACrG,cACE,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,aAAa,EACnB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC;IACV,CAAC,CAAC,cAAc,EAAE,CAAC;IAEnB,QAAQ,CAAC,CAAC,CAAC,CAAC;GACb;EAED,0BAAkB;EAClB,EAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;EACtE,YAAM,IAAI,EAAC,aAAa,GAAG;EAC3B,EAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC/D,CACV;;ACfM,MAAM,SAAS,GAAkD,CAAC,EACvE,GAAG,EACH,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,GACX;EACC,MAAM,YAAY,GAAiB;IACjC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;GACf,CAAC;EAEF,QACE,WAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,GAAG;IACjC,CAAC,OAAO,KACP,WAAK,KAAK,EAAC,gBAAgB;MACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;QACnC,YAAY,CAAC,QAAQ,CAAC,CACvC;MACP,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,EAAE,OAAO,EAAE,UAAU;QACtF,YAAM,KAAK,EAAC,SAAS,gCAAiC;QACtD,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC;MACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,EAAE,OAAO,EAAE,UAAU;QACtF,YAAM,KAAK,EAAC,SAAS,+BAAgC;QACrD,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACL,CACP;IACD,WAAK,KAAK,EAAC,MAAM;MACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN;AACJ,CAAC;;ACvCM,MAAM,OAAO,GAAgD,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,MAC3F,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC;IACV,CAAC,CAAC,cAAc,EAAE,CAAC;IAEnB,eAAe,CAAC,CAAC,CAAC,CAAC;GACpB;EAED,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,eAAe;IACzE,gBAAU,IAAI,EAAC,OAAO,GAAY;IAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B;EACT,YAAM,IAAI,EAAC,SAAS,GAAG,CAChB,CACV;;ACvBD,MAAM,aAAa,GAAG,+3nCAA+3nC;;ACer5nC,MAAM,YAAY,GAAG,GAAG,GAAG,EAAE,CAAC;MAOjB,UAAU;;;;;;;IACb,mBAAc,GAAG,eAAe,YAAY,KAAK,CAAC;IAElD,gBAAW,GAAgB;MACjC,IAAI,EAAE,aAAa;MACnB,GAAG,EAAE,OAAO;KACb,CAAC;IA8DM,oBAAe,GAAuB,IAAI,CAAC;IAI3C,gBAAW,GAA0B,IAAI,CAAC;IAmD1C,eAAU,GAAG;MACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;KAChE,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;KAChE,CAAC;IAEM,mBAAc,GAAG,CAAC,WAAgC,MAAM,IAAI,CAAC,OAAO,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;2BArHnF,KAAK;uBAMT,KAAK;;oBAWE,OAAO;mBAGlB,MAAM,CAAC,UAAU,GAAG,YAAY;qBAGxB,MAAM;;EAsCxB,eAAe,CAAC,WAAqB,EAAE,YAAsB;;IAC3D,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;MAC1B,KAAK,EAAE,OAAO;MACd,YAAY;MACZ,WAAW;KACZ,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,SAAS,0CAAE,gBAAgB,CAC9B,eAAe,EACf,CAAC,CAAC;MACA,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;UAC1B,KAAK,EAAE,KAAK;UACZ,YAAY;UACZ,WAAW;SACZ,CAAC,CAAC;OACJ;KACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;GACH;EAGD,sBAAsB,CAAC,IAAa;;IAClC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACzB,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;KACrD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;SAAM;MACL,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;KAC3B;GACF;EAGD,kBAAkB,CAAC,IAAa;;IAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;KACjD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;SAAM;MACL,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;KACvB;GACF;EAYD,iBAAiB;IACf,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAEvF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAiB,yBAAyB,CAAC,CAAC;IAE1F,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAiB,qBAAqB,CAAC,CAAC;GACnF;EAED,gBAAgB;;IACd,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE;MAChD,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;IAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;MACxC,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;GACF;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC;KACtC;GACF;EAED,oBAAoB;IAClB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;GAC3F;EAEO,sBAAsB,CAAC,UAA8B;IAC3D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;GAC9D;EAEO,uBAAuB,CAAC,UAA8B;IAC5D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;GAC/D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,oBAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,EAAE,GAChC,IAAI,CAAC,OAAO,KACX,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,KAAK,EAAC,qBAAqB,IAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACZ,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE,CAAC,IACjE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAC7E,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CACf,CACN,CACN,CAAC,CACC,CACD,CACP,EACA,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,MAC5D,EAAC,SAAS,IACR,GAAG,EAAE,CAAC,OAAmC,MAAM,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,EACxE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,GAChB,CACd,EACD,EAAC,WAAW,IACV,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAC9C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,GACnC,EACd,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,MAC3D,WAAK,KAAK,EAAC,KAAK,IACd,YAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,EACD,EAAC,OAAO,IACN,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAC1C,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC9D,CACN,EACP;GACH;;;;;;;;;;;;","names":[],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","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 /*\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","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 { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { LabelSizeMap, MainSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n ref: ((element: HTMLDivElement \| undefined) => void) \| undefined;\r\n tabView: boolean;\r\n mainSize: MainSize;\r\n shrinkMain: () => void;\r\n expandMain: () => void;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n ref,\r\n tabView,\r\n mainSize,\r\n shrinkMain,\r\n expandMain,\r\n}) => {\r\n const sizeLabelMap: LabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n };\r\n\r\n return (\r\n <div class=\"dso-main-panel\" ref={ref}>\r\n {!tabView && (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte hoofdpaneel: {sizeLabelMap[mainSize]}\r\n </span>\r\n <button type=\"button\" class=\"shrink\" disabled={mainSize === \"small\"} onClick={shrinkMain}>\r\n <span class=\"sr-only\">Hoofdpaneel smaller maken</span>\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </button>\r\n <button type=\"button\" class=\"expand\" disabled={mainSize === \"large\"} onClick={expandMain}>\r\n <span class=\"sr-only\">Hoofdpaneel breder maken</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n </div>\r\n )}\r\n <div class=\"main\">\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n );\r\n};\r\n","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/headings\";\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\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 &[disabled] {\r\n display: none;\r\n }\r\n}\r\n\r\n.overlay-close-button {\r\n position: absolute;\r\n top: units.$u1;\r\n right: css-grid.$grid-gutter-width 0.5;\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: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-width core-viewer-grid-variables.$transition-time ease-in,\r\n min-width core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .dso-filterblok-address {\r\n font-weight: bold;\r\n margin: units.$u1 0;\r\n }\r\n\r\n .main {\r\n height: 100%;\r\n padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n }\r\n}\r\n\r\n.sizing-buttons {\r\n left: calc(100% + 1px);\r\n overflow-x: hidden;\r\n padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n position: absolute;\r\n top: core-viewer-grid-variables.$sizing-buttons-top;\r\n transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n width: 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 @include button.map-focus();\r\n\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-bottom-right-radius: 4px;\r\n border-top-right-radius: 4px;\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 height: core-viewer-grid-variables.$resize-button-size;\r\n min-width: auto;\r\n width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n &:hover {\r\n dso-icon {\r\n color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.map {\r\n height: 100%;\r\n width: 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 height: 100%;\r\n margin-block: 0;\r\n max-height: 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: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n left: 0;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n width: 100vw;\r\n\r\n &::before {\r\n display: none !important;\r\n }\r\n }\r\n\r\n h1 {\r\n @include headings.base();\r\n @include headings.margin-large();\r\n @include headings.h1();\r\n }\r\n}\r\n\r\n.overlay {\r\n padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n right: 0;\r\n width: core-viewer-grid-variables.$overlay-width;\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-width) {\r\n width: 100vw;\r\n }\r\n}\r\n\r\n.filterpanel-buttons {\r\n text-align: right;\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-left: 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 {\r\n display: flex;\r\n height: 100vh;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n :host([small]) {\r\n .dso-main-panel {\r\n flex-basis: core-viewer-grid-variables.$small;\r\n min-width: 0;\r\n max-width: 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-width: 100vw;\r\n min-width: 0;\r\n transition: none;\r\n }\r\n }\r\n }\r\n\r\n :host([medium]) {\r\n .dso-main-panel {\r\n flex-basis: core-viewer-grid-variables.$medium;\r\n min-width: core-viewer-grid-variables.$small;\r\n max-width: 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-width: 100vw;\r\n min-width: core-viewer-grid-variables.$small;\r\n transition: none;\r\n }\r\n }\r\n }\r\n\r\n :host([large]) {\r\n .dso-main-panel {\r\n flex-basis: core-viewer-grid-variables.$large;\r\n min-width: core-viewer-grid-variables.$large-min;\r\n max-width: 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-width: 100vw;\r\n min-width: core-viewer-grid-variables.$large-min;\r\n transition: none;\r\n }\r\n }\r\n }\r\n\r\n .dso-main-panel {\r\n box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n padding-right: units.$u1;\r\n\r\n .main {\r\n overflow-y: scroll;\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-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n width: calc(100vw - 40px);\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: fixed;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n left: core-viewer-grid-variables.$filterpanel-max-width;\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-width + 40px}) {\r\n left: auto;\r\n width: 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 width: calc(100vw - units.$u4);\r\n }\r\n\r\n .dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n font-weight: 300;\r\n }\r\n\r\n .filterpanel,\r\n .overlay {\r\n margin-inline: 0;\r\n max-width: 100vw;\r\n top: 0;\r\n width: 100vw;\r\n }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n MainSize,\r\n TabLabelMap,\r\n Tabs,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridFilterpanelApplyEvent,\r\n ViewerGridFilterpanelCancelEvent,\r\n tabs,\r\n} from \"./viewer-grid.interfaces\";\r\nimport { Filterpanel, MainPanel, Overlay } from \"./components\";\r\n\r\nconst tabViewWidth = 768 + 40;\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: ${tabViewWidth}px)`;\r\n\r\n private tabLabelMap: TabLabelMap = {\r\n main: \"Hoofdpaneel\",\r\n map: \"Kaart\",\r\n };\r\n\r\n private mainPanel?: HTMLDivElement;\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 Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop()\r\n initialMainSize?: MainSize;\r\n\r\n @State()\r\n mainSize: MainSize = \"large\";\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewWidth;\r\n\r\n @State()\r\n activeTab: Tabs = \"main\";\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 before and after main size animation. Inspect `detail` property for more information.\r\n */\r\n @Event()\r\n dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n private filterpanel: HTMLDialogElement \| undefined;\r\n\r\n private filterpanelSlot: HTMLElement \| null = null;\r\n\r\n private overlay: HTMLDialogElement \| undefined;\r\n\r\n private overlaySlot: HTMLDivElement \| null = null;\r\n\r\n @Watch(\"mainSize\")\r\n mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"start\",\r\n previousSize,\r\n currentSize,\r\n });\r\n\r\n this.mainPanel?.addEventListener(\r\n \"transitionend\",\r\n (e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"end\",\r\n previousSize,\r\n currentSize,\r\n });\r\n }\r\n },\r\n { once: true }\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 private shrinkMain = () => {\r\n this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n };\r\n\r\n private expandMain = () => {\r\n this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n\r\n this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\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\r\n componentWillLoad() {\r\n if (this.initialMainSize) {\r\n this.mainSize = this.initialMainSize;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n }\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 render() {\r\n return (\r\n <Host {...{ [this.mainSize]: true }}>\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {tabs.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => (this.activeTab = tab)}>\r\n {this.tabLabelMap[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\")) && (\r\n <MainPanel\r\n ref={(element: HTMLDivElement \| undefined) => (this.mainPanel = element)}\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n shrinkMain={this.shrinkMain}\r\n expandMain={this.expandMain}\r\n ></MainPanel>\r\n )}\r\n <Filterpanel\r\n ref={(element) => (this.filterpanel = element)}\r\n onApply={(e) => this.handleFilterpanelApply(e)}\r\n onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n ></Filterpanel>\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\">\r\n <slot name=\"map\" />\r\n </div>\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 </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-viewer-grid.entry.js","mappings":";;;;AAuCO,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,KAAK,CAAU,CAAC;AAGnD,MAAM,iBAAiB,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAU,CAAC;AAOjE,MAAM,qBAAqB,GAA0B;EAC1D,IAAI,EAAE,aAAa;EACnB,GAAG,EAAE,OAAO;EACZ,QAAQ,EAAE,UAAU;EACpB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEK,MAAM,sBAAsB,GAA2B;EAC5D,KAAK,EAAE,MAAM;EACb,MAAM,EAAE,QAAQ;EAChB,KAAK,EAAE,OAAO;CACf;;AC5CM,MAAM,aAAa,GAAsD,CAAC,EAC/E,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,sCAAsC,GACvC,MACC,WACE,KAAK,EAAC,oBAAoB,EAC1B,eAAe,EAAE,CAAC,CAAC;IACjB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;MACnC,sCAAsC,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;KACzE;GACF;EAEA,CAAC,OAAO,KACP,WAAK,KAAK,EAAC,gBAAgB;IACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;MAChC,sBAAsB,CAAC,SAAS,CAAC,CACrD;IACN,SAAS,KAAK,OAAO,KACpB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,mBAAmB;MAC/D,YAAM,KAAK,EAAC,SAAS,mCAAoC;MACzD,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACV;IACA,SAAS,KAAK,OAAO,KACpB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,mBAAmB;MAC/D,YAAM,KAAK,EAAC,SAAS,kCAAmC;MACxD,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC,CACV,CACG,CACP;EACD,WAAK,KAAK,EAAC,SAAS;IAClB,YAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACF,CACP;;AC/CM,MAAM,4BAA4B,GAA2D,CAAC,EACnG,OAAO,EACP,QAAQ,GACT,MACC,WAAK,KAAK,EAAC,qBAAqB;EAC9B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,QAAQ;IAC3D,4BAAsB,CACf;EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;IACzD,4BAAsB;IACtB,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACL,CACP;;ACVM,MAAM,WAAW,GAAoD,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,MACrG,cACE,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,aAAa,EACnB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC;IACV,CAAC,CAAC,cAAc,EAAE,CAAC;IAEnB,QAAQ,CAAC,CAAC,CAAC,CAAC;GACb;EAED,0BAAkB;EAClB,EAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;EACtE,YAAM,IAAI,EAAC,aAAa,GAAG;EAC3B,EAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC/D,CACV;;ACFM,MAAM,SAAS,GAAkD,CAAC,EACvE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,UAAU,EACV,aAAa,EACb,eAAe,EACf,6BAA6B,GAC9B,MACC,WACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;IAC5B,OAAO,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAAC,iBAAiB;IAC5D,QAAQ,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,iBAAiB;IAC5D,SAAS,EAAE,eAAe;GAC3B,CAAC,EACF,eAAe,EAAE,CAAC,CAAC;IACjB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;MACnC,6BAA6B,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;KAC/D;GACF;EAEA,CAAC,OAAO;KACN,CAAC,iBAAiB,IACjB,WAAK,KAAK,EAAC,gBAAgB;MACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;QAChD,IAAI,KAAK,KAAK,GAAG,eAAe,GAAG,aAAa;;QAAI,sBAAsB,CAAC,QAAQ,CAAC,CACxF;MACN,QAAQ,KAAK,OAAO,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,UAAU;QACtD,YAAM,KAAK,EAAC,SAAS;UAAE,IAAI,KAAK,KAAK,GAAG,eAAe,GAAG,aAAa;2BAAsB;QAC7F,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC,CACV;MACA,QAAQ,KAAK,OAAO,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,UAAU;QACtD,YAAM,KAAK,EAAC,SAAS;UAAE,IAAI,KAAK,KAAK,GAAG,eAAe,GAAG,aAAa;0BAAqB;QAC5F,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACV,CACG,KAEN,WAAK,KAAK,EAAC,eAAe;MACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,eAAe;QAC5C,YAAM,KAAK,EAAC,SAAS;UAClB,IAAI,KAAK,KAAK,GAAG,eAAe,GAAG,aAAa;;UAAG,eAAe,GAAG,OAAO,GAAG,WAAW,CACtF;QACP,gBAAU,IAAI,EAAE,eAAe,GAAG,eAAe,GAAG,cAAc,GAAa,CACxE,CACL,CACP,CAAC;EACJ,WAAK,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;IACzD,YAAM,IAAI,EAAC,MAAM,GAAG;IACnB,CAAC,OAAO,IAAI,iBAAiB,KAC5B,cAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,aAAa;MAC/D,gBAAU,IAAI,EAAE,iBAAiB,GAAG,YAAY,GAAG,cAAc,GAAa;MAC9E;QAAO,iBAAiB,GAAG,SAAS,GAAG,MAAM;yCAAsC,CAC5E,CACV;IACA,iBAAiB,IAAI,iBAAiB,IAAI,YAAM,IAAI,EAAC,eAAe,GAAG,CACpE,CACF,CACP;;AClFM,MAAM,OAAO,GAAgD,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,MAC3F,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC;IACV,CAAC,CAAC,cAAc,EAAE,CAAC;IAEnB,eAAe,CAAC,CAAC,CAAC,CAAC;GACpB;EAED,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,eAAe;IACzE,gBAAU,IAAI,EAAC,OAAO,GAAY;IAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B;EACT,YAAM,IAAI,EAAC,SAAS,GAAG,CAChB,CACV;;ACvBD,MAAM,aAAa,GAAG,8/2CAA8/2C;;ACwBph3C,MAAM,cAAc,GAAG,IAAI,cAAc,CACvCA,UAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;EACf,MAAM,UAAU,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,WAAW,EAAE,CAAC;EAC/C,IAAI,UAAU,YAAY,UAAU,IAAI,wBAAwB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;IACjF,UAAU,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC;GAC7C;AACH,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;AAEF,SAAS,wBAAwB,CAAC,OAAgB;EAChD,OAAO,OAAO,CAAC,OAAO,KAAK,iBAAiB,CAAC;AAC/C,CAAC;AAED,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,MAAM,iBAAiB,GAAG,GAAG,GAAG,WAAW,CAAC;AAE5C,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAelB,UAAU;;;;;;;;;;;;;IACb,mBAAc,GAAG,eAAe,iBAAiB,KAAK,CAAC;IAkMvD,oBAAe,GAAG,CAAC,GAAkB;MAC3C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,GAAG;OACJ,CAAC,CAAC;KACJ,CAAC;IAEM,mBAAc,GAAG;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,WAAW,EAAE,IAAI,CAAC,QAAQ;QAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO;OACzD,CAAC,CAAC;KACJ,CAAC;IAEM,mBAAc,GAAG;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,WAAW,EAAE,IAAI,CAAC,QAAQ;QAC1B,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;OAC3E,CAAC,CAAC;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC5B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;QACnC,WAAW,EAAE,IAAI,CAAC,iBAAiB;QACnC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO;OAClE,CAAC,CAAC;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC5B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;QACnC,WAAW,EAAE,IAAI,CAAC,iBAAiB;QACnC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;OACpF,CAAC,CAAC;KACJ,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,CAAC,IAAI,CAAC,iBAAiB;OAChC,CAAC,CAAC;KACJ,CAAC;IAEM,oBAAe,GAAG;MACxB,IACE,IAAI,CAAC,UAAU,YAAY,cAAc;QACzC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAC7E;QACA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;OACzB;MAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe;OAC5B,CAAC,CAAC;KACJ,CAAC;IAEM,mBAAc,GAAG,CAAC,WAAgC,MAAM,IAAI,CAAC,OAAO,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE7F,2BAAsB,GAAG,CAAC,UAA8B;MAC9D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;KAC9D,CAAC;IAEM,4BAAuB,GAAG,CAAC,UAA8B;MAC/D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;KAC/D,CAAC;gBAvPqB,KAAK;2BAMV,KAAK;uBAMT,KAAK;6BAMC,KAAK;oBAQO,OAAO;;6BAcE,OAAO;6BAM5B,KAAK;2BAMP,KAAK;mBAoEb,MAAM,CAAC,UAAU,GAAG,iBAAiB;;EAI/C,IAAY,eAAe;IACzB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;GACxD;EAED,IAAY,WAAW;IACrB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;GACpD;EAKD,wBAAwB,CAAC,IAAa;IACpC,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,yBAAyB,EAAE,CAAC;KAClC;GACF;EAGD,sBAAsB,CAAC,IAAa;;IAClC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACzB,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;KACrD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;SAAM;MACL,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;KAC3B;GACF;EAGD,kBAAkB,CAAC,IAAa;;IAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;KACjD;IAED,IAAI,IAAI,EAAE;MACR,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;SAAM;MACL,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;KACvB;GACF;;;;EAMD,MAAM,yBAAyB;IAC7B,IACE,IAAI,CAAC,IAAI,KAAK,KAAK;MACnB,IAAI,CAAC,iBAAiB;MACtB,CAAC,IAAI,CAAC,eAAe;MACrB,IAAI,CAAC,UAAU,YAAY,cAAc;OACxC,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,kBAAkB,GAAG,WAAW,GAAG,WAAW,IAAI,CAAC,IAAI,CAAC,iBAAiB;SACvG,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,EACvF;MACA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAC3B,IAAI,EAAE,IAAI;OACX,CAAC,CAAC;KACJ;GACF;EAiED,iBAAiB;IACf,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;GACxF;EAED,gBAAgB;;IACd,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE;MAChD,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,EAAE,CAAC;KAC/B;IAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;MACxC,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;KAC3B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,YAAY,cAAc,EAAE;MACpE,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACzC;GACF;EAED,oBAAoB;IAClB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAE1F,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE;MAC1C,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C;GACF;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;IAE9E,QACE,kBACG,IAAI,CAAC,OAAO,KACX,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,KAAK,EAAC,qBAAqB,IAC5B,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,MACjB,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE,CAAC,IACjE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAChF,qBAAqB,CAAC,GAAG,CAAC,CACpB,CACN,CACN,CAAC,CACC,CACD,CACP,EACA,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,MAC7F,EAAC,SAAS,IACR,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,6BAA6B,EAAE,IAAI,CAAC,6BAA6B,GACtD,CACd,EACD,EAAC,WAAW,IACV,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAC9C,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,GACzB,EACd,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,MAC3D,WAAK,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,IAC5D,YAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,EACA,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,MAAM,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,MAC5F,EAAC,aAAa,IACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,iBAAiB,EACjC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,sCAAsC,EAAE,IAAI,CAAC,sCAAsC,GACpE,CAClB,EACD,EAAC,OAAO,IACN,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAC1C,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC9D,CACV,EACH;GACH;;;;;;;;;;;;","names":["debounce"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","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 { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport {\r\n ViewerGridPanelSize,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n tabView: boolean;\r\n panelSize: ViewerGridPanelSize;\r\n shrinkDocumentPanel: () => void;\r\n expandDocumentPanel: () => void;\r\n dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n tabView,\r\n panelSize,\r\n shrinkDocumentPanel,\r\n expandDocumentPanel,\r\n dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class=\"dso-document-panel\"\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n }\r\n }}\r\n >\r\n {!tabView && (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte documentpaneel: {viewerGridSizeLabelMap[panelSize]}\r\n </span>\r\n {panelSize !== \"small\" && (\r\n <button type=\"button\" class=\"shrink\" onClick={shrinkDocumentPanel}>\r\n <span class=\"sr-only\">Documentpaneel smaller maken</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n )}\r\n {panelSize !== \"large\" && (\r\n <button type=\"button\" class=\"expand\" onClick={expandDocumentPanel}>\r\n <span class=\"sr-only\">Documentpaneel breder maken</span>\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n <div class=\"content\">\r\n <slot name=\"document-panel\" />\r\n </div>\r\n </div>\r\n);\r\n","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 {\r\n ViewerGridPanelSize,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridMode,\r\n viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n mode: ViewerGridMode;\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n shrinkMain: () => void;\r\n expandMain: () => void;\r\n expandContent: () => void;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n mode,\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n shrinkMain,\r\n expandMain,\r\n expandContent,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView &&\r\n (!documentPanelOpen ? (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {mode === \"vdk\" ? \"zoeken paneel\" : \"hoofdpaneel\"}: {viewerGridSizeLabelMap[mainSize]}\r\n </span>\r\n {mainSize !== \"small\" && (\r\n <button type=\"button\" class=\"shrink\" onClick={shrinkMain}>\r\n <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} smaller maken</span>\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </button>\r\n )}\r\n {mainSize !== \"large\" && (\r\n <button type=\"button\" class=\"expand\" onClick={expandMain}>\r\n <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} breder maken</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <div class=\"toggle-button\">\r\n <button type=\"button\" onClick={toggleMainPanel}>\r\n <span class=\"sr-only\">\r\n {mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} {mainPanelHidden ? \"Tonen\" : \"Verbergen\"}\r\n </span>\r\n <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n </button>\r\n </div>\r\n ))}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n {!tabView && documentPanelOpen && (\r\n <button class=\"dso-tertiary expand-button\" onClick={expandContent}>\r\n <dso-icon icon={mainPanelExpanded ? \"chevron-up\" : \"chevron-down\"}></dso-icon>\r\n <span>{mainPanelExpanded ? \"Verberg\" : \"Toon\"} documenten op gekozen locatie</span>\r\n </button>\r\n )}\r\n {documentPanelOpen && mainPanelExpanded && <slot name=\"main-expanded\" />}\r\n </div>\r\n </div>\r\n);\r\n","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/headings\";\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 height: 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 top: units.$u1;\r\n right: 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 height: 100%;\r\n padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\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: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-width core-viewer-grid-variables.$transition-time ease-in,\r\n min-width 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 left: -432px;\r\n }\r\n }\r\n\r\n &.compact {\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 height: 100%;\r\n }\r\n\r\n .dso-filterblok-address {\r\n font-weight: bold;\r\n margin: units.$u1 0;\r\n }\r\n\r\n .sizing-buttons,\r\n .toggle-button {\r\n left: calc(100% + 1px);\r\n transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n\r\n button {\r\n border-bottom-right-radius: 4px;\r\n border-top-right-radius: 4px;\r\n }\r\n }\r\n\r\n .expand-button {\r\n @include button.tertiary($modifiers: false);\r\n\r\n padding-block: units.$u2;\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: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-width core-viewer-grid-variables.$transition-time ease-in,\r\n min-width 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 right: calc(100% + 1px);\r\n transition: right core-viewer-grid-variables.$transition-time ease-in;\r\n padding: 0 0 units.$u1 * 0.5 units.$u1 * 0.5;\r\n\r\n button {\r\n border-bottom-left-radius: 4px;\r\n border-top-left-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 top: core-viewer-grid-variables.$sizing-buttons-top;\r\n width: 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 @include button.map-focus();\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 height: core-viewer-grid-variables.$resize-button-size;\r\n min-width: auto;\r\n width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n &:hover {\r\n dso-icon {\r\n color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.map {\r\n height: 100%;\r\n width: 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 height: 100%;\r\n margin-block: 0;\r\n max-height: 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: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n left: 0;\r\n\r\n @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n width: 100vw;\r\n\r\n &::before {\r\n display: none !important;\r\n }\r\n }\r\n\r\n h1 {\r\n @include headings.base();\r\n @include headings.margin-large();\r\n @include headings.h1();\r\n }\r\n}\r\n\r\n.overlay {\r\n padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n right: 0;\r\n width: core-viewer-grid-variables.$overlay-width;\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-width) {\r\n width: 100vw;\r\n }\r\n}\r\n\r\n.filterpanel-buttons {\r\n text-align: right;\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-left: 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-width: 0;\r\n max-width: 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-width: 100vw;\r\n min-width: 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-width: core-viewer-grid-variables.$small;\r\n max-width: 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-width: 100vw;\r\n min-width: 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-width: core-viewer-grid-variables.$large-min;\r\n max-width: 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-width: 100vw;\r\n min-width: 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 height: 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-width: unset;\r\n max-width: unset;\r\n width: 440px;\r\n\r\n .content {\r\n height: 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 padding-right: units.$u1;\r\n\r\n .content {\r\n overflow-y: scroll;\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-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n width: calc(100vw - 40px);\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: fixed;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n left: core-viewer-grid-variables.$filterpanel-max-width;\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-width + 40px}) {\r\n left: auto;\r\n width: 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 width: calc(100vw - units.$u4);\r\n }\r\n\r\n .dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n font-weight: 300;\r\n }\r\n\r\n .filterpanel,\r\n .overlay {\r\n margin-inline: 0;\r\n max-width: 100vw;\r\n top: 0;\r\n width: 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 * @slot main-expanded - 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()\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()\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()\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 = 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 = this.mainSize === \"small\" ? \"medium\" : \"large\"),\r\n });\r\n };\r\n\r\n private expandContent = () => {\r\n this.dsoMainPanelExpand.emit({\r\n expand: !this.mainPanelExpanded,\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 expandContent={this.expandContent}\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/loader.js CHANGED Viewed

@@ -3,7 +3,7 @@ export { s as setNonce } from './index-f82ed648.js';
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32],"tabView":[32],"activeTab":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
+  return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1],"min":[1],"max":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"mode":[1],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[1,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[1,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
 };
 export { defineCustomElements };

package/dist/types/components/date-picker/date-picker.d.ts CHANGED Viewed

@@ -1,38 +1,11 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-import { DsoDatePickerDirection, DsoDatePickerChangeEvent, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./date-picker.interfaces";
+import { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from "./date-picker.interfaces";
 export declare class DsoDatePicker implements ComponentInterface {
-  /**
-   * Own Properties
-   */
-  private monthSelectId;
-  private yearSelectId;
-  private dialogLabelId;
-  private datePickerButton;
-  private datePickerInput;
-  private firstFocusableElement;
-  private monthSelectNode;
-  private focusedDayNode;
-  private focusTimeoutId;
-  private hideTimeoutId;
-  private initialTouchX;
-  private initialTouchY;
-  private localization;
-  private firstDayOfWeek;
-  private previousValue;
+  private previousValue?;
   /**
    * Reference to host HTML element.
    */
   element: HTMLDsoDatePickerElement;
-  /**
-   * State() variables
-   */
-  activeFocus: boolean;
-  focusedDay: Date;
-  open: boolean;
-  visible: boolean;
-  /**
-   * Public Property API
-   */
   /**
    * Name of the date picker input.
    */
@@ -46,16 +19,6 @@ export declare class DsoDatePicker implements ComponentInterface {
    * interact with the input, and conveys its inactive state to assistive technologies.
    */
   disabled: boolean;
-  /**
-   * Defines a specific role attribute for the date picker input.
-   */
-  role: string | null;
-  /**
-   * Forces the opening direction of the calendar modal to be always left or right.
-   * This setting can be useful when the input is smaller than the opening date picker
-   * would be as by default the picker always opens towards right.
-   */
-  direction: DsoDatePickerDirection;
   /**
    * Should the input be marked as required?
    */
@@ -92,81 +55,27 @@ export declare class DsoDatePicker implements ComponentInterface {
   /**
    * Event emitted when a date is selected.
    */
-  dsoDateChange: EventEmitter<DsoDatePickerChangeEvent>;
+  dsoDateChange: EventEmitter<DatePickerChangeEvent>;
   /**
    * Event emitted the date picker input is blurred.
    */
-  dsoBlur: EventEmitter<DsoDatePickerFocusEvent>;
+  dsoBlur: EventEmitter<DatePickerFocusEvent>;
   /**
    * Event emitted on key up in the date picker input.
    */
-  dsoKeyUp: EventEmitter<DsoDatePickerKeyboardEvent>;
+  dsoKeyUp: EventEmitter<DatePickerKeyboardEvent>;
   /**
    * Event emitted on key down in the date picker input.
    */
-  dsoKeyDown: EventEmitter<DsoDatePickerKeyboardEvent>;
+  dsoKeyDown: EventEmitter<DatePickerKeyboardEvent>;
   /**
    * Event emitted the date picker input is focused.
    */
-  dsoFocus: EventEmitter<DsoDatePickerFocusEvent>;
-  /**
-   * Component event handling.
-   */
-  handleDocumentClick(e: MouseEvent): void;
-  /**
-   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-   */
-  setFocus(): Promise<void | undefined>;
-  /**
-   * Public methods API
-   */
-  /**
-   * Show the calendar modal, moving focus to the calendar inside.
-   */
-  show(): Promise<void>;
-  /**
-   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-   * returning to the date picker's button. Default is true.
-   */
-  hide(moveFocusToButton?: boolean): Promise<void>;
-  /**
-   * Local methods.
-   */
-  private enableActiveFocus;
-  private disableActiveFocus;
-  private addDays;
-  private addMonths;
-  private addYears;
-  private startOfWeek;
-  private endOfWeek;
-  private setMonth;
-  private setYear;
-  private setFocusedDay;
-  private toggleOpen;
-  private handleEscKey;
+  dsoFocus: EventEmitter<DatePickerFocusEvent>;
   private handleBlur;
+  private handleFocus;
   private handleKeyUp;
   private handleKeyDown;
-  private handleFocus;
-  private handleTouchStart;
-  private handleTouchMove;
-  private handleTouchEnd;
-  private handleNextMonthClick;
-  private handlePreviousMonthClick;
-  private handleFirstFocusableKeydown;
-  private handleKeyboardNavigation;
-  private handleDaySelect;
-  private handleMonthSelect;
-  private handleYearSelect;
   private handleInputChange;
-  private setValue;
-  private prepareEvent;
-  private processFocusedDayNode;
-  componentWillLoad(): void | Promise<void>;
-  componentDidLoad(): void;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
   render(): any;
 }

package/dist/types/components/date-picker/date-picker.interfaces.d.ts CHANGED Viewed

@@ -1,14 +1,15 @@
-export type DsoDatePickerChangeEvent = {
+export interface DatePickerChangeEvent {
+  originalEvent: Event;
   component: "dso-date-picker";
   valueAsDate: Date | undefined;
   value: string;
   error?: "invalid" | "required" | "min-range" | "max-range";
-};
-export type DsoDatePickerFocusEvent = {
-  component: "dso-date-picker";
-};
-export type DsoDatePickerKeyboardEvent = {
+}
+export interface DatePickerFocusEvent {
+  originalEvent: FocusEvent;
   component: "dso-date-picker";
+}
+export interface DatePickerKeyboardEvent {
   originalEvent: KeyboardEvent;
-};
-export type DsoDatePickerDirection = "left" | "right";
+  component: "dso-date-picker";
+}

package/dist/types/components/date-picker/date-utils.d.ts CHANGED Viewed

@@ -1,46 +1,18 @@
-export declare enum DaysOfWeek {
-  Sunday = 0,
-  Monday = 1,
-  Tuesday = 2,
-  Wednesday = 3,
-  Thursday = 4,
-  Friday = 5,
-  Saturday = 6
-}
+/**
+ * @param value date string in Dutch format DD-MM-YYYY
+ */
+export declare function parseToValueFormat(value: string | undefined): string | undefined;
 export declare function createDate(year: string, month: string, day: string): Date | undefined;
 /**
- * @param value date string in Dutch format D-M-YYYY
+ * @param value date string in format D-M-YYYY
  */
-export declare function parseDutchDate(value: string | undefined): Date | undefined;
+export declare function parseDate(value: string | undefined): Date | undefined;
 /**
  * print date in format DD-MM-YYYY
  * @param date
  */
 export declare function printDutchDate(date: Date | undefined): string;
-/**
- * Compare if two dates are equal in terms of day, month, and year
- */
-export declare function isEqual(a: Date | undefined, b: Date | undefined): boolean;
-export declare function addDays(date: Date, days: number): Date;
-export declare function addMonths(date: Date, months: number): Date;
-export declare function addYears(date: Date, years: number): Date;
-export declare function startOfWeek(date: Date, firstDayOfWeek?: DaysOfWeek): Date;
-export declare function endOfWeek(date: Date, firstDayOfWeek?: DaysOfWeek): Date;
-export declare function startOfMonth(date: Date): Date;
-export declare function endOfMonth(date: Date): Date;
-export declare function setMonth(date: Date, month: number): Date;
-export declare function setYear(date: Date, year: number): Date;
-/**
- * Check if date is within a min and max
- */
-export declare function inRange(date: Date, min?: Date, max?: Date): boolean;
 /**
  * Ensures date is within range, returns min or max if out of bounds
  */
 export declare function clamp(date: Date, min?: Date, max?: Date): Date;
-/**
- * given a date, return an array of dates from a calendar perspective
- * @param date
- * @param firstDayOfWeek
- */
-export declare function getViewOfMonth(date: Date, firstDayOfWeek?: DaysOfWeek): Date[];

package/dist/types/components/viewer-grid/components/document-panel.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { EventEmitter, FunctionalComponent } from "../../../stencil-public-runtime";
+import { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from "../viewer-grid.interfaces";
+export interface ViewerGridDocumentPanelProps {
+  tabView: boolean;
+  panelSize: ViewerGridPanelSize;
+  shrinkDocumentPanel: () => void;
+  expandDocumentPanel: () => void;
+  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;
+}
+export declare const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps>;

package/dist/types/components/viewer-grid/components/index.d.ts CHANGED Viewed

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

package/dist/types/components/viewer-grid/components/main-panel.d.ts CHANGED Viewed

@@ -1,10 +1,16 @@
-import { FunctionalComponent } from "../../../stencil-public-runtime";
-import { MainSize } from "../viewer-grid.interfaces";
+import { EventEmitter, FunctionalComponent } from "../../../stencil-public-runtime";
+import { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from "../viewer-grid.interfaces";
 export interface ViewerGridMainPanelProps {
-  ref: ((element: HTMLDivElement | undefined) => void) | undefined;
+  mode: ViewerGridMode;
   tabView: boolean;
-  mainSize: MainSize;
+  mainSize: ViewerGridPanelSize;
+  documentPanelOpen: boolean;
+  mainPanelExpanded: boolean;
+  mainPanelHidden: boolean;
   shrinkMain: () => void;
   expandMain: () => void;
+  expandContent: () => void;
+  toggleMainPanel: () => void;
+  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;
 }
 export declare const MainPanel: FunctionalComponent<ViewerGridMainPanelProps>;

package/dist/types/components/viewer-grid/viewer-grid.d.ts CHANGED Viewed

@@ -1,9 +1,20 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { MainSize, Tabs, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./viewer-grid.interfaces";
+import { ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridActiveTabSwitchEvent, ViewerGridMode } from "./viewer-grid.interfaces";
+/**
+ * @slot main
+ * @slot map
+ * @slot filterpanel
+ * @slot overlay
+ * @slot document-panel - VDK only
+ * @slot main-expanded - VDK only
+ */
 export declare class ViewerGrid {
   private mediaCondition;
-  private tabLabelMap;
-  private mainPanel?;
+  private mapElement?;
+  /**
+   * VRK or VDK implementation.
+   */
+  mode: ViewerGridMode;
   /**
    * Set to true when filterpanel should show.
    */
@@ -13,14 +24,33 @@ export declare class ViewerGrid {
    */
   overlayOpen: boolean;
   /**
-   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+   * **VDK only.** Set to true when document panel should show.
+   */
+  documentPanelOpen: boolean;
+  /**
+   * Size of the panel when component loads.
    *
    * Default size is `large`.
    */
-  initialMainSize?: MainSize;
-  mainSize: MainSize;
-  tabView: boolean;
-  activeTab: Tabs;
+  mainSize: ViewerGridPanelSize;
+  /**
+   * Set active tab in tab view.
+   */
+  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;
+  /**
+   * **VDK only.** Size of the panel when component loads.
+   *
+   * Default size is `large`.
+   */
+  documentPanelSize: ViewerGridPanelSize;
+  /**
+   * **VDK only.** Set to show main panel expanded.
+   */
+  mainPanelExpanded: boolean;
+  /**
+   * **VDK only.** Set to hide the main panel.
+   */
+  mainPanelHidden: boolean;
   /**
    * Emitted when user wants to close the overlay.
    */
@@ -34,25 +64,60 @@ export declare class ViewerGrid {
    */
   dsoFilterpanelApply: EventEmitter<ViewerGridFilterpanelApplyEvent>;
   /**
-   * Emitted before and after main size animation. Inspect `detail` property for more information.
+   * Emitted when user applies filterpanel options.
+   */
+  dsoActiveTabSwitch: EventEmitter<ViewerGridActiveTabSwitchEvent>;
+  /**
+   * Emitted on interaction with sizing buttons.
    */
   dsoMainSizeChange: EventEmitter<ViewerGridChangeSizeEvent>;
+  /**
+   * Emitted after main size animation.
+   */
+  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;
+  /**
+   * **VDK only.** Emitted on interaction with sizing buttons.
+   */
+  dsoDocumentPanelSizeChange: EventEmitter<ViewerGridChangeSizeEvent>;
+  /**
+   * **VDK only.** Emitted after main size animation.
+   */
+  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;
+  /**
+   * **VDK only.** Emitted when the user wants to expand the main panel.
+   */
+  dsoMainPanelExpand: EventEmitter<ViewerGridMainExpandEvent>;
+  /**
+   * **VDK only.** Emitted when the user toggles the visibility of the main panel.
+   *
+   * Also emitted by scripting when the panels do not fit anymore.
+   */
+  dsoMainPanelToggle: EventEmitter<ViewerGridMainToggleEvent>;
   host: HTMLDsoViewerGridElement;
+  tabView: boolean;
   private filterpanel;
-  private filterpanelSlot;
+  private get filterpanelSlot();
+  private get overlaySlot();
   private overlay;
-  private overlaySlot;
-  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize): void;
+  documentPanelOpenWatcher(open: boolean): void;
   filterpanelOpenWatcher(open: boolean): void;
   overlayOpenWatcher(open: boolean): void;
-  private shrinkMain;
-  private expandMain;
+  /**
+   * @internal
+   */
+  _checkMainPanelVisibility(): Promise<void>;
+  private switchActiveTab;
+  private emitShrinkMain;
+  private emitExpandMain;
+  private shrinkDocumentPanel;
+  private expandDocumentPanel;
+  private expandContent;
+  private toggleMainPanel;
   private changeListener;
+  private handleFilterpanelApply;
+  private handleFilterpanelCancel;
   connectedCallback(): void;
   componentDidLoad(): void;
-  componentWillLoad(): void;
   disconnectedCallback(): void;
-  private handleFilterpanelApply;
-  private handleFilterpanelCancel;
   render(): any;
 }