@dso-toolkit/core 88.0.0 → 88.1.0

package/dist/esm/dso-survey-rating.entry.js

@@ -126,6 +126,36 @@ label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #b62f41;
   color: #fff;
   border-color: #ccc;
@@ -153,6 +183,36 @@ label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #ce3f51;
   color: #fff;
   border-color: #ccc;
@@ -183,6 +243,10 @@ label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #e17000;
   color: #191919;
   border-color: #ccc;
@@ -213,6 +277,10 @@ label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #dcd400;
   color: #191919;
   border-color: #ccc;
@@ -243,6 +311,10 @@ label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
   background-color: #79b929;
   color: #191919;
   border-color: #ccc;
@@ -270,6 +342,36 @@ label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #39870c;
   color: #fff;
   border-color: #ccc;
@@ -297,6 +399,36 @@ label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #275937;
   color: #fff;
   border-color: #ccc;
@@ -331,6 +463,7 @@ button.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 button.dso-secondary:focus, button.dso-secondary:focus-visible {
   outline-offset: 2px;

package/dist/esm/dso-survey-rating.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-survey-rating.entry.js","sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, \"survey-rating\");\r\n\r\n        border-color: survey-rating-variables.$survey-rating-border-color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;MC3cW,YAAY,GAAA,MAAA;;;;;;AAef,IAAA,UAAU,CAAC,CAAQ,EAAA;QACzB,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,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;;AAGrF,IAAA,YAAY,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;QAC3C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB;AAED,QAAA,QACE,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,UAAU,EAAA,IAAA,EACV,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAChE,IAAI,EAAC,QAAQ,EAAA,iBAAA,EACG,eAAe,EAAA,EAE/B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAEhC,EAAA,4BAAA,CAAA,EACL,CAA0E,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,2DAAA,CAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EAClD,CAA0B,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAA,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,gBAAA,CAA2B,CACvB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,YAAY,EAAA,EACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;AAC7B,YAAA,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC;AAE9B,YAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,OAAA,EAAA,EAAO,KAAK,EAAE,CAAA,cAAA,EAAiB,YAAY,CAAE,CAAA,EAAA,EAC1C,YAAY,EACb,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,CAAQ,EACrC,CAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP;AAEP,SAAC,CAAC,CACE,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAA,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,oBAAA,CAA+B,CACxB,CACJ,CACG;;;;;;;"}
+{"version":3,"file":"dso-survey-rating.entry.js","sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, \"survey-rating\");\r\n\r\n        border-color: survey-rating-variables.$survey-rating-border-color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;MChlBW,YAAY,GAAA,MAAA;;;;;;AAef,IAAA,UAAU,CAAC,CAAQ,EAAA;QACzB,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,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;;AAGrF,IAAA,YAAY,CAAC,CAAQ,EAAA;AAC3B,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;QAC3C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB;AAED,QAAA,QACE,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,UAAU,EAAA,IAAA,EACV,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAChE,IAAI,EAAC,QAAQ,EAAA,iBAAA,EACG,eAAe,EAAA,EAE/B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAEhC,EAAA,4BAAA,CAAA,EACL,CAA0E,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,2DAAA,CAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EAClD,CAA0B,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAA,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,gBAAA,CAA2B,CACvB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,YAAY,EAAA,EACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;AAC7B,YAAA,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC;AAE9B,YAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,OAAA,EAAA,EAAO,KAAK,EAAE,CAAA,cAAA,EAAiB,YAAY,CAAE,CAAA,EAAA,EAC1C,YAAY,EACb,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,CAAQ,EACrC,CAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP;AAEP,SAAC,CAAC,CACE,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAA,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,oBAAA,CAA+B,CACxB,CACJ,CACG;;;;;;;"}

package/dist/esm/dso-tijdreis-banner.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment } from './index-Dx5skKSq.js';
 
