npm - @dso-toolkit/core - Versions diffs - 103.0.0 → 104.0.0 - Mend

@dso-toolkit/core 103.0.0 → 104.0.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.

Files changed (274) hide show

package/dist/components/dso-survey-rating.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as r,createEvent as t,h as e,Fragment as n,transformTag as d}from"@stencil/core/internal/client";import{d as a}from"./icon.js";import{d as s}from"./icon-button.js";import{d as i}from"./panel.js";const c=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoSubmit=t(this,"dsoSubmit",7),this.dsoClose=t(this,"dsoClose",7)}handleForm(o){o.preventDefault(),this.dsoSubmit.emit({rating:this.rating,scale:{start:1,end:7},originalEvent:o})}handleChange(o){this.rating=Number(o.target.value)}render(){return e("dso-panel",{key:"46eda8236dacfd8efdeb19f73c199cf792d4de1c",emphasized:!0,onDsoCloseClick:o=>this.dsoClose.emit({originalEvent:o}),role:"dialog","aria-labelledby":"panel-heading"},e("h2",{key:"0f13609b9dfe138d9bc1bd297215123b5dec1100",id:"panel-heading",slot:"heading"},"Help ons met een onderzoek"),e("strong",{key:"e9d9ad67aac187c0cb05003431dfe88ce7cc27b7"},"Hoe moeilijk of makkelijk was deze taak om uit te voeren?"),e("form",{key:"67eacd9bfe4d9aa7f9de718c7d66eefc208d1cda",onSubmit:o=>this.handleForm(o)},e("div",{key:"4118bd73372ebe13c7a604f0e7b717154c93a7ab",class:"visual-rating-labels","aria-hidden":"true"},e("span",{key:"590fd6d4db6f497da801c29a24821f553ef98297"},"Heel moeilijk"),e("span",{key:"d3eb988572fba331828467298a5e72612af1442c"},"Heel makkelijk")),e("div",{key:"7aeb6102e3ce13a1dd67038475454b483e9006ca",role:"radiogroup"},["Heel moeilijk","Moeilijk","Redelijk moeilijk","Neutraal","Redelijk makkelijk","Makkelijk","Heel makkelijk"].map(((o,r)=>{const t=r+1;return e(n,null,e("label",{class:"survey-rating-"+t},t,e("span",{class:"sr-only"},o),e("input",{type:"radio",name:"rating",value:t,checked:t===this.rating,onChange:o=>this.handleChange(o)})))}))),e("button",{key:"9c0569f5875ac60b4f9d33a80ea264f4c40529c0",type:"submit",class:"dso-secondary"},e("span",{key:"32352ef5dd59e78ed1ee64c3c6e90d7822b34467"},"Antwoord verzenden"))))}static get style(){return":host { display: block; position: fixed; inset-block-end: 16px; inset-inline-start: 16px; inline-size: 370px; background-color: #fff; box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5); border-radius: 4px; z-index: 1000; } @media screen and (max-width: 480px) { :host { inline-size: 320px; inset-block-end: 0; inset-inline-start: 0; --panel-heading-padding-inline-start: 8px; --panel-body-padding-inline: 8px; } } , ::after, *::before { box-sizing: border-box; } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: rect(0 0 0 0); } .visual-rating-labels { display: flex; justify-content: space-between; margin-block: 8px; } input[type=radio] { appearance: none; cursor: pointer; position: absolute; margin-inline: 0; margin-block: 0; inset-block: 8px 0; inset-inline: 0; z-index: 1; } label { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border: 1px solid #ccc; border-inline-end-width: 0; padding-block-start: 8px; } @media screen and (max-width: 480px) { label { inline-size: 43px; block-size: 43px; } } label:hover { background-color: #f2f2f2; } label:active { background-color: #e5e5e5; } label:first-of-type { border-radius: 4px 0 0 4px; } label:first-of-type::before { border-radius: 3px 0 0; } label:last-of-type { border-inline-end-width: 1px; border-radius: 0 4px 4px 0; } label:last-of-type::before { border-radius: 0 3px 0 0; } label::before { content: \"\"; display: block; position: absolute; inset-block-start: 0; block-size: 8px; inline-size: 100%; border-block-end: 1px solid #ccc; } label:has(input:checked) { font-weight: bold; } label.survey-rating-1::before, label.survey-rating-1:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #b62f41; color: #fff; border-color: #ccc; } label.survey-rating-2::before, label.survey-rating-2:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #ce3f51; color: #fff; border-color: #ccc; } label.survey-rating-3::before, label.survey-rating-3:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-zwart); --_dso-link-extern-icon: var(--_dso-di-external-link-zwart); --_dso-link-phone-icon: var(--_dso-di-call-zwart); --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: #1f472c; --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: #275937; --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27; --_dso-icon-button-tertiary-color: #191919; --_dso-icon-button-tertiary-hover-color: #4c4c4c; --_dso-icon-button-tertiary-active-color: #1f472c; --_dso-icon-button-tertiary-toggled-color: #275937; --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27; --_dso-icon-button-tertiary-disabled-color: #999; --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart); --_dso-button-tertiary-color: #191919; --_dso-button-tertiary-hover-color: #4c4c4c; --_dso-button-tertiary-active-color: #173521; --_dso-button-tertiary-disabled-color: #999; background-color: #e17000; color: #191919; border-color: #ccc; } label.survey-rating-4::before, label.survey-rating-4:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-zwart); --_dso-link-extern-icon: var(--_dso-di-external-link-zwart); --_dso-link-phone-icon: var(--_dso-di-call-zwart); --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: #1f472c; --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: #275937; --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27; --_dso-icon-button-tertiary-color: #191919; --_dso-icon-button-tertiary-hover-color: #4c4c4c; --_dso-icon-button-tertiary-active-color: #1f472c; --_dso-icon-button-tertiary-toggled-color: #275937; --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27; --_dso-icon-button-tertiary-disabled-color: #999; --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart); --_dso-button-tertiary-color: #191919; --_dso-button-tertiary-hover-color: #4c4c4c; --_dso-button-tertiary-active-color: #173521; --_dso-button-tertiary-disabled-color: #999; background-color: #dcd400; color: #191919; border-color: #ccc; } label.survey-rating-5::before, label.survey-rating-5:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-zwart); --_dso-link-extern-icon: var(--_dso-di-external-link-zwart); --_dso-link-phone-icon: var(--_dso-di-call-zwart); --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: #1f472c; --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: #275937; --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27; --_dso-icon-button-tertiary-color: #191919; --_dso-icon-button-tertiary-hover-color: #4c4c4c; --_dso-icon-button-tertiary-active-color: #1f472c; --_dso-icon-button-tertiary-toggled-color: #275937; --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27; --_dso-icon-button-tertiary-disabled-color: #999; --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart); --_dso-button-tertiary-color: #191919; --_dso-button-tertiary-hover-color: #4c4c4c; --_dso-button-tertiary-active-color: #173521; --_dso-button-tertiary-disabled-color: #999; background-color: #79b929; color: #191919; border-color: #ccc; } label.survey-rating-6::before, label.survey-rating-6:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #39870c; color: #fff; border-color: #ccc; } label.survey-rating-7::before, label.survey-rating-7:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #275937; color: #fff; border-color: #ccc; } button { -webkit-appearance: button; color: inherit; cursor: pointer; font: inherit; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; overflow: visible; text-transform: none; } button[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } button.dso-secondary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } button.dso-secondary:focus, button.dso-secondary:focus-visible { outline-offset: 2px; } button.dso-secondary:active { outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after { content: \"\"; display: inline-block; } button.dso-secondary { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } button.dso-secondary:hover { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dso-button-float-secondary, none); } button.dso-secondary:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dso-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dso-button-float-secondary, none); } button.dso-secondary.dso-small { line-height: 1rem; } button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } button.dso-secondary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-extra-small { line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-extra-small { padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } button.dso-secondary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]):hover::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]):hover::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after { block-size: 16px; inline-size: 16px; } button { margin-block-start: 16px; }"}},[1,"dso-survey-rating"]),l=c,b=function(){"undefined"!=typeof customElements&&["dso-survey-rating","dso-icon","dso-icon-button","dso-panel"].forEach((o=>{switch(o){case"dso-survey-rating":customElements.get(d(o))\|\|customElements.define(d(o),c);break;case"dso-icon":customElements.get(d(o))\|\|a();break;case"dso-icon-button":customElements.get(d(o))\|\|s();break;case"dso-panel":customElements.get(d(o))\|\|i()}}))};export{l as DsoSurveyRating,b as defineCustomElement}
1	+ import{proxyCustomElement as o,HTMLElement as r,createEvent as t,h as e,Fragment as n,transformTag as d}from"@stencil/core/internal/client";import{d as a}from"./icon.js";import{d as s}from"./icon-button.js";import{d as i}from"./panel.js";const c=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoSubmit=t(this,"dsoSubmit",7),this.dsoClose=t(this,"dsoClose",7)}handleForm(o){o.preventDefault(),this.dsoSubmit.emit({rating:this.rating,scale:{start:1,end:7},originalEvent:o})}handleChange(o){this.rating=Number(o.target.value)}render(){return e("dso-panel",{key:"46eda8236dacfd8efdeb19f73c199cf792d4de1c",emphasized:!0,onDsoCloseClick:o=>this.dsoClose.emit({originalEvent:o}),role:"dialog","aria-labelledby":"panel-heading"},e("h2",{key:"0f13609b9dfe138d9bc1bd297215123b5dec1100",id:"panel-heading",slot:"heading"},"Help ons met een onderzoek"),e("strong",{key:"e9d9ad67aac187c0cb05003431dfe88ce7cc27b7"},"Hoe moeilijk of makkelijk was deze taak om uit te voeren?"),e("form",{key:"67eacd9bfe4d9aa7f9de718c7d66eefc208d1cda",onSubmit:o=>this.handleForm(o)},e("div",{key:"4118bd73372ebe13c7a604f0e7b717154c93a7ab",class:"visual-rating-labels","aria-hidden":"true"},e("span",{key:"590fd6d4db6f497da801c29a24821f553ef98297"},"Heel moeilijk"),e("span",{key:"d3eb988572fba331828467298a5e72612af1442c"},"Heel makkelijk")),e("div",{key:"7aeb6102e3ce13a1dd67038475454b483e9006ca",role:"radiogroup"},["Heel moeilijk","Moeilijk","Redelijk moeilijk","Neutraal","Redelijk makkelijk","Makkelijk","Heel makkelijk"].map(((o,r)=>{const t=r+1;return e(n,null,e("label",{class:"survey-rating-"+t},t,e("span",{class:"sr-only"},o),e("input",{type:"radio",name:"rating",value:t,checked:t===this.rating,onChange:o=>this.handleChange(o)})))}))),e("button",{key:"9c0569f5875ac60b4f9d33a80ea264f4c40529c0",type:"submit",class:"dso-secondary"},e("span",{key:"32352ef5dd59e78ed1ee64c3c6e90d7822b34467"},"Antwoord verzenden"))))}static get style(){return":host { display: block; position: fixed; inset-block-end: 16px; inset-inline-start: 16px; inline-size: 370px; background-color: #fff; box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5); border-radius: 4px; z-index: 1000; } @media screen and (max-width: 480px) { :host { inline-size: 320px; inset-block-end: 0; inset-inline-start: 0; --panel-heading-padding-inline-start: 8px; --panel-body-padding-inline: 8px; } } , ::after, *::before { box-sizing: border-box; } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: rect(0 0 0 0); } .visual-rating-labels { display: flex; justify-content: space-between; margin-block: 8px; } input[type=radio] { appearance: none; cursor: pointer; position: absolute; margin-inline: 0; margin-block: 0; inset-block: 8px 0; inset-inline: 0; z-index: 1; } label { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border: 1px solid #ccc; border-inline-end-width: 0; padding-block-start: 8px; } @media screen and (max-width: 480px) { label { inline-size: 43px; block-size: 43px; } } label:hover { background-color: #f2f2f2; } label:active { background-color: #e5e5e5; } label:first-of-type { border-radius: 4px 0 0 4px; } label:first-of-type::before { border-radius: 3px 0 0; } label:last-of-type { border-inline-end-width: 1px; border-radius: 0 4px 4px 0; } label:last-of-type::before { border-radius: 0 3px 0 0; } label::before { content: \"\"; display: block; position: absolute; inset-block-start: 0; block-size: 8px; inline-size: 100%; border-block-end: 1px solid #ccc; } label:has(input:checked) { font-weight: bold; } label.survey-rating-1::before, label.survey-rating-1:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #b62f41; color: #fff; border-color: #ccc; } label.survey-rating-2::before, label.survey-rating-2:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #ce3f51; color: #fff; border-color: #ccc; } label.survey-rating-3::before, label.survey-rating-3:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-zwart); --_dso-link-extern-icon: var(--_dso-di-external-link-zwart); --_dso-link-phone-icon: var(--_dso-di-call-zwart); --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: #1f472c; --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: #275937; --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27; --_dso-icon-button-tertiary-color: #191919; --_dso-icon-button-tertiary-hover-color: #4c4c4c; --_dso-icon-button-tertiary-active-color: #173521; --_dso-icon-button-tertiary-toggled-color: #275937; --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27; --_dso-icon-button-tertiary-disabled-color: #999; --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart); --_dso-button-tertiary-color: #191919; --_dso-button-tertiary-hover-color: #4c4c4c; --_dso-button-tertiary-active-color: #173521; --_dso-button-tertiary-disabled-color: #999; background-color: #e17000; color: #191919; border-color: #ccc; } label.survey-rating-4::before, label.survey-rating-4:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-zwart); --_dso-link-extern-icon: var(--_dso-di-external-link-zwart); --_dso-link-phone-icon: var(--_dso-di-call-zwart); --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: #1f472c; --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: #275937; --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27; --_dso-icon-button-tertiary-color: #191919; --_dso-icon-button-tertiary-hover-color: #4c4c4c; --_dso-icon-button-tertiary-active-color: #173521; --_dso-icon-button-tertiary-toggled-color: #275937; --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27; --_dso-icon-button-tertiary-disabled-color: #999; --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart); --_dso-button-tertiary-color: #191919; --_dso-button-tertiary-hover-color: #4c4c4c; --_dso-button-tertiary-active-color: #173521; --_dso-button-tertiary-disabled-color: #999; background-color: #dcd400; color: #191919; border-color: #ccc; } label.survey-rating-5::before, label.survey-rating-5:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-zwart); --_dso-link-extern-icon: var(--_dso-di-external-link-zwart); --_dso-link-phone-icon: var(--_dso-di-call-zwart); --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: #1f472c; --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: #275937; --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27; --_dso-icon-button-tertiary-color: #191919; --_dso-icon-button-tertiary-hover-color: #4c4c4c; --_dso-icon-button-tertiary-active-color: #173521; --_dso-icon-button-tertiary-toggled-color: #275937; --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27; --_dso-icon-button-tertiary-disabled-color: #999; --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart); --_dso-button-tertiary-color: #191919; --_dso-button-tertiary-hover-color: #4c4c4c; --_dso-button-tertiary-active-color: #173521; --_dso-button-tertiary-disabled-color: #999; background-color: #79b929; color: #191919; border-color: #ccc; } label.survey-rating-6::before, label.survey-rating-6:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #39870c; color: #fff; border-color: #ccc; } label.survey-rating-7::before, label.survey-rating-7:has(input:checked) { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #275937; color: #fff; border-color: #ccc; } button { -webkit-appearance: button; color: inherit; cursor: pointer; font: inherit; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; overflow: visible; text-transform: none; } button[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } button.dso-secondary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } button.dso-secondary:focus, button.dso-secondary:focus-visible { outline-offset: 2px; } button.dso-secondary:active { outline: 0; } button.dso-secondary.extern::after, button.dso-secondary.download::after { content: \"\"; display: inline-block; } button.dso-secondary { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } button.dso-secondary:hover, button.dso-secondary:focus-visible { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dso-button-float-secondary, none); } button.dso-secondary:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dso-button-float-secondary, none); } button.dso-secondary[disabled], button.dso-secondary[disabled]:hover, button.dso-secondary[disabled]:focus-visible { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dso-button-float-secondary, none); } button.dso-secondary.dso-small { line-height: 1rem; } button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } button.dso-secondary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-extra-small { line-height: 1rem; } button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } button.dso-secondary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-extra-small { padding-block: 9px; } button.dso-secondary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } button.dso-secondary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } button.dso-secondary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } button.dso-secondary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]):hover::before, button.dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before { block-size: 16px; inline-size: 16px; } button.dso-secondary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]):hover::after, button.dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after { block-size: 16px; inline-size: 16px; } button { margin-block-start: 16px; }"}},[1,"dso-survey-rating"]),l=c,b=function(){"undefined"!=typeof customElements&&["dso-survey-rating","dso-icon","dso-icon-button","dso-panel"].forEach((o=>{switch(o){case"dso-survey-rating":customElements.get(d(o))\|\|customElements.define(d(o),c);break;case"dso-icon":customElements.get(d(o))\|\|a();break;case"dso-icon-button":customElements.get(d(o))\|\|s();break;case"dso-panel":customElements.get(d(o))\|\|i()}}))};export{l as DsoSurveyRating,b as defineCustomElement}

