@dso-toolkit/core 88.0.0 → 88.1.0

package/dist/components/image-overlay.js.map

@@ -1 +1 @@
-{"file":"image-overlay.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  position: relative;\r\n\r\n  .wrapper {\r\n    overflow: visible;\r\n    padding: 0;\r\n    border: 0;\r\n\r\n    &::backdrop {\r\n      background-color: color.scale(colors.$wit, $alpha: -20%);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n  opacity: 1;\r\n}\r\n\r\n.open {\r\n  opacity: 0;\r\n  position: absolute;\r\n  inset-inline-end: units.$u2;\r\n  inset-block-start: units.$u2;\r\n}\r\n\r\n.wrapper {\r\n  align-self: center;\r\n  box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n  line-height: 0;\r\n  outline: 4px solid colors.$wit;\r\n  z-index: zindex.$image-overlay;\r\n\r\n  .title {\r\n    background-color: colors.$wit;\r\n    font-weight: 700;\r\n    line-height: initial;\r\n    padding: units.$u1;\r\n    position: absolute;\r\n  }\r\n\r\n  img {\r\n    inline-size: auto;\r\n    block-size: auto;\r\n    max-inline-size: 100%;\r\n    max-block-size: calc(100vh - #{units.$u8});\r\n  }\r\n\r\n  .figuur-bijschrift:not([hidden]) {\r\n    display: block;\r\n    font-size: 0.75rem;\r\n    font-style: italic;\r\n    padding-block-end: units.$u1 * 1.5;\r\n    padding-block-start: units.$u2;\r\n  }\r\n}\r\n\r\n.close {\r\n  position: absolute;\r\n  inset-block-start: units.$u2;\r\n  inset-inline-end: units.$u2;\r\n}\r\n\r\nins.editaction-add {\r\n  display: inline-block;\r\n  margin-block-end: units.$u1;\r\n  padding: units.$u1;\r\n  @include insert.element();\r\n  @include insert.root();\r\n\r\n  .wrapper {\r\n    outline: none;\r\n    padding: units.$u1;\r\n    @include insert.root();\r\n\r\n    .editaction-label {\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .close {\r\n      inset-block-start: units.$u6;\r\n    }\r\n  }\r\n\r\n  .open {\r\n    inset-block-start: units.$u6;\r\n  }\r\n}\r\n\r\ndel.editaction-remove {\r\n  display: inline-block;\r\n  margin-block-end: units.$u1;\r\n  padding: units.$u1;\r\n  @include delete.root();\r\n\r\n  .wrapper {\r\n    outline: none;\r\n    padding: units.$u1;\r\n    @include delete.root();\r\n\r\n    .title {\r\n      text-decoration: line-through;\r\n    }\r\n\r\n    .editaction-label {\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .close {\r\n      inset-block-start: units.$u6;\r\n    }\r\n  }\r\n\r\n  .open {\r\n    inset-block-start: units.$u6;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-block-end: units.$u1;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  FunctionalComponent,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n  verwijder: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n  active: boolean;\r\n  src: string | undefined;\r\n  alt: string | undefined;\r\n  ref: (element: HTMLDialogElement | undefined) => void;\r\n  close: (e: Event) => void;\r\n  click: () => void;\r\n}> = ({ active, src, alt, ref, close, click }, children) =>\r\n  active &&\r\n  src && (\r\n    <dialog class=\"wrapper\" ref={ref} onClose={close} onClick={close}>\r\n      <div onClick={close}>\r\n        {children[2]}\r\n        {children[0]}\r\n        <img src={src} alt={alt} />\r\n        <dso-icon-button icon=\"times\" variant=\"map\" class=\"close\" label=\"Sluiten\" onDsoClick={click} />\r\n        {children[1]}\r\n      </div>\r\n    </dialog>\r\n  );\r\n\r\n@Component({\r\n  tag: \"dso-image-overlay\",\r\n  styleUrl: \"./image-overlay.scss\",\r\n  shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoImageOverlayElement;\r\n\r\n  /**\r\n   * The wijzigactie.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  zoomable = false;\r\n\r\n  private iconButtonElement: HTMLDsoIconButtonElement | undefined;\r\n\r\n  private wrapperElement: HTMLDialogElement | undefined;\r\n\r\n  private titelSlot: HTMLElement | null = null;\r\n\r\n  private bijschriftSlot: HTMLElement | null = null;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  @Listen(\"load\", { capture: true })\r\n  loadListener(event: Event) {\r\n    if (event.target instanceof HTMLImageElement) {\r\n      this.setZoomable(event.target);\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n    this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.resizeObserver = new ResizeObserver(\r\n      debounce(() => {\r\n        const imgElement = this.host.querySelector(\"img\");\r\n\r\n        if (imgElement instanceof HTMLImageElement) {\r\n          this.setZoomable(imgElement);\r\n        }\r\n      }, 200),\r\n    );\r\n\r\n    this.mutationObserver = new MutationObserver((e) => {\r\n      forceUpdate(this.host);\r\n\r\n      if (e[0]?.type === \"childList\") {\r\n        this.resizeObserver?.disconnect();\r\n        // <img> is gone or a new element.\r\n        this.initZoomableImage();\r\n      }\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      attributes: true,\r\n      subtree: true,\r\n      attributeFilter: [\"src\", \"alt\"],\r\n      childList: true,\r\n    });\r\n\r\n    this.initZoomableImage();\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active && !this.wrapperElement?.open) {\r\n      this.wrapperElement?.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  private initZoomableImage(): void {\r\n    const imgElement = this.host.querySelector(\"img\");\r\n\r\n    if (!(imgElement instanceof HTMLImageElement)) {\r\n      return;\r\n    }\r\n\r\n    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n    if (imgElement.complete) {\r\n      this.setZoomable(imgElement);\r\n    }\r\n\r\n    this.resizeObserver?.observe(imgElement);\r\n  }\r\n\r\n  private setZoomable(imageElement: HTMLImageElement): void {\r\n    const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n    this.zoomable = width < naturalWidth || height < naturalHeight;\r\n  }\r\n\r\n  private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n    return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\";\r\n  }\r\n\r\n  private dialogCloseEventListener = (e: Event) => {\r\n    if (e.target instanceof HTMLDialogElement) {\r\n      this.closeZoomedImage();\r\n    }\r\n  };\r\n\r\n  private closeZoomedImage() {\r\n    this.wrapperElement?.close();\r\n    this.active = false;\r\n  }\r\n\r\n  render() {\r\n    const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n    const editActionLabel: string | undefined =\r\n      (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;\r\n\r\n    const button = this.zoomable && (\r\n      <dso-icon-button\r\n        icon=\"external-link\"\r\n        class=\"open\"\r\n        variant=\"map\"\r\n        label=\"Afbeelding vergroot weergeven\"\r\n        ref={(element) => (this.iconButtonElement = element)}\r\n        onDsoClick={() => (this.active = true)}\r\n      />\r\n    );\r\n\r\n    if (this.wijzigactie === \"verwijder\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <del class=\"editaction-remove\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              close={this.dialogCloseEventListener}\r\n              click={() => this.closeZoomedImage()}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </del>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    if (this.wijzigactie === \"voegtoe\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <ins class=\"editaction-add\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              close={this.dialogCloseEventListener}\r\n              click={() => this.closeZoomedImage()}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </ins>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n        <Dimmer\r\n          active={this.active}\r\n          src={src}\r\n          alt={alt}\r\n          ref={(element) => (this.wrapperElement = element)}\r\n          close={this.dialogCloseEventListener}\r\n          click={() => this.closeZoomedImage()}\r\n        >\r\n          {this.titelSlot && (\r\n            <div class=\"title\">\r\n              <slot name=\"titel\" />\r\n            </div>\r\n          )}\r\n          <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n            <slot name=\"bijschrift\" />\r\n          </div>\r\n        </Dimmer>\r\n        <slot />\r\n        {button}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"image-overlay.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  position: relative;\r\n\r\n  .wrapper {\r\n    overflow: visible;\r\n    padding: 0;\r\n    border: 0;\r\n\r\n    &::backdrop {\r\n      background-color: color.scale(colors.$wit, $alpha: -20%);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n  opacity: 1;\r\n}\r\n\r\n.open {\r\n  opacity: 0;\r\n  position: absolute;\r\n  inset-inline-end: units.$u2;\r\n  inset-block-start: units.$u2;\r\n}\r\n\r\n.wrapper {\r\n  align-self: center;\r\n  box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n  line-height: 0;\r\n  outline: 4px solid colors.$wit;\r\n  z-index: zindex.$image-overlay;\r\n\r\n  .title {\r\n    background-color: colors.$wit;\r\n    font-weight: 700;\r\n    line-height: initial;\r\n    padding: units.$u1;\r\n    position: absolute;\r\n  }\r\n\r\n  img {\r\n    inline-size: auto;\r\n    block-size: auto;\r\n    max-inline-size: 100%;\r\n    max-block-size: calc(100vh - #{units.$u8});\r\n  }\r\n\r\n  .figuur-bijschrift:not([hidden]) {\r\n    display: block;\r\n    font-size: 0.75rem;\r\n    font-style: italic;\r\n    padding-block-end: units.$u1 * 1.5;\r\n    padding-block-start: units.$u2;\r\n  }\r\n}\r\n\r\n.close {\r\n  position: absolute;\r\n  inset-block-start: units.$u2;\r\n  inset-inline-end: units.$u2;\r\n}\r\n\r\nins.editaction-add {\r\n  display: inline-block;\r\n  margin-block-end: units.$u1;\r\n  padding: units.$u1;\r\n  @include insert.element();\r\n  @include insert.root();\r\n\r\n  .wrapper {\r\n    outline: none;\r\n    padding: units.$u1;\r\n    @include insert.root();\r\n\r\n    .editaction-label {\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .close {\r\n      inset-block-start: units.$u6;\r\n    }\r\n  }\r\n\r\n  .open {\r\n    inset-block-start: units.$u6;\r\n  }\r\n}\r\n\r\ndel.editaction-remove {\r\n  display: inline-block;\r\n  margin-block-end: units.$u1;\r\n  padding: units.$u1;\r\n  @include delete.root();\r\n\r\n  .wrapper {\r\n    outline: none;\r\n    padding: units.$u1;\r\n    @include delete.root();\r\n\r\n    .title {\r\n      text-decoration: line-through;\r\n    }\r\n\r\n    .editaction-label {\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .close {\r\n      inset-block-start: units.$u6;\r\n    }\r\n  }\r\n\r\n  .open {\r\n    inset-block-start: units.$u6;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-block-end: units.$u1;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  FunctionalComponent,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n  verwijder: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n  active: boolean;\r\n  src: string | undefined;\r\n  alt: string | undefined;\r\n  ref: (element: HTMLDialogElement | undefined) => void;\r\n  close: (e: Event) => void;\r\n  click: () => void;\r\n}> = ({ active, src, alt, ref, close, click }, children) =>\r\n  active &&\r\n  src && (\r\n    <dialog class=\"wrapper\" ref={ref} onClose={close} onClick={close}>\r\n      <div onClick={close}>\r\n        {children[2]}\r\n        {children[0]}\r\n        <img src={src} alt={alt} />\r\n        <dso-icon-button icon=\"times\" variant=\"map\" class=\"close\" label=\"Sluiten\" onDsoClick={click} />\r\n        {children[1]}\r\n      </div>\r\n    </dialog>\r\n  );\r\n\r\n@Component({\r\n  tag: \"dso-image-overlay\",\r\n  styleUrl: \"./image-overlay.scss\",\r\n  shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoImageOverlayElement;\r\n\r\n  /**\r\n   * The wijzigactie.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  zoomable = false;\r\n\r\n  private iconButtonElement: HTMLDsoIconButtonElement | undefined;\r\n\r\n  private wrapperElement: HTMLDialogElement | undefined;\r\n\r\n  private titelSlot: HTMLElement | null = null;\r\n\r\n  private bijschriftSlot: HTMLElement | null = null;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  @Listen(\"load\", { capture: true })\r\n  loadListener(event: Event) {\r\n    if (event.target instanceof HTMLImageElement) {\r\n      this.setZoomable(event.target);\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n    this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.resizeObserver = new ResizeObserver(\r\n      debounce(() => {\r\n        const imgElement = this.host.querySelector(\"img\");\r\n\r\n        if (imgElement instanceof HTMLImageElement) {\r\n          this.setZoomable(imgElement);\r\n        }\r\n      }, 200),\r\n    );\r\n\r\n    this.mutationObserver = new MutationObserver((e) => {\r\n      forceUpdate(this.host);\r\n\r\n      if (e[0]?.type === \"childList\") {\r\n        this.resizeObserver?.disconnect();\r\n        // <img> is gone or a new element.\r\n        this.initZoomableImage();\r\n      }\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      attributes: true,\r\n      subtree: true,\r\n      attributeFilter: [\"src\", \"alt\"],\r\n      childList: true,\r\n    });\r\n\r\n    this.initZoomableImage();\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active && !this.wrapperElement?.open) {\r\n      this.wrapperElement?.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  private initZoomableImage(): void {\r\n    const imgElement = this.host.querySelector(\"img\");\r\n\r\n    if (!(imgElement instanceof HTMLImageElement)) {\r\n      return;\r\n    }\r\n\r\n    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n    if (imgElement.complete) {\r\n      this.setZoomable(imgElement);\r\n    }\r\n\r\n    this.resizeObserver?.observe(imgElement);\r\n  }\r\n\r\n  private setZoomable(imageElement: HTMLImageElement): void {\r\n    const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n    this.zoomable = width < naturalWidth || height < naturalHeight;\r\n  }\r\n\r\n  private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n    return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\";\r\n  }\r\n\r\n  private dialogCloseEventListener = (e: Event) => {\r\n    if (e.target instanceof HTMLDialogElement) {\r\n      this.closeZoomedImage();\r\n    }\r\n  };\r\n\r\n  private closeZoomedImage() {\r\n    this.wrapperElement?.close();\r\n    this.active = false;\r\n  }\r\n\r\n  render() {\r\n    const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n    const editActionLabel: string | undefined =\r\n      (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;\r\n\r\n    const button = this.zoomable && (\r\n      <dso-icon-button\r\n        icon=\"external-link\"\r\n        class=\"open\"\r\n        variant=\"map\"\r\n        label=\"Afbeelding vergroot weergeven\"\r\n        ref={(element) => (this.iconButtonElement = element)}\r\n        onDsoClick={() => (this.active = true)}\r\n      />\r\n    );\r\n\r\n    if (this.wijzigactie === \"verwijder\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <del class=\"editaction-remove\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              close={this.dialogCloseEventListener}\r\n              click={() => this.closeZoomedImage()}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </del>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    if (this.wijzigactie === \"voegtoe\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <ins class=\"editaction-add\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              close={this.dialogCloseEventListener}\r\n              click={() => this.closeZoomedImage()}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </ins>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n        <Dimmer\r\n          active={this.active}\r\n          src={src}\r\n          alt={alt}\r\n          ref={(element) => (this.wrapperElement = element)}\r\n          close={this.dialogCloseEventListener}\r\n          click={() => this.closeZoomedImage()}\r\n        >\r\n          {this.titelSlot && (\r\n            <div class=\"title\">\r\n              <slot name=\"titel\" />\r\n            </div>\r\n          )}\r\n          <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n            <slot name=\"bijschrift\" />\r\n          </div>\r\n        </Dimmer>\r\n        <slot />\r\n        {button}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/info-button.js

@@ -1,10 +1,10 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, transformTag } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, transformTag } from '@stencil/core/internal/client';
 import { p as positionTooltip, T as Tooltip } from './tooltip.functional-component.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './scrollable.js';
 
-const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;display:inline-block}*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s;max-inline-size:640px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:0;padding-inline:0;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);vertical-align:top}`;
+const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;display:inline-block}*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s;max-inline-size:640px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:0;padding-inline:0;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{vertical-align:top;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px)}`;
 
 const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTMLElement {
     constructor(registerHost) {
@@ -26,21 +26,19 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
          * The placement of the Toggletip on click.
          */
         this.toggletipPlacement = "top";
-        this.hover = false;
         this.toggletipActive = false;
-        this.focusOutHandler = (event) => {
-            var _a;
-            if (!this.host.contains(event.relatedTarget)) {
-                this.toggletipActive = false;
-                (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
-            }
-        };
+        this.hasToggletip = false;
         this.keyDownHandler = (event) => {
-            var _a;
             if (!this.toggletipActive)
                 return;
             if (event.key === "Escape") {
                 this.toggletipActive = false;
+            }
+        };
+        this.focusOutHandler = (event) => {
+            var _a;
+            if (!this.host.contains(event.relatedTarget)) {
+                this.toggletipActive = false;
                 (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
             }
         };
@@ -57,14 +55,9 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
             (_c = (_b = this.button) === null || _b === void 0 ? void 0 : _b.setFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
     }
-    get isToggletipMode() {
-        return !!this.host.querySelector("[slot='toggletip']");
-    }
     handleToggle(originalEvent) {
-        var _a;
-        if (this.isToggletipMode) {
+        if (this.hasToggletip) {
             this.toggletipActive = !this.toggletipActive;
-            (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.showPopover();
         }
         else {
             this.dsoToggle.emit({ originalEvent, active: !this.active });
@@ -76,14 +69,13 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
         this.cleanUp = undefined;
     }
     componentDidRender() {
-        var _a, _b;
-        if (!this.isToggletipMode) {
+        var _a, _b, _c;
+        if (!this.hasToggletip) {
             (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
             this.cleanupTooltip();
             return;
         }
         if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {
-            (_b = this.toggletipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
             this.cleanUp = positionTooltip({
                 referenceElement: this.button,
                 tipRef: this.toggletipElRef,
@@ -92,10 +84,19 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
                 restrictContentElement: this.restrictContentElement,
             });
         }
+        if (this.cleanUp) {
+            if (this.toggletipActive) {
+                (_b = this.toggletipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
+            }
+            else {
+                (_c = this.toggletipElRef) === null || _c === void 0 ? void 0 : _c.hidePopover();
+                this.cleanupTooltip();
+            }
+        }
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => {
-            forceUpdate(this.host);
+            this.hasToggletip = !!this.host.querySelector("[slot='toggletip']");
         });
         this.mutationObserver.observe(this.host, {
             childList: true,
@@ -109,19 +110,19 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '0edb498762c57aac0e2fcd0efdcd54066e705e7c', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false), onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover || this.toggletipActive ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (h(Host, { key: '731a5752654925228e0116b60ae106eda7ad08bc', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
-        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.hover || this.toggletipActive ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))), this.isToggletipMode !== null && (h(Tooltip, { key: 'a1aac908e69a86fb00001730ab027089e9b21ecc', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '14cab11c5e9a100e93729cc7d4d1f42604d8309b', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'a5607eba0612c624da9e8c2282bb47eb734ff819', name: "toggletip" }))))));
+        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.toggletipActive ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))), this.hasToggletip !== null && (h(Tooltip, { key: 'a80bae5b9e9e1126bbc4a0b0f72c59f0b90f33a8', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '73189990daa593b27f1a3d89e6dff380eedac29e', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '7b944161e7a9c0db7824628619623b97f82498fd', name: "toggletip" }))))));
     }
     get host() { return this; }
     static get style() { return infoButtonCss(); }
 }, [257, "dso-info-button", {
         "active": [516],
         "secondary": [4],
-        "label": [1],
-        "toggletipPlacement": [1, "toggletip-placement"],
-        "hover": [32],
+        "label": [513],
+        "toggletipPlacement": [513, "toggletip-placement"],
         "toggletipActive": [32],
+        "hasToggletip": [32],
         "setFocus": [64]
     }]);
 function defineCustomElement() {

package/dist/components/info-button.js.map

@@ -1 +1 @@
-{"file":"info-button.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n@use \"../../functional-components/tooltip\";\r\n\r\n:host {\r\n  --_dt-scrollable-border-radius: #{units.$u1 * 0.5};\r\n  --_dt-scrollable-container-padding-inline: #{tooltip.$padding-inline};\r\n  --_dt-scrollable-container-padding-block: #{tooltip.$padding-block};\r\n\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($padding-block-inner: 0, $padding-inline-inner: 0, $max-inline-size: 640px);\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\nbutton {\r\n  @include info-button.root();\r\n\r\n  vertical-align: top;\r\n  line-height: 1;\r\n}\r\n\r\ndso-icon-button {\r\n  margin-inline-start: var(--_dt-info-button-margin-inline-start, units.$u1);\r\n  vertical-align: top;\r\n}\r\n","import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLDsoIconButtonElement;\r\n  private buttonSecondary?: HTMLButtonElement;\r\n  private toggletipElRef?: HTMLDivElement;\r\n  private toggletipArrowElRef?: HTMLSpanElement;\r\n  private cleanUp: TooltipClean | undefined;\r\n  private mutationObserver?: MutationObserver;\r\n  private restrictContentElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInfoButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * The placement of the Toggletip on click.\r\n   */\r\n  @Prop()\r\n  toggletipPlacement: TooltipPlacement = \"top\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  @State()\r\n  toggletipActive = false;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    if (this.secondary) {\r\n      this.buttonSecondary?.focus();\r\n    } else {\r\n      this.button?.setFocus?.();\r\n    }\r\n  }\r\n\r\n  private get isToggletipMode(): boolean {\r\n    return !!this.host.querySelector(\"[slot='toggletip']\");\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    if (this.isToggletipMode) {\r\n      this.toggletipActive = !this.toggletipActive;\r\n      this.toggletipElRef?.showPopover();\r\n    } else {\r\n      this.dsoToggle.emit({ originalEvent, active: !this.active });\r\n    }\r\n  }\r\n\r\n  private focusOutHandler = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.toggletipActive = false;\r\n      this.toggletipElRef?.hidePopover();\r\n    }\r\n  };\r\n\r\n  private keyDownHandler = (event: KeyboardEvent) => {\r\n    if (!this.toggletipActive) return;\r\n\r\n    if (event.key === \"Escape\") {\r\n      this.toggletipActive = false;\r\n      this.toggletipElRef?.hidePopover();\r\n    }\r\n  };\r\n\r\n  private cleanupTooltip() {\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.isToggletipMode) {\r\n      this.toggletipElRef?.hidePopover();\r\n      this.cleanupTooltip();\r\n      return;\r\n    }\r\n\r\n    if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {\r\n      this.toggletipElRef?.showPopover();\r\n\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.button,\r\n        tipRef: this.toggletipElRef,\r\n        tipArrowRef: this.toggletipArrowElRef,\r\n        placementTip: this.toggletipPlacement,\r\n        restrictContentElement: this.restrictContentElement,\r\n      });\r\n    }\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      forceUpdate(this.host);\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.cleanupTooltip();\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n        onKeydown={this.keyDownHandler}\r\n        onFocusout={this.focusOutHandler}\r\n      >\r\n        {!this.secondary ? (\r\n          <dso-icon-button\r\n            variant=\"tertiary\"\r\n            label={this.label}\r\n            onDsoClick={(e) => this.handleToggle(e.detail.originalEvent)}\r\n            icon={this.active || this.hover || this.toggletipActive ? \"info-active\" : \"info\"}\r\n            ref={(element) => (this.button = element)}\r\n          />\r\n        ) : (\r\n          // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-info-secondary\"\r\n            aria-expanded={(this.active || this.toggletipActive).toString()}\r\n            onClick={(e) => this.handleToggle(e)}\r\n            ref={(element) => (this.buttonSecondary = element)}\r\n          >\r\n            <dso-icon icon={this.active || this.hover || this.toggletipActive ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n        {this.isToggletipMode !== null && (\r\n          <Tooltip\r\n            tipElementRef={(element) => (this.toggletipElRef = element)}\r\n            tipArrowElementRef={(element) => (this.toggletipArrowElRef = element)}\r\n            visible={this.toggletipActive}\r\n          >\r\n            <dso-scrollable ref={(element) => (this.restrictContentElement = element)}>\r\n              <slot name=\"toggletip\" />\r\n            </dso-scrollable>\r\n          </Tooltip>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"info-button.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n@use \"../../functional-components/tooltip\";\r\n\r\n:host {\r\n  --_dt-scrollable-border-radius: #{units.$u1 * 0.5};\r\n  --_dt-scrollable-container-padding-inline: #{tooltip.$padding-inline};\r\n  --_dt-scrollable-container-padding-block: #{tooltip.$padding-block};\r\n\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($padding-block-inner: 0, $padding-inline-inner: 0, $max-inline-size: 640px);\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\nbutton {\r\n  @include info-button.root();\r\n\r\n  vertical-align: top;\r\n  line-height: 1;\r\n}\r\n\r\ndso-icon-button {\r\n  vertical-align: top;\r\n  margin-inline-start: var(--_dt-info-button-margin-inline-start, units.$u1);\r\n}\r\n","import { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLDsoIconButtonElement;\r\n  private buttonSecondary?: HTMLButtonElement;\r\n  private toggletipElRef?: HTMLDivElement;\r\n  private toggletipArrowElRef?: HTMLSpanElement;\r\n  private cleanUp: TooltipClean | undefined;\r\n  private mutationObserver?: MutationObserver;\r\n  private restrictContentElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInfoButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * The placement of the Toggletip on click.\r\n   */\r\n  @Prop({ reflect: true })\r\n  toggletipPlacement: TooltipPlacement = \"top\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  @State()\r\n  toggletipActive = false;\r\n\r\n  @State()\r\n  hasToggletip = false;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    if (this.secondary) {\r\n      this.buttonSecondary?.focus();\r\n    } else {\r\n      this.button?.setFocus?.();\r\n    }\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    if (this.hasToggletip) {\r\n      this.toggletipActive = !this.toggletipActive;\r\n    } else {\r\n      this.dsoToggle.emit({ originalEvent, active: !this.active });\r\n    }\r\n  }\r\n\r\n  private keyDownHandler = (event: KeyboardEvent) => {\r\n    if (!this.toggletipActive) return;\r\n\r\n    if (event.key === \"Escape\") {\r\n      this.toggletipActive = false;\r\n    }\r\n  };\r\n\r\n  private focusOutHandler = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.toggletipActive = false;\r\n      this.toggletipElRef?.hidePopover();\r\n    }\r\n  };\r\n\r\n  private cleanupTooltip() {\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.hasToggletip) {\r\n      this.toggletipElRef?.hidePopover();\r\n      this.cleanupTooltip();\r\n      return;\r\n    }\r\n\r\n    if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {\r\n      this.cleanUp = positionTooltip({\r\n        referenceElement: this.button,\r\n        tipRef: this.toggletipElRef,\r\n        tipArrowRef: this.toggletipArrowElRef,\r\n        placementTip: this.toggletipPlacement,\r\n        restrictContentElement: this.restrictContentElement,\r\n      });\r\n    }\r\n\r\n    if (this.cleanUp) {\r\n      if (this.toggletipActive) {\r\n        this.toggletipElRef?.showPopover();\r\n      } else {\r\n        this.toggletipElRef?.hidePopover();\r\n        this.cleanupTooltip();\r\n      }\r\n    }\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      this.hasToggletip = !!this.host.querySelector(\"[slot='toggletip']\");\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.cleanupTooltip();\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onKeydown={this.keyDownHandler} onFocusout={this.focusOutHandler}>\r\n        {!this.secondary ? (\r\n          <dso-icon-button\r\n            variant=\"tertiary\"\r\n            label={this.label}\r\n            onDsoClick={(e) => this.handleToggle(e.detail.originalEvent)}\r\n            icon={this.active || this.toggletipActive ? \"info-active\" : \"info\"}\r\n            ref={(element) => (this.button = element)}\r\n          />\r\n        ) : (\r\n          // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-info-secondary\"\r\n            aria-expanded={(this.active || this.toggletipActive).toString()}\r\n            onClick={(e) => this.handleToggle(e)}\r\n            ref={(element) => (this.buttonSecondary = element)}\r\n          >\r\n            <dso-icon icon={this.active || this.toggletipActive ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n        {this.hasToggletip !== null && (\r\n          <Tooltip\r\n            tipElementRef={(element) => (this.toggletipElRef = element)}\r\n            tipArrowElementRef={(element) => (this.toggletipArrowElRef = element)}\r\n            visible={this.toggletipActive}\r\n          >\r\n            <dso-scrollable ref={(element) => (this.restrictContentElement = element)}>\r\n              <slot name=\"toggletip\" />\r\n            </dso-scrollable>\r\n          </Tooltip>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/info.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, transformTag
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon-button.js';
 
-const infoCss = () => `:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}`;
+const infoCss = () => `:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}`;
 
 const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
     constructor(registerHost) {

package/dist/components/info.js.map

@@ -1 +1 @@
-{"file":"info.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,0rDAA0rD,CAAC;;MCOrsD,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;;;;;;;;;IAmBf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC7D,CACH,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n  display: none;\r\n}\r\n\r\ndso-icon-button {\r\n  position: absolute;\r\n  inset-inline-end: units.$u1;\r\n  inset-block-start: units.$u1;\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","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <dso-icon-button\r\n            label=\"Sluiten\"\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n          />\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"info.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,i2DAAi2D,CAAC;;MCO52D,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAA,WAAA,CAAA;;;;;;;;;IAmBf,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC7D,CACH,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n  display: none;\r\n}\r\n\r\ndso-icon-button {\r\n  position: absolute;\r\n  inset-inline-end: units.$u1;\r\n  inset-block-start: units.$u1;\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","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <dso-icon-button\r\n            label=\"Sluiten\"\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n          />\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/label.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const labelCss = () => `:host{display:inline-block;max-inline-size:100%;font-weight:normal}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-primary{--_dso-icon-button-tertiary-color:#fff;background-color:#275937;color:#fff}.dso-label.dso-label-success{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-success{--_dso-icon-button-tertiary-color:#fff;background-color:#39870c;color:#fff}.dso-label.dso-label-warning{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#dcd400;color:#191919}.dso-label.dso-label-error{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-error{--_dso-icon-button-tertiary-color:#fff;background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-attention{--_dso-icon-button-tertiary-color:#fff;background-color:#8b4a6a;color:#fff}.dso-label.dso-label-filter{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-filter{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919;border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-toegevoegd{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}.dso-label.dso-label-verwijderd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-verwijderd{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}`;
+const labelCss = () => `:host{display:inline-block;max-inline-size:100%;font-weight:normal}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-primary{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#275937;color:#fff}.dso-label.dso-label-success{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-success{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#39870c;color:#fff}.dso-label.dso-label-warning{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#dcd400;color:#191919}.dso-label.dso-label-error{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-error{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.dso-label.dso-label-attention{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff}.dso-label.dso-label-filter{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-filter{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919;border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-toegevoegd{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}.dso-label.dso-label-verwijderd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.dso-label.dso-label-verwijderd{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}`;
 
 const resizeObserver = new ResizeObserver(debounce((entries) => {
     entries.forEach(({ target }) => {

package/dist/components/label.js.map

@@ -1 +1 @@
-{"file":"label.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.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  font-weight: normal;\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\r\ndso-icon-button {\r\n  float: inline-end;\r\n  margin-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\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={this.isTruncated ? \"toggle-anchor\" : null}\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            <dso-icon-button\r\n              variant=\"tertiary\"\r\n              icon=\"times\"\r\n              label={`Verwijder: ${this.labelText}`}\r\n              onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\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          )}\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"],"version":3}
+{"file":"label.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.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  font-weight: normal;\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\r\ndso-icon-button {\r\n  float: inline-end;\r\n  margin-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\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={this.isTruncated ? \"toggle-anchor\" : null}\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            <dso-icon-button\r\n              variant=\"tertiary\"\r\n              icon=\"times\"\r\n              label={`Verwijder: ${this.labelText}`}\r\n              onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\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          )}\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"],"version":3}

package/dist/components/ozon-content-toggletip.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Fragment, transformTag } from '@ste
 import { p as positionTooltip, T as Tooltip } from './tooltip.functional-component.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const ozonContentToggletipCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s;max-inline-size:480px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:8px;padding-inline:16px;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}:host{display:inline;--_dt-rich-content-margin-block:8px}::slotted(:not([slot=label])){cursor:default !important}.toggletip-button{display:inline-block;font-size:1em;font-weight:500;margin-block-end:0;text-decoration:none;touch-action:manipulation;text-align:start;user-select:none;vertical-align:middle}.toggletip-button:focus,.toggletip-button:focus-visible{outline-offset:2px}.toggletip-button:active{outline:0}.toggletip-button{border:0;color:var(--_dso-ozon-content-toggletip-color, #2b5780);line-height:1;padding:0;background-color:transparent;cursor:pointer;vertical-align:baseline;display:inline;overflow-wrap:break-word;user-select:text}.toggletip-button,.toggletip-button:hover,.toggletip-button:focus-visible,.toggletip-button:active{text-decoration-line:var(--_dso-ozon-content-toggletip-text-decoration, underline);text-decoration-style:dotted;text-underline-offset:15%}.toggletip-button dso-icon{margin-inline-start:4px;vertical-align:middle}.icon-container{position:relative;padding-inline-end:28px}.icon-container dso-icon{position:absolute}`;
+const ozonContentToggletipCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s;max-inline-size:480px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:8px;padding-inline:16px;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}:host{display:inline;--_dt-rich-content-margin-block:8px}::slotted(:not([slot=label])){cursor:default !important}.toggletip-button{display:inline-block;font-size:1em;font-weight:500;margin-block-end:0;text-decoration:none;touch-action:manipulation;text-align:start;user-select:none;vertical-align:middle;background-clip:padding-box}.toggletip-button:focus,.toggletip-button:focus-visible{outline-offset:2px}.toggletip-button:active{outline:0}.toggletip-button{border:0;color:var(--_dso-ozon-content-toggletip-color, #2b5780);line-height:1;padding:0;background-color:transparent;cursor:pointer;vertical-align:baseline;display:inline;overflow-wrap:break-word;user-select:text}.toggletip-button,.toggletip-button:hover,.toggletip-button:focus-visible,.toggletip-button:active{text-decoration-line:var(--_dso-ozon-content-toggletip-text-decoration, underline);text-decoration-style:dotted;text-underline-offset:15%}.toggletip-button dso-icon{margin-inline-start:4px;vertical-align:middle}.icon-container{position:relative;padding-inline-end:28px}.icon-container dso-icon{position:absolute}`;
 
 const ozonContentToggletip = /*@__PURE__*/ proxyCustomElement(class ozonContentToggletip extends HTMLElement {
     constructor(registerHost) {

package/dist/components/ozon-content-toggletip.js.map

@@ -1 +1 @@
-{"file":"ozon-content-toggletip.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.scss?tag=dso-ozon-content-toggletip&encapsulation=shadow","src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"../../../../functional-components/tooltip\";\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($max-inline-size: 60 * units.$u1);\r\n\r\n$icon-margin-inline-start: units.$u1 * 0.5;\r\n\r\n:host {\r\n  display: inline;\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n}\r\n\r\n::slotted(:not([slot=\"label\"])) {\r\n  cursor: default !important;\r\n}\r\n\r\n.toggletip-button {\r\n  @include button.base($modifiers: false);\r\n\r\n  border: 0;\r\n  color: var(--_dso-ozon-content-toggletip-color, colors.$donkerblauw);\r\n  line-height: 1;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  vertical-align: baseline;\r\n  display: inline;\r\n  overflow-wrap: break-word;\r\n  user-select: text;\r\n\r\n  &,\r\n  &:hover,\r\n  &:focus-visible,\r\n  &:active {\r\n    text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);\r\n    text-decoration-style: dotted;\r\n    text-underline-offset: 15%;\r\n  }\r\n\r\n  dso-icon {\r\n    margin-inline-start: $icon-margin-inline-start;\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n.icon-container {\r\n  position: relative;\r\n  padding-inline-end: units.$u3 + $icon-margin-inline-start;\r\n\r\n  dso-icon {\r\n    position: absolute;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content-toggletip\",\r\n  styleUrl: \"./ozon-content-toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  showToggletip = false;\r\n\r\n  private container: HTMLSpanElement | undefined;\r\n  private tooltip: HTMLElement | undefined;\r\n  private tooltipArrow: HTMLElement | undefined;\r\n\r\n  private toggle = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n  };\r\n\r\n  private close = () => {\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutHandler = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyUpHandler = (event: KeyboardEvent) => {\r\n    switch (event.key) {\r\n      case \"Escape\":\r\n        this.close();\r\n        return;\r\n      case \" \":\r\n      case \"Enter\":\r\n        this.toggle();\r\n        return;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.tooltip) {\r\n      if (this.active && !this.showToggletip) {\r\n        this.tooltip.showPopover();\r\n        this.showToggletip = true;\r\n      } else if (!this.active && this.showToggletip) {\r\n        this.tooltip?.hidePopover();\r\n        this.showToggletip = false;\r\n      }\r\n    }\r\n\r\n    let cleanUp: TooltipClean | undefined;\r\n\r\n    if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n      cleanUp = positionTooltip({\r\n        referenceElement: this.container,\r\n        tipRef: this.tooltip,\r\n        tipArrowRef: this.tooltipArrow,\r\n        placementTip: \"top\",\r\n      });\r\n    }\r\n\r\n    if (!this.active && cleanUp) {\r\n      cleanUp();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          class=\"toggletip-button\"\r\n          role=\"button\"\r\n          tabindex={0}\r\n          onClick={this.toggle}\r\n          onKeyDown={this.keyUpHandler}\r\n          onFocusout={this.focusOutHandler}\r\n          ref={(element) => (this.container = element)}\r\n        >\r\n          <span class=\"icon-container\">\r\n            <slot name=\"label\" />\r\n            <dso-icon icon={this.icon} />\r\n          </span>\r\n        </span>\r\n        <Tooltip\r\n          visible\r\n          onAfterHidden={() => {}}\r\n          tipElementRef={(element) => (this.tooltip = element)}\r\n          tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n        >\r\n          <slot />\r\n        </Tooltip>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"ozon-content-toggletip.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.scss?tag=dso-ozon-content-toggletip&encapsulation=shadow","src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"../../../../functional-components/tooltip\";\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($max-inline-size: 60 * units.$u1);\r\n\r\n$icon-margin-inline-start: units.$u1 * 0.5;\r\n\r\n:host {\r\n  display: inline;\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n}\r\n\r\n::slotted(:not([slot=\"label\"])) {\r\n  cursor: default !important;\r\n}\r\n\r\n.toggletip-button {\r\n  @include button.base($modifiers: false);\r\n\r\n  border: 0;\r\n  color: var(--_dso-ozon-content-toggletip-color, colors.$donkerblauw);\r\n  line-height: 1;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  vertical-align: baseline;\r\n  display: inline;\r\n  overflow-wrap: break-word;\r\n  user-select: text;\r\n\r\n  &,\r\n  &:hover,\r\n  &:focus-visible,\r\n  &:active {\r\n    text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);\r\n    text-decoration-style: dotted;\r\n    text-underline-offset: 15%;\r\n  }\r\n\r\n  dso-icon {\r\n    margin-inline-start: $icon-margin-inline-start;\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n.icon-container {\r\n  position: relative;\r\n  padding-inline-end: units.$u3 + $icon-margin-inline-start;\r\n\r\n  dso-icon {\r\n    position: absolute;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content-toggletip\",\r\n  styleUrl: \"./ozon-content-toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  showToggletip = false;\r\n\r\n  private container: HTMLSpanElement | undefined;\r\n  private tooltip: HTMLElement | undefined;\r\n  private tooltipArrow: HTMLElement | undefined;\r\n\r\n  private toggle = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n  };\r\n\r\n  private close = () => {\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutHandler = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyUpHandler = (event: KeyboardEvent) => {\r\n    switch (event.key) {\r\n      case \"Escape\":\r\n        this.close();\r\n        return;\r\n      case \" \":\r\n      case \"Enter\":\r\n        this.toggle();\r\n        return;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.tooltip) {\r\n      if (this.active && !this.showToggletip) {\r\n        this.tooltip.showPopover();\r\n        this.showToggletip = true;\r\n      } else if (!this.active && this.showToggletip) {\r\n        this.tooltip?.hidePopover();\r\n        this.showToggletip = false;\r\n      }\r\n    }\r\n\r\n    let cleanUp: TooltipClean | undefined;\r\n\r\n    if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n      cleanUp = positionTooltip({\r\n        referenceElement: this.container,\r\n        tipRef: this.tooltip,\r\n        tipArrowRef: this.tooltipArrow,\r\n        placementTip: \"top\",\r\n      });\r\n    }\r\n\r\n    if (!this.active && cleanUp) {\r\n      cleanUp();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          class=\"toggletip-button\"\r\n          role=\"button\"\r\n          tabindex={0}\r\n          onClick={this.toggle}\r\n          onKeyDown={this.keyUpHandler}\r\n          onFocusout={this.focusOutHandler}\r\n          ref={(element) => (this.container = element)}\r\n        >\r\n          <span class=\"icon-container\">\r\n            <slot name=\"label\" />\r\n            <dso-icon icon={this.icon} />\r\n          </span>\r\n        </span>\r\n        <Tooltip\r\n          visible\r\n          onAfterHidden={() => {}}\r\n          tipElementRef={(element) => (this.tooltip = element)}\r\n          tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n        >\r\n          <slot />\r\n        </Tooltip>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}