npm - @dso-toolkit/core - Versions diffs - 78.1.0 → 79.0.0-pre.1 - Mend

@dso-toolkit/core 78.1.0 → 79.0.0-pre.1

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 (328) hide show

package/dist/bundle/{p-CwKyBrf3.js.map → p-CEFYoazH.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CwKyBrf3~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n block-size: 100%;\r\n overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n overflow-y: auto;\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n block-size: units.$u3;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n inline-size: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-start: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-end: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-CEFYoazH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n block-size: 100%;\r\n overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n overflow-y: auto;\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n block-size: units.$u3;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n inline-size: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-start: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-end: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-CXEXoC_s.js → p-CeXiA7z5.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-Dm38fPV4.js';
 import { d as debounce } from './p-BxvZeNWe.js';
 import { c as createFocusTrap } from './p-BocpUT46.js';
-import { d as defineCustomElement$1 } from './p-lE-KxpG-.js';
+import { d as defineCustomElement$1 } from './p-7ffg336s.js';
 const imageOverlayCss = "@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  display: inline-block;\n  position: relative;\n}\n\n:host(:hover) .open,\n.open:focus {\n  opacity: 1;\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.open {\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.open:focus, .open:focus-visible {\n  outline-offset: 2px;\n}\n.open:active {\n  outline: 0;\n}\n.open {\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.open {\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.open:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\n.open:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.open[disabled], .open[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.open.dso-small {\n  line-height: 1rem;\n}\n.open.dso-small dso-icon,\n.open.dso-small svg.di, .open.dso-small.extern::after, .open.dso-small.download::after, .open.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.open.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open > 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.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.open.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.open.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.open.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open.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.open.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.open.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open {\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-inline-size: auto;\n  padding: 8px;\n  opacity: 0;\n  position: absolute;\n  inset-inline-end: 16px;\n  inset-block-start: 16px;\n}\n\n.dimmer {\n  position: fixed;\n  inset: 0;\n  z-index: 19;\n  display: flex;\n  padding: 32px;\n  background-color: rgba(255, 255, 255, 0.8);\n  justify-content: center;\n}\n\n.wrapper {\n  align-self: center;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  line-height: 0;\n  outline: 4px solid #fff;\n  position: relative;\n  z-index: 20;\n}\n.wrapper .title {\n  background-color: #fff;\n  font-weight: 700;\n  line-height: initial;\n  padding: 8px;\n  position: absolute;\n}\n.wrapper img {\n  inline-size: auto;\n  block-size: auto;\n  max-inline-size: 100%;\n  max-block-size: calc(100vh - 64px);\n}\n.wrapper .figuur-bijschrift:not([hidden]) {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n  padding-block-end: 12px;\n  padding-block-start: 16px;\n}\n\n.close {\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:focus, .close:focus-visible {\n  outline-offset: 2px;\n}\n.close:active {\n  outline: 0;\n}\n.close {\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.close {\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.close:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\n.close:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.close[disabled], .close[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.close.dso-small {\n  line-height: 1rem;\n}\n.close.dso-small dso-icon,\n.close.dso-small svg.di, .close.dso-small.extern::after, .close.dso-small.download::after, .close.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.close.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close > 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.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close.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.close.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.close.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close.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.close.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.close.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close {\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-inline-size: auto;\n  padding: 8px;\n  position: absolute;\n  inset-block-start: 16px;\n  inset-inline-end: 16px;\n}\n\nins.editaction-add {\n  display: inline-block;\n  margin-block-end: 8px;\n  padding: 8px;\n  text-decoration: none;\n}\nins.editaction-add {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e4f1d4;\n  border-color: #e4f1d4;\n  color: #191919;\n}\nins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nins.editaction-add {\n  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\nins.editaction-add .wrapper {\n  outline: none;\n  padding: 8px;\n}\nins.editaction-add .wrapper {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e4f1d4;\n  border-color: #e4f1d4;\n  color: #191919;\n}\nins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nins.editaction-add .wrapper {\n  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\nins.editaction-add .wrapper .editaction-label {\n  line-height: 1.5;\n}\nins.editaction-add .wrapper .close {\n  inset-block-start: 48px;\n}\nins.editaction-add .open {\n  inset-block-start: 48px;\n}\n\ndel.editaction-remove {\n  display: inline-block;\n  margin-block-end: 8px;\n  padding: 8px;\n}\ndel.editaction-remove {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #f5d8dc;\n  border-color: #f5d8dc;\n  color: #191919;\n}\ndel.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\ndel.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\ndel.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\ndel.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\ndel.editaction-remove {\n  text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n  del.editaction-remove {\n    font-family: sans-serif;\n  }\n}\ndel.editaction-remove .wrapper {\n  outline: none;\n  padding: 8px;\n}\ndel.editaction-remove .wrapper {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #f5d8dc;\n  border-color: #f5d8dc;\n  color: #191919;\n}\ndel.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\ndel.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\ndel.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\ndel.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\ndel.editaction-remove .wrapper {\n  text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n  del.editaction-remove .wrapper {\n    font-family: sans-serif;\n  }\n}\ndel.editaction-remove .wrapper .title {\n  text-decoration: line-through;\n}\ndel.editaction-remove .wrapper .editaction-label {\n  line-height: 1.5;\n}\ndel.editaction-remove .wrapper .close {\n  inset-block-start: 48px;\n}\ndel.editaction-remove .open {\n  inset-block-start: 48px;\n}\n\n.editaction-label {\n  font-style: italic;\n  margin-block-end: 8px;\n}";
@@ -140,6 +140,6 @@ function defineCustomElement() {
 }
 export { ImageOverlay as I, defineCustomElement as d };
-//# sourceMappingURL=p-CXEXoC_s.js.map
+//# sourceMappingURL=p-CeXiA7z5.js.map
-//# sourceMappingURL=p-CXEXoC_s.js.map
+//# sourceMappingURL=p-CeXiA7z5.js.map

package/dist/bundle/{p-CXEXoC_s.js.map → p-CeXiA7z5.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CXEXoC_s.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,k2pBAAk2pB;;ACiB13pB,MAAM,iBAAiB,GAAyD;AAC9E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,OAAO,EAAE,YAAY;CACtB;AAED,MAAM,MAAM,GAMP,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,KAC9C,MAAM;IACN,GAAG,KACD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,GAAG,EAAA,EAC1B,QAAQ,CAAC,CAAC,CAAC,EACX,QAAQ,CAAC,CAAC,CAAC,EACZ,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAI,CAAA,EAC3B,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,KAAK,EAAA,EAChD,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAA,SAAA,CAAoB,CACb,EACR,QAAQ,CAAC,CAAC,CAAC,CACR,CACF,CACP;MAOU,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAgBE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAGd,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAS,CAAA,SAAA,GAAuB,IAAI;AAEpC,QAAA,IAAc,CAAA,cAAA,GAAuB,IAAI;AA2MlD;AApMC,IAAA,YAAY,CAAC,KAAY,EAAA;AACvB,QAAA,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC;;;IAIlC,iBAAiB,GAAA;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAiB,mBAAmB,CAAC;QAE7E,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAiB,wBAAwB,CAAC;;IAGzF,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CACtC,QAAQ,CAAC,MAAK;YACZ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AAEjD,YAAA,IAAI,UAAU,YAAY,gBAAgB,EAAE;AAC1C,gBAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;;AAEhC,SAAC,EAAE,GAAG,CAAC,CACR;QAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,CAAC,KAAI;;AACjD,YAAA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AAEtB,YAAA,IAAI,CAAA,CAAA,EAAA,GAAA,CAAC,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,MAAK,WAAW,EAAE;gBAC9B,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,SAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACvC,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;AAC/B,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAC;QAEF,IAAI,CAAC,iBAAiB,EAAE;;IAG1B,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QACvB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QACnC,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;IAG3B,iBAAiB,GAAA;;QACvB,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AAEjD,QAAA,IAAI,EAAE,UAAU,YAAY,gBAAgB,CAAC,EAAE;YAC7C;;;AAIF,QAAA,IAAI,UAAU,CAAC,QAAQ,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;;QAG9B,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,CAAC,UAAU,CAAC;;AAGlC,IAAA,WAAW,CAAC,YAA8B,EAAA;QAChD,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,YAAY;QAEnE,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,YAAY,IAAI,MAAM,GAAG,aAAa;;AAGxD,IAAA,aAAa,CAAC,WAAmB,EAAA;AACvC,QAAA,OAAO,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,WAAW;;IAGjE,MAAM,GAAA;;AACJ,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;QAEzD,MAAM,eAAe,GACnB,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS;AAEhH,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,KAC1B,CACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,EAChD,OAAO,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAA,EAEnC,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,eAAe,EAAY,CAAA,EAC1C,CAA0C,CAAA,MAAA,EAAA,IAAA,EAAA,+BAAA,CAAA,CACnC,CACV;AAED,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,WAAW,EAAE;YACpC,QACE,CAAC,CAAA,IAAI,IAAC,OAAO,EAAE,MAAK,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAA,EAC9C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAE,eAAe,EAAQ,GAAA,CAAA,EACtD,CAAA,CAAC,MAAM,EACL,EAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EACjD,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAA,EAEjC,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAA,EACzD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAG,CACtB,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAE,eAAe,MAAQ,CAChD,EACT,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,EACP,MAAM,CACH,CACD;;AAIX,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;YAClC,QACE,CAAC,CAAA,IAAI,IAAC,OAAO,EAAE,MAAK,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAA,EAC9C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAE,eAAe,EAAQ,GAAA,CAAA,EACtD,CAAA,CAAC,MAAM,EACL,EAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EACjD,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAA,EAEjC,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAA,EACzD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAG,CACtB,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAE,eAAe,MAAQ,CAChD,EACT,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,EACP,MAAM,CACH,CACD;;AAIX,QAAA,QACE,CAAC,CAAA,IAAI,IAAC,OAAO,EAAE,QAAK,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAA,EAC9C,CAAA,CAAC,MAAM,EACL,EAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EACjD,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAA,EAEjC,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAA,EACzD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAG,CACtB,CACC,EACT,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,EACP,MAAM,CACF;;IAIX,kBAAkB,GAAA;;AAChB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE;AAC/C,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,uBAAuB,EAAE,CAAC,CAAC,KAAI;AAC7B,oBAAA,IAAI,CAAC,YAAY,UAAU,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,EAAE;AAC1E,wBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AAEnB,wBAAA,OAAO,KAAK;;AAGd,oBAAA,OAAO,IAAI;iBACZ;gBACD,cAAc,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,mCAAI,KAAK;gBAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aAC1C,CAAC,CAAC,QAAQ,EAAE;;aACR,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;YACpC,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;YAEvB,OAAO,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.open {\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 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n opacity: 0;\r\n position: absolute;\r\n inset-inline-end: units.$u2;\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: color.scale(colors.$wit, $alpha: -20%);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .title {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n inline-size: auto;\r\n block-size: auto;\r\n max-inline-size: 100%;\r\n max-block-size: calc(100vh - units.$u8);\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-block-end: units.$u1 * 1.5;\r\n padding-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.close {\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 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n }\r\n}\r\n\r\nins.editaction-add {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include insert.element();\r\n @include insert.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include insert.root();\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\ndel.editaction-remove {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .title {\r\n text-decoration: line-through;\r\n }\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-block-end: units.$u1;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n FunctionalComponent,\r\n Host,\r\n Listen,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" \| \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n verwijder: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n active: boolean;\r\n src: string \| undefined;\r\n alt: string \| undefined;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n active &&\r\n src && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={ref}>\r\n {children[2]}\r\n {children[0]}\r\n <img src={src} alt={alt} />\r\n <button type=\"button\" class=\"close\" onClick={click}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span>Sluiten</span>\r\n </button>\r\n {children[1]}\r\n </div>\r\n </div>\r\n );\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n /*\r\n The wijzigactie.\r\n */\r\n @Prop()\r\n wijzigactie?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private buttonElement: HTMLButtonElement \| undefined;\r\n\r\n private wrapperElement: HTMLDivElement \| undefined;\r\n\r\n private trap: FocusTrap \| undefined;\r\n\r\n private titelSlot: HTMLElement \| null = null;\r\n\r\n private bijschriftSlot: HTMLElement \| null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200),\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth \|\| height < naturalHeight;\r\n }\r\n\r\n private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n return wijzigactie === \"voegtoe\" \|\| wijzigactie === \"verwijder\";\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n const editActionLabel: string \| undefined =\r\n (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) \|\| undefined;\r\n\r\n const button = this.zoomable && (\r\n <button\r\n type=\"button\"\r\n class=\"open\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => (this.active = true)}\r\n >\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span>Afbeelding vergroot weergeven</span>\r\n </button>\r\n );\r\n\r\n if (this.wijzigactie === \"verwijder\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <del class=\"editaction-remove\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </del>\r\n </Host>\r\n );\r\n }\r\n\r\n if (this.wijzigactie === \"voegtoe\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <ins class=\"editaction-add\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </ins>\r\n </Host>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-CeXiA7z5.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.open {\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 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n opacity: 0;\r\n position: absolute;\r\n inset-inline-end: units.$u2;\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: color.scale(colors.$wit, $alpha: -20%);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .title {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n inline-size: auto;\r\n block-size: auto;\r\n max-inline-size: 100%;\r\n max-block-size: calc(100vh - units.$u8);\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-block-end: units.$u1 * 1.5;\r\n padding-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.close {\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 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n }\r\n}\r\n\r\nins.editaction-add {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include insert.element();\r\n @include insert.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include insert.root();\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\ndel.editaction-remove {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .title {\r\n text-decoration: line-through;\r\n }\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-block-end: units.$u1;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n FunctionalComponent,\r\n Host,\r\n Listen,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" \| \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n verwijder: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n active: boolean;\r\n src: string \| undefined;\r\n alt: string \| undefined;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n active &&\r\n src && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={ref}>\r\n {children[2]}\r\n {children[0]}\r\n <img src={src} alt={alt} />\r\n <button type=\"button\" class=\"close\" onClick={click}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span>Sluiten</span>\r\n </button>\r\n {children[1]}\r\n </div>\r\n </div>\r\n );\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n /*\r\n The wijzigactie.\r\n */\r\n @Prop()\r\n wijzigactie?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private buttonElement: HTMLButtonElement \| undefined;\r\n\r\n private wrapperElement: HTMLDivElement \| undefined;\r\n\r\n private trap: FocusTrap \| undefined;\r\n\r\n private titelSlot: HTMLElement \| null = null;\r\n\r\n private bijschriftSlot: HTMLElement \| null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200),\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth \|\| height < naturalHeight;\r\n }\r\n\r\n private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n return wijzigactie === \"voegtoe\" \|\| wijzigactie === \"verwijder\";\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n const editActionLabel: string \| undefined =\r\n (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) \|\| undefined;\r\n\r\n const button = this.zoomable && (\r\n <button\r\n type=\"button\"\r\n class=\"open\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => (this.active = true)}\r\n >\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span>Afbeelding vergroot weergeven</span>\r\n </button>\r\n );\r\n\r\n if (this.wijzigactie === \"verwijder\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <del class=\"editaction-remove\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </del>\r\n </Host>\r\n );\r\n }\r\n\r\n if (this.wijzigactie === \"voegtoe\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <ins class=\"editaction-add\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </ins>\r\n </Host>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-WmD5BfeO.js → p-CynPODEC.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-Dm38fPV4.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$1 } from './p-lE-KxpG-.js';
+import { d as defineCustomElement$1 } from './p-7ffg336s.js';
 const translations = {
     en: {
@@ -25,7 +25,7 @@ const Progressindicator = /*@__PURE__*/ proxyCustomElement(class Progressindicat
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '1cae1ecc0189ba8e3f398be733261208bff72507' }, h("span", { key: '18c9e94d07e685e9e628ea962e3e5a92d4942a8e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'c3621e2064b6dcd7100a5bab325938b5f4979467', icon: "spinner" })), h("span", { key: '5540253b6a6a40d130b2b8e5f8341981ed708396', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: 'e847a71cbdbdc682d920bc0e0afd62112e414c9b' }, h("span", { key: '0ba044f8fcfbe60e3741ba9c166cb3e644cc0dd2', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '0bf560c741c6614686c2abbf86c8131167e1dd73', icon: "spinner" })), h("span", { key: 'd2d59265487c5130d704f3972f09c98677df23aa', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     get host() { return this; }
     static get style() { return progressIndicatorCss; }
@@ -54,6 +54,6 @@ function defineCustomElement() {
 }
 export { Progressindicator as P, defineCustomElement as d };
-//# sourceMappingURL=p-WmD5BfeO.js.map
+//# sourceMappingURL=p-CynPODEC.js.map
-//# sourceMappingURL=p-WmD5BfeO.js.map
+//# sourceMappingURL=p-CynPODEC.js.map

package/dist/bundle/{p-WmD5BfeO.js.map → p-CynPODEC.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~WmD5BfeO~~.js","mappings":";;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,kDAAkD;AAC1D,SAAA;AACF,KAAA;CACF;;ACbD,MAAM,oBAAoB,GAAG,qhCAAqhC;;MCWriC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AA6BU,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAcnD;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,EAAA,EACxG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,EAAA,CAAY,CAC/B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-progress-indicator\": {\r\n label: \"Loading results. Please wait...\",\r\n },\r\n },\r\n nl: {\r\n \"dso-progress-indicator\": {\r\n label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n @include progress-indicator.small();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.small-block();\r\n }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n @include progress-indicator.medium();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.medium-block();\r\n }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n @include progress-indicator.large();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.large-block();\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /*\r\n The label of the Progress Indicator.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The size (width) of the Progress Indicator.\r\n \r\n If no size is set, falls back to `small`.\r\n /\r\n @Prop({ reflect: true })\r\n size?: \"small\" \| \"medium\" \| \"large\";\r\n\r\n /\r\n Set for bloatier Progress Indicator.\r\n */\r\n @Prop({ reflect: true })\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label \|\| this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-CynPODEC.js","mappings":";;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,kDAAkD;AAC1D,SAAA;AACF,KAAA;CACF;;ACbD,MAAM,oBAAoB,GAAG,qhCAAqhC;;MCWriC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AA6BU,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAcnD;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,EAAA,EACxG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,EAAA,CAAY,CAC/B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-progress-indicator\": {\r\n label: \"Loading results. Please wait...\",\r\n },\r\n },\r\n nl: {\r\n \"dso-progress-indicator\": {\r\n label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n @include progress-indicator.small();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.small-block();\r\n }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n @include progress-indicator.medium();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.medium-block();\r\n }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n @include progress-indicator.large();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.large-block();\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /*\r\n The label of the Progress Indicator.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The size (width) of the Progress Indicator.\r\n \r\n If no size is set, falls back to `small`.\r\n /\r\n @Prop({ reflect: true })\r\n size?: \"small\" \| \"medium\" \| \"large\";\r\n\r\n /\r\n Set for bloatier Progress Indicator.\r\n */\r\n @Prop({ reflect: true })\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label \|\| this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-Dt1j98T1.js → p-DAJsc8Jk.js} RENAMED Viewed

@@ -47,7 +47,7 @@ const ResponsiveElement = /*@__PURE__*/ proxyCustomElement(class ResponsiveEleme
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: 'e91c4381f1dbed450ac401d4da518280a8c29779', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '41e3674a479ce776ef848b0752b928cb89a3dd4b' })));
+        return (h(Host, { key: '9f0e5fdc1a39d4909ed55843342ca4a0f2aa8b0d', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'caf95ceac74acbe28615bf9ac15a2b6e7de11fd2' })));
     }
     get host() { return this; }
     static get style() { return responsiveElementCss; }
@@ -71,6 +71,6 @@ function defineCustomElement() {
 }
 export { ResponsiveElement as R, defineCustomElement as d };
-//# sourceMappingURL=p-Dt1j98T1.js.map
+//# sourceMappingURL=p-DAJsc8Jk.js.map
-//# sourceMappingURL=p-Dt1j98T1.js.map
+//# sourceMappingURL=p-DAJsc8Jk.js.map

package/dist/bundle/{p-Dt1j98T1.js.map → p-DAJsc8Jk.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~Dt1j98T1~~.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,sBAAsB;;ACInD,MAAM,YAAY,GAA4C;AAC5D,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;CACF;MAOY,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;QAOE,IAAA,CAAA,SAAS,GAA0B,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAGxD,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;QAgBL,IAAQ,CAAA,QAAA,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;;YAChD,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC;;AAGnC,YAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAEzG,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,SAAC,CAAC;AAoBH;AArCC;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,IAAI,CAAC,SAAS;;IAiBvB,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,oBAAoB,GAAA;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGpC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAA,EAC7G,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, State, h } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n {\r\n width: 624,\r\n alias: \"large\",\r\n },\r\n {\r\n width: 375,\r\n alias: \"medium\",\r\n },\r\n {\r\n width: 0,\r\n alias: \"small\",\r\n },\r\n];\r\n\r\n@Component({\r\n tag: \"dso-responsive-element\",\r\n styleUrl: \"./responsive-element.scss\",\r\n shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n @State()\r\n sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n @State()\r\n sizeWidth = 0;\r\n\r\n /*\r\n Emitted when size has changed\r\n /\r\n @Event()\r\n dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n /\r\n The current size\r\n */\r\n @Method()\r\n async getSize(): Promise<ResponsiveElementSize> {\r\n return this.sizeAlias;\r\n }\r\n\r\n private observer = new ResizeObserver(([entry]) => {\r\n if (!entry) {\r\n throw new Error(\"No entry found\");\r\n }\r\n\r\n const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n this.sizeAlias = size;\r\n this.dsoSizeChange.emit(size);\r\n });\r\n\r\n @Element()\r\n host!: HTMLDsoResponsiveElementElement;\r\n\r\n componentWillLoad() {\r\n this.observer.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.observer.unobserve(this.host);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-DAJsc8Jk.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,sBAAsB;;ACInD,MAAM,YAAY,GAA4C;AAC5D,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;CACF;MAOY,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;QAOE,IAAA,CAAA,SAAS,GAA0B,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAGxD,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;QAgBL,IAAQ,CAAA,QAAA,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;;YAChD,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC;;AAGnC,YAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAEzG,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,SAAC,CAAC;AAoBH;AArCC;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,IAAI,CAAC,SAAS;;IAiBvB,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,oBAAoB,GAAA;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGpC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAA,EAC7G,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, State, h } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n {\r\n width: 624,\r\n alias: \"large\",\r\n },\r\n {\r\n width: 375,\r\n alias: \"medium\",\r\n },\r\n {\r\n width: 0,\r\n alias: \"small\",\r\n },\r\n];\r\n\r\n@Component({\r\n tag: \"dso-responsive-element\",\r\n styleUrl: \"./responsive-element.scss\",\r\n shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n @State()\r\n sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n @State()\r\n sizeWidth = 0;\r\n\r\n /*\r\n Emitted when size has changed\r\n /\r\n @Event()\r\n dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n /\r\n The current size\r\n */\r\n @Method()\r\n async getSize(): Promise<ResponsiveElementSize> {\r\n return this.sizeAlias;\r\n }\r\n\r\n private observer = new ResizeObserver(([entry]) => {\r\n if (!entry) {\r\n throw new Error(\"No entry found\");\r\n }\r\n\r\n const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n this.sizeAlias = size;\r\n this.dsoSizeChange.emit(size);\r\n });\r\n\r\n @Element()\r\n host!: HTMLDsoResponsiveElementElement;\r\n\r\n componentWillLoad() {\r\n this.observer.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.observer.unobserve(this.host);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/{p--iZjxqv3.js → p-DrWTFwlB.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
-import { d as defineCustomElement$1 } from './p-lE-KxpG-.js';
+import { d as defineCustomElement$1 } from './p-7ffg336s.js';
 const infoCss = "@charset \"UTF-8\";:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
@@ -11,7 +11,7 @@ const Info = /*@__PURE__*/ proxyCustomElement(class Info extends H {
         this.dsoClose = createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (h(Fragment, { key: '7c3f9fed7a8ab8dbabe817e1b978e940f26f27f8' }, h("slot", { key: '74dbbbdf2d445f448a7de100196ef0df2305734f' }), !this.fixed && (h("button", { key: '5e702078b32a2d57fafb0758941c57548d7a5851', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '494887a2f0fa4ab19a2d2b448d9821a001cd9cfb', icon: "times" }), h("span", { key: '052dde259dd0f396097b3c3ead102bb10edda4ff', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '5819c33391f64495faebc5b480e6cf4146f06e21' }, h("slot", { key: 'b7e232a77cab0b9f32c3b7053a2b02c1a42402d8' }), !this.fixed && (h("button", { key: 'bcb06304bf67ed32bfc0063fdda0f20b79658374', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '17998edf989e2de6d49ec3fa0cbf02a0207a14a9', icon: "times" }), h("span", { key: 'fc858fe44cf7ed69fb0b4883554998f0fc3cb872', class: "sr-only" }, "Sluiten")))));
     }
     static get style() { return infoCss; }
 }, [257, "dso-info", {
@@ -38,6 +38,6 @@ function defineCustomElement() {
 }
 export { Info as I, defineCustomElement as d };
-//# sourceMappingURL=p--iZjxqv3.js.map
+//# sourceMappingURL=p-DrWTFwlB.js.map
-//# sourceMappingURL=p--iZjxqv3.js.map
+//# sourceMappingURL=p-DrWTFwlB.js.map

package/dist/bundle/{p--iZjxqv3.js.map → p-DrWTFwlB.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p~~--iZjxqv3~~.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,6sDAA6sD;;MCOhtD,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAmBf,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA,EACzD,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAe,CAC7B,CACV,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\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, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-DrWTFwlB.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,6sDAA6sD;;MCOhtD,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAmBf,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA,EACzD,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAe,CAC7B,CACV,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\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, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-D3I3eS2K.js → p-DrrX-h-R.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-Dm38fPV4.js';
 import { d as debounce } from './p-BxvZeNWe.js';
 import { c as createFocusTrap } from './p-BocpUT46.js';
-import { d as defineCustomElement$1 } from './p-lE-KxpG-.js';
+import { d as defineCustomElement$1 } from './p-7ffg336s.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 const tableCss = "@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*/\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\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: var(--_dso-button-primary-background-color, #39870c);\n  border-color: var(--_dso-button-primary-border-color, #39870c);\n  color: var(--_dso-button-primary-color, #fff);\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: var(--_dso-button-primary-hover-background-color, #275937);\n  border-color: var(--_dso-button-primary-hover-border-color, #275937);\n  color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: var(--_dso-button-primary-active-background-color, #173521);\n  border-color: var(--_dso-button-primary-active-border-color, #173521);\n  color: var(--_dso-button-primary-active-color, #fff);\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\na.dso-primary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\na.dso-primary span:not(.sr-only) + svg.di,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + svg.di,\nlabel.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\na.dso-primary svg.di + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary svg.di + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.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: %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}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.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: %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}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./di.svg#download-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./di.svg#external-link-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\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}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\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}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\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}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[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}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\na.dso-secondary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\na.dso-secondary span:not(.sr-only) + svg.di,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di,\nlabel.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\na.dso-secondary svg.di + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.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}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.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}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.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}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.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}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\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}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.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}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.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}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\"));\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: 2px;\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n  outline: 0;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:hover,\nbutton.dso-map:hover,\nlabel.dso-map:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-map[disabled], a.dso-map[disabled]:hover,\nbutton.dso-map[disabled],\nbutton.dso-map[disabled]:hover,\nlabel.dso-map[disabled],\nlabel.dso-map[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}\na.dso-map.dso-small,\nbutton.dso-map.dso-small,\nlabel.dso-map.dso-small {\n  line-height: 1rem;\n}\na.dso-map.dso-small dso-icon,\na.dso-map.dso-small svg.di, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,\nbutton.dso-map.dso-small dso-icon,\nbutton.dso-map.dso-small svg.di,\nbutton.dso-map.dso-small.extern::after,\nbutton.dso-map.dso-small.download::after,\nbutton.dso-map.dso-small.dso-spinner::before,\nlabel.dso-map.dso-small dso-icon,\nlabel.dso-map.dso-small svg.di,\nlabel.dso-map.dso-small.extern::after,\nlabel.dso-map.dso-small.download::after,\nlabel.dso-map.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-small.dso-spinner-left::before,\nbutton.dso-map.dso-small.dso-spinner-left::before,\nlabel.dso-map.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-small.dso-spinner-right::after,\nbutton.dso-map.dso-small.dso-spinner-right::after,\nlabel.dso-map.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map dso-icon:has(+ span:not(.sr-only)),\na.dso-map svg.di:has(+ span:not(.sr-only)),\nbutton.dso-map dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-map svg.di:has(+ span:not(.sr-only)),\nlabel.dso-map dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-map svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-map span:not(.sr-only) + dso-icon,\na.dso-map span:not(.sr-only) + svg.di,\nbutton.dso-map span:not(.sr-only) + dso-icon,\nbutton.dso-map span:not(.sr-only) + svg.di,\nlabel.dso-map span:not(.sr-only) + dso-icon,\nlabel.dso-map span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-map dso-icon + span:not(.sr-only),\na.dso-map svg.di + span:not(.sr-only),\nbutton.dso-map dso-icon + span:not(.sr-only),\nbutton.dso-map svg.di + span:not(.sr-only),\nlabel.dso-map dso-icon + span:not(.sr-only),\nlabel.dso-map svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],\nbutton.dso-map.dso-spinner-left[disabled],\nbutton.dso-map.dso-spinner-right[disabled],\nlabel.dso-map.dso-spinner-left[disabled],\nlabel.dso-map.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-map.dso-spinner-left::before,\nbutton.dso-map.dso-spinner-left::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-spinner-right::after,\nbutton.dso-map.dso-spinner-right::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  border: 0;\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding-block: 8px;\n  padding-inline: 16px;\n  white-space: nowrap;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: -1px;\n}\na.dso-map:has(span.sr-only):has(dso-icon, svg.di),\nbutton.dso-map:has(span.sr-only):has(dso-icon, svg.di),\nlabel.dso-map:has(span.sr-only):has(dso-icon, svg.di) {\n  padding: 8px;\n  min-inline-size: auto;\n  block-size: 40px;\n  inline-size: 40px;\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #275937;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\n@keyframes ModalFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-block-end: 24px;\n}\n\n.dso-header {\n  min-block-size: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  inset: 0px;\n  block-size: 100%;\n  position: fixed;\n  z-index: 530;\n  overflow: visible;\n  padding: 0;\n  border: 0;\n}\n:host .dso-modal::backdrop {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n:host .dso-modal .dso-dialog {\n  inline-size: 640px;\n  background-color: #fff;\n  opacity: 1;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  animation: 200ms ease-out 0s 1 ModalFadeIn;\n}\n:host .dso-modal .dso-header {\n  position: relative;\n  padding: 16px;\n  border-block-end: 1px solid #ccc;\n}\n:host .dso-modal .dso-header h2 {\n  max-inline-size: calc(100% - 24px);\n  margin: 0;\n  color: #275937;\n}\n:host .dso-modal .dso-header .dso-close {\n  position: absolute;\n  inset-block-start: 16px;\n  inset-inline-end: 13px;\n  block-size: 32px;\n  inline-size: 32px;\n  padding: 0;\n  background-color: transparent;\n  border: 0;\n  text-align: center;\n}\n:host .dso-modal > .dso-dialog > .dso-body p {\n  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul,\n:host .dso-modal > .dso-dialog > .dso-body ol {\n  margin-block-end: 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul ul,\n:host .dso-modal > .dso-dialog > .dso-body ul ol,\n:host .dso-modal > .dso-dialog > .dso-body ol ul,\n:host .dso-modal > .dso-dialog > .dso-body ol ol {\n  margin-block-end: 0;\n}\n:host .dso-modal > .dso-dialog > .dso-body pre {\n  margin-block: 0 16px;\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > .dso-body blockquote {\n  padding-block: 16px;\n  padding-inline: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {\n  margin-block-end: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body img {\n  block-size: auto;\n  max-inline-size: 100%;\n}\n:host .dso-modal > .dso-dialog > .dso-body {\n  block-size: calc(100% - 96px - 1.5rem);\n  max-block-size: calc(70vh - 144px - 1.5em);\n  min-block-size: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable {\n  block-size: calc(100% - 96px - 1.5rem);\n  max-block-size: calc(70vh - 144px - 1.5em);\n  min-block-size: 6.5rem;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {\n  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {\n  margin-block-end: 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul ol,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol ol {\n  margin-block-end: 0;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {\n  margin-block: 0 16px;\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {\n  padding-block: 16px;\n  padding-inline: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {\n  margin-block-end: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {\n  block-size: auto;\n  max-inline-size: 100%;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {\n  padding: 32px;\n}\n:host .dso-modal .dso-body:focus-visible {\n  outline: none;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-inline-start: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    inline-size: 100%;\n    text-align: center;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-block-start: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span {\n    float: none;\n  }\n}\n:host .dso-modal .dso-footer {\n  min-block-size: 80px;\n  padding-block: 16px;\n  padding-inline: 32px;\n  text-align: end;\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {\n    margin-inline-start: 16px;\n  }\n  :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-inline-start: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-inline-size: 100%;\n    margin-block-start: 0;\n  }\n  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-inline-start: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    inline-size: 100%;\n    text-align: center;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-block-start: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span {\n    float: none;\n  }\n}\n@media screen and (max-height: 380px) {\n  :host .dso-modal .dso-dialog {\n    min-block-size: 216px;\n    margin-block-start: 8px;\n    margin-block-end: 8px;\n  }\n  :host .dso-modal .dso-header {\n    padding-block: 8px;\n    padding-inline: 16px;\n  }\n  :host .dso-modal .dso-header .dso-close {\n    inset-block-start: 8px;\n  }\n  :host .dso-modal .dso-body {\n    padding-block: 16px;\n    padding-inline: 24px;\n  }\n  :host .dso-modal .dso-footer {\n    min-block-size: auto;\n    overflow: auto;\n    padding-block: 8px;\n    padding-inline: 32px;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-block-start: 1rem;\n  max-inline-size: calc(100% - 2rem);\n  margin-inline-start: auto;\n  margin-inline-end: auto;\n  inline-size: auto;\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-block-size: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-inline-size: 100%;\n  }\n}\n\n:host([is-responsive=true]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-block-end: 0;\n  overflow-y: auto;\n  inline-size: 100%;\n}\n:host([is-responsive=true]) .dso-table-body.dso-body {\n  inline-size: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-block-end: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-block-end: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  inline-size: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-inline-start: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-block-end: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.sr-only {\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\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  display: block;\n  position: fixed;\n  inset: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
@@ -38,7 +38,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
     render() {
         var _a, _b, _c;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: 'b20bb8cd5254e8e6d022b4c397222f7614688651', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '4f3bc04a4928f843a3cf8cf85c367e9a823ad733', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'ab44696db6e67a7bf639b1889346e6a0f9b93f50', class: "dso-modal-overlay" }), h("div", { key: 'fb0b187652f98637797e2f566b6ed27c56e16ef6', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '68a076be53936c4cdc03dc6900be22df0baf5f2e', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '018eb3c73125f59ad112556bb12714b1d4f16835', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'f00bb764feee55c153ccdf18ede5b83001d9aa43', class: "dso-responsive-message" }, h("span", { key: '92f7ec692ad605724b83a610b0608497a9bf5dae' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '0342eac9aa6193a07ba1868a7299518ee2f3c750', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'c9ebbc3d2a4fabf85225b54f505c700dab61d40d', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'ae5c0bfc7e8bbbf38bb1e570ccede1cd22fa912e' }, "vergroten"), h("dso-icon", { key: 'a0122dd44e958612fd03b2c93f829897decee9fb', icon: "external-link" }))))), this.modalActive && (h("div", { key: '282ec9dc6d345af64c07a37d46a7713fdf9614ab', class: "dso-header" }, h("h2", { key: 'e3d28e9221a5c7eb095c41fa793806825bf4c284', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '7a7eb3d0c8402630de9d78ce522a068ad5cbec8b', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '89c2be788e056f4ea03aedc4cb961130983c7e8e', icon: "times" }), h("span", { key: 'c2364e58a8c5f8d6979800ed426f5ab2941deab2', class: "sr-only" }, "Sluiten")))), h("div", { key: 'f60f63ef817d24361a2115e5ba37646dcebfd541', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'a66e801444bf25160e87b03d6fbb1ae31c58851f' }))))));
