@dso-toolkit/core 73.1.0 → 73.2.1

package/dist/esm/dso-tabs.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-tabs.entry.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@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 \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dso-tabs.entry.js","sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@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 \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Host, forceUpdate, h } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/dso-toggletip.entry.js

@@ -48,7 +48,7 @@ const Toggletip = class {
         };
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: '111128db00e6c05e29bdee109ccc04faddb86c66', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '42728fdc33b9c2994a6a3dc78ef487beb2c7acab', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '96d983d968250a2e81727d90990e3145fb2ed1fc' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: 'ba15af3240f90d815cf626e335d70729ec5b9fce', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '392f8b42eeee84174e57f68fada10a0c8a30adcb', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '02b455171f94b769a36e22aaeb0ad28672293b30' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-toggletip.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-toggletip.entry.js","sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n  // tooltip arrow placement exceptions\r\n  --tooltip-margin-block-start: 0;\r\n  --tooltip-margin-inline-start: 3px;\r\n  --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n  z-index: zindex.$tooltip;\r\n}\r\n","import { h, Component, Fragment, Element, Prop, State } from \"@stencil/core\";\r\nimport { Placement } from \"@popperjs/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: Placement = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\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    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (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 keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip\r\n          stateless\r\n          descriptive\r\n          id=\"toggle\"\r\n          strategy=\"absolute\"\r\n          active={this.active}\r\n          position={this.position}\r\n          small={this.small}\r\n        >\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;"}
+{"version":3,"file":"dso-toggletip.entry.js","sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n  // tooltip arrow placement exceptions\r\n  --tooltip-margin-block-start: 0;\r\n  --tooltip-margin-inline-start: 3px;\r\n  --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n  z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: Placement = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\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    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (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 keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip\r\n          stateless\r\n          descriptive\r\n          id=\"toggle\"\r\n          strategy=\"absolute\"\r\n          active={this.active}\r\n          position={this.position}\r\n          small={this.small}\r\n        >\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;"}

package/dist/esm/dso-tooltip.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-C-b4jsbt.js';
-import { d as detectOverflow, h as hasOverflow, c as createPopper, b as beforeWrite } from './has-overflow-CsY83cJO.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 import { d as debounce } from './index-CoMRvcY0.js';
+import { d as detectOverflow, h as hasOverflow, c as createPopper, b as beforeWrite } from './has-overflow-CsY83cJO.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 
 var maxSize = {
@@ -226,7 +226,7 @@ const Tooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: '4e8f8eea0ec4a80895d2c176c3ed2f9d9105742b', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '8e615027b936c9e26dc03b2f3dae790385e0b4f2', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'cdf7c81ceff86d5467982067d4ef3e347f2d909a', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '33bf1a7cbccbc81c38292b178edda20ab46b2b53', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '1a7855066e3c084eaaf96a5084e10bac2c75aba1' })))));
+        return (h(Host, { key: '3b7b072ac2cbf99d0cd274fdd803f87110148747', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '9a50dba09c72797fd9f13a3afd0ee6ee74b3fb22', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '7fb9ad5c0ab6733625321374974398d52b98f196', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'e3aeb925d1073a4e5728cdbe241726993ff79941', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'ae49f6af4b043da6c4e62dc54fc88d47f9cab94c' })))));
     }
     activatePopper() {
         var _a;

package/dist/esm/dso-tooltip.entry.js.map

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

package/dist/esm/dso-tree-view.entry.js

@@ -193,7 +193,7 @@ const TreeView = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '8fa6eac8e8c49987f8d84e3eb5d6a36cca0aa4fc', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '7e985edbbd740375b87cdc4de51acf898ce1a653', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: '7db23c7d7736a1b2f4f18c6240db2dcb72d965a2', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'dc8acc481f22aaced2657634b24a0e054194a33f', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
 };
 TreeView.style = treeViewCss;