package/dist/components/dso-viewer-grid.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{h as e,Fragment as n,proxyCustomElement as i,HTMLElement as t,createEvent as o,transformTag as a}from"@stencil/core/internal/client";import{c as s}from"./clsx.js";import{d as l}from"./index3.js";const r=["search","map","document"],d={map:"Kaart",document:"Document",search:"Zoeken"},c={small:"smal",medium:"middel",large:"breed"},p=({className:n,onClick:i,label:t,icon:o})=>e("dso-icon-button",{variant:"map",class:n,onDsoClick:i,icon:o,label:t}),m=({shrink:n,expand:i,size:t,panelLabel:o,placement:a})=>{const s=[];return"small"!==t&&s.push(e(p,{onClick:n,label:o+" smaller maken",icon:"right"===a?"chevron-right":"chevron-left",className:"shrink"})),"large"!==t&&s.push(e(p,{onClick:i,label:o+" breder maken",icon:"right"===a?"chevron-left":"chevron-right",className:"expand"})),e("div",{class:"sizing-buttons"},e("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",c[t]),s)},b=({tabView:n,panelSize:i,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>e("div",{class:"dso-document-panel",onTransitionEnd:e=>{"flex-basis"===e.propertyName&&a.emit({currentSize:i})}},!n&&e(m,{panelLabel:"Documentpaneel",size:i,expand:o,shrink:t,placement:"right"}),e("div",{class:"content"},e("slot",{name:"document-panel"}))),h=({open:i,title:t,ref:o,dsoCloseFilterPanel:a})=>{const s=t\|\|"Filterpaneel";return e("dialog",{class:"filter-panel",ref:o,inert:!i,"aria-label":s},i&&e(n,null,e("h3",{class:{"sr-only":!t}},s),e("dso-icon-button",{class:"dso-close",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:a}),e("slot",{name:"filter-panel"})))},v=({tabView:n,mainSize:i,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:a,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r,printFilterPanel:d})=>e("div",{class:s("dso-main-panel",{compact:!n&&t&&!o,contracted:!n&&!t&&!o,expanded:!n&&t&&o,collapsed:a}),onTransitionEnd:e=>{"flex-basis"===e.propertyName&&r.emit({currentSize:i})}},!n&&t&&e("div",{class:"toggle-button"},e("dso-icon-button",{variant:"map",label:"Zoeken paneel "+(a?"tonen":"verbergen"),icon:a?"chevron-right":"chevron-left",onDsoClick:l})),e("div",{class:s("content",{invisible:a})},d,e("slot",{name:"main"}))),u=({ref:n,dsoCloseOverlay:i})=>e("dialog",{class:"overlay",ref:n,onCancel:e=>{e.preventDefault(),i(e)}},e("dso-icon-button",{class:"overlay-close-button",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:i}),e("slot",{name:"overlay"})),x=new ResizeObserver(l((([e])=>{const n=e?.target.getRootNode();n instanceof ShadowRoot&&function(e){return"DSO-VIEWER-GRID"===e.tagName}(n.host)&&n.host._checkMainPanelVisibility()}),50)),f=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7),this.dsoCloseFilterPanel=o(this,"dsoCloseFilterPanel",7),this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7),this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7),this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7),this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7),this.dsoMainPanelToggle=o(this,"dsoMainPanelToggle",7),this.mediaCondition="(min-width: 1032px)",this.filterPanelOpen=!1,this.overlayOpen=!1,this.documentPanelOpen=!1,this.print=!1,this.mainSize="large",this.documentPanelSize="large",this.mainPanelExpanded=!1,this.mainPanelHidden=!1,this.tabView=window.innerWidth<1032,this.switchActiveTab=e=>{this.dsoActiveTabSwitch.emit({tab:e})},this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"large"===this.documentPanelSize?"medium":"small"})},this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"small"===this.documentPanelSize?"medium":"large"})},this.toggleMainPanel=()=>{this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=520&&(this.mainSize="small"),this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})},this.changeListener=e=>this.tabView=!e.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(e){e&&this._checkMainPanelVisibility()}filterPanelOpenWatcher(e){this.filterPanelSlot\|\|console.warn("slot 'filter-panel' has not been set"),e?this.filterPanel?.show():this.filterPanel?.close()}overlayOpenWatcher(e){this.overlaySlot\|\|console.warn("slot 'overlay' has not been set"),e?this.overlay?.showModal():this.overlay?.close()}async _checkMainPanelVisibility(){this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=520&&!this.mainPanelExpanded\|\|this.mapElement.clientWidth<=80&&this.mainPanelExpanded)&&this.dsoMainPanelToggle.emit({hide:!0})}renderFilterPanel(){return e(h,{open:this.filterPanelOpen,title:this.filterPanelTitle,ref:e=>this.filterPanel=e,dsoCloseFilterPanel:e=>this.dsoCloseFilterPanel.emit({originalEvent:e})})}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){this.filterPanelOpen&&this.filterPanelSlot&&this.filterPanel?.show(),this.overlayOpen&&this.overlaySlot&&this.overlay?.showModal(),this.mapElement instanceof HTMLDivElement&&x.observe(this.mapElement)}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener),this.mapElement&&x.unobserve(this.mapElement)}render(){const i=r.filter((e=>"document"!==e\|\|this.documentPanelOpen));return e(n,{key:"96c242cdde1a4bb41752f3d98ead62aad3790977"},e("slot",{key:"95d49eebce481289dac6206f5b2249b4b6a37b17",name:"top-bar"}),e("div",{key:"630d2b18a05801b840210cd0965cab0ddfd2e42b",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"83f8a63abaddbf10e5ff6a28f9e53296c213c54c",class:"dso-navbar"},e("ul",{key:"0323c650722fb070efff99cb9c2007acc8707e4d",class:"dso-nav dso-nav-sub"},i.map((n=>e("li",{key:n,class:s({"dso-active":this.activeTab===n})},e("button",{type:"button",class:"dso-tertiary","aria-current":this.activeTab===n?"page":void 0,onClick:()=>this.switchActiveTab(n)},d[n])))))),(!this.tabView\|\|this.tabView&&"search"===this.activeTab\|\|this.print)&&e(v,{key:"8e210d40820dff9f7eb641540fba03a0bb217125",tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:!this.tabView&&this.mainPanelHidden,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd,printFilterPanel:!this.tabView&&this.filterPanelOpen&&this.print?this.renderFilterPanel():void 0}),(!this.tabView\|\|this.tabView&&"search"===this.activeTab)&&!this.print&&this.renderFilterPanel(),(!this.tabView\|\|this.tabView&&"map"===this.activeTab\|\|this.print)&&e("div",{key:"02fd34a6f02f091f1469b06523ba30bb305995c6",class:"map-area"},e("div",{key:"74127720fa459c20a276f3e9ff5601ead4272701",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"036b54fe0281d61bb87722ac928ed6070a29bd5d",name:"map"})),e("slot",{key:"9ed121e18508ecdb77b5cd00c37742b631e9b4c9",name:"legend"})),(!this.tabView&&this.documentPanelOpen\|\|this.tabView&&"document"===this.activeTab&&this.documentPanelOpen\|\|this.print)&&e(b,{key:"1bfef6321df9365a25e1d1dab9126cadea8df837",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(u,{key:"ce8e51f24a2c6a7a20de9648b1555d8edb8362d4",ref:e=>this.overlay=e,dsoCloseOverlay:e=>this.dsoCloseOverlay.emit({originalEvent:e})})))}get host(){return this}static get watchers(){return{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}}static get style(){return", ::after, *::before { box-sizing: border-box; } :host .overlay { block-size: calc(100% - 32px); margin-block: 16px; margin-inline: auto 16px; } :host .dso-main-panel { transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; } :host(:not([print])) { display: flex; flex-direction: column; block-size: 100dvh; overflow: clip; position: relative; } :host(:not([print])) .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; min-block-size: 0; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel { min-block-size: 0; } :host(:not([print])) .dso-main-panel .content, :host(:not([print])) .dso-document-panel .content { overflow-y: auto; } button { -webkit-appearance: button; color: inherit; cursor: pointer; font: inherit; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; overflow: visible; text-transform: none; } button[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: rect(0 0 0 0); } .overlay-close-button { position: absolute; line-height: 1; inset-block-start: 8px; inset-inline-end: 16px; } .content.invisible { visibility: hidden; } .viewer-grid-columns { position: relative; } .dso-main-panel .content, .dso-document-panel .content { block-size: 100%; padding-block: 0; padding-inline: 16px; } .dso-main-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed { inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted { flex-shrink: unset; flex-grow: unset; position: absolute; transition: none; } .dso-main-panel.expanded.collapsed { position: absolute; block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button { inset-inline-start: calc(100% + 1px); transition: inset-inline-start 200ms ease-in; padding-block: 0 8px; padding-inline: 0 4px; } .dso-main-panel .toggle-button { --_dso-icon-button-border-start-start-radius: 0; --_dso-icon-button-border-end-start-radius: 0; } .dso-document-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-document-panel .sizing-buttons { inset-block-start: auto; inset-block-end: 16px; inset-inline-end: calc(100% + 1px); transition: inset-inline-end 200ms ease-in; padding-block: 0 8px; padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand { --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px; --_dso-icon-button-border-start-end-radius: 0; --_dso-icon-button-border-end-end-radius: 0; } .sizing-buttons, .toggle-button { overflow-x: hidden; position: absolute; inset-block-start: 16px; inline-size: 44px; z-index: -1; } .map-area { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .map { position: absolute; inset: 0; overflow: hidden; } slot[name=legend] { display: block; position: absolute; inset-block-end: 16px; inset-inline-start: 16px; z-index: 1; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 1032px) { :host(:not([print])[main-size=small]) .dso-main-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } :host(:not([print])[main-size=medium]) .dso-main-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } :host(:not([print])[main-size=large]) .dso-main-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } :host(:not([print])[document-panel-size=small]) .dso-document-panel { flex-basis: 25%; min-inline-size: 375px; max-inline-size: 623px; } :host(:not([print])[document-panel-size=medium]) .dso-document-panel { flex-basis: 40%; min-inline-size: 624px; max-inline-size: 1024px; } :host(:not([print])[document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1200px; } :host(:not([print])) .dso-main-panel.compact, :host(:not([print])) .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } :host(:not([print])) .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } :host(:not([print])) .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } :host(:not([print])) .overlay { box-shadow: -2px 0 5px #666; } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) { :host(:not([print])[filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } :host(:not([print])) .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 1031.99px) { .dso-navbar { min-block-size: 32px; } .dso-navbar .dso-navbar-header { float: inline-start; } .dso-navbar .dso-navbar-toggle { border-radius: 4px; min-inline-size: auto; padding-block: 5px; padding-inline: 0; } .dso-navbar .dso-navbar-toggle dso-icon { margin-inline-start: 8px; margin-inline-end: 8px; } } @media screen and (max-width: 1031.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 1031.99px) { .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child { margin-inline-end: 8rem; } .dso-nav { list-style: none; margin-block-end: 0; padding-inline-start: 0; } .dso-nav > li > button { border: 0; background-color: transparent; } .dso-nav > li > a, .dso-nav > li > button { display: block; } .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited, .dso-nav > li > button, .dso-nav > li > button:hover, .dso-nav > li > button:focus, .dso-nav > li > button:visited { color: #275937; } .dso-nav > li.dso-active > a, .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a, .dso-nav > li.is-active > button { border-block-end: 4px solid #8b4a6a; font-weight: bold; } .dso-nav.dso-nav-main > li { display: inline-block; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { text-decoration: none; } .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active, .dso-nav.dso-nav-main > li > button:hover, .dso-nav.dso-nav-main > li > button:focus-visible, .dso-nav.dso-nav-main > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { font-size: 1.25em; line-height: 1; margin-block-start: 8px; padding-block: 8px 7px; padding-inline: 16px; } .dso-nav.dso-nav-sub > li { display: inline-block; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { text-decoration: none; } .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active, .dso-nav.dso-nav-sub > li > button:hover, .dso-nav.dso-nav-sub > li > button:focus-visible, .dso-nav.dso-nav-sub > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { font-size: 1rem; margin-block-start: 4px; padding-block: 4px 3px; padding-inline: 8px; } .dso-navbar { padding-inline: 16px; } .dso-nav { border-block-end: 1px solid #ccc; display: flex; gap: 16px; margin-block-start: 0; inline-size: calc(100vw - 32px); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dso-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dso-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 4px; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } :host(:not([print])) .viewer-grid-columns { flex-direction: column; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel, :host(:not([print])) .map-area { flex: 1; inline-size: 100%; max-inline-size: none; min-inline-size: 0; } :host(:not([print])) .map { position: relative; inset: auto; } :host(:not([print])) .overlay { inline-size: calc(100vw - 32px); } :host(:not([print])) .filter-panel, :host(:not([print])) .overlay { max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { margin-inline: 0; inset-inline-start: -100vw; inline-size: 100vw; } :host(:not([print])) .filter-panel[open] { inset-inline-start: 0; } } @media screen and (min-width: 992px) { :host(:not([print])[filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { display: flex; flex-direction: column; block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { display: flex; flex-direction: column; overflow: visible; } :host([print]) .map-area { display: flex; flex-direction: row; align-items: flex-start; overflow: visible; flex-shrink: 0; order: -1; } :host([print]) .map { flex: 1; min-inline-size: 0; align-self: stretch; block-size: 400px; position: relative; inset: auto; } :host([print]) slot[name=legend] { position: relative; inset: auto; flex-shrink: 0; --_dso-legend-content-max-block-size: none; } :host([print]) .dso-main-panel { block-size: auto; box-shadow: none; inline-size: 100%; max-inline-size: none; min-inline-size: 0; position: relative; margin-inline-start: 0; } :host([print]) .dso-main-panel .content { align-items: flex-start; block-size: auto; display: flex; flex-direction: row; gap: 32px; overflow-y: visible; } :host([print]) .dso-main-panel .content slot[name=main] { display: block; flex: 1; min-inline-size: 0; } :host([print]) .filter-panel { block-size: auto; box-shadow: none; flex-shrink: 0; inline-size: 380px; margin-inline: 0; max-inline-size: none; min-inline-size: 0; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100%; max-inline-size: none; min-inline-size: 0; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; } :host([print]) .sizing-buttons, :host([print]) .toggle-button { display: none; }"}},[257,"dso-viewer-grid",{filterPanelTitle:[513,"filter-panel-title"],filterPanelOpen:[516,"filter-panel-open"],overlayOpen:[516,"overlay-open"],documentPanelOpen:[516,"document-panel-open"],print:[516],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]},void 0,{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}]),g=f,k=function(){"undefined"!=typeof customElements&&["dso-viewer-grid"].forEach((e=>{"dso-viewer-grid"===e&&(customElements.get(a(e))\|\|customElements.define(a(e),f))}))};export{g as DsoViewerGrid,k as defineCustomElement}
1	+ import{h as e,Fragment as n,proxyCustomElement as i,HTMLElement as t,createEvent as o,transformTag as a}from"@stencil/core/internal/client";import{c as s}from"./clsx.js";import{d as l}from"./index3.js";const r=["search","map","document"],d={map:"Kaart",document:"Document",search:"Zoeken"},c={small:"smal",medium:"middel",large:"breed"},p=({className:n,onClick:i,label:t,icon:o})=>e("dso-icon-button",{variant:"map",class:n,onDsoClick:i,icon:o,label:t}),b=({shrink:n,expand:i,size:t,panelLabel:o,placement:a})=>{const s=[];return"small"!==t&&s.push(e(p,{onClick:n,label:o+" smaller maken",icon:"right"===a?"chevron-right":"chevron-left",className:"shrink"})),"large"!==t&&s.push(e(p,{onClick:i,label:o+" breder maken",icon:"right"===a?"chevron-left":"chevron-right",className:"expand"})),e("div",{class:"sizing-buttons"},e("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",c[t]),s)},m=({tabView:n,panelSize:i,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>e("div",{class:"dso-document-panel",onTransitionEnd:e=>{"flex-basis"===e.propertyName&&a.emit({currentSize:i})}},!n&&e(b,{panelLabel:"Documentpaneel",size:i,expand:o,shrink:t,placement:"right"}),e("div",{class:"content"},e("slot",{name:"document-panel"}))),h=({open:i,title:t,ref:o,dsoCloseFilterPanel:a})=>{const s=t\|\|"Filterpaneel";return e("dialog",{class:"filter-panel",ref:o,inert:!i,"aria-label":s},i&&e(n,null,e("h3",{class:{"sr-only":!t}},s),e("dso-icon-button",{class:"dso-close",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:a}),e("slot",{name:"filter-panel"})))},v=({tabView:n,mainSize:i,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:a,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r,printFilterPanel:d})=>e("div",{class:s("dso-main-panel",{compact:!n&&t&&!o,contracted:!n&&!t&&!o,expanded:!n&&t&&o,collapsed:a}),onTransitionEnd:e=>{"flex-basis"===e.propertyName&&r.emit({currentSize:i})}},!n&&t&&e("div",{class:"toggle-button"},e("dso-icon-button",{variant:"map",label:"Zoeken paneel "+(a?"tonen":"verbergen"),icon:a?"chevron-right":"chevron-left",onDsoClick:l})),e("div",{class:s("content",{invisible:a})},d,e("slot",{name:"main"}))),u=({ref:n,dsoCloseOverlay:i})=>e("dialog",{class:"overlay",ref:n,onCancel:e=>{e.preventDefault(),i(e)}},e("dso-icon-button",{class:"overlay-close-button",icon:"cross",variant:"tertiary",label:"Sluiten",onDsoClick:i}),e("slot",{name:"overlay"})),x=new ResizeObserver(l((([e])=>{const n=e?.target.getRootNode();n instanceof ShadowRoot&&function(e){return"DSO-VIEWER-GRID"===e.tagName}(n.host)&&n.host._checkMainPanelVisibility()}),50)),f=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoCloseOverlay=o(this,"dsoCloseOverlay",7),this.dsoCloseFilterPanel=o(this,"dsoCloseFilterPanel",7),this.dsoActiveTabSwitch=o(this,"dsoActiveTabSwitch",7),this.dsoMainSizeChangeAnimationEnd=o(this,"dsoMainSizeChangeAnimationEnd",7),this.dsoDocumentPanelSizeChange=o(this,"dsoDocumentPanelSizeChange",7),this.dsoDocumentPanelSizeChangeAnimationEnd=o(this,"dsoDocumentPanelSizeChangeAnimationEnd",7),this.dsoMainPanelToggle=o(this,"dsoMainPanelToggle",7),this.mediaCondition="(min-width: 1032px)",this.filterPanelOpen=!1,this.overlayOpen=!1,this.documentPanelOpen=!1,this.print=!1,this.mainSize="large",this.documentPanelSize="large",this.mainPanelExpanded=!1,this.mainPanelHidden=!1,this.tabView=window.innerWidth<1032,this.switchActiveTab=e=>{this.dsoActiveTabSwitch.emit({tab:e})},this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"large"===this.documentPanelSize?"medium":"small"})},this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:"small"===this.documentPanelSize?"medium":"large"})},this.toggleMainPanel=()=>{this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=520&&(this.mainSize="small"),this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})},this.changeListener=e=>this.tabView=!e.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(e){e&&this._checkMainPanelVisibility()}filterPanelOpenWatcher(e){this.filterPanelSlot\|\|console.warn("slot 'filter-panel' has not been set"),e?this.filterPanel?.show():this.filterPanel?.close()}overlayOpenWatcher(e){this.overlaySlot\|\|console.warn("slot 'overlay' has not been set"),e?this.overlay?.showModal():this.overlay?.close()}async _checkMainPanelVisibility(){this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=520&&!this.mainPanelExpanded\|\|this.mapElement.clientWidth<=80&&this.mainPanelExpanded)&&this.dsoMainPanelToggle.emit({hide:!0})}renderFilterPanel(){return e(h,{open:this.filterPanelOpen,title:this.filterPanelTitle,ref:e=>this.filterPanel=e,dsoCloseFilterPanel:e=>this.dsoCloseFilterPanel.emit({originalEvent:e})})}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){this.filterPanelOpen&&this.filterPanelSlot&&this.filterPanel?.show(),this.overlayOpen&&this.overlaySlot&&this.overlay?.showModal(),this.mapElement instanceof HTMLDivElement&&x.observe(this.mapElement)}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener),this.mapElement&&x.unobserve(this.mapElement)}render(){const i=r.filter((e=>"document"!==e\|\|this.documentPanelOpen));return e(n,{key:"96c242cdde1a4bb41752f3d98ead62aad3790977"},e("slot",{key:"95d49eebce481289dac6206f5b2249b4b6a37b17",name:"top-bar"}),e("div",{key:"630d2b18a05801b840210cd0965cab0ddfd2e42b",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"83f8a63abaddbf10e5ff6a28f9e53296c213c54c",class:"dso-navbar"},e("ul",{key:"0323c650722fb070efff99cb9c2007acc8707e4d",class:"dso-nav dso-nav-sub"},i.map((n=>e("li",{key:n,class:s({"dso-active":this.activeTab===n})},e("button",{type:"button",class:"dso-tertiary","aria-current":this.activeTab===n?"page":void 0,onClick:()=>this.switchActiveTab(n)},d[n])))))),(!this.tabView\|\|this.tabView&&"search"===this.activeTab\|\|this.print)&&e(v,{key:"8e210d40820dff9f7eb641540fba03a0bb217125",tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:!this.tabView&&this.mainPanelHidden,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd,printFilterPanel:!this.tabView&&this.filterPanelOpen&&this.print?this.renderFilterPanel():void 0}),(!this.tabView\|\|this.tabView&&"search"===this.activeTab)&&!this.print&&this.renderFilterPanel(),(!this.tabView\|\|this.tabView&&"map"===this.activeTab\|\|this.print)&&e("div",{key:"02fd34a6f02f091f1469b06523ba30bb305995c6",class:"map-area"},e("div",{key:"74127720fa459c20a276f3e9ff5601ead4272701",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"036b54fe0281d61bb87722ac928ed6070a29bd5d",name:"map"})),e("slot",{key:"9ed121e18508ecdb77b5cd00c37742b631e9b4c9",name:"legend"})),(!this.tabView&&this.documentPanelOpen\|\|this.tabView&&"document"===this.activeTab&&this.documentPanelOpen\|\|this.print)&&e(m,{key:"1bfef6321df9365a25e1d1dab9126cadea8df837",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(u,{key:"ce8e51f24a2c6a7a20de9648b1555d8edb8362d4",ref:e=>this.overlay=e,dsoCloseOverlay:e=>this.dsoCloseOverlay.emit({originalEvent:e})})))}get host(){return this}static get watchers(){return{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}}static get style(){return", ::after, *::before { box-sizing: border-box; } :host .overlay { block-size: calc(100% - 32px); margin-block: 16px; margin-inline: auto 16px; } :host .dso-main-panel { transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in; } :host(:not([print])) { display: flex; flex-direction: column; block-size: 100dvh; overflow: clip; position: relative; } :host(:not([print])) .viewer-grid-columns { display: flex; overflow: hidden; flex-grow: 1; min-block-size: 0; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel { min-block-size: 0; } :host(:not([print])) .dso-main-panel .content, :host(:not([print])) .dso-document-panel .content { overflow-y: auto; } button { -webkit-appearance: button; color: inherit; cursor: pointer; font: inherit; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; overflow: visible; text-transform: none; } button[disabled] { cursor: default; } button::-moz-focus-inner { border: 0; padding: 0; } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: rect(0 0 0 0); } .overlay-close-button { position: absolute; line-height: 1; inset-block-start: 8px; inset-inline-end: 16px; } .content.invisible { visibility: hidden; } .viewer-grid-columns { position: relative; } .dso-main-panel .content, .dso-document-panel .content { block-size: 100%; padding-block: 0; padding-inline: 16px; } .dso-main-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed { inset-inline-start: -432px; } .dso-main-panel.compact, .dso-main-panel.contracted { flex-shrink: unset; flex-grow: unset; position: absolute; transition: none; } .dso-main-panel.expanded.collapsed { position: absolute; block-size: 100%; } .dso-main-panel .sizing-buttons, .dso-main-panel .toggle-button { inset-inline-start: calc(100% + 1px); transition: inset-inline-start 200ms ease-in; padding-block: 0 8px; padding-inline: 0 4px; } .dso-main-panel .toggle-button { --_dso-icon-button-border-start-start-radius: 0; --_dso-icon-button-border-end-start-radius: 0; } .dso-document-panel { background-color: #fff; flex-shrink: 0; flex-grow: 0; position: relative; transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in; z-index: 100; } .dso-document-panel .sizing-buttons { inset-block-start: auto; inset-block-end: 16px; inset-inline-end: calc(100% + 1px); transition: inset-inline-end 200ms ease-in; padding-block: 0 8px; padding-inline: 4px 0; } .dso-document-panel .sizing-buttons .shrink, .dso-document-panel .sizing-buttons .expand { --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px; --_dso-icon-button-border-start-end-radius: 0; --_dso-icon-button-border-end-end-radius: 0; } .sizing-buttons, .toggle-button { overflow-x: hidden; position: absolute; inset-block-start: 16px; inline-size: 44px; z-index: -1; } .map-area { block-size: 100%; inline-size: 100%; overflow: hidden; position: relative; } .map { position: absolute; inset: 0; overflow: hidden; } slot[name=legend] { display: block; position: absolute; inset-block-end: 16px; inset-inline-start: 16px; z-index: 1; } .filter-panel, .overlay { background-color: #fff; border: 0; block-size: 100%; margin-block: 0; max-block-size: 100vh; overflow-y: auto; z-index: 101; } .filter-panel { display: block; position: absolute; padding-block: 8px; padding-inline: 16px; inset-block-start: 0; block-size: 100%; inset-inline-start: -380px; inline-size: 100%; transition: inset-inline-start 200ms ease-in; } @media screen and (max-width: 768px) { .filter-panel { inline-size: 100vw; } .filter-panel::before { display: none !important; } } @media screen and (min-width: 992px) { .filter-panel { max-inline-size: 380px; } } .filter-panel[open] { inset-inline-start: 0; box-shadow: none; border-inline-end: 1px solid #e5e5e5; } .filter-panel h3 { color: #275937; } .filter-panel .dso-close { --_dso-icon-button-tertiary-color: #191919; position: absolute; inset-block-start: 20px; inset-inline-end: 20px; } .overlay { padding-block: 40px 8px; padding-inline: 16px; inset-inline-end: 0; inline-size: 624px; } .overlay::backdrop { background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 624px) { .overlay { inline-size: 100vw; } } @media screen and (min-width: 1032px) { :host(:not([print])[main-size=small]) .dso-main-panel { flex-basis: 375px; min-inline-size: 0; max-inline-size: 375px; } :host(:not([print])[main-size=medium]) .dso-main-panel { flex-basis: 624px; min-inline-size: 375px; max-inline-size: 624px; } :host(:not([print])[main-size=large]) .dso-main-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1024px; } :host(:not([print])[document-panel-size=small]) .dso-document-panel { flex-basis: 25%; min-inline-size: 375px; max-inline-size: 623px; } :host(:not([print])[document-panel-size=medium]) .dso-document-panel { flex-basis: 40%; min-inline-size: 624px; max-inline-size: 1024px; } :host(:not([print])[document-panel-size=large]) .dso-document-panel { flex-basis: 60%; min-inline-size: 768px; max-inline-size: 1200px; } :host(:not([print])) .dso-main-panel.compact, :host(:not([print])) .dso-main-panel.expanded { flex-basis: unset; min-inline-size: unset; max-inline-size: unset; inline-size: 440px; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel { box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4); } :host(:not([print])) .filter-panel { margin-inline: 0 auto; inline-size: calc(100vw - 40px); } :host(:not([print])) .filter-panel[open] { border-inline-end: 1px solid #e5e5e5; } :host(:not([print])) .overlay { box-shadow: -2px 0 5px #666; } } @media screen and (min-width: 1032px) and (max-width: 1031.99px) { :host(:not([print])[filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; max-inline-size: calc(100vw - 380px); } :host(:not([print])) .filter-panel { inline-size: 380px; inset-inline-start: -380px; } } @media screen and (max-width: 1031.99px) { .dso-navbar { min-block-size: 32px; } .dso-navbar .dso-navbar-header { float: inline-start; } .dso-navbar .dso-navbar-toggle { border-radius: 4px; min-inline-size: auto; padding-block: 5px; padding-inline: 0; } .dso-navbar .dso-navbar-toggle dso-icon { margin-inline-start: 8px; margin-inline-end: 8px; } } @media screen and (max-width: 1031.99px) and (min-width: 992px) { .dso-navbar .dso-navbar-toggle { display: none; } } @media screen and (max-width: 1031.99px) { .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child { margin-inline-end: 8rem; } .dso-nav { list-style: none; margin-block-end: 0; padding-inline-start: 0; } .dso-nav > li > button { border: 0; background-color: transparent; } .dso-nav > li > a, .dso-nav > li > button { display: block; } .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited, .dso-nav > li > button, .dso-nav > li > button:hover, .dso-nav > li > button:focus, .dso-nav > li > button:visited { color: #275937; } .dso-nav > li.dso-active > a, .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a, .dso-nav > li.is-active > button { border-block-end: 4px solid #8b4a6a; font-weight: bold; } .dso-nav.dso-nav-main > li { display: inline-block; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { text-decoration: none; } .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active, .dso-nav.dso-nav-main > li > button:hover, .dso-nav.dso-nav-main > li > button:focus-visible, .dso-nav.dso-nav-main > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-main > li > a, .dso-nav.dso-nav-main > li > button { font-size: 1.25em; line-height: 1; margin-block-start: 8px; padding-block: 8px 7px; padding-inline: 16px; } .dso-nav.dso-nav-sub > li { display: inline-block; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { text-decoration: none; } .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active, .dso-nav.dso-nav-sub > li > button:hover, .dso-nav.dso-nav-sub > li > button:focus-visible, .dso-nav.dso-nav-sub > li > button:active { text-decoration: underline; } .dso-nav.dso-nav-sub > li > a, .dso-nav.dso-nav-sub > li > button { font-size: 1rem; margin-block-start: 4px; padding-block: 4px 3px; padding-inline: 8px; } .dso-navbar { padding-inline: 16px; } .dso-nav { border-block-end: 1px solid #ccc; display: flex; gap: 16px; margin-block-start: 0; inline-size: calc(100vw - 32px); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary { background-color: var(--_dso-button-tertiary-background-color, ); border-color: var(--_dso-button-tertiary-border-color, ); color: var(--_dso-button-tertiary-color, #39870c); float: var(--_dso-button-float-tertiary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: auto; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-tertiary:hover, .dso-tertiary:focus-visible { background-color: var(--_dso-button-tertiary-hover-background-color, ); border-color: var(--_dso-button-tertiary-hover-border-color, ); color: var(--_dso-button-tertiary-hover-color, #275937); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary:active { background-color: var(--_dso-button-tertiary-active-background-color, ); border-color: var(--_dso-button-tertiary-active-border-color, ); color: var(--_dso-button-tertiary-active-color, #173521); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary[disabled], .dso-tertiary[disabled]:hover, .dso-tertiary[disabled]:focus-visible { background-color: var(--_dso-button-tertiary-disabled-background-color, ); border-color: var(--_dso-button-tertiary-disabled-border-color, ); color: var(--_dso-button-tertiary-disabled-color, #afcf9d); float: var(--_dso-button-float-tertiary, none); } .dso-tertiary.dso-small { line-height: 1rem; } .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { line-height: 1rem; } .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-tertiary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-tertiary.dso-extra-small { padding-block: 9px; } .dso-tertiary { border: 0; line-height: 1; padding-inline: 0; padding-block: var(--_dso-button-padding-block-tertiary, 0); background-color: transparent; } .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right { color: #39870c; } .dso-tertiary:not([disabled]):hover, .dso-tertiary:not([disabled]):active { text-decoration: underline; text-underline-position: under; } .dso-tertiary.dso-align { line-height: calc(1.5em - 1px); padding-block: 11px; padding-inline: 0; position: relative; } .dso-tertiary.dso-truncate { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dso-tertiary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-end: 8px; } .dso-tertiary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: middle; inline-size: 24px; margin-inline-start: 8px; } .dso-tertiary dso-icon + span:not(.sr-only), .dso-tertiary span:not(.sr-only) + dso-icon { margin-inline-start: 4px; } .dso-tertiary dso-icon, .dso-tertiary span { vertical-align: middle; } .dso-tertiary { font-weight: 300; } :host(:not([print])) .viewer-grid-columns { flex-direction: column; } :host(:not([print])) .dso-main-panel, :host(:not([print])) .dso-document-panel, :host(:not([print])) .map-area { flex: 1; inline-size: 100%; max-inline-size: none; min-inline-size: 0; } :host(:not([print])) .map { position: relative; inset: auto; } :host(:not([print])) .overlay { inline-size: calc(100vw - 32px); } :host(:not([print])) .filter-panel, :host(:not([print])) .overlay { max-inline-size: 100vw; inset-block-start: 0; } :host(:not([print])) .filter-panel { margin-inline: 0; inset-inline-start: -100vw; inline-size: 100vw; } :host(:not([print])) .filter-panel[open] { inset-inline-start: 0; } } @media screen and (min-width: 992px) { :host(:not([print])[filter-panel-open]) .dso-main-panel { margin-inline-start: 380px; } } :host([print]) { display: flex; flex-direction: column; block-size: auto; overflow: visible; } :host([print]) .viewer-grid-columns { display: flex; flex-direction: column; overflow: visible; } :host([print]) .map-area { display: flex; flex-direction: row; align-items: flex-start; overflow: visible; flex-shrink: 0; order: -1; } :host([print]) .map { flex: 1; min-inline-size: 0; align-self: stretch; block-size: 400px; position: relative; inset: auto; } :host([print]) slot[name=legend] { position: relative; inset: auto; flex-shrink: 0; --_dso-legend-content-max-block-size: none; } :host([print]) .dso-main-panel { block-size: auto; box-shadow: none; inline-size: 100%; max-inline-size: none; min-inline-size: 0; position: relative; margin-inline-start: 0; } :host([print]) .dso-main-panel .content { align-items: flex-start; block-size: auto; display: flex; flex-direction: row; gap: 32px; overflow-y: visible; } :host([print]) .dso-main-panel .content slot[name=main] { display: block; flex: 1; min-inline-size: 0; } :host([print]) .filter-panel { block-size: auto; box-shadow: none; flex-shrink: 0; inline-size: 380px; margin-inline: 0; max-inline-size: none; min-inline-size: 0; position: relative; transition: none; } :host([print]) .dso-document-panel { block-size: auto; box-shadow: none; inline-size: 100%; max-inline-size: none; min-inline-size: 0; position: static; } :host([print]) .dso-document-panel .content { block-size: auto; overflow-y: visible; } :host([print]) .sizing-buttons, :host([print]) .toggle-button { display: none; }"}},[257,"dso-viewer-grid",{filterPanelTitle:[513,"filter-panel-title"],filterPanelOpen:[516,"filter-panel-open"],overlayOpen:[516,"overlay-open"],documentPanelOpen:[516,"document-panel-open"],print:[516],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]},void 0,{documentPanelOpen:[{documentPanelOpenWatcher:0}],filterPanelOpen:[{filterPanelOpenWatcher:0}],overlayOpen:[{overlayOpenWatcher:0}]}]),g=f,k=function(){"undefined"!=typeof customElements&&["dso-viewer-grid"].forEach((e=>{"dso-viewer-grid"===e&&(customElements.get(a(e))\|\|customElements.define(a(e),f))}))};export{g as DsoViewerGrid,k as defineCustomElement}

