@dso-toolkit/core 74.0.0 → 75.1.0

package/dist/bundle/p-D0Ir0GXP.js

@@ -0,0 +1,145 @@
+import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-DHO_Za64.js';
+import { d as debounce } from './p-BxvZeNWe.js';
+import { c as createFocusTrap } from './p-BocpUT46.js';
+import { d as defineCustomElement$1 } from './p-BpUdPxfZ.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, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.open:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.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, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\n.close:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.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}";
+
+const wijzigactieLabels = {
+    verwijder: "Verwijderd",
+    voegtoe: "Toegevoegd",
+};
+const Dimmer = ({ active, src, alt, ref, click }, children) => active &&
+    src && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: ref }, children[2], children[0], h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: click }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), children[1])));
+const ImageOverlay = /*@__PURE__*/ proxyCustomElement(class ImageOverlay extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.active = false;
+        this.zoomable = false;
+        this.titelSlot = null;
+        this.bijschriftSlot = null;
+    }
+    loadListener(event) {
+        if (event.target instanceof HTMLImageElement) {
+            this.setZoomable(event.target);
+        }
+    }
+    connectedCallback() {
+        this.titelSlot = this.host.querySelector("div[slot='titel']");
+        this.bijschriftSlot = this.host.querySelector("div[slot='bijschrift']");
+    }
+    componentDidLoad() {
+        this.resizeObserver = new ResizeObserver(debounce(() => {
+            const imgElement = this.host.querySelector("img");
+            if (imgElement instanceof HTMLImageElement) {
+                this.setZoomable(imgElement);
+            }
+        }, 200));
+        this.mutationObserver = new MutationObserver((e) => {
+            var _a, _b;
+            forceUpdate(this.host);
+            if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === "childList") {
+                (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+                // <img> is gone or a new element.
+                this.initZoomableImage();
+            }
+        });
+        this.mutationObserver.observe(this.host, {
+            attributes: true,
+            subtree: true,
+            attributeFilter: ["src", "alt"],
+            childList: true,
+        });
+        this.initZoomableImage();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+    }
+    initZoomableImage() {
+        var _a;
+        const imgElement = this.host.querySelector("img");
+        if (!(imgElement instanceof HTMLImageElement)) {
+            return;
+        }
+        // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
+        if (imgElement.complete) {
+            this.setZoomable(imgElement);
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
+    }
+    setZoomable(imageElement) {
+        const { width, naturalWidth, height, naturalHeight } = imageElement;
+        this.zoomable = width < naturalWidth || height < naturalHeight;
+    }
+    isWijzigactie(wijzigactie) {
+        return wijzigactie === "voegtoe" || wijzigactie === "verwijder";
+    }
+    render() {
+        var _a;
+        const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
+        const editActionLabel = (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;
+        const button = this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")));
+        if (this.wijzigactie === "verwijder") {
+            return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+        }
+        if (this.wijzigactie === "voegtoe") {
+            return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+        }
+        return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
+    }
+    componentDidRender() {
+        var _a, _b;
+        if (this.active && this.wrapperElement && !this.trap) {
+            this.trap = createFocusTrap(this.wrapperElement, {
+                escapeDeactivates: true,
+                clickOutsideDeactivates: (e) => {
+                    if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
+                        this.active = false;
+                        return false;
+                    }
+                    return true;
+                },
+                setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+                onDeactivate: () => (this.active = false),
+            }).activate();
+        }
+        else if (!this.active && this.trap) {
+            (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+            delete this.trap;
+        }
+    }
+    get host() { return this; }
+    static get style() { return imageOverlayCss; }
+}, [1, "dso-image-overlay", {
+        "wijzigactie": [1],
+        "active": [32],
+        "zoomable": [32]
+    }, [[2, "load", "loadListener"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-image-overlay", "dso-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-image-overlay":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ImageOverlay);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ImageOverlay as I, defineCustomElement as d };
+//# sourceMappingURL=p-D0Ir0GXP.js.map
+
+//# sourceMappingURL=p-D0Ir0GXP.js.map

package/dist/bundle/{p-Cng7insW.js.map → p-D0Ir0GXP.js.map}

@@ -1 +1 @@
-{"file":"p-Cng7insW.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}
+{"file":"p-D0Ir0GXP.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-DBE1IrEJ.js

@@ -0,0 +1,43 @@
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
+import { d as defineCustomElement$1 } from './p-BpUdPxfZ.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}";
+
+const Info = /*@__PURE__*/ proxyCustomElement(class Info extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoClose = createEvent(this, "dsoClose", 7);
+    }
+    render() {
+        return (h(Fragment, { key: '3b3a3390da24484d21869661692c293f766bb06b' }, h("slot", { key: '83976a207e4c1505329876192c83e6eccc1f6a52' }), !this.fixed && (h("button", { key: 'de983b145b9a2cfd1adccc13116f0f17e8130314', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: 'c34a3568d69b61537de385c4e9b6277be5ea7697', icon: "times" }), h("span", { key: 'bc2069fa68085e27fd9bab79d41ec801f5da1c5f', class: "sr-only" }, "Sluiten")))));
+    }
+    static get style() { return infoCss; }
+}, [1, "dso-info", {
+        "fixed": [516],
+        "active": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-info", "dso-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-info":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Info);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Info as I, defineCustomElement as d };
+//# sourceMappingURL=p-DBE1IrEJ.js.map
+
+//# sourceMappingURL=p-DBE1IrEJ.js.map

package/dist/bundle/{p-C1tscMvU.js.map → p-DBE1IrEJ.js.map}

@@ -1 +1 @@
-{"file":"p-C1tscMvU.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,0rDAA0rD;;MCO7rD,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}
+{"file":"p-DBE1IrEJ.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-DGWbWwct.js → p-DD69Irdl.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, e as createEvent, h } from './p-DHO_Za64.js
 import { c as clsx } from './p-ChV9xqsO.js';
 import { d as debounce } from './p-BxvZeNWe.js';
 
-const scrollableCss = ":host{display:block;block-size:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{block-size:100%;max-block-size:inherit;min-block-size:inherit;position:relative}.dso-shadow-container .dso-scroll-container{block-size:100%;max-block-size:inherit;min-block-size:inherit;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;block-size:24px;inset-inline-start:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;inline-size:100%;pointer-events:none;z-index:1}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));inset-block-start:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));inset-block-end:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
+const scrollableCss = "@charset \"UTF-8\";:host{display:block;block-size:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{block-size:100%;max-block-size:inherit;min-block-size:inherit;position:relative}.dso-shadow-container .dso-scroll-container{block-size:100%;max-block-size:inherit;min-block-size:inherit;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;block-size:24px;inset-inline-start:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;inline-size:100%;pointer-events:none;z-index:1}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));inset-block-start:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));inset-block-end:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
 
 const resizeObserver = new ResizeObserver(debounce((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
 function getScrollableComponentFromResizeObserverEntry({ target, }) {
@@ -91,9 +91,9 @@ const Scrollable = /*@__PURE__*/ proxyCustomElement(class Scrollable extends H {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'cc565ff75ecdda69bfe110cf6e199e231766d08a', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'da7b69191bdd9920f103ec5f02683d662f026ffe', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '18cfb4eb27e7dafc8b2421236dcdaa6bf22bdbe5', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'a32dba02a761a573ff12e80f8f45e3e372bc773a', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'dd3aa14c1c1d24e68dd5fb7f0457b3efe20ae05d' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'c6f2e56c42e21c91bb8bc63a411dd314bd2652e7' }))));
     }
     get host() { return this; }
     static get style() { return scrollableCss; }
@@ -116,6 +116,6 @@ function defineCustomElement() {
 }
 
 export { Scrollable as S, defineCustomElement as d };
-//# sourceMappingURL=p-DGWbWwct.js.map
+//# sourceMappingURL=p-DD69Irdl.js.map
 
-//# sourceMappingURL=p-DGWbWwct.js.map
+//# sourceMappingURL=p-DD69Irdl.js.map

package/dist/bundle/{p-DGWbWwct.js.map → p-DD69Irdl.js.map}

@@ -1 +1 @@
-{"file":"p-DGWbWwct.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}
+{"file":"p-DD69Irdl.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}