@dso-toolkit/core 100.0.0 → 100.1.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 
 const surveyRatingCss = () => `:host {   display: block;   position: fixed;   inset-block-end: 16px;   inset-inline-start: 16px;   inline-size: 370px;   background-color: #fff;   box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);   border-radius: 4px;   z-index: 1000; } @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;   border: 0;   overflow: hidden;   clip-path: rect(0 0 0 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) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_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; } label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_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; } label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-zwart);   --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);   --_dso-link-phone-icon: var(--_dso-di-call-zwart);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: #1f472c;   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: #275937;   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #1f472c;   --_dso-icon-button-tertiary-toggled-color: #275937;   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);   --_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; } label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-zwart);   --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);   --_dso-link-phone-icon: var(--_dso-di-call-zwart);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: #1f472c;   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: #275937;   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #1f472c;   --_dso-icon-button-tertiary-toggled-color: #275937;   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);   --_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; } label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-zwart);   --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);   --_dso-link-phone-icon: var(--_dso-di-call-zwart);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: #1f472c;   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: #275937;   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;   --_dso-icon-button-tertiary-color: #191919;   --_dso-icon-button-tertiary-hover-color: #4c4c4c;   --_dso-icon-button-tertiary-active-color: #1f472c;   --_dso-icon-button-tertiary-toggled-color: #275937;   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;   --_dso-icon-button-tertiary-disabled-color: #999;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);   --_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; } label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_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; } label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_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; }  button {   -webkit-appearance: button;   color: inherit;   cursor: pointer;   font: inherit;   font-family: inherit;   font-size: inherit;   letter-spacing: inherit;   line-height: inherit;   margin: 0;   overflow: visible;   text-transform: none; } 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: var(--_dso-button-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; } button.dso-secondary:active {   outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after {   content: "";   display: inline-block; } button.dso-secondary {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } button.dso-secondary:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dso-button-float-secondary, none); } button.dso-secondary.dso-small {   line-height: 1rem; } button.dso-secondary.dso-small dso-icon, 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-extra-small {   line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-secondary.dso-extra-small {   padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 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 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%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; } button {   margin-block-start: 16px; }`;
 

package/dist/cjs/dso-tab.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
 const tabCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;letter-spacing:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}`;

package/dist/cjs/dso-tabs.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 
 const tabsCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}`;
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.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;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-wit);--_dso-link-extern-icon:var(--_dso-di-external-link-wit);--_dso-link-phone-icon:var(--_dso-di-call-wit);--_dso-link-mail-icon:var(--_dso-di-mail-outline-wit);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-wit);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:rgba(255, 255, 255, 0.2);--_dso-icon-button-secondary-toggled-hover-background-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-color:#f2f2f2;--_dso-icon-button-tertiary-hover-color:#fff;--_dso-icon-button-tertiary-active-color:rgba(255, 255, 255, 0.4);--_dso-icon-button-tertiary-toggled-color:#fff;--_dso-icon-button-tertiary-toggled-hover-color:rgba(255, 255, 255, 0.3);--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-tertiary-download-icon:var(--_dso-di-download-wit);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-wit);--_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}}`;
 

package/dist/cjs/dso-toolkit.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const DsoTreeItem = ({ owner, ancestors, item, index: index$1, level, setSize, }) => (index.h("li", { key: item.id, class: clsx.clsx("tree-item", { "has-child": item.hasItems, "is-expanded": !!item.open && !!item.items?.length }), role: "none" }, index.h("div", { class: "tree-branch-control" }, item.hasItems ? (index.h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) }, index.h("dso-icon", { icon: item.open ? "minus-square-outline" : "plus-square-outline" }))) : (index.h("dso-icon", null))), index.h("p", { class: clsx.clsx("tree-content", { active: item.active }, { selected: item.selected }), tabindex: level === 1 && index$1 === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? "" + (!!item.open && !!item.items?.length) : undefined, "aria-current": item.active ? "true" : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index$1 + 1, "aria-busy": item.loading ? "true" : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) }, item.selected && index.h("span", { class: "sr-only" }, "Resultaat: "), item.href ? (index.h("a", { href: item.href, tabindex: "-1" }, item.label)) : (index.h("span", null, item.label)), item.icons?.map((icon) => (index.h("dso-icon", { icon: icon.icon, title: icon.label })))), item.open && (index.h(index.Fragment, null, item.hasItems && !item.items && item.loading ? (index.h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (index.h("ul", { role: "group" }, item.items?.map((childItem, childIndex, org) => (index.h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: childIndex, level: level + 1, setSize: org.length })))))))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var index$1 = require('./index-DMUCyuUA.js');
 

