@dso-toolkit/core 58.0.1 → 58.2.0

package/dist/dso-toolkit/p-a3dc08f4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stateMap","success","info","warning","danger","error","HandleElement","handleUrl","onClick","open","children","h","href","type","Handle","heading","ref","class","HandleStateIcon","state","icon","HandleIcon","attachmentCount","count","accordionSectionCss","AccordionSection","this","handleClick","event","dsoToggleClick","emit","originalEvent","handleExpandableAnimationEnd","e","dsoAnimationEnd","scrollIntoView","detail","bodyHeight","componentWillLoad","hasNestedAccordion","host","querySelector","_a","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","window","innerHeight","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","offsetTop","behavior","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","hidden","onMouseenter","hover","onMouseleave","element","Fragment","handleTitle","enableAnimation","minimumHeight","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/handles/element.handle.tsx","src/components/accordion/components/handles/heading.handle.tsx","src/components/accordion/components/handles/state-icon.handle.tsx","src/components/accordion/components/handles/icon.handle.tsx","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport const HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n        {children}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionHeading } from \"../accordion-section.interfaces\";\r\n\r\nexport const Handle: FunctionalComponent<{\r\n  heading: AccordionHeading;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h5>\r\n      );\r\n  }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\n\r\nexport const HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n  if (state === \"error\") {\r\n    return <dso-icon icon=\"status-error\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"danger\") {\r\n    return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"success\") {\r\n    return <dso-icon icon=\"status-success\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"info\") {\r\n    return <dso-icon icon=\"status-info\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"warning\") {\r\n    return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n  }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\nimport { HandleStateIcon } from \"./state-icon.handle\";\r\n\r\nexport const HandleIcon: FunctionalComponent<{\r\n  state?: AccordionSectionState;\r\n  icon?: string;\r\n  attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n  if (state) {\r\n    return <HandleStateIcon state={state} />;\r\n  }\r\n\r\n  if (attachmentCount) {\r\n    return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n  }\r\n\r\n  if (icon) {\r\n    return <dso-icon icon={icon}></dso-icon>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n\r\n  .dso-section-handle {\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    position: relative;\r\n\r\n    > a:active {\r\n      text-decoration: none;\r\n    }\r\n\r\n    a {\r\n      @include anchor.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      font-weight: 400;\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  .dso-section-handle > button,\r\n  .dso-section-handle > a {\r\n    align-items: center;\r\n    background-color: transparent;\r\n    border: 0;\r\n    cursor: pointer;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n    text-align: start;\r\n    width: 100%;\r\n    word-break: break-word;\r\n\r\n    dso-icon {\r\n      flex-shrink: 0;\r\n\r\n      &.dso-section-handle-chevron {\r\n        @include utilities.transition(transform);\r\n\r\n        transform: rotate(0);\r\n      }\r\n    }\r\n\r\n    > .dso-section-handle-addons:first-child,\r\n    > dso-icon:first-child {\r\n      margin-right: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-left: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-left: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-left: 16px;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n  .dso-section-handle {\r\n    > button,\r\n    > a {\r\n      .dso-section-handle-chevron {\r\n        &:first-child {\r\n          transform: rotate(90deg);\r\n        }\r\n\r\n        &:last-child {\r\n          transform: rotate(-180deg);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-section-body {\r\n  background-color: colors.$wit;\r\n  border-top: 0;\r\n  margin-top: accordion.$border-radius * -1;\r\n\r\n  .dso-section-body-content {\r\n    padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n  }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { Handle, HandleElement, HandleIcon } from \"./handles\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle?: string;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  @State()\r\n  hasNestedAccordion = false;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  componentWillLoad() {\r\n    this.hasNestedAccordion = this.host.querySelector(\"dso-accordion\") !== null;\r\n\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined): Promise<void> {\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n    if (sectionBottomY > window.innerHeight) {\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection\r\n          ? this.host.offsetTop\r\n          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),\r\n        behavior: \"smooth\",\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      window.scrollTo({\r\n        top: this.host.offsetTop,\r\n        behavior: \"smooth\",\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement handleUrl={this.handleUrl} onClick={this.handleClick} open={this.open}>\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n\r\n                <span>{this.handleTitle}</span>\r\n\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  {this.handleTitle}\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/{p-712fca2c.entry.js → p-a63c82a4.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as d,h as s,a}from"./p-1a1a43fd.js";import{v as i}from"./p-5d7f4ff2.js";const l="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;max-inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;max-inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{max-inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:1s ease-out 0s 1 slideInFromTop}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";const e=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=i();this.hasFooter=undefined;this.fullscreen=undefined;this.modalTitle=undefined;this.role="dialog";this.showCloseButton=true}componentWillLoad(){this.hasFooter=this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;(o=this.htmlDialogElement)===null||o===void 0?void 0:o.showModal();document.body.classList.add("dso-modal-open")}disconnectedCallback(){var o;document.body.classList.remove("dso-modal-open");(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close()}render(){var o;return s("dialog",{class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",null,s("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"}))),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"}))))}get host(){return a(this)}};e.style=l;export{e as dso_modal};
-//# sourceMappingURL=p-712fca2c.entry.js.map
+import{r as o,c as d,h as s,a}from"./p-3ca5b6f4.js";import{v as i}from"./p-5d7f4ff2.js";const l="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;max-inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;max-inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{max-inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:1s ease-out 0s 1 slideInFromTop}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";const e=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=i();this.hasFooter=undefined;this.fullscreen=undefined;this.modalTitle=undefined;this.role="dialog";this.showCloseButton=true}componentWillLoad(){this.hasFooter=this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;(o=this.htmlDialogElement)===null||o===void 0?void 0:o.showModal();document.body.classList.add("dso-modal-open")}disconnectedCallback(){var o;document.body.classList.remove("dso-modal-open");(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close()}render(){var o;return s("dialog",{class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",null,s("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"}))),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"}))))}get host(){return a(this)}};e.style=l;export{e as dso_modal};
+//# sourceMappingURL=p-a63c82a4.entry.js.map

