@dso-toolkit/core 55.0.0 → 56.0.0

package/dist/dso-toolkit/p-39f6447d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","Alert","render","status","statusMap","get","this","Error","h","class","clsx","role","roleAlert","undefined","icon","Map","annotationButtonCss","AnnotationButton","handleClick","e","dsoClick","emit","originalEvent","open","type","identifier","toString","onClick","badgeCss","Badge","labelCss","resizeObserver","ResizeObserver","debounce","entries","forEach","target","isDsoLabelComponent","_truncateLabel","element","tagName","hasEllipses","el","scrollWidth","clientWidth","Label","keydownListenerActive","keyDownListener","event","key","textHover","textFocus","watchTruncate","truncate","startTruncate","stopTruncate","watchTooltipActive","document","addEventListener","removeEventListener","async","setTimeout","isTruncated","labelContent","syncLabelText","labelText","host","textContent","componentDidLoad","removable","startMutationObserver","disconnectedCallback","mutationObserver","MutationObserver","observe","characterData","subtree","attributes","unobserve","Fragment","compact","removeHover","removeFocus","name","ref","tabindex","onMouseEnter","onMouseLeave","onFocus","onBlur","dsoRemoveClick","stateless","id","active","position","strategy","getNodeName","node","Element","localName","nodeName","includes","substring","indexOf","OzonContentAlNode","constructor","mapNodeToJsx","path","nestedAl","some","n","content","childNodes","OzonContentBronNode","OzonContentDocumentNode","OzonContentExtRefNode","href","getAttribute","rel","OzonContentFallbackNode","Bijschrift","bijschrift","bron","inhoud","OzonContentFiguurNode","setImageDimensions","imageElement","schaal","naturalHeight","naturalWidth","height","width","onImageLoad","HTMLImageElement","Array","from","titel","_a","find","illustratieNode","bijschriftNode","illustratie","naam","breedte","hoogte","uitlijning","alt","locatie","_b","slot","src","_c","_f","_e","_d","onLoad","Number","OzonContentInhoudNode","OzonContentInlineTekstAfbeeldingNode","OzonContentInlineNodes","Tag","OzonContentIntIoRefNode","emitAnchorClick","intRefOnClick","preventDefault","currentTarget","HTMLAnchorElement","documentComponent","OzonContentIntRefNode","OzonContentLijstNode","aanhef","sluiting","listItems","filter","map","item","itemNodes","liNummer","OzonContentNieuweTekstNode","OzonContentNootNode","handles","identify","state","openNoteId","setState","noteId","console","error","noteControlsId","nootNummer","descriptive","querySelectorAll","OzonContentOpschriftNode","mapColspecs","count","nodeList","elements","totalWidth","getTotalWidth","columns","index","colNumber","number","parseInt","getWidth","reduce","replace","colWidth","isNaN","match","Math","round","Colgroup","colspecs","length","colspec","style","getData","cell","moreRows","nameStart","nameEnd","getColspan","colspecStart","c","colspecEnd","colspan","Cell","context","td","rowSpan","colSpan","Object","assign","Rows","rows","row","children","mapData","tgroup","querySelector","colAttribute","columnCount","caption","headRows","bodyRows","editAction","OzonContentTableNode","uuidv4","OzonContentTextNode","OzonContentVerwijderdeTekstNode","Mapper","mappers","skip","t","m","push","fallbackNode","domParser","DOMParser","findMapper","isArray","NodeList","mapper","identity","call","s","transform","xml","cache","parseFromString","xmlDocument","getRootNode","ozonContentCss","OzonContent","handleHostOnClick","interactive","doIt","composedPath","eventTarget","HTMLElement","isTabbable","dsoAnchorClick","transformed","deleted","Host"],"sources":["./src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","./src/components/alert/alert.tsx","./src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","./src/components/annotation-button/annotation-button.tsx","./src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/label/label.scss?tag=dso-label&encapsulation=shadow","./src/components/label/label.tsx","./src/components/ozon-content/get-node-name.function.ts","./src/components/ozon-content/nodes/al.node.tsx","./src/components/ozon-content/nodes/bron.node.tsx","./src/components/ozon-content/nodes/document.node.tsx","./src/components/ozon-content/nodes/ext-ref.node.tsx","./src/components/ozon-content/nodes/fallback.node.tsx","./src/components/ozon-content/nodes/figuur.node.tsx","./src/components/ozon-content/nodes/inhoud.node.tsx","./src/components/ozon-content/nodes/inline-tekst-afbeelding.node.tsx","./src/components/ozon-content/nodes/inline.nodes.tsx","./src/components/ozon-content/nodes/int-io-ref.node.tsx","./src/components/ozon-content/nodes/int-ref.node.tsx","./src/components/ozon-content/nodes/lijst.node.tsx","./src/components/ozon-content/nodes/nieuwe-tekst.node.tsx","./src/components/ozon-content/nodes/noot.node.tsx","./src/components/ozon-content/nodes/opschrift.node.tsx","./src/components/ozon-content/nodes/table.node/colspec/colspec-mapper.ts","./src/components/ozon-content/nodes/table.node/table-colgroup.tsx","./src/components/ozon-content/nodes/table.node/table-cell.tsx","./src/components/ozon-content/nodes/table.node/table-rows.tsx","./src/components/ozon-content/nodes/table.node/table.node.tsx","./src/components/ozon-content/nodes/text.node.tsx","./src/components/ozon-content/nodes/verwijderde-tekst.node.tsx","./src/components/ozon-content/ozon-content-mapper.tsx","./src/components/ozon-content/ozon-content.scss?tag=dso-ozon-content&encapsulation=shadow","./src/components/ozon-content/ozon-content.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-top: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n  @include alert.root();\r\n\r\n  dso-icon {\r\n    @include alert.icon-position();\r\n\r\n    height: units.$u4;\r\n    width: units.$u4;\r\n  }\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop()\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n        <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n\r\ndso-annotation-button {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, Prop, EventEmitter } from \"@stencil/core\";\r\n\r\nexport interface AnnotationButtonClickEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string | undefined;\r\n\r\n  /**\r\n   * Set to true when the annotation is open.\r\n   */\r\n  @Prop()\r\n  open = false;\r\n\r\n  /**\r\n   * Emitted when user activates the button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationButtonClickEvent>;\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.dsoClick.emit({ originalEvent: e, open: !this.open });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={this.open.toString()}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon=\"label\"></dso-icon>\r\n        <span class=\"sr-only\">Toelichting bekijken</span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-badge {\r\n  @include badge.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\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/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-width: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { debounce } from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150)\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private keydownListenerActive = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated?: boolean;\r\n\r\n  @State()\r\n  labelText: string | null = null;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Watch(\"textHover\")\r\n  @Watch(\"textFocus\")\r\n  watchTooltipActive() {\r\n    if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {\r\n      document.addEventListener(\"keydown\", this.keyDownListener);\r\n      this.keydownListenerActive = true;\r\n    }\r\n\r\n    if (!this.textHover && !this.textFocus) {\r\n      document.removeEventListener(\"keydown\", this.keyDownListener);\r\n      this.keydownListenerActive = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    if (this.mutationObserver) {\r\n      return;\r\n    }\r\n\r\n    this.mutationObserver = new MutationObserver((entries) => entries.forEach(() => this.syncLabelText()));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.labelText = this.host.textContent;\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    document.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n    resizeObserver.unobserve(this.host);\r\n    this.isTruncated = undefined;\r\n    this.keydownListenerActive = false;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","export function getNodeName(node: Node): string {\r\n  if (node instanceof Element) {\r\n    return node.localName;\r\n  }\r\n\r\n  if (node.nodeName.includes(\":\")) {\r\n    return node.nodeName.substring(node.nodeName.indexOf(\":\") + 1);\r\n  }\r\n\r\n  return node.nodeName;\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentAlNode implements OzonContentNode {\r\n  name = \"Al\";\r\n\r\n  render(node: Element, { mapNodeToJsx, path }: OzonContentNodeContext) {\r\n    const nestedAl = path.some((n) => {\r\n      const nodeName = getNodeName(n);\r\n\r\n      return nodeName === \"Al\" || nodeName === \"Opschrift\";\r\n    });\r\n\r\n    const content = mapNodeToJsx(node.childNodes);\r\n\r\n    return nestedAl ? <span role=\"paragraph\">{content}</span> : <p>{content}</p>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentBronNode implements OzonContentNode {\r\n  name = \"Bron\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <span class=\"dso-ozon-bron\">{mapNodeToJsx(node.childNodes)}</span>;\r\n  }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentDocumentNode implements OzonContentNode {\r\n  name = \"#document\";\r\n\r\n  render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentExtRefNode implements OzonContentNode {\r\n  name = [\"ExtRef\", \"ExtIoRef\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const href = node.tagName === \"ExtIoRef\" ? node.getAttribute(\"href\") : node.getAttribute(\"ref\");\r\n\r\n    return (\r\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href={href ?? undefined}>\r\n        <span class=\"sr-only\">opent in nieuw venster </span>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentFallbackNode implements OzonContentNode {\r\n  // This name does not match any elements\r\n  name = [\"<fallback>\"];\r\n\r\n  render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <span class={`fallback od-${getNodeName(node)}`}>{mapNodeToJsx(node.childNodes)}</span>;\r\n  }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\ntype BijschriftProps = {\r\n  bijschrift?: IBijschrift;\r\n  bron?: ChildNode;\r\n  mapNodeToJsx: (node: Node | NodeList | Node[]) => JSX.Element;\r\n};\r\n\r\ninterface IBijschrift {\r\n  inhoud: NodeListOf<ChildNode>;\r\n  locatie: string;\r\n}\r\n\r\nconst Bijschrift = ({ bijschrift, bron, mapNodeToJsx }: BijschriftProps): HTMLSpanElement => {\r\n  return (\r\n    <span class=\"figuur-bijschrift\">\r\n      {bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud)}\r\n      {bron && (\r\n        <Fragment>\r\n          {`${bijschrift ? \" \" : \"\"}(bron: `}\r\n          {mapNodeToJsx(bron)})\r\n        </Fragment>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n\r\nexport class OzonContentFiguurNode implements OzonContentNode {\r\n  name = [\"Figuur\"];\r\n\r\n  setImageDimensions(imageElement: HTMLImageElement, schaal: number) {\r\n    const { naturalHeight, naturalWidth } = imageElement;\r\n\r\n    imageElement.height = naturalHeight * (schaal / 100);\r\n    imageElement.width = naturalWidth * (schaal / 100);\r\n  }\r\n\r\n  onImageLoad(event: Event, schaal?: number) {\r\n    if (event.target instanceof HTMLImageElement && schaal) {\r\n      this.setImageDimensions(event.target, schaal);\r\n    }\r\n  }\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const childNodes = Array.from(node.childNodes);\r\n    const titel = childNodes.find((n) => getNodeName(n) === \"Titel\")?.textContent;\r\n    const bron = childNodes.find((n) => getNodeName(n) === \"Bron\");\r\n\r\n    const illustratieNode = childNodes.find((n) => getNodeName(n) === \"Illustratie\");\r\n    const bijschriftNode = childNodes.find((n) => getNodeName(n) === \"Bijschrift\");\r\n\r\n    if (illustratieNode instanceof Element) {\r\n      const illustratie = {\r\n        naam: illustratieNode.getAttribute(\"naam\"),\r\n        breedte: illustratieNode.getAttribute(\"breedte\"),\r\n        hoogte: illustratieNode.getAttribute(\"hoogte\"),\r\n        uitlijning: illustratieNode.getAttribute(\"uitlijning\"),\r\n        alt: illustratieNode.getAttribute(\"alt\"),\r\n        schaal: illustratieNode.getAttribute(\"schaal\"),\r\n      };\r\n\r\n      const bijschrift =\r\n        bijschriftNode instanceof Element\r\n          ? {\r\n              inhoud: bijschriftNode.childNodes,\r\n              locatie: bijschriftNode.getAttribute(\"locatie\") ?? \"onder\",\r\n            }\r\n          : undefined;\r\n\r\n      return (\r\n        <div class={`dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : \"onder\"}`}>\r\n          {titel && <span class=\"figuur-titel\">{titel}</span>}\r\n          {bijschrift?.locatie === \"boven\" && (\r\n            <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n          )}\r\n          <dso-image-overlay>\r\n            {titel && (\r\n              <div slot=\"titel\">\r\n                <span>{titel}</span>\r\n              </div>\r\n            )}\r\n            <img\r\n              src={illustratie.naam ?? undefined}\r\n              alt={illustratie.alt ?? titel ?? illustratie.naam ?? undefined}\r\n              onLoad={(event: Event) => this.onImageLoad(event, Number(illustratie.schaal))}\r\n            />\r\n            {(bijschrift || bron) && (\r\n              <div slot=\"bijschrift\">\r\n                <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n              </div>\r\n            )}\r\n          </dso-image-overlay>\r\n          {(bijschrift?.locatie === \"onder\" || (!bijschrift && bron)) && (\r\n            <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInhoudNode implements OzonContentNode {\r\n  name = [\"Inhoud\", \"ContainerBlocksType\", \"BlockMixedcontentMetMaximaleInlinesMarkersPopupsType\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <div class=\"dso-rich-content\">{mapNodeToJsx(node.childNodes)}</div>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineTekstAfbeeldingNode implements OzonContentNode {\r\n  name = [\"InlineTekstAfbeelding\", \"Illustratie\"];\r\n\r\n  render(node: Element) {\r\n    return (\r\n      <img\r\n        src={node.getAttribute(\"naam\") ?? undefined}\r\n        alt={node.getAttribute(\"naam\") ?? undefined}\r\n        height={node.getAttribute(\"hoogte\") ?? undefined}\r\n        width={node.getAttribute(\"breedte\") ?? undefined}\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineNodes implements OzonContentNode {\r\n  name = [\"sub\", \"sup\", \"strong\", \"b\", \"u\", \"i\", \"br\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    if (node.localName === \"br\") {\r\n      return <br />;\r\n    }\r\n\r\n    const Tag = node.localName;\r\n\r\n    return <Tag>{mapNodeToJsx(node.childNodes)}</Tag>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntIoRefNode implements OzonContentNode {\r\n  name = \"IntIoRef\";\r\n\r\n  render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n    const ref = node.getAttribute(\"ref\");\r\n    if (!ref) {\r\n      return mapNodeToJsx(node.childNodes);\r\n    }\r\n\r\n    const intRefOnClick = (event: MouseEvent) => {\r\n      event.preventDefault();\r\n\r\n      const target = event.currentTarget;\r\n      if (!(target instanceof HTMLAnchorElement)) {\r\n        return;\r\n      }\r\n\r\n      const { href } = target;\r\n\r\n      emitAnchorClick({\r\n        node: this.name,\r\n        href,\r\n        documentComponent: ref,\r\n        originalEvent: event,\r\n      });\r\n    };\r\n\r\n    return (\r\n      <a href={`#${ref}`} onClick={intRefOnClick}>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntRefNode implements OzonContentNode {\r\n  name = \"IntRef\";\r\n\r\n  render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n    const ref = node.getAttribute(\"ref\");\r\n    if (!ref) {\r\n      return mapNodeToJsx(node.childNodes);\r\n    }\r\n\r\n    const intRefOnClick = (event: MouseEvent) => {\r\n      event.preventDefault();\r\n\r\n      const target = event.currentTarget;\r\n      if (!(target instanceof HTMLAnchorElement)) {\r\n        return;\r\n      }\r\n\r\n      const { href } = target;\r\n\r\n      emitAnchorClick({\r\n        node: this.name,\r\n        href,\r\n        documentComponent: ref,\r\n        originalEvent: event,\r\n      });\r\n    };\r\n\r\n    return (\r\n      <a href={`#${ref}`} onClick={intRefOnClick}>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentLijstNode implements OzonContentNode {\r\n  name = \"Lijst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const childNodes = Array.from(node.childNodes);\r\n    const aanhef = childNodes.find((n) => getNodeName(n) === \"Lijstaanhef\");\r\n    const sluiting = childNodes.find((n) => getNodeName(n) === \"Lijstsluiting\");\r\n    const listItems = childNodes.filter((n) => getNodeName(n) === \"Li\");\r\n\r\n    return (\r\n      <div class=\"dso-ozon-lijst od-Lijst\">\r\n        {aanhef && mapNodeToJsx(aanhef)}\r\n        <ul class={node.getAttribute(\"type\") ?? \"\"}>\r\n          {listItems.map((item) => {\r\n            const itemNodes = Array.from(item.childNodes);\r\n            const liNummer = itemNodes.find((n) => getNodeName(n) === \"LiNummer\")?.childNodes;\r\n\r\n            return (\r\n              <li class=\"od-Li\">\r\n                {liNummer && <span class=\"od-LiNummer\">{mapNodeToJsx(liNummer)}</span>}\r\n                {mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== \"LiNummer\"))}\r\n              </li>\r\n            );\r\n          })}\r\n        </ul>\r\n        {sluiting && mapNodeToJsx(sluiting)}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNieuweTekstNode implements OzonContentNode {\r\n  name = \"NieuweTekst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <ins>{mapNodeToJsx(node.childNodes)}</ins>;\r\n  }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNootNode implements OzonContentNode {\r\n  name = \"Noot\";\r\n\r\n  handles = [\"NootNummer\"];\r\n\r\n  identify(): string | undefined {\r\n    return \"Noot\";\r\n  }\r\n\r\n  render(node: Element, { mapNodeToJsx, state: openNoteId, setState }: OzonContentNodeContext<string | undefined>) {\r\n    const noteId = node.getAttribute(\"id\");\r\n    if (!noteId) {\r\n      console.error(\"Noot node without id\", node);\r\n\r\n      return <Fragment />;\r\n    }\r\n\r\n    const noteControlsId = `dso-ozon-note-${noteId}`;\r\n\r\n    const childNodes = Array.from(node.childNodes);\r\n    const nootNummer = childNodes.find((n) => getNodeName(n) === \"NootNummer\")?.textContent ?? noteId;\r\n\r\n    return (\r\n      <>\r\n        <sup>\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle-note\"\r\n            aria-describedby={noteControlsId}\r\n            onClick={() => setState?.(openNoteId === noteId ? undefined : noteId)}\r\n            onBlur={() => setState?.(undefined)}\r\n            aria-expanded={openNoteId === noteId ? \"true\" : \"false\"}\r\n          >\r\n            {nootNummer}\r\n          </button>\r\n        </sup>\r\n        <dso-tooltip active={openNoteId === noteId} id={noteControlsId} stateless descriptive>\r\n          <span role=\"section\">{mapNodeToJsx(Array.from(node.querySelectorAll(\":scope > Al\")))}</span>\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentOpschriftNode implements OzonContentNode {\r\n  name = \"Opschrift\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n  }\r\n}\r\n","import { Colspecs } from \"./colspec.interface\";\r\n\r\nexport function mapColspecs(count: number, nodeList: NodeListOf<Element>): Colspecs {\r\n  const elements = Array.from(nodeList);\r\n  const totalWidth = getTotalWidth(elements);\r\n\r\n  return {\r\n    totalWidth,\r\n    count,\r\n    columns: elements.map((element, index) => {\r\n      const colNumber = element.getAttribute(\"colnum\");\r\n\r\n      return {\r\n        name: element.getAttribute(\"colname\") ?? \"\",\r\n        number: colNumber ? parseInt(colNumber, 10) : index + 1,\r\n        width: getWidth(totalWidth, element),\r\n      };\r\n    }),\r\n  };\r\n}\r\n\r\nfunction getTotalWidth(elements: Element[]): number {\r\n  return elements.reduce((totalWidth, element) => {\r\n    const width = element.getAttribute(\"colwidth\")?.replace(/[^0-9]/, \"\") ?? \"\";\r\n    const colWidth = parseInt(width, 10);\r\n\r\n    return totalWidth + (isNaN(colWidth) ? 0 : colWidth);\r\n  }, 0);\r\n}\r\n\r\nfunction getWidth(totalWidth: number, element: Element): string | undefined {\r\n  const width = element.getAttribute(\"colwidth\");\r\n\r\n  if (!width) {\r\n    return undefined;\r\n  }\r\n\r\n  if (width === \"*\") {\r\n    return \"100%\";\r\n  }\r\n\r\n  if (width.includes(\"*\") || width.match(/^[\\d+]$/)) {\r\n    const colWidth = parseInt(width.replace(/[^0-9]/, \"\"), 10);\r\n\r\n    return `${Math.round((colWidth / totalWidth) * 100)}%`;\r\n  }\r\n\r\n  return width;\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nexport const Colgroup: FunctionalComponent<{ colspecs: Colspecs }> = ({ colspecs }) =>\r\n  colspecs.columns.length > 0 ? (\r\n    <colgroup>\r\n      {colspecs.columns.map((colspec) => (\r\n        <col style={{ width: colspec.width }} />\r\n      ))}\r\n    </colgroup>\r\n  ) : (\r\n    <Fragment />\r\n  );\r\n","import { FunctionalComponent } from \"@stencil/core\";\r\nimport { h, JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nfunction getData(cell: Element) {\r\n  return {\r\n    moreRows: cell.getAttribute(\"morerows\"),\r\n    nameStart: cell.getAttribute(\"namest\"),\r\n    nameEnd: cell.getAttribute(\"nameend\"),\r\n  };\r\n}\r\n\r\nfunction getColspan({ columns }: Colspecs, nameStart: string, nameEnd: string): number | undefined {\r\n  const colspecStart = columns.find((c) => c.name === nameStart);\r\n  const colspecEnd = columns.find((c) => c.name === nameEnd);\r\n  if (!colspecStart || !colspecEnd) {\r\n    return undefined;\r\n  }\r\n\r\n  const colspan = colspecEnd.number - colspecStart.number + 1;\r\n\r\n  return colspan === 1 ? undefined : colspan;\r\n}\r\n\r\nexport const Cell: FunctionalComponent<{\r\n  context: OzonContentNodeContext;\r\n  colspecs: Colspecs | undefined;\r\n  cell: Element;\r\n}> = ({ context: { mapNodeToJsx }, colspecs, cell }) => {\r\n  const { moreRows, nameStart, nameEnd } = getData(cell);\r\n\r\n  const td: JSXBase.TdHTMLAttributes<HTMLTableCellElement> = {\r\n    rowSpan: moreRows ? parseInt(moreRows, 10) + 1 : undefined,\r\n    colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined,\r\n  };\r\n\r\n  return <td {...td}>{mapNodeToJsx(cell.childNodes)}</td>;\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\nimport { Cell } from \"./table-cell\";\r\n\r\nexport const Rows: FunctionalComponent<{\r\n  context: OzonContentNodeContext;\r\n  colspecs: Colspecs | undefined;\r\n  rows: Element[];\r\n}> = ({ context, colspecs, rows }) => {\r\n  return (\r\n    <>\r\n      {rows.map((row) => (\r\n        <tr>\r\n          {Array.from(row.children).map((cell) => (\r\n            <Cell cell={cell} colspecs={colspecs} context={context} />\r\n          ))}\r\n        </tr>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n","import { h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getNodeName } from \"../../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../../ozon-content-node.interface\";\r\n\r\nimport { mapColspecs } from \"./colspec/colspec-mapper\";\r\nimport { Colgroup } from \"./table-colgroup\";\r\nimport { Rows } from \"./table-rows\";\r\n\r\nfunction mapData(node: Element) {\r\n  const tgroup = node.querySelector(\":scope > tgroup\");\r\n  const colAttribute = tgroup?.getAttribute(\"cols\") ?? undefined;\r\n  const columnCount = colAttribute ? parseInt(colAttribute, 10) : undefined;\r\n\r\n  return {\r\n    caption: node.querySelector(\":scope > title\")?.textContent ?? undefined,\r\n    colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(\":scope > colspec\")) : undefined,\r\n    headRows: Array.from(node.querySelectorAll(\":scope > tgroup > thead > row\")),\r\n    bodyRows: Array.from(node.querySelectorAll(\":scope > tgroup > tbody > row\")),\r\n    editAction: node.getAttribute(\"wijzigactie\"),\r\n  };\r\n}\r\n\r\nexport class OzonContentTableNode implements OzonContentNode {\r\n  name = \"table\";\r\n\r\n  handles = [\"title\", \"tgroup\", \"colspec\", \"thead\", \"tbody\", \"row\", \"cell\"];\r\n\r\n  id = uuidv4();\r\n\r\n  render(node: Element, context: OzonContentNodeContext) {\r\n    const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);\r\n\r\n    const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === \"Bron\");\r\n\r\n    return (\r\n      <dso-table>\r\n        <table\r\n          class={clsx(\"table dso-table-vertical-lines\", {\r\n            \"dso-del\": editAction === \"verwijder\",\r\n            \"dso-ins\": editAction === \"voegtoe\",\r\n          })}\r\n          {...(bron ? { \"aria-describedby\": this.id } : {})}\r\n        >\r\n          {caption && <caption>{caption}</caption>}\r\n          {colspecs && <Colgroup colspecs={colspecs} />}\r\n          {headRows.length > 0 && (\r\n            <thead>\r\n              <Rows rows={headRows} colspecs={colspecs} context={context}></Rows>\r\n            </thead>\r\n          )}\r\n          {bodyRows.length > 0 && (\r\n            <tbody>\r\n              <Rows rows={bodyRows} colspecs={colspecs} context={context}></Rows>\r\n            </tbody>\r\n          )}\r\n        </table>\r\n        {bron && <div id={this.id}>{context.mapNodeToJsx(bron)}</div>}\r\n      </dso-table>\r\n    );\r\n  }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentTextNode implements OzonContentNode {\r\n  name = \"#text\";\r\n\r\n  render(node: Node) {\r\n    return <Fragment>{node.textContent}</Fragment>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentVerwijderdeTekstNode implements OzonContentNode {\r\n  name = \"VerwijderdeTekst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <del>{mapNodeToJsx(node.childNodes)}</del>;\r\n  }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"./get-node-name.function\";\r\nimport { OzonContentAlNode } from \"./nodes/al.node\";\r\nimport { OzonContentBronNode } from \"./nodes/bron.node\";\r\nimport { OzonContentDocumentNode } from \"./nodes/document.node\";\r\nimport { OzonContentExtRefNode } from \"./nodes/ext-ref.node\";\r\nimport { OzonContentFallbackNode } from \"./nodes/fallback.node\";\r\nimport { OzonContentFiguurNode } from \"./nodes/figuur.node\";\r\nimport { OzonContentInhoudNode } from \"./nodes/inhoud.node\";\r\nimport { OzonContentInlineTekstAfbeeldingNode } from \"./nodes/inline-tekst-afbeelding.node\";\r\nimport { OzonContentInlineNodes } from \"./nodes/inline.nodes\";\r\nimport { OzonContentIntIoRefNode } from \"./nodes/int-io-ref.node\";\r\nimport { OzonContentIntRefNode } from \"./nodes/int-ref.node\";\r\nimport { OzonContentLijstNode } from \"./nodes/lijst.node\";\r\nimport { OzonContentNieuweTekstNode } from \"./nodes/nieuwe-tekst.node\";\r\nimport { OzonContentNootNode } from \"./nodes/noot.node\";\r\nimport { OzonContentOpschriftNode } from \"./nodes/opschrift.node\";\r\nimport { OzonContentTableNode } from \"./nodes/table.node\";\r\nimport { OzonContentTextNode } from \"./nodes/text.node\";\r\nimport { OzonContentVerwijderdeTekstNode } from \"./nodes/verwijderde-tekst.node\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentNode } from \"./ozon-content-node.interface\";\r\n\r\nexport class Mapper {\r\n  private cache: { xml: string; document: Document } | undefined;\r\n\r\n  private mappers: OzonContentNode[] = [\r\n    new OzonContentTextNode(),\r\n    new OzonContentDocumentNode(),\r\n    new OzonContentInhoudNode(),\r\n    new OzonContentOpschriftNode(),\r\n    new OzonContentIntRefNode(),\r\n    new OzonContentExtRefNode(),\r\n    new OzonContentAlNode(),\r\n    new OzonContentInlineNodes(),\r\n    new OzonContentInlineTekstAfbeeldingNode(),\r\n    new OzonContentNootNode(),\r\n    new OzonContentTableNode(),\r\n    new OzonContentIntIoRefNode(),\r\n    new OzonContentFiguurNode(),\r\n    new OzonContentLijstNode(),\r\n    new OzonContentBronNode(),\r\n    new OzonContentNieuweTekstNode(),\r\n    new OzonContentVerwijderdeTekstNode(),\r\n  ];\r\n\r\n  private skip = this.mappers.reduce<string[]>((t, m) => {\r\n    if (m.handles) {\r\n      t.push(...m.handles);\r\n    }\r\n\r\n    return t;\r\n  }, []);\r\n\r\n  private fallbackNode = new OzonContentFallbackNode();\r\n\r\n  private domParser = new DOMParser();\r\n\r\n  private findMapper(name: string): OzonContentNode | undefined {\r\n    if (this.skip.includes(name)) {\r\n      return undefined;\r\n    }\r\n\r\n    return (\r\n      this.mappers.find((m) => {\r\n        if (Array.isArray(m.name)) {\r\n          return m.name.includes(name);\r\n        }\r\n\r\n        return m.name === name;\r\n      }) ?? this.fallbackNode\r\n    );\r\n  }\r\n\r\n  mapNodeToJsx(node: Node | Node[] | NodeList, context: OzonContentContext, path: Node[]): JSX.Element {\r\n    if (node instanceof NodeList) {\r\n      return <Fragment>{Array.from(node).map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n    }\r\n\r\n    if (Array.isArray(node)) {\r\n      return <Fragment>{node.map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n    }\r\n\r\n    const nodeName = getNodeName(node);\r\n    const mapper = this.findMapper(nodeName);\r\n    if (!mapper) {\r\n      return <Fragment />;\r\n    }\r\n\r\n    const identity = mapper.identify?.(node);\r\n\r\n    const state = identity ? context.state[identity] : undefined;\r\n    const setState = identity ? (s: unknown) => context.setState({ ...context.state, [identity]: s }) : undefined;\r\n\r\n    return mapper.render(node, {\r\n      mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),\r\n      emitAnchorClick: context.emitAnchorClick,\r\n      setState,\r\n      state,\r\n      path,\r\n    });\r\n  }\r\n\r\n  transform(xml: string, context: OzonContentContext): JSX.Element {\r\n    if (!xml) {\r\n      return <Fragment />;\r\n    }\r\n\r\n    if (!this.cache || this.cache.xml !== xml) {\r\n      const document = this.domParser.parseFromString(xml, \"text/xml\");\r\n      if (document.querySelector(\"html > body > parsererror\")) {\r\n        console.error(document);\r\n\r\n        return <Fragment />;\r\n      }\r\n\r\n      this.cache = { xml, document };\r\n    }\r\n\r\n    const xmlDocument = this.cache.document;\r\n\r\n    return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);\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/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n\r\n:host(:not([inline])) {\r\n  display: block;\r\n}\r\n\r\n:host([inline]) {\r\n  display: inline;\r\n}\r\n\r\n:host([deleted]) {\r\n  * {\r\n    text-decoration: line-through !important;\r\n  }\r\n}\r\n\r\n:host([interactive]) {\r\n  @include anchor.root($is-html-a-element: false);\r\n\r\n  color: colors.$bosgroen;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n}\r\n\r\n:host([interactive=\"sub\"]) {\r\n  color: colors.$grijs-90;\r\n}\r\n\r\n.sr-only,\r\n.deleted-start,\r\n.deleted-end {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton.toggle-note {\r\n  @include button.tertiary($modifiers: false);\r\n}\r\n\r\nspan[role=\"section\"],\r\nspan[role=\"paragraph\"] {\r\n  display: block;\r\n}\r\n\r\n:host(:not([inline])) .fallback {\r\n  display: block;\r\n}\r\n\r\na {\r\n  @include anchor.root();\r\n}\r\n\r\n// Styling below copied from DSO Viewer 20211011\r\n\r\n.od-Term {\r\n  font-weight: 700;\r\n}\r\n\r\n.od-Definitie,\r\n.od-Tussenkop {\r\n  font-style: italic;\r\n}\r\n\r\n.od-Inhoud,\r\n.od-Inhoud > .od-Lijst,\r\n.od-IntIoRef,\r\n.od-Lidnr,\r\n.od-LiNr,\r\n.od-Opschrift,\r\n.od-Tussenkop {\r\n  display: inline;\r\n}\r\n\r\n.od-Al {\r\n  margin-bottom: 0.75em;\r\n}\r\n\r\n.od-IntIoRef {\r\n  border-bottom: 1px dotted;\r\n}\r\n\r\n.dso-ozon-bron {\r\n  font-style: italic;\r\n  font-size: 0.75rem;\r\n}\r\n\r\n.dso-ozon-figuur {\r\n  margin-bottom: units.$u2;\r\n\r\n  .figuur-bijschrift {\r\n    display: block;\r\n    font-size: 0.75rem;\r\n    font-style: italic;\r\n  }\r\n\r\n  &.bijschrift-boven {\r\n    .figuur-bijschrift {\r\n      padding-bottom: 0.25rem;\r\n    }\r\n  }\r\n\r\n  &.bijschrift-onder {\r\n    .figuur-bijschrift {\r\n      padding-top: 0.25rem;\r\n    }\r\n  }\r\n\r\n  .figuur-titel {\r\n    color: colors.$mauve;\r\n    display: block;\r\n    font-weight: 500;\r\n    padding-bottom: 0.5rem;\r\n  }\r\n}\r\n\r\n.dso-ozon-lijst {\r\n  span.od-Lijstaanhef,\r\n  span.od-Lijstsluiting {\r\n    margin-bottom: units.$ru2;\r\n  }\r\n\r\n  ul {\r\n    &.expliciet {\r\n      list-style: none;\r\n\r\n      > .od-Li {\r\n        position: relative;\r\n\r\n        > span.od-LiNummer {\r\n          position: absolute;\r\n          left: units.$u6 * -1 + 4;\r\n          text-align: right;\r\n          width: units.$u5;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.od-Tabel thead {\r\n  font-weight: 600;\r\n}\r\n\r\n.od-Kadertekst {\r\n  border: 1px solid #e5e5e5;\r\n  margin-bottom: 1rem;\r\n  padding: 1rem;\r\n}\r\n\r\n.dso-del {\r\n  background-color: colors.$danger-bg-color;\r\n  color: colors.$zwart;\r\n  text-decoration: line-through;\r\n\r\n  a {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.dso-ins {\r\n  background-color: colors.$success-bg-color;\r\n  box-shadow: insert.$insert-box-shadow;\r\n  color: colors.$zwart;\r\n\r\n  a {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.dso-rich-content {\r\n  @include rich-content.children();\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Host, JSX } from \"@stencil/core\";\r\nimport { isTabbable } from \"tabbable\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentAnchorClick, OzonContentClick } from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content: string | undefined;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * Marks content as deleted using visual and accessible clues.\r\n   */\r\n  @Prop({ reflect: true })\r\n  deleted = false;\r\n\r\n  /**\r\n   * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\r\n   *\r\n   * **Do not** use this without an accessible companion element! `interactive` is only\r\n   * meant to ease the use of the companion element for mouse/touch users.\r\n   *\r\n   * * `true`: Interactive anchor-look-alike\r\n   * * `\"sub\"`: Interactive anchor-look-alike for sub navigation\r\n   * * `false | undefined`: Disabled\r\n   */\r\n  @Prop({ reflect: true })\r\n  interactive: \"sub\" | \"\" | boolean = false;\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  /**\r\n   * Emitted when `<a>` is clicked.\r\n   */\r\n  @Event()\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClick>;\r\n\r\n  /**\r\n   * These events are only emitted when the component is `interactive`.\r\n   */\r\n  @Event()\r\n  dsoClick!: EventEmitter<OzonContentClick>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoOzonContentElement;\r\n\r\n  private mapper = new Mapper();\r\n\r\n  private handleHostOnClick(e: UIEvent) {\r\n    // '' is `true`: <dso-ozon-content interactive>\r\n    if (this.interactive !== \"\" && !this.interactive) {\r\n      return;\r\n    }\r\n\r\n    const doIt =\r\n      e\r\n        .composedPath()\r\n        .find(\r\n          (eventTarget) => eventTarget === this.host || (eventTarget instanceof HTMLElement && isTabbable(eventTarget))\r\n        ) === this.host;\r\n\r\n    if (doIt) {\r\n      this.dsoClick.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      setState: (state) => (this.state = state),\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n    };\r\n\r\n    const transformed = this.mapper.transform(this.content ?? \"\", context);\r\n\r\n    if (this.deleted) {\r\n      return (\r\n        <section>\r\n          <slot name=\"prefix\" />\r\n          <span class=\"deleted-start\">Begin verwijderd element</span>\r\n          {transformed}\r\n          <span class=\"deleted-end\">Einde verwijderd element</span>\r\n          <slot name=\"suffix\" />\r\n        </section>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={(e: UIEvent) => this.handleHostOnClick(e)}>\r\n        <slot name=\"prefix\" />\r\n        {transformed}\r\n        <slot name=\"suffix\" />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/{p-fdf8bd94.entry.js → p-3c554a18.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as t,h as o}from"./p-26cdce1c.js";import{c as e}from"./p-91963e3d.js";import{c as s}from"./p-6a1980b4.js";import"./p-5950644a.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.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\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-btn-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-btn-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-btn-group > * {\n  border-radius: 0;\n}\n.dso-btn-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-btn-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-btn-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-btn-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-btn-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-btn-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-btn-group > *:hover + .dso-input-number,\n.dso-btn-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-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-btn-group > *:active + .dso-input-number, .dso-btn-group > *:active + .dso-input-number:hover,\n.dso-btn-group > *.active + .dso-input-number,\n.dso-btn-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-group > *.disabled + .dso-input-number, .dso-btn-group > *.disabled + .dso-input-number:hover,\n.dso-btn-group > *[disabled] + .dso-input-number,\n.dso-btn-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-btn-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-btn-group,\n.dso-btn-group + .dso-list-button,\n.dso-btn-group + .dso-btn-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-btn-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-fdf8bd94.entry.js.map
+import{r as n,c as t,h as o}from"./p-ce928197.js";import{c as e}from"./p-91963e3d.js";import{c as s}from"./p-6a1980b4.js";import"./p-5950644a.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.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\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-btn-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-btn-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-btn-group > * {\n  border-radius: 0;\n}\n.dso-btn-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-btn-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-btn-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-btn-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-btn-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-btn-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-btn-group > *:hover + .dso-input-number,\n.dso-btn-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-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-btn-group > *:active + .dso-input-number, .dso-btn-group > *:active + .dso-input-number:hover,\n.dso-btn-group > *.active + .dso-input-number,\n.dso-btn-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-btn-group > *.disabled + .dso-input-number, .dso-btn-group > *.disabled + .dso-input-number:hover,\n.dso-btn-group > *[disabled] + .dso-input-number,\n.dso-btn-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-btn-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-btn-group,\n.dso-btn-group + .dso-list-button,\n.dso-btn-group + .dso-btn-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-btn-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-3c554a18.entry.js.map

