@dso-toolkit/core 73.1.0 → 73.2.0

package/dist/collection/components/scrollable/scrollable.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollable.js","sourceRoot":"","sources":["../../../../src/components/scrollable/scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"scrollable.js","sourceRoot":"","sources":["../../../../src/components/scrollable/scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/selectable/selectable.js

@@ -1,4 +1,4 @@
-import { h, Fragment, forceUpdate, } from "@stencil/core";
+import { Fragment, forceUpdate, h, } from "@stencil/core";
 import clsx from "clsx";
 import { createIdentifier } from "../../utils/create-identifier";
 /**
@@ -51,7 +51,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '3ccfb5fe1b7cc2277408105abfc30f159e67f8aa' }, h("div", { key: '3a50d50879e4a913826cc5d51720b47e362219ea', class: "dso-selectable-container" }, h("div", { key: '45f837f824cb01d68c6549b21e8c26ede74ec68a', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '50aefa55a69808a25a1f498439c48f1da313dbfb', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '90f7fc614489e7769224ecf7faa038a66b283479', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c204aafd654b548b7ac2f51918593a2a46f42f20', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '25d4e18df38eedb2a0c979768c778ddd8f7f4459' }, h("slot", { key: 'a57125559ab66646ac4364fae11387297881054d', name: "info" })))), h("slot", { key: '4bc06cf9c7893571fbaecf183895b0d9b0c6fd7a', name: "options" })));
+        return (h(Fragment, { key: '00230b675c3585fcf049a80c8b8af9ab4c7d042c' }, h("div", { key: '170b9ca2e15647660e7123e857b319e0fed35cd0', class: "dso-selectable-container" }, h("div", { key: 'fa78b1d91fa986ee5a977ad25c01bbda3faf400c', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'd6ab7e9663ca11c2b9e49d8809543eebc3e915b5', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '82bd289937f68f1c26a5ecbf2b58b0f16b11aee5', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c61fbc8b235748a5c533d2dfa74e19adf181c066', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'a8d67c275d2189b708c949a7818944945ecc329e' }, h("slot", { key: '5aac8586594e4a9007da5029267f1f45bcf5624c', name: "info" })))), h("slot", { key: '7000dcb33017e3b37da02ff91b74a7c8a18c467b', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/selectable/selectable.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n  ComponentInterface,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  private handleOnChange = (e: Event) => {\r\n    const { target } = e;\r\n\r\n    this.dsoChange.emit({\r\n      originalEvent: e,\r\n      checked: target instanceof HTMLInputElement && target.checked,\r\n    });\r\n\r\n    forceUpdate(this.host);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-selectable-container\">\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={this.handleOnChange}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot />\r\n              </label>\r\n            ) : (\r\n              <label>\r\n                <slot />\r\n              </label>\r\n            )}\r\n          </div>\r\n          {hasInfo && !this.infoFixed && (\r\n            <dso-info-button\r\n              active={this.infoActive}\r\n              onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n            ></dso-info-button>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n        <slot name=\"options\" />\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n      this.input.checked = this.checked;\r\n    }\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  private handleOnChange = (e: Event) => {\r\n    const { target } = e;\r\n\r\n    this.dsoChange.emit({\r\n      originalEvent: e,\r\n      checked: target instanceof HTMLInputElement && target.checked,\r\n    });\r\n\r\n    forceUpdate(this.host);\r\n  };\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-selectable-container\">\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={this.handleOnChange}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot />\r\n              </label>\r\n            ) : (\r\n              <label>\r\n                <slot />\r\n              </label>\r\n            )}\r\n          </div>\r\n          {hasInfo && !this.infoFixed && (\r\n            <dso-info-button\r\n              active={this.infoActive}\r\n              onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n            ></dso-info-button>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n        <slot name=\"options\" />\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n      this.input.checked = this.checked;\r\n    }\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '9d91efb96653b3344f79386814633d08520d6ab0', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3d79ed32ff98d7e1e7eea58307d03892756dbbf1', icon: "chevron-right" })));
+        return (h("a", { key: '88e0a5fde8738d879c43ea9947d0bf67ac20221c', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '5f51d5cfad04c230d4b107587103c4929ab335d5', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skiplink/skiplink.js.map

@@ -1 +1 @@
-{"version":3,"file":"skiplink.js","sourceRoot":"","sources":["../../../../src/components/skiplink/skiplink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5F,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAShE,MAAM,OAAO,QAAQ;IAmBX,iBAAiB,CAAC,CAAa;QACrC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAC9D,IAAI,CAAC,KAAK;YACX,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-skiplink\",\r\n  styleUrl: \"skiplink.scss\",\r\n  shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n  /**\r\n   * The location to which the skiplink links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  to!: string | undefined;\r\n\r\n  /**\r\n   * link text\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * Emitted when the Skiplink is clicked.\r\n   */\r\n  @Event()\r\n  dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.to) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n        {this.label}\r\n        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"skiplink.js","sourceRoot":"","sources":["../../../../src/components/skiplink/skiplink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE5F,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAShE,MAAM,OAAO,QAAQ;IAmBX,iBAAiB,CAAC,CAAa;QACrC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAC9D,IAAI,CAAC,KAAK;YACX,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-skiplink\",\r\n  styleUrl: \"skiplink.scss\",\r\n  shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n  /**\r\n   * The location to which the skiplink links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  to!: string | undefined;\r\n\r\n  /**\r\n   * link text\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * Emitted when the Skiplink is clicked.\r\n   */\r\n  @Event()\r\n  dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.to) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n        {this.label}\r\n        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -1,4 +1,4 @@
-import { h, Fragment } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { v4 } from "uuid";
 export class SlideToggle {
     constructor() {
@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: 'e475cae552eba25e291ff9f54c823c488c16913a', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'c635252b0cadd064f45ee5e9ce30b9be66b7ba6e', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '09e9fe08d79adf636fef5fed3962315bc3453637', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '7e8a00179728cd789cb758b2270446074783c1e9', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '68dfb69746a42329c66536715a27d698a294cd77', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '1c478c6f626c7fb6698fae764c9934a9c05e1bbf', htmlFor: this.identifier }, h("slot", { key: '22c1f7ae12086ba13589cb1621e0b435ecc4b42a' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: 'b7dc0110eb83aa234b1d2b225ca8e4a3bfec426c', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '8dfb32aa94195a577fbd960c33dfd8d23afa2921', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'b291fd2d918322729a1564a9d856ed66cb4465ad', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'c51051570b80c247f4ff049ebcc7addd38a5f669', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '12e0f02816079d4ca1f9953f96ac6ae844f7d05a', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '56f7be1b63e0aed9b1048b2a6c8b21b1ab9360d8', htmlFor: this.identifier }, h("slot", { key: '4c6a01b02ca3b63959e91d6a5d94ce2983c51a2c' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/slide-toggle/slide-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide-toggle.js","sourceRoot":"","sources":["../../../../src/components/slide-toggle/slide-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAE,IAAI,EAAgB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAS1B,MAAM,OAAO,WAAW;IANxB;QAUE;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAiBjB;;WAEG;QAEH,eAAU,GAAG,EAAE,EAAE,CAAC;KA+CnB;IAvCS,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAChC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAEvE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;oBAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS;wBAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG;wBAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC;YACR,IAAI,CAAC,eAAe,IAAI,CACvB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU;gBAC7B,8DAAQ,CACF,CACT,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, Prop, EventEmitter, Element, State, Fragment } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  scoped: true,\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"slide-toggle.js","sourceRoot":"","sources":["../../../../src/components/slide-toggle/slide-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAU1B,MAAM,OAAO,WAAW;IANxB;QAUE;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAiBjB;;WAEG;QAEH,eAAU,GAAG,EAAE,EAAE,CAAC;KA+CnB;IAvCS,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,6EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAChC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAEvE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;oBAChF,0DAAG,IAAI,EAAC,MAAM,eAAW,SAAS;wBAChC,6DAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG;wBAC3D,+DAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC;YACR,IAAI,CAAC,eAAe,IAAI,CACvB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU;gBAC7B,8DAAQ,CACF,CACT,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  scoped: true,\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '2a2195f431d05af2f95157241dbe233743cc45a6', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '6078cb4a0285e2f4afda8c2452efbbbdd2938c20', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '1e424390809f7a1cb59f636f4bd27f9d9e4b3c70' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '22c216ba2253ae2f748030be3336155318d01449', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '3eb88c0afcf933bb8974df638b5eb2aed1a45d0a', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '1a74a9093fc56e5f1192e1400d9989074d2c0add' }, "Heel moeilijk"), h("span", { key: '78c7bffac4fd101c39917a9903fda62acdbf3806' }, "Heel makkelijk")), h("div", { key: 'd1b523bf50e3a901da0f6d0af0e20c72df9e8bc9', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '9040ae190a33af5d259011c22016749d84720da2', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'b7b9bd9b0a97c5e3fa227e0af5949f6f36c39275', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '1db31c25e032536223ae9c53718dcea388d6b0fd' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '422e4887289d315d5f008e0f1d6ae4936e08da86', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'ea9eef2c9b40f68a562eda5df4943e6e3a4393a1', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'fe9d2c8bf6cac8705a9eca4250d91b95e67ec35c' }, "Heel moeilijk"), h("span", { key: '7a039794087fd90273e21fc0926e1eb4fed8ebee' }, "Heel makkelijk")), h("div", { key: '002b4918b471324eeabcbeeda2899024286c0df6', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: '8105cc59e8f59f056579f21f56d82e518cfe7396', type: "submit", class: "dso-secondary" }, h("span", { key: '379e72689c91d68a90013578fc03019a0eac4042' }, "Antwoord verzenden")))));
+        })), h("button", { key: 'e1257162f5826778a751ca0d8dbc3f4b4a9a0177', type: "submit", class: "dso-secondary" }, h("span", { key: '8bd71f5506750e1e9e7c67cbd08489fd00149ba0' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/survey-rating/survey-rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"survey-rating.js","sourceRoot":"","sources":["../../../../src/components/survey-rating/survey-rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,YAAY;IAef,UAAU,CAAC,CAAQ;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;IAC9F,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB,CAAC;QAEF,OAAO,CACL,kEACE,UAAU,QACV,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAChE,IAAI,EAAC,QAAQ,qBACG,eAAe;YAE/B,2DAAI,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,iCAEhC;YACL,6HAA0E;YAC1E,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;oBAClD,+EAA0B;oBAC1B,gFAA2B,CACvB;gBACN,4DAAK,IAAI,EAAC,YAAY,IACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;oBAE/B,OAAO,CACL;wBACE,aAAO,KAAK,EAAE,iBAAiB,YAAY,EAAE;4BAC1C,YAAY;4BACb,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,CAAQ;4BACrC,aACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP,CACJ,CAAC;gBACJ,CAAC,CAAC,CACE;gBACN,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;oBACzC,oFAA+B,CACxB,CACJ,CACG,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"survey-rating.js","sourceRoot":"","sources":["../../../../src/components/survey-rating/survey-rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAShG,MAAM,OAAO,YAAY;IAef,UAAU,CAAC,CAAQ;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;IAC9F,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB,CAAC;QAEF,OAAO,CACL,kEACE,UAAU,QACV,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAChE,IAAI,EAAC,QAAQ,qBACG,eAAe;YAE/B,2DAAI,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,iCAEhC;YACL,6HAA0E;YAC1E,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBACvC,4DAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;oBAClD,+EAA0B;oBAC1B,gFAA2B,CACvB;gBACN,4DAAK,IAAI,EAAC,YAAY,IACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;oBAE/B,OAAO,CACL;wBACE,aAAO,KAAK,EAAE,iBAAiB,YAAY,EAAE;4BAC1C,YAAY;4BACb,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,CAAQ;4BACrC,aACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP,CACJ,CAAC;gBACJ,CAAC,CAAC,CACE;gBACN,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;oBACzC,oFAA+B,CACxB,CACJ,CACG,CACb,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/table/table.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import debounce from "debounce";
 import { createFocusTrap } from "focus-trap";
 import { v4 } from "uuid";
@@ -35,7 +35,7 @@ export class Table {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: 'b605ee213f688b8c537cfe59e72b0df50a39e0a1' }, this.modalActive && this.placeholderHeight && (h("div", { key: 'df64e94143f3c62c5e8d88437526a10018080d45', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '2ce63ecf88ad22a845dc1e4706b27257226b4a3e', class: "dso-modal-overlay" }), h("div", { key: '1496b039ce305f3f60490b38515b41debec83184', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'd52969e7ddfc1d778b26fd531b1a173e6c678019', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '960167f5a8f838995068fe78e2591c800017b9fe', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '47cedac7ab229e687632a8a36bbfcbb8b5974ba6', class: "dso-responsive-message" }, h("span", { key: 'ff154473968f48f8a9e3b7f8bbeb038e3dcdd87f' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'eb926c7a2ad80ea2e118900565aefd842393adc3', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'cf0212fc65838a8bd3b14c447b823f02d514f2cd', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'bc92839d1d70bd5105f19fe0e6096fd5dbf63a25' }, "vergroten"), h("dso-icon", { key: '2252097e4cf6339f7a4ca64cc1670e6f746ae94f', icon: "external-link" }))))), this.modalActive && (h("div", { key: '66b70af4b56e3881038864c1c3a47b202274a91f', class: "dso-header" }, h("h2", { key: 'a459523e6f3be909e93757751e3c033c2a9af95e', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '34a60d53528a90e0ed0a71974c9578c7e5acd5e9', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'ddfb3742905d50bb67e08cb923b8ab44119565a1', icon: "times" }), h("span", { key: 'e3859b04dab0ab51a223b300a1c3818c7d880a12', class: "sr-only" }, "Sluiten")))), h("div", { key: 'b2a178bf3c9437ed61f1a70d3a28d646551b3404', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '2765f970b788030ab15b17ab30e515dba5646348' }))))));
+        return (h(Host, { key: '597c45b1c1d9daadde1c9bc790b7ac82caf1e3e9' }, this.modalActive && this.placeholderHeight && (h("div", { key: '6528e1257071d1cc882aa6b306e4f237b456043c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '74223087b6990b7bfad1c13c9fe6505a1cfadd11', class: "dso-modal-overlay" }), h("div", { key: '2002f85851eeb384959030ca56540605333c3048', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'b3149d97f99a51a27767111236571e3c62752ddb', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'f8e00a412b6fcae44e39382efa095c7a1f10c814', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'aa5ac11abd7549558f69f678fa525339432dc451', class: "dso-responsive-message" }, h("span", { key: '58dcb714e2f7cdadc33065b6d7313fb84a2e05cc' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '9cfa4c5f22968b729b1c9ed81c8e07cd9d87f71c', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'f6463df449b32b8ccea6cd9b5458a5773a2b685e', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'ec916917ae6428412acb48416067b0f38e46a5cc' }, "vergroten"), h("dso-icon", { key: 'aea959472bcb120dfdbb860499b6c039896e6e87', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'f31f95ea093300c6a567288410912e59bb1ed125', class: "dso-header" }, h("h2", { key: 'd52fa86bc4af3fd58d58860cba019bb7aa3308dc', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '51f618cedca322f7bd8aa05e8329f9642ef89d89', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '5a720c5e9ce84795f48704f3764dd3ec94ead23c', icon: "times" }), h("span", { key: '5f1c813c0d339242181429ebfd8a7d99778f6212', class: "sr-only" }, "Sluiten")))), h("div", { key: '3d25249e219aaec8178a10f3488899ab795325f9', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '9249deaef3c3abde5a74b8af340c110a3e905bf4' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Element, Host, Prop, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  /**\r\n   * Indicates whether the table is currently horizontally scrollable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isResponsive = false;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  /**\r\n   * Indicates whether the table is currently horizontally scrollable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isResponsive = false;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/collection/components/tabs/components/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/components/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE;;GAEG;AAMH,MAAM,OAAO,GAAG;IALhB;QA2CU,cAAS,GAAG,CAAC,CAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;aACtE,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChD,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;KA6BH;IA1DC;;OAEG;IAEH,KAAK,CAAC,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACN,CACL,CAAC,CAAC,CAAC,CACF,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/components/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE;;GAEG;AAMH,MAAM,OAAO,GAAG;IALhB;QA2CU,cAAS,GAAG,CAAC,CAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;aACtE,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChD,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;KA6BH;IA1DC;;OAEG;IAEH,KAAK,CAAC,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACN,CACL,CAAC,CAAC,CAAC,CACF,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/tabs/tabs.js

@@ -1,4 +1,4 @@
-import { h, Host, forceUpdate } from "@stencil/core";
+import { Host, forceUpdate, h } from "@stencil/core";
 /**
  * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.
  * @slot panel - The panel with the content for the active tab
@@ -64,7 +64,7 @@ export class Tabs {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'ee52a51bd4dce360be086fe4ac9603c3b1e12255' }, h("div", { key: '7f9270557289a2d6a2d8e949cbf8ee7a8ba286a7', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '47ad707d1b2dc383074db54e70f85fdd60c8a3d4' })), h("div", { key: '5864caa924fcee7d74ef10410ee3b0d38d8af2c0', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'a01b5c9915c4385c713dea531eaccecd9757a940', name: "panel" }))));
+        return (h(Host, { key: '9a6bdd5ffe17c8426f03ba2722e425fa0f8e62fb' }, h("div", { key: 'dec379f32507e5784a13bd95b58ab02cb958febb', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '51c8052f6072c4c3abc4459137998153ec7e51cc' })), h("div", { key: '8106030b6b93202f62be3aac38a90807afe33606', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'd30f72afe67410e95720c184d4af7d8c3df0dc03', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzE;;;GAGG;AAMH,MAAM,OAAO,IAAI;IALjB;QAmDE,kFAAkF;QAC1E,iBAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,EAAE,CAAC;gBACvC,OAAO;YACT,CAAC;YAED,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,YAAY,CAAC;gBAClB,KAAK,WAAW;oBACd,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBAClC,MAAM;gBACR,KAAK,WAAW,CAAC;gBACjB,KAAK,SAAS;oBACZ,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBACtC,MAAM;gBACR;oBACE,OAAO;YACX,CAAC;QACH,CAAC,CAAC;KAwBH;IAlFC,IAAY,WAAW;QACrB,6FAA6F;QAC7F,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAoB,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACzF,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YACZ,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjB,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,EACD,EAAE,CACH,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACvD,CAAC;IAEO,cAAc,CAAC,GAAkC;QACvD,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,sBAAsB,CAAC,WAAwB;;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,OAAO,CAAC;QAEzD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAEO,kBAAkB,CAAC,WAAwB;;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,QAAQ,CAAC;QAE1D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAsBD,iBAAiB;;QACf,MAAA,IAAI,CAAC,gBAAgB,oCAArB,IAAI,CAAC,gBAAgB,GAAK,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAC;QAE7E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;IACtC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY;gBACzD,8DAAQ,CACJ;YACN,4DAAK,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG;gBAC/B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/toggletip/toggletip.js

@@ -1,4 +1,4 @@
-import { h, Fragment } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 export class Toggletip {
     constructor() {
         this.active = false;
@@ -44,7 +44,7 @@ export class Toggletip {
         };
     }
     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' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggletip/toggletip.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip.js","sourceRoot":"","sources":["../../../../src/components/toggletip/toggletip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ7E,MAAM,OAAO,SAAS;IALtB;QAUE,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,UAAK,GAAG,aAAa,CAAC;QAEtB;;WAEG;QAEH,aAAQ,GAAc,OAAO,CAAC;QAgBtB,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC;QAEM,SAAI,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAChE,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACjE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE,CAAC;gBACrD,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACtD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ,EAAE,CAAC;gBAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;YAED,OAAO;QACT,CAAC,CAAC;KA2BH;IAzBC,MAAM;QACJ,OAAO,CACL;YACE,4FACmB,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,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,GAC7C;YACF,oEACE,SAAS,QACT,WAAW,QACX,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;gBAEjB,8DAAQ,CACI,CACb,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
+{"version":3,"file":"toggletip.js","sourceRoot":"","sources":["../../../../src/components/toggletip/toggletip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7E,MAAM,OAAO,SAAS;IALtB;QAUE,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,UAAK,GAAG,aAAa,CAAC;QAEtB;;WAEG;QAEH,aAAQ,GAAc,OAAO,CAAC;QAgBtB,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC;QAEM,SAAI,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAChE,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACjE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE,CAAC;gBACrD,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACtD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ,EAAE,CAAC;gBAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;YAED,OAAO;QACT,CAAC,CAAC;KA2BH;IAzBC,MAAM;QACJ,OAAO,CACL;YACE,4FACmB,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,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,GAC7C;YACF,oEACE,SAAS,QACT,WAAW,QACX,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;gBAEjB,8DAAQ,CACI,CACb,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/tooltip/tooltip.js

@@ -16,11 +16,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 };
 var _Tooltip_target;
 import { beforeWrite, createPopper } from "@popperjs/core";
-import maxSize from "popper-max-size-modifier";
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import clsx from "clsx";
-import { hasOverflow } from "../../utils/has-overflow";
 import debounce from "debounce";
+import maxSize from "popper-max-size-modifier";
+import { hasOverflow } from "../../utils/has-overflow";
 // Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
 const applyMaxSize = {
@@ -189,7 +189,7 @@ export class Tooltip {
         }
     }
     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/collection/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/tree-view/tree-item.js

@@ -1,4 +1,4 @@
-import { h, Fragment } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import clsx from "clsx";
 export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
     var _a, _b, _c, _d;