package/dist/esm/dso-tree-view.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-tree-view.entry.js","sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { h, FunctionalComponent, Fragment } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\n\r\ninterface TreeViewItemProps {\r\n  owner: TreeView;\r\n  ancestors: TreeViewItem[];\r\n  item: TreeViewItem;\r\n  index: number;\r\n  level: number;\r\n  setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n  owner,\r\n  ancestors,\r\n  item,\r\n  index,\r\n  level,\r\n  setSize,\r\n}) => (\r\n  <li\r\n    key={item.id}\r\n    class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n    role=\"none\"\r\n  >\r\n    <div class=\"tree-branch-control\">\r\n      {item.hasItems ? (\r\n        <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n          <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n        </div>\r\n      ) : (\r\n        <dso-icon></dso-icon>\r\n      )}\r\n    </div>\r\n    <p\r\n      class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n      tabindex={level === 1 && index === 0 ? 0 : -1}\r\n      role=\"treeitem\"\r\n      aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n      aria-current={item.active ? \"true\" : undefined}\r\n      aria-level={level}\r\n      aria-setsize={setSize}\r\n      aria-posinset={index + 1}\r\n      aria-busy={item.loading ? \"true\" : undefined}\r\n      data-item-id={item.id}\r\n      onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n    >\r\n      {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n      {item.href ? (\r\n        <a href={item.href} tabindex=\"-1\">\r\n          {item.label}\r\n        </a>\r\n      ) : (\r\n        <span>{item.label}</span>\r\n      )}\r\n      {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n    </p>\r\n    {item.open && (\r\n      <>\r\n        {item.hasItems && !item.items && item.loading ? (\r\n          <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n        ) : (\r\n          <ul role=\"group\">\r\n            {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n              <DsoTreeItem\r\n                owner={owner}\r\n                ancestors={[...ancestors, item]}\r\n                item={childItem}\r\n                index={childIndex}\r\n                level={level + 1}\r\n                setSize={org.length}\r\n              ></DsoTreeItem>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    )}\r\n  </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n  ul {\r\n    list-style-type: none;\r\n    padding-inline-start: core-tree-view-variables.$indent;\r\n    position: relative;\r\n  }\r\n\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  ul[role=\"tree\"] {\r\n    padding-inline-start: 0;\r\n  }\r\n\r\n  // connects branch or leaf to parent\r\n  ul[role=\"group\"]::before {\r\n    @include core-tree-view-mixins.vertical-line(\r\n      core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n      0,\r\n      core-tree-view-variables.$vspace\r\n    );\r\n  }\r\n\r\n  li:not(.has-child) {\r\n    // horizontal connector for a leaf\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a leaf\r\n    &::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vspace,\r\n        100%\r\n      );\r\n    }\r\n\r\n    // vertical connector for the last leaf\r\n    &:last-child::after {\r\n      block-size: core-tree-view-variables.$vcenter;\r\n      inset-block-start: 0;\r\n    }\r\n  }\r\n\r\n  li.has-child {\r\n    // horizontal connector for a branch\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$icon-size,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a branch (not last)\r\n    &:not(:last-child)::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - core-tree-view-variables.$icon-size)\r\n      );\r\n    }\r\n\r\n    // vertical line after a expanded branch (creating dead ends)\r\n    &.is-expanded:last-child::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n      );\r\n    }\r\n  }\r\n\r\n  .tree-branch-control {\r\n    color: colors.$grasgroen;\r\n    display: inline-block;\r\n    font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0 core-tree-view-variables.$hspace;\r\n    vertical-align: top;\r\n\r\n    > div {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  .tree-content {\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0;\r\n    max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n    a {\r\n      color: scaffolding.$text-color;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        color: scaffolding.$text-color;\r\n        text-decoration: none;\r\n      }\r\n\r\n      &:active {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.selected {\r\n      color: scaffolding.$text-color;\r\n      font-weight: 700;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      color: colors.$mauve;\r\n      font-style: italic;\r\n      font-weight: 700;\r\n\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n\r\n      a {\r\n        color: colors.$mauve;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    dso-icon {\r\n      color: colors.$grasgroen;\r\n      font-size: 0.75em;\r\n      margin-inline-start: 0.5em;\r\n      vertical-align: text-bottom;\r\n    }\r\n  }\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 { h, Component, ComponentInterface, Event, EventEmitter, Prop, Method } from \"@stencil/core\";\r\n\r\nimport { TreeViewPointerEvent, TreeViewItem } from \"./tree-view.interfaces\";\r\nimport { DsoTreeItem } from \"./tree-item\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean,\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dso-tree-view.entry.js","sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\ninterface TreeViewItemProps {\r\n  owner: TreeView;\r\n  ancestors: TreeViewItem[];\r\n  item: TreeViewItem;\r\n  index: number;\r\n  level: number;\r\n  setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n  owner,\r\n  ancestors,\r\n  item,\r\n  index,\r\n  level,\r\n  setSize,\r\n}) => (\r\n  <li\r\n    key={item.id}\r\n    class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n    role=\"none\"\r\n  >\r\n    <div class=\"tree-branch-control\">\r\n      {item.hasItems ? (\r\n        <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n          <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n        </div>\r\n      ) : (\r\n        <dso-icon></dso-icon>\r\n      )}\r\n    </div>\r\n    <p\r\n      class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n      tabindex={level === 1 && index === 0 ? 0 : -1}\r\n      role=\"treeitem\"\r\n      aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n      aria-current={item.active ? \"true\" : undefined}\r\n      aria-level={level}\r\n      aria-setsize={setSize}\r\n      aria-posinset={index + 1}\r\n      aria-busy={item.loading ? \"true\" : undefined}\r\n      data-item-id={item.id}\r\n      onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n    >\r\n      {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n      {item.href ? (\r\n        <a href={item.href} tabindex=\"-1\">\r\n          {item.label}\r\n        </a>\r\n      ) : (\r\n        <span>{item.label}</span>\r\n      )}\r\n      {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n    </p>\r\n    {item.open && (\r\n      <>\r\n        {item.hasItems && !item.items && item.loading ? (\r\n          <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n        ) : (\r\n          <ul role=\"group\">\r\n            {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n              <DsoTreeItem\r\n                owner={owner}\r\n                ancestors={[...ancestors, item]}\r\n                item={childItem}\r\n                index={childIndex}\r\n                level={level + 1}\r\n                setSize={org.length}\r\n              ></DsoTreeItem>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    )}\r\n  </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n  ul {\r\n    list-style-type: none;\r\n    padding-inline-start: core-tree-view-variables.$indent;\r\n    position: relative;\r\n  }\r\n\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  ul[role=\"tree\"] {\r\n    padding-inline-start: 0;\r\n  }\r\n\r\n  // connects branch or leaf to parent\r\n  ul[role=\"group\"]::before {\r\n    @include core-tree-view-mixins.vertical-line(\r\n      core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n      0,\r\n      core-tree-view-variables.$vspace\r\n    );\r\n  }\r\n\r\n  li:not(.has-child) {\r\n    // horizontal connector for a leaf\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a leaf\r\n    &::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vspace,\r\n        100%\r\n      );\r\n    }\r\n\r\n    // vertical connector for the last leaf\r\n    &:last-child::after {\r\n      block-size: core-tree-view-variables.$vcenter;\r\n      inset-block-start: 0;\r\n    }\r\n  }\r\n\r\n  li.has-child {\r\n    // horizontal connector for a branch\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$icon-size,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a branch (not last)\r\n    &:not(:last-child)::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - core-tree-view-variables.$icon-size)\r\n      );\r\n    }\r\n\r\n    // vertical line after a expanded branch (creating dead ends)\r\n    &.is-expanded:last-child::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n      );\r\n    }\r\n  }\r\n\r\n  .tree-branch-control {\r\n    color: colors.$grasgroen;\r\n    display: inline-block;\r\n    font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0 core-tree-view-variables.$hspace;\r\n    vertical-align: top;\r\n\r\n    > div {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  .tree-content {\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0;\r\n    max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n    a {\r\n      color: scaffolding.$text-color;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        color: scaffolding.$text-color;\r\n        text-decoration: none;\r\n      }\r\n\r\n      &:active {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.selected {\r\n      color: scaffolding.$text-color;\r\n      font-weight: 700;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      color: colors.$mauve;\r\n      font-style: italic;\r\n      font-weight: 700;\r\n\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n\r\n      a {\r\n        color: colors.$mauve;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    dso-icon {\r\n      color: colors.$grasgroen;\r\n      font-size: 0.75em;\r\n      margin-inline-start: 0.5em;\r\n      vertical-align: text-bottom;\r\n    }\r\n  }\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, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoTreeItem } from \"./tree-item\";\r\nimport { TreeViewItem, TreeViewPointerEvent } from \"./tree-view.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean,\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}