package/dist/dso-toolkit/{p-d4f8e1e0.entry.js → p-3fa7489e.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as o,g as i}from"./p-26cdce1c.js";import{d as r,h as a,c as n,b as s}from"./p-871bfdf9.js";import{c as p}from"./p-6a1980b4.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 o=e.state,i=e.name,a=e.options;var n=r(o,a);var s=o.modifiersData.preventOverflow||{x:0,y:0},p=s.x,l=s.y;var d=o.rects.popper,h=d.width,c=d.height;var f=o.placement.split("-"),m=f[0];var u=m==="left"?"left":"right";var w=m==="top"?"top":"bottom";o.modifiersData[i]={width:h-n[u]-p,height:c-n[w]-l}}};const h=":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}: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;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}.tooltip[data-popper-placement=top] .tooltip-arrow{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}.tooltip[data-popper-placement=right] .tooltip-arrow{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}.tooltip[data-popper-placement=bottom] .tooltip-arrow{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}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";var c=undefined&&undefined.__classPrivateFieldGet||function(t,e,o,i){if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof e==="function"?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?i:o==="a"?i.call(t):i?i.value:e.get(t)};var f=undefined&&undefined.__classPrivateFieldSet||function(t,e,o,i,r){if(i==="m")throw new TypeError("Private method is not writable");if(i==="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 i==="a"?r.call(t,o):r?r.value=o:e.set(t,o),o};var m;const u=150;const w={name:"applyMaxSize",enabled:true,phase:s,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 g=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(o,{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=n(this.target,e,{placement:this.position,modifiers:[d,w,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=c(this,m,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){f(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 o=e.querySelector(`[aria-describedBy="${t}`);if(!o){console.warn(`Unable to find reference with aria-describedby ${t}`);return}f(this,m,o,"f");return o}get element(){return i(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};m=new WeakMap;g.style=h;export{g as dso_tooltip};
-//# sourceMappingURL=p-d4f8e1e0.entry.js.map
+import{r as t,h as e,H as o,a as i}from"./p-ce928197.js";import{d as r,h as a,c as n,b as s}from"./p-871bfdf9.js";import{c as p}from"./p-6a1980b4.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 o=e.state,i=e.name,a=e.options;var n=r(o,a);var s=o.modifiersData.preventOverflow||{x:0,y:0},p=s.x,l=s.y;var d=o.rects.popper,h=d.width,c=d.height;var f=o.placement.split("-"),m=f[0];var u=m==="left"?"left":"right";var w=m==="top"?"top":"bottom";o.modifiersData[i]={width:h-n[u]-p,height:c-n[w]-l}}};const h=":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}: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;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}.tooltip[data-popper-placement=top] .tooltip-arrow{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}.tooltip[data-popper-placement=right] .tooltip-arrow{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}.tooltip[data-popper-placement=bottom] .tooltip-arrow{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}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";var c=undefined&&undefined.__classPrivateFieldGet||function(t,e,o,i){if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof e==="function"?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?i:o==="a"?i.call(t):i?i.value:e.get(t)};var f=undefined&&undefined.__classPrivateFieldSet||function(t,e,o,i,r){if(i==="m")throw new TypeError("Private method is not writable");if(i==="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 i==="a"?r.call(t,o):r?r.value=o:e.set(t,o),o};var m;const u=150;const w={name:"applyMaxSize",enabled:true,phase:s,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 g=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(o,{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=n(this.target,e,{placement:this.position,modifiers:[d,w,{name:"eventListeners",enabled:false}]});this.setStrategy()}}get target(){var t;return(t=c(this,m,"f"))!==null&&t!==void 0?t:this.initializeTarget()}set target(t){f(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 o=e.querySelector(`[aria-describedBy="${t}`);if(!o){console.warn(`Unable to find reference with aria-describedby ${t}`);return}f(this,m,o,"f");return o}get element(){return i(this)}static get watchers(){return{position:["watchPosition"],strategy:["watchStrategy"],active:["watchActive"]}}};m=new WeakMap;g.style=h;export{g as dso_tooltip};
+//# sourceMappingURL=p-3fa7489e.entry.js.map

package/dist/dso-toolkit/{p-fa6d8d5a.entry.js → p-422bcf93.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as t,h as o,H as e}from"./p-26cdce1c.js";const i=":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  top: 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.btn-sm {\n  line-height: 1rem;\n}\n.toggle-visibility-button.btn-sm dso-icon,\n.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-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-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.zoom-buttons button.btn-sm dso-icon,\n.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-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.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-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\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    height: 40px;\n    margin-right: 0;\n    min-width: auto;\n    right: calc(100% + 16px);\n    width: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-right: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    top: 72px;\n  }\n}";var r=undefined&&undefined.__classPrivateFieldGet||function(n,t,o,e){if(o==="a"&&!e)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t||!e:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?e:o==="a"?e.call(n):e?e.value:t.get(n)};var s=undefined&&undefined.__classPrivateFieldSet||function(n,t,o,e,i){if(e==="m")throw new TypeError("Private method is not writable");if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e==="a"?i.call(n,o):i?i.value=o:t.set(n,o),o};var a,l;const d=300;const c=class{constructor(o){n(this,o);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.panelTitle="Kaartlagen";a.set(this,void 0);l.set(this,void 0);this.open=false;this.disableZoom=undefined;this.hideContent=!this.open}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=r(this,a,"f"))===null||n===void 0?void 0:n.focus()}),d)}else{setTimeout((()=>{var n;this.hideContent=true;(n=r(this,l,"f"))===null||n===void 0?void 0:n.focus()}),d)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return o(e,null,o("button",{type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>s(this,l,n,"f")},o("dso-icon",{icon:"layers"}),o("span",null,"Kaartlagen")),o("div",{class:"zoom-buttons"},o("button",{type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"||this.disableZoom==="both"},o("span",null,"Zoom in"),o("dso-icon",{icon:"plus"})),o("button",{type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"||this.disableZoom==="both"},o("span",null,"Zoom uit"),o("dso-icon",{icon:"minus"}))),o("section",{hidden:this.hideContent},o("header",null,o("h2",null,this.panelTitle),o("button",{type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>s(this,a,n,"f")},o("span",null,"Verberg paneel ",this.panelTitle),o("dso-icon",{icon:"times"}))),o("dso-scrollable",null,o("div",{class:"content"},o("slot",null)))))}static get watchers(){return{open:["watchOpen"]}}};a=new WeakMap,l=new WeakMap;c.style=i;export{c as dso_map_controls};
-//# sourceMappingURL=p-fa6d8d5a.entry.js.map
+import{r as n,c as t,h as o,H as e}from"./p-ce928197.js";const i=":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  top: 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.btn-sm {\n  line-height: 1rem;\n}\n.toggle-visibility-button.btn-sm dso-icon,\n.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-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-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.zoom-buttons button.btn-sm dso-icon,\n.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-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.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-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\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    height: 40px;\n    margin-right: 0;\n    min-width: auto;\n    right: calc(100% + 16px);\n    width: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-right: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    top: 72px;\n  }\n}";var r=undefined&&undefined.__classPrivateFieldGet||function(n,t,o,e){if(o==="a"&&!e)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t||!e:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?e:o==="a"?e.call(n):e?e.value:t.get(n)};var s=undefined&&undefined.__classPrivateFieldSet||function(n,t,o,e,i){if(e==="m")throw new TypeError("Private method is not writable");if(e==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e==="a"?i.call(n,o):i?i.value=o:t.set(n,o),o};var a,l;const d=300;const c=class{constructor(o){n(this,o);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.panelTitle="Kaartlagen";a.set(this,void 0);l.set(this,void 0);this.open=false;this.disableZoom=undefined;this.hideContent=!this.open}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=r(this,a,"f"))===null||n===void 0?void 0:n.focus()}),d)}else{setTimeout((()=>{var n;this.hideContent=true;(n=r(this,l,"f"))===null||n===void 0?void 0:n.focus()}),d)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return o(e,null,o("button",{type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>s(this,l,n,"f")},o("dso-icon",{icon:"layers"}),o("span",null,"Kaartlagen")),o("div",{class:"zoom-buttons"},o("button",{type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"||this.disableZoom==="both"},o("span",null,"Zoom in"),o("dso-icon",{icon:"plus"})),o("button",{type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"||this.disableZoom==="both"},o("span",null,"Zoom uit"),o("dso-icon",{icon:"minus"}))),o("section",{hidden:this.hideContent},o("header",null,o("h2",null,this.panelTitle),o("button",{type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>s(this,a,n,"f")},o("span",null,"Verberg paneel ",this.panelTitle),o("dso-icon",{icon:"times"}))),o("dso-scrollable",null,o("div",{class:"content"},o("slot",null)))))}static get watchers(){return{open:["watchOpen"]}}};a=new WeakMap,l=new WeakMap;c.style=i;export{c as dso_map_controls};
+//# sourceMappingURL=p-422bcf93.entry.js.map

