@dso-toolkit/core 68.2.0 → 68.4.0

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,QAAQ,EAAE,IAAI,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAQ1B,MAAM,OAAO,WAAW;IALxB;QASE;;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, Fragment, Prop, EventEmitter, Element, State } 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  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,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"]}

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

@@ -0,0 +1,392 @@
+:host {
+  display: block;
+  position: absolute;
+  inset-block-end: 16px;
+  inset-inline-start: 16px;
+  inline-size: 370px;
+  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+}
+@media screen and (max-width: 480px) {
+  :host {
+    inline-size: 320px;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    --panel-heading-padding-inline-start: 8px;
+    --panel-body-padding-inline: 8px;
+  }
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.visual-rating-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-block: 8px;
+}
+
+input[type=radio] {
+  appearance: none;
+  cursor: pointer;
+  position: absolute;
+  margin-inline: 0;
+  margin-block: 0;
+  inset-block: 8px 0;
+  inset-inline: 0;
+  z-index: 1;
+}
+
+label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 48px;
+  block-size: 48px;
+  border: 1px solid #ccc;
+  border-inline-end-width: 0;
+  padding-block-start: 8px;
+}
+@media screen and (max-width: 480px) {
+  label {
+    inline-size: 43px;
+    block-size: 43px;
+  }
+}
+label:hover {
+  background-color: #f2f2f2;
+}
+label:active {
+  background-color: #e5e5e5;
+}
+label:first-of-type {
+  border-radius: 4px 0 0 4px;
+}
+label:first-of-type::before {
+  border-radius: 3px 0 0;
+}
+label:last-of-type {
+  border-inline-end-width: 1px;
+  border-radius: 0 4px 4px 0;
+}
+label:last-of-type::before {
+  border-radius: 0 3px 0 0;
+}
+label::before {
+  content: "";
+  display: block;
+  position: absolute;
+  inset-block-start: 0;
+  block-size: 8px;
+  inline-size: 100%;
+  border-block-end: 1px solid #ccc;
+}
+label:has(input:checked) {
+  font-weight: bold;
+}
+label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #b62f41;
+  border-color: #ccc;
+  color: #fff;
+}
+label.survey-rating-1::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-1::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-1::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-1::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #ce3f51;
+  border-color: #ccc;
+  color: #fff;
+}
+label.survey-rating-2::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-2::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-2::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-2::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #e17000;
+  border-color: #ccc;
+  color: #191919;
+}
+label.survey-rating-3::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+label.survey-rating-3::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+label.survey-rating-3::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+label.survey-rating-3::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
+label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #dcd400;
+  border-color: #ccc;
+  color: #191919;
+}
+label.survey-rating-4::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+label.survey-rating-4::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+label.survey-rating-4::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+label.survey-rating-4::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
+label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #79b929;
+  border-color: #ccc;
+  color: #191919;
+}
+label.survey-rating-5::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+label.survey-rating-5::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+label.survey-rating-5::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+label.survey-rating-5::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
+label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #39870c;
+  border-color: #ccc;
+  color: #fff;
+}
+label.survey-rating-6::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-6::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-6::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-6::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #275937;
+  border-color: #ccc;
+  color: #fff;
+}
+label.survey-rating-7::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+label.survey-rating-7::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+label.survey-rating-7::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+label.survey-rating-7::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  margin-block-start: 16px;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button.dso-secondary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+button.dso-secondary:focus, button.dso-secondary:focus-visible {
+  outline-offset: 2px;
+}
+button.dso-secondary:active {
+  outline: 0;
+}
+button.dso-secondary.extern::after, button.dso-secondary.download::after {
+  content: "";
+  display: inline-block;
+  margin-inline-start: 8px;
+}
+button.dso-secondary {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+button.dso-secondary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+button.dso-secondary:hover {
+  background-color: #d7e7ce;
+  border-color: #39870c;
+  color: #39870c;
+}
+button.dso-secondary:active {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+button.dso-secondary.dso-small {
+  line-height: 1rem;
+}
+button.dso-secondary.dso-small dso-icon,
+button.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+button.dso-secondary.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary dso-icon,
+button.dso-secondary svg.di {
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
+}
+button.dso-secondary span + dso-icon,
+button.dso-secondary span + svg.di {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+button.dso-secondary.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+button.dso-secondary.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+  block-size: 16px;
+  inline-size: 16px;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=survey-rating.interfaces.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"survey-rating.interfaces.js","sourceRoot":"","sources":["../../../../src/components/survey-rating/survey-rating.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface SurveyRatingSubmitEvent {\r\n  /** The selected rating. One-based. */\r\n  rating: number | undefined;\r\n  scale: SurveyRatingScale;\r\n  originalEvent?: Event;\r\n}\r\n\r\nexport interface SurveyRatingCloseEvent {\r\n  originalEvent: Event;\r\n}\r\nexport interface SurveyRatingScale {\r\n  /** The start of the scale. One-based */\r\n  start: number;\r\n  /** The end of the scale, including the end. One-based. */\r\n  end: number;\r\n}\r\n"]}

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

@@ -0,0 +1,84 @@
+import { Fragment, h } from "@stencil/core";
+export class SurveyRating {
+    handleForm(e) {
+        e.preventDefault();
+        this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });
+    }
+    handleChange(e) {
+        const target = e.target;
+        this.rating = Number(target.value);
+    }
+    render() {
+        const ratings = [
+            "Heel moeilijk",
+            "Moeilijk",
+            "Redelijk moeilijk",
+            "Neutraal",
+            "Redelijk makkelijk",
+            "Makkelijk",
+            "Heel makkelijk",
+        ];
+        return (h("dso-panel", { key: '0cf488d4cae02ff7c37d6f6953ad32d6c19c7011', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("h2", { key: '8b36e4dbf8c9017cfec97283b0c4bb11dc2ba60a', slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '3f819218453cd2e500c7e03856754c5afbf16001' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren"), h("form", { key: 'a9b6ccfbccddcb07b94c3889cee0447f1d09118e', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'a321b5ff7c0e021ed8e3264ae7aa2f78781b674d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'dc908a71b2fc40d017e55f7995924731caf9d1c8' }, "Heel moeilijk"), h("span", { key: '8affdcc507818d6f6a8792285aa1f59d75e8b16a' }, "Heel makkelijk")), h("div", { key: '616c3feb3eabdb93c949f1a5166d08300b8c370b', 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: '733c311a66455f627ec1921bb61e7bab92b53c23', type: "submit", class: "dso-secondary" }, h("span", { key: '461c2e464c7bd2d005d2511a62bafa1099412e6d' }, "Antwoord verzenden")))));
+    }
+    static get is() { return "dso-survey-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["survey-rating.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["survey-rating.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoSubmit",
+                "name": "dsoSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user submits the Survey Rating."
+                },
+                "complexType": {
+                    "original": "SurveyRatingSubmitEvent",
+                    "resolved": "SurveyRatingSubmitEvent",
+                    "references": {
+                        "SurveyRatingSubmitEvent": {
+                            "location": "import",
+                            "path": "./survey-rating.interfaces",
+                            "id": "src/components/survey-rating/survey-rating.interfaces.ts::SurveyRatingSubmitEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoClose",
+                "name": "dsoClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user wants to close the  Survey Rating."
+                },
+                "complexType": {
+                    "original": "SurveyRatingCloseEvent",
+                    "resolved": "SurveyRatingCloseEvent",
+                    "references": {
+                        "SurveyRatingCloseEvent": {
+                            "location": "import",
+                            "path": "./survey-rating.interfaces",
+                            "id": "src/components/survey-rating/survey-rating.interfaces.ts::SurveyRatingCloseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=survey-rating.js.map

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

@@ -0,0 +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,kEAAW,UAAU,QAAC,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;YACpF,2DAAI,IAAI,EAAC,SAAS,iCAAgC;YAClD,4HAAyE;YACzE,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 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 emphasized onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n        <h2 slot=\"heading\">Help ons met een onderzoek</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

@@ -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: 'c2832a7a8fbf7221d15064ee4c7bb56d7b661cd2' }, this.modalActive && this.placeholderHeight && (h("div", { key: '9d14b2910f07abb13387e293d790045a32455b35', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '224ae9f6099a65a434331a7b474367b99553f693', class: "dso-modal-overlay" }), h("div", { key: '38aa3032ac4982d600147da57050456096b418a9', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '4bfc958b97f90948559d98649e651fe5fdb19701', 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: '2a4fd6f51f39000c50f9d65e592d1b313f9b3867', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '48d81bc181ed4c5401e31b825b456a34ce476f82', class: "dso-responsive-message" }, h("span", { key: '1be9558ee93f669e43f538d93eca0c17e52b8f23' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'e4bb42988a77996e5497d27ffcf9566b2453c52e', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'f097bc0aa7a6f915ab014e231a70b72628b68dba', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '7e3e59f79db68d7580a1914acabd632f13674e94' }, "vergroten"), h("dso-icon", { key: '9fd46d9a187178a22850428353c049647f9d5efb', icon: "external-link" }))))), this.modalActive && (h("div", { key: '8611aa82f23537b9124721a8aae0b8f6306cf020', class: "dso-header" }, h("h2", { key: '9d3d1c3e71ef886af0c497ce915e0e90834b0233', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '65079ed9d1285c0edf9c2c02c672d0730db7ad99', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'c37f9e87a4e81750b8374135545c5ca162bfbafd', icon: "times" }), h("span", { key: 'd1000458d15eadfc4dcb9a47045966f0d5a31b0b', class: "sr-only" }, "Sluiten")))), h("div", { key: 'ec46a114de1d6f4b20536de22c892f3d6140631a', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '4b1aa7f1b106c4af05fe747484199bd5fe6a25ce' }))))));
+        return (h(Host, { key: '799047946f16a8725591dddd4ff0604dd2387835' }, this.modalActive && this.placeholderHeight && (h("div", { key: 'b8c6bca3012e27a56f312c759116362f83a73a05', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '95191abbb4021a485aa2d85dc16528f77be6b389', class: "dso-modal-overlay" }), h("div", { key: '1a1bd5f370343044660676562b68a7e001838b0a', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '895ecea73b81b7734a5740a38393986e05bf0336', 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: 'cef13e59f5639ddce0643af4549489f46e68aaed', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '53f31dec4a2b517d7c1cc3d70267367c4776b5dd', class: "dso-responsive-message" }, h("span", { key: 'aff559990bc306381e35d0f10e8af5058fe346ff' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'b3dcee1e998d70efcf0849b742d18e0e40fabc4e', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '3e72a4e6605a874eb4487cc18c628d5bc771562b', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '17536f51ff5f561d94adf2f366ae5bef6f4a2192' }, "vergroten"), h("dso-icon", { key: '80742bbcdfd1ea381f5e88557f9f2515dd105f4d', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'd9c6b4ff790c2cd781056ae88605d98635d13c1d', class: "dso-header" }, h("h2", { key: '66fe55917fe1e6b76a2e9239b12cf445cf38909d', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '236ff7cae30219425ec410795f7b5bd5f07409ae', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '93a325c4368207a453e9bb07c1fd24fb98f0e8dd', icon: "times" }), h("span", { key: 'a58215c1e577ee5e987d9227d986bf7e1edd568e', class: "sr-only" }, "Sluiten")))), h("div", { key: '6964623cc9365f8349e6b5ba7802b379d625097c', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '86c401b073e39aa151799b9791bceac8e1335fb1' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

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

@@ -64,7 +64,7 @@ export class Tabs {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b6060f192bc977ee552374818ef550d5ee72ae65' }, h("div", { key: 'dcd0e804fe23cfb403a13d2c6b368a30e91d0b4a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '39a49bfbd811053f2ef18ffd71887aaf6140300e' })), h("div", { key: 'cb472cefde18dd4833c5ff47855aa584a9a142b9', role: "tabpanel", tabindex: "0" }, h("slot", { key: '29d41ec7045e3a271aee5b612fd4f25ced544e76', name: "panel" }))));
+        return (h(Host, { key: '349c801fdadbfd077ca6cc68f5d1f48dea0d4ff4' }, h("div", { key: '1413312c78b126135b10295690aa957d99304acf', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '3b4cbf35c3d29ba1f6158853d755335dd8a05b5e' })), h("div", { key: '95e97aa712722fc019bbf1578dfb1c6224ecebb5', role: "tabpanel", tabindex: "0" }, h("slot", { key: '305195dcc64770963bb740d64c5cc0d08f0c16bc', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class Toggletip {
         };
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: 'b9f976371e5462835f246b59be2603e15e4aaffe', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '238ae287cec697f812f75e94a0b4bc33d210d35e', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '28efbfb2a2872551777ba04c2354d51a59e37612' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: '5ade4ddc0b1b9dd981b064491444585f78ff6341', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'cce7b117c2cb73355311768297789ec2e6bdd08a', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'b1ea6bb7d7e7fd862fb3d628649f79cf18b79a9d' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,7 +60,15 @@ export class Tooltip {
         this.active = false;
         this.callbacks = {
             activate: () => (this.active = true),
-            deactivate: () => (this.active = false),
+            deactivate: () => {
+                // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding
+                // van setTimeout() met 2ms.
+                setTimeout(() => {
+                    if (this.element.isConnected) {
+                        this.active = false;
+                    }
+                }, 2);
+            },
         };
         this.onMouseLeave = () => {
             var _a;
@@ -181,7 +189,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '2db48a8e48b5695abdb08de04d5d35b8f141d9f1', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '580a640790cbd56df02965fc49b583b4e4e5f0a0', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'bf92edddaf076137c574dd1b10b9b013e12d5b31', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '08c0961bcd2ad20ab5bebc7b0ea6431c189212a1', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '157eb102ad11fcf962941f011d507f50a2982f02' })))));
+        return (h(Host, { key: '937cf3e393747c90908dd40d9f1cd4004972ee14', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'ec8d45dfe98721323a129f885c17458c2fce1755', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'f41fcdefbcbfbfa6898ae0ac380f40bac2d20fef', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '9dc5919c76eb4bae36267cb884a8e07ea9b795b8', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '3c999ec1a312662dbd287486eb54114638499db9' })))));
     }
     activatePopper() {
         var _a;