package/dist/dso-toolkit/p-a63c82a4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","Modal","v4","componentWillLoad","this","hasFooter","host","querySelector","componentDidLoad","_a","htmlDialogElement","showModal","document","body","classList","add","disconnectedCallback","remove","close","render","h","class","role","undefined","ariaId","ref","element","onCancel","e","preventDefault","dsoClose","emit","originalEvent","modalTitle","id","showCloseButton","type","onClick","icon","tabIndex","name"],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  @State()\r\n  hasFooter?: boolean;\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  componentWillLoad(): void {\r\n    this.hasFooter = this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.htmlDialogElement?.showModal();\r\n    document.body.classList.add(\"dso-modal-open\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.body.classList.remove(\"dso-modal-open\");\r\n    this.htmlDialogElement?.close();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"wFAAA,MAAMA,EAAW,24L,MCUJC,EAAK,M,wEAOPC,I,uFAqBa,S,qBAQJ,I,CAQlB,iBAAAC,GACEC,KAAKC,UAAYD,KAAKE,KAAKC,cAAc,qBAAuB,I,CAGlE,gBAAAC,G,OACEC,EAAAL,KAAKM,qBAAiB,MAAAD,SAAA,SAAAA,EAAEE,YACxBC,SAASC,KAAKC,UAAUC,IAAI,iB,CAG9B,oBAAAC,G,MACEJ,SAASC,KAAKC,UAAUG,OAAO,mBAC/BR,EAAAL,KAAKM,qBAAiB,MAAAD,SAAA,SAAAA,EAAES,O,CAG1B,MAAAC,G,MACE,OACEC,EAAA,UACEC,MAAM,YACNC,MAAMb,EAAAL,KAAKkB,QAAI,MAAAb,SAAA,EAAAA,EAAIc,UAAS,aACjB,OAAM,kBACAnB,KAAKoB,OACtBC,IAAMC,GAAatB,KAAKM,kBAAoBgB,EAC5CC,SAAWC,IACTA,EAAEC,iBAEFzB,KAAK0B,SAASC,KAAK,CAAEC,cAAeJ,GAAI,GAG1CR,EAAA,OAAKC,MAAM,aAAaC,KAAK,YAC1BlB,KAAK6B,WACJb,EAAA,OAAKC,MAAM,cACTD,EAAA,MAAIc,GAAI9B,KAAKoB,QAASpB,KAAK6B,YAC1B7B,KAAK+B,iBACJf,EAAA,UAAQgB,KAAK,SAASf,MAAM,YAAYgB,QAAUT,GAAMxB,KAAK0B,SAASC,KAAK,CAAEC,cAAeJ,KAC1FR,EAAA,YAAUkB,KAAK,UACflB,EAAA,QAAMC,MAAM,WAAS,aAK3BD,EAAA,QAAMC,MAAM,UAAUa,GAAI9B,KAAKoB,QAAM,WAKvCJ,EAAA,sBACEA,EAAA,OAAKC,MAAM,WAAWkB,SAAU,GAC9BnB,EAAA,QAAMoB,KAAK,WAIdpC,KAAKC,WACJe,EAAA,OAAKC,MAAM,cACTD,EAAA,QAAMoB,KAAK,a"}

package/dist/dso-toolkit/{p-b34f24b4.entry.js → p-a7186c03.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as t,a as i}from"./p-1a1a43fd.js";import{c as h}from"./p-6a1980b4.js";const s=":host{display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;color:#000;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";const e=class{constructor(t){o(this,t);this.yellow=undefined;this.border=undefined;this.white=undefined;this.dropShadow=undefined;this.step=undefined}render(){var o;const i=this.step||!!this.element.querySelector("[slot=icon]");const s=h("dso-highlight-box",{"dso-yellow":this.yellow,"dso-border":this.border,"dso-white":this.white,"dso-drop-shadow":this.dropShadow,"dso-has-counter":i});return t("div",{class:s},i&&t("div",{class:"dso-step-counter"},(o=this.step)!==null&&o!==void 0?o:t("slot",{name:"icon"})),t("slot",null))}get element(){return i(this)}};e.style=s;export{e as dso_highlight_box};
-//# sourceMappingURL=p-b34f24b4.entry.js.map
+import{r as o,h as t,a as i}from"./p-3ca5b6f4.js";import{c as h}from"./p-c87b4d11.js";const s=":host{display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;color:#000;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";const e=class{constructor(t){o(this,t);this.yellow=undefined;this.border=undefined;this.white=undefined;this.dropShadow=undefined;this.step=undefined}render(){var o;const i=this.step||!!this.element.querySelector("[slot=icon]");const s=h("dso-highlight-box",{"dso-yellow":this.yellow,"dso-border":this.border,"dso-white":this.white,"dso-drop-shadow":this.dropShadow,"dso-has-counter":i});return t("div",{class:s},i&&t("div",{class:"dso-step-counter"},(o=this.step)!==null&&o!==void 0?o:t("slot",{name:"icon"})),t("slot",null))}get element(){return i(this)}};e.style=s;export{e as dso_highlight_box};
+//# sourceMappingURL=p-a7186c03.entry.js.map

package/dist/dso-toolkit/p-a7186c03.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["highlightBoxCss","HighlightBox","render","hasCounter","this","step","element","querySelector","classes","clsx","yellow","border","white","dropShadow","h","class","_a","name"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host-context(.row.dso-equal-heights) {\r\n  height: 100%;\r\n  min-height: auto;\r\n\r\n  > .dso-highlight-box {\r\n    min-height: auto;\r\n\r\n    &.dso-has-counter {\r\n      height: calc(100% - #{units.$shared-equal-heights-highlight-box-height});\r\n    }\r\n\r\n    &:not(.dso-has-counter) {\r\n      height: calc(100% - #{units.$u2});\r\n    }\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-highlight-box {\r\n  @include highlight-box.root();\r\n}\r\n","import { Component, h, Prop, Element } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop()\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop()\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop()\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop()\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n    const classes = clsx(\"dso-highlight-box\", {\r\n      \"dso-yellow\": this.yellow,\r\n      \"dso-border\": this.border,\r\n      \"dso-white\": this.white,\r\n      \"dso-drop-shadow\": this.dropShadow,\r\n      \"dso-has-counter\": hasCounter,\r\n    });\r\n\r\n    return (\r\n      <div class={classes}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAkB,oyC,MCQXC,EAAY,M,wIAkCvB,MAAAC,G,MACE,MAAMC,EAAaC,KAAKC,QAAUD,KAAKE,QAAQC,cAAc,eAC7D,MAAMC,EAAUC,EAAK,oBAAqB,CACxC,aAAcL,KAAKM,OACnB,aAAcN,KAAKO,OACnB,YAAaP,KAAKQ,MAClB,kBAAmBR,KAAKS,WACxB,kBAAmBV,IAGrB,OACEW,EAAA,OAAKC,MAAOP,GACTL,GAAcW,EAAA,OAAKC,MAAM,qBAAoBC,EAAAZ,KAAKC,QAAI,MAAAW,SAAA,EAAAA,EAAIF,EAAA,QAAMG,KAAK,UACtEH,EAAA,a"}

package/dist/dso-toolkit/{p-51f19c06.entry.js → p-aadd6311.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as o}from"./p-1a1a43fd.js";import{v as i}from"./p-5d7f4ff2.js";const t=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";const l=class{constructor(o){e(this,o);this.dsoToggleOverlay=s(this,"dsoToggleOverlay",7);this.selectableRefs={};this.group=i();this.overlays=undefined}overlayChangeHandler(e,s){const o=s.detail.target instanceof HTMLInputElement?!!s.detail.target.checked:false;this.dsoToggleOverlay.emit({overlay:e,checked:o})}componentDidRender(){this.overlays.filter((e=>{var s,o;return!e.disabled&&((o=(s=this.previousOverlays)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||o===void 0?void 0:o.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return o("fieldset",{class:"form-group dso-checkboxes"},o("legend",{class:"sr-only"},"Kaartlagen"),o("div",{class:"dso-label-container"},o("span",{class:"control-label","aria-hidden":"true"},"Kaartlagen")),o("div",{class:"dso-field-container"},this.overlays.map((e=>o("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?o("p",{slot:"info"},e.info):null)))))}};l.style=t;export{l as dso_map_overlays};
-//# sourceMappingURL=p-51f19c06.entry.js.map
+import{r as e,c as s,h as o}from"./p-3ca5b6f4.js";import{v as i}from"./p-5d7f4ff2.js";const t=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";const l=class{constructor(o){e(this,o);this.dsoToggleOverlay=s(this,"dsoToggleOverlay",7);this.selectableRefs={};this.group=i();this.overlays=undefined}overlayChangeHandler(e,s){const o=s.detail.target instanceof HTMLInputElement?!!s.detail.target.checked:false;this.dsoToggleOverlay.emit({overlay:e,checked:o})}componentDidRender(){this.overlays.filter((e=>{var s,o;return!e.disabled&&((o=(s=this.previousOverlays)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||o===void 0?void 0:o.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return o("fieldset",{class:"form-group dso-checkboxes"},o("legend",{class:"sr-only"},"Kaartlagen"),o("div",{class:"dso-label-container"},o("span",{class:"control-label","aria-hidden":"true"},"Kaartlagen")),o("div",{class:"dso-field-container"},this.overlays.map((e=>o("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?o("p",{slot:"info"},e.info):null)))))}};l.style=t;export{l as dso_map_overlays};
+//# sourceMappingURL=p-aadd6311.entry.js.map