package/dist/dso-toolkit/p-42d3c595.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as e,H as i,a}from"./p-ce928197.js";import{c as n}from"./p-6a1980b4.js";import{i as o}from"./p-33df9903.js";const l=s=>s instanceof HTMLButtonElement||s instanceof HTMLAnchorElement||s instanceof HTMLInputElement||s.tagName.startsWith("DSO-TOGGLETIP");const r=":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}";const d=class{constructor(e){s(this,e);this.dsoCardClicked=t(this,"dsoCardClicked",7);this.isSelectable=false;this.hasImage=false;this.clickable=true;this.imageShape="normal"}clickEventHandler(s){if(!(s.target instanceof HTMLElement)||!this.clickable){return}let t=s.target;while(t!==this.host&&t!==null){if(l(t)||t===null){return}if(t.parentNode instanceof ShadowRoot&&t.parentNode.host instanceof HTMLElement){t=t.parentNode.host}else{t=t.parentElement}}return this.dsoCardClicked.emit({originalEvent:s,isModifiedEvent:o(s)})}componentWillLoad(){this.isSelectable=this.host.querySelector("*[slot = 'selectable']")!==null;this.hasImage=this.host.querySelector("*[slot = 'image']")!==null}render(){return e(i,{class:n({"dso-not-clickable":!this.clickable}),onClick:s=>this.clickEventHandler(s)},e("div",{class:"dso-card-selectable",hidden:!this.isSelectable},e("slot",{name:"selectable"})),e("div",{class:"dso-card-image",hidden:!this.hasImage},e("slot",{name:"image"})),e("div",{class:"dso-card-heading"},e("slot",{name:"heading"}),e("slot",{name:"interactions"})),e("div",{class:"dso-card-content"},e("slot",{name:"content"})))}get host(){return a(this)}};d.style=r;export{d as dso_card};
+//# sourceMappingURL=p-42d3c595.entry.js.map

