npm - @dso-toolkit/core - Versions diffs - 74.0.0 → 75.1.0 - Mend

@dso-toolkit/core 74.0.0 → 75.1.0

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

Files changed (827) hide show

package/dist/dso-toolkit/dso-tooltip.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-tooltip.entry.esm.js","sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn: function fn(_ref) {\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var overflow = detectOverflow(state, options);\n\n var _ref2 = state.modifiersData.preventOverflow \|\| {\n x: 0,\n y: 0\n },\n x = _ref2.x,\n y = _ref2.y;\n\n var _state$rects$popper = state.rects.popper,\n width = _state$rects$popper.width,\n height = _state$rects$popper.height;\n\n var _state$placement$spli = state.placement.split('-'),\n basePlacement = _state$placement$spli[0];\n\n var widthProp = basePlacement === 'left' ? 'left' : 'right';\n var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y\n };\n }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n font-family: typography.$font-family-base;\r\n // We deliberately do NOT reset font-size.\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n overflow-wrap: anywhere;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n\r\n --link-color: #{colors.$grasgroen};\r\n display: block;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n font-size: typography.$font-size-small;\r\n opacity: 0;\r\n position: absolute;\r\n transition: opacity tooltip-variables.$transition-duration linear;\r\n z-index: zindex.$tooltip;\r\n\r\n &.in {\r\n opacity: tooltip-variables.$opacity;\r\n\r\n .tooltip-inner {\r\n max-block-size: 200vh; // an extreme max-block-size, just to be sure it always fits\r\n overflow: auto;\r\n visibility: visible;\r\n padding-block: tooltip-variables.$padding-block; // set padding-block here to hide the div when the .in class is not active\r\n padding-inline: tooltip-variables.$padding-inline; // set padding-inline here to hide the div when the .in class is not active\r\n }\r\n }\r\n\r\n &:not(.in) {\r\n .tooltip-inner {\r\n max-block-size: 0; // hide the element\r\n overflow: hidden;\r\n visibility: hidden;\r\n transition: all 0s linear tooltip-variables.$transition-duration; // delay all the properties with a 0s linear animation till the parent opacity animation time has passed\r\n }\r\n }\r\n\r\n .tooltip-inner {\r\n background-color: colors.$wit;\r\n border-radius: tooltip-variables.$border-radius;\r\n color: colors.$grijs-90;\r\n display: inline-block;\r\n font-size: typography.$root-font-size-base;\r\n max-inline-size: tooltip-variables.$max-inline-size;\r\n position: relative;\r\n\r\n &.dso-small {\r\n max-inline-size: tooltip-variables.$max-inline-size-small;\r\n }\r\n }\r\n\r\n .tooltip-arrow {\r\n border-color: transparent;\r\n border-style: solid;\r\n block-size: 0;\r\n inline-size: 0;\r\n }\r\n\r\n &[data-popper-placement=\"top\"] {\r\n margin-block-start: -3px;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-end: 0;\r\n border-block-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-end-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"right\"] {\r\n margin-inline-start: 3px;\r\n padding-inline-start: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-start: 0;\r\n border-inline-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-start-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"bottom\"] {\r\n margin-block-start: 3px;\r\n padding-block-start: tooltip-variables.$arrow-inline-size;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-start: 0;\r\n border-block-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-start-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"left\"] {\r\n margin-inline-start: -3px;\r\n margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n padding-block: 0;\r\n padding-inline-end: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-end: 0;\r\n border-inline-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-end-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n}\r\n","import { Instance as PopperInstance, Placement, State as PopperState, beforeWrite, createPopper } from \"@popperjs/core\";\r\nimport { Component, ComponentInterface, Element, Host, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip implements ComponentInterface {\r\n /*\r\n Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n /\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /\r\n Set position of tooltip relative to target\r\n /\r\n @Prop()\r\n position: Placement = \"top\";\r\n\r\n /\r\n Set position strategy of tooltip\r\n /\r\n @Prop()\r\n strategy: \"auto\" \| \"absolute\" \| \"fixed\" = \"auto\";\r\n\r\n /\r\n Set attribute `no-arrow` to hide the arrow\r\n /\r\n @Prop()\r\n noArrow = false;\r\n\r\n /\r\n Deactivates mouseover behaviour\r\n /\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /\r\n Defines if the tooltip has a smaller max-width\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /\r\n Activate the tooltip (Sets the `active` attribute)\r\n /\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /\r\n Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" \|\| this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element \| null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance \| undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => {\r\n // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding\r\n // van setTimeout() met 2ms.\r\n setTimeout(() => {\r\n if (this.element.isConnected) {\r\n this.active = false;\r\n }\r\n }, 2);\r\n },\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive \|\| undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement \| undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement \| undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement \| undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"dso-tooltip.entry.esm.js","sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn: function fn(_ref) {\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var overflow = detectOverflow(state, options);\n\n var _ref2 = state.modifiersData.preventOverflow \|\| {\n x: 0,\n y: 0\n },\n x = _ref2.x,\n y = _ref2.y;\n\n var _state$rects$popper = state.rects.popper,\n width = _state$rects$popper.width,\n height = _state$rects$popper.height;\n\n var _state$placement$spli = state.placement.split('-'),\n basePlacement = _state$placement$spli[0];\n\n var widthProp = basePlacement === 'left' ? 'left' : 'right';\n var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y\n };\n }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n font-family: typography.$font-family-base;\r\n // We deliberately do NOT reset font-size.\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n overflow-wrap: anywhere;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n\r\n --link-color: #{colors.$grasgroen};\r\n display: block;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n font-size: typography.$font-size-small;\r\n opacity: 0;\r\n position: absolute;\r\n transition: opacity tooltip-variables.$transition-duration linear;\r\n z-index: zindex.$tooltip;\r\n\r\n &.in {\r\n opacity: tooltip-variables.$opacity;\r\n\r\n .tooltip-inner {\r\n max-block-size: 200vh; // an extreme max-block-size, just to be sure it always fits\r\n overflow: auto;\r\n visibility: visible;\r\n padding-block: tooltip-variables.$padding-block; // set padding-block here to hide the div when the .in class is not active\r\n padding-inline: tooltip-variables.$padding-inline; // set padding-inline here to hide the div when the .in class is not active\r\n }\r\n }\r\n\r\n &:not(.in) {\r\n .tooltip-inner {\r\n max-block-size: 0; // hide the element\r\n overflow: hidden;\r\n visibility: hidden;\r\n transition: all 0s linear tooltip-variables.$transition-duration; // delay all the properties with a 0s linear animation till the parent opacity animation time has passed\r\n }\r\n }\r\n\r\n .tooltip-inner {\r\n background-color: colors.$wit;\r\n border-radius: tooltip-variables.$border-radius;\r\n color: colors.$grijs-90;\r\n display: inline-block;\r\n font-size: typography.$root-font-size-base;\r\n max-inline-size: tooltip-variables.$max-inline-size;\r\n position: relative;\r\n\r\n &.dso-small {\r\n max-inline-size: tooltip-variables.$max-inline-size-small;\r\n }\r\n }\r\n\r\n .tooltip-arrow {\r\n border-color: transparent;\r\n border-style: solid;\r\n block-size: 0;\r\n inline-size: 0;\r\n }\r\n\r\n &[data-popper-placement=\"top\"] {\r\n margin-block-start: -3px;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-end: 0;\r\n border-block-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-end-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"right\"] {\r\n margin-inline-start: 3px;\r\n padding-inline-start: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-start: 0;\r\n border-inline-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-start-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"bottom\"] {\r\n margin-block-start: 3px;\r\n padding-block-start: tooltip-variables.$arrow-inline-size;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-start: 0;\r\n border-block-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-start-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"left\"] {\r\n margin-inline-start: -3px;\r\n margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n padding-block: 0;\r\n padding-inline-end: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-end: 0;\r\n border-inline-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-end-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n}\r\n","import { Instance as PopperInstance, Placement, State as PopperState, beforeWrite, createPopper } from \"@popperjs/core\";\r\nimport { Component, ComponentInterface, Element, Host, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip implements ComponentInterface {\r\n /*\r\n Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n /\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /\r\n Set position of tooltip relative to target\r\n /\r\n @Prop()\r\n position: Placement = \"top\";\r\n\r\n /\r\n Set position strategy of tooltip\r\n /\r\n @Prop()\r\n strategy: \"auto\" \| \"absolute\" \| \"fixed\" = \"auto\";\r\n\r\n /\r\n Set attribute `no-arrow` to hide the arrow\r\n /\r\n @Prop()\r\n noArrow = false;\r\n\r\n /\r\n Deactivates mouseover behaviour\r\n /\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /\r\n Defines if the tooltip has a smaller max-width\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /\r\n Activate the tooltip (Sets the `active` attribute)\r\n /\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /\r\n Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" \|\| this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element \| null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance \| undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => {\r\n // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding\r\n // van setTimeout() met 2ms.\r\n setTimeout(() => {\r\n if (this.element.isConnected) {\r\n this.active = false;\r\n }\r\n }, 2);\r\n },\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive \|\| undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement \| undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement \| undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement \| undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/dist/dso-toolkit/dso-tree-view.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-tree-view.entry.esm.js","sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\ninterface TreeViewItemProps {\r\n owner: TreeView;\r\n ancestors: TreeViewItem[];\r\n item: TreeViewItem;\r\n index: number;\r\n level: number;\r\n setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n owner,\r\n ancestors,\r\n item,\r\n index,\r\n level,\r\n setSize,\r\n}) => (\r\n <li\r\n key={item.id}\r\n class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n role=\"none\"\r\n >\r\n <div class=\"tree-branch-control\">\r\n {item.hasItems ? (\r\n <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n </div>\r\n ) : (\r\n <dso-icon></dso-icon>\r\n )}\r\n </div>\r\n <p\r\n class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n tabindex={level === 1 && index === 0 ? 0 : -1}\r\n role=\"treeitem\"\r\n aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n aria-current={item.active ? \"true\" : undefined}\r\n aria-level={level}\r\n aria-setsize={setSize}\r\n aria-posinset={index + 1}\r\n aria-busy={item.loading ? \"true\" : undefined}\r\n data-item-id={item.id}\r\n onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n >\r\n {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n {item.href ? (\r\n <a href={item.href} tabindex=\"-1\">\r\n {item.label}\r\n </a>\r\n ) : (\r\n <span>{item.label}</span>\r\n )}\r\n {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n </p>\r\n {item.open && (\r\n <>\r\n {item.hasItems && !item.items && item.loading ? (\r\n <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n ) : (\r\n <ul role=\"group\">\r\n {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n <DsoTreeItem\r\n owner={owner}\r\n ancestors={[...ancestors, item]}\r\n item={childItem}\r\n index={childIndex}\r\n level={level + 1}\r\n setSize={org.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n )}\r\n </>\r\n )}\r\n </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n ul {\r\n list-style-type: none;\r\n padding-inline-start: core-tree-view-variables.$indent;\r\n position: relative;\r\n }\r\n\r\n li {\r\n position: relative;\r\n }\r\n\r\n ul[role=\"tree\"] {\r\n padding-inline-start: 0;\r\n }\r\n\r\n // connects branch or leaf to parent\r\n ul[role=\"group\"]::before {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n 0,\r\n core-tree-view-variables.$vspace\r\n );\r\n }\r\n\r\n li:not(.has-child) {\r\n // horizontal connector for a leaf\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a leaf\r\n &::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vspace,\r\n 100%\r\n );\r\n }\r\n\r\n // vertical connector for the last leaf\r\n &:last-child::after {\r\n block-size: core-tree-view-variables.$vcenter;\r\n inset-block-start: 0;\r\n }\r\n }\r\n\r\n li.has-child {\r\n // horizontal connector for a branch\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$icon-size,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a branch (not last)\r\n &:not(:last-child)::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - core-tree-view-variables.$icon-size)\r\n );\r\n }\r\n\r\n // vertical line after a expanded branch (creating dead ends)\r\n &.is-expanded:last-child::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n );\r\n }\r\n }\r\n\r\n .tree-branch-control {\r\n color: colors.$grasgroen;\r\n display: inline-block;\r\n font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n margin-block: core-tree-view-variables.$vspace;\r\n margin-inline: 0 core-tree-view-variables.$hspace;\r\n vertical-align: top;\r\n\r\n > div {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .tree-content {\r\n cursor: pointer;\r\n display: inline-block;\r\n margin-block: core-tree-view-variables.$vspace;\r\n margin-inline: 0;\r\n max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n a {\r\n color: scaffolding.$text-color;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n color: scaffolding.$text-color;\r\n text-decoration: none;\r\n }\r\n\r\n &:active {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.selected {\r\n color: scaffolding.$text-color;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.active {\r\n color: colors.$mauve;\r\n font-style: italic;\r\n font-weight: 700;\r\n\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n color: colors.$mauve;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n }\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n font-size: 0.75em;\r\n margin-inline-start: 0.5em;\r\n vertical-align: text-bottom;\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoTreeItem } from \"./tree-item\";\r\nimport { TreeViewItem, TreeViewPointerEvent } from \"./tree-view.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-tree-view\",\r\n styleUrl: \"./tree-view.scss\",\r\n shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n private tree?: HTMLElement;\r\n\r\n /*\r\n The collection of TreeViewItems\r\n /\r\n @Prop()\r\n collection!: TreeViewItem[];\r\n\r\n /\r\n Emitted when a tree view item is opened.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is closed.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is clicked.\r\n * The `detail` property of the `CustomEvent` will contain an object with:\r\n * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n * `originalEvent` = the original click event.\r\n * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n * state on the last TreeViewItem in path and clear all other active item states).\r\n /\r\n @Event()\r\n dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n /\r\n Set focus on the last item in the specified path.\r\n * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n * @async\r\n * @returns Whether the item was found.\r\n */\r\n @Method()\r\n async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n const tree = this.tree;\r\n\r\n if (!tree \|\| path.length === 0) {\r\n return false;\r\n }\r\n\r\n const itemToFocus = path[path.length - 1];\r\n if (!itemToFocus) {\r\n throw new Error(\"No itemToFocus found\");\r\n }\r\n\r\n const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n if (!elementToFocus) {\r\n return false;\r\n }\r\n\r\n TreeView.setFocus(tree, elementToFocus);\r\n\r\n return true;\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n const tree = event\r\n .composedPath()\r\n .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n if (!(event.target instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n TreeView.moveFocus(tree, event.target, \"next\");\r\n break;\r\n case \"ArrowUp\":\r\n TreeView.moveFocus(tree, event.target, \"previous\");\r\n break;\r\n case \"ArrowRight\":\r\n TreeView.expandItemOrFocusChild(tree, event.target);\r\n break;\r\n case \"ArrowLeft\":\r\n TreeView.collapseItemOrFocusParent(tree, event.target);\r\n break;\r\n case \"End\":\r\n TreeView.moveFocus(tree, event.target, \"last\");\r\n break;\r\n case \"Home\":\r\n TreeView.moveFocus(tree, event.target, \"first\");\r\n break;\r\n case \"Enter\":\r\n case \" \":\r\n event.target.click();\r\n break;\r\n default:\r\n if (isIndexLetter(event.key)) {\r\n if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n break;\r\n }\r\n }\r\n\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n if (!(event.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n const contentElement = event.target.closest(\".tree-content\");\r\n\r\n if (contentElement) {\r\n const tree = event\r\n .composedPath()\r\n .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n if (!(contentElement instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n TreeView.setFocus(tree, contentElement);\r\n this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n return;\r\n }\r\n\r\n if (item.open) {\r\n this.dsoCloseItem.emit([...ancestors, item]);\r\n } else {\r\n this.dsoOpenItem.emit([...ancestors, item]);\r\n }\r\n };\r\n\r\n private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n if (target) {\r\n (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n .filter((item) => item.tabIndex === 0)\r\n .forEach((item) => (item.tabIndex = -1));\r\n\r\n target.tabIndex = 0;\r\n target.focus();\r\n }\r\n }\r\n\r\n private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" \| \"previous\" \| \"next\" \| \"last\"): void {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n let index = 0;\r\n switch (moveTo) {\r\n case \"first\":\r\n index = 0;\r\n break;\r\n case \"previous\":\r\n index = focusableItems.indexOf(el) - 1;\r\n break;\r\n case \"next\":\r\n index = focusableItems.indexOf(el) + 1;\r\n break;\r\n case \"last\":\r\n index = focusableItems.length - 1;\r\n break;\r\n }\r\n\r\n const focusableItem = focusableItems[index];\r\n if (!focusableItem) {\r\n throw new Error(\"No focusableItem found\");\r\n }\r\n\r\n TreeView.setFocus(tree, focusableItem);\r\n }\r\n\r\n private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n TreeView.moveFocus(tree, target, \"next\");\r\n } else {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n }\r\n }\r\n\r\n private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n } else {\r\n const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n if (parentTarget instanceof HTMLElement) {\r\n TreeView.setFocus(tree, parentTarget);\r\n }\r\n }\r\n }\r\n\r\n private static setFocusByFirstCharacter(\r\n tree: HTMLElement,\r\n el: HTMLElement,\r\n char: string,\r\n backwards: boolean,\r\n ): boolean {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n if (backwards) {\r\n focusableItems.reverse();\r\n }\r\n\r\n const current = focusableItems.indexOf(el);\r\n\r\n char = char.toLowerCase();\r\n let nextItem = focusableItems.find(\r\n (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n if (!nextItem) {\r\n nextItem = focusableItems.find(\r\n (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n }\r\n\r\n if (nextItem) {\r\n TreeView.setFocus(tree, nextItem);\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n id=\"tree\"\r\n class=\"dso-tree\"\r\n onKeyDown={(e) => this.keyDownListener(e)}\r\n ref={(element) => (this.tree = element)}\r\n >\r\n <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n {this.collection?.map((item, index) => (\r\n <DsoTreeItem\r\n owner={this}\r\n ancestors={[]}\r\n item={item}\r\n index={index}\r\n level={1}\r\n setSize={this.collection.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-tree-view.entry.esm.js","sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\ninterface TreeViewItemProps {\r\n owner: TreeView;\r\n ancestors: TreeViewItem[];\r\n item: TreeViewItem;\r\n index: number;\r\n level: number;\r\n setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n owner,\r\n ancestors,\r\n item,\r\n index,\r\n level,\r\n setSize,\r\n}) => (\r\n <li\r\n key={item.id}\r\n class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n role=\"none\"\r\n >\r\n <div class=\"tree-branch-control\">\r\n {item.hasItems ? (\r\n <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n </div>\r\n ) : (\r\n <dso-icon></dso-icon>\r\n )}\r\n </div>\r\n <p\r\n class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n tabindex={level === 1 && index === 0 ? 0 : -1}\r\n role=\"treeitem\"\r\n aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n aria-current={item.active ? \"true\" : undefined}\r\n aria-level={level}\r\n aria-setsize={setSize}\r\n aria-posinset={index + 1}\r\n aria-busy={item.loading ? \"true\" : undefined}\r\n data-item-id={item.id}\r\n onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n >\r\n {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n {item.href ? (\r\n <a href={item.href} tabindex=\"-1\">\r\n {item.label}\r\n </a>\r\n ) : (\r\n <span>{item.label}</span>\r\n )}\r\n {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n </p>\r\n {item.open && (\r\n <>\r\n {item.hasItems && !item.items && item.loading ? (\r\n <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n ) : (\r\n <ul role=\"group\">\r\n {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n <DsoTreeItem\r\n owner={owner}\r\n ancestors={[...ancestors, item]}\r\n item={childItem}\r\n index={childIndex}\r\n level={level + 1}\r\n setSize={org.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n )}\r\n </>\r\n )}\r\n </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n ul {\r\n list-style-type: none;\r\n padding-inline-start: core-tree-view-variables.$indent;\r\n position: relative;\r\n }\r\n\r\n li {\r\n position: relative;\r\n }\r\n\r\n ul[role=\"tree\"] {\r\n padding-inline-start: 0;\r\n }\r\n\r\n // connects branch or leaf to parent\r\n ul[role=\"group\"]::before {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n 0,\r\n core-tree-view-variables.$vspace\r\n );\r\n }\r\n\r\n li:not(.has-child) {\r\n // horizontal connector for a leaf\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a leaf\r\n &::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vspace,\r\n 100%\r\n );\r\n }\r\n\r\n // vertical connector for the last leaf\r\n &:last-child::after {\r\n block-size: core-tree-view-variables.$vcenter;\r\n inset-block-start: 0;\r\n }\r\n }\r\n\r\n li.has-child {\r\n // horizontal connector for a branch\r\n &::before {\r\n @include core-tree-view-mixins.horizontal-line(\r\n core-tree-view-variables.$icon-size,\r\n core-tree-view-variables.$vcenter,\r\n core-tree-view-variables.$hspace - 4px\r\n );\r\n }\r\n\r\n // vertical connector for a branch (not last)\r\n &:not(:last-child)::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - core-tree-view-variables.$icon-size)\r\n );\r\n }\r\n\r\n // vertical line after a expanded branch (creating dead ends)\r\n &.is-expanded:last-child::after {\r\n @include core-tree-view-mixins.vertical-line(\r\n core-tree-view-variables.$hcenter,\r\n core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n );\r\n }\r\n }\r\n\r\n .tree-branch-control {\r\n color: colors.$grasgroen;\r\n display: inline-block;\r\n font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n margin-block: core-tree-view-variables.$vspace;\r\n margin-inline: 0 core-tree-view-variables.$hspace;\r\n vertical-align: top;\r\n\r\n > div {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .tree-content {\r\n cursor: pointer;\r\n display: inline-block;\r\n margin-block: core-tree-view-variables.$vspace;\r\n margin-inline: 0;\r\n max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n a {\r\n color: scaffolding.$text-color;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n color: scaffolding.$text-color;\r\n text-decoration: none;\r\n }\r\n\r\n &:active {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.selected {\r\n color: scaffolding.$text-color;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &.active {\r\n color: colors.$mauve;\r\n font-style: italic;\r\n font-weight: 700;\r\n\r\n text-decoration: underline;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n color: colors.$mauve;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n }\r\n }\r\n }\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n font-size: 0.75em;\r\n margin-inline-start: 0.5em;\r\n vertical-align: text-bottom;\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoTreeItem } from \"./tree-item\";\r\nimport { TreeViewItem, TreeViewPointerEvent } from \"./tree-view.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-tree-view\",\r\n styleUrl: \"./tree-view.scss\",\r\n shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n private tree?: HTMLElement;\r\n\r\n /*\r\n The collection of TreeViewItems\r\n /\r\n @Prop()\r\n collection!: TreeViewItem[];\r\n\r\n /\r\n Emitted when a tree view item is opened.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is closed.\r\n * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n /\r\n @Event()\r\n dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n /\r\n Emitted when a tree view item is clicked.\r\n * The `detail` property of the `CustomEvent` will contain an object with:\r\n * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n * `originalEvent` = the original click event.\r\n * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n * state on the last TreeViewItem in path and clear all other active item states).\r\n /\r\n @Event()\r\n dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n /\r\n Set focus on the last item in the specified path.\r\n * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n * @async\r\n * @returns Whether the item was found.\r\n */\r\n @Method()\r\n async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n const tree = this.tree;\r\n\r\n if (!tree \|\| path.length === 0) {\r\n return false;\r\n }\r\n\r\n const itemToFocus = path[path.length - 1];\r\n if (!itemToFocus) {\r\n throw new Error(\"No itemToFocus found\");\r\n }\r\n\r\n const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n if (!elementToFocus) {\r\n return false;\r\n }\r\n\r\n TreeView.setFocus(tree, elementToFocus);\r\n\r\n return true;\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n const tree = event\r\n .composedPath()\r\n .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n if (!(event.target instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n TreeView.moveFocus(tree, event.target, \"next\");\r\n break;\r\n case \"ArrowUp\":\r\n TreeView.moveFocus(tree, event.target, \"previous\");\r\n break;\r\n case \"ArrowRight\":\r\n TreeView.expandItemOrFocusChild(tree, event.target);\r\n break;\r\n case \"ArrowLeft\":\r\n TreeView.collapseItemOrFocusParent(tree, event.target);\r\n break;\r\n case \"End\":\r\n TreeView.moveFocus(tree, event.target, \"last\");\r\n break;\r\n case \"Home\":\r\n TreeView.moveFocus(tree, event.target, \"first\");\r\n break;\r\n case \"Enter\":\r\n case \" \":\r\n event.target.click();\r\n break;\r\n default:\r\n if (isIndexLetter(event.key)) {\r\n if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n break;\r\n }\r\n }\r\n\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n if (!(event.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n const contentElement = event.target.closest(\".tree-content\");\r\n\r\n if (contentElement) {\r\n const tree = event\r\n .composedPath()\r\n .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n if (!(contentElement instanceof HTMLParagraphElement) \|\| !(tree instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n TreeView.setFocus(tree, contentElement);\r\n this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n return;\r\n }\r\n\r\n if (item.open) {\r\n this.dsoCloseItem.emit([...ancestors, item]);\r\n } else {\r\n this.dsoOpenItem.emit([...ancestors, item]);\r\n }\r\n };\r\n\r\n private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n if (target) {\r\n (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n .filter((item) => item.tabIndex === 0)\r\n .forEach((item) => (item.tabIndex = -1));\r\n\r\n target.tabIndex = 0;\r\n target.focus();\r\n }\r\n }\r\n\r\n private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" \| \"previous\" \| \"next\" \| \"last\"): void {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n let index = 0;\r\n switch (moveTo) {\r\n case \"first\":\r\n index = 0;\r\n break;\r\n case \"previous\":\r\n index = focusableItems.indexOf(el) - 1;\r\n break;\r\n case \"next\":\r\n index = focusableItems.indexOf(el) + 1;\r\n break;\r\n case \"last\":\r\n index = focusableItems.length - 1;\r\n break;\r\n }\r\n\r\n const focusableItem = focusableItems[index];\r\n if (!focusableItem) {\r\n throw new Error(\"No focusableItem found\");\r\n }\r\n\r\n TreeView.setFocus(tree, focusableItem);\r\n }\r\n\r\n private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n TreeView.moveFocus(tree, target, \"next\");\r\n } else {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n }\r\n }\r\n\r\n private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n const controlElement = target.previousElementSibling?.firstElementChild;\r\n if (controlElement instanceof HTMLElement) {\r\n controlElement.click();\r\n }\r\n } else {\r\n const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n if (parentTarget instanceof HTMLElement) {\r\n TreeView.setFocus(tree, parentTarget);\r\n }\r\n }\r\n }\r\n\r\n private static setFocusByFirstCharacter(\r\n tree: HTMLElement,\r\n el: HTMLElement,\r\n char: string,\r\n backwards: boolean,\r\n ): boolean {\r\n const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n );\r\n\r\n if (backwards) {\r\n focusableItems.reverse();\r\n }\r\n\r\n const current = focusableItems.indexOf(el);\r\n\r\n char = char.toLowerCase();\r\n let nextItem = focusableItems.find(\r\n (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n if (!nextItem) {\r\n nextItem = focusableItems.find(\r\n (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n );\r\n }\r\n\r\n if (nextItem) {\r\n TreeView.setFocus(tree, nextItem);\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n id=\"tree\"\r\n class=\"dso-tree\"\r\n onKeyDown={(e) => this.keyDownListener(e)}\r\n ref={(element) => (this.tree = element)}\r\n >\r\n <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n {this.collection?.map((item, index) => (\r\n <DsoTreeItem\r\n owner={this}\r\n ancestors={[]}\r\n item={item}\r\n index={index}\r\n level={1}\r\n setSize={this.collection.length}\r\n ></DsoTreeItem>\r\n ))}\r\n </ul>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-viewer-grid.entry.esm.js","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/filter-panel.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 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 ViewerGridPanelSize = \"small\" \| \"medium\" \| \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridTab = (typeof viewerGridTabs)[number];\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\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\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n className: string;\r\n onClick: any;\r\n label: string;\r\n icon: \"chevron-left\" \| \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n <button type=\"button\" class={className} onClick={onClick}>\r\n <span class=\"sr-only\">{label}</span>\r\n <dso-icon icon={icon}></dso-icon>\r\n </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n panelLabel: string;\r\n size: ViewerGridPanelSize;\r\n expand: () => void;\r\n shrink: () => void;\r\n placement: \"left\" \| \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n shrink,\r\n expand,\r\n size,\r\n panelLabel,\r\n placement,\r\n}) => {\r\n const buttons = [];\r\n\r\n if (size !== \"small\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={shrink}\r\n label={`${panelLabel} smaller maken`}\r\n icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n className=\"shrink\"\r\n />,\r\n );\r\n }\r\n\r\n if (size !== \"large\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={expand}\r\n label={`${panelLabel} breder maken`}\r\n icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n className=\"expand\"\r\n />,\r\n );\r\n }\r\n\r\n return (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n </span>\r\n {buttons}\r\n </div>\r\n );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\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 ViewerGridFilterPanelProps {\r\n title?: string;\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseFilterPanel: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const FilterPanel: FunctionalComponent<ViewerGridFilterPanelProps> = ({ title, ref, dsoCloseFilterPanel }) => (\r\n <dialog class=\"filter-panel\" ref={ref}>\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=\"filter-panel\" />\r\n </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView && documentPanelOpen && (\r\n <div class=\"toggle-button\">\r\n <button type=\"button\" onClick={toggleMainPanel}>\r\n <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n </button>\r\n </div>\r\n )}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n);\r\n","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 {\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 .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\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.viewer-grid-columns {\r\n position: relative;\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 .sizing-buttons,\r\n .toggle-button {\r\n inset-inline-start: calc(100% + 1px);\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: 0 units.$u1 * 0.5;\r\n\r\n button {\r\n border-end-end-radius: 4px;\r\n border-start-end-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.dso-document-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .sizing-buttons {\r\n inset-block-start: auto;\r\n inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inset-inline-end: calc(100% + 1px);\r\n transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: units.$u1 * 0.5 0;\r\n\r\n button {\r\n border-end-start-radius: 4px;\r\n border-start-start-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n overflow-x: hidden;\r\n position: absolute;\r\n inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n flex: 0 0 100%;\r\n block-size: core-viewer-grid-variables.$resize-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-viewer-grid-variables.$resize-button-size;\r\n }\r\n\r\n &:hover {\r\n dso-icon {\r\n color: colors.$wit;\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n}\r\n\r\n.map {\r\n block-size: 100%;\r\n inline-size: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.filter-panel,\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.filter-panel {\r\n display: block;\r\n position: absolute;\r\n padding-block: units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-block-start: 0;\r\n block-size: 100%;\r\n inset-inline-start: calc(core-viewer-grid-variables.$filter-panel-max-inline-size * -1);\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 (max-width: core-viewer-grid-variables.$filter-panel-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 @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n max-inline-size: core-viewer-grid-variables.$filter-panel-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.$filter-panel-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@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 flex-direction: column;\r\n block-size: 100vh;\r\n overflow: clip;\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 .viewer-grid-columns {\r\n display: flex;\r\n overflow: hidden;\r\n flex-grow: 1;\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 .filter-panel {\r\n margin-inline: 0 auto;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &[open] {\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n }\r\n }\r\n\r\n .overlay {\r\n box-shadow: -2px 0 5px colors.$grijs-60;\r\n margin-inline: auto 0;\r\n }\r\n\r\n @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n :host([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filter-panel-max-inline-size});\r\n }\r\n }\r\n\r\n .filter-panel {\r\n inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n inset-inline-start: -(core-viewer-grid-variables.$filter-panel-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 .filter-panel,\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 .filter-panel {\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([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-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 ViewerGridActiveTabSwitchEvent,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseFilterPanelEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridMainExpandEvent,\r\n ViewerGridMainToggleEvent,\r\n ViewerGridPanelSize,\r\n ViewerGridTab,\r\n viewerGridTabLabelMap,\r\n viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n const shadowRoot = entry?.target.getRootNode();\r\n if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n shadowRoot.host._checkMainPanelVisibility();\r\n }\r\n }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/*\r\n @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n /\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n private mapElement?: HTMLDivElement;\r\n\r\n /\r\n The title of the filter panel\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelTitle?: string;\r\n\r\n /\r\n Set to true when filter panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n Set to true when document panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelOpen = false;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set active tab in tab view.\r\n /\r\n @Prop()\r\n activeTab?: ViewerGridTab;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set to show main panel expanded.\r\n /\r\n @Prop()\r\n mainPanelExpanded = false;\r\n\r\n /\r\n Set to hide the main panel.\r\n /\r\n @Prop()\r\n mainPanelHidden = false;\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n /\r\n Emitted when user wants to close the filter panel.\r\n /\r\n @Event()\r\n dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n /\r\n Emitted when user applies filter panel options.\r\n /\r\n @Event()\r\n dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted when the user wants to expand the main panel.\r\n /\r\n @Event()\r\n dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n /\r\n Emitted when the user toggles the visibility of the main panel.\r\n \r\n Also emitted by scripting when the panels do not fit anymore.\r\n /\r\n @Event()\r\n dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n private filterPanel: HTMLDialogElement \| undefined;\r\n\r\n private get filterPanelSlot() {\r\n return this.host.querySelector(\"[slot='filter-panel']\");\r\n }\r\n\r\n private get overlaySlot() {\r\n return this.host.querySelector(\"[slot='overlay']\");\r\n }\r\n\r\n private overlay: HTMLDialogElement \| undefined;\r\n\r\n @Watch(\"documentPanelOpen\")\r\n documentPanelOpenWatcher(open: boolean) {\r\n if (open) {\r\n this._checkMainPanelVisibility();\r\n }\r\n }\r\n\r\n @Watch(\"filterPanelOpen\")\r\n filterPanelOpenWatcher(open: boolean) {\r\n if (!this.filterPanelSlot) {\r\n console.warn(\"slot 'filter-panel' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.filterPanel?.show();\r\n } else {\r\n this.filterPanel?.close();\r\n }\r\n }\r\n\r\n @Watch(\"overlayOpen\")\r\n overlayOpenWatcher(open: boolean) {\r\n if (!this.overlaySlot) {\r\n console.warn(\"slot 'overlay' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.overlay?.showModal();\r\n } else {\r\n this.overlay?.close();\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _checkMainPanelVisibility() {\r\n if (\r\n this.documentPanelOpen &&\r\n !this.mainPanelHidden &&\r\n this.mapElement instanceof HTMLDivElement &&\r\n ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) \|\|\r\n (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n ) {\r\n this.dsoMainPanelToggle.emit({\r\n hide: true,\r\n });\r\n }\r\n }\r\n\r\n private switchActiveTab = (tab: ViewerGridTab) => {\r\n this.dsoActiveTabSwitch.emit({\r\n tab,\r\n });\r\n };\r\n\r\n private shrinkDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private expandDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private toggleMainPanel = () => {\r\n if (\r\n this.mapElement instanceof HTMLDivElement &&\r\n this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n ) {\r\n this.mainSize = \"small\";\r\n }\r\n\r\n this.dsoMainPanelToggle.emit({\r\n hide: !this.mainPanelHidden,\r\n });\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterPanelOpen && this.filterPanelSlot) {\r\n this.filterPanel?.show();\r\n }\r\n\r\n if (this.overlayOpen && this.overlaySlot) {\r\n this.overlay?.showModal();\r\n }\r\n\r\n if (this.mapElement instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.mapElement);\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n if (this.mapElement) {\r\n resizeObserver.unobserve(this.mapElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <slot name=\"top-bar\" />\r\n <div class=\"viewer-grid-columns\">\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {viewerGridTabs.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n {viewerGridTabLabelMap[tab]}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <MainPanel\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n documentPanelOpen={this.documentPanelOpen}\r\n mainPanelExpanded={this.mainPanelExpanded}\r\n mainPanelHidden={this.mainPanelHidden}\r\n toggleMainPanel={this.toggleMainPanel}\r\n dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n ></MainPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <FilterPanel\r\n title={this.filterPanelTitle}\r\n ref={(element) => (this.filterPanel = element)}\r\n dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n ></FilterPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n <slot name=\"map\" />\r\n </div>\r\n )}\r\n {((!this.tabView && this.documentPanelOpen) \|\| (this.tabView && this.activeTab === \"document\")) && (\r\n <DocumentPanel\r\n tabView={this.tabView}\r\n panelSize={this.documentPanelSize}\r\n shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n expandDocumentPanel={this.expandDocumentPanel}\r\n dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n ></DocumentPanel>\r\n )}\r\n <Overlay\r\n ref={(element) => (this.overlay = element)}\r\n dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n ></Overlay>\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-viewer-grid.entry.esm.js","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/filter-panel.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 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 ViewerGridPanelSize = \"small\" \| \"medium\" \| \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridTab = (typeof viewerGridTabs)[number];\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\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\n\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n className: string;\r\n onClick: any;\r\n label: string;\r\n icon: \"chevron-left\" \| \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n <button type=\"button\" class={className} onClick={onClick}>\r\n <span class=\"sr-only\">{label}</span>\r\n <dso-icon icon={icon}></dso-icon>\r\n </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n panelLabel: string;\r\n size: ViewerGridPanelSize;\r\n expand: () => void;\r\n shrink: () => void;\r\n placement: \"left\" \| \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n shrink,\r\n expand,\r\n size,\r\n panelLabel,\r\n placement,\r\n}) => {\r\n const buttons = [];\r\n\r\n if (size !== \"small\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={shrink}\r\n label={`${panelLabel} smaller maken`}\r\n icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n className=\"shrink\"\r\n />,\r\n );\r\n }\r\n\r\n if (size !== \"large\") {\r\n buttons.push(\r\n <SizingButton\r\n onClick={expand}\r\n label={`${panelLabel} breder maken`}\r\n icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n className=\"expand\"\r\n />,\r\n );\r\n }\r\n\r\n return (\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n </span>\r\n {buttons}\r\n </div>\r\n );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\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 ViewerGridFilterPanelProps {\r\n title?: string;\r\n ref: ((element: HTMLDialogElement \| undefined) => void) \| undefined;\r\n dsoCloseFilterPanel: (event: MouseEvent \| Event) => void;\r\n}\r\n\r\nexport const FilterPanel: FunctionalComponent<ViewerGridFilterPanelProps> = ({ title, ref, dsoCloseFilterPanel }) => (\r\n <dialog class=\"filter-panel\" ref={ref}>\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=\"filter-panel\" />\r\n </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n tabView: boolean;\r\n mainSize: ViewerGridPanelSize;\r\n documentPanelOpen: boolean;\r\n mainPanelExpanded: boolean;\r\n mainPanelHidden: boolean;\r\n toggleMainPanel: () => void;\r\n dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n tabView,\r\n mainSize,\r\n documentPanelOpen,\r\n mainPanelExpanded,\r\n mainPanelHidden,\r\n toggleMainPanel,\r\n dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n <div\r\n class={clsx(\"dso-main-panel\", {\r\n compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,\r\n expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n collapsed: mainPanelHidden,\r\n })}\r\n onTransitionEnd={(e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n }\r\n }}\r\n >\r\n {!tabView && documentPanelOpen && (\r\n <div class=\"toggle-button\">\r\n <button type=\"button\" onClick={toggleMainPanel}>\r\n <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n </button>\r\n </div>\r\n )}\r\n <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n);\r\n","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 {\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 .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\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.viewer-grid-columns {\r\n position: relative;\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 .sizing-buttons,\r\n .toggle-button {\r\n inset-inline-start: calc(100% + 1px);\r\n transition: inset-inline-start core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: 0 units.$u1 * 0.5;\r\n\r\n button {\r\n border-end-end-radius: 4px;\r\n border-start-end-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.dso-document-panel {\r\n background-color: colors.$wit;\r\n flex-shrink: 0;\r\n flex-grow: 0;\r\n position: relative;\r\n transition:\r\n flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n max-inline-size core-viewer-grid-variables.$transition-time ease-in,\r\n min-inline-size core-viewer-grid-variables.$transition-time ease-in;\r\n z-index: zindex.$viewer-grid-main-panel;\r\n\r\n .sizing-buttons {\r\n inset-block-start: auto;\r\n inset-block-end: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inset-inline-end: calc(100% + 1px);\r\n transition: inset-inline-end core-viewer-grid-variables.$transition-time ease-in;\r\n padding-block: 0 units.$u1;\r\n padding-inline: units.$u1 * 0.5 0;\r\n\r\n button {\r\n border-end-start-radius: 4px;\r\n border-start-start-radius: 4px;\r\n }\r\n }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n overflow-x: hidden;\r\n position: absolute;\r\n inset-block-start: core-viewer-grid-variables.$sizing-buttons-block-start;\r\n inline-size: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n flex: 0 0 100%;\r\n block-size: core-viewer-grid-variables.$resize-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-viewer-grid-variables.$resize-button-size;\r\n }\r\n\r\n &:hover {\r\n dso-icon {\r\n color: colors.$wit;\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n}\r\n\r\n.map {\r\n block-size: 100%;\r\n inline-size: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.filter-panel,\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.filter-panel {\r\n display: block;\r\n position: absolute;\r\n padding-block: units.$u1;\r\n padding-inline: css-grid.$grid-gutter-width * 0.5;\r\n inset-block-start: 0;\r\n block-size: 100%;\r\n inset-inline-start: calc(core-viewer-grid-variables.$filter-panel-max-inline-size * -1);\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 (max-width: core-viewer-grid-variables.$filter-panel-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 @media screen and (min-width: #{media-query-breakpoints.$screen-md-min}) {\r\n max-inline-size: core-viewer-grid-variables.$filter-panel-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.$filter-panel-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@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 flex-direction: column;\r\n block-size: 100vh;\r\n overflow: clip;\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 .viewer-grid-columns {\r\n display: flex;\r\n overflow: hidden;\r\n flex-grow: 1;\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 .filter-panel {\r\n margin-inline: 0 auto;\r\n inline-size: calc(100vw - 40px);\r\n\r\n &[open] {\r\n border-inline-end: 1px solid core-viewer-grid-variables.$filter-panel-border-color;\r\n }\r\n }\r\n\r\n .overlay {\r\n box-shadow: -2px 0 5px colors.$grijs-60;\r\n margin-inline: auto 0;\r\n }\r\n\r\n @media screen and (max-width: #{media-query-breakpoints.$screen-sm-max + units.$u5 + 0.99}) {\r\n :host([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n max-inline-size: calc(100vw - #{core-viewer-grid-variables.$filter-panel-max-inline-size});\r\n }\r\n }\r\n\r\n .filter-panel {\r\n inline-size: core-viewer-grid-variables.$filter-panel-max-inline-size;\r\n inset-inline-start: -(core-viewer-grid-variables.$filter-panel-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 .filter-panel,\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 .filter-panel {\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([filter-panel-open]) {\r\n .dso-main-panel {\r\n margin-inline-start: core-viewer-grid-variables.$filter-panel-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 ViewerGridActiveTabSwitchEvent,\r\n ViewerGridChangeSizeAnimationEndEvent,\r\n ViewerGridChangeSizeEvent,\r\n ViewerGridCloseFilterPanelEvent,\r\n ViewerGridCloseOverlayEvent,\r\n ViewerGridMainExpandEvent,\r\n ViewerGridMainToggleEvent,\r\n ViewerGridPanelSize,\r\n ViewerGridTab,\r\n viewerGridTabLabelMap,\r\n viewerGridTabs,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(([entry]) => {\r\n const shadowRoot = entry?.target.getRootNode();\r\n if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n shadowRoot.host._checkMainPanelVisibility();\r\n }\r\n }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/*\r\n @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.\r\n * @slot main\r\n * @slot map\r\n * @slot filter-panel\r\n * @slot overlay\r\n * @slot document-panel\r\n /\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n private mapElement?: HTMLDivElement;\r\n\r\n /\r\n The title of the filter panel\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelTitle?: string;\r\n\r\n /\r\n Set to true when filter panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterPanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n Set to true when document panel should show.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelOpen = false;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set active tab in tab view.\r\n /\r\n @Prop()\r\n activeTab?: ViewerGridTab;\r\n\r\n /\r\n Size of the panel when component loads.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop({ reflect: true })\r\n documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n /\r\n Set to show main panel expanded.\r\n /\r\n @Prop()\r\n mainPanelExpanded = false;\r\n\r\n /\r\n Set to hide the main panel.\r\n /\r\n @Prop()\r\n mainPanelHidden = false;\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n /\r\n Emitted when user wants to close the filter panel.\r\n /\r\n @Event()\r\n dsoCloseFilterPanel!: EventEmitter<ViewerGridCloseFilterPanelEvent>;\r\n\r\n /\r\n Emitted when user applies filter panel options.\r\n /\r\n @Event()\r\n dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted on interaction with sizing buttons.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n /\r\n Emitted after main size animation.\r\n /\r\n @Event()\r\n dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n /\r\n Emitted when the user wants to expand the main panel.\r\n /\r\n @Event()\r\n dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n /\r\n Emitted when the user toggles the visibility of the main panel.\r\n \r\n Also emitted by scripting when the panels do not fit anymore.\r\n /\r\n @Event()\r\n dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n @State()\r\n tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n private filterPanel: HTMLDialogElement \| undefined;\r\n\r\n private get filterPanelSlot() {\r\n return this.host.querySelector(\"[slot='filter-panel']\");\r\n }\r\n\r\n private get overlaySlot() {\r\n return this.host.querySelector(\"[slot='overlay']\");\r\n }\r\n\r\n private overlay: HTMLDialogElement \| undefined;\r\n\r\n @Watch(\"documentPanelOpen\")\r\n documentPanelOpenWatcher(open: boolean) {\r\n if (open) {\r\n this._checkMainPanelVisibility();\r\n }\r\n }\r\n\r\n @Watch(\"filterPanelOpen\")\r\n filterPanelOpenWatcher(open: boolean) {\r\n if (!this.filterPanelSlot) {\r\n console.warn(\"slot 'filter-panel' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.filterPanel?.show();\r\n } else {\r\n this.filterPanel?.close();\r\n }\r\n }\r\n\r\n @Watch(\"overlayOpen\")\r\n overlayOpenWatcher(open: boolean) {\r\n if (!this.overlaySlot) {\r\n console.warn(\"slot 'overlay' has not been set\");\r\n }\r\n\r\n if (open) {\r\n this.overlay?.showModal();\r\n } else {\r\n this.overlay?.close();\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _checkMainPanelVisibility() {\r\n if (\r\n this.documentPanelOpen &&\r\n !this.mainPanelHidden &&\r\n this.mapElement instanceof HTMLDivElement &&\r\n ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) \|\|\r\n (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n ) {\r\n this.dsoMainPanelToggle.emit({\r\n hide: true,\r\n });\r\n }\r\n }\r\n\r\n private switchActiveTab = (tab: ViewerGridTab) => {\r\n this.dsoActiveTabSwitch.emit({\r\n tab,\r\n });\r\n };\r\n\r\n private shrinkDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n });\r\n };\r\n\r\n private expandDocumentPanel = () => {\r\n this.dsoDocumentPanelSizeChange.emit({\r\n currentSize: this.documentPanelSize,\r\n nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n });\r\n };\r\n\r\n private toggleMainPanel = () => {\r\n if (\r\n this.mapElement instanceof HTMLDivElement &&\r\n this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n ) {\r\n this.mainSize = \"small\";\r\n }\r\n\r\n this.dsoMainPanelToggle.emit({\r\n hide: !this.mainPanelHidden,\r\n });\r\n };\r\n\r\n private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n connectedCallback() {\r\n window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterPanelOpen && this.filterPanelSlot) {\r\n this.filterPanel?.show();\r\n }\r\n\r\n if (this.overlayOpen && this.overlaySlot) {\r\n this.overlay?.showModal();\r\n }\r\n\r\n if (this.mapElement instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.mapElement);\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n if (this.mapElement) {\r\n resizeObserver.unobserve(this.mapElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <slot name=\"top-bar\" />\r\n <div class=\"viewer-grid-columns\">\r\n {this.tabView && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-sub\">\r\n {viewerGridTabs.map((tab) => (\r\n <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n {viewerGridTabLabelMap[tab]}\r\n </button>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <MainPanel\r\n tabView={this.tabView}\r\n mainSize={this.mainSize}\r\n documentPanelOpen={this.documentPanelOpen}\r\n mainPanelExpanded={this.mainPanelExpanded}\r\n mainPanelHidden={this.mainPanelHidden}\r\n toggleMainPanel={this.toggleMainPanel}\r\n dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n ></MainPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"search\")) && (\r\n <FilterPanel\r\n title={this.filterPanelTitle}\r\n ref={(element) => (this.filterPanel = element)}\r\n dsoCloseFilterPanel={(e) => this.dsoCloseFilterPanel.emit({ originalEvent: e })}\r\n ></FilterPanel>\r\n )}\r\n {(!this.tabView \|\| (this.tabView && this.activeTab === \"map\")) && (\r\n <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n <slot name=\"map\" />\r\n </div>\r\n )}\r\n {((!this.tabView && this.documentPanelOpen) \|\| (this.tabView && this.activeTab === \"document\")) && (\r\n <DocumentPanel\r\n tabView={this.tabView}\r\n panelSize={this.documentPanelSize}\r\n shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n expandDocumentPanel={this.expandDocumentPanel}\r\n dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n ></DocumentPanel>\r\n )}\r\n <Overlay\r\n ref={(element) => (this.overlay = element)}\r\n dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n ></Overlay>\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/dso-toolkit/p-0031a2bb.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as n,c as t,h as o,F as e,g as i}from"./p-C-b4jsbt.js";import{i as s}from"./p-B_kXuEcW.js";const r={en:{"dso-map-controls":{title:"Map layers",layersButton:"Map layers",zoomIn:"Zoom in",zoomOut:"Zoom out",hidePanel:"Hide panel {{title}}"}},nl:{"dso-map-controls":{title:"Kaartlagen",layersButton:"Kaartlagen",zoomIn:"Zoom in",zoomOut:"Zoom uit",hidePanel:"Verberg paneel {{title}}"}}};const a="@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n\n @param {ArgList} $transitions...\n - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n - (\"property\", duur): eigen duur, geen delay\n - (\"property\", duur, delay): eigen duur én delay\n\n @example\n @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n\n @output\n transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n\n/\n:host {\n background-color: #fff;\n border: 1px solid #ccc;\n inset-block-end: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n transition: transform 300ms ease;\n inline-size: 300px;\n}\n\n,\n::after,\n::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n display: none;\n}\n:host([open]) .zoom-buttons {\n inset-block-start: 16px;\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.toggle-visibility-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n outline: 0;\n}\n.toggle-visibility-button {\n background-color: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-color, #39870c);\n}\n.toggle-visibility-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.toggle-visibility-button:hover {\n background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.toggle-visibility-button:active {\n background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\n.toggle-visibility-button.dso-small {\n line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button dso-icon:has(+ span:not(.sr-only)),\n.toggle-visibility-button svg.di:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\n.toggle-visibility-button span:not(.sr-only) + dso-icon,\n.toggle-visibility-button span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.toggle-visibility-button dso-icon + span:not(.sr-only),\n.toggle-visibility-button svg.di + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button {\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-inline-end: 16px;\n padding-block: 8px;\n padding-inline: 16px;\n white-space: nowrap;\n}\n.toggle-visibility-button {\n position: absolute;\n inset-inline-end: calc(100% + 56px);\n inset-block-start: 16px;\n}\n\n.zoom-buttons {\n border-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex: 0 0;\n position: absolute;\n inset-inline-end: calc(100% + 16px);\n inset-block-start: 16px;\n}\n.zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.zoom-buttons button:active {\n outline: 0;\n}\n.zoom-buttons button {\n background-color: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-color, #39870c);\n}\n.zoom-buttons button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.zoom-buttons button:hover {\n background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.zoom-buttons button:active {\n background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\n.zoom-buttons button.dso-small {\n line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button {\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-start-start-radius: 4px;\n border-start-end-radius: 4px;\n flex: 0 0 100%;\n block-size: 40px;\n min-inline-size: auto;\n inline-size: 40px;\n}\n.zoom-buttons button + button {\n border-radius: 0;\n border-end-start-radius: 4px;\n border-end-end-radius: 4px;\n border-block-start: 1px solid #ccc;\n}\n.zoom-buttons button:focus-visible {\n outline-offset: -1px;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.close-button[disabled] {\n color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.close-button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n color: #173521;\n}\n.close-button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.close-button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.close-button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close-button {\n padding: 0;\n position: absolute;\n inset-inline-end: 16px;\n inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n block-size: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-block-end: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: \"Asap\", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n .toggle-visibility-button {\n block-size: 40px;\n margin-inline-end: 0;\n min-inline-size: auto;\n inset-inline-end: calc(100% + 16px);\n inline-size: 40px;\n }\n .toggle-visibility-button dso-icon {\n margin-inline-end: 0;\n }\n .toggle-visibility-button span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n .zoom-buttons {\n inset-block-start: 72px;\n }\n}";var l=undefined&&undefined.__classPrivateFieldGet\|\|function(n,t,o,e){if(o==="a"&&!e)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t\|\|!e:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?e:o==="a"?e.call(n):e?e.value:t.get(n)};var d=undefined&&undefined.__classPrivateFieldSet\|\|function(n,t,o,e,i){if(e==="m")throw new TypeError("Private method is not writable");if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t\|\|!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e==="a"?i.call(n,o):i?i.value=o:t.set(n,o),o};var c,b;const f=300;const g=class{constructor(o){n(this,o);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.open=false;this.hideContent=!this.open;this.text=s((()=>this.host),r);c.set(this,void 0);b.set(this,void 0)}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=l(this,c,"f"))===null\|\|n===void 0?void 0:n.focus()}),f)}else{setTimeout((()=>{var n;this.hideContent=true;(n=l(this,b,"f"))===null\|\|n===void 0?void 0:n.focus()}),f)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return o(e,null,o("button",{key:"0fd986956411cb17370bee64462d0d8819611841",type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>d(this,b,n,"f")},o("dso-icon",{key:"52a726ecf9d7b42dfec754efdf8de04d88123c58",icon:"layers"}),o("span",{key:"1ddd1e60d1a4f018fb84199c3a61066352d06431"},this.text("layersButton"))),o("div",{key:"034b8741f04b6764fa8fa8b8c308a5a354c0dcb3",class:"zoom-buttons"},o("button",{key:"859a740325bbeeae6adc2b7f0b373705ff422ee2",type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"\|\|this.disableZoom==="both"},o("span",{key:"480623c3611aa1184c7220db69efcfa204f72a2b"},this.text("zoomIn")),o("dso-icon",{key:"82622c8e1a812ec3db1063124729096d6f0f76a9",icon:"plus"})),o("button",{key:"5452cf6f7ade2d583f3f9563786b6cec01f5ce04",type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"\|\|this.disableZoom==="both"},o("span",{key:"9952df75387874e21072fb5564588f438e2aa0c6"},this.text("zoomOut")),o("dso-icon",{key:"81c398b34a59db6f00545264685427ddd466f2d5",icon:"minus"}))),o("section",{key:"48e2d301e96a373af8926c7d5f3fc32068993c23",hidden:this.hideContent},o("header",{key:"ebbe567521c62e8243add8859fc0a889e624f5bd"},o("h2",{key:"b0b6b51cd9ea6f5795ee8d6f35f2be16ae610010"},this.text("title")),o("button",{key:"1122debc7dbff1b1144a89ca47c0693b88f53919",type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>d(this,c,n,"f")},o("span",{key:"209fa94e79a1b937e8306b1b0e5953d8e7fa8ef5"},this.text("hidePanel",{title:this.text("title")})),o("dso-icon",{key:"caaedeaabcec01c76928e8f86b952ea9297a25ef",icon:"times"}))),o("dso-scrollable",{key:"34a5fac306731abb91b670f22238501a5cf60f06"},o("div",{key:"34d4a73073d3a53537821c6d5d1360a5886952aa",class:"content"},o("slot",{key:"98ed8da0651cbd7d30cc6a38948451bce2e1b29a"})))))}get host(){return i(this)}static get watchers(){return{open:["watchOpen"]}}};c=new WeakMap,b=new WeakMap;g.style=a;export{g as dso_map_controls};
2	+ //# sourceMappingURL=p-0031a2bb.entry.js.map