package/dist/components/icon-button.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as r,createEvent as t,h as e,transformTag as n}from"@stencil/core/internal/client";import{T as s}from"./tooltip.controller.js";import{T as a}from"./tooltip.functional-component.js";import{d}from"./icon.js";const i=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoClick=t(this,"dsoClick",3),this.tooltipController=new s({getReferenceElement:()=>this.buttonElRef,getTipElement:()=>this.tooltipElRef,getTipArrowElement:()=>this.tooltipArrowElRef,getPlacement:()=>this.tooltipPlacement,showDelay:500}),this.variant="secondary",this.tooltipPlacement="top",this.disabled=!1,this.handleShowTooltip=()=>{this.disabled\|\|this.tooltipController.show()},this.handleHideTooltip=()=>{this.tooltipController.hide()},this.handleClick=o=>{this.tooltipController.notifyClick(),this.handleHideTooltip(),this.dsoClick.emit({originalEvent:o,toggled:!this.toggled})}}async setFocus(){this.buttonElRef?.focus()}disconnectedCallback(){this.tooltipController.dispose()}componentDidRender(){this.buttonElRef&&Object.assign(this.buttonElRef,{ariaControlsElements:this.controlsElement?[this.controlsElement]:null,ariaDescribedByElements:this.describedByElement?[this.describedByElement]:null})}render(){return e("button",{key:"9bf48abb6605ca685ce380b65ffaeacd66bb12d2",ref:o=>this.buttonElRef=o,type:"button",disabled:this.disabled,"aria-label":this.label,class:`icon-button dso-${this.variant} ${this.toggled?"toggled":""}`,"aria-pressed":this.toggled?.toString(),"aria-expanded":this.expanded?.toString(),onMouseEnter:this.handleShowTooltip,onMouseLeave:this.handleHideTooltip,onFocus:this.handleShowTooltip,onBlur:this.handleHideTooltip,onClick:this.handleClick},e("dso-icon",{key:"0815abe603bc590898366bf6ffafb51a7c4d71a1",icon:this.icon,"aria-hidden":"true"}),e(a,{key:"5aa6aa5397384dde536db5e613f5eae5886d838f",tipElementRef:o=>this.tooltipElRef=o,tipArrowElementRef:o=>this.tooltipArrowElRef=o},this.label))}static get style(){return".dso-tooltip { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #666; color: #fff; border-radius: 4px; overflow: unset; margin: 0; border: 0; padding: 0; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)); opacity: 0; visibility: hidden; max-inline-size: 320px; } .dso-tooltip .tooltip-inner { --_dso-span-role-paragraph-margin-block: 8px; --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #666; color: #fff; font-family: Asap, sans-serif; font-size: 1rem; font-weight: normal; padding-block: 0; padding-inline: 8px; border-radius: 4px; line-height: 1.5; } .dso-tooltip .tooltip-arrow { position: absolute; background-color: #666; border-start-start-radius: 4px; block-size: 8px; inline-size: 8px; pointer-events: none; z-index: -1; } :host { display: inline-block; line-height: 1; position: var(--_dso-icon-button-position, static); inset-block-start: var(--_dso-icon-button-inset-block-start, 0); inset-inline-end: var(--_dso-icon-button-inset-inline-end, 0); } , ::after, *::before { box-sizing: border-box; } .dso-secondary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-secondary:focus, .dso-secondary:focus-visible { outline-offset: 2px; } .dso-secondary:active { outline: 0; } .dso-secondary.extern::after, .dso-secondary.download::after { content: \"\"; display: inline-block; } .dso-secondary { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-secondary:hover { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dso-button-float-secondary, none); } .dso-secondary:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dso-button-float-secondary, none); } .dso-secondary[disabled], .dso-secondary[disabled]:hover { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dso-button-float-secondary, none); } .dso-secondary.dso-small { line-height: 1rem; } .dso-secondary.dso-small dso-icon, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-secondary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-extra-small { line-height: 1rem; } .dso-secondary.dso-extra-small dso-icon, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-secondary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-extra-small { padding-block: 9px; } .dso-secondary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-secondary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-secondary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } .dso-secondary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]):hover::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]):hover::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after { block-size: 16px; inline-size: 16px; } .dso-secondary { padding-inline: calc(8px - 1px); padding-block: calc(8px - 1px); border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px); border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px); border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px); border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px); border-block-end-width: var(--_dso-icon-button-border-block-end-width, 1px); border-inline-end-width: var(--_dso-icon-button-border-inline-end-width, 1px); } .dso-secondary:not([disabled]):active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-secondary:not([disabled]).toggled { background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-secondary:not([disabled]).toggled:hover { background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-secondary:not([disabled]).toggled:active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary.extern::after, .dso-tertiary.download::after { content: \"\"; display: inline-block; } .dso-tertiary { padding-inline: 0; padding-block: 0; color: var(--_dso-icon-button-tertiary-color, #39870c); background-color: transparent; border: 0; } .dso-tertiary:not([disabled]):hover { color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]):active { color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary:not([disabled]).toggled { color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]).toggled:hover { color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27)); } .dso-tertiary:not([disabled]).toggled:active { color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary[disabled] { color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d)); } .dso-map { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-map:focus, .dso-map:focus-visible { outline-offset: 2px; } .dso-map:active { outline: 0; } .dso-map { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-map:hover { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dso-button-float-secondary, none); } .dso-map:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dso-button-float-secondary, none); } .dso-map[disabled], .dso-map[disabled]:hover { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dso-button-float-secondary, none); } .dso-map.dso-small { line-height: 1rem; } .dso-map.dso-small dso-icon, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-map.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-map.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-map.dso-extra-small { line-height: 1rem; } .dso-map.dso-extra-small dso-icon, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-map.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-map.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-map.dso-extra-small { padding-block: 9px; } .dso-map dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-map span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-map dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } .dso-map.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]):hover::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before { block-size: 16px; inline-size: 16px; } .dso-map.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]):hover::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after { block-size: 16px; inline-size: 16px; } .dso-map { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); border: 0; font-weight: 600; margin-inline-end: 16px; padding-block: 8px; padding-inline: 16px; white-space: nowrap; } .dso-map:focus, .dso-map:focus-visible { outline-offset: -1px; } .dso-map:has(span.sr-only):has(dso-icon) { padding: 8px; min-inline-size: auto; block-size: 40px; inline-size: 40px; } .dso-map { padding-inline: 8px; padding-block: 8px; border: 0; margin-inline-end: 0; box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3)); border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px); border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px); border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px); border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px); } .dso-map:not([disabled]):active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-map:not([disabled]).toggled { background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-map:not([disabled]).toggled:hover { background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-map:not([disabled]).toggled:active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); } .icon-button { min-inline-size: auto; cursor: pointer; } .icon-button[disabled] { cursor: default; }"}},[1,"dso-icon-button",{icon:[513],label:[513],variant:[513],tooltipPlacement:[513,"tooltip-placement"],disabled:[516],expanded:[516],controlsElement:[16],describedByElement:[16],toggled:[516],setFocus:[64]}]);function c(){"undefined"!=typeof customElements&&["dso-icon-button","dso-icon"].forEach((o=>{switch(o){case"dso-icon-button":customElements.get(n(o))\|\|customElements.define(n(o),i);break;case"dso-icon":customElements.get(n(o))\|\|d()}}))}export{i as I,c as d}
1	+ import{proxyCustomElement as o,HTMLElement as r,createEvent as t,h as e,transformTag as s}from"@stencil/core/internal/client";import{T as n}from"./tooltip.controller.js";import{T as a}from"./tooltip.functional-component.js";import{d}from"./icon.js";const i=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoClick=t(this,"dsoClick",3),this.tooltipController=new n({getReferenceElement:()=>this.buttonElRef,getTipElement:()=>this.tooltipElRef,getTipArrowElement:()=>this.tooltipArrowElRef,getPlacement:()=>this.tooltipPlacement,showDelay:500}),this.variant="secondary",this.tooltipPlacement="top",this.disabled=!1,this.handleShowTooltip=()=>{this.disabled\|\|this.tooltipController.show()},this.handleHideTooltip=()=>{this.tooltipController.hide()},this.handleClick=o=>{this.tooltipController.notifyClick(),this.handleHideTooltip(),this.dsoClick.emit({originalEvent:o,toggled:!this.toggled})}}async setFocus(){this.buttonElRef?.focus()}tooltipWatcher(){this.warnIfTooltipNotInLabel()}warnIfTooltipNotInLabel(){this.tooltip&&!` ${this.label??""} `.includes(` ${this.tooltip} `)&&console.warn(`Icon Button: tooltip "${this.tooltip}" does not appear in label "${this.label??""}"`)}componentWillLoad(){this.warnIfTooltipNotInLabel()}disconnectedCallback(){this.tooltipController.dispose()}componentDidRender(){this.buttonElRef&&Object.assign(this.buttonElRef,{ariaControlsElements:this.controlsElement?[this.controlsElement]:null,ariaDescribedByElements:this.describedByElement?[this.describedByElement]:null})}render(){return e("button",{key:"51f3663454ff5552d123a55d566d618a097880d4",ref:o=>this.buttonElRef=o,type:"button",disabled:this.disabled,"aria-label":this.label,class:`icon-button dso-${this.variant} ${this.toggled?"toggled":""}`,"aria-pressed":this.toggled?.toString(),"aria-expanded":this.expanded?.toString(),onMouseEnter:this.handleShowTooltip,onMouseLeave:this.handleHideTooltip,onFocus:this.handleShowTooltip,onBlur:this.handleHideTooltip,onClick:this.handleClick},e("dso-icon",{key:"b270947dd0ac8537699d4ab050fa359d62dfd9f9",icon:this.icon,"aria-hidden":"true"}),e(a,{key:"54b98cd18f0f4054426f5e1f402f750c1c45b51d",tipElementRef:o=>this.tooltipElRef=o,tipArrowElementRef:o=>this.tooltipArrowElRef=o},this.tooltip\|\|this.label))}static get watchers(){return{label:[{tooltipWatcher:0}],tooltip:[{tooltipWatcher:0}]}}static get style(){return".dso-tooltip { --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #666; color: #fff; border-radius: 4px; overflow: unset; margin: 0; border: 0; padding: 0; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)); opacity: 0; visibility: hidden; max-inline-size: 320px; } .dso-tooltip .tooltip-inner { --_dso-span-role-paragraph-margin-block: 8px; --_dso-alert-success-border-color: #39870c; --_dso-alert-error-border-color: #ce3f51; --_dso-alert-info-border-color: #6ca4d9; --_dso-alert-warning-border-color: #dcd400; --_dso-link-color: currentColor; --_dso-link-hover-color: currentColor; --_dso-link-visited-color: currentColor; --_dso-link-download-icon: var(--_dso-di-download-wit); --_dso-link-extern-icon: var(--_dso-di-external-link-wit); --_dso-link-phone-icon: var(--_dso-di-call-wit); --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit); --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit); --_dso-icon-button-secondary-active-color: #fff; --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-secondary-toggled-color: #fff; --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2); --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-color: #f2f2f2; --_dso-icon-button-tertiary-hover-color: #fff; --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4); --_dso-icon-button-tertiary-toggled-color: #fff; --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3); --_dso-icon-button-tertiary-disabled-color: #b2b2b2; --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit); --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit); --_dso-button-primary-background-color: #fff; --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-background-color: #f2f2f2; --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-border-color: #fff; --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8); --_dso-button-primary-active-border-color: #f2f2f2; --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6); --_dso-button-primary-color: #191919; --_dso-button-primary-hover-color: #191919; --_dso-button-primary-active-color: #191919; --_dso-button-primary-disabled-color: #666; --_dso-button-secondary-background-color: none; --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2); --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-background-color: none; --_dso-button-secondary-border-color: #fff; --_dso-button-secondary-hover-border-color: #fff; --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4); --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7); --_dso-button-secondary-color: #fff; --_dso-button-secondary-hover-color: #fff; --_dso-button-secondary-active-color: #fff; --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7); --_dso-button-tertiary-color: #fff; --_dso-button-tertiary-hover-color: #fff; --_dso-button-tertiary-active-color: #fff; --_dso-button-tertiary-disabled-color: #b2b2b2; background-color: #666; color: #fff; font-family: Asap, sans-serif; font-size: 1rem; font-weight: normal; padding-block: 0; padding-inline: 8px; border-radius: 4px; line-height: 1.5; } .dso-tooltip .tooltip-arrow { position: absolute; background-color: #666; border-start-start-radius: 4px; block-size: 8px; inline-size: 8px; pointer-events: none; z-index: -1; } :host { display: inline-block; line-height: 1; position: var(--_dso-icon-button-position, static); inset-block-start: var(--_dso-icon-button-inset-block-start, 0); inset-inline-end: var(--_dso-icon-button-inset-inline-end, 0); } , ::after, *::before { box-sizing: border-box; } .dso-secondary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-secondary:focus, .dso-secondary:focus-visible { outline-offset: 2px; } .dso-secondary:active { outline: 0; } .dso-secondary.extern::after, .dso-secondary.download::after { content: \"\"; display: inline-block; } .dso-secondary { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-secondary:hover, .dso-secondary:focus-visible { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dso-button-float-secondary, none); } .dso-secondary:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dso-button-float-secondary, none); } .dso-secondary[disabled], .dso-secondary[disabled]:hover, .dso-secondary[disabled]:focus-visible { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dso-button-float-secondary, none); } .dso-secondary.dso-small { line-height: 1rem; } .dso-secondary.dso-small dso-icon, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-secondary.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-extra-small { line-height: 1rem; } .dso-secondary.dso-extra-small dso-icon, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-secondary.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-extra-small { padding-block: 9px; } .dso-secondary dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-secondary span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-secondary dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } .dso-secondary.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]):hover::before, .dso-secondary.dso-spinner-left:not([disabled]):focus-visible::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, .dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before { block-size: 16px; inline-size: 16px; } .dso-secondary.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]):hover::after, .dso-secondary.dso-spinner-right:not([disabled]):focus-visible::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, .dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after { block-size: 16px; inline-size: 16px; } .dso-secondary { padding-inline: calc(8px - 1px); padding-block: calc(8px - 1px); border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px); border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px); border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px); border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px); border-block-end-width: var(--_dso-icon-button-border-block-end-width, 1px); border-inline-end-width: var(--_dso-icon-button-border-inline-end-width, 1px); } .dso-secondary:not([disabled]):active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-secondary:not([disabled]).toggled { background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-secondary:not([disabled]).toggled:hover, .dso-secondary:not([disabled]).toggled:focus-visible { background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-secondary:not([disabled]).toggled:active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-tertiary { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible { outline-offset: 2px; } .dso-tertiary:active { outline: 0; } .dso-tertiary.extern::after, .dso-tertiary.download::after { content: \"\"; display: inline-block; } .dso-tertiary { padding-inline: 0; padding-block: 0; color: var(--_dso-icon-button-tertiary-color, #39870c); background-color: transparent; border: 0; } .dso-tertiary:not([disabled]):hover, .dso-tertiary:not([disabled]):focus-visible { color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]):active { color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #173521)); } .dso-tertiary:not([disabled]).toggled { color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]).toggled:hover, .dso-tertiary:not([disabled]).toggled:focus-visible { color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27)); } .dso-tertiary:not([disabled]).toggled:active { color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #173521)); } .dso-tertiary[disabled] { color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d)); } .dso-map { display: inline-block; font-size: 1em; font-weight: 500; margin-block-end: 0; text-decoration: none; touch-action: manipulation; text-align: var(--_dso-button-text-align, start); user-select: none; vertical-align: middle; background-clip: padding-box; } .dso-map:focus, .dso-map:focus-visible { outline-offset: 2px; } .dso-map:active { outline: 0; } .dso-map.extern::after, .dso-map.download::after { content: \"\"; display: inline-block; } .dso-map { background-color: var(--_dso-button-secondary-background-color, #fff); border-color: var(--_dso-button-secondary-border-color, #39870c); color: var(--_dso-button-secondary-color, #39870c); float: var(--_dso-button-float-secondary, none); border-width: 1px; border-style: solid; border-radius: 4px; line-height: 1.5; min-inline-size: 56px; inline-size: var(--_dso-button-inline-size, auto); padding-block: 11px; padding-inline: 15px; } .dso-map:hover, .dso-map:focus-visible { background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce); border-color: var(--_dso-button-secondary-hover-border-color, #275937); color: var(--_dso-button-secondary-hover-color, #275937); float: var(--_dso-button-float-secondary, none); } .dso-map:active { background-color: var(--_dso-button-secondary-active-background-color, #275937); border-color: var(--_dso-button-secondary-active-border-color, #275937); color: var(--_dso-button-secondary-active-color, #fff); float: var(--_dso-button-float-secondary, none); } .dso-map[disabled], .dso-map[disabled]:hover, .dso-map[disabled]:focus-visible { background-color: var(--_dso-button-secondary-disabled-background-color, #fff); border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d); color: var(--_dso-button-secondary-disabled-color, #afcf9d); float: var(--_dso-button-float-secondary, none); } .dso-map.dso-small { line-height: 1rem; } .dso-map.dso-small dso-icon, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-map.dso-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-map.dso-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-map.dso-extra-small { line-height: 1rem; } .dso-map.dso-extra-small dso-icon, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before { margin-block-end: -4px; margin-block-start: -4px; } .dso-map.dso-extra-small.dso-spinner-left::before { block-size: 16px; inline-size: 16px; } .dso-map.dso-extra-small.dso-spinner-right::after { block-size: 16px; inline-size: 16px; } .dso-map.dso-extra-small { padding-block: 9px; } .dso-map dso-icon:has(+ span:not(.sr-only)) { margin-inline-start: -8px; } .dso-map span:not(.sr-only) + dso-icon { margin-inline-start: 8px; margin-inline-end: -8px; } .dso-map dso-icon + span:not(.sr-only) { margin-inline-start: 8px; } .dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] { background-color: #fff; border-color: #39870c; color: #39870c; } .dso-map.dso-spinner-left::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]):hover::before, .dso-map.dso-spinner-left:not([disabled]):focus-visible::before { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, .dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before { block-size: 16px; inline-size: 16px; } .dso-map.dso-spinner-right::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]):hover::after, .dso-map.dso-spinner-right:not([disabled]):focus-visible::after { background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E\"); background-repeat: no-repeat; content: \"\"; display: inline-block; block-size: 24px; vertical-align: top; inline-size: 24px; margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, .dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after { block-size: 16px; inline-size: 16px; } .dso-map { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); border: 0; font-weight: 600; margin-inline-end: 16px; padding-block: 8px; padding-inline: 16px; white-space: nowrap; } .dso-map:has(span.sr-only):has(dso-icon) { padding: 8px; min-inline-size: auto; block-size: 40px; inline-size: 40px; } .dso-map { padding-inline: 8px; padding-block: 8px; border: 0; margin-inline-end: 0; box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3)); border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px); border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px); border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px); border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px); } .dso-map:not([disabled]):active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-map:not([disabled]).toggled { background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937); color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-map:not([disabled]).toggled:hover, .dso-map:not([disabled]).toggled:focus-visible { background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-map:not([disabled]).toggled:active { background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); } .icon-button { min-inline-size: auto; cursor: pointer; } .icon-button[disabled] { cursor: default; }"}},[1,"dso-icon-button",{icon:[513],label:[513],tooltip:[513],variant:[513],tooltipPlacement:[513,"tooltip-placement"],disabled:[516],expanded:[516],controlsElement:[16],describedByElement:[16],toggled:[516],setFocus:[64]},void 0,{label:[{tooltipWatcher:0}],tooltip:[{tooltipWatcher:0}]}]);function l(){"undefined"!=typeof customElements&&["dso-icon-button","dso-icon"].forEach((o=>{switch(o){case"dso-icon-button":customElements.get(s(o))\|\|customElements.define(s(o),i);break;case"dso-icon":customElements.get(s(o))\|\|d()}}))}export{i as I,l as d}