package/dist/dso-toolkit/p-aadd6311.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mapOverlaysCss","MapOverlays","this","selectableRefs","uuidv4","overlayChangeHandler","overlay","e","checked","detail","target","HTMLInputElement","dsoToggleOverlay","emit","componentDidRender","overlays","filter","o","_a","_b","disabled","previousOverlays","find","p","id","forEach","toggleInfo","render","ref","h","class","map","key","type","value","name","group","onDsoChange","info","slot"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.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}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAiB,6W,MCYVC,EAAW,M,4EAEdC,KAAAC,eAA6D,G,WAM7DC,I,wBAcA,oBAAAC,CAAqBC,EAAkBC,GAC7C,MAAMC,EAAUD,EAAEE,OAAOC,kBAAkBC,mBAAqBJ,EAAEE,OAAOC,OAAOF,QAAU,MAE1FN,KAAKU,iBAAiBC,KAAK,CAAEP,UAASE,W,CAGxC,kBAAAM,GACEZ,KAAKa,SACFC,QAAQC,IAAC,IAAAC,EAAAC,EAAK,OAACF,EAAEG,YAAYD,GAAAD,EAAAhB,KAAKmB,oBAAgB,MAAAH,SAAA,SAAAA,EAAEI,MAAMC,GAAMA,EAAEC,KAAOP,EAAEO,QAAG,MAAAL,SAAA,SAAAA,EAAEC,YAAa,IAAI,IACjGK,SAASR,I,OACRC,EAAAhB,KAAKC,eAAec,EAAEO,OAAG,MAAAN,SAAA,SAAAA,EAAEQ,WAAW,MAAM,IAGhDxB,KAAKmB,iBAAmBnB,KAAKa,Q,CAG/B,MAAAY,GACE,IAAK,MAAMC,KAAO1B,KAAKC,eAAgB,QAC9BD,KAAKC,eAAeyB,E,CAG7B,OACEC,EAAA,YAAUC,MAAM,6BACdD,EAAA,UAAQC,MAAM,WAAS,cACvBD,EAAA,OAAKC,MAAM,uBACTD,EAAA,QAAMC,MAAM,gBAAe,cAAa,QAAM,eAIhDD,EAAA,OAAKC,MAAM,uBACR5B,KAAKa,SAASgB,KAAKzB,GAClBuB,EAAA,kBACEG,IAAK1B,EAAQkB,GACbS,KAAK,WACLC,MAAO5B,EAAQ6B,KACf3B,QAASF,EAAQE,QACjBY,SAAUd,EAAQc,SAClBe,KAAMjC,KAAKkC,MACXR,IAAMA,GAAQA,IAAQ1B,KAAKC,eAAeG,EAAQkB,IAAMI,GACxDS,YAAc9B,GAAML,KAAKG,qBAAqBC,EAASC,IAEtDD,EAAQ6B,KACR7B,EAAQgC,KAAOT,EAAA,KAAGU,KAAK,QAAQjC,EAAQgC,MAAY,S"}