package/dist/cjs/dsot-document-component-demo.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 var _commonjsHelpers = require('./_commonjsHelpers-BJu3ubxk.js');
 
 /**

package/dist/cjs/{index-fOjUpMJG.js → index-CfwUrDXc.js}

@@ -2926,7 +2926,7 @@ var insertBefore = (parent, newNode, reference, isInitialLoad) => {
       return newNode;
     }
   }
-  if (parent.__insertBefore) {
+  if (parent != null && parent.__insertBefore) {
     return parent.__insertBefore(newNode, reference);
   } else {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);

package/dist/cjs/{index-D8SsuyUx.js → index-EngjN4P3.js}

@@ -1,16 +1,19 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 
-const appendToMap = (map, propName, value) => {
+const appendToMap = (map, refsByValue, propName, value) => {
+    let ref = refsByValue.get(value);
+    if (!ref) {
+        ref = new WeakRef(value);
+        refsByValue.set(value, ref);
+    }
     let refs = map.get(propName);
     if (!refs) {
-        refs = [];
+        refs = new Set();
         map.set(propName, refs);
     }
-    if (!refs.some((ref) => ref.deref() === value)) {
-        refs.push(new WeakRef(value));
-    }
+    refs.add(ref);
 };
 const debounce = (fn, ms) => {
     let timeoutId;
@@ -36,13 +39,15 @@ const debounce = (fn, ms) => {
  */
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
 const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        const refs = map.get(key).filter((ref) => {
+    map.forEach((refs, key) => {
+        const nextRefs = new Set();
+        refs.forEach((ref) => {
             const elm = ref.deref();
-            return elm && isConnected(elm);
+            if (elm && isConnected(elm))
+                nextRefs.add(ref);
         });
-        map.set(key, refs);
-    }
+        map.set(key, nextRefs);
+    });
 }, 2_000);
 const core = index.StencilCore;
 const forceUpdate = core.forceUpdate;
@@ -55,23 +60,24 @@ const stencilSubscription = () => {
     }
     const ensureForceUpdate = forceUpdate;
     const ensureGetRenderingRef = getRenderingRef;
+    const refsByElement = new WeakMap();
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
             const elm = ensureGetRenderingRef();
             if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