-const tijdreisBannerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;background-color:#8b4a6a;color:#fff;display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:"icon slot button"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:"icon slot" ". button";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}`;
+const tijdreisBannerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff;display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:"icon slot button"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:"icon slot" ". button";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}`;
 
 const TijdreisBanner = class {
     constructor(hostRef) {

package/dist/esm/dso-tijdreis-banner.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-tijdreis-banner.entry.js","sources":["src/components/tijdreis-banner/tijdreis-banner.scss?tag=dso-tijdreis-banner&encapsulation=shadow","src/components/tijdreis-banner/tijdreis-banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(colors.$mauve, \"tijdreis-banner\");\r\n\r\n  display: grid;\r\n  block-size: 100%;\r\n  padding-block: units.$u1;\r\n  padding-inline: units.$u3;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: units.$u1;\r\n    grid-template-columns: auto auto auto;\r\n    grid-template-areas: \"icon slot button\";\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    align-items: start;\r\n    grid-template-columns: max-content auto;\r\n    grid-template-areas:\r\n      \"icon slot\"\r\n      \". button\";\r\n    padding-block: units.$u2;\r\n    gap: units.$u2 units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    grid-area: icon;\r\n  }\r\n\r\n  slot:not([name]) {\r\n    grid-area: slot;\r\n    margin-inline-end: 10px;\r\n  }\r\n\r\n  ::slotted([slot=\"button\"]) {\r\n    --_dso-button-secondary-background-color: transparent;\r\n    --_dso-button-secondary-color: #{colors.$wit};\r\n    --_dso-button-secondary-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-background-color: rgba(235, 225, 235, 0.2);\r\n    --_dso-button-secondary-hover-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-active-background-color: rgba(235, 225, 235, 0.4);\r\n    --_dso-button-secondary-active-border-color: rgba(235, 225, 235, 0.3);\r\n    --_dso-button-secondary-disabled-background-color: transparent;\r\n    --_dso-button-secondary-disabled-color: rgba(235, 225, 235, 0.7);\r\n    --_dso-button-secondary-disabled-border-color: rgba(235, 225, 235, 0.7);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      margin-inline-start: units.$u4 !important; /* extra ruimte zodat totaal 40px tussen 2e en 3e */\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      grid-area: button;\r\n      justify-self: start;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Fragment, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-tijdreis-banner\",\r\n  styleUrl: \"tijdreis-banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class TijdreisBanner implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-icon icon=\"clock\" />\r\n        <slot></slot>\r\n        <slot name=\"button\"></slot>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,g/EAAg/E,CAAC;;MCOrgF,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CAClB;;;;;;;"}
+{"version":3,"file":"dso-tijdreis-banner.entry.js","sources":["src/components/tijdreis-banner/tijdreis-banner.scss?tag=dso-tijdreis-banner&encapsulation=shadow","src/components/tijdreis-banner/tijdreis-banner.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(colors.$mauve, \"tijdreis-banner\");\r\n\r\n  display: grid;\r\n  block-size: 100%;\r\n  padding-block: units.$u1;\r\n  padding-inline: units.$u3;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: units.$u1;\r\n    grid-template-columns: auto auto auto;\r\n    grid-template-areas: \"icon slot button\";\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    align-items: start;\r\n    grid-template-columns: max-content auto;\r\n    grid-template-areas:\r\n      \"icon slot\"\r\n      \". button\";\r\n    padding-block: units.$u2;\r\n    gap: units.$u2 units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    grid-area: icon;\r\n  }\r\n\r\n  slot:not([name]) {\r\n    grid-area: slot;\r\n    margin-inline-end: 10px;\r\n  }\r\n\r\n  ::slotted([slot=\"button\"]) {\r\n    --_dso-button-secondary-background-color: transparent;\r\n    --_dso-button-secondary-color: #{colors.$wit};\r\n    --_dso-button-secondary-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-background-color: rgba(235, 225, 235, 0.2);\r\n    --_dso-button-secondary-hover-color: #{colors.$wit};\r\n    --_dso-button-secondary-hover-border-color: #{colors.$wit};\r\n    --_dso-button-secondary-active-background-color: rgba(235, 225, 235, 0.4);\r\n    --_dso-button-secondary-active-border-color: rgba(235, 225, 235, 0.3);\r\n    --_dso-button-secondary-disabled-background-color: transparent;\r\n    --_dso-button-secondary-disabled-color: rgba(235, 225, 235, 0.7);\r\n    --_dso-button-secondary-disabled-border-color: rgba(235, 225, 235, 0.7);\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      margin-inline-start: units.$u4 !important; /* extra ruimte zodat totaal 40px tussen 2e en 3e */\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      grid-area: button;\r\n      justify-self: start;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Fragment, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-tijdreis-banner\",\r\n  styleUrl: \"tijdreis-banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class TijdreisBanner implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-icon icon=\"clock\" />\r\n        <slot></slot>\r\n        <slot name=\"button\"></slot>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,2/HAA2/H,CAAC;;MCOhhI,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CAClB;;;;;;;"}

package/dist/esm/dso-toolkit.js

@@ -44,7 +44,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"dsot-document-component-demo\",[[258,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-legend-item\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"showOptions\":[32]}]]],[\"dso-annotation-activiteit\",[[257,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing\",[[257,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[257,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-list-button\",[[257,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers\",[[257,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[257,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-advanced-select\",[[257,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-map-controls\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-project-item\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-annotation-kaart\",[[257,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-legend\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-modal\",[[257,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32]}]]],[\"dso-survey-rating\",[[257,\"dso-survey-rating\"]]],[\"dso-header\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32]},null,{\"mainMenu\":[\"mainMenuChanged\"]}]]],[\"dso-mark-bar\",[[257,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination\",[[257,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view\",[[257,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-history-item\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513]}]]],[\"dso-label_3\",[[257,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]],[\"dso-map-layer\",[[257,\"dso-map-layer\",{\"label\":[513],\"activatable\":[516],\"active\":[516]}]]],[\"dso-map-layer-object\",[[257,\"dso-map-layer-object\",{\"active\":[516]}]]],[\"dso-plekinfo-card\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink\",[[257,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"icon\":[516]}]]],[\"dso-card-container\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker\",[[258,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[257,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo\",[[257,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-tab\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[257,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterPanelOpen\":[\"filterPanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-icon_2\",[[257,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"showTooltip\":[32],\"setFocus\":[64]}],[257,\"dso-icon\",{\"icon\":[1]}]]],[\"dso-annotation-locatie_2\",[[257,\"dso-document-component\",{\"heading\":[1],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[1],\"badgeStatus\":[1,\"badge-status\"],\"badgeTooltip\":[1,\"badge-tooltip\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513]}],[257,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2\",[[257,\"dso-attachments-counter\",{\"count\":[2]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator\",[[257,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-scrollable\",[[257,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info-button\",[[257,\"dso-info-button\",{\"active\":[516],\"secondary\":[4],\"label\":[1],\"toggletipPlacement\":[1,\"toggletip-placement\"],\"hover\":[32],\"toggletipActive\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip\",[[257,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-button-group\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-dropdown-menu\",[[257,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4]},[[8,\"click\",\"onClick\"]]]]],[\"dso-responsive-element\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-info_2\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-tooltip\",[[257,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-alert_7\",[[257,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32],\"showToggletip\":[32]}],[257,\"dso-badge\",{\"status\":[1]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"dsot-document-component-demo\",[[258,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-legend-item\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"showOptions\":[32]}]]],[\"dso-annotation-activiteit\",[[257,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing\",[[257,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[257,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-list-button\",[[257,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers\",[[257,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[257,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-advanced-select\",[[257,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-map-controls\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-project-item\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-annotation-kaart\",[[257,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-legend\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-modal\",[[257,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32]}]]],[\"dso-survey-rating\",[[257,\"dso-survey-rating\"]]],[\"dso-header\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32]},null,{\"mainMenu\":[\"mainMenuChanged\"]}]]],[\"dso-mark-bar\",[[257,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination\",[[257,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view\",[[257,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-history-item\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513]}]]],[\"dso-label_3\",[[257,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]],[\"dso-map-layer\",[[257,\"dso-map-layer\",{\"label\":[513],\"activatable\":[516],\"active\":[516]}]]],[\"dso-map-layer-object\",[[257,\"dso-map-layer-object\",{\"active\":[516]}]]],[\"dso-plekinfo-card\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink\",[[257,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"icon\":[516]}]]],[\"dso-card-container\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker\",[[258,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-highlight-box\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[257,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo\",[[257,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-tab\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[257,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[\"documentPanelOpenWatcher\"],\"filterPanelOpen\":[\"filterPanelOpenWatcher\"],\"overlayOpen\":[\"overlayOpenWatcher\"]}]]],[\"dso-icon_2\",[[257,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"showTooltip\":[32],\"setFocus\":[64]}],[257,\"dso-icon\",{\"icon\":[1]}]]],[\"dso-annotation-locatie_2\",[[257,\"dso-document-component\",{\"heading\":[1],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[1],\"badgeStatus\":[1,\"badge-status\"],\"badgeTooltip\":[1,\"badge-tooltip\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513]}],[257,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2\",[[257,\"dso-attachments-counter\",{\"count\":[2]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[\"toggleOpen\"]}]]],[\"dso-progress-indicator\",[[257,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-scrollable\",[[257,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-info-button\",[[257,\"dso-info-button\",{\"active\":[516],\"secondary\":[4],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip\",[[257,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-button-group\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-dropdown-menu\",[[257,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4]},[[8,\"click\",\"onClick\"]]]]],[\"dso-responsive-element\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-info_2\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-tooltip\",[[257,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[\"watchPosition\"],\"strategy\":[\"watchStrategy\"],\"active\":[\"watchActive\"]}]]],[\"dso-alert_7\",[[257,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32],\"showToggletip\":[32]}],[257,\"dso-badge\",{\"status\":[1]}]]]]"), options);
 });
 //# sourceMappingURL=dso-toolkit.js.map
 

package/dist/esm/dso-viewer-grid.entry.js

@@ -470,6 +470,7 @@ button::-moz-focus-inner {
     text-align: start;
     user-select: none;
     vertical-align: middle;
+    background-clip: padding-box;
   }
   .dso-tertiary:focus, .dso-tertiary:focus-visible {
     outline-offset: 2px;
@@ -477,27 +478,107 @@ button::-moz-focus-inner {
   .dso-tertiary:active {
     outline: 0;
   }
+  .dso-tertiary {
+    display: inline-block;
+    font-size: 1em;
+    font-weight: 500;
+    margin-block-end: 0;
+    text-decoration: none;
+    touch-action: manipulation;
+    text-align: start;
+    user-select: none;
+    vertical-align: middle;
+    background-clip: padding-box;
+  }
+  .dso-tertiary:focus, .dso-tertiary:focus-visible {
+    outline-offset: 2px;
+  }
+  .dso-tertiary:active {
+    outline: 0;
+  }
+  .dso-tertiary {
+    background-color: var(--_dso-button-tertiary-background-color, );
+    border-color: var(--_dso-button-tertiary-border-color, );
+    color: var(--_dso-button-tertiary-color, #39870c);
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    line-height: 1.5;
+    min-inline-size: 56px;
+    padding-block: 11px;
+    padding-inline: 15px;
+  }
+  .dso-tertiary:hover {
+    background-color: var(--_dso-button-tertiary-hover-background-color, );
+    border-color: var(--_dso-button-tertiary-hover-border-color, );
+    color: var(--_dso-button-tertiary-hover-color, #275937);
+  }
+  .dso-tertiary:active {
+    background-color: var(--_dso-button-tertiary-active-background-color, );
+    border-color: var(--_dso-button-tertiary-active-border-color, );
+    color: var(--_dso-button-tertiary-active-color, #173521);
+  }
+  .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {
+    background-color: var(--_dso-button-tertiary-disabled-background-color, );
+    border-color: var(--_dso-button-tertiary-disabled-border-color, );
+    color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+  }
+  .dso-tertiary.dso-small {
+    line-height: 1rem;
+  }
+  .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {
+    margin-block-end: -4px;
+    margin-block-start: -4px;
+  }
+  .dso-tertiary.dso-small.dso-spinner-left::before {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-small.dso-spinner-right::after {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-extra-small {
+    line-height: 1rem;
+  }
+  .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {
+    margin-block-end: -4px;
+    margin-block-start: -4px;
+  }
+  .dso-tertiary.dso-extra-small.dso-spinner-left::before {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-extra-small.dso-spinner-right::after {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-extra-small {
+    padding-block: 9px;
+  }
+  .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
+    margin-inline-start: -8px;
+  }
+  .dso-tertiary span:not(.sr-only) + dso-icon {
+    margin-inline-start: 8px;
+    margin-inline-end: -8px;
+  }
+  .dso-tertiary dso-icon + span:not(.sr-only) {
+    margin-inline-start: 8px;
+  }
   .dso-tertiary {
     border: 0;
-    color: #39870c;
     line-height: 1;
     padding: 0;
     background-color: transparent;
   }
-  .dso-tertiary[disabled] {
-    color: #afcf9d;
-  }
   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
     color: #39870c;
   }
   .dso-tertiary:not([disabled]):hover {
-    color: #275937;
     text-decoration: underline;
     text-underline-position: under;
   }
-  .dso-tertiary:not([disabled]):active {
-    color: #173521;
-  }
   .dso-tertiary.dso-align {
     line-height: calc(1.5em - 1px);
     padding-block: 11px;