package/dist/dso-toolkit/{p-440fc4ae.entry.js → p-b68ac725.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as n,F as e,a}from"./p-1a1a43fd.js";import{i as o}from"./p-33df9903.js";const s=':host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';const r=class{constructor(n){i(this,n);this.dsoSelectPage=t(this,"dsoSelectPage",7);this.sizePositionsMap={small:7,medium:9,large:11};this.availablePositions=undefined;this.totalPages=undefined;this.currentPage=undefined;this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:o(i)})}componentDidLoad(){var i;(i=this.responsiveElement)===null||i===void 0?void 0:i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,a;if(!this.totalPages){return null}if(this.availablePositions===undefined){return n("dso-responsive-element",{ref:i=>this.responsiveElement=i})}const o=this.availablePositions;const s=(i=this.currentPage)!==null&&i!==void 0?i:0;const r=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1||s>this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,(t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1)}},n("dso-icon",{icon:"chevron-left"}))),r.map((i=>n(e,null,this.showEllipsisBeforeLast(r,i,o)&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":undefined},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(r,i,o)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1||s>=this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((a=r[r.indexOf(s)+1])!==null&&a!==void 0?a:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.totalPages&&this.clickHandler(i,(t=r[r.indexOf(s)+1])!==null&&t!==void 0?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){if(i%2===0){return i-1}if(i<=3){return 3}return i}getPages(i,t,n){if(n+2<=t){return Array.from({length:n},((i,t)=>t+1))}if(t===3){return[i]}if(t===5){return[1,i,n]}return[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[];const a=Math.floor(t/2);if(i<=a){for(let i=2;i<=t-4;i++){e.push(i)}}if(i>=a&&i<=n-a){if(a===1){if(i>n-2){e.push(n-2)}e.push(i);if(i<3){e.push(3)}}if(a>1){const t=a-3;for(let o=Math.min(i-t,n-a);o<=Math.max(i+t,a);o++){if(o>2&&o<n-1){e.push(o)}}}}if(i>n-a){for(let i=n-(t-5);i<=n-1;i++){e.push(i)}}return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===0&&e>n-2&&!i.some((i=>i===2))&&n>=7}showEllipsisBeforeLast(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===i.length-1&&e>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return a(this)}};r.style=s;export{r as dso_pagination};
-//# sourceMappingURL=p-440fc4ae.entry.js.map
+import{r as i,c as t,h as n,F as e,a}from"./p-3ca5b6f4.js";import{i as o}from"./p-9747c291.js";const s=':host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';const r=class{constructor(n){i(this,n);this.dsoSelectPage=t(this,"dsoSelectPage",7);this.sizePositionsMap={small:7,medium:9,large:11};this.availablePositions=undefined;this.totalPages=undefined;this.currentPage=undefined;this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:o(i)})}componentDidLoad(){var i;(i=this.responsiveElement)===null||i===void 0?void 0:i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,a;if(!this.totalPages){return null}if(this.availablePositions===undefined){return n("dso-responsive-element",{ref:i=>this.responsiveElement=i})}const o=this.availablePositions;const s=(i=this.currentPage)!==null&&i!==void 0?i:0;const r=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1||s>this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,(t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1)}},n("dso-icon",{icon:"chevron-left"}))),r.map((i=>n(e,null,this.showEllipsisBeforeLast(r,i,o)&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":undefined},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(r,i,o)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1||s>=this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((a=r[r.indexOf(s)+1])!==null&&a!==void 0?a:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.totalPages&&this.clickHandler(i,(t=r[r.indexOf(s)+1])!==null&&t!==void 0?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){if(i%2===0){return i-1}if(i<=3){return 3}return i}getPages(i,t,n){if(n+2<=t){return Array.from({length:n},((i,t)=>t+1))}if(t===3){return[i]}if(t===5){return[1,i,n]}return[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[];const a=Math.floor(t/2);if(i<=a){for(let i=2;i<=t-4;i++){e.push(i)}}if(i>=a&&i<=n-a){if(a===1){if(i>n-2){e.push(n-2)}e.push(i);if(i<3){e.push(3)}}if(a>1){const t=a-3;for(let o=Math.min(i-t,n-a);o<=Math.max(i+t,a);o++){if(o>2&&o<n-1){e.push(o)}}}}if(i>n-a){for(let i=n-(t-5);i<=n-1;i++){e.push(i)}}return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===0&&e>n-2&&!i.some((i=>i===2))&&n>=7}showEllipsisBeforeLast(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===i.length-1&&e>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return a(this)}};r.style=s;export{r as dso_pagination};
+//# sourceMappingURL=p-b68ac725.entry.js.map

package/dist/dso-toolkit/p-b68ac725.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["paginationCss","Pagination","this","sizePositionsMap","small","medium","large","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","undefined","h","ref","element","currentPage","pages","getPages","class","href","formatHref","_b","indexOf","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","_c","sizePositions","Array","from","length","_value","i","getPageRange","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","Error","some","p"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size]))\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <ul class=\"pagination\">\r\n          <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              aria-label=\"Vorige\"\r\n              onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n            >\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </a>\r\n          </li>\r\n          {pages.map((page) => (\r\n            <>\r\n              {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n\r\n              <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                {currentPage === page ? (\r\n                  <span aria-current=\"page\">{page}</span>\r\n                ) : (\r\n                  <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                    {page}\r\n                  </a>\r\n                )}\r\n              </li>\r\n\r\n              {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n            </>\r\n          ))}\r\n          <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n              aria-label=\"Volgende\"\r\n              onClick={(e) =>\r\n                currentPage &&\r\n                this.totalPages &&\r\n                this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n              }\r\n            >\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/{p-6c543986.js → p-c19cfe3f.js}

@@ -1,2 +1,2 @@
 function $(){return Math.random().toString(16).slice(-4)}function n(n){return`${n}-${$()}${$()}-${$()}-${$()}-${$()}-${$()}${$()}${$()}`}export{n as c};
-//# sourceMappingURL=p-6c543986.js.map
+//# sourceMappingURL=p-c19cfe3f.js.map

package/dist/dso-toolkit/p-c19cfe3f.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chr4","Math","random","toString","slice","createIdentifier","prefix"],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n"],"mappings":"SAGgBA,IACd,OAAOC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAC3C,C,SAMgBC,EAAiBC,GAC/B,MAAO,GAAGA,KAAUN,MAASA,OAAUA,OAAUA,OAAUA,OAAUA,MAASA,MAASA,KACzF,Q"}

package/dist/dso-toolkit/{p-6a1980b4.js → p-c87b4d11.js}

@@ -1,2 +1,2 @@
 function r(e){var f,o,t="";if("string"==typeof e||"number"==typeof e)t+=e;else if("object"==typeof e)if(Array.isArray(e))for(f=0;f<e.length;f++)e[f]&&(o=r(e[f]))&&(t&&(t+=" "),t+=o);else for(f in e)e[f]&&(t&&(t+=" "),t+=f);return t}function e(){for(var e,f,o=0,t="";o<arguments.length;)(e=arguments[o++])&&(f=r(e))&&(t&&(t+=" "),t+=f);return t}export{e as c};
-//# sourceMappingURL=p-6a1980b4.js.map
+//# sourceMappingURL=p-c87b4d11.js.map