+                appendToMap(elmsToUpdate, refsByElement, propName, elm);
             }
         },
         set: (propName) => {
             const refs = elmsToUpdate.get(propName);
             if (refs) {
-                const nextRefs = refs.filter((ref) => {
+                const nextRefs = new Set();
+                refs.forEach((ref) => {
                     const elm = ref.deref();
-                    if (!elm)
-                        return false;
-                    return ensureForceUpdate(elm);
+                    if (elm && ensureForceUpdate(elm))
+                        nextRefs.add(ref);
                 });
                 elmsToUpdate.set(propName, nextRefs);
             }

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/cjs/{parse-wijzigactie-from-node.function-Bi4NE9Tt.js → parse-wijzigactie-from-node.function-B2dUQ7Rf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 
 const MarkText = ({ mark, text, emitMarkItemHighlight }) => {
     const result = mark(text);

package/dist/cjs/{tooltip.functional-component-D6oJmzwD.js → tooltip.functional-component-BEcuvKwS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 
 const Tooltip = ({ id, tipElementRef, tipArrowElementRef }, children) => (index.h("div", { id: id, popover: "manual", class: "dso-tooltip", ref: tipElementRef }, index.h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), index.h("div", { class: "tooltip-inner" }, children)));
 

package/dist/cjs/{wrap-wijzigactie.functional-component-CV8gX7lQ.js → wrap-wijzigactie.functional-component-DodUwf7_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-fOjUpMJG.js');
+var index = require('./index-CfwUrDXc.js');
 
 const WrapWijzigactie = ({ wijzigactie, class: className }, children) => {
     if (wijzigactie === "voegtoe") {

package/dist/collection/components/table/table.css

@@ -1097,18 +1097,18 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-table-utilities:not([hidden]) {
   align-items: center;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-block-end: 8px;
 }
+.dso-table-utilities:not([hidden]):has(.dso-responsive-message) {
+  justify-content: space-between;
+}
 .dso-table-utilities:not([hidden]) .dso-responsive-message {
   margin-block-end: 0;
 }
 .dso-table-utilities:not([hidden]) .dso-responsive-message:only-child {
   inline-size: 100%;
 }
-.dso-table-utilities:not([hidden]) .open-modal-button:only-child {
-  margin-inline-start: auto;
-}
 
 .dso-responsive-message {
   font-size: 0.8em;

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

@@ -1,7 +1,10 @@
 import { Fragment, Host, h } from "@stencil/core";
 import debounce from "debounce";
+import { v4 as uuidv4 } from "uuid";
 export class Table {
     constructor() {
+        this.shouldFocusButton = false;
+        this.openModalHandler = () => this.openModal();
         /**
          * Prevents the table being opened in a modal.
          */
@@ -36,17 +39,23 @@ export class Table {
     componentDidLoad() {
         this.startResponsiveBehavior();
     }
+    componentDidRender() {
+        this.syncOpenModalButton();
+    }
     disconnectedCallback() {
         if (this.resizeFrameId !== undefined) {
             cancelAnimationFrame(this.resizeFrameId);
             this.resizeFrameId = undefined;
         }
         this.resizeObserver?.disconnect();
+        this.openModalButton?.removeEventListener("click", this.openModalHandler);
+        this.openModalButton?.remove();
+        this.openModalButton = undefined;
     }
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: '207e7807c5bc17b52701c617f41cff0f9e239c32', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '6270bc4b55067cfa800b57c688e599f90db426eb', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption ?? "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
+        return (h(Host, { key: '3ac0567d3a05b156404479b702df5c0da1140131', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'e3129be5a35d2e4569037b53aca102055040701c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && h("slot", { name: "open-modal-button" })), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;
@@ -55,6 +64,51 @@ export class Table {
     closeModal() {
         this.placeholderHeight = undefined;
         this.modalActive = false;
+        this.shouldFocusButton = true;
+    }
+    syncOpenModalButton() {
+        const table = this.host.querySelector(":scope > table");
+        if (table && !table.id) {
+            table.id = `dso-table-${uuidv4()}`;
+        }
+        const shouldRender = !this.noModal && !this.modalActive;
+        if (!shouldRender) {
+            this.openModalButton?.removeEventListener("click", this.openModalHandler);
+            this.openModalButton?.remove();
+            this.openModalButton = undefined;
+            return;
+        }
+        if (!this.openModalButton) {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "dso-tertiary open-modal-button";
+            button.setAttribute("slot", "open-modal-button");
+            button.addEventListener("click", this.openModalHandler);
+            const srOnly = document.createElement("span");
+            srOnly.className = "sr-only";
+            const label = document.createElement("span");
+            label.textContent = "vergroten";
+            const icon = document.createElement("dso-icon");
+            icon.setAttribute("icon", "external-link");
+            button.append(srOnly, label, icon);
+            this.host.appendChild(button);
+            this.openModalButton = button;
+        }
+        const caption = table?.querySelector(":scope > caption")?.textContent?.trim();
+        const srOnly = this.openModalButton.querySelector(".sr-only");
+        if (srOnly) {
+            srOnly.textContent = `tabel ${caption ?? ""} `;
+        }
+        if (table?.id) {
+            this.openModalButton.setAttribute("aria-controls", table.id);
+        }
+        else {
+            this.openModalButton.removeAttribute("aria-controls");
+        }
+        if (this.shouldFocusButton) {
+            this.shouldFocusButton = false;
+            this.openModalButton.focus();
+        }
     }
     setResponsiveTable(dsoTable) {
         const tableElement = dsoTable.target.querySelector("table");

package/dist/components/index2.js

@@ -1 +1 @@
-import*as e from"@stencil/core/internal/client";const t=(()=>{let e;return(...t)=>{e&&clearTimeout(e),e=setTimeout((()=>{e=0,(e=>{for(let t of e.keys()){const n=e.get(t).filter((e=>{const t=e.deref();return t&&(!("isConnected"in(n=t))||n.isConnected);var n}));e.set(t,n)}})(...t)}),2e3)}})(),n=e.forceUpdate,o=e.getRenderingRef,r=(e,t)=>{const n=e.indexOf(t);n>=0&&(e[n]=e[e.length-1],e.length--)},s=(e,s)=>{const c=((e,t=(e,t)=>e!==t)=>{const n=()=>{return("function"==typeof(t=e)?t():t)??{};var t},o=n();let s=new Map(Object.entries(o));const c="undefined"!=typeof Proxy,i=c?null:{},u={dispose:[],get:[],set:[],reset:[]},f=new Map,a=()=>{s=new Map(Object.entries(n())),c||w(),u.reset.forEach((e=>e()))},p=e=>(u.get.forEach((t=>t(e))),s.get(e)),l=(e,n)=>{const o=s.get(e);t(n,o,e)&&(s.set(e,n),c||b(e),u.set.forEach((t=>t(e,n,o))))},d=c?new Proxy(o,{get:(e,t)=>p(t),ownKeys:()=>Array.from(s.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(e,t)=>s.has(t),set:(e,t,n)=>(l(t,n),!0)}):(w(),i),g=(e,t)=>(u[e].push(t),()=>{r(u[e],t)});function b(e){!c&&i&&(Object.prototype.hasOwnProperty.call(i,e)||Object.defineProperty(i,e,{configurable:!0,enumerable:!0,get:()=>p(e),set(t){l(e,t)}}))}function w(){if(c||!i)return;const e=new Set(s.keys());for(const t of Object.keys(i))e.has(t)||delete i[t];for(const t of e)b(t)}return{state:d,get:p,set:l,on:g,onChange:(e,t)=>{const o=(n,o)=>{n===e&&t(o)},r=()=>{const o=n();t(o[e])},s=g("set",o),c=g("reset",r);return f.set(t,{setHandler:o,resetHandler:r,propName:e}),()=>{s(),c(),f.delete(t)}},use:(...e)=>{const t=e.reduce(((e,t)=>(t.set&&e.push(g("set",t.set)),t.get&&e.push(g("get",t.get)),t.reset&&e.push(g("reset",t.reset)),t.dispose&&e.push(g("dispose",t.dispose)),e)),[]);return()=>t.forEach((e=>e()))},dispose:()=>{u.dispose.forEach((e=>e())),a()},reset:a,forceUpdate:e=>{const t=s.get(e);u.set.forEach((n=>n(e,t,t)))},removeListener:(e,t)=>{const n=f.get(t);n&&n.propName===e&&(r(u.set,n.setHandler),r(u.reset,n.resetHandler),f.delete(t))}}})(e,s);return c.use((()=>{if("function"!=typeof o||"function"!=typeof n)return{};const e=n,r=o,s=new Map;return{dispose:()=>s.clear(),get:e=>{const t=r();t&&((e,t,n)=>{let o=e.get(t);o||(o=[],e.set(t,o)),o.some((e=>e.deref()===n))||o.push(new WeakRef(n))})(s,e,t)},set:n=>{const o=s.get(n);if(o){const t=o.filter((t=>{const n=t.deref();return!!n&&e(n)}));s.set(n,t)}t(s)},reset:()=>{s.forEach((t=>{t.forEach((t=>{const n=t.deref();n&&e(n)}))})),t(s)}}})()),c};export{s as c}
+import*as e from"@stencil/core/internal/client";const t=(()=>{let e;return(...t)=>{e&&clearTimeout(e),e=setTimeout((()=>{e=0,(e=>{e.forEach(((t,n)=>{const o=new Set;t.forEach((e=>{const t=e.deref();var n;t&&(!("isConnected"in(n=t))||n.isConnected)&&o.add(e)})),e.set(n,o)}))})(...t)}),2e3)}})(),n=e.forceUpdate,o=e.getRenderingRef,s=(e,t)=>{const n=e.indexOf(t);n>=0&&(e[n]=e[e.length-1],e.length--)},r=(e,r)=>{const c=((e,t=(e,t)=>e!==t)=>{const n=()=>{return("function"==typeof(t=e)?t():t)??{};var t},o=n();let r=new Map(Object.entries(o));const c="undefined"!=typeof Proxy,a=c?null:{},i={dispose:[],get:[],set:[],reset:[]},u=new Map,f=()=>{r=new Map(Object.entries(n())),c||b(),i.reset.forEach((e=>e()))},p=e=>(i.get.forEach((t=>t(e))),r.get(e)),l=(e,n)=>{const o=r.get(e);t(n,o,e)&&(r.set(e,n),c||g(e),i.set.forEach((t=>t(e,n,o))))},w=c?new Proxy(o,{get:(e,t)=>p(t),ownKeys:()=>Array.from(r.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(e,t)=>r.has(t),set:(e,t,n)=>(l(t,n),!0)}):(b(),a),d=(e,t)=>(i[e].push(t),()=>{s(i[e],t)});function g(e){!c&&a&&(Object.prototype.hasOwnProperty.call(a,e)||Object.defineProperty(a,e,{configurable:!0,enumerable:!0,get:()=>p(e),set(t){l(e,t)}}))}function b(){if(c||!a)return;const e=new Set(r.keys());for(const t of Object.keys(a))e.has(t)||delete a[t];for(const t of e)g(t)}return{state:w,get:p,set:l,on:d,onChange:(e,t)=>{const o=(n,o)=>{n===e&&t(o)},s=()=>{const o=n();t(o[e])},r=d("set",o),c=d("reset",s);return u.set(t,{setHandler:o,resetHandler:s,propName:e}),()=>{r(),c(),u.delete(t)}},use:(...e)=>{const t=e.reduce(((e,t)=>(t.set&&e.push(d("set",t.set)),t.get&&e.push(d("get",t.get)),t.reset&&e.push(d("reset",t.reset)),t.dispose&&e.push(d("dispose",t.dispose)),e)),[]);return()=>t.forEach((e=>e()))},dispose:()=>{i.dispose.forEach((e=>e())),f()},reset:f,forceUpdate:e=>{const t=r.get(e);i.set.forEach((n=>n(e,t,t)))},removeListener:(e,t)=>{const n=u.get(t);n&&n.propName===e&&(s(i.set,n.setHandler),s(i.reset,n.resetHandler),u.delete(t))}}})(e,r);return c.use((()=>{if("function"!=typeof o||"function"!=typeof n)return{};const e=n,s=o,r=new WeakMap,c=new Map;return{dispose:()=>c.clear(),get:e=>{const t=s();t&&((e,t,n,o)=>{let s=t.get(o);s||(s=new WeakRef(o),t.set(o,s));let r=e.get(n);r||(r=new Set,e.set(n,r)),r.add(s)})(c,r,e,t)},set:n=>{const o=c.get(n);if(o){const t=new Set;o.forEach((n=>{const o=n.deref();o&&e(o)&&t.add(n)})),c.set(n,t)}t(c)},reset:()=>{c.forEach((t=>{t.forEach((t=>{const n=t.deref();n&&e(n)}))})),t(c)}}})()),c};export{r as c}