package/dist/dso-toolkit/{p-94cea134.entry.js.map → p-0031a2bb.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["translations","en","title","layersButton","zoomIn","zoomOut","hidePanel","nl","mapControlsCss","transitionDuration","MapControls","constructor","hostRef","this","open","hideContent","text","i18n","host","_MapControls_closeButtonElement","set","_MapControls_toggleButtonElement","watchOpen","setTimeout","_a","__classPrivateFieldGet","focus","toggleVisibility","e","dsoToggle","emit","originalEvent","render","h","Fragment","key","type","id","class","onClick","ref","element","__classPrivateFieldSet","icon","dsoZoomIn","disabled","disableZoom","dsoZoomOut","hidden"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-map-controls\": {\r\n title: \"Map layers\",\r\n layersButton: \"Map layers\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom out\",\r\n hidePanel: \"Hide panel {{title}}\",\r\n },\r\n },\r\n nl: {\r\n \"dso-map-controls\": {\r\n title: \"Kaartlagen\",\r\n layersButton: \"Kaartlagen\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom uit\",\r\n hidePanel: \"Verberg paneel {{title}}\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\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@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n inset-block-end: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inset-inline-start: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-inline-end: calc(\r\n 100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size}\r\n );\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n }\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inset-block-start: core-map-controls-variables.$controls-margin;\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 border-start-start-radius: 4px;\r\n border-start-end-radius: 4px;\r\n flex: 0 0 100%;\r\n block-size: core-map-controls-variables.$zoom-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-end-start-radius: 4px;\r\n border-end-end-radius: 4px;\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($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 padding: 0;\r\n position: absolute;\r\n inset-inline-end: core-map-controls-variables.$controls-margin;\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n }\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n block-size: units.$u5;\r\n margin-inline-end: 0;\r\n min-inline-size: auto;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inline-size: units.$u5;\r\n\r\n dso-icon {\r\n margin-inline-end: 0;\r\n }\r\n\r\n span {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u9;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"oGAEO,MAAMA,EAAyB,CACpCC,GAAI,CACF,mBAAoB,CAClBC,MAAO,aACPC,aAAc,aACdC,OAAQ,UACRC,QAAS,WACTC,UAAW,yBAGfC,GAAI,CACF,mBAAoB,CAClBL,MAAO,aACPC,aAAc,aACdC,OAAQ,UACRC,QAAS,WACTC,UAAW,8BClBjB,MAAME,EAAiB,ojoB,kwBCQvB,MAAMC,EAAqB,I,MAOdC,EAAW,MALxB,WAAAC,CAAAC,G,2HAaEC,KAAIC,KAAG,MAkCPD,KAAAE,aAAeF,KAAKC,KAiCZD,KAAAG,KAAOC,GAAK,IAAMJ,KAAKK,MAAMlB,GAErCmB,EAAmDC,IAAAP,UAAA,GACnDQ,EAAoDD,IAAAP,UAAA,EAuDrD,CAxFC,SAAAS,CAAUR,GACR,GAAIA,EAAM,CACRD,KAAKE,YAAc,MAEnBQ,YAAW,KAAM,IAAAC,EAAA,OAAAA,EAAAC,EAAAZ,KAAwBM,EAAA,cAAAK,SAAA,SAAAA,EAAEE,OAAO,GAAEjB,E,KAC/C,CACLc,YAAW,K,MACTV,KAAKE,YAAc,MAEnBS,EAAAC,EAAAZ,KAAIQ,EAAA,QAAuB,MAAAG,SAAA,SAAAA,EAAAE,OAAO,GACjCjB,E,EAWP,sBAAMkB,CAAiBC,GACrBf,KAAKC,MAAQD,KAAKC,KAElBD,KAAKgB,UAAUC,KAAK,CAClBC,cAAeH,EACfd,KAAMD,KAAKC,M,CASf,MAAAkB,GACE,OACEC,EAAAC,EAAA,KACED,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,GAAG,2BACHC,MAAM,2BACNC,QAAUX,GAAMf,KAAKc,iBAAiBC,GACtCY,IAAMC,GAAaC,EAAA7B,KAA4BQ,EAAAoB,EAAO,MAEtDR,EAAU,YAAAE,IAAA,2CAAAQ,KAAK,WACfV,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,kBAEnBiB,EAAK,OAAAE,IAAA,2CAAAG,MAAM,gBACTL,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLG,QAAUX,GAAMf,KAAK+B,UAAUd,KAAKF,GACpCiB,SAAUhC,KAAKiC,cAAgB,MAAQjC,KAAKiC,cAAgB,QAE5Db,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,WACjBiB,EAAA,YAAAE,IAAA,2CAAUQ,KAAK,UAEjBV,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLG,QAAUX,GAAMf,KAAKkC,WAAWjB,KAAKF,GACrCiB,SAAUhC,KAAKiC,cAAgB,OAASjC,KAAKiC,cAAgB,QAE7Db,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,YACjBiB,EAAA,YAAAE,IAAA,2CAAUQ,KAAK,YAGnBV,EAAA,WAAAE,IAAA,2CAASa,OAAQnC,KAAKE,aACpBkB,EAAA,UAAAE,IAAA,4CACEF,EAAA,MAAAE,IAAA,4CAAKtB,KAAKG,KAAK,UACfiB,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLE,MAAM,eACNC,QAAUX,GAAMf,KAAKc,iBAAiBC,GACtCY,IAAMC,GAAaC,EAAA7B,KAA2BM,EAAAsB,EAAO,MAErDR,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,YAAa,CAAEd,MAAOW,KAAKG,KAAK,YACjDiB,EAAA,YAAAE,IAAA,2CAAUQ,KAAK,YAGnBV,EAAA,kBAAAE,IAAA,4CACEF,EAAK,OAAAE,IAAA,2CAAAG,MAAM,WACTL,EAAA,QAAAE,IAAA,gD","ignoreList":[]}
1	+ {"version":3,"names":["translations","en","title","layersButton","zoomIn","zoomOut","hidePanel","nl","mapControlsCss","transitionDuration","MapControls","constructor","hostRef","this","open","hideContent","text","i18n","host","_MapControls_closeButtonElement","set","_MapControls_toggleButtonElement","watchOpen","setTimeout","_a","__classPrivateFieldGet","focus","toggleVisibility","e","dsoToggle","emit","originalEvent","render","h","Fragment","key","type","id","class","onClick","ref","element","__classPrivateFieldSet","icon","dsoZoomIn","disabled","disableZoom","dsoZoomOut","hidden"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-map-controls\": {\r\n title: \"Map layers\",\r\n layersButton: \"Map layers\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom out\",\r\n hidePanel: \"Hide panel {{title}}\",\r\n },\r\n },\r\n nl: {\r\n \"dso-map-controls\": {\r\n title: \"Kaartlagen\",\r\n layersButton: \"Kaartlagen\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom uit\",\r\n hidePanel: \"Verberg paneel {{title}}\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\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@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n inset-block-end: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inset-inline-start: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-inline-end: calc(\r\n 100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size}\r\n );\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n }\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inset-block-start: core-map-controls-variables.$controls-margin;\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 border-start-start-radius: 4px;\r\n border-start-end-radius: 4px;\r\n flex: 0 0 100%;\r\n block-size: core-map-controls-variables.$zoom-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-end-start-radius: 4px;\r\n border-end-end-radius: 4px;\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($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 padding: 0;\r\n position: absolute;\r\n inset-inline-end: core-map-controls-variables.$controls-margin;\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n }\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n block-size: units.$u5;\r\n margin-inline-end: 0;\r\n min-inline-size: auto;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inline-size: units.$u5;\r\n\r\n dso-icon {\r\n margin-inline-end: 0;\r\n }\r\n\r\n span {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u9;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span>{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </>\r\n );\r\n }\r\n}\r\n"],"mappings":"oGAEO,MAAMA,EAAyB,CACpCC,GAAI,CACF,mBAAoB,CAClBC,MAAO,aACPC,aAAc,aACdC,OAAQ,UACRC,QAAS,WACTC,UAAW,yBAGfC,GAAI,CACF,mBAAoB,CAClBL,MAAO,aACPC,aAAc,aACdC,OAAQ,UACRC,QAAS,WACTC,UAAW,8BClBjB,MAAME,EAAiB,4kpB,kwBCQvB,MAAMC,EAAqB,I,MAOdC,EAAW,MALxB,WAAAC,CAAAC,G,2HAaEC,KAAIC,KAAG,MAkCPD,KAAAE,aAAeF,KAAKC,KAiCZD,KAAAG,KAAOC,GAAK,IAAMJ,KAAKK,MAAMlB,GAErCmB,EAAmDC,IAAAP,UAAA,GACnDQ,EAAoDD,IAAAP,UAAA,EAuDrD,CAxFC,SAAAS,CAAUR,GACR,GAAIA,EAAM,CACRD,KAAKE,YAAc,MAEnBQ,YAAW,KAAM,IAAAC,EAAA,OAAAA,EAAAC,EAAAZ,KAAwBM,EAAA,cAAAK,SAAA,SAAAA,EAAEE,OAAO,GAAEjB,E,KAC/C,CACLc,YAAW,K,MACTV,KAAKE,YAAc,MAEnBS,EAAAC,EAAAZ,KAAIQ,EAAA,QAAuB,MAAAG,SAAA,SAAAA,EAAAE,OAAO,GACjCjB,E,EAWP,sBAAMkB,CAAiBC,GACrBf,KAAKC,MAAQD,KAAKC,KAElBD,KAAKgB,UAAUC,KAAK,CAClBC,cAAeH,EACfd,KAAMD,KAAKC,M,CASf,MAAAkB,GACE,OACEC,EAAAC,EAAA,KACED,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,GAAG,2BACHC,MAAM,2BACNC,QAAUX,GAAMf,KAAKc,iBAAiBC,GACtCY,IAAMC,GAAaC,EAAA7B,KAA4BQ,EAAAoB,EAAO,MAEtDR,EAAU,YAAAE,IAAA,2CAAAQ,KAAK,WACfV,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,kBAEnBiB,EAAK,OAAAE,IAAA,2CAAAG,MAAM,gBACTL,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLG,QAAUX,GAAMf,KAAK+B,UAAUd,KAAKF,GACpCiB,SAAUhC,KAAKiC,cAAgB,MAAQjC,KAAKiC,cAAgB,QAE5Db,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,WACjBiB,EAAA,YAAAE,IAAA,2CAAUQ,KAAK,UAEjBV,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLG,QAAUX,GAAMf,KAAKkC,WAAWjB,KAAKF,GACrCiB,SAAUhC,KAAKiC,cAAgB,OAASjC,KAAKiC,cAAgB,QAE7Db,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,YACjBiB,EAAA,YAAAE,IAAA,2CAAUQ,KAAK,YAGnBV,EAAA,WAAAE,IAAA,2CAASa,OAAQnC,KAAKE,aACpBkB,EAAA,UAAAE,IAAA,4CACEF,EAAA,MAAAE,IAAA,4CAAKtB,KAAKG,KAAK,UACfiB,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLE,MAAM,eACNC,QAAUX,GAAMf,KAAKc,iBAAiBC,GACtCY,IAAMC,GAAaC,EAAA7B,KAA2BM,EAAAsB,EAAO,MAErDR,EAAA,QAAAE,IAAA,4CAAOtB,KAAKG,KAAK,YAAa,CAAEd,MAAOW,KAAKG,KAAK,YACjDiB,EAAA,YAAAE,IAAA,2CAAUQ,KAAK,YAGnBV,EAAA,kBAAAE,IAAA,4CACEF,EAAK,OAAAE,IAAA,2CAAAG,MAAM,WACTL,EAAA,QAAAE,IAAA,gD","ignoreList":[]}