@dso-toolkit/core 68.3.0 → 68.5.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: 'ee2d66c3664442953dfa287dbb234f1c2b24973d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("h2", { key: '1762bf6ae0ce6c7603bdcf6986e233f71e7a48f1', slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'b0a318ab699be1e36b6044b115becc6682bd0bb3' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren"), h("form", { key: '3d66888af1d2d535f4723346029f9edbc03102a3', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '66ed1a08b68aaa791ba1772bf2cf81f305745829', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'a0edb09da125715b09186138db492a516ecbe6ea' }, "Heel moeilijk"), h("span", { key: 'e0d3b6c28a88a4edeca0689cb5b8c62bf074ac48' }, "Heel makkelijk")), h("div", { key: '2730d1b4941f078c506bbda76af4843157abc22c', 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: '4b5a9454231d24e64cc4e09385b2161262982de7', type: "submit", class: "dso-secondary" }, h("span", { key: '6d6e9f53abec5e1522e5a8b04eea8793c354f101' }, "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: '4a3e31c590ead4a74f0550073b1bbc148ae70f78' }, this.modalActive && this.placeholderHeight && (h("div", { key: '7620ca23d4f808ef8bec14678eedd55f97c3ae29', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '4eb447ab8afc2630f0e30be8311bd1105a85b83c', class: "dso-modal-overlay" }), h("div", { key: 'c1b585dde75ddc92c8922b049628dbcd8a100d34', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '88ad8719f80c3c4f65ab7e6879e4abad690298cb', 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: '9613603a64d41db5ee116369202d4ba515b73d8f', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '46257884cb6e02250b1afd4b26a3a0578cd48877', class: "dso-responsive-message" }, h("span", { key: '7a3c406ad5ec4f94f4d073ff9a53edb18c02f542' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'c336fe4775b023a440177806fa54e5625f529908', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'c8bf55ed14ce3118a6a241b5720d6f0324b7cedd', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'f4e0d52eb32d641dd3f90c29d6d0f67249e1c1bc' }, "vergroten"), h("dso-icon", { key: '22f45a465920a501450cb3f379fc01172bbf75f7', icon: "external-link" }))))), this.modalActive && (h("div", { key: '4fc87b95fe133e9719f9b79e0c8da9dd90ca5107', class: "dso-header" }, h("h2", { key: '005ce442e38893e10598314a207df249e65c98c2', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'd85326b032ac6a859f94b35ad05281c6b0dbdd2e', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'e31275c0fb68c4ba60cada741193ed992b31b8e4', icon: "times" }), h("span", { key: '96ba7a49baaa9d88963c92e7265bc3d4f2d5236f', class: "sr-only" }, "Sluiten")))), h("div", { key: '2c6aac7907786c603247f02b71df2ef85e63d2c6', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '11c944f3e16fc5481f0e29c68d0316df41bcd038' }))))));
     }
     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: 'eda4f3cabd4f4a373ebf5e5b2fce9c5a336f4680' }, h("div", { key: '445a0b6a745a1f45eca44ca59def6f4557904748', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'd344d2c68cc0bd6d0abbea591a7ffa22b17dbdf7' })), h("div", { key: 'c17a1774b3cf81c30e07c0c8446f05d8a6e86b95', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'c32d940c2e5fe01b67919d7253bb5d2666146f6f', 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: 'c6b7ee824a9ad3417f394467177fa3b07a59a710', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'a82167f713fc51dbafcad6758527ce7c36e28552', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '5f4548c244f97b6278b7642bb927d3133dab872c' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -189,7 +189,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '7f2ebd625883a8e59230ec8a602f1c44c916937a', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '6bab482a2379cb4608a13bea079dd0b09f7b62f2', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'dde1f4e1862728b33a18ca6cb711b6443e7b284b', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'd100e8d4bd426a7af6f32151aa0f5a96d3dda00e', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '3b1e4e2cd77dc05caf6898d67a3065815a11a667' })))));
+        return (h(Host, { key: '0dae667b622fac9d6e45eead0e5ffd0b3c4fc64a', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '8b80667d0734bfd9ea91f698ddf31493f7c27e49', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '7124f75b7ba640b0a5e63a15917eddf0ade65853', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '962322da0404132b4b4ef4046ca70b1b25d11f1f', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '1fec252ad2f238dc8b8969bc4aa2d237b5aae943' })))));
     }
     activatePopper() {
         var _a;

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

@@ -174,7 +174,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: '47e48fb5f1c83bda8a9ef8809f833c9f9ab6e2bc', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '53a0949638693abb7bc815696307bb131ebf995d', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'f6f6832d0613dcb1eb30f1170cc848e5dd5a47f3', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'aaea2cfc733ff714e907758e41ea31fa2f460b68', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -193,8 +193,8 @@ export class ViewerGrid {
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (h(Fragment, null, this.tabView && (h("nav", { key: 'b4a570fca218e0dc90e7d1e614e4423510d2b80d', class: "dso-navbar" }, h("ul", { key: 'a7d0b8eb852eb3b8e2deb4b5f843f27d841d09a2', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '77d23e1a1280f18321c93e7913396a895f07ae6b', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView ||
-            (this.tabView && ((this.activeTab === "main" && this.mode === "vrk") || this.activeTab === "search"))) && (h(Filterpanel, { key: '54a0c9df27dce99457a8554c9beda4a519a874d2', title: this.filterpanelTitle, mode: this.mode, ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel, dsoCloseFilterpanel: (e) => this.dsoCloseFilterpanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '04316795f2dbf17e56b4ada3fec56ebed221ddfa', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'ac81ce5768878de9ebbcb43c308b78e0c6a32723', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '62e3fe731443d77ff460872f6fe5a7b79ea84c48', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'a012c61f124356e06fd18c22a4230c555751c067', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (h(Fragment, null, this.tabView && (h("nav", { key: 'd8a89e6fd85a9ec4adea0b52670c1cba714350ef', class: "dso-navbar" }, h("ul", { key: '34b3436df21fd14c6403b33b0b728415c7ee2c3f', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'a5166e11ec537da288535ef1f78027b6942288bc', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView ||
+            (this.tabView && ((this.activeTab === "main" && this.mode === "vrk") || this.activeTab === "search"))) && (h(Filterpanel, { key: '994efb6648cd215a4ff8e0fe7fffe16b65a40775', title: this.filterpanelTitle, mode: this.mode, ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel, dsoCloseFilterpanel: (e) => this.dsoCloseFilterpanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'b021cfb6be8c3a16453eb9927f6dac93736b0d2b', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '85a6dbcd00d82a8c6eb78e55755bae26aed76076', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '163277775c959cf0f83ed6bf8bd79ff2a81d3806', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '2577736644258d037e41fef06ec19be4d9db92fa', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }