@dso-toolkit/core 70.1.0 → 71.0.0

package/dist/types/components/autosuggest/autosuggest.d.ts

@@ -75,6 +75,7 @@ export declare class Autosuggest {
     private inputValue;
     private onInput;
     private onFocusIn;
+    private ariaAutoSuggestStatus;
     onDocumentClick(event: MouseEvent): void;
     private text;
     componentDidRender(): void;
@@ -105,5 +106,6 @@ export declare class Autosuggest {
     private listboxGroupedItemId;
     private getMarkedChunkedExtras;
     private getMarkedSuggestions;
+    private updateAriaAutoSuggestStatus;
     render(): any;
 }

package/dist/types/components/document-component/document-component.d.ts

@@ -1,5 +1,6 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { DocumentComponentOpenToggleEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentWijzigactie, DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentMode, DocumentComponentTableOfContentsClickEvent } from "./document-component.models";
+import { OzonContentUrlResolver } from "../ozon-content/ozon-content.interfaces";
 /**
  * @part _annotation-container - private part, do not touch.
  * @part _children-container - private part, do not touch.
@@ -94,6 +95,10 @@ export declare class DocumentComponent implements ComponentInterface {
      * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.
      */
     recursiveToggle: DocumentComponentRecursiveToggleState;
+    /**
+     * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+     */
+    ozonContentUrlResolver?: OzonContentUrlResolver;
     /**
      * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
      */

package/dist/types/components/document-component-demo/document-component.demo.d.ts

@@ -1,9 +1,10 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 import { DocumentComponentMode, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentTableOfContentsClickEvent, DocumentComponentWijzigactie } from "../document-component/document-component.models";
+import { OzonContentUrlResolver } from "../../components";
 interface DocumentEmbedded {
     _embedded?: {
-        ontwerpTekststructuurDocumentComponenten?: DocumentComponent[];
-        tekststructuurDocumentComponenten?: DocumentComponent[];
+        ontwerpDocumentComponenten?: DocumentComponent[];
+        documentComponenten?: DocumentComponent[];
     };
 }
 interface DocumentComponent extends DocumentEmbedded {
@@ -14,6 +15,7 @@ interface DocumentComponent extends DocumentEmbedded {
     volgordeNummer: number;
     opschrift?: string;
     inhoud?: string;
+    kop?: string;
     gereserveerd?: boolean;
     vervallen?: boolean;
     bevatOntwerpInformatie?: boolean;
@@ -37,6 +39,10 @@ export declare class DocumentComponentDemo implements ComponentInterface {
      * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document"
      */
     mode: DocumentComponentMode;
+    /**
+     * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+     */
+    ozonContentUrlResolver?: OzonContentUrlResolver;
     /**
      * To demo user interacting with IntRef or IntIoRef elements.
      */

package/dist/types/components/ozon-content/nodes/ext-ref.node.d.ts

@@ -2,5 +2,5 @@ import { OzonContentNodeContext } from "../ozon-content-node-context.interface";
 import { OzonContentNode } from "../ozon-content-node.interface";
 export declare class OzonContentExtRefNode implements OzonContentNode {
     name: string[];
-    render(node: Element, { mapNodeToJsx }: OzonContentNodeContext): any;
+    render(node: Element, { mapNodeToJsx, urlResolver }: OzonContentNodeContext): any;
 }

package/dist/types/components/ozon-content/nodes/figuur.node.d.ts

@@ -2,5 +2,7 @@ import { OzonContentNodeContext } from "../ozon-content-node-context.interface";
 import { OzonContentNode } from "../ozon-content-node.interface";
 export declare class OzonContentFiguurNode implements OzonContentNode {
     name: string[];
-    render(node: Element, { mapNodeToJsx }: OzonContentNodeContext): any;
+    private getStyle;
+    private mapIllustratieNode;
+    render(node: Element, { mapNodeToJsx, urlResolver }: OzonContentNodeContext): any;
 }

package/dist/types/components/ozon-content/nodes/inline-tekst-afbeelding.node.d.ts

@@ -1,5 +1,6 @@
 import { OzonContentNode } from "../ozon-content-node.interface";
+import { OzonContentNodeContext } from "../ozon-content-node-context.interface";
 export declare class OzonContentInlineTekstAfbeeldingNode implements OzonContentNode {
     name: string[];
-    render(node: Element): any;
+    render(node: Element, { urlResolver }: OzonContentNodeContext): any;
 }

package/dist/types/components/ozon-content/ozon-content-context.interface.d.ts

@@ -1,12 +1,12 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { OzonContentNodeState } from "./ozon-content-node-state.interface";
-import { OzonContentAnchorClickEvent, OzonContentMarkFunction } from "./ozon-content.interfaces";
+import { OzonContentAnchorClickEvent, OzonContentMarkFunction, OzonContentUrlResolver } from "./ozon-content.interfaces";
 export interface OzonContentContext {
     state: OzonContentNodeState;
-    addSpaceBeforeNode: boolean;
     inline: boolean;
     mark: OzonContentMarkFunction | undefined;
     setState(state: OzonContentNodeState): void;
     emitAnchorClick: EventEmitter<OzonContentAnchorClickEvent>["emit"];
     emitMarkItemHighlight(text: string, ref: HTMLElement): void;
+    urlResolver: OzonContentUrlResolver | undefined;
 }

package/dist/types/components/ozon-content/ozon-content-node-context.interface.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from "../../stencil-public-runtime";
-import { OzonContentAnchorClickEvent, OzonContentMarkFunction } from "./ozon-content.interfaces";
+import { OzonContentAnchorClickEvent, OzonContentMarkFunction, OzonContentUrlResolver } from "./ozon-content.interfaces";
 export interface OzonContentNodeContext<T = unknown> {
     inline: boolean;
     path: Node[];
@@ -9,4 +9,5 @@ export interface OzonContentNodeContext<T = unknown> {
     state?: T;
     setState?(state: T): void;
     emitMarkItemHighlight(text: string, elementRef: HTMLElement): void;
+    urlResolver: OzonContentUrlResolver | undefined;
 }

package/dist/types/components/ozon-content/ozon-content.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter, JSX } from "../../stencil-public-runtime";
-import { OzonContentAnchorClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent } from "./ozon-content.interfaces";
+import { OzonContentAnchorClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./ozon-content.interfaces";
 import { OzonContentNodeState } from "./ozon-content-node-state.interface";
 export declare class OzonContent implements ComponentInterface {
     /**
@@ -10,14 +10,14 @@ export declare class OzonContent implements ComponentInterface {
      * Setting this property creates dso-ozon-content as inline element instead of a block element.
      */
     inline: boolean;
-    /**
-     * Adds a non breaking space to the node element.
-     */
-    addSpaceBeforeNode: boolean;
     /**
      * To mark text.
      */
     mark?: OzonContentMarkFunction;
+    /**
+     * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+     */
+    urlResolver?: OzonContentUrlResolver;
     /**
      * Emitted when `<a>` is clicked.
      */

package/dist/types/components/ozon-content/ozon-content.interfaces.d.ts

@@ -17,3 +17,7 @@ export interface OzonContentMarkItemHighlightEvent {
     elementRef: HTMLElement;
 }
 export type OzonContentWijzigActie = "voegtoe" | "verwijder";
+export interface OzonContentUrlResolver {
+    (name: "Illustratie" | "InlineTekstAfbeelding", attribute: "naam", value: string | null, element: Element): string;
+    (name: "ExtIoRef" | "ExtRef", attribute: "ref", value: string | null, element: Element): string;
+}

package/dist/types/components.d.ts

@@ -21,6 +21,7 @@ import { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DateP
 import { DsoDatePickerLegacyChangeEvent, DsoDatePickerLegacyDirection, DsoDatePickerLegacyFocusEvent, DsoDatePickerLegacyKeyboardEvent } from "./components/date-picker-legacy/date-picker-legacy.interfaces";
 import { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
 import { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
+import { OzonContentAnchorClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
 import { Placement } from "@popperjs/core";
 import { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
 import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
@@ -34,7 +35,6 @@ import { MapControlsToggleEvent } from "./components/map-controls/map-controls.i
 import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
 import { MarkBarClearEvent, MarkBarFocusOptions, MarkBarInputEvent, MarkBarPaginationEvent } from "./components/mark-bar/mark-bar.interfaces";
 import { ModalCloseEvent } from "./components/modal/modal.interfaces";
-import { OzonContentAnchorClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent } from "./components/ozon-content/ozon-content.interfaces";
 import { PaginationSelectPageEvent } from "./components/pagination/pagination.interfaces";
 import { PanelCloseEvent } from "./components/panel/panel";
 import { PlekinfoCardClickEvent, PlekinfoWijzigactie } from "./components/plekinfo-card/plekinfo-card.interfaces";
@@ -47,6 +47,7 @@ import { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from "./components/su
 import { TabsSwitchEvent } from "./components/tabs/tabs.interfaces";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseFilterpanelEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
+import { OzonContentUrlResolver as OzonContentUrlResolver1 } from "./components";
 export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 export { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from "./components/renvooi/renvooi.interfaces";
 export { AccordionHeading, AccordionSectionActiveChangeEvent, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent, AccordionSectionWijzigactie } from "./components/accordion/components/accordion-section.interfaces";
@@ -63,6 +64,7 @@ export { DatePickerBlurEvent, DatePickerChangeEvent, DatePickerFocusEvent, DateP
 export { DsoDatePickerLegacyChangeEvent, DsoDatePickerLegacyDirection, DsoDatePickerLegacyFocusEvent, DsoDatePickerLegacyKeyboardEvent } from "./components/date-picker-legacy/date-picker-legacy.interfaces";
 export { DocumentCardClickEvent } from "./components/document-card/document-card.interfaces";
 export { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, DocumentComponentMarkFunction, DocumentComponentMarkItemHighlightEvent, DocumentComponentMode, DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentRecursiveToggleEvent, DocumentComponentRecursiveToggleState, DocumentComponentTableOfContentsClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
+export { OzonContentAnchorClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent, OzonContentUrlResolver } from "./components/ozon-content/ozon-content.interfaces";
 export { Placement } from "@popperjs/core";
 export { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
 export { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
@@ -76,7 +78,6 @@ export { MapControlsToggleEvent } from "./components/map-controls/map-controls.i
 export { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
 export { MarkBarClearEvent, MarkBarFocusOptions, MarkBarInputEvent, MarkBarPaginationEvent } from "./components/mark-bar/mark-bar.interfaces";
 export { ModalCloseEvent } from "./components/modal/modal.interfaces";
-export { OzonContentAnchorClickEvent, OzonContentInputType, OzonContentMarkFunction, OzonContentMarkItemHighlightEvent } from "./components/ozon-content/ozon-content.interfaces";
 export { PaginationSelectPageEvent } from "./components/pagination/pagination.interfaces";
 export { PanelCloseEvent } from "./components/panel/panel";
 export { PlekinfoCardClickEvent, PlekinfoWijzigactie } from "./components/plekinfo-card/plekinfo-card.interfaces";
@@ -89,6 +90,7 @@ export { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from "./components/su
 export { TabsSwitchEvent } from "./components/tabs/tabs.interfaces";
 export { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 export { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseFilterpanelEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
+export { OzonContentUrlResolver as OzonContentUrlResolver1 } from "./components";
 export namespace Components {
     interface DsoAccordion {
         "_getState": () => Promise<AccordionInternalState>;
@@ -608,6 +610,10 @@ export namespace Components {
           * @deprecated Use `kop` instead.
          */
         "opschrift"?: DocumentComponentInputType;
+        /**
+          * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+         */
+        "ozonContentUrlResolver"?: OzonContentUrlResolver;
         /**
           * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.
          */
@@ -976,10 +982,6 @@ export namespace Components {
         "showCloseButton": boolean;
     }
     interface DsoOzonContent {
-        /**
-          * Adds a non breaking space to the node element.
-         */
-        "addSpaceBeforeNode": boolean;
         /**
           * The XML to be rendered.
          */
@@ -992,6 +994,10 @@ export namespace Components {
           * To mark text.
          */
         "mark"?: OzonContentMarkFunction;
+        /**
+          * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+         */
+        "urlResolver"?: OzonContentUrlResolver;
     }
     interface DsoPagination {
         /**
@@ -1331,6 +1337,10 @@ export namespace Components {
           * The default state for all Document Components.
          */
         "openDefault": boolean;
+        /**
+          * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+         */
+        "ozonContentUrlResolver"?: OzonContentUrlResolver1;
         /**
           * Show canvas to where Document Component extends.
          */
@@ -3104,6 +3114,10 @@ declare namespace LocalJSX {
           * @deprecated Use `kop` instead.
          */
         "opschrift"?: DocumentComponentInputType;
+        /**
+          * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+         */
+        "ozonContentUrlResolver"?: OzonContentUrlResolver;
         /**
           * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.
          */
@@ -3554,10 +3568,6 @@ declare namespace LocalJSX {
         "showCloseButton"?: boolean;
     }
     interface DsoOzonContent {
-        /**
-          * Adds a non breaking space to the node element.
-         */
-        "addSpaceBeforeNode"?: boolean;
         /**
           * The XML to be rendered.
          */
@@ -3578,6 +3588,10 @@ declare namespace LocalJSX {
           * Emitted when a marked item is highlighted.
          */
         "onDsoOzonContentMarkItemHighlight"?: (event: DsoOzonContentCustomEvent<OzonContentMarkItemHighlightEvent>) => void;
+        /**
+          * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+         */
+        "urlResolver"?: OzonContentUrlResolver;
     }
     interface DsoPagination {
         /**
@@ -4003,6 +4017,10 @@ declare namespace LocalJSX {
           * The default state for all Document Components.
          */
         "openDefault"?: boolean;
+        /**
+          * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+         */
+        "ozonContentUrlResolver"?: OzonContentUrlResolver1;
         /**
           * Show canvas to where Document Component extends.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "70.1.0",
+  "version": "71.0.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -23,7 +23,7 @@
     "@stencil/core": "4.28.2",
     "@stencil/store": "^2.1.2",
     "clsx": "^2.1.1",
-    "dso-toolkit": "^70.1.0",
+    "dso-toolkit": "^71.0.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.6.4",
     "i18next": "^24.2.3",
@@ -54,7 +54,7 @@
     "typescript": "~5.6.3"
   },
   "peerDependencies": {
-    "dso-toolkit": "70.1.0"
+    "dso-toolkit": "71.0.0"
   },
   "nx": {
     "includedScripts": []

package/dist/dso-toolkit/p-1d4589b3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","SizingButton","className","onClick","label","icon","h","type","class","SizingButtons","shrink","expand","size","panelLabel","placement","buttons","push","toLocaleLowerCase","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","onTransitionEnd","e","propertyName","emit","currentSize","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","title","mode","ref","dsoCloseFilterpanel","id","clsx","preventDefault","Fragment","MainPanel","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","toggleMainPanel","dsoMainSizeChangeAnimationEnd","compact","contracted","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","constructor","hostRef","this","mediaCondition","filterpanelOpen","overlayOpen","documentPanelSize","window","innerWidth","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","showFilterpanel","_a","filterpanel","show","_b","showModal","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","key","activeTab","filterpanelTitle"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridCloseFilterpanelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  main: \"Hoofdpaneel\",\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n  className: string;\r\n  onClick: any;\r\n  label: string;\r\n  icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n  <button type=\"button\" class={className} onClick={onClick}>\r\n    <span class=\"sr-only\">{label}</span>\r\n    <dso-icon icon={icon}></dso-icon>\r\n  </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n  panelLabel: string;\r\n  size: ViewerGridPanelSize;\r\n  expand: () => void;\r\n  shrink: () => void;\r\n  placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n  shrink,\r\n  expand,\r\n  size,\r\n  panelLabel,\r\n  placement,\r\n}) => {\r\n  const buttons = [];\r\n\r\n  if (size !== \"small\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={shrink}\r\n        label={`${panelLabel} smaller maken`}\r\n        icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n        className=\"shrink\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  if (size !== \"large\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={expand}\r\n        label={`${panelLabel} breder maken`}\r\n        icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n        className=\"expand\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div class=\"sizing-buttons\">\r\n      <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n      </span>\r\n      {buttons}\r\n    </div>\r\n  );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <SizingButtons\r\n        panelLabel=\"Documentpaneel\"\r\n        size={panelSize}\r\n        expand={expandDocumentPanel}\r\n        shrink={shrinkDocumentPanel}\r\n        placement=\"right\"\r\n      />\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { ViewerGridMode } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  title?: string;\r\n  mode: ViewerGridMode;\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n  dsoCloseFilterpanel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n  title,\r\n  mode,\r\n  ref,\r\n  onApply,\r\n  onCancel,\r\n  dsoCloseFilterpanel,\r\n}) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class={clsx(`filterpanel-${mode}`, \"filterpanel\")}\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      if (mode === \"vrk\") {\r\n        onCancel(e);\r\n      } else {\r\n        dsoCloseFilterpanel(e);\r\n      }\r\n    }}\r\n  >\r\n    {mode === \"vrk\" ? (\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      </>\r\n    ) : (\r\n      <>\r\n        {title && <h3>{title}</h3>}\r\n        <button type=\"button\" class=\"dso-close\" onClick={dsoCloseFilterpanel}>\r\n          <dso-icon icon=\"times\"></dso-icon>\r\n          <span class=\"sr-only\">Sluiten</span>\r\n        </button>\r\n        <slot name=\"filterpanel\" />\r\n      </>\r\n    )}\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  mode: ViewerGridMode;\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  mode,\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  shrinkMain,\r\n  expandMain,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      contracted: !tabView && !documentPanelOpen && !mainPanelExpanded && mode === \"vdk\",\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView &&\r\n      ((mode === \"vrk\" && (\r\n        <SizingButtons\r\n          panelLabel=\"Hoofdpaneel\"\r\n          size={mainSize}\r\n          expand={expandMain}\r\n          shrink={shrinkMain}\r\n          placement=\"left\"\r\n        />\r\n      )) ||\r\n        (mode === \"vdk\" && documentPanelOpen && (\r\n          <div class=\"toggle-button\">\r\n            <button type=\"button\" onClick={toggleMainPanel}>\r\n              <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n              <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n            </button>\r\n          </div>\r\n        )))}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n  .overlay {\r\n    block-size: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  inset-block-start: units.$u1;\r\n  inset-inline-end: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    block-size: 100%;\r\n    padding-block: 0;\r\n    padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      inset-inline-start: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact,\r\n  &.contracted {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    block-size: 100%;\r\n  }\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin-block: units.$u1;\r\n    margin-inline: 0;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    inset-inline-start: calc(100% + 1px);\r\n    transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: 0 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-end-end-radius: 4px;\r\n      border-start-end-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n:host[mode=\"vdk\"] {\r\n  .dso-main-panel {\r\n    transition:\r\n      min-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n      margin-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n    min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    inset-block-start: auto;\r\n    inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n    inset-inline-end: calc(100% + 1px);\r\n    transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n    padding-block: 0 units.$u1;\r\n    padding-inline: units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-end-start-radius: 4px;\r\n      border-start-start-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n  inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      border: 0;\r\n      padding: 8px;\r\n      border-radius: 0;\r\n      box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n      flex: 0 0 100%;\r\n      block-size: core-viewer-grid-variables.$resize-button-size;\r\n      min-inline-size: auto;\r\n      inline-size: core-viewer-grid-variables.$resize-button-size;\r\n    }\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline-offset: -1px;\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  block-size: 100%;\r\n  margin-block: 0;\r\n  max-block-size: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding-block: units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-start: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-inline-size) {\r\n    inline-size: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include heading.base();\r\n    @include heading.margin-large();\r\n    @include heading.h1();\r\n  }\r\n}\r\n\r\n.filterpanel-vdk {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-start: 0;\r\n  inset-inline-start: calc(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size * -1);\r\n  block-size: 100%;\r\n  inline-size: 100%;\r\n  transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n\r\n  @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n    max-inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n  }\r\n\r\n  &[open] {\r\n    inset-inline-start: 0;\r\n    box-shadow: none;\r\n    border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\r\n  }\r\n\r\n  h3 {\r\n    color: colors.$bosgroen;\r\n  }\r\n\r\n  .dso-close {\r\n    @include button.element();\r\n\r\n    position: absolute;\r\n    inset-block-start: units.$u2;\r\n    inset-inline-end: units.$u2;\r\n\r\n    block-size: units.$u4;\r\n    inline-size: units.$u4;\r\n\r\n    padding: 0;\r\n\r\n    background-color: transparent;\r\n\r\n    border: 0;\r\n    text-align: center;\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding-block: units.$u5 units.$u1;\r\n  padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n  inset-inline-end: 0;\r\n  inline-size: core-viewer-grid-variables.$overlay-inline-size;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-inline-size) {\r\n    inline-size: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: end;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-inline-start: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-inline-size: 0;\r\n    max-inline-size: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-inline-size: core-viewer-grid-variables.$small;\r\n    max-inline-size: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-inline-size: core-viewer-grid-variables.$large-min;\r\n    max-inline-size: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-inline-size: 100vw;\r\n      min-inline-size: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    block-size: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-inline-size: unset;\r\n      max-inline-size: unset;\r\n      inline-size: 440px;\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n    .content {\r\n      overflow-y: auto;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    margin-inline: 0 auto;\r\n    inline-size: calc(100vw - 40px);\r\n\r\n    &[open] {\r\n      box-shadow: 2px 0 5px colors.$grijs-60;\r\n    }\r\n\r\n    &.filterpanel-vrk {\r\n      max-inline-size: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n\r\n      &::before {\r\n        content: \"\";\r\n        display: block;\r\n        position: fixed;\r\n        inset-block-start: 0;\r\n        inset-block-end: 0;\r\n        inset-inline-end: 0;\r\n        inset-inline-start: core-viewer-grid-variables.$filterpanel-max-inline-size;\r\n        background-color: rgba(0, 0, 0, 0.5);\r\n\r\n        @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-inline-size + 40px}) {\r\n          inset-inline-start: auto;\r\n          inline-size: 40px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .filterpanel-vdk[open] {\r\n    box-shadow: none;\r\n    border-inline-end: 1px solid core-viewer-grid-variables.$filterpanel-vdk-border-color;\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  @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n    :host([filterpanel-open][mode=\"vdk\"]) {\r\n      .dso-main-panel {\r\n        margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n        max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filterpanel-vdk-max-inline-size});\r\n      }\r\n    }\r\n\r\n    .filterpanel-vdk {\r\n      inline-size: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n      inset-inline-start: -(core-viewer-grid-variables.$filterpanel-vdk-max-inline-size);\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    inline-size: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      font-weight: 300;\r\n    }\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-inline-size: 100vw;\r\n    inset-block-start: 0;\r\n    inline-size: 100vw;\r\n  }\r\n\r\n  .filterpanel-vdk {\r\n    inline-size: 100vw;\r\n    inset-inline-start: -100vw;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n  :host([filterpanel-open][mode=\"vdk\"]) {\r\n    .dso-main-panel {\r\n      margin-inline-start: core-viewer-grid-variables.$filterpanel-vdk-max-inline-size;\r\n    }\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  ViewerGridCloseFilterpanelEvent,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * VRK or VDK implementation.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * **VDK only.** The title of the Filterpanel\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelTitle?: string;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when user wants to close the filterpanel.\r\n   */\r\n  @Event()\r\n  dsoCloseFilterpanel!: EventEmitter<ViewerGridCloseFilterpanelEvent>;\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.showFilterpanel(this.mode);\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.mode === \"vdk\" &&\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private showFilterpanel = (mode: ViewerGridMode) => {\r\n    if (mode === \"vdk\") {\r\n      // 'vdk' mode displays the filterpanel modelessly, i.e. still allowing interaction with content outside it.\r\n      this.filterpanel?.show();\r\n    } else {\r\n      // 'vrk' mode displays the filterpanel as a modal; interaction outside the dialog is blocked and the content\r\n      // outside it is rendered inert\r\n      this.filterpanel?.showModal();\r\n    }\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.showFilterpanel(this.mode);\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                    {viewerGridTabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && (this.activeTab === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            documentPanelOpen={this.documentPanelOpen}\r\n            mainPanelExpanded={this.mainPanelExpanded}\r\n            mainPanelHidden={this.mainPanelHidden}\r\n            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        {(!this.tabView ||\r\n          (this.tabView && ((this.activeTab === \"main\" && this.mode === \"vrk\") || this.activeTab === \"search\"))) && (\r\n          <Filterpanel\r\n            title={this.filterpanelTitle}\r\n            mode={this.mode}\r\n            ref={(element) => (this.filterpanel = element)}\r\n            onApply={this.handleFilterpanelApply}\r\n            onCancel={this.handleFilterpanelCancel}\r\n            dsoCloseFilterpanel={(e) => this.dsoCloseFilterpanel.emit({ originalEvent: e })}\r\n          ></Filterpanel>\r\n        )}\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n          <DocumentPanel\r\n            tabView={this.tabView}\r\n            panelSize={this.documentPanelSize}\r\n            shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n            expandDocumentPanel={this.expandDocumentPanel}\r\n            dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n          ></DocumentPanel>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-95d77ea8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","headerCss","minDesktopViewportWidth","Header","constructor","hostRef","this","mainMenu","useDropDownMenu","authStatus","showHelp","overflowMenuItems","dropdownOptionsOffset","text","i18n","host","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","shrinkMenuToFit","wrapper","nav","clientWidth","length","componentDidRender","window","setTimeout","componentDidLoad","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","strategy","slot","icon","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","helpUrl","filter","_","index","placement","userHomeActive"],"sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Log in\",\r\n      logout: \"Log out\",\r\n      help: \"Help\",\r\n      overflowMenu: \"More\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-header\": {\r\n      menu: \"Menu\",\r\n      login: \"Inloggen\",\r\n      logout: \"Uitloggen\",\r\n      help: \"Help\",\r\n      overflowMenu: \"Meer\",\r\n      userHome: \"Mijn Omgevingsloket\",\r\n    },\r\n  },\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/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n  border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n  font-size: 1.25em;\r\n  line-height: 1;\r\n  margin-block-start: units.$u1;\r\n  padding-block: units.$u2;\r\n  padding-inline: 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-header {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  position: relative;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n    &.use-drop-down {\r\n      flex-wrap: nowrap;\r\n    }\r\n  }\r\n\r\n  .dso-nav {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.logo-container {\r\n  flex: 1 1 12.5rem;\r\n  margin-inline-end: units.$u3;\r\n  padding-block-end: units.$u2;\r\n  padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  align-items: center;\r\n  margin-inline-start: auto;\r\n\r\n  .profile,\r\n  .login,\r\n  .logout,\r\n  .help {\r\n    .dso-tertiary {\r\n      display: flex;\r\n      gap: 0.5rem;\r\n\r\n      cursor: pointer;\r\n\r\n      border: 0;\r\n\r\n      background-color: transparent;\r\n\r\n      padding-inline-start: 0;\r\n\r\n      outline-offset: 2px;\r\n\r\n      font-family: typography.$font-family-base;\r\n      color: colors.$grasgroen;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      line-height: 1.5;\r\n      text-decoration: none;\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n\r\n  .profile {\r\n    margin-inline-start: units.$u1;\r\n\r\n    + .logout,\r\n    ~ .help {\r\n      border-inline-start: 3px solid colors.$grijs-20;\r\n      margin-inline-start: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n    }\r\n  }\r\n\r\n  .help {\r\n    a,\r\n    button {\r\n      display: flex;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n}\r\n\r\ndso-dropdown-menu {\r\n  @include dropdown-menu.children();\r\n\r\n  button {\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    align-items: center;\r\n    position: relative;\r\n\r\n    dso-icon {\r\n      inline-size: units.$u3;\r\n      block-size: units.$u3;\r\n      margin-inline-start: units.$u1;\r\n      padding-block-start: units.$u1 * 0.25;\r\n    }\r\n\r\n    &[aria-expanded=\"true\"] {\r\n      dso-icon {\r\n        transform: rotate(180deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      inline-size: 375px;\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      inline-size: 100%;\r\n    }\r\n\r\n    ul {\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n\r\n      li {\r\n        a,\r\n        button {\r\n          display: block;\r\n          padding: units.$u2;\r\n          color: colors.$bosgroen;\r\n          font-size: 1.25rem;\r\n          white-space: pre-wrap;\r\n          text-decoration: none;\r\n\r\n          &:focus-visible {\r\n            background-color: colors.$grasgroen;\r\n            color: colors.$wit;\r\n          }\r\n\r\n          &:hover {\r\n            background-color: colors.$wit;\r\n            color: colors.$bosgroen;\r\n            text-decoration: underline;\r\n          }\r\n\r\n          &:visited {\r\n            color: colors.$bosgroen;\r\n          }\r\n        }\r\n\r\n        button {\r\n          inline-size: 100%;\r\n          text-align: start;\r\n\r\n          dso-icon {\r\n            margin-inline-start: units.$u1;\r\n          }\r\n        }\r\n\r\n        &.dso-active {\r\n          a {\r\n            font-weight: 600;\r\n          }\r\n        }\r\n\r\n        + li {\r\n          border-block-start: 1px solid colors.$grijs-20;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    .dso-dropdown-options {\r\n      inset-inline-end: 0;\r\n      inset-block-start: 100%;\r\n      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    > button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-inline-start: units.$u1;\r\n        position: absolute;\r\n        inset-inline-end: 0px;\r\n        inset-block-start: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n\r\n      &:hover,\r\n      &:active {\r\n        cursor: pointer;\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-nav {\r\n  align-items: end;\r\n  column-gap: units.$u4;\r\n  display: flex;\r\n  list-style: none;\r\n  margin-block-end: 0;\r\n  margin-block-start: 0;\r\n  padding-inline-start: 0;\r\n\r\n  > li {\r\n    margin-block-end: 4px;\r\n\r\n    > a {\r\n      display: block;\r\n\r\n      &,\r\n      &:hover,\r\n      &:focus,\r\n      &:visited {\r\n        color: colors.$bosgroen;\r\n      }\r\n    }\r\n\r\n    &.dso-active,\r\n    &.is-active {\r\n      margin-block-end: 0;\r\n\r\n      > a {\r\n        @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n        font-weight: bold;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-nav-main {\r\n    display: flex !important;\r\n\r\n    > li {\r\n      > a {\r\n        @include anchor.reverse();\r\n        @include nav-item-main();\r\n\r\n        // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    dso-dropdown-menu {\r\n      .dso-dropdown-options {\r\n        inset-inline-start: units.$ru2 * -1 !important;\r\n        inset-block-start: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: flex-end;\r\n        color: colors.$bosgroen;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-inline-start: units.$u1;\r\n          position: absolute;\r\n          inset-inline-end: 0px;\r\n          inset-block-start: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .menu-user-home {\r\n    margin-inline-start: auto;\r\n\r\n    dso-icon {\r\n      block-size: 1em;\r\n      margin-inline-end: units.$u1;\r\n      position: relative;\r\n      inset-block-start: -2px;\r\n      inline-size: 1.2em;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  shadow: true,\r\n})\r\nexport class Header {\r\n  private clickHandler(\r\n    e: MouseEvent,\r\n    type: HeaderNavigationType,\r\n    options?: { menuItem?: HeaderMenuItem; url?: string },\r\n  ) {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  }\r\n\r\n  private dropdownElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu?: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Either have the dropdown menu appear automatically or always.\r\n   */\r\n  @Prop()\r\n  useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n   * The login button will then render as an anchor.\r\n   */\r\n  @Prop()\r\n  loginUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"logout\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  logoutUrl?: string;\r\n\r\n  /**\r\n   * Show a help-button or link in the header\r\n   */\r\n  @Prop()\r\n  showHelp? = false;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"help\".\r\n   * If no URL is specified, a button element is used instead.\r\n   */\r\n  @Prop()\r\n  helpUrl?: string;\r\n\r\n  /**\r\n   * The name to show when the user is logged in.\r\n   */\r\n  @Prop()\r\n  userProfileName?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates the profile url.\r\n   */\r\n  @Prop()\r\n  userProfileUrl?: string;\r\n\r\n  /**\r\n   * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeUrl?: string;\r\n\r\n  /**\r\n   * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n   */\r\n  @Prop()\r\n  userHomeActive?: boolean;\r\n\r\n  @State()\r\n  showDropDown?: boolean;\r\n\r\n  @State()\r\n  overflowMenuItems = 0;\r\n\r\n  @State()\r\n  dropdownOptionsOffset = 0;\r\n\r\n  /**\r\n   * Emitted when something in the header is selected.\r\n   *\r\n   * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n   */\r\n  @Event()\r\n  dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n  @Watch(\"useDropDownMenu\")\r\n  setShowDropDown(value: \"always\" | \"auto\") {\r\n    if (value === \"auto\") {\r\n      this.setDropDownMenu();\r\n\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = value === \"always\";\r\n  }\r\n\r\n  private wrapper: HTMLDivElement | undefined;\r\n\r\n  private nav: HTMLUListElement | undefined;\r\n\r\n  private shrinkMenuToFit() {\r\n    if (!this.wrapper || !this.nav) {\r\n      return;\r\n    }\r\n\r\n    if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n      return;\r\n    }\r\n\r\n    if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n      return;\r\n    }\r\n\r\n    this.overflowMenuItems++;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n      return;\r\n    }\r\n\r\n    window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setShowDropDown(this.useDropDownMenu);\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }\r\n\r\n  private setOverflowMenu() {\r\n    if (this.showDropDown) {\r\n      return;\r\n    }\r\n\r\n    if (this.overflowMenuItems !== 0) {\r\n      this.overflowMenuItems = 0;\r\n      return;\r\n    }\r\n\r\n    this.shrinkMenuToFit();\r\n  }\r\n\r\n  private setDropDownMenu() {\r\n    if (this.useDropDownMenu !== \"auto\") {\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private onWindowResize = debounce(() => {\r\n    this.dropdownElement?.removeAttribute(\"open\");\r\n    this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n    this.setDropDownMenu();\r\n    this.setOverflowMenu();\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }, 100);\r\n\r\n  connectedCallback() {\r\n    window.addEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  private MenuItem = (item: HeaderMenuItem) => {\r\n    return (\r\n      <li class={item.active ? \"dso-active\" : undefined}>\r\n        <a\r\n          href={item.url}\r\n          aria-current={item.active ? \"page\" : undefined}\r\n          onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n        >\r\n          {item.label}\r\n        </a>\r\n      </li>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    // Prevent 'flickering' when useDropDownMenu = 'always'\r\n    if (this.showDropDown === undefined) {\r\n      return;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <div\r\n          class={clsx(\"dso-header\", {\r\n            [\"use-drop-down\"]: this.showDropDown,\r\n          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <slot name=\"logo\" />\r\n          </div>\r\n          {this.showDropDown &&\r\n            this.mainMenu &&\r\n            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n              <div class=\"dropdown\">\r\n                <dso-dropdown-menu\r\n                  dropdown-align=\"right\"\r\n                  strategy=\"absolute\"\r\n                  dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n                  ref={(element) => (this.dropdownElement = element)}\r\n                >\r\n                  <button type=\"button\" slot=\"toggle\">\r\n                    <span>{this.text(\"menu\")}</span>\r\n                    <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                  </button>\r\n                  <div class=\"dso-dropdown-options\">\r\n                    <ul>\r\n                      {this.mainMenu.map(this.MenuItem)}\r\n                      {this.userHomeUrl && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userHomeUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                          >\r\n                            {this.text(\"userHome\")}\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userProfileUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                          >\r\n                            {this.userProfileName}\r\n                            <span class=\"profile-label\"> - Mijn profiel</span>\r\n                          </a>\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedOut\" && (\r\n                        <li>\r\n                          {this.loginUrl ? (\r\n                            <a\r\n                              href={this.loginUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                            >\r\n                              {this.text(\"login\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              {this.text(\"login\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.authStatus === \"loggedIn\" && (\r\n                        <li>\r\n                          {this.logoutUrl ? (\r\n                            <a\r\n                              href={this.logoutUrl}\r\n                              onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                            >\r\n                              {this.text(\"logout\")}\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              {this.text(\"logout\")}\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                      {this.showHelp && (\r\n                        <li>\r\n                          {this.helpUrl ? (\r\n                            <a\r\n                              href={this.helpUrl}\r\n                              class=\"dso-tertiary\"\r\n                              onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                            >\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                              <span>{this.text(\"help\")}</span>\r\n                              <dso-icon icon=\"help\"></dso-icon>\r\n                            </button>\r\n                          )}\r\n                        </li>\r\n                      )}\r\n                    </ul>\r\n                  </div>\r\n                </dso-dropdown-menu>\r\n              </div>\r\n            )}\r\n          {!this.showDropDown && (\r\n            <>\r\n              <div class=\"dso-header-session\">\r\n                {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"profile\">\r\n                    <a\r\n                      href={this.userProfileUrl}\r\n                      class=\"dso-tertiary\"\r\n                      onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n                    >\r\n                      {this.userProfileName}\r\n                    </a>\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <div class=\"login\">\r\n                    {this.loginUrl ? (\r\n                      <a\r\n                        href={this.loginUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n                      >\r\n                        {this.text(\"login\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        {this.text(\"login\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedIn\" && (\r\n                  <div class=\"logout\">\r\n                    {this.logoutUrl ? (\r\n                      <a\r\n                        href={this.logoutUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n                      >\r\n                        {this.text(\"logout\")}\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        {this.text(\"logout\")}\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {this.showHelp && (\r\n                  <div class=\"help\">\r\n                    {this.helpUrl ? (\r\n                      <a\r\n                        href={this.helpUrl}\r\n                        class=\"dso-tertiary\"\r\n                        onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n                      >\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n                        <span>{this.text(\"help\")}</span>\r\n                        <dso-icon icon=\"help\"></dso-icon>\r\n                      </button>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n              {((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (\r\n                <nav class=\"dso-navbar\">\r\n                  <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n                    {this.mainMenu &&\r\n                      this.mainMenu\r\n                        .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n                        .map(this.MenuItem)}\r\n                    {this.overflowMenuItems > 0 && (\r\n                      <li>\r\n                        <dso-dropdown-menu placement=\"bottom\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>{this.text(\"overflowMenu\")}</span>\r\n                            <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                          </button>\r\n                          <div class=\"dso-dropdown-options\">\r\n                            <ul>\r\n                              {this.mainMenu &&\r\n                                this.mainMenu\r\n                                  .filter(\r\n                                    (_, index) =>\r\n                                      this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n                                  )\r\n                                  .map(this.MenuItem)}\r\n                            </ul>\r\n                          </div>\r\n                        </dso-dropdown-menu>\r\n                      </li>\r\n                    )}\r\n                    {this.userHomeUrl && (\r\n                      <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n                        <a\r\n                          href={this.userHomeUrl}\r\n                          aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                          onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                        >\r\n                          <dso-icon icon=\"user-line\"></dso-icon>\r\n                          {this.text(\"userHome\")}\r\n                        </a>\r\n                      </li>\r\n                    )}\r\n                  </ul>\r\n                </nav>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-cc1ffecd.entry.js

@@ -1,2 +0,0 @@
-import{r as n,c as t,h as e,F as r}from"./p-BzEnSYbR.js";import{c as i,g as o}from"./p-BFTU3MAI.js";var u;var s;function a(){if(s)return u;s=1;var n=1/0,t=9007199254740991,e=17976931348623157e292,r=0/0;var o="[object Arguments]",a="[object Function]",f="[object GeneratorFunction]",c="[object Map]",d="[object Object]",l="[object Promise]",h="[object Set]",v="[object String]",p="[object Symbol]",b="[object WeakMap]";var m="[object DataView]";var y=/[\\^$.*+?()[\]{}|]/g;var g=/^\s+|\s+$/g;var j=/^[-+]0x[0-9a-f]+$/i;var C=/^0b[01]+$/i;var w=/^\[object .+?Constructor\]$/;var A=/^0o[0-7]+$/i;var D=/^(?:0|[1-9]\d*)$/;var O="\\ud800-\\udfff",k="\\u0300-\\u036f\\ufe20-\\ufe23",I="\\u20d0-\\u20f0",T="\\ufe0e\\ufe0f";var $="["+O+"]",F="["+k+I+"]",S="\\ud83c[\\udffb-\\udfff]",M="(?:"+F+"|"+S+")",x="[^"+O+"]",E="(?:\\ud83c[\\udde6-\\uddff]){2}",z="[\\ud800-\\udbff][\\udc00-\\udfff]",R="\\u200d";var L=M+"?",W="["+T+"]?",B="(?:"+R+"(?:"+[x,E,z].join("|")+")"+W+L+")*",V=W+L+B,_="(?:"+[x+F+"?",F,E,z,$].join("|")+")";var K=RegExp(S+"(?="+S+")|"+_+V,"g");var N=RegExp("["+R+O+k+I+T+"]");var P=parseInt;var G=typeof i=="object"&&i&&i.Object===Object&&i;var X=typeof self=="object"&&self&&self.Object===Object&&self;var H=G||X||Function("return this")();function U(n,t){var e=-1,r=n?n.length:0,i=Array(r);while(++e<r){i[e]=t(n[e],e,n)}return i}function Y(n){return n.split("")}function q(n,t){var e=-1,r=Array(n);while(++e<n){r[e]=t(e)}return r}function J(n,t){return U(t,(function(t){return n[t]}))}function Q(n,t){return n==null?undefined:n[t]}function Z(n){return N.test(n)}function nn(n){var t=false;if(n!=null&&typeof n.toString!="function"){try{t=!!(n+"")}catch(n){}}return t}function tn(n){var t,e=[];while(!(t=n.next()).done){e.push(t.value)}return e}function en(n){var t=-1,e=Array(n.size);n.forEach((function(n,r){e[++t]=[r,n]}));return e}function rn(n,t){return function(e){return n(t(e))}}function on(n){var t=-1,e=Array(n.size);n.forEach((function(n){e[++t]=n}));return e}function un(n){return Z(n)?sn(n):Y(n)}function sn(n){return n.match(K)||[]}var an=Function.prototype,fn=Object.prototype;var cn=H["__core-js_shared__"];var dn=function(){var n=/[^.]+$/.exec(cn&&cn.keys&&cn.keys.IE_PROTO||"");return n?"Symbol(src)_1."+n:""}();var ln=an.toString;var hn=fn.hasOwnProperty;var vn=fn.toString;var pn=RegExp("^"+ln.call(hn).replace(y,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var bn=H.Symbol,mn=bn?bn.iterator:undefined,yn=fn.propertyIsEnumerable;var gn=Math.floor,jn=rn(Object.keys,Object),Cn=Math.random;var wn=Bn(H,"DataView"),An=Bn(H,"Map"),Dn=Bn(H,"Promise"),On=Bn(H,"Set"),kn=Bn(H,"WeakMap");var In=Gn(wn),Tn=Gn(An),$n=Gn(Dn),Fn=Gn(On),Sn=Gn(kn);function Mn(n,t){var e=Yn(n)||Un(n)?q(n.length,String):[];var r=e.length,i=!!r;for(var o in n){if(hn.call(n,o)&&!(i&&(o=="length"||_n(o,r)))){e.push(o)}}return e}function xn(n,t,e){if(n===n){if(e!==undefined){n=n<=e?n:e}{n=n>=t?n:t}}return n}function En(n){return vn.call(n)}function zn(n){if(!nt(n)||Nn(n)){return false}var t=Qn(n)||nn(n)?pn:w;return t.test(Gn(n))}function Rn(n){if(!Pn(n)){return jn(n)}var t=[];for(var e in Object(n)){if(hn.call(n,e)&&e!="constructor"){t.push(e)}}return t}function Ln(n,t){return n+gn(Cn()*(t-n+1))}function Wn(n,t){var e=-1,r=n.length;t||(t=Array(r));while(++e<r){t[e]=n[e]}return t}function Bn(n,t){var e=Q(n,t);return zn(e)?e:undefined}var Vn=En;if(wn&&Vn(new wn(new ArrayBuffer(1)))!=m||An&&Vn(new An)!=c||Dn&&Vn(Dn.resolve())!=l||On&&Vn(new On)!=h||kn&&Vn(new kn)!=b){Vn=function(n){var t=vn.call(n),e=t==d?n.constructor:undefined,r=e?Gn(e):undefined;if(r){switch(r){case In:return m;case Tn:return c;case $n:return l;case Fn:return h;case Sn:return b}}return t}}function _n(n,e){e=e==null?t:e;return!!e&&(typeof n=="number"||D.test(n))&&(n>-1&&n%1==0&&n<e)}function Kn(n,t,e){if(!nt(e)){return false}var r=typeof t;if(r=="number"?qn(e)&&_n(t,e.length):r=="string"&&t in e){return Hn(e[t],n)}return false}function Nn(n){return!!dn&&dn in n}function Pn(n){var t=n&&n.constructor,e=typeof t=="function"&&t.prototype||fn;return n===e}function Gn(n){if(n!=null){try{return ln.call(n)}catch(n){}try{return n+""}catch(n){}}return""}function Xn(n,t,e){var r=-1,i=it(n),o=i.length,u=o-1;if(e?Kn(n,t,e):t===undefined){t=1}else{t=xn(ut(t),0,o)}while(++r<t){var s=Ln(r,u),a=i[s];i[s]=i[r];i[r]=a}i.length=t;return i}function Hn(n,t){return n===t||n!==n&&t!==t}function Un(n){return Jn(n)&&hn.call(n,"callee")&&(!yn.call(n,"callee")||vn.call(n)==o)}var Yn=Array.isArray;function qn(n){return n!=null&&Zn(n.length)&&!Qn(n)}function Jn(n){return tt(n)&&qn(n)}function Qn(n){var t=nt(n)?vn.call(n):"";return t==a||t==f}function Zn(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=t}function nt(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function tt(n){return!!n&&typeof n=="object"}function et(n){return typeof n=="string"||!Yn(n)&&tt(n)&&vn.call(n)==v}function rt(n){return typeof n=="symbol"||tt(n)&&vn.call(n)==p}function it(n){if(!n){return[]}if(qn(n)){return et(n)?un(n):Wn(n)}if(mn&&n[mn]){return tn(n[mn]())}var t=Vn(n),e=t==c?en:t==h?on:ft;return e(n)}function ot(t){if(!t){return t===0?t:0}t=st(t);if(t===n||t===-Infinity){var r=t<0?-1:1;return r*e}return t===t?t:0}function ut(n){var t=ot(n),e=t%1;return t===t?e?t-e:t:0}function st(n){if(typeof n=="number"){return n}if(rt(n)){return r}if(nt(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=nt(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(g,"");var e=C.test(n);return e||A.test(n)?P(n.slice(2),e?2:8):j.test(n)?r:+n}function at(n){return qn(n)?Mn(n):Rn(n)}function ft(n){return n?J(n,at(n)):[]}u=Xn;return u}var f=a();var c=o(f);var d;var l;function h(){if(l)return d;l=1;var n=1/0,t=9007199254740991,e=17976931348623157e292,r=0/0;var i="[object Function]",o="[object GeneratorFunction]",u="[object Symbol]";var s=/^\s+|\s+$/g;var a=/^[-+]0x[0-9a-f]+$/i;var f=/^0b[01]+$/i;var c=/^0o[0-7]+$/i;var h=/^(?:0|[1-9]\d*)$/;var v=parseFloat,p=parseInt;var b=Object.prototype;var m=b.toString;var y=Math.floor,g=Math.min,j=Math.random;function C(n,t){return n+y(j()*(t-n+1))}function w(n,e){e=e==null?t:e;return!!e&&(typeof n=="number"||h.test(n))&&(n>-1&&n%1==0&&n<e)}function A(n,t,e){if(!T(e)){return false}var r=typeof t;if(r=="number"?O(e)&&w(t,e.length):r=="string"&&t in e){return D(e[t],n)}return false}function D(n,t){return n===t||n!==n&&t!==t}function O(n){return n!=null&&I(n.length)&&!k(n)}function k(n){var t=T(n)?m.call(n):"";return t==i||t==o}function I(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=t}function T(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function $(n){return!!n&&typeof n=="object"}function F(n){return typeof n=="symbol"||$(n)&&m.call(n)==u}function S(t){if(!t){return t===0?t:0}t=M(t);if(t===n||t===-Infinity){var r=t<0?-1:1;return r*e}return t===t?t:0}function M(n){if(typeof n=="number"){return n}if(F(n)){return r}if(T(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=T(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(s,"");var e=f.test(n);return e||c.test(n)?p(n.slice(2),e?2:8):a.test(n)?r:+n}function x(n,t,e){if(e&&typeof e!="boolean"&&A(n,t,e)){t=e=undefined}if(e===undefined){if(typeof t=="boolean"){e=t;t=undefined}else if(typeof n=="boolean"){e=n;n=undefined}}if(n===undefined&&t===undefined){n=0;t=1}else{n=S(n);if(t===undefined){t=n;n=0}else{t=S(t)}}if(n>t){var r=n;n=t;t=r}if(e||n%1||t%1){var i=j();return g(n+i*(t-n+v("1e-"+((i+"").length-1))),t)}return C(n,t)}d=x;return d}var v=h();var p=o(v);const b=".sc-dsot-document-component-demo-h{display:block;margin-block:0;margin-inline:8px;border-inline-start:1px dashed transparent;border-inline-end:1px dashed transparent}[show-canvas].sc-dsot-document-component-demo-h{border-inline-start:1px dashed pink;border-inline-end:1px dashed pink}";const m=class{constructor(i){n(this,i);this.dsotOzonContentAnchorClick=t(this,"dsotOzonContentAnchorClick",7);this.dsotTableOfContentsClick=t(this,"dsotTableOfContentsClick",3);this.showCanvas=false;this.openDefault=false;this.mode="document";this.openOrClosed=[];this.openedAnnotation=[];this.filtered=[];this.notApplicable=[];this.activeAnnotationSelectables=[];this.handleRecursiveToggle=(n,t)=>{const e=this.getEmbeddedDocumentComponents(n);if(!e){return}for(const n of e.documentComponents){this.handleOpenToggle(n,t.next)}};this.DocumentComponent=({path:n})=>{const t=n.at(-1);if(!t||this.mode==="table-of-contents"&&t.type==="LID"){return e(r,null)}const{DocumentComponent:i}=this;const o=this.getEmbeddedDocumentComponents(t);return e("dso-document-component",{annotated:this.isAnnotated(t),bevatOntwerpInformatie:!!t.bevatOntwerpInformatie,filtered:this.isOpen(t)?this.isFiltered(t):this.hasFilteredChildren(t),genesteOntwerpInformatie:this.hasNestedDraft(t),gereserveerd:t.gereserveerd,heading:"h2",inhoud:t.inhoud,label:t.labelXml,openAnnotation:this.isOpenedAnnotation(t),notApplicable:this.isNotApplicable(t)||n.some((n=>this.isNotApplicable(n))),nummer:t.nummerXml,onDsoAnnotationToggle:()=>this.handleAnnotationToggle(t),onDsoOpenToggle:()=>this.handleOpenToggle(t),onDsoOzonContentAnchorClick:n=>this.handleOzonContentAnchorClick(n),open:this.isOpen(t),opschrift:t.opschrift,type:t.type,vervallen:t.vervallen,wijzigactie:t.wijzigactie,recursiveToggle:this.recursiveToggleState(t),onDsoRecursiveToggle:n=>this.handleRecursiveToggle(t,n.detail),mode:this.mode,href:this.mode==="table-of-contents"?"/document/"+t.documentTechnischId:undefined,onDsoTableOfContentsClick:n=>this.handleTableOfContentsClick(n)},this.isOpenedAnnotation(t)&&e("div",{slot:"annotations"},e("dso-annotation-locatie",{active:this.isCheckedSlideToggle(t),"gewijzigde-locatie":true,locatieNoemer:"Winkelgebied",onDsoActiveChange:()=>this.handleSelectableChange(t)},e("span",{class:"symboolcode",slot:"symbool","data-symboolcode":"vszt030"}))),this.showContent(t)&&(o===null||o===void 0?void 0:o.documentComponents.length)&&e("ul",{class:"dso-document-component-list"},o.documentComponents.map((t=>e("li",{key:t.documentTechnischId},e(i,{path:[...n,t]}))))))};this.MenuButton=({documentComponent:n})=>{const{labelXml:t,nummerXml:i,type:o}=n;return e("button",{type:"button",onClick:()=>this.document=n},!t&&!i?e("span",null,e("i",null,o)):e(r,null,t&&e(r,null,e("dso-ozon-content",{content:t,inline:true})),i&&e(r,null," ",e("dso-ozon-content",{content:i,inline:true}))))}}async jsonFileWatcher(){this.openOrClosed=[];await this.loadData()}async openDefaultWatcher(){this.openOrClosed=[];await this.loadData()}async componentDidLoad(){await this.loadData()}getEmbeddedDocumentComponents(n){var t,e;if((t=n===null||n===void 0?void 0:n._embedded)===null||t===void 0?void 0:t.ontwerpTekststructuurDocumentComponenten){return{documentComponents:n._embedded.ontwerpTekststructuurDocumentComponenten,ontwerp:true}}if((e=n===null||n===void 0?void 0:n._embedded)===null||e===void 0?void 0:e.tekststructuurDocumentComponenten){return{documentComponents:n._embedded.tekststructuurDocumentComponenten,ontwerp:false}}return undefined}concatEmbeddedDocumentComponents(n){var t,e;const r=[...(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents)!==null&&e!==void 0?e:[]];for(const n of r){r.push(...this.concatEmbeddedDocumentComponents(n))}return r}selectRandomDocumentComponents(n,t=[]){const e=this.concatEmbeddedDocumentComponents(n).filter((n=>!t.includes(n)));const r=p(0,Math.floor(e.length/10));return c(e,r)}async loadData(){var n,t;if(!this.jsonFile){this.response=undefined;this.document=undefined;return}this.response=await fetch(this.jsonFile).then((n=>n.json()));this.document=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents[0];if(((t=this.document)===null||t===void 0?void 0:t.type)==="LICHAAM"){this.notApplicable=this.selectRandomDocumentComponents(this.document);this.filtered=this.selectRandomDocumentComponents(this.document,this.notApplicable)}else{this.notApplicable=[];this.filtered=[]}}handleOpenToggle(n,t){const e=typeof t==="boolean"?t:this.openOrClosed.includes(n);if(e&&this.openOrClosed.includes(n)){this.openOrClosed=this.openOrClosed.filter((t=>t!==n))}else if(!e&&!this.openOrClosed.includes(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleAnnotationToggle(n){this.openedAnnotation=this.isOpenedAnnotation(n)?this.openedAnnotation.filter((t=>t!==n)):[...this.openedAnnotation,n];if(!this.isOpen(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleSelectableChange(n){this.activeAnnotationSelectables=this.isCheckedSlideToggle(n)?this.activeAnnotationSelectables.filter((t=>t!==n)):[...this.activeAnnotationSelectables,n]}handleOzonContentAnchorClick(n){this.dsotOzonContentAnchorClick.emit(n.detail)}handleTableOfContentsClick(n){this.dsotTableOfContentsClick.emit(n.detail)}isCheckedSlideToggle(n){return this.activeAnnotationSelectables.includes(n)}hasFilteredChildren(n){var t,e;return this.filtered.includes(n)||((e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>this.hasFilteredChildren(n))))!==null&&e!==void 0?e:false)}isOpen(n){return n.type==="LID"||this.openDefault?!this.openOrClosed.includes(n):this.openOrClosed.includes(n)}isOpenedAnnotation(n){return this.openedAnnotation.includes(n)}isFiltered(n){return this.filtered.includes(n)}isNotApplicable(n){return this.notApplicable.includes(n)}hasNestedDraft(n){var t,e;return(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>!!n.bevatOntwerpInformatie||this.hasNestedDraft(n))))!==null&&e!==void 0?e:false}showContent(n){var t;return this.isOpen(n)&&!!(((t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.length)||n.inhoud)}recursiveToggleState(n){const t=this.getEmbeddedDocumentComponents(n);if(!t||t.documentComponents.length<=1||!t.documentComponents.some((n=>n.type==="ARTIKEL"))){return undefined}return t.documentComponents.every((n=>this.isOpen(n)))}isAnnotated(n){return n.type==="DIVISIE"||n.type==="DIVISIETEKST"||n.type==="ARTIKEL"||n.type==="LID"}render(){var n,t;const{DocumentComponent:r,MenuButton:i}=this;return e("dso-responsive-element",{key:"0bdcbedac77e5fff00d9be2e0b2e725edf2ec07f",class:"dso-document-components"},e("div",{key:"b9068348ddfc4c5dd46d4b65eeb2a0bb28a02d8b",class:"dso-navbar"},e("ul",{key:"e57f4fbd2da501279edd93b0e29fa210319ded13",class:"dso-nav dso-nav-sub"},(t=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents)===null||t===void 0?void 0:t.map((n=>e("li",{class:this.document===n?"dso-active":undefined},e(i,{documentComponent:n})))))),this.document&&e(r,{key:"64016b330af123112c59778dcd783c2a22f3a71f",path:[this.document]}))}static get watchers(){return{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}}};m.style=b;export{m as dsot_document_component_demo};
-//# sourceMappingURL=p-cc1ffecd.entry.js.map