@dso-toolkit/core 56.0.0 → 56.1.0

package/dist/esm/dso-viewer-grid.entry.js

@@ -131,7 +131,7 @@ const ViewerGrid = class {
     this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
   }
   render() {
-    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, h("span", { class: "sr-only" }, "Kaartpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, h("span", { class: "sr-only" }, "Kaartpaneel breder maken"), h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }), h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
+    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, h("span", { class: "sr-only" }, "Tekstpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, h("span", { class: "sr-only" }, "Tekstpaneel breder maken"), h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }), h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/dso-viewer-grid.entry.js.map

@@ -1 +1 @@
-{"file":"dso-viewer-grid.entry.js","mappings":"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","names":[],"sources":["./src/components/viewer-grid/viewer-grid-filterpanel-buttons.tsx","./src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","./src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: flex;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n:host([small]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([medium]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([large]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &[disabled] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.dso-map-panel {\r\n  background-color: colors.$wit;\r\n  box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  padding-right: units.$u1;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-map-panel;\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .main {\r\n    height: 100%;\r\n    overflow-y: scroll;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.sizing-buttons {\r\n  left: calc(100% + 1px);\r\n  overflow-x: hidden;\r\n  padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-bottom-right-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  height: 100%;\r\n  overflow-y: auto;\r\n  position: absolute;\r\n  z-index: zindex.$viewer-grid-map-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  box-shadow: 2px 0 5px colors.$grijs-60;\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n  max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n  width: calc(100vw - 40px);\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: core-viewer-grid-variables.$filterpanel-max-width;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n\r\n    @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n      left: auto;\r\n      width: 40px;\r\n    }\r\n  }\r\n}\r\n\r\n.overlay {\r\n  box-shadow: -2px 0 5px colors.$grijs-60;\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: core-viewer-grid-variables.$overlay-width;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  z-index: zindex.$viewer-grid-map-panel + 2;\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  private mapPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<MouseEvent | KeyboardEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private filterpanelFocustrap: FocusTrap | undefined;\r\n\r\n  private overlay: HTMLDivElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  private overlayFocustrap: FocusTrap | undefined;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mapPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private updateFocusTrap() {\r\n    if (this.filterpanelOpen && this.overlayOpen) {\r\n      return;\r\n    }\r\n\r\n    if (this.filterpanelFocustrap) {\r\n      if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n        this.filterpanelFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.filterpanelFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n\r\n    if (this.overlayFocustrap) {\r\n      if (this.overlayOpen && !this.overlay?.hidden) {\r\n        this.overlayFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.overlayFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key !== \"Escape\") {\r\n      return;\r\n    }\r\n\r\n    this.dsoCloseOverlay.emit(event);\r\n  };\r\n\r\n  connectedCallback() {\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanel && this.filterpanelSlot) {\r\n      this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    if (this.overlay && this.overlaySlot) {\r\n      this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.overlayFocustrap?.deactivate();\r\n    this.filterpanelFocustrap?.deactivate();\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n          <div class=\"sizing-buttons\">\r\n            <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n              breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n            </span>\r\n            <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n              <span class=\"sr-only\">Kaartpaneel smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n            <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n              <span class=\"sr-only\">Kaartpaneel breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          </div>\r\n          <div class=\"main\">\r\n            <slot name=\"main\" />\r\n          </div>\r\n        </div>\r\n        <div\r\n          id=\"filterpanel\"\r\n          class=\"filterpanel\"\r\n          hidden={!this.filterpanelOpen || !this.filterpanelSlot}\r\n          ref={(element) => (this.filterpanel = element)}\r\n        >\r\n          <h1>Uw keuzes</h1>\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n          <slot name=\"filterpanel\" />\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n        </div>\r\n        <div class=\"map\">\r\n          <slot name=\"map\" />\r\n        </div>\r\n        <div hidden={!this.overlayOpen || !this.overlaySlot} class=\"dimscreen\"></div>\r\n        <div\r\n          class=\"overlay\"\r\n          hidden={!this.overlayOpen || !this.overlaySlot}\r\n          ref={(element) => (this.overlay = element)}\r\n        >\r\n          <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n          <slot name=\"overlay\" />\r\n          {/* This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n          <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-viewer-grid.entry.js","mappings":"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","names":[],"sources":["./src/components/viewer-grid/viewer-grid-filterpanel-buttons.tsx","./src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","./src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: flex;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n:host([small]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([medium]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\n:host([large]) {\r\n  .dso-map-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &[disabled] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.dso-map-panel {\r\n  background-color: colors.$wit;\r\n  box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  padding-right: units.$u1;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-map-panel;\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .main {\r\n    height: 100%;\r\n    overflow-y: scroll;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.sizing-buttons {\r\n  left: calc(100% + 1px);\r\n  overflow-x: hidden;\r\n  padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-bottom-right-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  height: 100%;\r\n  overflow-y: auto;\r\n  position: absolute;\r\n  z-index: zindex.$viewer-grid-map-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  box-shadow: 2px 0 5px colors.$grijs-60;\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n  max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n  width: calc(100vw - 40px);\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: core-viewer-grid-variables.$filterpanel-max-width;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n\r\n    @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n      left: auto;\r\n      width: 40px;\r\n    }\r\n  }\r\n}\r\n\r\n.overlay {\r\n  box-shadow: -2px 0 5px colors.$grijs-60;\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.dimscreen {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: core-viewer-grid-variables.$overlay-width;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  z-index: zindex.$viewer-grid-map-panel + 2;\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  private mapPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<MouseEvent | KeyboardEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private filterpanelFocustrap: FocusTrap | undefined;\r\n\r\n  private overlay: HTMLDivElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  private overlayFocustrap: FocusTrap | undefined;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mapPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private updateFocusTrap() {\r\n    if (this.filterpanelOpen && this.overlayOpen) {\r\n      return;\r\n    }\r\n\r\n    if (this.filterpanelFocustrap) {\r\n      if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n        this.filterpanelFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.filterpanelFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n\r\n    if (this.overlayFocustrap) {\r\n      if (this.overlayOpen && !this.overlay?.hidden) {\r\n        this.overlayFocustrap.activate();\r\n        this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n      } else {\r\n        this.overlayFocustrap.deactivate();\r\n        this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n      }\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key !== \"Escape\") {\r\n      return;\r\n    }\r\n\r\n    this.dsoCloseOverlay.emit(event);\r\n  };\r\n\r\n  connectedCallback() {\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanel && this.filterpanelSlot) {\r\n      this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    if (this.overlay && this.overlaySlot) {\r\n      this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n        escapeDeactivates: false,\r\n        allowOutsideClick: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      });\r\n    }\r\n\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.updateFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.overlayFocustrap?.deactivate();\r\n    this.filterpanelFocustrap?.deactivate();\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n          <div class=\"sizing-buttons\">\r\n            <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n              Breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n            </span>\r\n            <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n              <span class=\"sr-only\">Tekstpaneel smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n            <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n              <span class=\"sr-only\">Tekstpaneel breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          </div>\r\n          <div class=\"main\">\r\n            <slot name=\"main\" />\r\n          </div>\r\n        </div>\r\n        <div\r\n          id=\"filterpanel\"\r\n          class=\"filterpanel\"\r\n          hidden={!this.filterpanelOpen || !this.filterpanelSlot}\r\n          ref={(element) => (this.filterpanel = element)}\r\n        >\r\n          <h1>Uw keuzes</h1>\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n          <slot name=\"filterpanel\" />\r\n          <ViewerGridFilterpanelButtons\r\n            onApply={(e) => this.handleFilterpanelApply(e)}\r\n            onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n          />\r\n        </div>\r\n        <div class=\"map\">\r\n          <slot name=\"map\" />\r\n        </div>\r\n        <div hidden={!this.overlayOpen || !this.overlaySlot} class=\"dimscreen\"></div>\r\n        <div\r\n          class=\"overlay\"\r\n          hidden={!this.overlayOpen || !this.overlaySlot}\r\n          ref={(element) => (this.overlay = element)}\r\n        >\r\n          <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n          <slot name=\"overlay\" />\r\n          {/* This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n          <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">sluiten</span>\r\n          </button>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dsot-document-component-demo",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]}],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
+  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dsot-document-component-demo",[[0,"dsot-document-component-demo",{"response":[32],"open":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"returnFocus":[16],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
   });
 };
 

package/dist/types/components/accordion/accordion.interfaces.d.ts

@@ -3,25 +3,3 @@ export interface AccordionInternalState {
   variant?: AccordionVariant;
   reverseAlign?: boolean;
 }
-export interface AccordionSectionToggleClickEvent {
-  /**
-   * The original MouseEvent that triggered the click.
-   *
-   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.
-   */
-  originalEvent?: MouseEvent;
-  /**
-   * The requested state. If the Accordion Section is closed, `open = true`.
-   */
-  open: boolean;
-}
-export interface AccordionSectionAnimationEndEvent {
-  /**
-   * Helper function to scroll the Accordion Section into view.
-   */
-  scrollIntoView(): void;
-  /**
-   * The state of the Accordion Section after animation.
-   */
-  open: boolean;
-}

package/dist/types/components/accordion/components/accordion-section.d.ts

@@ -1,6 +1,5 @@
 import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
-import { AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent } from "../accordion.interfaces";
-import { AccordionHeading, AccordionSectionState } from "./accordion-section.interfaces";
+import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./accordion-section.interfaces";
 export declare class AccordionSection implements ComponentInterface {
   private accordionState?;
   private sectionBody?;

package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts

@@ -1,3 +1,25 @@
 export type AccordionSectionState = "success" | "info" | "warning" | "danger" | "error";
 export type AccordionHeading = "h2" | "h3" | "h4" | "h5";
 export declare const stateMap: Record<AccordionSectionState, string>;
+export interface AccordionSectionToggleClickEvent {
+  /**
+   * The original MouseEvent that triggered the click.
+   *
+   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.
+   */
+  originalEvent?: MouseEvent;
+  /**
+   * The requested state. If the Accordion Section is closed, `open = true`.
+   */
+  open: boolean;
+}
+export interface AccordionSectionAnimationEndEvent {
+  /**
+   * Helper function to scroll the Accordion Section into view.
+   */
+  scrollIntoView(): void;
+  /**
+   * The state of the Accordion Section after animation.
+   */
+  open: boolean;
+}

package/dist/types/components/label/label.d.ts

@@ -1,7 +1,6 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 export declare class Label implements ComponentInterface {
   private labelContent;
-  private keydownListenerActive;
   private mutationObserver?;
   private host;
   /**
@@ -16,6 +15,10 @@ export declare class Label implements ComponentInterface {
    * The status of this Label.
    */
   status?: "primary" | "info" | "success" | "warning" | "danger" | "error" | "bright" | "attention";
+  /**
+   * Emitted when the user activates the remove button.
+   */
+  dsoRemoveClick: EventEmitter<MouseEvent>;
   removeHover?: boolean;
   removeFocus?: boolean;
   /**
@@ -24,14 +27,11 @@ export declare class Label implements ComponentInterface {
   truncate?: boolean;
   textHover?: boolean;
   textFocus?: boolean;
-  isTruncated?: boolean;
-  labelText: string | null;
-  /**
-   * Emitted when the user activates the remove button.
-   */
-  dsoRemoveClick: EventEmitter<MouseEvent>;
+  isTruncated: boolean;
+  labelText: string;
+  watchRemovable(removable: boolean): void;
   watchTruncate(truncate: boolean): void;
-  watchTooltipActive(): void;
+  keyDownListener(event: KeyboardEvent): void;
   /**
    * @internal
    */
@@ -41,8 +41,8 @@ export declare class Label implements ComponentInterface {
   disconnectedCallback(): void;
   /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
   private startMutationObserver;
+  private stopMutationObserver;
   private startTruncate;
   private stopTruncate;
-  private keyDownListener;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccordionInternalState, AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
-import { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
+import { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
+import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
 import { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
 import { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
@@ -31,8 +31,8 @@ import { SelectableChangeEvent } from "./components/selectable/selectable.interf
 import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.interfaces";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
 import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid.interfaces";
-export { AccordionInternalState, AccordionSectionAnimationEndEvent, AccordionSectionToggleClickEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
-export { AccordionHeading, AccordionSectionState } from "./components/accordion/components/accordion-section.interfaces";
+export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
+export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
 export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
 export { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "56.0.0",
+  "version": "56.1.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
     "@types/animejs": "^3.1.7",
     "animejs": "3.2.1",
     "clsx": "^1.2.1",
-    "dso-toolkit": "^56.0.0",
+    "dso-toolkit": "^56.1.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.4.3",
     "popper-max-size-modifier": "^0.2.0",

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

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

@@ -1,2 +0,0 @@
-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