package/dist/components/image-overlay.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as t,forceUpdate as i,h as r,Host as e,transformTag as n}from"@stencil/core/internal/client";import{d}from"./index3.js";import{d as c}from"./icon.js";import{d as s}from"./icon-button.js";const l={verwijder:"Verwijderd",voegtoe:"Toegevoegd"},a=({active:o,src:t,alt:i,ref:e,close:n,click:d},c)=>o&&t&&r("dialog",{class:"wrapper",ref:e,onClose:n,onClick:n},r("div",{onClick:n},c[2],r("div",{class:"figure"},c[0],r("div",{class:"content"},r("img",{src:t,alt:i}),r("dso-icon-button",{icon:"cross",variant:"map",class:"close",label:"Sluiten",onDsoClick:d}),c[1])))),b=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.active=!1,this.zoomable=!1,this.titelSlot=null,this.bijschriftSlot=null,this.dialogCloseEventListener=o=>{o.target instanceof HTMLDialogElement&&this.closeZoomedImage()}}loadListener(o){o.target instanceof HTMLImageElement&&this.scheduleZoomableUpdate(o.target)}connectedCallback(){this.titelSlot=this.host.querySelector("div[slot='titel']"),this.bijschriftSlot=this.host.querySelector("div[slot='bijschrift']")}componentDidLoad(){this.resizeObserver=new ResizeObserver(d((()=>{const o=this.host.querySelector("img");o instanceof HTMLImageElement&&this.setZoomable(o)}),200)),this.mutationObserver=new MutationObserver((o=>{i(this.host),"childList"===o[0]?.type&&(this.resizeObserver?.disconnect(),this.initZoomableImage())})),this.mutationObserver.observe(this.host,{attributes:!0,subtree:!0,attributeFilter:["src","alt"],childList:!0}),this.initZoomableImage()}componentDidRender(){this.active&&!this.wrapperElement?.open&&this.wrapperElement?.showModal()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),void 0!==this.zoomableFrameId&&(cancelAnimationFrame(this.zoomableFrameId),this.zoomableFrameId=void 0)}initZoomableImage(){const o=this.host.querySelector("img");o instanceof HTMLImageElement&&(o.complete&&this.scheduleZoomableUpdate(o),this.resizeObserver?.observe(o))}scheduleZoomableUpdate(o){const{width:t,naturalWidth:i,height:r,naturalHeight:e}=o;this.pendingZoomable=t<i\|\|r<e,void 0===this.zoomableFrameId&&(this.zoomableFrameId=requestAnimationFrame((()=>{this.zoomableFrameId=void 0,this.host.isConnected&&void 0!==this.pendingZoomable&&this.zoomable!==this.pendingZoomable&&(this.zoomable=this.pendingZoomable)})))}setZoomable(o){this.scheduleZoomableUpdate(o)}isWijzigactie(o){return"voegtoe"===o\|\|"verwijder"===o}closeZoomedImage(){this.wrapperElement?.close(),this.active=!1}render(){const{src:o,alt:t}=this.host.querySelector("img")??{},i=this.wijzigactie&&this.isWijzigactie(this.wijzigactie)&&l[this.wijzigactie]\|\|void 0,n=this.zoomable&&r("dso-icon-button",{icon:"external-link",class:"open",variant:"map",label:"Afbeelding vergroot weergeven",ref:o=>this.iconButtonElement=o,onDsoClick:()=>this.active=!0});return"verwijder"===this.wijzigactie?r(e,{onClick:()=>this.iconButtonElement?.setFocus()},r("del",{class:"editaction-remove"},r("div",{class:"editaction-label"},i,":"),r(a,{active:this.active,src:o,alt:t,ref:o=>this.wrapperElement=o,close:this.dialogCloseEventListener,click:()=>this.closeZoomedImage()},this.titelSlot&&r("div",{class:"title"},r("slot",{name:"titel"})),r("div",{class:"figuur-bijschrift",hidden:!this.bijschriftSlot},r("slot",{name:"bijschrift"})),r("div",{class:"editaction-label"},i,":")),r("slot",null),n)):"voegtoe"===this.wijzigactie?r(e,{onClick:()=>this.iconButtonElement?.setFocus()},r("ins",{class:"editaction-add"},r("div",{class:"editaction-label"},i,":"),r(a,{active:this.active,src:o,alt:t,ref:o=>this.wrapperElement=o,close:this.dialogCloseEventListener,click:()=>this.closeZoomedImage()},this.titelSlot&&r("div",{class:"title"},r("slot",{name:"titel"})),r("div",{class:"figuur-bijschrift",hidden:!this.bijschriftSlot},r("slot",{name:"bijschrift"})),r("div",{class:"editaction-label"},i,":")),r("slot",null),n)):r(e,{onClick:()=>this.iconButtonElement?.setFocus()},r(a,{active:this.active,src:o,alt:t,ref:o=>this.wrapperElement=o,close:this.dialogCloseEventListener,click:()=>this.closeZoomedImage()},this.titelSlot&&r("div",{class:"title"},r("slot",{name:"titel"})),r("div",{class:"figuur-bijschrift",hidden:!this.bijschriftSlot},r("slot",{name:"bijschrift"}))),r("slot",null),n)}get host(){return this}static get style(){return':host{display:inline-block;position:relative}:host .wrapper{overflow:visible;padding:0;border:0}:host .wrapper::backdrop{background-color:rgba(255, 255, 255, 0.8)}:host(:hover) .open,.open:focus{opacity:1}.open{opacity:0;position:absolute;inset-inline-end:16px;inset-block-start:16px}.wrapper{align-self:center;background-color:transparent;line-height:0;z-index:20}.wrapper>div{display:grid}.wrapper .figure{display:grid;filter:drop-shadow(4px 0 4px rgba(0, 0, 0, 0.25));clip-path:inset(-8px -16px -8px 0)}.wrapper .title{justify-self:start;background-color:#fff;font-size:1.25rem;font-weight:600;line-height:1.3;padding:8px}.wrapper .content{position:relative;display:grid;grid-template-areas:"image" "caption";background-color:#fff;padding-block:4px;padding-inline:4px}.wrapper img{grid-area:image;display:block;inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:calc(100vh - calc(32px + 1.625rem + 1.3125rem + 38px))}.wrapper .figuur-bijschrift:not([hidden]){grid-area:caption;display:block;font-size:0.875rem;font-style:italic;line-height:1.5;padding-block-start:10px;padding-block-end:4px;padding-inline:4px}.close{grid-area:image;position:absolute;inset-block-start:16px;inset-inline-end:16px}ins.editaction-add{display:inline-block;margin-block-end:8px;padding:8px;text-decoration:none;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}ins.editaction-add .wrapper{outline:none;padding:8px;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}ins.editaction-add .wrapper .editaction-label{line-height:1.5}ins.editaction-add .open{inset-block-start:48px}del.editaction-remove{display:inline-block;margin-block-end:8px;padding:8px;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove{font-family:sans-serif}}del.editaction-remove .wrapper{outline:none;padding:8px;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove .wrapper{font-family:sans-serif}}del.editaction-remove .wrapper .title{text-decoration:line-through}del.editaction-remove .wrapper .editaction-label{line-height:1.5}del.editaction-remove .open{inset-block-start:48px}.editaction-label{font-style:italic;margin-block-end:8px}'}},[257,"dso-image-overlay",{wijzigactie:[1],active:[32],zoomable:[32]},[[2,"load","loadListener"]]]);function h(){"undefined"!=typeof customElements&&["dso-image-overlay","dso-icon","dso-icon-button"].forEach((o=>{switch(o){case"dso-image-overlay":customElements.get(n(o))\|\|customElements.define(n(o),b);break;case"dso-icon":customElements.get(n(o))\|\|c();break;case"dso-icon-button":customElements.get(n(o))\|\|s()}}))}export{b as I,h as d}
1	+ import{proxyCustomElement as o,HTMLElement as t,forceUpdate as i,h as r,Host as e,transformTag as n}from"@stencil/core/internal/client";import{d}from"./index3.js";import{d as c}from"./icon.js";import{d as l}from"./icon-button.js";const a={verwijder:"Verwijderd",voegtoe:"Toegevoegd"},s=({active:o,src:t,alt:i,ref:e,close:n,click:d,titel:c,bijschrift:l,editactionLabel:a})=>o&&t&&r("dialog",{class:"wrapper",ref:e,onClose:n,onClick:n},r("div",{onClick:n},a,r("div",{class:"figure"},c,r("div",{class:"content"},r("img",{src:t,alt:i}),r("dso-icon-button",{icon:"cross",variant:"map",class:"close",label:"Sluiten",onDsoClick:d}),l)))),b=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.active=!1,this.zoomable=!1,this.titelSlot=null,this.bijschriftSlot=null,this.dialogCloseEventListener=o=>{o.target instanceof HTMLDialogElement&&this.closeZoomedImage()}}loadListener(o){o.target instanceof HTMLImageElement&&this.scheduleZoomableUpdate(o.target)}connectedCallback(){this.titelSlot=this.host.querySelector("div[slot='titel']"),this.bijschriftSlot=this.host.querySelector("div[slot='bijschrift']")}componentDidLoad(){this.resizeObserver=new ResizeObserver(d((()=>{const o=this.host.querySelector("img");o instanceof HTMLImageElement&&this.setZoomable(o)}),200)),this.mutationObserver=new MutationObserver((o=>{i(this.host),"childList"===o[0]?.type&&(this.resizeObserver?.disconnect(),this.initZoomableImage())})),this.mutationObserver.observe(this.host,{attributes:!0,subtree:!0,attributeFilter:["src","alt"],childList:!0}),this.initZoomableImage()}componentDidRender(){this.active&&!this.wrapperElement?.open&&this.wrapperElement?.showModal()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),void 0!==this.zoomableFrameId&&(cancelAnimationFrame(this.zoomableFrameId),this.zoomableFrameId=void 0)}initZoomableImage(){const o=this.host.querySelector("img");o instanceof HTMLImageElement&&(o.complete&&this.scheduleZoomableUpdate(o),this.resizeObserver?.observe(o))}scheduleZoomableUpdate(o){const{width:t,naturalWidth:i,height:r,naturalHeight:e}=o;this.pendingZoomable=t<i\|\|r<e,void 0===this.zoomableFrameId&&(this.zoomableFrameId=requestAnimationFrame((()=>{this.zoomableFrameId=void 0,this.host.isConnected&&void 0!==this.pendingZoomable&&this.zoomable!==this.pendingZoomable&&(this.zoomable=this.pendingZoomable)})))}setZoomable(o){this.scheduleZoomableUpdate(o)}isWijzigactie(o){return"voegtoe"===o\|\|"verwijder"===o}closeZoomedImage(){this.wrapperElement?.close(),this.active=!1}render(){const{src:o,alt:t}=this.host.querySelector("img")??{},i=this.wijzigactie&&this.isWijzigactie(this.wijzigactie)&&a[this.wijzigactie]\|\|void 0,n=this.titelSlot?r("div",{class:"title"},r("slot",{name:"titel"})):void 0,d=r("div",{class:"figuur-bijschrift",hidden:!this.bijschriftSlot},r("slot",{name:"bijschrift"})),c=this.zoomable&&r("dso-icon-button",{icon:"external-link",class:"open",variant:"map",label:"Afbeelding vergroot weergeven",ref:o=>this.iconButtonElement=o,onDsoClick:()=>this.active=!0});return"verwijder"===this.wijzigactie?r(e,{onClick:()=>this.iconButtonElement?.setFocus()},r("del",{class:"editaction-remove"},r("div",{class:"editaction-label"},i,":"),r(s,{active:this.active,src:o,alt:t,ref:o=>this.wrapperElement=o,close:this.dialogCloseEventListener,click:()=>this.closeZoomedImage(),titel:n,bijschrift:d,editactionLabel:r("div",{class:"editaction-label"},i,":")}),r("slot",null),c)):"voegtoe"===this.wijzigactie?r(e,{onClick:()=>this.iconButtonElement?.setFocus()},r("ins",{class:"editaction-add"},r("div",{class:"editaction-label"},i,":"),r(s,{active:this.active,src:o,alt:t,ref:o=>this.wrapperElement=o,close:this.dialogCloseEventListener,click:()=>this.closeZoomedImage(),titel:n,bijschrift:d,editactionLabel:r("div",{class:"editaction-label"},i,":")}),r("slot",null),c)):r(e,{onClick:()=>this.iconButtonElement?.setFocus()},r(s,{active:this.active,src:o,alt:t,ref:o=>this.wrapperElement=o,close:this.dialogCloseEventListener,click:()=>this.closeZoomedImage(),titel:n,bijschrift:d}),r("slot",null),c)}get host(){return this}static get style(){return':host{display:inline-block;position:relative}:host .wrapper{overflow:visible;padding:0;border:0}:host .wrapper::backdrop{background-color:rgba(255, 255, 255, 0.8)}:host(:hover) .open,.open:focus{opacity:1}.open{opacity:0;position:absolute;inset-inline-end:16px;inset-block-start:16px}.wrapper{align-self:center;background-color:transparent;line-height:0;z-index:20}.wrapper>div{display:grid}.wrapper .figure{display:grid;filter:drop-shadow(4px 0 4px rgba(0, 0, 0, 0.25));clip-path:inset(-8px -16px -8px 0)}.wrapper .title{justify-self:start;background-color:#fff;font-size:1.25rem;font-weight:600;line-height:1.3;padding:8px}.wrapper .content{position:relative;display:grid;grid-template-areas:"image" "caption";background-color:#fff;padding-block:4px;padding-inline:4px}.wrapper img{grid-area:image;display:block;inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:calc(100vh - calc(32px + 1.625rem + 1.3125rem + 38px))}.wrapper .figuur-bijschrift:not([hidden]){grid-area:caption;display:block;font-size:0.875rem;font-style:italic;line-height:1.5;padding-block-start:10px;padding-block-end:4px;padding-inline:4px}.close{grid-area:image;position:absolute;inset-block-start:16px;inset-inline-end:16px}ins.editaction-add{display:inline-block;margin-block-end:8px;padding:8px;text-decoration:none;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}ins.editaction-add .wrapper{outline:none;padding:8px;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}ins.editaction-add .wrapper .editaction-label{line-height:1.5}ins.editaction-add .open{inset-block-start:48px}del.editaction-remove{display:inline-block;margin-block-end:8px;padding:8px;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove{font-family:sans-serif}}del.editaction-remove .wrapper{outline:none;padding:8px;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove .wrapper{font-family:sans-serif}}del.editaction-remove .wrapper .title{text-decoration:line-through}del.editaction-remove .wrapper .editaction-label{line-height:1.5}del.editaction-remove .open{inset-block-start:48px}.editaction-label{font-style:italic;margin-block-end:8px}'}},[257,"dso-image-overlay",{wijzigactie:[1],active:[32],zoomable:[32]},[[2,"load","loadListener"]]]);function h(){"undefined"!=typeof customElements&&["dso-image-overlay","dso-icon","dso-icon-button"].forEach((o=>{switch(o){case"dso-image-overlay":customElements.get(n(o))\|\|customElements.define(n(o),b);break;case"dso-icon":customElements.get(n(o))\|\|c();break;case"dso-icon-button":customElements.get(n(o))\|\|l()}}))}export{b as I,h as d}

