@dso-toolkit/core 68.3.0 → 68.5.0

package/dist/dso-toolkit/p-7e0130d8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["labelCss","DsoLabelStyle0","resizeObserver","ResizeObserver","debounce","entries","forEach","target","isDsoLabelComponent","_truncateLabel","element","tagName","hasEllipses","el","scrollWidth","clientWidth","Label","constructor","hostRef","this","isTruncated","labelText","watchRemovable","removable","startMutationObserver","stopMutationObserver","watchTruncate","truncate","startTruncate","stopTruncate","keyDownListener","event","key","textHover","textFocus","setTimeout","labelContent","syncLabelText","_b","_a","host","textContent","trim","componentDidLoad","disconnectedCallback","mutationObserver","MutationObserver","observe","characterData","childList","subtree","attributes","force","disconnect","unobserve","render","h","Fragment","class","clsx","status","compact","removeHover","removeFocus","name","ref","tabindex","undefined","onMouseEnter","onMouseLeave","onFocus","onBlur","type","onClick","e","dsoRemoveClick","emit","icon","stateless","id","active","position","strategy","maxSize","enabled","phase","requiresIfExists","fn","_ref","state","options","overflow","detectOverflow","_ref2","modifiersData","preventOverflow","x","y","_state$rects$popper","rects","popper","width","height","_state$placement$spli","placement","split","basePlacement","widthProp","heightProp","tooltipCss","DsoTooltipStyle0","transitionDuration","applyMaxSize","beforeWrite","requires","styles","Object","assign","maxWidth","Tooltip","descriptive","noArrow","callbacks","activate","deactivate","isConnected","matches","hidden","deactivatePopper","destroy","_Tooltip_target","set","watchPosition","setOptions","watchStrategy","setStrategy","parentNode","document","ShadowRoot","parentElement","hasOverflow","watchActive","activatePopper","modifiers","addEventListener","removeEventListener","listenClick","stopPropagation","tooltip","shadowRoot","querySelector","HTMLElement","Error","componentDidRender","update","Host","role","in","small","createPopper","__classPrivateFieldGet","initializeTarget","__classPrivateFieldSet","console","warn","rootNode","getRootNode","Document","reference"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@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-inline-size: 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-inline-size: 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-inline-size: 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  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\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 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({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: LabelStatus;\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  @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 = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\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  @Listen(\"keydown\", { target: \"document\" })\r\n  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  /**\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?.trim() ?? \"\";\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    this.stopMutationObserver(true);\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    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\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    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\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","import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n  name: 'maxSize',\n  enabled: true,\n  phase: 'main',\n  requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n  fn: function fn(_ref) {\n    var state = _ref.state,\n        name = _ref.name,\n        options = _ref.options;\n    var overflow = detectOverflow(state, options);\n\n    var _ref2 = state.modifiersData.preventOverflow || {\n      x: 0,\n      y: 0\n    },\n        x = _ref2.x,\n        y = _ref2.y;\n\n    var _state$rects$popper = state.rects.popper,\n        width = _state$rects$popper.width,\n        height = _state$rects$popper.height;\n\n    var _state$placement$spli = state.placement.split('-'),\n        basePlacement = _state$placement$spli[0];\n\n    var widthProp = basePlacement === 'left' ? 'left' : 'right';\n    var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n    state.modifiersData[name] = {\n      width: width - overflow[widthProp] - x,\n      height: height - overflow[heightProp] - y\n    };\n  }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n  visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n  font-family: typography.$font-family-base;\r\n  // We deliberately do NOT reset font-size.\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: typography.$line-height-base;\r\n  line-break: auto;\r\n  text-align: start;\r\n  text-decoration: none;\r\n  text-shadow: none;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  word-break: break-word;\r\n  word-spacing: normal;\r\n  word-wrap: normal;\r\n  white-space: normal;\r\n\r\n  --link-color: #{colors.$grasgroen};\r\n  display: block;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n  font-size: typography.$font-size-small;\r\n  opacity: 0;\r\n  position: absolute;\r\n  transition: opacity tooltip-variables.$transition-duration linear;\r\n  z-index: zindex.$tooltip;\r\n\r\n  &.in {\r\n    opacity: tooltip-variables.$opacity;\r\n\r\n    .tooltip-inner {\r\n      max-block-size: 200vh; // an extreme max-block-size, just to be sure it always fits\r\n      overflow: auto;\r\n      visibility: visible;\r\n      padding-block: tooltip-variables.$padding-block; // set padding-block here to hide the div when the .in class is not active\r\n      padding-inline: tooltip-variables.$padding-inline; // set padding-inline here to hide the div when the .in class is not active\r\n    }\r\n  }\r\n\r\n  &:not(.in) {\r\n    .tooltip-inner {\r\n      max-block-size: 0; // hide the element\r\n      overflow: hidden;\r\n      visibility: hidden;\r\n      transition: all 0s linear tooltip-variables.$transition-duration; // delay all the properties with a 0s linear animation till the parent opacity animation time has passed\r\n    }\r\n  }\r\n\r\n  .tooltip-inner {\r\n    background-color: colors.$wit;\r\n    border-radius: tooltip-variables.$border-radius;\r\n    color: colors.$grijs-90;\r\n    display: inline-block;\r\n    font-size: typography.$root-font-size-base;\r\n    max-inline-size: tooltip-variables.$max-inline-size;\r\n    position: relative;\r\n\r\n    &.dso-small {\r\n      max-inline-size: tooltip-variables.$max-inline-size-small;\r\n    }\r\n  }\r\n\r\n  .tooltip-arrow {\r\n    border-color: transparent;\r\n    border-style: solid;\r\n    block-size: 0;\r\n    inline-size: 0;\r\n  }\r\n\r\n  &[data-popper-placement=\"top\"] {\r\n    margin-block-start: -3px;\r\n    padding-block: tooltip-variables.$arrow-inline-size;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      inset-block-end: 0;\r\n      border-block-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-block-end-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"right\"] {\r\n    margin-inline-start: 3px;\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n    .tooltip-arrow {\r\n      inset-inline-start: 0;\r\n      border-inline-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-inline-start-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"bottom\"] {\r\n    margin-block-start: 3px;\r\n    padding-block: tooltip-variables.$arrow-inline-size;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      inset-block-start: 0;\r\n      border-block-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-block-start-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"left\"] {\r\n    margin-inline-start: -3px;\r\n    margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n    .tooltip-arrow {\r\n      inset-inline-end: 0;\r\n      border-inline-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-inline-end-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch, ComponentInterface } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n  name: \"applyMaxSize\",\r\n  enabled: true,\r\n  phase: beforeWrite,\r\n  requires: [\"maxSize\"],\r\n  fn({ state }: { state: PopperState }) {\r\n    let { width } = state.modifiersData.maxSize;\r\n    if (width < 160) {\r\n      width = 160;\r\n    }\r\n\r\n    state.styles.popper = {\r\n      ...state.styles.popper,\r\n      maxWidth: `${width}px`,\r\n    };\r\n  },\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-tooltip\",\r\n  styleUrl: \"tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tooltip implements ComponentInterface {\r\n  /**\r\n   * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n   */\r\n  @Prop({\r\n    reflect: true,\r\n  })\r\n  descriptive = false;\r\n\r\n  /**\r\n   * Set position of tooltip relative to target\r\n   */\r\n  @Prop()\r\n  position: Placement = \"top\";\r\n\r\n  /**\r\n   * Set position strategy of tooltip\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  /**\r\n   * Set attribute `no-arrow` to hide the arrow\r\n   */\r\n  @Prop()\r\n  noArrow = false;\r\n\r\n  /**\r\n   * Deactivates mouseover behaviour\r\n   */\r\n  @Prop()\r\n  stateless?: boolean;\r\n\r\n  /**\r\n   * Defines if the tooltip has a smaller max-width\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  active = false;\r\n\r\n  /**\r\n   * Activate the tooltip (Sets the `active` attribute)\r\n   */\r\n  @Method()\r\n  async activate(): Promise<void> {\r\n    this.active = true;\r\n  }\r\n\r\n  /**\r\n   * Deactivate the tooltip (Removes the `active` attribute)\r\n   */\r\n  @Method()\r\n  async deactivate(): Promise<void> {\r\n    this.active = false;\r\n  }\r\n\r\n  @Watch(\"position\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.position,\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.element;\r\n    while (element && element.parentNode !== document) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Watch(\"active\")\r\n  watchActive() {\r\n    if (this.active) {\r\n      this.activatePopper();\r\n\r\n      if (!this.stateless) {\r\n        setTimeout(() => {\r\n          this.popper?.setOptions({\r\n            modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n          });\r\n          document.addEventListener(\"keydown\", this.keyDownListener);\r\n        });\r\n      }\r\n    } else {\r\n      document.removeEventListener(\"keydown\", this.keyDownListener);\r\n      this.deactivatePopper();\r\n    }\r\n  }\r\n\r\n  @Element()\r\n  private element!: HTMLDsoTooltipElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  private callbacks: TooltipCallbacks = {\r\n    activate: () => (this.active = true),\r\n    deactivate: () => {\r\n      // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding\r\n      // van setTimeout() met 2ms.\r\n      setTimeout(() => {\r\n        if (this.element.isConnected) {\r\n          this.active = false;\r\n        }\r\n      }, 2);\r\n    },\r\n  };\r\n\r\n  private onMouseLeave = () => {\r\n    if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n      this.callbacks.deactivate();\r\n    }\r\n  };\r\n\r\n  @State()\r\n  private hidden = true;\r\n\r\n  private listenClick(e: MouseEvent) {\r\n    e.stopPropagation();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n    if (!(tooltip instanceof HTMLElement)) {\r\n      throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.popper?.destroy();\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n\r\n    this.target = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active) {\r\n      this.popper?.update();\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.deactivate();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n        <div class={clsx(\"tooltip\", { in: this.active })}>\r\n          {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n          <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private deactivatePopper = debounce(() => {\r\n    this.hidden = true;\r\n    this.popper?.destroy();\r\n    this.popper = undefined;\r\n  }, transitionDuration);\r\n\r\n  private activatePopper(): void {\r\n    this.hidden = false;\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n    if (this.target && tooltip instanceof HTMLElement) {\r\n      this.popper = createPopper(this.target, tooltip, {\r\n        placement: this.position,\r\n        modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n      });\r\n\r\n      this.setStrategy();\r\n    }\r\n  }\r\n\r\n  private get target(): HTMLElement | undefined {\r\n    return this.#target ?? this.initializeTarget();\r\n  }\r\n\r\n  private set target(element: HTMLElement | undefined) {\r\n    this.#target = element;\r\n  }\r\n\r\n  #target?: HTMLElement;\r\n\r\n  private initializeTarget(): HTMLElement | undefined {\r\n    const id = this.element.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.element.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    this.#target = reference;\r\n    return reference;\r\n  }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n  activate: () => void;\r\n  deactivate: () => void;\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-9dbebb2e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as n,F as i,a as o}from"./p-abc59cdf.js";const a=":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";const t=a;const s=class{constructor(n){e(this,n);this.dsoChange=r(this,"dsoChange",3);this.unit=""}render(){const e=this.min||0;const r=this.max||100;const o=this.step||1;return n(i,null,this.description&&n("span",{key:"4aca50462747fbb2e5423839c73f7b99b6469484",id:"description",hidden:true},this.description),n("span",{key:"5c05919900e0b44f93d2693a9ee8bc31b00cd3d4",class:"counter min","aria-hidden":"true"},e,this.unit),n("input",{key:"5fc2fec660a3c12a0c4c2bd920f9b18593a45c50",type:"range",min:this.min,max:this.max,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":undefined,onChange:n=>this.dsoChange.emit({originalEvent:n,value:n.target instanceof HTMLInputElement?parseInt(n.target.value,10):undefined,max:r,min:e,step:o})}),n("span",{key:"a8d3d2e94780ce09f59cb260ec98d60d1d70a39e",class:"counter max","aria-hidden":"true"},r,this.unit))}get host(){return o(this)}};s.style=t;export{s as dso_input_range};
-//# sourceMappingURL=p-9dbebb2e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["annotationCss","DsoAnnotationLocatieStyle0","AnnotationLocatie","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","class","value","locatieNoemer","gewijzigdeLocatie","AnnotationGewijzigdeLocatie","Heading","_a","children","heading","mode","href","onClick","props","__rest","headingElement","Object","assign","documentComponentCss","DsoDocumentComponentStyle0","wijzigactieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","DocumentComponent","open","filtered","notApplicable","genesteOntwerpInformatie","bevatOntwerpInformatie","annotated","gereserveerd","vervallen","openAnnotation","handleHeadingClick","e","dsoTableOfContentsClick","emit","originalEvent","isModifiedEvent","type","dsoOpenToggle","handleOzonContentAnchorClick","dsoOzonContentAnchorClick","ozonContentAnchorClick","detail","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","wijzigactieLabel","wijzigactie","suffix","showOntwerpBadge","collapsible","label","nummer","opschrift","alternativeTitle","showHeading","Host","part","toString","icon","id","content","onDsoAnchorClick","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","status","compact","dsoAnnotationToggle","onDsoCloseClick","closeButtonLabel","slot","name","inhoud"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  word-break: break-word;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h, FunctionalComponent, VNode } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\nimport { DocumentComponentMode } from \"./document-component.models\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  mode: DocumentComponentMode;\r\n  href?: string;\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, mode, href, onClick, ...props }, children) => {\r\n  let headingElement: VNode;\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      headingElement = (\r\n        <h2 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h2>\r\n      );\r\n      break;\r\n    case \"h3\":\r\n      headingElement = (\r\n        <h3 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h3>\r\n      );\r\n      break;\r\n    case \"h4\":\r\n      headingElement = (\r\n        <h4 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h4>\r\n      );\r\n      break;\r\n    case \"h5\":\r\n      headingElement = (\r\n        <h5 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h5>\r\n      );\r\n      break;\r\n    case \"h6\":\r\n      headingElement = (\r\n        <h6 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h6>\r\n      );\r\n  }\r\n\r\n  if (mode === \"table-of-contents\" && href) {\r\n    return (\r\n      <a href={href} onClick={onClick} class=\"heading-anchor\">\r\n        {headingElement}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return headingElement;\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n\r\n  --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-block-start: units.$u1 * 0.5;\r\n  padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  @include delete.root($strikethrough: false);\r\n\r\n  --_dso-document-component-text-decoration: line-through;\r\n}\r\n\r\n.heading-element,\r\n.content {\r\n  @include delete.strikethrough($_value: var(--_dso-document-component-text-decoration));\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    inset-inline-start: -3px;\r\n    position: absolute;\r\n    display: block;\r\n    inline-size: 3px;\r\n    inset-block-start: 0;\r\n    inset-block-end: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]),\r\n:host([open-annotation]) {\r\n  .annotation-container,\r\n  .heading-container {\r\n    margin-block-end: units.$u1;\r\n  }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.heading-anchor {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n\r\n  @include anchor.root();\r\n\r\n  text-decoration: none;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n#heading-title {\r\n  display: block;\r\n}\r\n\r\n:host([not-collapsible]) {\r\n  .heading-container {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n\r\n  .heading-element {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible])) {\r\n  --link-color: document-component.$heading-anchor-color;\r\n  --link-hover-color: document-component.$heading-anchor-hover-color;\r\n\r\n  .heading-element {\r\n    cursor: pointer;\r\n    @include anchor.pseudo();\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: document-component.$indent;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]) {\r\n  .heading-container {\r\n    padding-inline-start: document-component.$indent-table-of-contents;\r\n  }\r\n\r\n  .heading-element {\r\n    color: inherit;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"][type=\"ARTIKEL\"]) {\r\n  .heading-element {\r\n    color: inherit;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]:not([type=\"HOOFDSTUK\"])) {\r\n  .heading-element {\r\n    font-weight: normal;\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  align-items: start;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n  .heading-element,\r\n  .toggle-button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"][open-annotation]) {\r\n  .annotation-container {\r\n    margin-block-start: units.$u1;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n  padding-inline-end: units.$u1;\r\n}\r\n\r\n.annotation-container {\r\n  padding-inline-end: units.$u1;\r\n\r\n  dso-panel {\r\n    --_dso-panel-body-background-color: #{colors.$wit};\r\n  }\r\n}\r\n\r\n:host(:where([annotations-wijzigactie=\"verwijder\"])) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$rood-10};\r\n      --_dso-renvooi-text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n:host([annotations-wijzigactie=\"voegtoe\"]) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$lime-10};\r\n    }\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentAnnotationsWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n  DocumentComponentMode,\r\n  DocumentComponentTableOfContentsClickEvent,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation is opened, set this to true.\r\n   */\r\n  @Prop({ reflect: true })\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * The wijzigactie for all annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: DocumentComponentMode = \"document\";\r\n\r\n  /**\r\n   * The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user clicks the heading in mode=\"table-of-contents\".\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.mode === \"table-of-contents\") {\r\n      this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n    } else if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n    this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  private showOntwerpBadge(): boolean {\r\n    return (\r\n      this.genesteOntwerpInformatie &&\r\n      !this.bevatOntwerpInformatie &&\r\n      ((!this.open && this.mode === \"document\") || this.mode === \"table-of-contents\")\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n    const collapsible = !!(\r\n      (this.label || this.nummer || this.opschrift || this.alternativeTitle) &&\r\n      this.type !== \"LID\"\r\n    );\r\n\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this.label ||\r\n      this.nummer ||\r\n      this.opschrift ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading\r\n                heading={this.heading}\r\n                class=\"heading-element\"\r\n                onClick={this.handleHeadingClick}\r\n                mode={this.mode}\r\n                href={this.href}\r\n              >\r\n                {collapsible && this.mode === \"document\" && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <span id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n                  {this.label || this.nummer || this.opschrift ? (\r\n                    <>\r\n                      {this.label && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.label}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.nummer && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.nummer}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.opschrift && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.opschrift}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    this.alternativeTitle\r\n                  )}\r\n                  {suffix && <span> - [{suffix}]</span>}\r\n                </span>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"recursive-toggle\"\r\n                  title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  onClick={this.handleRecursiveToggleClick}\r\n                >\r\n                  <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n                </button>\r\n              )}\r\n              {this.showOntwerpBadge() && (\r\n                <>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">\r\n                    Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.\r\n                  </dso-tooltip>\r\n                </>\r\n              )}\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && this.mode === \"document\" && (\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"dso-tertiary\"\r\n                      aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n                      aria-expanded={this.openAnnotation.toString()}\r\n                      onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    >\r\n                      <dso-icon icon=\"label\"></dso-icon>\r\n                      <span class=\"sr-only\">\r\n                        Kenmerken en kaartgegevens {this.openAnnotation ? \"verbergen\" : \"tonen\"}\r\n                      </span>\r\n                    </button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.openAnnotation && (\r\n          <div class=\"annotation-container\" part=\"_annotation-container\">\r\n            <dso-panel\r\n              id=\"annotations\"\r\n              onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n              closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n            >\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          </div>\r\n        )}\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === \"document\" && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["listButtonCss","DsoListButtonStyle0","ListButton","constructor","hostRef","this","checked","disabled","subcontentSlot","host","querySelector","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","characterData","childList","subtree","attributes","componentDidRender","_a","setAttribute","disconnectedCallback","disconnect","stepValue","e","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","handleSelectClick","preventDefault","undefined","dsoSelectedChange","min","max","Number","render","selected","h","key","class","clsx","onClick","id","type","value","name","sublabel","filter","s","join","htmlFor","label","subcontentPrefix","innerHTML","Fragment","icon"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n  & {\r\n    background-color: $background-color;\r\n    border-color: $border-color;\r\n    color: $color;\r\n  }\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.dso-input-number {\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  .dso-input-step-counter {\r\n    text-align: center;\r\n    inline-size: units.$ru3;\r\n    font-size: list-button-variables.$font-size-count;\r\n  }\r\n}\r\n\r\n.dso-button-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  &.dso-disabled {\r\n    > * {\r\n      @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        pointer-events: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  > * {\r\n    border-radius: 0;\r\n\r\n    &:first-child {\r\n      border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n    }\r\n\r\n    &:not(:first-child) {\r\n      border-inline-start-style: none !important;\r\n    }\r\n\r\n    &:last-child {\r\n      border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n    }\r\n\r\n    &:only-child {\r\n      border-radius: list-button-variables.$border-radius;\r\n    }\r\n  }\r\n\r\n  > .dso-input-number {\r\n    @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    flex-wrap: nowrap;\r\n    padding-block: 0;\r\n    padding-inline: units.$u2;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  > *:hover + .dso-input-number,\r\n  > *:focus + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *.dso-selected + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n\r\n    box-shadow:\r\n      inset 0 -1px 0 0 button.$secondary-border-color,\r\n      inset 0 1px 0 0 button.$secondary-border-color,\r\n      inset -1px 0 0 0 button.$secondary-border-color;\r\n  }\r\n\r\n  > *:active + .dso-input-number,\r\n  > *.active + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  > *.disabled + .dso-input-number,\r\n  > *[disabled] + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  .dso-list-button {\r\n    padding-inline-end: #{units.$u2 - 1};\r\n  }\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n\r\n  @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n  border-radius: button.$border-radius;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  font-weight: 600;\r\n  padding-block: #{units.$u2 - 1};\r\n  padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n  position: relative;\r\n  text-align: start;\r\n  white-space: normal;\r\n  inline-size: 100%;\r\n  cursor: pointer;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  &.disabled,\r\n  &[disabled] {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-selected {\r\n    border-color: colors.$grasgroen;\r\n    border-width: 1px;\r\n    box-shadow:\r\n      inset 0px 0px 0px 1px colors.$grasgroen,\r\n      inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n    &.dso-single-count {\r\n      @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n        border-inline-end: 0;\r\n        box-shadow:\r\n          colors.$grasgroen 0px 1px 0px 0px inset,\r\n          colors.$grasgroen 1px 0px 0px 0px inset,\r\n          colors.$grasgroen 0px -1px 0px 0px inset;\r\n      }\r\n    }\r\n  }\r\n\r\n  label {\r\n    cursor: inherit;\r\n  }\r\n\r\n  > span {\r\n    display: block;\r\n  }\r\n\r\n  .dso-sublabel {\r\n    font-weight: 400;\r\n    inline-size: 100%;\r\n    padding-inline-start: selectable.$size + units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    block-size: units.$u3;\r\n    color: colors.$grasgroen;\r\n    inset-block-start: #{units.$u2 - 1};\r\n    inset-inline-end: #{units.$u2 - 1};\r\n    inline-size: units.$u3;\r\n    page-break-before: always;\r\n    position: absolute;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    &.dso-selected.dso-single-count {\r\n      &::after {\r\n        inline-size: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    margin-block-start: list-button-variables.$margin-gap;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Fragment,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"dso-tertiary\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onClick={(e) => this.stepValue(e, \"decrement\")}\r\n                >\r\n                  <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                  <span class=\"sr-only\">Aantal verlagen</span>\r\n                </button>\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </>\r\n            )}\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onClick={(e) => this.stepValue(e, \"increment\")}\r\n            >\r\n              <dso-icon icon=\"plus-circle\"></dso-icon>\r\n              <span class=\"sr-only\">Aantal verhogen</span>\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}