@dso-toolkit/core 69.1.0 → 69.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dso-accordion-section.cjs.entry.js +2 -2
- package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +1 -1
- package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-label_3.cjs.entry.js +37 -9
- package/dist/cjs/dso-label_3.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-survey-rating.cjs.entry.js +1 -1
- package/dist/cjs/dso-survey-rating.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/accordion/components/accordion-section.js +4 -4
- package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
- package/dist/collection/components/document-component/document-component.css +2 -2
- package/dist/collection/components/renvooi/renvooi-render-text.js +17 -0
- package/dist/collection/components/renvooi/renvooi-render-text.js.map +1 -0
- package/dist/collection/components/renvooi/renvooi-render.js +16 -0
- package/dist/collection/components/renvooi/renvooi-render.js.map +1 -0
- package/dist/collection/components/renvooi/renvooi.css +10 -0
- package/dist/collection/components/renvooi/renvooi.interfaces.js.map +1 -1
- package/dist/collection/components/renvooi/renvooi.js +54 -14
- package/dist/collection/components/renvooi/renvooi.js.map +1 -1
- package/dist/collection/components/survey-rating/survey-rating.css +3 -1
- package/dist/collection/components/tooltip/tooltip.css +3 -5
- package/dist/components/document-component.js +1 -1
- package/dist/components/document-component.js.map +1 -1
- package/dist/components/dso-accordion-section.js +2 -2
- package/dist/components/dso-accordion-section.js.map +1 -1
- package/dist/components/dso-survey-rating.js +1 -1
- package/dist/components/dso-survey-rating.js.map +1 -1
- package/dist/components/renvooi.js +39 -10
- package/dist/components/renvooi.js.map +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
- package/dist/dso-toolkit/{p-1746cde9.entry.js → p-0c7615c1.entry.js} +2 -2
- package/dist/dso-toolkit/p-0c7615c1.entry.js.map +1 -0
- package/dist/dso-toolkit/p-1c72e7eb.entry.js +2 -0
- package/dist/dso-toolkit/p-1c72e7eb.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-631af6b1.entry.js → p-732b261f.entry.js} +2 -2
- package/dist/dso-toolkit/p-732b261f.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-d51d44f7.entry.js → p-743f5beb.entry.js} +2 -2
- package/dist/dso-toolkit/p-743f5beb.entry.js.map +1 -0
- package/dist/dso-toolkit/p-a811a886.entry.js +2 -0
- package/dist/dso-toolkit/p-a811a886.entry.js.map +1 -0
- package/dist/esm/dso-accordion-section.entry.js +2 -2
- package/dist/esm/dso-accordion-section.entry.js.map +1 -1
- package/dist/esm/dso-annotation-locatie_2.entry.js +1 -1
- package/dist/esm/dso-annotation-locatie_2.entry.js.map +1 -1
- package/dist/esm/dso-label_3.entry.js +37 -9
- package/dist/esm/dso-label_3.entry.js.map +1 -1
- package/dist/esm/dso-survey-rating.entry.js +1 -1
- package/dist/esm/dso-survey-rating.entry.js.map +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-tooltip.entry.js +1 -1
- package/dist/esm/dso-tooltip.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/accordion/components/accordion-section.d.ts +1 -1
- package/dist/types/components/renvooi/renvooi-render-text.d.ts +9 -0
- package/dist/types/components/renvooi/renvooi-render.d.ts +9 -0
- package/dist/types/components/renvooi/renvooi.d.ts +11 -2
- package/dist/types/components/renvooi/renvooi.interfaces.d.ts +12 -0
- package/dist/types/components.d.ts +31 -4
- package/package.json +3 -3
- package/dist/dso-toolkit/p-1746cde9.entry.js.map +0 -1
- package/dist/dso-toolkit/p-32f26545.entry.js +0 -2
- package/dist/dso-toolkit/p-32f26545.entry.js.map +0 -1
- package/dist/dso-toolkit/p-4549dc10.entry.js +0 -2
- package/dist/dso-toolkit/p-4549dc10.entry.js.map +0 -1
- package/dist/dso-toolkit/p-631af6b1.entry.js.map +0 -1
- package/dist/dso-toolkit/p-d51d44f7.entry.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-91149367.js';
|
|
2
2
|
|
|
3
|
-
const surveyRatingCss = ":host {\n display: block;\n position: absolute;\n inset-block-end: 16px;\n inset-inline-start: 16px;\n inline-size: 370px;\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n border-radius: 4px;\n}\n@media screen and (max-width: 480px) {\n :host {\n inline-size: 320px;\n inset-block-end: 0;\n inset-inline-start: 0;\n --panel-heading-padding-inline-start: 8px;\n --panel-body-padding-inline: 8px;\n }\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.visual-rating-labels {\n display: flex;\n justify-content: space-between;\n margin-block: 8px;\n}\n\ninput[type=radio] {\n appearance: none;\n cursor: pointer;\n position: absolute;\n margin-inline: 0;\n margin-block: 0;\n inset-block: 8px 0;\n inset-inline: 0;\n z-index: 1;\n}\n\nlabel {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 48px;\n block-size: 48px;\n border: 1px solid #ccc;\n border-inline-end-width: 0;\n padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n label {\n inline-size: 43px;\n block-size: 43px;\n }\n}\nlabel:hover {\n background-color: #f2f2f2;\n}\nlabel:active {\n background-color: #e5e5e5;\n}\nlabel:first-of-type {\n border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n border-inline-end-width: 1px;\n border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n border-radius: 0 3px 0 0;\n}\nlabel::before {\n content: \"\";\n display: block;\n position: absolute;\n inset-block-start: 0;\n block-size: 8px;\n inline-size: 100%;\n border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #b62f41;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-1::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-1::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #ce3f51;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-2::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-2::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e17000;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-3::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-3::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #dcd400;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-4::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-4::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #79b929;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-5::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-5::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #39870c;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-6::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-6::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #275937;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-7::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-7::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n margin-block-start: 16px;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\nbutton.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\nbutton.dso-secondary.dso-small {\n line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}";
|
|
3
|
+
const surveyRatingCss = ":host {\n display: block;\n position: fixed;\n inset-block-end: 16px;\n inset-inline-start: 16px;\n inline-size: 370px;\n background-color: #fff;\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n border-radius: 4px;\n z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n :host {\n inline-size: 320px;\n inset-block-end: 0;\n inset-inline-start: 0;\n --panel-heading-padding-inline-start: 8px;\n --panel-body-padding-inline: 8px;\n }\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.visual-rating-labels {\n display: flex;\n justify-content: space-between;\n margin-block: 8px;\n}\n\ninput[type=radio] {\n appearance: none;\n cursor: pointer;\n position: absolute;\n margin-inline: 0;\n margin-block: 0;\n inset-block: 8px 0;\n inset-inline: 0;\n z-index: 1;\n}\n\nlabel {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 48px;\n block-size: 48px;\n border: 1px solid #ccc;\n border-inline-end-width: 0;\n padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n label {\n inline-size: 43px;\n block-size: 43px;\n }\n}\nlabel:hover {\n background-color: #f2f2f2;\n}\nlabel:active {\n background-color: #e5e5e5;\n}\nlabel:first-of-type {\n border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n border-inline-end-width: 1px;\n border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n border-radius: 0 3px 0 0;\n}\nlabel::before {\n content: \"\";\n display: block;\n position: absolute;\n inset-block-start: 0;\n block-size: 8px;\n inline-size: 100%;\n border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #b62f41;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-1::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-1::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #ce3f51;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-2::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-2::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e17000;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-3::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-3::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #dcd400;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-4::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-4::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #79b929;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-5::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-5::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #39870c;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-6::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-6::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #275937;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-7::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-7::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n margin-block-start: 16px;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\nbutton.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\nbutton.dso-secondary.dso-small {\n line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}";
|
|
4
4
|
const DsoSurveyRatingStyle0 = surveyRatingCss;
|
|
5
5
|
|
|
6
6
|
const SurveyRating = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-survey-rating.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"dso-survey-rating.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,qtlBAAqtlB,CAAC;AAC9ulB,8BAAe,eAAe;;MCOjB,YAAY;;;;;;IAef,UAAU,CAAC,CAAQ;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;KAC7F;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB,CAAC;QAEF,QACE,kEAAW,UAAU,QAAC,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IACpF,2DAAI,IAAI,EAAC,SAAS,iCAAgC,EAClD,4HAAyE,EACzE,6DAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IACvC,4DAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM,IAClD,+EAA0B,EAC1B,gFAA2B,CACvB,EACN,4DAAK,IAAI,EAAC,YAAY,IACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK;YACzB,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;YAE/B,QACE,kBACE,aAAO,KAAK,EAAE,iBAAiB,YAAY,EAAE,IAC1C,YAAY,EACb,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,CAAQ,EACrC,aACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP,EACH;SACH,CAAC,CACE,EACN,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,IACzC,oFAA+B,CACxB,CACJ,CACG,EACZ;KACH;;;;;;","names":[],"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-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\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-survey-rating\",\r\n styleUrl: \"survey-rating.scss\",\r\n shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n private rating: number | undefined;\r\n\r\n /**\r\n * Emitted when user submits the Survey Rating.\r\n */\r\n @Event()\r\n dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n /**\r\n * Emitted when the user wants to close the Survey Rating.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n private handleForm(e: Event): void {\r\n e.preventDefault();\r\n this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n }\r\n\r\n private handleChange(e: Event): void {\r\n const target = e.target as HTMLInputElement;\r\n this.rating = Number(target.value);\r\n }\r\n\r\n render() {\r\n const ratings = [\r\n \"Heel moeilijk\",\r\n \"Moeilijk\",\r\n \"Redelijk moeilijk\",\r\n \"Neutraal\",\r\n \"Redelijk makkelijk\",\r\n \"Makkelijk\",\r\n \"Heel makkelijk\",\r\n ];\r\n\r\n return (\r\n <dso-panel emphasized onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <h2 slot=\"heading\">Help ons met een onderzoek</h2>\r\n <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren</strong>\r\n <form onSubmit={(e) => this.handleForm(e)}>\r\n <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n <span>Heel moeilijk</span>\r\n <span>Heel makkelijk</span>\r\n </div>\r\n <div role=\"radiogroup\">\r\n {ratings.map((rating, index) => {\r\n const ratingNumber = index + 1;\r\n\r\n return (\r\n <>\r\n <label class={`survey-rating-${ratingNumber}`}>\r\n {ratingNumber}\r\n <span class=\"sr-only\">{rating}</span>\r\n <input\r\n type=\"radio\"\r\n name=\"rating\"\r\n value={ratingNumber}\r\n checked={ratingNumber === this.rating}\r\n onChange={(e) => this.handleChange(e)}\r\n />\r\n </label>\r\n </>\r\n );\r\n })}\r\n </div>\r\n <button type=\"submit\" class=\"dso-secondary\">\r\n <span>Antwoord verzenden</span>\r\n </button>\r\n </form>\r\n </dso-panel>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
package/dist/esm/dso-toolkit.js
CHANGED
|
@@ -16,7 +16,7 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy(JSON.parse("[[\"dso-icon\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section\",[[1,\"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-annotation-activiteit\",[[1,\"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\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header\",[[1,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"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\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-survey-rating\",[[1,\"dso-survey-rating\"]]],[\"dso-tree-view\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-mark-bar\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-accordion\",[[1,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[1,\"dso-contact-information\"]]],[\"dso-date-picker\",[[2,\"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\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelTitle\":[513,\"filterpanel-title\"],\"filterpanelOpen\":[516,\"filterpanel-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-info-button\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-tooltip\",[[1,\"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_6\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"addSpaceBeforeNode\":[516,\"add-space-before-node\"],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"kop\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"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\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-info_2\",[[6,\"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],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_3\",[[1,\"dso-renvooi\",{\"value\":[1]}],[6,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-label\",{\"compact\":[4],\"removable\":[516],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}]]]]"), options);
|
|
19
|
+
return bootstrapLazy(JSON.parse("[[\"dso-icon\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section\",[[1,\"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-annotation-activiteit\",[[1,\"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\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header\",[[1,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"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\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-survey-rating\",[[1,\"dso-survey-rating\"]]],[\"dso-tree-view\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-mark-bar\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-accordion\",[[1,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[1,\"dso-contact-information\"]]],[\"dso-date-picker\",[[2,\"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\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelTitle\":[513,\"filterpanel-title\"],\"filterpanelOpen\":[516,\"filterpanel-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-info-button\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-tooltip\",[[1,\"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_6\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"addSpaceBeforeNode\":[516,\"add-space-before-node\"],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"kop\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"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\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-info_2\",[[6,\"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],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_3\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[6,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-label\",{\"compact\":[4],\"removable\":[516],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}]]]]"), options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=dso-toolkit.js.map
|
|
@@ -37,7 +37,7 @@ var maxSize = {
|
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
|
|
40
|
-
const tooltipCss = ":host(.hidden){visibility:hidden}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:break-word;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip.in .tooltip-inner{max-block-size:200vh;overflow:auto;visibility:visible;padding-block:8px;padding-inline:16px}.tooltip:not(.in) .tooltip-inner{max-block-size:0;overflow:hidden;visibility:hidden;transition:all 0s linear 0.15s}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-
|
|
40
|
+
const tooltipCss = ":host(.hidden){visibility:hidden}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:break-word;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip.in .tooltip-inner{max-block-size:200vh;overflow:auto;visibility:visible;padding-block:8px;padding-inline:16px}.tooltip:not(.in) .tooltip-inner{max-block-size:0;overflow:hidden;visibility:hidden;transition:all 0s linear 0.15s}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{inset-block-end:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-inline-start:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{inset-inline-start:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block-start:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{inset-block-start:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline-end:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{inset-inline-end:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}";
|
|
41
41
|
const DsoTooltipStyle0 = tooltipCss;
|
|
42
42
|
|
|
43
43
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-tooltip.entry.js","mappings":"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","names":[],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn: function fn(_ref) {\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var overflow = detectOverflow(state, options);\n\n var _ref2 = state.modifiersData.preventOverflow || {\n x: 0,\n y: 0\n },\n x = _ref2.x,\n y = _ref2.y;\n\n var _state$rects$popper = state.rects.popper,\n width = _state$rects$popper.width,\n height = _state$rects$popper.height;\n\n var _state$placement$spli = state.placement.split('-'),\n basePlacement = _state$placement$spli[0];\n\n var widthProp = basePlacement === 'left' ? 'left' : 'right';\n var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y\n };\n }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n font-family: typography.$font-family-base;\r\n // We deliberately do NOT reset font-size.\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n word-break: break-word;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n\r\n --link-color: #{colors.$grasgroen};\r\n display: block;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n font-size: typography.$font-size-small;\r\n opacity: 0;\r\n position: absolute;\r\n transition: opacity tooltip-variables.$transition-duration linear;\r\n z-index: zindex.$tooltip;\r\n\r\n &.in {\r\n opacity: tooltip-variables.$opacity;\r\n\r\n .tooltip-inner {\r\n max-block-size: 200vh; // an extreme max-block-size, just to be sure it always fits\r\n overflow: auto;\r\n visibility: visible;\r\n padding-block: tooltip-variables.$padding-block; // set padding-block here to hide the div when the .in class is not active\r\n padding-inline: tooltip-variables.$padding-inline; // set padding-inline here to hide the div when the .in class is not active\r\n }\r\n }\r\n\r\n &:not(.in) {\r\n .tooltip-inner {\r\n max-block-size: 0; // hide the element\r\n overflow: hidden;\r\n visibility: hidden;\r\n transition: all 0s linear tooltip-variables.$transition-duration; // delay all the properties with a 0s linear animation till the parent opacity animation time has passed\r\n }\r\n }\r\n\r\n .tooltip-inner {\r\n background-color: colors.$wit;\r\n border-radius: tooltip-variables.$border-radius;\r\n color: colors.$grijs-90;\r\n display: inline-block;\r\n font-size: typography.$root-font-size-base;\r\n max-inline-size: tooltip-variables.$max-inline-size;\r\n position: relative;\r\n\r\n &.dso-small {\r\n max-inline-size: tooltip-variables.$max-inline-size-small;\r\n }\r\n }\r\n\r\n .tooltip-arrow {\r\n border-color: transparent;\r\n border-style: solid;\r\n block-size: 0;\r\n inline-size: 0;\r\n }\r\n\r\n &[data-popper-placement=\"top\"] {\r\n margin-block-start: -3px;\r\n padding-block: tooltip-variables.$arrow-inline-size;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-end: 0;\r\n border-block-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-end-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"right\"] {\r\n margin-inline-start: 3px;\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-start: 0;\r\n border-inline-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-start-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"bottom\"] {\r\n margin-block-start: 3px;\r\n padding-block: tooltip-variables.$arrow-inline-size;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-start: 0;\r\n border-block-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-start-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"left\"] {\r\n margin-inline-start: -3px;\r\n margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n padding-block: 0;\r\n padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-end: 0;\r\n border-inline-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-end-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch, ComponentInterface } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip implements ComponentInterface {\r\n /**\r\n * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n */\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /**\r\n * Set position of tooltip relative to target\r\n */\r\n @Prop()\r\n position: Placement = \"top\";\r\n\r\n /**\r\n * Set position strategy of tooltip\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n /**\r\n * Set attribute `no-arrow` to hide the arrow\r\n */\r\n @Prop()\r\n noArrow = false;\r\n\r\n /**\r\n * Deactivates mouseover behaviour\r\n */\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /**\r\n * Defines if the tooltip has a smaller max-width\r\n */\r\n @Prop()\r\n small?: boolean;\r\n\r\n /**\r\n * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /**\r\n * Activate the tooltip (Sets the `active` attribute)\r\n */\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /**\r\n * Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => {\r\n // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding\r\n // van setTimeout() met 2ms.\r\n setTimeout(() => {\r\n if (this.element.isConnected) {\r\n this.active = false;\r\n }\r\n }, 2);\r\n },\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement | undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement | undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement | undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.getRootNode();\r\n if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dso-tooltip.entry.js","mappings":"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","names":[],"sources":["../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n name: 'maxSize',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n fn: function fn(_ref) {\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var overflow = detectOverflow(state, options);\n\n var _ref2 = state.modifiersData.preventOverflow || {\n x: 0,\n y: 0\n },\n x = _ref2.x,\n y = _ref2.y;\n\n var _state$rects$popper = state.rects.popper,\n width = _state$rects$popper.width,\n height = _state$rects$popper.height;\n\n var _state$placement$spli = state.placement.split('-'),\n basePlacement = _state$placement$spli[0];\n\n var widthProp = basePlacement === 'left' ? 'left' : 'right';\n var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n state.modifiersData[name] = {\n width: width - overflow[widthProp] - x,\n height: height - overflow[heightProp] - y\n };\n }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n font-family: typography.$font-family-base;\r\n // We deliberately do NOT reset font-size.\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n word-break: break-word;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n\r\n --link-color: #{colors.$grasgroen};\r\n display: block;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n font-size: typography.$font-size-small;\r\n opacity: 0;\r\n position: absolute;\r\n transition: opacity tooltip-variables.$transition-duration linear;\r\n z-index: zindex.$tooltip;\r\n\r\n &.in {\r\n opacity: tooltip-variables.$opacity;\r\n\r\n .tooltip-inner {\r\n max-block-size: 200vh; // an extreme max-block-size, just to be sure it always fits\r\n overflow: auto;\r\n visibility: visible;\r\n padding-block: tooltip-variables.$padding-block; // set padding-block here to hide the div when the .in class is not active\r\n padding-inline: tooltip-variables.$padding-inline; // set padding-inline here to hide the div when the .in class is not active\r\n }\r\n }\r\n\r\n &:not(.in) {\r\n .tooltip-inner {\r\n max-block-size: 0; // hide the element\r\n overflow: hidden;\r\n visibility: hidden;\r\n transition: all 0s linear tooltip-variables.$transition-duration; // delay all the properties with a 0s linear animation till the parent opacity animation time has passed\r\n }\r\n }\r\n\r\n .tooltip-inner {\r\n background-color: colors.$wit;\r\n border-radius: tooltip-variables.$border-radius;\r\n color: colors.$grijs-90;\r\n display: inline-block;\r\n font-size: typography.$root-font-size-base;\r\n max-inline-size: tooltip-variables.$max-inline-size;\r\n position: relative;\r\n\r\n &.dso-small {\r\n max-inline-size: tooltip-variables.$max-inline-size-small;\r\n }\r\n }\r\n\r\n .tooltip-arrow {\r\n border-color: transparent;\r\n border-style: solid;\r\n block-size: 0;\r\n inline-size: 0;\r\n }\r\n\r\n &[data-popper-placement=\"top\"] {\r\n margin-block-start: -3px;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-end: 0;\r\n border-block-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-end-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"right\"] {\r\n margin-inline-start: 3px;\r\n padding-inline-start: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-start: 0;\r\n border-inline-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-start-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"bottom\"] {\r\n margin-block-start: 3px;\r\n padding-block-start: tooltip-variables.$arrow-inline-size;\r\n padding-inline: 0;\r\n\r\n .tooltip-arrow {\r\n inset-block-start: 0;\r\n border-block-end-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-block-start-width: 0;\r\n margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n\r\n &[data-popper-placement=\"left\"] {\r\n margin-inline-start: -3px;\r\n margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n padding-block: 0;\r\n padding-inline-end: tooltip-variables.$arrow-inline-size;\r\n\r\n .tooltip-arrow {\r\n inset-inline-end: 0;\r\n border-inline-start-color: tooltip-variables.$arrow-color;\r\n border-width: tooltip-variables.$arrow-inline-size;\r\n border-inline-end-width: 0;\r\n margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n }\r\n }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch, ComponentInterface } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip implements ComponentInterface {\r\n /**\r\n * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n */\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /**\r\n * Set position of tooltip relative to target\r\n */\r\n @Prop()\r\n position: Placement = \"top\";\r\n\r\n /**\r\n * Set position strategy of tooltip\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n /**\r\n * Set attribute `no-arrow` to hide the arrow\r\n */\r\n @Prop()\r\n noArrow = false;\r\n\r\n /**\r\n * Deactivates mouseover behaviour\r\n */\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /**\r\n * Defines if the tooltip has a smaller max-width\r\n */\r\n @Prop()\r\n small?: boolean;\r\n\r\n /**\r\n * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /**\r\n * Activate the tooltip (Sets the `active` attribute)\r\n */\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /**\r\n * Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => {\r\n // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding\r\n // van setTimeout() met 2ms.\r\n setTimeout(() => {\r\n if (this.element.isConnected) {\r\n this.active = false;\r\n }\r\n }, 2);\r\n },\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement | undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement | undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement | undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.getRootNode();\r\n if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"],"version":3}
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy(JSON.parse("[[\"dso-icon\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section\",[[1,\"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-annotation-activiteit\",[[1,\"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\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header\",[[1,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"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\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-survey-rating\",[[1,\"dso-survey-rating\"]]],[\"dso-tree-view\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-mark-bar\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-accordion\",[[1,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[1,\"dso-contact-information\"]]],[\"dso-date-picker\",[[2,\"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\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelTitle\":[513,\"filterpanel-title\"],\"filterpanelOpen\":[516,\"filterpanel-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-info-button\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-tooltip\",[[1,\"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_6\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"addSpaceBeforeNode\":[516,\"add-space-before-node\"],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"kop\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"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\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-info_2\",[[6,\"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],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_3\",[[1,\"dso-renvooi\",{\"value\":[1]}],[6,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-label\",{\"compact\":[4],\"removable\":[516],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}]]]]"), options);
|
|
8
|
+
return bootstrapLazy(JSON.parse("[[\"dso-icon\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dsot-document-component-demo\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[\"jsonFileWatcher\"],\"openDefault\":[\"openDefaultWatcher\"]}]]],[\"dso-accordion-section\",[[1,\"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-annotation-activiteit\",[[1,\"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\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-advanced-select\",[[1,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-legend-item\",[[1,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[1,\"disabled-message\"],\"removable\":[4],\"showBody\":[32]}]]],[\"dso-map-base-layers\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-annotation-kaart\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest\",[[6,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"suggestOnFocus\":[4,\"suggest-on-focus\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32],\"listItemBlockSize\":[32],\"listboxContainerMaxBlockSize\":[32]},[[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[\"suggestionsWatcher\"]}]]],[\"dso-project-item\",[[1,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-header\",[[1,\"dso-header\",{\"mainMenu\":[16],\"useDropDownMenu\":[1,\"use-drop-down-menu\"],\"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\"],\"showDropDown\":[32],\"overflowMenuItems\":[32],\"dropdownOptionsOffset\":[32]},null,{\"useDropDownMenu\":[\"setShowDropDown\"]}]]],[\"dso-map-controls\",[[1,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},null,{\"open\":[\"watchOpen\"]}]]],[\"dso-modal\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"showCloseButton\":[4,\"show-close-button\"],\"ariaId\":[32]}]]],[\"dso-pagination\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-survey-rating\",[[1,\"dso-survey-rating\"]]],[\"dso-tree-view\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item\",[[1,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-card\",[[1,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-date-picker-legacy\",[[2,\"dso-date-picker-legacy\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"role\":[1],\"direction\":[1],\"required\":[4],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[1537],\"min\":[1],\"max\":[1],\"activeFocus\":[32],\"focusedDay\":[32],\"open\":[32],\"visible\":[32],\"setFocus\":[64],\"show\":[64],\"hide\":[64]},[[6,\"click\",\"handleDocumentClick\"]]]]],[\"dso-document-card\",[[1,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-helpcenter-panel\",[[1,\"dso-helpcenter-panel\",{\"label\":[1],\"url\":[1],\"visibility\":[32],\"isOpen\":[32],\"slideState\":[32],\"loadIframe\":[32]},[[8,\"keydown\",\"keyDownListener\"]],{\"url\":[\"watchUrl\"],\"isOpen\":[\"watchIsOpen\"]}]]],[\"dso-list-button\",[[1,\"dso-list-button\",{\"label\":[1],\"sublabel\":[1],\"count\":[2],\"min\":[8],\"max\":[8],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[1,\"subcontent-prefix\"]}]]],[\"dso-mark-bar\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-plekinfo-card\",[[1,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-accordion\",[[1,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list\",[[1,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-banner\",[[1,\"dso-banner\",{\"status\":[513],\"compact\":[4],\"noIcon\":[4,\"no-icon\"]}]]],[\"dso-card-container\",[[1,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information\",[[1,\"dso-contact-information\"]]],[\"dso-date-picker\",[[2,\"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\",[[1,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range\",[[1,\"dso-input-range\",{\"min\":[2],\"max\":[2],\"value\":[2],\"step\":[2],\"label\":[1],\"unit\":[1],\"description\":[1]}]]],[\"dso-logo\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-progress-bar\",[[1,\"dso-progress-bar\",{\"progress\":[2],\"min\":[2],\"max\":[2]}]]],[\"dso-tab\",[[1,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs\",[[1,\"dso-tabs\"]]],[\"dso-viewer-grid\",[[1,\"dso-viewer-grid\",{\"mode\":[513],\"filterpanelTitle\":[513,\"filterpanel-title\"],\"filterpanelOpen\":[516,\"filterpanel-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-info-button\",[[1,\"dso-info-button\",{\"active\":[1540],\"secondary\":[4],\"label\":[1],\"hover\":[32],\"setFocus\":[64]}]]],[\"dso-toggletip\",[[1,\"dso-toggletip\",{\"label\":[1],\"position\":[1],\"small\":[4],\"secondary\":[4],\"active\":[32]}]]],[\"dso-dropdown-menu\",[[1,\"dso-dropdown-menu\",{\"open\":[1540],\"dropdownAlign\":[1,\"dropdown-align\"],\"dropdownOptionsOffset\":[2,\"dropdown-options-offset\"],\"checkable\":[4],\"boundary\":[1],\"placement\":[1],\"strategy\":[1]},[[8,\"click\",\"onClick\"],[8,\"keydown\",\"keyDownListener\"]],{\"placement\":[\"watchPosition\"],\"dropdownAlign\":[\"watchPosition\"],\"dropdownOptionsOffset\":[\"watchOptionsOffset\"],\"strategy\":[\"watchStrategy\"]}]]],[\"dso-scrollable\",[[1,\"dso-scrollable\",{\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-tooltip\",[[1,\"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_6\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"addSpaceBeforeNode\":[516,\"add-space-before-node\"],\"mark\":[16],\"state\":[32]},null,{\"content\":[\"contentWatcher\"]}],[1,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[1,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[1,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[1,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[516,\"is-responsive\"],\"modalActive\":[32],\"placeholderHeight\":[32]}],[1,\"dso-badge\",{\"status\":[1]}]]],[\"dso-annotation-locatie_2\",[[1,\"dso-document-component\",{\"heading\":[1],\"label\":[1],\"nummer\":[1],\"opschrift\":[1],\"kop\":[1],\"inhoud\":[1],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"genesteOntwerpInformatie\":[516,\"geneste-ontwerp-informatie\"],\"bevatOntwerpInformatie\":[516,\"bevat-ontwerp-informatie\"],\"annotated\":[516],\"gereserveerd\":[4],\"vervallen\":[4],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[1,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2\",[[1,\"dso-attachments-counter\",{\"count\":[2]}],[1,\"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\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element\",[[1,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-info_2\",[[6,\"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],\"keyboardFocus\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[\"setIndeterminate\"]}],[1,\"dso-info\",{\"fixed\":[516],\"active\":[516]}]]],[\"dso-label_3\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[6,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}],[1,\"dso-label\",{\"compact\":[4],\"removable\":[516],\"status\":[1],\"truncate\":[4],\"removeHover\":[32],\"removeFocus\":[32],\"textHover\":[32],\"textFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[\"watchRemovable\"],\"truncate\":[\"watchTruncate\"]}]]]]"), options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -10,7 +10,7 @@ export declare class AccordionSection implements ComponentInterface {
|
|
|
10
10
|
/**
|
|
11
11
|
* The title of the handle
|
|
12
12
|
*/
|
|
13
|
-
handleTitle: RenvooiValue | undefined;
|
|
13
|
+
handleTitle: RenvooiValue | RenvooiValue[] | undefined;
|
|
14
14
|
/**
|
|
15
15
|
* An optional 'wijzigactie' that signals if the section is added or removed.
|
|
16
16
|
*/
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FunctionalComponent } from "../../stencil-public-runtime";
|
|
2
|
+
import { RenvooiRenderMarkFunction } from "./renvooi.interfaces";
|
|
3
|
+
interface RenvooiRenderTextProps {
|
|
4
|
+
text: string;
|
|
5
|
+
mark: RenvooiRenderMarkFunction | undefined;
|
|
6
|
+
onMarkItemHighlight: (text: string, ref: HTMLElement) => void | undefined;
|
|
7
|
+
}
|
|
8
|
+
export declare const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FunctionalComponent } from "../../stencil-public-runtime";
|
|
2
|
+
import { RenvooiRenderMarkFunction, RenvooiValue } from "./renvooi.interfaces";
|
|
3
|
+
interface RenvooiRenderProps {
|
|
4
|
+
value: RenvooiValue;
|
|
5
|
+
mark: RenvooiRenderMarkFunction | undefined;
|
|
6
|
+
onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void | undefined;
|
|
7
|
+
}
|
|
8
|
+
export declare const RenvooiRender: FunctionalComponent<RenvooiRenderProps>;
|
|
9
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComponentInterface } from "../../stencil-public-runtime";
|
|
2
|
-
import { RenvooiValue } from "./renvooi.interfaces";
|
|
1
|
+
import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
|
|
2
|
+
import { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from "./renvooi.interfaces";
|
|
3
3
|
/**
|
|
4
4
|
* Met dit component kan een `RenvooiValue` worden gepresenteerd.
|
|
5
5
|
*/
|
|
@@ -8,6 +8,15 @@ export declare class Renvooi implements ComponentInterface {
|
|
|
8
8
|
* The renvooi value to render.
|
|
9
9
|
*/
|
|
10
10
|
value?: RenvooiValue | RenvooiValue[];
|
|
11
|
+
/**
|
|
12
|
+
* To mark text.
|
|
13
|
+
*/
|
|
14
|
+
mark?: RenvooiMarkFunction;
|
|
15
|
+
/**
|
|
16
|
+
* Emitted when a marked item is highlighted.
|
|
17
|
+
*/
|
|
18
|
+
dsoRenvooiMarkItemHighlight: EventEmitter<RenvooiMarkItemHighlightEvent>;
|
|
11
19
|
get values(): RenvooiValue[];
|
|
20
|
+
private handleMarkItemHighlight;
|
|
12
21
|
render(): any;
|
|
13
22
|
}
|
|
@@ -6,3 +6,15 @@ export type RenvooiValue = {
|
|
|
6
6
|
} | {
|
|
7
7
|
verwijderd: string;
|
|
8
8
|
} | string;
|
|
9
|
+
export type RenvooiMarkFunction = (text: string, value: RenvooiValue, source: RenvooiValue[]) => RenvooiText[];
|
|
10
|
+
export type RenvooiRenderMarkFunction = (text: string) => RenvooiText[] | undefined;
|
|
11
|
+
type RenvooiText = RenvooiMarkItem | string;
|
|
12
|
+
interface RenvooiMarkItem {
|
|
13
|
+
text: string;
|
|
14
|
+
highlight?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export interface RenvooiMarkItemHighlightEvent {
|
|
17
|
+
text: string;
|
|
18
|
+
elementRef: HTMLElement;
|
|
19
|
+
}
|
|
20
|
+
export {};
|