package/dist/components/info.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as o,HTMLElement as t,createEvent as r,h as e,Fragment as n,transformTag as i}from"@stencil/core/internal/client";import{d as c}from"./icon.js";import{d}from"./icon-button.js";const s=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoClose=r(this,"dsoClose",7)}render(){return e(n,{key:"~~943df64625f93307bd76327b6659a36d591b6301~~"},e("slot",{key:"~~032e327a6ad730378710bb8cd5ebe4ae0506665e~~"}),!this.fixed&&e("dso-icon-button",{key:"~~64af9e7a36634d09c2d9a6089d1226c7dcebf0f9~~",label:"Sluiten",variant:"tertiary",icon:"cross",onDsoClick:o=>this.dsoClose.emit(o.detail.originalEvent)}))}static get style(){return",::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#~~1f472c~~;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919;--_dso-image-display:block;--_dso-image-margin-block:8px;--_dso-image-margin-inline:auto;--_dso-rich-content-margin-block-start:0}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}"}},[257,"dso-info",{fixed:[516],active:[516]}]);function a(){"undefined"!=typeof customElements&&["dso-info","dso-icon","dso-icon-button"].forEach((o=>{switch(o){case"dso-info":customElements.get(i(o))\|\|customElements.define(i(o),s);break;case"dso-icon":customElements.get(i(o))\|\|c();break;case"dso-icon-button":customElements.get(i(o))\|\|d()}}))}export{s as I,a as d}
1	+ import{proxyCustomElement as o,HTMLElement as t,createEvent as e,h as i,Fragment as n,transformTag as r}from"@stencil/core/internal/client";import{d as c}from"./icon.js";import{d as s}from"./icon-button.js";const d=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoClose=e(this,"dsoClose",7)}activeChanged(o){this.previousActiveElement=o?function(){let o=document.activeElement;for(;o?.shadowRoot?.activeElement;)o=o.shadowRoot.activeElement;return o instanceof t&&o!==document.body?o:void 0}():void 0}componentWillLoad(){this.activeChanged(this.active)}render(){return i(n,{key:"0bbfdfd01d151bc0470268f28b5d1aafc06412ae"},i("slot",{key:"3784cc98da4db09929429405731f09cfd8448a69"}),!this.fixed&&i("dso-icon-button",{key:"a27bb2288904385423df3b75be23c7761885fbea",label:this.closeLabel??"Sluiten",variant:"tertiary",icon:"cross",onDsoClick:o=>this.dsoClose.emit({originalEvent:o.detail.originalEvent,previousActiveElement:this.previousActiveElement})}))}static get watchers(){return{active:[{activeChanged:0}]}}static get style(){return",::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f2f2f2;color:#191919;--_dso-image-display:block;--_dso-image-margin-block:8px;--_dso-image-margin-inline:auto;--_dso-rich-content-margin-block-start:0}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}"}},[257,"dso-info",{fixed:[516],active:[516],closeLabel:[1,"close-label"]},void 0,{active:[{activeChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["dso-info","dso-icon","dso-icon-button"].forEach((o=>{switch(o){case"dso-info":customElements.get(r(o))\|\|customElements.define(r(o),d);break;case"dso-icon":customElements.get(r(o))\|\|c();break;case"dso-icon-button":customElements.get(r(o))\|\|s()}}))}export{d as I,a as d}