package/dist/dso-toolkit/p-c87b4d11.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["r","e","t","f","n","Array","isArray","length","clsx","arguments"],"sources":["../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);else for(t in e)e[t]&&(n&&(n+=\" \"),n+=t);return n}export function clsx(){for(var e,t,f=0,n=\"\";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"mappings":"AAAA,SAASA,EAAEC,GAAG,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAG,iBAAiBH,GAAG,iBAAiBA,EAAEG,GAAGH,OAAO,GAAG,iBAAiBA,EAAE,GAAGI,MAAMC,QAAQL,GAAG,IAAIC,EAAE,EAAEA,EAAED,EAAEM,OAAOL,IAAID,EAAEC,KAAKC,EAAEH,EAAEC,EAAEC,OAAOE,IAAIA,GAAG,KAAKA,GAAGD,QAAQ,IAAID,KAAKD,EAAEA,EAAEC,KAAKE,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC,CAAQ,SAASI,IAAO,IAAI,IAAIP,EAAEC,EAAEC,EAAE,EAAEC,EAAE,GAAGD,EAAEM,UAAUF,SAASN,EAAEQ,UAAUN,QAAQD,EAAEF,EAAEC,MAAMG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC,Q"}

package/dist/dso-toolkit/{p-0dffb117.entry.js → p-cbeb00cc.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,f as e,h as t,H as o,a as r}from"./p-1a1a43fd.js";import{d as s}from"./p-1805f5b0.js";import{c as i}from"./p-91963e3d.js";import"./p-5950644a.js";const a=":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-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  opacity: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.open:focus, .open:focus-visible {\n  outline-offset: 2px;\n}\n.open:active {\n  outline: 0;\n}\n.open:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  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-bottom: -4px;\n  margin-top: -4px;\n}\n.open.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open > span {\n  position: absolute;\n  width: 1px;\n  height: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n\n.dimmer {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 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 .titel:not([hidden]) {\n  background-color: #fff;\n  font-weight: 700;\n  line-height: initial;\n  padding: 8px;\n  position: absolute;\n}\n.wrapper img {\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: calc(100vh - 64px);\n}\n.wrapper .figuur-bijschrift:not([hidden]) {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n  padding-bottom: 12px;\n  padding-top: 16px;\n}\n\n.close {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n}\n.close:focus, .close:focus-visible {\n  outline-offset: 2px;\n}\n.close:active {\n  outline: 0;\n}\n.close:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  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-bottom: -4px;\n  margin-top: -4px;\n}\n.close.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close > span {\n  position: absolute;\n  width: 1px;\n  height: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}";const l=class{constructor(e){n(this,e);this.titelSlot=null;this.bijschriftSlot=null;this.active=false;this.zoomable=false}loadListener(n){if(n.target instanceof HTMLImageElement){this.setZoomable(n.target)}}connectedCallback(){this.titelSlot=this.host.querySelector("div[slot='titel']");this.bijschriftSlot=this.host.querySelector("div[slot='bijschrift']")}componentDidLoad(){this.resizeObserver=new ResizeObserver(s((()=>{const n=this.host.querySelector("img");if(n instanceof HTMLImageElement){this.setZoomable(n)}}),200));this.mutationObserver=new MutationObserver((n=>{var t,o;e(this.host);if(((t=n[0])===null||t===void 0?void 0:t.type)==="childList"){(o=this.resizeObserver)===null||o===void 0?void 0:o.disconnect();this.initZoomableImage()}}));this.mutationObserver.observe(this.host,{attributes:true,subtree:true,attributeFilter:["src","alt"],childList:true});this.initZoomableImage()}disconnectedCallback(){var n,e,t;(n=this.trap)===null||n===void 0?void 0:n.deactivate();(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}initZoomableImage(){var n;const e=this.host.querySelector("img");if(!(e instanceof HTMLImageElement)){return}if(e.complete){this.setZoomable(e)}(n=this.resizeObserver)===null||n===void 0?void 0:n.observe(e)}setZoomable(n){const{width:e,naturalWidth:t,height:o,naturalHeight:r}=n;this.zoomable=e<t||o<r}render(){var n;const{src:e,alt:r}=(n=this.host.querySelector("img"))!==null&&n!==void 0?n:{};return t(o,{onClick:()=>{var n;return(n=this.buttonElement)===null||n===void 0?void 0:n.focus()}},this.active&&e&&r&&t("div",{class:"dimmer"},t("div",{class:"wrapper",ref:n=>this.wrapperElement=n},t("div",{class:"titel",hidden:!this.titelSlot},t("slot",{name:"titel"})),t("img",{src:e,alt:r}),t("button",{type:"button",class:"close",onClick:()=>this.active=false},t("dso-icon",{icon:"times"}),t("span",null,"Sluiten")),t("div",{class:"figuur-bijschrift",hidden:!this.bijschriftSlot},t("slot",{name:"bijschrift"})))),t("slot",null),this.zoomable&&t("button",{type:"button",class:"open",ref:n=>this.buttonElement=n,onClick:()=>this.active=true},t("dso-icon",{icon:"external-link"}),t("span",null,"Afbeelding vergroot weergeven")))}componentDidRender(){var n,e;if(this.active&&this.wrapperElement&&!this.trap){this.trap=i(this.wrapperElement,{escapeDeactivates:true,clickOutsideDeactivates:n=>{if(n instanceof MouseEvent&&n.composedPath()[0]===this.wrapperElement){this.active=false;return false}return true},setReturnFocus:(n=this.buttonElement)!==null&&n!==void 0?n:false,onDeactivate:()=>this.active=false}).activate()}else if(!this.active&&this.trap){(e=this.trap)===null||e===void 0?void 0:e.deactivate();delete this.trap}}get host(){return r(this)}};l.style=a;export{l as dso_image_overlay};
-//# sourceMappingURL=p-0dffb117.entry.js.map
+import{r as n,f as e,h as t,H as o,a as r}from"./p-3ca5b6f4.js";import{d as s}from"./p-1805f5b0.js";import{c as i}from"./p-1521d319.js";import"./p-86133aa5.js";const a=":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-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  opacity: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.open:focus, .open:focus-visible {\n  outline-offset: 2px;\n}\n.open:active {\n  outline: 0;\n}\n.open:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  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-bottom: -4px;\n  margin-top: -4px;\n}\n.open.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open > span {\n  position: absolute;\n  width: 1px;\n  height: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n\n.dimmer {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 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 .titel:not([hidden]) {\n  background-color: #fff;\n  font-weight: 700;\n  line-height: initial;\n  padding: 8px;\n  position: absolute;\n}\n.wrapper img {\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: calc(100vh - 64px);\n}\n.wrapper .figuur-bijschrift:not([hidden]) {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n  padding-bottom: 12px;\n  padding-top: 16px;\n}\n\n.close {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n}\n.close:focus, .close:focus-visible {\n  outline-offset: 2px;\n}\n.close:active {\n  outline: 0;\n}\n.close:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  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-bottom: -4px;\n  margin-top: -4px;\n}\n.close.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close > span {\n  position: absolute;\n  width: 1px;\n  height: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}";const l=class{constructor(e){n(this,e);this.titelSlot=null;this.bijschriftSlot=null;this.active=false;this.zoomable=false}loadListener(n){if(n.target instanceof HTMLImageElement){this.setZoomable(n.target)}}connectedCallback(){this.titelSlot=this.host.querySelector("div[slot='titel']");this.bijschriftSlot=this.host.querySelector("div[slot='bijschrift']")}componentDidLoad(){this.resizeObserver=new ResizeObserver(s((()=>{const n=this.host.querySelector("img");if(n instanceof HTMLImageElement){this.setZoomable(n)}}),200));this.mutationObserver=new MutationObserver((n=>{var t,o;e(this.host);if(((t=n[0])===null||t===void 0?void 0:t.type)==="childList"){(o=this.resizeObserver)===null||o===void 0?void 0:o.disconnect();this.initZoomableImage()}}));this.mutationObserver.observe(this.host,{attributes:true,subtree:true,attributeFilter:["src","alt"],childList:true});this.initZoomableImage()}disconnectedCallback(){var n,e,t;(n=this.trap)===null||n===void 0?void 0:n.deactivate();(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}initZoomableImage(){var n;const e=this.host.querySelector("img");if(!(e instanceof HTMLImageElement)){return}if(e.complete){this.setZoomable(e)}(n=this.resizeObserver)===null||n===void 0?void 0:n.observe(e)}setZoomable(n){const{width:e,naturalWidth:t,height:o,naturalHeight:r}=n;this.zoomable=e<t||o<r}render(){var n;const{src:e,alt:r}=(n=this.host.querySelector("img"))!==null&&n!==void 0?n:{};return t(o,{onClick:()=>{var n;return(n=this.buttonElement)===null||n===void 0?void 0:n.focus()}},this.active&&e&&r&&t("div",{class:"dimmer"},t("div",{class:"wrapper",ref:n=>this.wrapperElement=n},t("div",{class:"titel",hidden:!this.titelSlot},t("slot",{name:"titel"})),t("img",{src:e,alt:r}),t("button",{type:"button",class:"close",onClick:()=>this.active=false},t("dso-icon",{icon:"times"}),t("span",null,"Sluiten")),t("div",{class:"figuur-bijschrift",hidden:!this.bijschriftSlot},t("slot",{name:"bijschrift"})))),t("slot",null),this.zoomable&&t("button",{type:"button",class:"open",ref:n=>this.buttonElement=n,onClick:()=>this.active=true},t("dso-icon",{icon:"external-link"}),t("span",null,"Afbeelding vergroot weergeven")))}componentDidRender(){var n,e;if(this.active&&this.wrapperElement&&!this.trap){this.trap=i(this.wrapperElement,{escapeDeactivates:true,clickOutsideDeactivates:n=>{if(n instanceof MouseEvent&&n.composedPath()[0]===this.wrapperElement){this.active=false;return false}return true},setReturnFocus:(n=this.buttonElement)!==null&&n!==void 0?n:false,onDeactivate:()=>this.active=false}).activate()}else if(!this.active&&this.trap){(e=this.trap)===null||e===void 0?void 0:e.deactivate();delete this.trap}}get host(){return r(this)}};l.style=a;export{l as dso_image_overlay};
+//# sourceMappingURL=p-cbeb00cc.entry.js.map

package/dist/dso-toolkit/p-cbeb00cc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["imageOverlayCss","ImageOverlay","this","titelSlot","bijschriftSlot","loadListener","event","target","HTMLImageElement","setZoomable","connectedCallback","host","querySelector","componentDidLoad","resizeObserver","ResizeObserver","debounce","imgElement","mutationObserver","MutationObserver","e","forceUpdate","_a","type","_b","disconnect","initZoomableImage","observe","attributes","subtree","attributeFilter","childList","disconnectedCallback","trap","deactivate","_c","complete","imageElement","width","naturalWidth","height","naturalHeight","zoomable","render","src","alt","h","Host","onClick","buttonElement","focus","active","class","ref","element","wrapperElement","hidden","name","icon","componentDidRender","createFocusTrap","escapeDeactivates","clickOutsideDeactivates","MouseEvent","composedPath","setReturnFocus","onDeactivate","activate"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@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/utilities\";\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  border: 0;\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n  min-width: auto;\r\n  padding: units.$u1;\r\n  opacity: 0;\r\n  position: absolute;\r\n  right: units.$u2;\r\n  top: units.$u2;\r\n}\r\n\r\n.dimmer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: zindex.$image-overlay - 1;\r\n  display: flex;\r\n  padding: units.$u4;\r\n  background-color: fade-out(colors.$wit, 0.2);\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  .titel:not([hidden]) {\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    width: auto;\r\n    height: auto;\r\n    max-width: 100%;\r\n    max-height: 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-bottom: units.$u1 * 1.5;\r\n    padding-top: 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  border: 0;\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n  min-width: auto;\r\n  padding: units.$u1;\r\n  position: absolute;\r\n  top: units.$u2;\r\n  right: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Element, forceUpdate, h, Host, Listen, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\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  @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  render() {\r\n    const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n    return (\r\n      <Host onClick={() => this.buttonElement?.focus()}>\r\n        {this.active && src && alt && (\r\n          <div class=\"dimmer\">\r\n            <div class=\"wrapper\" ref={(element) => (this.wrapperElement = element)}>\r\n              <div class=\"titel\" hidden={!this.titelSlot}>\r\n                <slot name=\"titel\" />\r\n              </div>\r\n              <img src={src} alt={alt} />\r\n              <button type=\"button\" class=\"close\" onClick={() => (this.active = false)}>\r\n                <dso-icon icon=\"times\"></dso-icon>\r\n                <span>Sluiten</span>\r\n              </button>\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        )}\r\n        <slot />\r\n        {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      </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"],"mappings":"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"}

package/dist/dso-toolkit/{p-8b77b083.entry.js → p-cce85c45.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,h as t,F as o}from"./p-1a1a43fd.js";import{c as e}from"./p-91963e3d.js";import"./p-5950644a.js";const r=":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  visibility: hidden;\n  width: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  height: 100%;\n  opacity: 0.4;\n  width: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  bottom: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  right: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border-right: 0;\n  border-top: 0;\n  border-radius: 0 0 0 8px;\n  height: 40px;\n  min-width: 40px;\n  padding: 0;\n  position: fixed;\n  right: 0;\n  width: 40px;\n  top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon {\n  margin-left: 0;\n  margin-right: 0;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-left: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  transition: right 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    right: -320px;\n    width: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    right: -480px;\n    width: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    right: -640px;\n    width: 640px;\n  }\n}\n.iframe-container.open {\n  right: 0;\n}\n\niframe {\n  border: 0;\n  height: 100%;\n  width: 100%;\n}";const s=500;const i=class{constructor(t){n(this,t);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),s)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),s)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const t=document.querySelector("body");if(n==="open"){t===null||t===void 0?void 0:t.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{t===null||t===void 0?void 0:t.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,t;if(!this.panelWrapperElement){return}this.trap=e(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(t=this.closeButtonElement)!==null&&t!==void 0?t:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return t(o,null,t("button",{type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},t("dso-icon",{icon:"help"}),t("span",null,this.label)),t("div",{id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},t("div",{class:"dimscreen",onClick:this.closeClick}),t("div",{class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?t("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):t("div",null)),t("button",{type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};i.style=r;export{i as dso_helpcenter_panel};
-//# sourceMappingURL=p-8b77b083.entry.js.map
+import{r as n,h as t,F as o}from"./p-3ca5b6f4.js";import{c as e}from"./p-1521d319.js";import"./p-86133aa5.js";const r=":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  visibility: hidden;\n  width: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  height: 100%;\n  opacity: 0.4;\n  width: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  bottom: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  right: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border-right: 0;\n  border-top: 0;\n  border-radius: 0 0 0 8px;\n  height: 40px;\n  min-width: 40px;\n  padding: 0;\n  position: fixed;\n  right: 0;\n  width: 40px;\n  top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon {\n  margin-left: 0;\n  margin-right: 0;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-left: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  transition: right 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    right: -320px;\n    width: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    right: -480px;\n    width: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    right: -640px;\n    width: 640px;\n  }\n}\n.iframe-container.open {\n  right: 0;\n}\n\niframe {\n  border: 0;\n  height: 100%;\n  width: 100%;\n}";const s=500;const i=class{constructor(t){n(this,t);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),s)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),s)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const t=document.querySelector("body");if(n==="open"){t===null||t===void 0?void 0:t.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{t===null||t===void 0?void 0:t.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,t;if(!this.panelWrapperElement){return}this.trap=e(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(t=this.closeButtonElement)!==null&&t!==void 0?t:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return t(o,null,t("button",{type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},t("dso-icon",{icon:"help"}),t("span",null,this.label)),t("div",{id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},t("div",{class:"dimscreen",onClick:this.closeClick}),t("div",{class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?t("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):t("div",null)),t("button",{type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};i.style=r;export{i as dso_helpcenter_panel};
+//# sourceMappingURL=p-cce85c45.entry.js.map

package/dist/dso-toolkit/p-cce85c45.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["helpcenterPanelCss","maxCssTransitionMilliseconds","HelpcenterPanel","this","iframeLoaded","openClick","visibility","slideState","setTimeout","isOpen","loadIframe","closeClick","watchUrl","url","iframeUrl","watchIsOpen","body","document","querySelector","style","setProperty","removeProperty","keyDownListener","event","key","createTrap","panelWrapperElement","trap","createFocusTrap","allowOutsideClick","tabbableOptions","getShadowRoot","setReturnFocus","_a","openButtonElement","initialFocus","_b","closeButtonElement","activate","componentDidRender","deactivate","render","h","Fragment","type","onClick","class","ref","element","icon","label","id","role","src","tabindex","onLoad"],"sources":["src/components/helpcenter-panel/helpcenter-panel.scss?tag=dso-helpcenter-panel&encapsulation=shadow","src/components/helpcenter-panel/helpcenter-panel.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.wrapper {\r\n  height: 100%;\r\n  left: 0;\r\n  position: fixed;\r\n  top: 0;\r\n  visibility: hidden;\r\n  width: 100%;\r\n\r\n  &.visible {\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  background-color: colors.$zwart;\r\n  height: 100%;\r\n  opacity: 0.4;\r\n  width: 100%;\r\n}\r\n\r\n.open-button {\r\n  @include button.primary($modifiers: false);\r\n\r\n  border: 0;\r\n  bottom: units.$u2;\r\n  font-family: typography.$font-family-base;\r\n  position: fixed;\r\n  right: units.$u2;\r\n  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.open {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.secondary($modifiers: false);\r\n\r\n  border-right: 0;\r\n  border-top: 0;\r\n  border-radius: 0 0 0 units.$u1;\r\n  height: units.$u5;\r\n  min-width: units.$u5;\r\n  padding: 0;\r\n  position: fixed;\r\n  right: 0;\r\n  width: units.$u5;\r\n  top: 0;\r\n\r\n  dso-icon {\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.close {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.iframe-container {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-left: 1px solid colors.$grijs-20;\r\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\r\n  height: 100%;\r\n  position: absolute;\r\n  top: 0;\r\n  transition: right 0.5s;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    right: -320px;\r\n    width: 320px;\r\n  }\r\n\r\n  @media screen and (min-width: (media-query-breakpoints.$screen-xs-min + 1)) and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    right: -480px;\r\n    width: 480px;\r\n  }\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    right: -640px;\r\n    width: 640px;\r\n  }\r\n\r\n  &.open {\r\n    right: 0;\r\n  }\r\n}\r\n\r\niframe {\r\n  border: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n","import { h, Component, Fragment, Prop, State, Watch, Listen } from \"@stencil/core\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nconst maxCssTransitionMilliseconds = 500;\r\n\r\n@Component({\r\n  tag: \"dso-helpcenter-panel\",\r\n  styleUrl: \"helpcenter-panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class HelpcenterPanel {\r\n  private iframeUrl?: string;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private panelWrapperElement?: HTMLDivElement;\r\n\r\n  private openButtonElement?: HTMLButtonElement;\r\n\r\n  private closeButtonElement?: HTMLButtonElement;\r\n\r\n  private iframeLoaded = false;\r\n\r\n  /**\r\n   * The label on the help button that activates the Helpcenter.\r\n   */\r\n  @Prop()\r\n  label = \"Hulp nodig\";\r\n\r\n  /**\r\n   * The URL that's loaded when the Helpcenter opens.\r\n   */\r\n  @Prop()\r\n  url!: string;\r\n\r\n  @State()\r\n  visibility: \"visible\" | \"hidden\" = \"hidden\";\r\n\r\n  @State()\r\n  isOpen: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  slideState: \"open\" | \"close\" = \"close\";\r\n\r\n  @State()\r\n  loadIframe = false;\r\n\r\n  @Watch(\"url\")\r\n  watchUrl(url: string) {\r\n    if (this.isOpen === \"open\" && this.iframeUrl !== url) {\r\n      this.iframeUrl = url;\r\n    }\r\n  }\r\n\r\n  @Watch(\"isOpen\")\r\n  watchIsOpen(isOpen: \"open\" | \"close\") {\r\n    const body = document.querySelector(\"body\");\r\n\r\n    if (isOpen === \"open\") {\r\n      body?.style.setProperty(\"overflow\", \"hidden\");\r\n\r\n      if (this.iframeUrl !== this.url) {\r\n        this.iframeUrl = this.url;\r\n      }\r\n    } else {\r\n      body?.style.removeProperty(\"overflow\");\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\" && this.isOpen === \"open\") {\r\n      this.closeClick();\r\n    }\r\n  }\r\n\r\n  private createTrap() {\r\n    if (!this.panelWrapperElement) {\r\n      return;\r\n    }\r\n\r\n    this.trap = createFocusTrap(this.panelWrapperElement, {\r\n      allowOutsideClick: true,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.openButtonElement ?? false,\r\n      initialFocus: this.closeButtonElement ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private openClick = () => {\r\n    this.visibility = \"visible\";\r\n    this.slideState = \"open\";\r\n    setTimeout(() => {\r\n      this.isOpen = \"open\";\r\n    });\r\n    if (!this.loadIframe) {\r\n      setTimeout(() => {\r\n        this.loadIframe = true;\r\n      }, maxCssTransitionMilliseconds);\r\n    }\r\n  };\r\n\r\n  private closeClick = () => {\r\n    this.isOpen = \"close\";\r\n    this.slideState = \"close\";\r\n    setTimeout(() => {\r\n      this.visibility = \"hidden\";\r\n    }, maxCssTransitionMilliseconds);\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.isOpen === \"open\" && this.iframeLoaded && !this.trap) {\r\n      this.createTrap();\r\n    } else if (this.isOpen === \"close\" && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          onClick={this.openClick}\r\n          class={`open-button ${this.isOpen}`}\r\n          aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n          aria-haspopup=\"dialog\"\r\n          aria-controls=\"dso-panel-wrapper\"\r\n          ref={(element) => (this.openButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"help\"></dso-icon>\r\n          <span>{this.label}</span>\r\n        </button>\r\n        <div\r\n          id=\"dso-panel-wrapper\"\r\n          class={`wrapper ${this.visibility}`}\r\n          aria-label=\"helpcentrum\"\r\n          role=\"dialog\"\r\n          ref={(element) => (this.panelWrapperElement = element)}\r\n        >\r\n          <div class=\"dimscreen\" onClick={this.closeClick} />\r\n          <div class={`iframe-container ${this.slideState}`} aria-live=\"polite\">\r\n            {this.loadIframe ? (\r\n              <iframe\r\n                src={this.iframeUrl}\r\n                tabindex=\"0\"\r\n                onLoad={() => {\r\n                  this.createTrap();\r\n                  this.iframeLoaded = true;\r\n                }}\r\n              />\r\n            ) : (\r\n              <div />\r\n            )}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class={`close-button ${this.isOpen}`}\r\n            onClick={this.closeClick}\r\n            aria-expanded={this.isOpen === \"open\" ? \"true\" : \"false\"}\r\n            aria-controls=\"dso-panel-wrapper\"\r\n            ref={(element) => (this.closeButtonElement = element)}\r\n          >\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  }\r\n}\r\n"],"mappings":"8GAAA,MAAMA,EAAqB,owWCI3B,MAAMC,EAA+B,I,MAOxBC,EAAe,M,yBAWlBC,KAAAC,aAAe,MAsEfD,KAAAE,UAAY,KAClBF,KAAKG,WAAa,UAClBH,KAAKI,WAAa,OAClBC,YAAW,KACTL,KAAKM,OAAS,MAAM,IAEtB,IAAKN,KAAKO,WAAY,CACpBF,YAAW,KACTL,KAAKO,WAAa,IAAI,GACrBT,E,GAICE,KAAAQ,WAAa,KACnBR,KAAKM,OAAS,QACdN,KAAKI,WAAa,QAClBC,YAAW,KACTL,KAAKG,WAAa,QAAQ,GACzBL,EAA6B,E,WAlF1B,a,mCAS2B,S,YAGR,Q,gBAGI,Q,gBAGlB,K,CAGb,QAAAW,CAASC,GACP,GAAIV,KAAKM,SAAW,QAAUN,KAAKW,YAAcD,EAAK,CACpDV,KAAKW,UAAYD,C,EAKrB,WAAAE,CAAYN,GACV,MAAMO,EAAOC,SAASC,cAAc,QAEpC,GAAIT,IAAW,OAAQ,CACrBO,IAAI,MAAJA,SAAI,SAAJA,EAAMG,MAAMC,YAAY,WAAY,UAEpC,GAAIjB,KAAKW,YAAcX,KAAKU,IAAK,CAC/BV,KAAKW,UAAYX,KAAKU,G,MAEnB,CACLG,IAAI,MAAJA,SAAI,SAAJA,EAAMG,MAAME,eAAe,W,EAK/B,eAAAC,CAAgBC,GACd,GAAIA,EAAMC,MAAQ,UAAYrB,KAAKM,SAAW,OAAQ,CACpDN,KAAKQ,Y,EAID,UAAAc,G,QACN,IAAKtB,KAAKuB,oBAAqB,CAC7B,M,CAGFvB,KAAKwB,KAAOC,EAAgBzB,KAAKuB,oBAAqB,CACpDG,kBAAmB,KACnBC,gBAAiB,CACfC,cAAe,MAEjBC,gBAAgBC,EAAA9B,KAAK+B,qBAAiB,MAAAD,SAAA,EAAAA,EAAI,MAC1CE,cAAcC,EAAAjC,KAAKkC,sBAAkB,MAAAD,SAAA,EAAAA,EAAI,QACxCE,U,CAwBL,kBAAAC,G,MACE,GAAIpC,KAAKM,SAAW,QAAUN,KAAKC,eAAiBD,KAAKwB,KAAM,CAC7DxB,KAAKsB,Y,MACA,GAAItB,KAAKM,SAAW,SAAWN,KAAKwB,KAAM,EAC/CM,EAAA9B,KAAKwB,QAAI,MAAAM,SAAA,SAAAA,EAAEO,oBAEJrC,KAAKwB,I,EAIhB,MAAAc,GACE,OACEC,EAAAC,EAAA,KACED,EAAA,UACEE,KAAK,SACLC,QAAS1C,KAAKE,UACdyC,MAAO,eAAe3C,KAAKM,SAAQ,gBACpBN,KAAKM,SAAW,OAAS,OAAS,QAAO,gBAC1C,SAAQ,gBACR,oBACdsC,IAAMC,GAAa7C,KAAK+B,kBAAoBc,GAE5CN,EAAA,YAAUO,KAAK,SACfP,EAAA,YAAOvC,KAAK+C,QAEdR,EAAA,OACES,GAAG,oBACHL,MAAO,WAAW3C,KAAKG,aAAY,aACxB,cACX8C,KAAK,SACLL,IAAMC,GAAa7C,KAAKuB,oBAAsBsB,GAE9CN,EAAA,OAAKI,MAAM,YAAYD,QAAS1C,KAAKQ,aACrC+B,EAAA,OAAKI,MAAO,oBAAoB3C,KAAKI,aAAY,YAAY,UAC1DJ,KAAKO,WACJgC,EAAA,UACEW,IAAKlD,KAAKW,UACVwC,SAAS,IACTC,OAAQ,KACNpD,KAAKsB,aACLtB,KAAKC,aAAe,IAAI,IAI5BsC,EAAA,aAGJA,EAAA,UACEE,KAAK,SACLE,MAAO,gBAAgB3C,KAAKM,SAC5BoC,QAAS1C,KAAKQ,WAAU,gBACTR,KAAKM,SAAW,OAAS,OAAS,QAAO,gBAC1C,oBACdsC,IAAMC,GAAa7C,KAAKkC,mBAAqBW,GAE7CN,EAAA,YAAUO,KAAK,UACfP,EAAA,QAAMI,MAAM,WAAS,a"}