@dso-toolkit/core 59.0.1 → 61.0.0

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

@@ -1 +0,0 @@
-{"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-ad44136d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as i,a as o}from"./p-3ca5b6f4.js";import{d as r,h as a,c as s,b as n}from"./p-fd7891ef.js";import{c as p}from"./p-c87b4d11.js";import{d as l}from"./p-1805f5b0.js";var d={name:"maxSize",enabled:true,phase:"main",requiresIfExists:["offset","preventOverflow","flip"],fn:function t(e){var i=e.state,o=e.name,a=e.options;var s=r(i,a);var n=i.modifiersData.preventOverflow||{x:0,y:0},p=n.x,l=n.y;var d=i.rects.popper,h=d.width,f=d.height;var c=i.placement.split("-"),m=c[0];var u=m==="left"?"left":"right";var w=m==="top"?"top":"bottom";i.modifiersData[o]={width:h-s[u]-p,height:f-s[w]-l}}};const h=":host(.hidden){visibility:hidden}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0;margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0;margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0;margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0;margin-top:-3px}";var f=undefined&&undefined.__classPrivateFieldGet||function(t,e,i,o){if(i==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e==="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?o:i==="a"?o.call(t):o?o.value:e.get(t)};var c=undefined&&undefined.__classPrivateFieldSet||function(t,e,i,o,r){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!r)throw new TypeError("Private accessor was defined without a setter");if(typeof e==="function"?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?r.call(t,i):r?r.value=i:e.set(t,i),i};var m;const u=150;const w={name:"applyMaxSize",enabled:true,phase:n,requires:["maxSize"],fn({state:t}){let{width:e}=t.modifiersData.maxSize;if(e<160){e=160}t.styles.popper=Object.assign(Object.assign({},t.styles.popper),{maxWidth:`${e}px`})}};const v=class{constructor(e){t(this,e);this.callbacks={activate:()=>this.active=true,deactivate:()=>this.active=false};this.onMouseLeave=()=>{var t;if(!this.element.matches(":hover")&&!((t=this.target)===null||t===void 0?void 0:t.matches(":hover"))){this.callbacks.deactivate()}};this.keyDownListener=t=>{if(t.key==="Escape"){this.deactivate()}};this.deactivatePopper=l((()=>{var t;this.hidden=true;(t=this.popper)===null||t===void 0?void 0:t.destroy();this.popper=undefined}),u);m.set(this,void 0);this.descriptive=false;this.position="top";this.strategy="auto";this.noArrow=false;this.stateless=undefined;this.small=undefined;this.active=false;this.hidden=true}async activate(){this.active=true}async deactivate(){this.active=false}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.position})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.element;while(t&&t.parentNode!==document){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&a(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}watchActive(){if(this.active){this.activatePopper();if(!this.stateless){setTimeout((()=>{var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"eventListeners",enabled:true}]});document.addEventListener("keydown",this.keyDownListener)}))}}else{document.removeEventListener("keydown",this.keyDownListener);this.deactivatePopper()}}listenClick(t){t.stopPropagation()}componentDidLoad(){var t;const e=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(!(e instanceof HTMLElement)){throw new Error("tooltip element is not instanceof HTMLElement")}if(!this.stateless&&this.target){this.target.addEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.addEventListener("mouseleave",this.onMouseLeave)));this.target.addEventListener("focus",this.callbacks.activate);this.target.addEventListener("blur",this.callbacks.deactivate)}}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy();if(!this.stateless&&this.target){this.target.removeEventListener("mouseenter",this.callbacks.activate);[this.element,this.target].forEach((t=>t.removeEventListener("mouseleave",this.onMouseLeave)));this.target.removeEventListener("focus",this.callbacks.activate);this.target.removeEventListener("blur",this.callbacks.deactivate)}this.target=undefined}componentDidRender(){var t;if(this.active){(t=this.popper)===null||t===void 0?void 0:t.update()}}render(){return e(i,{class:{hidden:this.hidden},role:"tooltip",onClick:this.listenClick},e("div",{class:p("tooltip",{in:this.active})},!this.noArrow&&e("div",{"data-popper-arrow":true,class:"tooltip-arrow"}),e("div",{"aria-hidden":!this.descriptive||undefined,class:p("tooltip-inner",{"dso-small":this.small})},e("slot",null))))}activatePopper(){var t;this.hidden=false;if(this.popper){return}const e=(t=this.element.shadowRoot)===null||t===void 0?void 0:t.querySelector(".tooltip");if(this.target&&e instanceof HTMLElement){this.popper=s(this.target,e,{placement:this.position,modifiers:[d,w,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=f(this,m,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){c(this,m,t,"f")}initializeTarget(){const t=this.element.id;if(!t){console.warn("Unable to find reference tooltip has no [id] attribute.");return}const e=this.element.getRootNode();if(!(e instanceof Document||e instanceof ShadowRoot)){console.warn(`rootNode is not instance of Document or ShadowRoot`);return}const i=e.querySelector(`[aria-describedBy="${t}`);if(!i){console.warn(`Unable to find reference with aria-describedby ${t}`);return}c(this,m,i,"f");return i}get element(){return o(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};m=new WeakMap;v.style=h;export{v as dso_tooltip};
-//# sourceMappingURL=p-ad44136d.entry.js.map

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

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

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

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

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

@@ -1 +0,0 @@
-{"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-d37a6c95.entry.js

@@ -1,2 +0,0 @@
-import{r as n,c as t,h as o}from"./p-3ca5b6f4.js";import{c as e}from"./p-1521d319.js";import{c as s}from"./p-c87b4d11.js";import"./p-86133aa5.js";const i="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n: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.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\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  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-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: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";const r=class{constructor(o){n(this,o);this.dsoCountChange=t(this,"dsoCountChange",7);this.dsoSelectedChange=t(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.manual=true}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}componentDidRender(){var n;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=e(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}disconnectedCallback(){var n;(n=this.trap)===null||n===void 0?void 0:n.deactivate()}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,t){if(typeof this.count==="number"){const o=t==="increment"?this.count+1:this.count-1;if(this.isNewCountValid(o)===false){return}this.dsoCountChange.emit({originalEvent:n,count:o})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){if(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max))){return false}return true}render(){const n=this.manualCount===undefined;const t=this.checked||this.count!==undefined&&this.count>0;return o("div",{class:s(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{class:s(["dso-list-button",{"dso-selected":t,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{class:"dso-selectable"},o("input",{id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled,"aria-label":this.label}),o("label",{htmlFor:"dso-list-button-checkbox"},this.label)),this.sublabel&&o("span",{class:"dso-sublabel"},this.sublabel),o("slot",{name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{icon:"minus-circle"}),o("span",{class:"sr-only"},"Aantal verlagen")),o("div",{class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{onSubmit:n=>this.setCount(n)},o("div",{ref:n=>this.manualInputWrapperElement=n},o("input",{class:s("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual===true&&o("button",{class:s("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?o("span",{class:"sr-only"},"Handmatig aantal invullen"):o("span",{class:"sr-only"},"Zet waarde")))),n&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{icon:"plus-circle"}),o("span",{class:"sr-only"},"Aantal verhogen"))))}static get watchers(){return{manual:["watchManualCallback"]}}};r.style=i;export{r as dso_list_button};
-//# sourceMappingURL=p-d37a6c95.entry.js.map

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

@@ -1,2 +0,0 @@
-import{h as n,r as t,c as o,H as e,a as s}from"./p-3ca5b6f4.js";import{c as i}from"./p-c87b4d11.js";const a=["main","map"];const r=({onApply:t,onCancel:o})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:o},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:t},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const l=({ref:t,onApply:o,onCancel:e})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:t,onCancel:n=>{n.preventDefault();e(n)}},n("h1",null,"Uw keuzes"),n(r,{onApply:o,onCancel:e}),n("slot",{name:"filterpanel"}),n(r,{onApply:o,onCancel:e}));const d=({ref:t,tabView:o,mainSize:e,shrinkMain:s,expandMain:i})=>{const a={small:"smal",medium:"middel",large:"breed"};return n("div",{class:"dso-main-panel",ref:t},!o&&n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte hoofdpaneel: ",a[e]),n("button",{type:"button",class:"shrink",disabled:e==="small",onClick:s},n("span",{class:"sr-only"},"Hoofdpaneel smaller maken"),n("dso-icon",{icon:"chevron-left"})),n("button",{type:"button",class:"expand",disabled:e==="large",onClick:i},n("span",{class:"sr-only"},"Hoofdpaneel breder maken"),n("dso-icon",{icon:"chevron-right"}))),n("div",{class:"main"},n("slot",{name:"main"})))};const p=({ref:t,dsoCloseOverlay:o})=>n("dialog",{class:"overlay",ref:t,onCancel:n=>{n.preventDefault();o(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:o},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const c="*,\n*::after,\n*::before {\n  box-sizing: border-box;\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.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.shrink,\n.expand,\n.overlay-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  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-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: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-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: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-main-panel .main {\n  height: 100%;\n  padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons 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: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > 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.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  height: 100%;\n  margin-block: 0;\n  max-height: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding: 8px 16px;\n  left: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 2rem;\n  font-weight: 700;\n}\n\n.overlay {\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-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  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-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.filterpanel-buttons .cancel-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.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-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.filterpanel-buttons .cancel-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.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-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  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-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.filterpanel-buttons .apply-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.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    height: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host([small]) .dso-main-panel {\n    flex-basis: 375px;\n    min-width: 0;\n    max-width: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([small]) .dso-main-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([medium]) .dso-main-panel {\n    flex-basis: 624px;\n    min-width: 375px;\n    max-width: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([medium]) .dso-main-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([large]) .dso-main-panel {\n    flex-basis: 60%;\n    min-width: 768px;\n    max-width: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([large]) .dso-main-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n    padding-right: 8px;\n  }\n  .dso-main-panel .main {\n    overflow-y: scroll;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    box-shadow: 2px 0 5px #666;\n    margin-inline: 0 auto;\n    max-width: 896px;\n    width: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 896px;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-height: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: left;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-width: auto;\n    padding: 5px 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-bottom: 0;\n    padding-left: 0;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-bottom: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n    font-size: 1.25em;\n    line-height: 1;\n    margin-top: 8px;\n    padding: 8px 16px 7px;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n    font-size: 1rem;\n    margin-top: 4px;\n    padding: 4px 8px 3px;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-bottom: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    width: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\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    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n    font-weight: 300;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding: 11px 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    height: 24px;\n    vertical-align: middle;\n    width: 24px;\n    margin-right: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    height: 24px;\n    vertical-align: middle;\n    width: 24px;\n    margin-left: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-left: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-left: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-left: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-width: 100vw;\n    top: 0;\n    width: 100vw;\n  }\n}";const f=768+40;const h=class{constructor(n){t(this,n);this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=o(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=o(this,"dsoFilterpanelApply",7);this.dsoMainSizeChange=o(this,"dsoMainSizeChange",7);this.mediaCondition=`(min-width: ${f}px)`;this.tabLabelMap={main:"Hoofdpaneel",map:"Kaart"};this.filterpanelSlot=null;this.overlaySlot=null;this.shrinkMain=()=>{this.mainSize=this.mainSize==="large"?"medium":"small"};this.expandMain=()=>{this.mainSize=this.mainSize==="small"?"medium":"large"};this.changeListener=n=>this.tabView=!n.matches;this.filterpanelOpen=false;this.overlayOpen=false;this.initialMainSize=undefined;this.mainSize="large";this.tabView=window.innerWidth<f;this.activeTab="main"}mainSizeWatcher(n,t){var o;this.dsoMainSizeChange.emit({stage:"start",previousSize:t,currentSize:n});(o=this.mainPanel)===null||o===void 0?void 0:o.addEventListener("transitionend",(o=>{if(o.propertyName==="flex-basis"){this.dsoMainSizeChange.emit({stage:"end",previousSize:t,currentSize:n})}}),{once:true})}filterpanelOpenWatcher(n){var t,o;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(t=this.filterpanel)===null||t===void 0?void 0:t.showModal()}else{(o=this.filterpanel)===null||o===void 0?void 0:o.close()}}overlayOpenWatcher(n){var t,o;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(t=this.overlay)===null||t===void 0?void 0:t.showModal()}else{(o=this.overlay)===null||o===void 0?void 0:o.close()}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener);this.filterpanelSlot=this.host.querySelector("div[slot='filterpanel']");this.overlaySlot=this.host.querySelector("div[slot='overlay']")}componentDidLoad(){var n,t;if(this.filterpanelOpen&&this.filterpanelSlot){(n=this.filterpanel)===null||n===void 0?void 0:n.showModal()}if(this.overlayOpen&&this.overlaySlot){(t=this.overlay)===null||t===void 0?void 0:t.showModal()}}componentWillLoad(){if(this.initialMainSize){this.mainSize=this.initialMainSize}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener)}handleFilterpanelApply(n){this.dsoFilterpanelApply.emit({originalEvent:n})}handleFilterpanelCancel(n){this.dsoFilterpanelCancel.emit({originalEvent:n})}render(){return n(e,Object.assign({},{[this.mainSize]:true}),this.tabView&&n("nav",{class:"dso-navbar"},n("ul",{class:"dso-nav dso-nav-sub"},a.map((t=>n("li",{key:t,class:i({"dso-active":this.activeTab===t})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.activeTab=t},this.tabLabelMap[t])))))),(!this.tabView||this.tabView&&this.activeTab==="main")&&n(d,{ref:n=>this.mainPanel=n,tabView:this.tabView,mainSize:this.mainSize,shrinkMain:this.shrinkMain,expandMain:this.expandMain}),n(l,{ref:n=>this.filterpanel=n,onApply:n=>this.handleFilterpanelApply(n),onCancel:n=>this.handleFilterpanelCancel(n)}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{class:"map"},n("slot",{name:"map"})),n(p,{ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})}))}get host(){return s(this)}static get watchers(){return{mainSize:["mainSizeWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};h.style=c;export{h as dso_viewer_grid};
-//# sourceMappingURL=p-f08a5a06.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabs","ViewerGridFilterpanelButtons","onApply","onCancel","h","class","type","onClick","icon","Filterpanel","ref","id","e","preventDefault","name","MainPanel","tabView","mainSize","shrinkMain","expandMain","sizeLabelMap","small","medium","large","disabled","Overlay","dsoCloseOverlay","viewerGridCss","tabViewWidth","ViewerGrid","this","mediaCondition","tabLabelMap","main","map","filterpanelSlot","overlaySlot","changeListener","largeScreen","matches","window","innerWidth","mainSizeWatcher","currentSize","previousSize","dsoMainSizeChange","emit","stage","_a","mainPanel","addEventListener","propertyName","once","filterpanelOpenWatcher","open","console","warn","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","host","querySelector","componentDidLoad","filterpanelOpen","overlayOpen","componentWillLoad","initialMainSize","disconnectedCallback","removeEventListener","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","render","Host","Object","assign","tab","key","clsx","activeTab","element"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n\r\nexport const tabs = [\"main\", \"map\"] as const;\r\n\r\nexport type Tabs = (typeof tabs)[number];\r\n\r\nexport type TabLabelMap = { [key in Tabs]: string };\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { LabelSizeMap, MainSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  ref: ((element: HTMLDivElement | undefined) => void) | undefined;\r\n  tabView: boolean;\r\n  mainSize: MainSize;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  ref,\r\n  tabView,\r\n  mainSize,\r\n  shrinkMain,\r\n  expandMain,\r\n}) => {\r\n  const sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  return (\r\n    <div class=\"dso-main-panel\" ref={ref}>\r\n      {!tabView && (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte hoofdpaneel: {sizeLabelMap[mainSize]}\r\n          </span>\r\n          <button type=\"button\" class=\"shrink\" disabled={mainSize === \"small\"} onClick={shrinkMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n          <button type=\"button\" class=\"expand\" disabled={mainSize === \"large\"} onClick={expandMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        </div>\r\n      )}\r\n      <div class=\"main\">\r\n        <slot name=\"main\" />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &[disabled] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .main {\r\n    height: 100%;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.sizing-buttons {\r\n  left: calc(100% + 1px);\r\n  overflow-x: hidden;\r\n  padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-bottom-right-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  height: 100%;\r\n  margin-block: 0;\r\n  max-height: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host {\r\n    display: flex;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n\r\n  :host([small]) {\r\n    .dso-main-panel {\r\n      flex-basis: core-viewer-grid-variables.$small;\r\n      min-width: 0;\r\n      max-width: core-viewer-grid-variables.$small;\r\n\r\n      @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n        flex-basis: 100vw;\r\n        max-width: 100vw;\r\n        min-width: 0;\r\n        transition: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  :host([medium]) {\r\n    .dso-main-panel {\r\n      flex-basis: core-viewer-grid-variables.$medium;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      max-width: core-viewer-grid-variables.$medium;\r\n\r\n      @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n        flex-basis: 100vw;\r\n        max-width: 100vw;\r\n        min-width: core-viewer-grid-variables.$small;\r\n        transition: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  :host([large]) {\r\n    .dso-main-panel {\r\n      flex-basis: core-viewer-grid-variables.$large;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      max-width: core-viewer-grid-variables.$large-max;\r\n\r\n      @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n        flex-basis: 100vw;\r\n        max-width: 100vw;\r\n        min-width: core-viewer-grid-variables.$large-min;\r\n        transition: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n    padding-right: units.$u1;\r\n\r\n    .main {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n    width: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n      left: core-viewer-grid-variables.$filterpanel-max-width;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n        left: auto;\r\n        width: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    width: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    font-weight: 300;\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-width: 100vw;\r\n    top: 0;\r\n    width: 100vw;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  MainSize,\r\n  TabLabelMap,\r\n  Tabs,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  tabs,\r\n} from \"./viewer-grid.interfaces\";\r\nimport { Filterpanel, MainPanel, Overlay } from \"./components\";\r\n\r\nconst tabViewWidth = 768 + 40;\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewWidth}px)`;\r\n\r\n  private tabLabelMap: TabLabelMap = {\r\n    main: \"Hoofdpaneel\",\r\n    map: \"Kaart\",\r\n  };\r\n\r\n  private mainPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewWidth;\r\n\r\n  @State()\r\n  activeTab: Tabs = \"main\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mainPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent | Event) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent | Event) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabs.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => (this.activeTab = tab)}>\r\n                    {this.tabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"main\")) && (\r\n          <MainPanel\r\n            ref={(element: HTMLDivElement | undefined) => (this.mainPanel = element)}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            shrinkMain={this.shrinkMain}\r\n            expandMain={this.expandMain}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={(e) => this.handleFilterpanelApply(e)}\r\n          onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\">\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/esm/create-identifier-479a4699.js

@@ -1,17 +0,0 @@
-/**
- * Form random hash
- */
-function chr4() {
-  return Math.random().toString(16).slice(-4);
-}
-/**
- * Create random identifier with a prefix
- * @param prefix
- */
-function createIdentifier(prefix) {
-  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
-}
-
-export { createIdentifier as c };
-
-//# sourceMappingURL=create-identifier-479a4699.js.map

package/dist/esm/create-identifier-479a4699.js.map

@@ -1 +0,0 @@
-{"file":"create-identifier-479a4699.js","mappings":"AAAA;;;SAGgB,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"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"],"version":3}

package/dist/types/components/date-picker/date-localization.d.ts

@@ -1,19 +0,0 @@
-type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];
-type DayNames = [string, string, string, string, string, string, string];
-export type DsoLocalizedText = {
-  buttonLabel: string;
-  placeholder: string;
-  selectedDateMessage: string;
-  prevMonthLabel: string;
-  nextMonthLabel: string;
-  monthSelectLabel: string;
-  yearSelectLabel: string;
-  closeLabel: string;
-  keyboardInstruction: string;
-  calendarHeading: string;
-  dayNames: DayNames;
-  monthNames: MonthsNames;
-  monthNamesShort: MonthsNames;
-};
-declare const localization: DsoLocalizedText;
-export default localization;

package/dist/types/components/date-picker/date-picker-day.d.ts

@@ -1,11 +0,0 @@
-import { FunctionalComponent } from "../../stencil-public-runtime";
-export type DatePickerDayProps = {
-  focusedDay: Date;
-  today: Date;
-  day: Date;
-  inRange: boolean;
-  onDaySelect: (event: MouseEvent, day: Date) => void;
-  onKeyboardNavigation: (event: KeyboardEvent) => void;
-  focusedDayRef?: (element: HTMLButtonElement) => void;
-};
-export declare const DatePickerDay: FunctionalComponent<DatePickerDayProps>;

package/dist/types/components/date-picker/date-picker-month.d.ts

@@ -1,20 +0,0 @@
-import { FunctionalComponent } from "../../stencil-public-runtime";
-import { DsoLocalizedText } from "./date-localization";
-import { DatePickerDayProps } from "./date-picker-day";
-import { DaysOfWeek } from "./date-utils";
-type DatePickerMonthProps = {
-  selectedDate: Date | undefined;
-  focusedDate: Date;
-  labelledById: string;
-  localization: DsoLocalizedText;
-  firstDayOfWeek: DaysOfWeek;
-  min?: Date;
-  max?: Date;
-  onDateSelect: DatePickerDayProps["onDaySelect"];
-  onKeyboardNavigation: DatePickerDayProps["onKeyboardNavigation"];
-  focusedDayRef: (element: HTMLButtonElement) => void;
-  onFocusIn?: (e: FocusEvent) => void;
-  onMouseDown?: (e: MouseEvent) => void;
-};
-export declare const DatePickerMonth: FunctionalComponent<DatePickerMonthProps>;
-export {};

package/dist/types/components/date-picker/utils/month-range.d.ts

@@ -1,2 +0,0 @@
-import { DsoLocalizedText } from "../date-localization";
-export declare function monthRange(localization: DsoLocalizedText, selectedYear: number, minDate?: Date, maxDate?: Date): string[];

package/dist/types/components/date-picker/utils/range.d.ts

@@ -1 +0,0 @@
-export declare function range(from: number, to: number): number[];