+        return (h(Host, { key: '5953cc01c1eb25f20bf44b20d91091c6398bf938', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '848e53047bfca26a6f0c8cc1b014ca48c2ee2540', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '4bdd3f62085641103af4cc9469b5caf1d4f89b56', class: "dso-modal-overlay" }), h("div", { key: '6f21154d50a873ed118f42b68762861db360cea3', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '2240f097c3f06b7145742a9cb2cbd6b59d7fe6e5', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '3a8b0929f7a16736add3a505f9e8c6fe0a98f14a', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'fa982924130e442bf31f4241d2a7d9017a869dec', class: "dso-responsive-message" }, h("span", { key: 'f693422c76f65f066c23b85781db45593794727b' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '0ed185c75afd0afa0fed98e91b37928f5689150f', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '843045b7dd0352c6086d9cbeaf5ede722ebab9fd', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '799a93a9bbb45e81bb28ce7962b6bfb6d496e110' }, "vergroten"), h("dso-icon", { key: '6cb6608bfbc75fda7097d772ee348e0128808155', icon: "external-link" }))))), this.modalActive && (h("div", { key: '50d963ebb8a22c31a3f7afdc3f10787d948fbc57', class: "dso-header" }, h("h2", { key: '182a1f7c968e360295a260798cbd46d15e00d22d', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '2590c8227264090f867af9b2768de31a68ea47ac', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '7683598fc37fb2da97292ab4fa13621f2f1c20e6', icon: "times" }), h("span", { key: 'fe6b5126af1678abef39cfd9fc983356323dd2d5', class: "sr-only" }, "Sluiten")))), h("div", { key: '0ef436349c8c72aa96f61fc7a84284d6b0a2e5e1', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'f3d14e2988b79b07a0f4235ff6b3f82b04807de2' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;
@@ -110,6 +110,6 @@ function defineCustomElement() {
 }
 export { Table as T, defineCustomElement as d };
-//# sourceMappingURL=p-D3I3eS2K.js.map
+//# sourceMappingURL=p-DrrX-h-R.js.map
-//# sourceMappingURL=p-D3I3eS2K.js.map
+//# sourceMappingURL=p-DrrX-h-R.js.map

package/dist/bundle/{p-D3I3eS2K.js.map → p-DrrX-h-R.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-D3I3eS2K.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table/table.scss?tag=dso-table&encapsulation=shadow","src/components/table/table.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n@use \"~dso-toolkit/src/components/modal/modal.variables\" as modal-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n display: block;\r\n margin-block-end: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n min-block-size: units.$u4;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-size: units.$font-size-h2;\r\n font-weight: 700;\r\n }\r\n\r\n .dso-close {\r\n color: colors.$bosgroen;\r\n }\r\n}\r\n\r\n:host .dso-modal {\r\n inset: 0px;\r\n block-size: 100%;\r\n position: fixed;\r\n z-index: zindex.$modal;\r\n\r\n @include modal.root();\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n margin-block-start: 1rem;\r\n max-inline-size: calc(100% - 2rem);\r\n margin-inline-start: auto;\r\n margin-inline-end: auto;\r\n inline-size: auto;\r\n\r\n .dso-body {\r\n $dso-body-unavailable-height: (\r\n (2 * modal.$header-padding) + (modal.$footer-button-block-size + modal.$footer-padding)\r\n );\r\n max-block-size: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n max-inline-size: 100%;\r\n }\r\n}\r\n\r\n:host([is-responsive=\"true\"]) {\r\n .dso-table-body {\r\n border: 1px solid table.$border-color;\r\n margin-block-end: 0;\r\n overflow-y: auto;\r\n inline-size: 100%;\r\n\r\n &.dso-body {\r\n inline-size: calc(100% - modal.$body-padding * 2);\r\n }\r\n }\r\n}\r\n\r\n.dso-table-utilities {\r\n align-items: center;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block-end: units.$u1;\r\n\r\n .dso-responsive-message {\r\n margin-block-end: 0;\r\n\r\n &:only-child {\r\n inline-size: 100%;\r\n }\r\n }\r\n\r\n .open-modal-button {\r\n &:only-child {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n}\r\n\r\n.dso-responsive-message {\r\n font-size: 0.8em;\r\n margin-block-end: units.$u1;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n background-color: color.scale(modal-variables.$backdrop-bg, $alpha: modal-variables.$backdrop-opacity);\r\n display: block;\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$modal-background-overlay;\r\n}\r\n\r\n.dso-table-placeholder {\r\n box-shadow: inset 0 0 0 1px table.$border-color;\r\n display: grid;\r\n place-content: center;\r\n}\r\n","import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n tag: \"dso-table\",\r\n styleUrl: \"table.scss\",\r\n shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private focusTrapElement?: HTMLDivElement;\r\n\r\n private buttonElement?: HTMLButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private labelledbyId = v4();\r\n\r\n @Element()\r\n host!: HTMLDsoTableElement;\r\n\r\n /*\r\n Prevents the table being opened in a modal.\r\n */\r\n @Prop({ reflect: true })\r\n noModal = false;\r\n\r\n @State()\r\n isResponsive?: boolean;\r\n\r\n @State()\r\n modalActive = false;\r\n\r\n @State()\r\n placeholderHeight?: number;\r\n\r\n private startResponsiveBehavior(): void {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.startResponsiveBehavior();\r\n }\r\n\r\n componentDidRender() {\r\n this.setFocusTrap();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n return (\r\n <Host is-responsive={this.isResponsive?.toString()}>\r\n {this.modalActive && this.placeholderHeight && (\r\n <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n )}\r\n\r\n {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n <div class={{ \"dso-modal\": this.modalActive }}>\r\n <div\r\n class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n ref={(element) => (this.focusTrapElement = element)}\r\n {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n >\r\n {(this.isResponsive \|\| !this.noModal) && (\r\n <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n {this.isResponsive && (\r\n <div class=\"dso-responsive-message\">\r\n <span>beweeg de tabel van links naar rechts</span>\r\n </div>\r\n )}\r\n\r\n {!this.noModal && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary open-modal-button\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => this.openModal()}\r\n >\r\n <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n <span>vergroten</span>\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {this.modalActive && (\r\n <div class=\"dso-header\">\r\n <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n {caption \|\| \"Uitvergrote tabel dialoog\"}\r\n </h2>\r\n <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n </div>\r\n )}\r\n\r\n <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private openModal() {\r\n this.placeholderHeight = this.host.clientHeight;\r\n this.modalActive = true;\r\n }\r\n\r\n private closeModal() {\r\n this.placeholderHeight = undefined;\r\n this.modalActive = false;\r\n }\r\n\r\n private setFocusTrap() {\r\n if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n this.closeModal();\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => this.closeModal(),\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n }).activate();\r\n } else if (!this.modalActive && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n if (!dsoTable) {\r\n throw new Error(\"No dsoTable found\");\r\n }\r\n\r\n const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n this.isResponsive =\r\n Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-DrrX-h-R.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table/table.scss?tag=dso-table&encapsulation=shadow","src/components/table/table.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n@use \"~dso-toolkit/src/components/modal/modal.variables\" as modal-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n display: block;\r\n margin-block-end: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n min-block-size: units.$u4;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-size: units.$font-size-h2;\r\n font-weight: 700;\r\n }\r\n\r\n .dso-close {\r\n color: colors.$bosgroen;\r\n }\r\n}\r\n\r\n:host .dso-modal {\r\n inset: 0px;\r\n block-size: 100%;\r\n position: fixed;\r\n z-index: zindex.$modal;\r\n\r\n @include modal.root();\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n margin-block-start: 1rem;\r\n max-inline-size: calc(100% - 2rem);\r\n margin-inline-start: auto;\r\n margin-inline-end: auto;\r\n inline-size: auto;\r\n\r\n .dso-body {\r\n $dso-body-unavailable-height: (\r\n (2 * modal.$header-padding) + (modal.$footer-button-block-size + modal.$footer-padding)\r\n );\r\n max-block-size: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n max-inline-size: 100%;\r\n }\r\n}\r\n\r\n:host([is-responsive=\"true\"]) {\r\n .dso-table-body {\r\n border: 1px solid table.$border-color;\r\n margin-block-end: 0;\r\n overflow-y: auto;\r\n inline-size: 100%;\r\n\r\n &.dso-body {\r\n inline-size: calc(100% - modal.$body-padding * 2);\r\n }\r\n }\r\n}\r\n\r\n.dso-table-utilities {\r\n align-items: center;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block-end: units.$u1;\r\n\r\n .dso-responsive-message {\r\n margin-block-end: 0;\r\n\r\n &:only-child {\r\n inline-size: 100%;\r\n }\r\n }\r\n\r\n .open-modal-button {\r\n &:only-child {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n}\r\n\r\n.dso-responsive-message {\r\n font-size: 0.8em;\r\n margin-block-end: units.$u1;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n background-color: color.scale(modal-variables.$backdrop-bg, $alpha: modal-variables.$backdrop-opacity);\r\n display: block;\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$modal-background-overlay;\r\n}\r\n\r\n.dso-table-placeholder {\r\n box-shadow: inset 0 0 0 1px table.$border-color;\r\n display: grid;\r\n place-content: center;\r\n}\r\n","import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n tag: \"dso-table\",\r\n styleUrl: \"table.scss\",\r\n shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n private resizeObserver?: ResizeObserver;\r\n\r\n private focusTrapElement?: HTMLDivElement;\r\n\r\n private buttonElement?: HTMLButtonElement;\r\n\r\n private trap?: FocusTrap;\r\n\r\n private labelledbyId = v4();\r\n\r\n @Element()\r\n host!: HTMLDsoTableElement;\r\n\r\n /*\r\n Prevents the table being opened in a modal.\r\n */\r\n @Prop({ reflect: true })\r\n noModal = false;\r\n\r\n @State()\r\n isResponsive?: boolean;\r\n\r\n @State()\r\n modalActive = false;\r\n\r\n @State()\r\n placeholderHeight?: number;\r\n\r\n private startResponsiveBehavior(): void {\r\n this.resizeObserver?.observe(this.host);\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.startResponsiveBehavior();\r\n }\r\n\r\n componentDidRender() {\r\n this.setFocusTrap();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n return (\r\n <Host is-responsive={this.isResponsive?.toString()}>\r\n {this.modalActive && this.placeholderHeight && (\r\n <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n )}\r\n\r\n {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n <div class={{ \"dso-modal\": this.modalActive }}>\r\n <div\r\n class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n ref={(element) => (this.focusTrapElement = element)}\r\n {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n >\r\n {(this.isResponsive \|\| !this.noModal) && (\r\n <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n {this.isResponsive && (\r\n <div class=\"dso-responsive-message\">\r\n <span>beweeg de tabel van links naar rechts</span>\r\n </div>\r\n )}\r\n\r\n {!this.noModal && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary open-modal-button\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => this.openModal()}\r\n >\r\n <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n <span>vergroten</span>\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {this.modalActive && (\r\n <div class=\"dso-header\">\r\n <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n {caption \|\| \"Uitvergrote tabel dialoog\"}\r\n </h2>\r\n <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n </div>\r\n )}\r\n\r\n <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private openModal() {\r\n this.placeholderHeight = this.host.clientHeight;\r\n this.modalActive = true;\r\n }\r\n\r\n private closeModal() {\r\n this.placeholderHeight = undefined;\r\n this.modalActive = false;\r\n }\r\n\r\n private setFocusTrap() {\r\n if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n this.closeModal();\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => this.closeModal(),\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n }).activate();\r\n } else if (!this.modalActive && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n if (!dsoTable) {\r\n throw new Error(\"No dsoTable found\");\r\n }\r\n\r\n const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n this.isResponsive =\r\n Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n }\r\n }\r\n}\r\n"],"version":3}