package/dist/dso-toolkit/{p-1d3ed808.entry.js.map → p-42d3c595.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["isInteractiveElement","element","HTMLButtonElement","HTMLAnchorElement","HTMLInputElement","tagName","startsWith","cardCss","Card","clickEventHandler","e","target","HTMLElement","this","clickable","host","parentNode","ShadowRoot","parentElement","dsoCardClicked","emit","originalEvent","isModifiedEvent","componentWillLoad","isSelectable","querySelector","hasImage","render","h","Host","class","clsx","onClick","hidden","name"],"sources":["./src/utils/is-interactive-element.ts","./src/components/card/card.scss?tag=dso-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n  return (\r\n    element instanceof HTMLButtonElement ||\r\n    element instanceof HTMLAnchorElement ||\r\n    element instanceof HTMLInputElement ||\r\n    element.tagName.startsWith(\"DSO-TOGGLETIP\")\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/components/card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include card.root();\r\n\r\n  display: block;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isSelectable = false;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasImage = false;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable.\r\n   */\r\n  @Prop()\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.clickable) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isSelectable = this.host.querySelector(\"*[slot = 'selectable']\") !== null;\r\n    this.hasImage = this.host.querySelector(\"*[slot = 'image']\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={clsx({ \"dso-not-clickable\": !this.clickable })}\r\n        onClick={(e: MouseEvent) => this.clickEventHandler(e)}\r\n      >\r\n        <div class=\"dso-card-selectable\" hidden={!this.isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!this.hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          <slot name=\"heading\" />\r\n          <slot name=\"interactions\" />\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"wIAAO,MAAMA,EAAwBC,GAEjCA,aAAmBC,mBACnBD,aAAmBE,mBACnBF,aAAmBG,kBACnBH,EAAQI,QAAQC,WAAW,iBCL/B,MAAMC,EAAU,iU,MCaHC,EAAI,M,0FAQA,M,cAMJ,M,eAMC,K,gBAQa,Q,CAQjBC,kBAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAiBC,KAAKC,UAAW,CACzD,M,CAGF,IAAIb,EAA8BS,EAAEC,OAEpC,MAAOV,IAAYY,KAAKE,MAAQd,IAAY,KAAM,CAChD,GAAID,EAAqBC,IAAYA,IAAY,KAAM,CACrD,M,CAGF,GAAIA,EAAQe,sBAAsBC,YAAchB,EAAQe,WAAWD,gBAAgBH,YAAa,CAC9FX,EAAUA,EAAQe,WAAWD,I,KACxB,CACLd,EAAUA,EAAQiB,a,EAItB,OAAOL,KAAKM,eAAeC,KAAK,CAAEC,cAAeX,EAAGY,gBAAiBA,EAAgBZ,I,CAGvFa,oBACEV,KAAKW,aAAeX,KAAKE,KAAKU,cAAc,4BAA8B,KAC1EZ,KAAKa,SAAWb,KAAKE,KAAKU,cAAc,uBAAyB,I,CAGnEE,SACE,OACEC,EAACC,EAAI,CACHC,MAAOC,EAAK,CAAE,qBAAsBlB,KAAKC,YACzCkB,QAAUtB,GAAkBG,KAAKJ,kBAAkBC,IAEnDkB,EAAA,OAAKE,MAAM,sBAAsBG,QAASpB,KAAKW,cAC7CI,EAAA,QAAMM,KAAK,gBAEbN,EAAA,OAAKE,MAAM,iBAAiBG,QAASpB,KAAKa,UACxCE,EAAA,QAAMM,KAAK,WAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,YACXN,EAAA,QAAMM,KAAK,kBAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,a"}
+{"version":3,"names":["isInteractiveElement","element","HTMLButtonElement","HTMLAnchorElement","HTMLInputElement","tagName","startsWith","cardCss","Card","clickEventHandler","e","target","HTMLElement","this","clickable","host","parentNode","ShadowRoot","parentElement","dsoCardClicked","emit","originalEvent","isModifiedEvent","componentWillLoad","isSelectable","querySelector","hasImage","render","h","Host","class","clsx","onClick","hidden","name"],"sources":["./src/utils/is-interactive-element.ts","./src/components/card/card.scss?tag=dso-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n  return (\r\n    element instanceof HTMLButtonElement ||\r\n    element instanceof HTMLAnchorElement ||\r\n    element instanceof HTMLInputElement ||\r\n    element.tagName.startsWith(\"DSO-TOGGLETIP\")\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/components/card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include card.root();\r\n\r\n  display: block;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { isInteractiveElement } from \"../../utils/is-interactive-element\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DsoCardClickedEvent, ImageShape } from \"./card.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isSelectable = false;\r\n\r\n  /**\r\n   * Do not use, this is set programmatically by the component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasImage = false;\r\n\r\n  /**\r\n   * Whether or not the Card is clickable.\r\n   */\r\n  @Prop()\r\n  clickable = true;\r\n\r\n  /**\r\n   * Presentation of image in header.\r\n   *  - \"normal\" (\"24 x 24\").\r\n   *  - \"wide\" (\"30 x 26\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  imageShape: ImageShape = \"normal\";\r\n\r\n  /**\r\n   * Emitted when the Card is clickable and the user clicked the Card.\r\n   */\r\n  @Event()\r\n  dsoCardClicked!: EventEmitter<DsoCardClickedEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.clickable) {\r\n      return;\r\n    }\r\n\r\n    let element: HTMLElement | null = e.target;\r\n\r\n    while (element !== this.host && element !== null) {\r\n      if (isInteractiveElement(element) || element === null) {\r\n        return;\r\n      }\r\n\r\n      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n        element = element.parentNode.host;\r\n      } else {\r\n        element = element.parentElement;\r\n      }\r\n    }\r\n\r\n    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isSelectable = this.host.querySelector(\"*[slot = 'selectable']\") !== null;\r\n    this.hasImage = this.host.querySelector(\"*[slot = 'image']\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={clsx({ \"dso-not-clickable\": !this.clickable })}\r\n        onClick={(e: MouseEvent) => this.clickEventHandler(e)}\r\n      >\r\n        <div class=\"dso-card-selectable\" hidden={!this.isSelectable}>\r\n          <slot name=\"selectable\" />\r\n        </div>\r\n        <div class=\"dso-card-image\" hidden={!this.hasImage}>\r\n          <slot name=\"image\" />\r\n        </div>\r\n        <div class=\"dso-card-heading\">\r\n          <slot name=\"heading\" />\r\n          <slot name=\"interactions\" />\r\n        </div>\r\n        <div class=\"dso-card-content\">\r\n          <slot name=\"content\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"mIAAO,MAAMA,EAAwBC,GAEjCA,aAAmBC,mBACnBD,aAAmBE,mBACnBF,aAAmBG,kBACnBH,EAAQI,QAAQC,WAAW,iBCL/B,MAAMC,EAAU,iU,MCaHC,EAAI,M,0FAQA,M,cAMJ,M,eAMC,K,gBAQa,Q,CAQjBC,kBAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAiBC,KAAKC,UAAW,CACzD,M,CAGF,IAAIb,EAA8BS,EAAEC,OAEpC,MAAOV,IAAYY,KAAKE,MAAQd,IAAY,KAAM,CAChD,GAAID,EAAqBC,IAAYA,IAAY,KAAM,CACrD,M,CAGF,GAAIA,EAAQe,sBAAsBC,YAAchB,EAAQe,WAAWD,gBAAgBH,YAAa,CAC9FX,EAAUA,EAAQe,WAAWD,I,KACxB,CACLd,EAAUA,EAAQiB,a,EAItB,OAAOL,KAAKM,eAAeC,KAAK,CAAEC,cAAeX,EAAGY,gBAAiBA,EAAgBZ,I,CAGvFa,oBACEV,KAAKW,aAAeX,KAAKE,KAAKU,cAAc,4BAA8B,KAC1EZ,KAAKa,SAAWb,KAAKE,KAAKU,cAAc,uBAAyB,I,CAGnEE,SACE,OACEC,EAACC,EAAI,CACHC,MAAOC,EAAK,CAAE,qBAAsBlB,KAAKC,YACzCkB,QAAUtB,GAAkBG,KAAKJ,kBAAkBC,IAEnDkB,EAAA,OAAKE,MAAM,sBAAsBG,QAASpB,KAAKW,cAC7CI,EAAA,QAAMM,KAAK,gBAEbN,EAAA,OAAKE,MAAM,iBAAiBG,QAASpB,KAAKa,UACxCE,EAAA,QAAMM,KAAK,WAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,YACXN,EAAA,QAAMM,KAAK,kBAEbN,EAAA,OAAKE,MAAM,oBACTF,EAAA,QAAMM,KAAK,a"}

package/dist/dso-toolkit/p-484ea1d2.entry.js

@@ -0,0 +1,2 @@
+import{h as o,r as n,c as s,f as t,F as d,H as c,a as e}from"./p-ce928197.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i=({handleUrl:n,onClick:s,open:t},d)=>{if(n){return o("a",{href:n,onClick:s,"aria-expanded":t?"true":"false"},d)}return o("button",{type:"button",onClick:s,"aria-expanded":t?"true":"false"},d)};const r=({heading:n,ref:s},t)=>{switch(n){default:case"h2":return o("h2",{ref:s,class:"dso-section-handle"},t);case"h3":return o("h3",{ref:s,class:"dso-section-handle"},t);case"h4":return o("h4",{ref:s,class:"dso-section-handle"},t);case"h5":return o("h5",{ref:s,class:"dso-section-handle"},t)}};const h=({state:n})=>{if(n==="error"){return o("dso-icon",{icon:"status-error"})}if(n==="danger"){return o("dso-icon",{icon:"status-danger"})}if(n==="success"){return o("dso-icon",{icon:"status-success"})}if(n==="info"){return o("dso-icon",{icon:"status-info"})}if(n==="warning"){return o("dso-icon",{icon:"status-warning"})}};const l=({state:n,icon:s,attachmentCount:t})=>{if(n){return o(h,{state:n})}if(t){return o("dso-attachments-counter",{count:t})}if(s){return o("dso-icon",{icon:s})}};const u="*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open])>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open])>.dso-section-handle a,:host(.dso-accordion-default[open])>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding:5px 16px 5px 0}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-body{background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:0}:host(.dso-accordion-neutral) .dso-section-body.dso-animate-ready{transition:margin-block 260ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.dso-accordion-neutral) .dso-section-body .dso-section-body-content{padding:16px 32px 24px 32px}:host(.dso-accordion-neutral[open])>.dso-section-handle{background-color:transparant;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-neutral[open])>.dso-section-handle a,:host(.dso-accordion-neutral[open])>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}";const p=class{constructor(o){n(this,o);this.dsoToggleClick=s(this,"dsoToggleClick",3);this.dsoAnimationEnd=s(this,"dsoAnimationEnd",3);this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:()=>this.scrollIntoView(o.detail.bodyHeight)})};this.handleTitle=undefined;this.heading="h2";this.handleUrl=undefined;this.status=undefined;this.attachmentCount=undefined;this.icon=undefined;this.statusDescription=undefined;this.open=false;this.hasNestedAccordion=false;this.hover=false}componentWillLoad(){var o;this.hasNestedAccordion=this.host.querySelector("dso-accordion")!==null;(o=this.accordion)===null||o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;t(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null||o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o){var n,s;const t=(n=this.sectionBody)===null||n===void 0?void 0:n.getBoundingClientRect();const d=(s=this.sectionHeading)===null||s===void 0?void 0:s.getBoundingClientRect();if(!t||!d||!this.accordionState){return}const c=d.top+d.height+(this.open?o!==null&&o!==void 0?o:0:0);if(c>window.innerHeight){const o=c-d.top;const n=o>window.innerHeight;window.scrollTo({top:n?this.host.offsetTop:this.host.offsetTop-(window.innerHeight-o),behavior:"smooth"})}else if(d.top<0){window.scrollTo({top:this.host.offsetTop,behavior:"smooth"})}}get accordion(){return this.host.closest("dso-accordion")}render(){var n;const{variant:s,reverseAlign:t}=(n=this.accordionState)!==null&&n!==void 0?n:{};const e=!!this.statusDescription||!!this.status||!!this.icon||!!this.attachmentCount;return o(c,{class:{"dso-accordion-section":true,["dso-accordion-"+s]:true,"dso-nested-accordion":this.hasNestedAccordion,"dso-accordion-reverse-align":t!==null&&t!==void 0?t:false},hidden:!s,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},o(r,{heading:this.heading,ref:o=>this.sectionHeading=o},o(i,{handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open},t?o(d,null,e&&o("div",{class:"dso-section-handle-addons"},o(l,{icon:this.icon})),o("span",null,this.handleTitle),o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"})):o(d,null,o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&o("span",{class:"sr-only"},a[this.status]),o("span",null,this.handleTitle,this.isNeutral&&o("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),e&&o("div",{class:"dso-section-handle-addons"},this.statusDescription&&o("span",{class:"dso-status"},this.statusDescription),o(l,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),o("dso-expandable",{class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},o("div",{class:"dso-section-body-content",ref:o=>this.sectionBody=o},o("slot",null))))}get host(){return e(this)}};p.style=u;export{p as dso_accordion_section};
+//# sourceMappingURL=p-484ea1d2.entry.js.map

package/dist/dso-toolkit/p-484ea1d2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stateMap","success","info","warning","danger","error","HandleElement","handleUrl","onClick","open","children","h","href","type","Handle","heading","ref","class","HandleStateIcon","state","icon","HandleIcon","attachmentCount","count","accordionSectionCss","AccordionSection","this","handleClick","event","dsoToggleClick","emit","originalEvent","handleExpandableAnimationEnd","e","dsoAnimationEnd","scrollIntoView","detail","bodyHeight","componentWillLoad","hasNestedAccordion","host","querySelector","_a","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","async","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","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-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: flex-start;\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]) {\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]) {\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]) {\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(.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]) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-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(.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]) {\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]) {\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]) {\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 {\r\n  AccordionInternalState,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionToggleClickEvent,\r\n} from \"../accordion.interfaces\";\r\nimport { AccordionHeading, AccordionSectionState, stateMap } 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-5265e22b.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as i,H as e,a as l}from"./p-ce928197.js";const o=":host{display:block}";const a=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];const r=class{constructor(i){s(this,i);this.dsoSizeChange=t(this,"dsoSizeChange",7);this.observer=new ResizeObserver((([s])=>{var t,i;if(!s){throw new Error("No entry found")}const e=(i=(t=a.find((t=>s.contentRect.width>=t.width)))===null||t===void 0?void 0:t.alias)!==null&&i!==void 0?i:a[0].alias;this.sizeAlias=e;this.dsoSizeChange.emit(e)}));this.sizeAlias=a[0].alias;this.sizeWidth=0}async getSize(){return this.sizeAlias}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return i(e,{small:this.sizeAlias==="small",medium:this.sizeAlias==="medium",large:this.sizeAlias==="large"},i("slot",null))}get host(){return l(this)}};r.style=o;export{r as dso_responsive_element};
+//# sourceMappingURL=p-5265e22b.entry.js.map