@dso-toolkit/core 99.5.0 → 100.1.0

package/dist/components/dso-dropdown-menu.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as t,forceUpdate as r,h as e,Host as n,transformTag as s}from"@stencil/core/internal/client";import{a,c as i,o as d,f as l,d as c}from"./floating-ui.dom.js";import{c as b}from"./index2.js";import{d as p}from"./icon.js";import{d as f}from"./scrollable.js";import{v as u}from"./v4.js";const m=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.variant="secondary",this.open=!1,this.focusOutListener=o=>{!this.open||o.relatedTarget instanceof t||this.toggleOptions(!1)},this.keyDownHandler=o=>{if(o.target instanceof t&&!o.defaultPrevented&&this.open){switch(o.key){case"Tab":o.shiftKey?this.moveFocusToPrevious(o.target):this.moveFocusToNext(o.target);break;case"ArrowDown":this.moveFocusToNext(o.target,!1);break;case"ArrowUp":this.moveFocusToPrevious(o.target,!1);break;case"Escape":this.escape();break;default:return}o.preventDefault()}},this.escape=()=>{this.button?.focus(),this.toggleOptions(!1)};const{state:r}=b({checkable:!1});this.dropdownMenuState=r}get checkable(){return this.dropdownMenuState.checkable}set checkable(o){this.dropdownMenuState.checkable=o||!1,r(this.host)}dsoClickHandler(o){o.stopPropagation(),this.open&&o.target instanceof t&&this.toggleOptions(!1)}async _getState(){return this.dropdownMenuState}dropdownMenuTabbables(o){const t=this.host.isConnected?Array.from(this.host.querySelectorAll(":scope > dso-dropdown-menu-group > dso-dropdown-menu-item")):[];return o?[this.host,...t]:t}componentDidRender(){if(this.button&&this.popoverElement&&!this.cleanUp){const o=this.popoverElement,t=this.button;this.cleanUp=a(t,o,(()=>{i(t,o,{strategy:"fixed",middleware:[d(2),l({padding:2}),c({apply({availableHeight:o,availableWidth:t,elements:r}){const e=r.floating.querySelector("dso-scrollable")??r.floating;Object.assign(e.style,{maxHeight:o+"px",maxInlineSize:t+"px"})}})],placement:"bottom-start"}).then((({x:t,y:r})=>{Object.assign(o.style,{left:t+"px",top:r+"px"})}))}))}}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement.togglePopover(this.open),this.open&&requestAnimationFrame((()=>this.moveFocusTo(this.firstItem(!1)))),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}disconnectedCallback(){this.toggleOptions(!1)}get lastItem(){return this.dropdownMenuTabbables(!0).at(-1)}firstItem(o){return this.dropdownMenuTabbables(o)[0]}moveFocusToPrevious(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r-1]??this.lastItem;this.moveFocusTo(e)}moveFocusToNext(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r+1]??this.firstItem(t);this.moveFocusTo(e)}moveFocusTo(o){o&&(o===this.host&&this.button?this.button.focus():"_dsoFocus"in o&&o._dsoFocus())}render(){const o=u();return e(n,{key:"63dba747057e58c38f29d830b2a867dd02e07541",onFocusout:this.focusOutListener,onKeyDown:this.keyDownHandler},this.label&&e("button",{key:"3711038ff64c7e43a27c1a0a072fa904db484068",id:o,class:"dso-"+this.variant,type:"button",onClick:()=>this.toggleOptions(),"aria-expanded":""+this.open,"aria-haspopup":"menu",ref:o=>this.button=o},this.label,e("dso-icon",{key:"45037c7c83a4edecf75762b703115c34c2a39804",icon:this.open?"chevron-up":"chevron-down"})),e("div",{key:"34099ec42eef8744a3701e3fa90701e53791a8e5",popover:"manual",class:"dso-dropdown-options","aria-labelledby":o,role:"menu",ref:o=>this.popoverElement=o},e("dso-scrollable",{key:"d1b88fa03257379e7b213c29616b02f24872e2aa"},e("slot",{key:"7e9c881bc357590c9750ddbe3a6f6fdac46733c7"}))))}get host(){return this}static get style(){return":host(:focus) {   outline: none; }  :host {   display: inline-block; }  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-primary {   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-primary:focus, button.dso-primary:focus-visible {   outline-offset: 2px; } button.dso-primary:active {   outline: 0; } button.dso-primary.extern::after, button.dso-primary.download::after {   content: \"\";   display: inline-block; } button.dso-primary {   background-color: var(--_dso-button-primary-background-color, #39870c);   border-color: var(--_dso-button-primary-border-color, #39870c);   color: var(--_dso-button-primary-color, #fff);   float: var(--_dso-button-float-primary, 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-primary:hover {   background-color: var(--_dso-button-primary-hover-background-color, #275937);   border-color: var(--_dso-button-primary-hover-border-color, #275937);   color: var(--_dso-button-primary-hover-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary:active {   background-color: var(--_dso-button-primary-active-background-color, #173521);   border-color: var(--_dso-button-primary-active-border-color, #173521);   color: var(--_dso-button-primary-active-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary[disabled], button.dso-primary[disabled]:hover {   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);   color: var(--_dso-button-primary-disabled-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary.dso-small {   line-height: 1rem; } button.dso-primary.dso-small dso-icon, button.dso-primary.dso-small.extern::after, button.dso-primary.dso-small.download::after, button.dso-primary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   line-height: 1rem; } button.dso-primary.dso-extra-small dso-icon, button.dso-primary.dso-extra-small.extern::after, button.dso-primary.dso-extra-small.download::after, button.dso-primary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   padding-block: 9px; } button.dso-primary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-primary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-primary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-primary.dso-spinner-left[disabled], button.dso-primary.dso-spinner-right[disabled] {   background-color: #39870c;   border-color: #39870c;   color: #fff; } button.dso-primary.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: %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-primary.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: %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 {   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.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.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); } button.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); } button.dso-tertiary[disabled], button.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); } button.dso-tertiary.dso-small {   line-height: 1rem; } button.dso-tertiary.dso-small dso-icon, button.dso-tertiary.dso-small.extern::after, button.dso-tertiary.dso-small.download::after, button.dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   line-height: 1rem; } button.dso-tertiary.dso-extra-small dso-icon, button.dso-tertiary.dso-extra-small.extern::after, button.dso-tertiary.dso-extra-small.download::after, button.dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   padding-block: 9px; } button.dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } button.dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } button.dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } button.dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } button.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; } button.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; } button.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 4px; } button.dso-tertiary dso-icon, button.dso-tertiary span {   vertical-align: middle; } button dso-icon {   margin-inline-start: 8px; } button:not(.dso-tertiary) dso-icon {   margin-inline-end: 0; }  .dso-dropdown-options {   box-sizing: border-box;   margin: 0 !important;   overflow: unset;   background-clip: padding-box;   background-color: #fff;   border-radius: 4px;   border: 1px solid rgba(0, 0, 0, 0.15);   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);   font-size: 1rem;   min-inline-size: 160px;   inline-size: max-content;   padding: 0;   z-index: 220; }  ::slotted(dso-dropdown-menu-group:not(:last-child)) {   border-block-end: 1px solid #e5e5e5;   margin-block-end: 11px;   padding-block-end: 11px; }"}},[257,"dso-dropdown-menu",{checkable:[6660],label:[513],variant:[513],open:[32],_getState:[64]},[[0,"dsoClick","dsoClickHandler"]]]),g=m,y=function(){"undefined"!=typeof customElements&&["dso-dropdown-menu","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-dropdown-menu":customElements.get(s(o))||customElements.define(s(o),m);break;case"dso-icon":customElements.get(s(o))||p();break;case"dso-scrollable":customElements.get(s(o))||f()}}))};export{g as DsoDropdownMenu,y as defineCustomElement}
+import{proxyCustomElement as o,HTMLElement as t,forceUpdate as r,h as e,Host as n,transformTag as s}from"@stencil/core/internal/client";import{a,c as i,o as d,f as l,d as c}from"./floating-ui.dom.js";import{c as b}from"./index2.js";import{d as p}from"./icon.js";import{d as f}from"./scrollable.js";import{v as u}from"./v4.js";const m=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.variant="secondary",this.open=!1,this.focusOutListener=o=>{!this.open||o.relatedTarget instanceof t||this.toggleOptions(!1)},this.keyDownHandler=o=>{if(o.target instanceof t&&!o.defaultPrevented&&this.open){switch(o.key){case"Tab":o.shiftKey?this.moveFocusToPrevious(o.target):this.moveFocusToNext(o.target);break;case"ArrowDown":this.moveFocusToNext(o.target,!1);break;case"ArrowUp":this.moveFocusToPrevious(o.target,!1);break;case"Escape":this.escape();break;default:return}o.preventDefault()}},this.escape=()=>{this.button?.focus(),this.toggleOptions(!1)};const{state:r}=b({checkable:!1});this.dropdownMenuState=r}get checkable(){return this.dropdownMenuState.checkable}set checkable(o){this.dropdownMenuState.checkable=o||!1,r(this.host)}dsoClickHandler(o){o.stopPropagation(),this.open&&o.target instanceof t&&this.toggleOptions(!1)}async _getState(){return this.dropdownMenuState}dropdownMenuTabbables(o){const t=this.host.isConnected?Array.from(this.host.querySelectorAll(":scope > dso-dropdown-menu-group > dso-dropdown-menu-item")):[];return o?[this.host,...t]:t}componentDidRender(){if(this.open&&this.button&&this.popoverElement&&!this.cleanUp){const o=this.popoverElement,t=this.button;let r=!0;const e=(t,r)=>{if(o.isConnected){if(this.pendingPopoverConstraints){const t=o.querySelector("dso-scrollable")??o;Object.assign(t.style,{maxHeight:this.pendingPopoverConstraints.availableHeight+"px",maxInlineSize:this.pendingPopoverConstraints.availableWidth+"px"})}Object.assign(o.style,{left:t+"px",top:r+"px"})}},n=a(t,o,(()=>{i(t,o,{strategy:"fixed",middleware:[d(2),l({padding:2}),c({apply:({availableHeight:o,availableWidth:t})=>{this.pendingPopoverConstraints={availableWidth:t,availableHeight:o}}})],placement:"bottom-start"}).then((({x:o,y:t})=>{if(r)return r=!1,void e(o,t);void 0!==this.popoverFrameId&&cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=requestAnimationFrame((()=>{this.popoverFrameId=void 0,e(o,t)}))}))}));this.cleanUp=()=>{void 0!==this.popoverFrameId&&(cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=void 0),n()}}}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement.togglePopover(this.open),this.open&&requestAnimationFrame((()=>this.moveFocusTo(this.firstItem(!1)))),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}disconnectedCallback(){this.toggleOptions(!1)}get lastItem(){return this.dropdownMenuTabbables(!0).at(-1)}firstItem(o){return this.dropdownMenuTabbables(o)[0]}moveFocusToPrevious(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r-1]??this.lastItem;this.moveFocusTo(e)}moveFocusToNext(o,t=!0){const r=this.dropdownMenuTabbables(t).findIndex((t=>t===o)),e=this.dropdownMenuTabbables(t)[r+1]??this.firstItem(t);this.moveFocusTo(e)}moveFocusTo(o){o&&(o===this.host&&this.button?this.button.focus():"_dsoFocus"in o&&o._dsoFocus())}render(){const o=u();return e(n,{key:"86c4a174ec1a4f8083f6e13728bef4d0fbf73d2b",onFocusout:this.focusOutListener,onKeyDown:this.keyDownHandler},this.label&&e("button",{key:"6b93303a8ee2717870bc52147667485e9f56c0cb",id:o,class:"dso-"+this.variant,type:"button",onClick:()=>this.toggleOptions(),"aria-expanded":""+this.open,"aria-haspopup":"menu",ref:o=>this.button=o},this.label,e("dso-icon",{key:"02d4af678a2de9e68c6c7983279e8a8af1b221d5",icon:this.open?"chevron-up":"chevron-down"})),e("div",{key:"0653885c62d4e5f9e6567cd1a06ef1f60c31bd50",popover:"manual",class:"dso-dropdown-options","aria-labelledby":o,role:"menu",ref:o=>this.popoverElement=o},e("dso-scrollable",{key:"008a6527bce7398d5bf016431c90343011b62596"},e("slot",{key:"cbfdd95cd211485fc8672e9dff1f3bb3ed233d99"}))))}get host(){return this}static get style(){return":host(:focus) {   outline: none; }  :host {   display: inline-block; }  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-primary {   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-primary:focus, button.dso-primary:focus-visible {   outline-offset: 2px; } button.dso-primary:active {   outline: 0; } button.dso-primary.extern::after, button.dso-primary.download::after {   content: \"\";   display: inline-block; } button.dso-primary {   background-color: var(--_dso-button-primary-background-color, #39870c);   border-color: var(--_dso-button-primary-border-color, #39870c);   color: var(--_dso-button-primary-color, #fff);   float: var(--_dso-button-float-primary, 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-primary:hover {   background-color: var(--_dso-button-primary-hover-background-color, #275937);   border-color: var(--_dso-button-primary-hover-border-color, #275937);   color: var(--_dso-button-primary-hover-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary:active {   background-color: var(--_dso-button-primary-active-background-color, #173521);   border-color: var(--_dso-button-primary-active-border-color, #173521);   color: var(--_dso-button-primary-active-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary[disabled], button.dso-primary[disabled]:hover {   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);   color: var(--_dso-button-primary-disabled-color, #fff);   float: var(--_dso-button-float-primary, none); } button.dso-primary.dso-small {   line-height: 1rem; } button.dso-primary.dso-small dso-icon, button.dso-primary.dso-small.extern::after, button.dso-primary.dso-small.download::after, button.dso-primary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   line-height: 1rem; } button.dso-primary.dso-extra-small dso-icon, button.dso-primary.dso-extra-small.extern::after, button.dso-primary.dso-extra-small.download::after, button.dso-primary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-primary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-primary.dso-extra-small {   padding-block: 9px; } button.dso-primary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } button.dso-primary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } button.dso-primary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } button.dso-primary.dso-spinner-left[disabled], button.dso-primary.dso-spinner-right[disabled] {   background-color: #39870c;   border-color: #39870c;   color: #fff; } button.dso-primary.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: %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-primary.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: %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 {   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.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.dso-tertiary:focus, button.dso-tertiary:focus-visible {   outline-offset: 2px; } button.dso-tertiary:active {   outline: 0; } button.dso-tertiary.extern::after, button.dso-tertiary.download::after {   content: \"\";   display: inline-block; } button.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; } button.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); } button.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); } button.dso-tertiary[disabled], button.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); } button.dso-tertiary.dso-small {   line-height: 1rem; } button.dso-tertiary.dso-small dso-icon, button.dso-tertiary.dso-small.extern::after, button.dso-tertiary.dso-small.download::after, button.dso-tertiary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   line-height: 1rem; } button.dso-tertiary.dso-extra-small dso-icon, button.dso-tertiary.dso-extra-small.extern::after, button.dso-tertiary.dso-extra-small.download::after, button.dso-tertiary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } button.dso-tertiary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } button.dso-tertiary.dso-extra-small {   padding-block: 9px; } button.dso-tertiary {   border: 0;   line-height: 1;   padding-inline: 0;   padding-block: var(--_dso-button-padding-block-tertiary, 0);   background-color: transparent; } button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right {   color: #39870c; } button.dso-tertiary:not([disabled]):hover {   text-decoration: underline;   text-underline-position: under; } button.dso-tertiary.dso-align {   line-height: calc(1.5em - 1px);   padding-block: 11px;   padding-inline: 0;   position: relative; } button.dso-tertiary.dso-truncate {   max-inline-size: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } button.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; } button.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; } button.dso-tertiary dso-icon + span:not(.sr-only), button.dso-tertiary span:not(.sr-only) + dso-icon {   margin-inline-start: 4px; } button.dso-tertiary dso-icon, button.dso-tertiary span {   vertical-align: middle; } button dso-icon {   margin-inline-start: 8px; } button:not(.dso-tertiary) dso-icon {   margin-inline-end: 0; }  .dso-dropdown-options {   box-sizing: border-box;   margin: 0 !important;   overflow: unset;   background-clip: padding-box;   background-color: #fff;   border-radius: 4px;   border: 1px solid rgba(0, 0, 0, 0.15);   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);   font-size: 1rem;   min-inline-size: 160px;   inline-size: max-content;   padding: 0;   z-index: 220; }  ::slotted(dso-dropdown-menu-group:not(:last-child)) {   border-block-end: 1px solid #e5e5e5;   margin-block-end: 11px;   padding-block-end: 11px; }"}},[257,"dso-dropdown-menu",{checkable:[6660],label:[513],variant:[513],open:[32],_getState:[64]},[[0,"dsoClick","dsoClickHandler"]]]),g=m,h=function(){"undefined"!=typeof customElements&&["dso-dropdown-menu","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-dropdown-menu":customElements.get(s(o))||customElements.define(s(o),m);break;case"dso-icon":customElements.get(s(o))||p();break;case"dso-scrollable":customElements.get(s(o))||f()}}))};export{g as DsoDropdownMenu,h as defineCustomElement}

package/dist/components/dso-header.js

@@ -1 +1 @@
-import{h as o,proxyCustomElement as i,HTMLElement as e,createEvent as n,forceUpdate as t,Host as s,Fragment as r,transformTag as d}from"@stencil/core/internal/client";import{a as l,c as a,o as h,f as u,d as p}from"./floating-ui.dom.js";import{c}from"./clsx.js";import{t as m}from"./index.esm.js";import{g as b}from"./get-active-element.js";import{i as f}from"./i18n.js";import{i as g}from"./is-modified-event.js";import{d as v}from"./icon.js";import{d as w}from"./scrollable.js";import{v as x}from"./v4.js";const k={en:{"dso-header":{menu:"Menu",login:"Log in",logout:"Log out",help:"Help",overflowMenu:"More"}},nl:{"dso-header":{menu:"Menu",login:"Inloggen",logout:"Uitloggen",help:"Help",overflowMenu:"Meer",userHome:"Mijn Omgevingsloket"}}},y=({item:i,onClick:e,key:n,ref:t})=>o("li",{class:c({"dso-active":i.active}),key:n,ref:t},o("a",{href:i.url,"aria-current":i.active?"page":void 0,onClick:e},i.label)),C=i(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoHeaderClick=n(this,"dsoHeaderClick",7),this.mainMenu=[],this.compact="auto",this.authStatus="none",this.showHelp=!1,this.userHomeActive=!1,this.visibleMenuItemsCount=void 0,this.dropdownOptionsOffset=0,this.open=!1,this.escape=()=>{this.dropdownButtonElement?.focus(),this.toggleOptions()},this.keyDownHandler=o=>{if(!o.defaultPrevented&&this.open){switch(o.key){case"Tab":this.tabInPopup(this.tabbables(!0),o.shiftKey?-1:1);break;case"ArrowDown":this.tabInPopup(this.tabbables(!1),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(!1),-1);break;case"Escape":this.escape();break;case" ":o.target instanceof e&&o.target.click();break;default:return}o.preventDefault()}},this.resetVisibleMenuItems=()=>{this.visibleMenuItemsCount=void 0},this.clickHandler=(o,i,e)=>{this.toggleOptions(!1),this.dsoHeaderClick.emit({originalEvent:o,isModifiedEvent:g(o),type:i,menuItem:e?.menuItem,url:e?.url??e?.menuItem?.url})},this.menuItemElementRefs=[],this.text=f((()=>this.host),k),this.flushResize=()=>{this.resizeFrameId=void 0,this.host.isConnected&&(this.resetVisibleMenuItems(),this.toggleOptions(!1),this.dropdownOptionsOffset=0,t(this.host))},this.scheduleResize=()=>{void 0===this.resizeFrameId&&(this.resizeFrameId=requestAnimationFrame(this.flushResize))},this.resizeObserver=new ResizeObserver((()=>{this.scheduleResize()})),this.focusOutListener=o=>{!this.open||o.relatedTarget instanceof e&&this.tabbables(!0).includes(o.relatedTarget)||this.toggleOptions(!1)}}mainMenuChanged(){this.resetVisibleMenuItems()}tabInPopup(o,i){let e=o.findIndex((o=>o===b()))+i;e>=o.length?e=0:e<0&&(e=o.length-1),o[e]?.focus()}get isCompact(){return"always"===this.compact||window.innerWidth<992}calculateOverflowMenuItemCount(o){const i=o.offsetWidth,e=this.menuItemElementRefs[this.menuItemElementRefs.length-1],n=this.userHomeMenuItemElementRef??e,t=this.dropdownMenuItemElementRef;if(!n||!t||!e)return this.menuItemElementRefs.length;const s=t.offsetLeft+t.offsetWidth-(e.offsetLeft+e.offsetWidth);if(n.offsetLeft+n.offsetWidth-s<=i)return this.menuItemElementRefs.length;const r=i-s-(this.userHomeMenuItemElementRef?this.userHomeMenuItemElementRef.offsetLeft+this.userHomeMenuItemElementRef.offsetWidth-(t.offsetLeft+t.offsetWidth):0),d=this.menuItemElementRefs.findIndex((o=>o&&o.offsetLeft+o.offsetWidth>r));return d<0?this.menuItemElementRefs.length:d}calculateDropdownOptionsOffset(){return this.dropdownElement?this.host.clientHeight-(this.dropdownElement?.getBoundingClientRect().bottom-this.host.getBoundingClientRect().top):0}get visibleMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(0,this.visibleMenuItemsCount):this.mainMenu}get hiddenMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(this.visibleMenuItemsCount):[]}connectedCallback(){this.resizeObserver.observe(this.host)}disconnectedCallback(){this.resizeObserver.disconnect(),void 0!==this.resizeFrameId&&(cancelAnimationFrame(this.resizeFrameId),this.resizeFrameId=void 0),this.toggleOptions(!1)}componentDidRender(){if(this.host.isConnected&&(this.isCompact&&this.dropdownElement&&(this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()),void 0===this.visibleMenuItemsCount&&this.navElement&&(this.visibleMenuItemsCount=this.calculateOverflowMenuItemCount(this.navElement)),this.popoverElement&&!this.cleanUp&&this.dropdownButtonElement)){const o=this.popoverElement;this.cleanUp=l(this.dropdownButtonElement,o,(()=>{this.dropdownButtonElement&&a(this.dropdownButtonElement,o,{strategy:"fixed",middleware:[h(this.dropdownOptionsOffset),u({padding:this.dropdownOptionsOffset}),p({apply({availableHeight:o,availableWidth:i,elements:e}){const n=e.floating.querySelector(".dropdown-menu-options")??e.floating;Object.assign(n.style,{maxHeight:o+"px",maxInlineSize:i+"px"})}})],placement:this.isCompact?"bottom-end":"bottom-start"}).then((({x:i,y:e})=>{Object.assign(o.style,{left:i+"px",top:e+"px"})}))}))}}render(){return o(s,{key:"bafceec3e7c095cb67f876e8b5ed7a817e7db8c1","is-compact":this.isCompact},o("div",{key:"bd6eaaede73b41374e9b11683c8fd94bf08c32f2",class:"dso-header"},o("div",{key:"20bbba41193597e3b97ef6fbc84f1518c0b47d2a",class:"logo-container"},o("slot",{key:"b78e8f54a29a296ff77f687fe792ae9311e2b44c",name:"logo"})),this.isCompact?this.renderCompact():this.renderNormal()))}tabbables(o){const i=this.dropdownElement?m(this.dropdownElement):[];return o?i:i.filter((o=>o!==this.dropdownButtonElement))}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement?.togglePopover(this.open),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}renderCompact(){return(this.mainMenu.length>0||this.userHomeUrl||"none"!==this.authStatus)&&o("div",{class:"dropdown"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("menu")),o("dso-icon",{icon:"chevron-down"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("dso-scrollable",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",{role:"group"},this.mainMenu.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label}))),this.userHomeUrl&&o("li",{role:"menuitem"},o("a",{href:this.userHomeUrl,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},this.text("userHome"))),this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},o("a",{href:this.userProfileUrl,onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName,o("span",{class:"profile-label"}," - Mijn profiel"))),"loggedOut"===this.authStatus&&o("li",{role:"menuitem"},this.loginUrl?o("a",{href:this.loginUrl,onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},this.logoutUrl?o("a",{href:this.logoutUrl,onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("li",{role:"menuitem"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{type:"button",class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"}))))))))}renderNormal(){return this.menuItemElementRefs=[],o(r,null,o("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("div",{class:"profile"},o("a",{href:this.userProfileUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName)),"loggedOut"===this.authStatus&&o("div",{class:"login"},this.loginUrl?o("a",{href:this.loginUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("div",{class:"logout"},this.logoutUrl?o("a",{href:this.logoutUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("div",{class:"help"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})))),(this.mainMenu.length>0||this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:c("dso-nav","dso-nav-main",{ready:void 0!==this.visibleMenuItemsCount}),ref:o=>this.navElement=o},this.visibleMainMenuItems.map(((i,e)=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label,ref:o=>this.menuItemElementRefs[e]=o}))),(void 0===this.visibleMenuItemsCount||this.hiddenMainMenuItems.length>0)&&o("li",{"aria-hidden":void 0===this.visibleMenuItemsCount,ref:o=>this.dropdownMenuItemElementRef=o,class:"dropdown-menu-item"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("overflowMenu")),o("dso-icon",{icon:"chevron-down",class:"main-menu-item-icon"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("div",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",null,this.hiddenMainMenuItems.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label})))))))),this.userHomeUrl&&o("li",{class:c("menu-user-home",{"dso-active":this.userHomeActive}),ref:o=>this.userHomeMenuItemElementRef=o},o("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":void 0,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},o("dso-icon",{icon:"user-outline",class:"main-menu-item-icon"}),this.text("userHome"))))))}get host(){return this}static get watchers(){return{mainMenu:[{mainMenuChanged:0}]}}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) .dropdown-menu .dropdown-menu-options{inline-size:375px}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset;inline-size:max-content}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}.dropdown-menu button{align-items:center;background-color:transparent;border:0;color:#39870c;display:flex;font-family:Asap, sans-serif;font-size:1rem;font-weight:600;line-height:normal;letter-spacing:inherit;position:relative}.dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0;inset-block-start:50%;transform:translateY(-50%)}.dropdown-menu button:hover,.dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}.dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}.dropdown-menu .dropdown-menu-options{box-sizing:border-box;background-clip:padding-box;background-color:#fff;border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-inline:0;z-index:220}.dropdown-menu .dropdown-menu-options ul{margin:0;padding:0;list-style:none}.dropdown-menu .dropdown-menu-options ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}.dropdown-menu .dropdown-menu-options ul li{list-style:none}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li a:active,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:active{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{clear:both;color:#275937;display:block;font-size:1.25rem;font-weight:400;line-height:1.5;padding:16px;text-decoration:none;white-space:nowrap}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:focus-visible{background-color:#39870c;color:#fff}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:hover:visited,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:hover:visited{color:#275937}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li button:hover{background-color:#fff;text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a:visited,.dropdown-menu .dropdown-menu-options ul li button:visited{color:#fff}.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus):not(:focus-visible),.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus):not(:focus-visible){color:#275937}.dropdown-menu .dropdown-menu-options ul li.dso-active a{font-weight:600}.dropdown-menu .dropdown-menu-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown .dropdown-menu{position:static}.dropdown .dropdown-menu .dropdown-menu-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{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{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main .dropdown-menu .dropdown-menu-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main .dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main .dropdown-menu button:hover,.dso-nav.dso-nav-main .dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main .dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}"}},[257,"dso-header",{mainMenu:[16],compact:[1],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],showHelp:[4,"show-help"],helpUrl:[1,"help-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],userHomeActive:[4,"user-home-active"],visibleMenuItemsCount:[32],dropdownOptionsOffset:[32],open:[32]},void 0,{mainMenu:[{mainMenuChanged:0}]}]),M=C,z=function(){"undefined"!=typeof customElements&&["dso-header","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-header":customElements.get(d(o))||customElements.define(d(o),C);break;case"dso-icon":customElements.get(d(o))||v();break;case"dso-scrollable":customElements.get(d(o))||w()}}))};export{M as DsoHeader,z as defineCustomElement}
+import{h as o,proxyCustomElement as i,HTMLElement as e,createEvent as n,forceUpdate as t,Host as s,Fragment as r,transformTag as d}from"@stencil/core/internal/client";import{a,c as l,o as h,f as u,d as p}from"./floating-ui.dom.js";import{c as m}from"./clsx.js";import{t as c}from"./index.esm.js";import{g as b}from"./get-active-element.js";import{i as f}from"./i18n.js";import{i as v}from"./is-modified-event.js";import{d as g}from"./icon.js";import{d as w}from"./scrollable.js";import{v as x}from"./v4.js";const k={en:{"dso-header":{menu:"Menu",login:"Log in",logout:"Log out",help:"Help",overflowMenu:"More"}},nl:{"dso-header":{menu:"Menu",login:"Inloggen",logout:"Uitloggen",help:"Help",overflowMenu:"Meer",userHome:"Mijn Omgevingsloket"}}},y=({item:i,onClick:e,key:n,ref:t})=>o("li",{class:m({"dso-active":i.active}),key:n,ref:t},o("a",{href:i.url,"aria-current":i.active?"page":void 0,onClick:e},i.label)),C=i(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoHeaderClick=n(this,"dsoHeaderClick",7),this.mainMenu=[],this.compact="auto",this.authStatus="none",this.showHelp=!1,this.userHomeActive=!1,this.visibleMenuItemsCount=void 0,this.dropdownOptionsOffset=0,this.open=!1,this.escape=()=>{this.dropdownButtonElement?.focus(),this.toggleOptions()},this.keyDownHandler=o=>{if(!o.defaultPrevented&&this.open){switch(o.key){case"Tab":this.tabInPopup(this.tabbables(!0),o.shiftKey?-1:1);break;case"ArrowDown":this.tabInPopup(this.tabbables(!1),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(!1),-1);break;case"Escape":this.escape();break;case" ":o.target instanceof e&&o.target.click();break;default:return}o.preventDefault()}},this.resetVisibleMenuItems=()=>{this.visibleMenuItemsCount=void 0},this.clickHandler=(o,i,e)=>{this.toggleOptions(!1),this.dsoHeaderClick.emit({originalEvent:o,isModifiedEvent:v(o),type:i,menuItem:e?.menuItem,url:e?.url??e?.menuItem?.url})},this.menuItemElementRefs=[],this.text=f((()=>this.host),k),this.flushResize=()=>{this.resizeFrameId=void 0,this.host.isConnected&&(this.resetVisibleMenuItems(),this.toggleOptions(!1),this.dropdownOptionsOffset=0,t(this.host))},this.scheduleResize=()=>{void 0===this.resizeFrameId&&(this.resizeFrameId=requestAnimationFrame(this.flushResize))},this.resizeObserver=new ResizeObserver((()=>{this.scheduleResize()})),this.focusOutListener=o=>{!this.open||o.relatedTarget instanceof e&&this.tabbables(!0).includes(o.relatedTarget)||this.toggleOptions(!1)}}mainMenuChanged(){this.resetVisibleMenuItems()}tabInPopup(o,i){let e=o.findIndex((o=>o===b()))+i;e>=o.length?e=0:e<0&&(e=o.length-1),o[e]?.focus()}get isCompact(){return"always"===this.compact||window.innerWidth<992}calculateOverflowMenuItemCount(o){const i=o.offsetWidth,e=this.menuItemElementRefs[this.menuItemElementRefs.length-1],n=this.userHomeMenuItemElementRef??e,t=this.dropdownMenuItemElementRef;if(!n||!t||!e)return this.menuItemElementRefs.length;const s=t.offsetLeft+t.offsetWidth-(e.offsetLeft+e.offsetWidth);if(n.offsetLeft+n.offsetWidth-s<=i)return this.menuItemElementRefs.length;const r=i-s-(this.userHomeMenuItemElementRef?this.userHomeMenuItemElementRef.offsetLeft+this.userHomeMenuItemElementRef.offsetWidth-(t.offsetLeft+t.offsetWidth):0),d=this.menuItemElementRefs.findIndex((o=>o&&o.offsetLeft+o.offsetWidth>r));return d<0?this.menuItemElementRefs.length:d}calculateDropdownOptionsOffset(){return this.dropdownElement?this.host.clientHeight-(this.dropdownElement?.getBoundingClientRect().bottom-this.host.getBoundingClientRect().top):0}get visibleMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(0,this.visibleMenuItemsCount):this.mainMenu}get hiddenMainMenuItems(){return"number"==typeof this.visibleMenuItemsCount?this.mainMenu.slice(this.visibleMenuItemsCount):[]}connectedCallback(){this.resizeObserver.observe(this.host)}disconnectedCallback(){this.resizeObserver.disconnect(),void 0!==this.resizeFrameId&&(cancelAnimationFrame(this.resizeFrameId),this.resizeFrameId=void 0),this.toggleOptions(!1)}componentDidRender(){if(this.host.isConnected&&(this.isCompact&&this.dropdownElement&&(this.dropdownOptionsOffset=this.calculateDropdownOptionsOffset()),void 0===this.visibleMenuItemsCount&&this.navElement&&(this.visibleMenuItemsCount=this.calculateOverflowMenuItemCount(this.navElement)),this.open&&this.popoverElement&&!this.cleanUp&&this.dropdownButtonElement)){const o=this.popoverElement;let i=!0;const e=(i,e)=>{if(o.isConnected){if(this.pendingPopoverConstraints){const i=o.querySelector(".dropdown-menu-options")??o;Object.assign(i.style,{maxHeight:this.pendingPopoverConstraints.availableHeight+"px",maxInlineSize:this.pendingPopoverConstraints.availableWidth+"px"})}Object.assign(o.style,{left:i+"px",top:e+"px"})}},n=a(this.dropdownButtonElement,o,(()=>{this.dropdownButtonElement&&l(this.dropdownButtonElement,o,{strategy:"fixed",middleware:[h(this.dropdownOptionsOffset),u({padding:this.dropdownOptionsOffset}),p({apply:({availableHeight:o,availableWidth:i})=>{this.pendingPopoverConstraints={availableWidth:i,availableHeight:o}}})],placement:this.isCompact?"bottom-end":"bottom-start"}).then((({x:o,y:n})=>{if(i)return i=!1,void e(o,n);void 0!==this.popoverFrameId&&cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=requestAnimationFrame((()=>{this.popoverFrameId=void 0,e(o,n)}))}))}));this.cleanUp=()=>{void 0!==this.popoverFrameId&&(cancelAnimationFrame(this.popoverFrameId),this.popoverFrameId=void 0),n()}}}render(){return o(s,{key:"0ea04cc1432dd27da79f2fecaf342beb4486f99a","is-compact":this.isCompact},o("div",{key:"471e73275bf1d645fbcb83e35dc6bb5612a800ba",class:"dso-header"},o("div",{key:"795356c3f82e93df6ff699db5b36540aaee7e832",class:"logo-container"},o("slot",{key:"9dcdcdf2f5e6292fe31b25915d263e3505047312",name:"logo"})),this.isCompact?this.renderCompact():this.renderNormal()))}tabbables(o){const i=this.dropdownElement?c(this.dropdownElement):[];return o?i:i.filter((o=>o!==this.dropdownButtonElement))}toggleOptions(o){this.open=o??!this.open,this.popoverElement?.isConnected&&this.popoverElement?.togglePopover(this.open),!this.open&&this.cleanUp&&(this.cleanUp(),this.cleanUp=void 0)}renderCompact(){return(this.mainMenu.length>0||this.userHomeUrl||"none"!==this.authStatus)&&o("div",{class:"dropdown"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("menu")),o("dso-icon",{icon:"chevron-down"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("dso-scrollable",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",{role:"group"},this.mainMenu.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label}))),this.userHomeUrl&&o("li",{role:"menuitem"},o("a",{href:this.userHomeUrl,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},this.text("userHome"))),this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},o("a",{href:this.userProfileUrl,onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName,o("span",{class:"profile-label"}," - Mijn profiel"))),"loggedOut"===this.authStatus&&o("li",{role:"menuitem"},this.loginUrl?o("a",{href:this.loginUrl,onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("li",{role:"menuitem"},this.logoutUrl?o("a",{href:this.logoutUrl,onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("li",{role:"menuitem"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{type:"button",class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"}))))))))}renderNormal(){return this.menuItemElementRefs=[],o(r,null,o("div",{class:"dso-header-session"},this.userProfileUrl&&this.userProfileName&&"loggedIn"===this.authStatus&&o("div",{class:"profile"},o("a",{href:this.userProfileUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"profile",{url:this.userProfileUrl})},this.userProfileName)),"loggedOut"===this.authStatus&&o("div",{class:"login"},this.loginUrl?o("a",{href:this.loginUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"login",{url:this.loginUrl})},this.text("login")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"login")},this.text("login"))),"loggedIn"===this.authStatus&&o("div",{class:"logout"},this.logoutUrl?o("a",{href:this.logoutUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"logout",{url:this.logoutUrl})},this.text("logout")):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"logout")},this.text("logout"))),this.showHelp&&o("div",{class:"help"},this.helpUrl?o("a",{href:this.helpUrl,class:"dso-tertiary",onClick:o=>this.clickHandler(o,"help",{url:this.helpUrl})},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})):o("button",{class:"dso-tertiary",type:"button",onClick:o=>this.clickHandler(o,"help")},o("span",null,this.text("help")),o("dso-icon",{icon:"help-outline"})))),(this.mainMenu.length>0||this.userHomeUrl)&&o("nav",{class:"dso-navbar"},o("ul",{class:m("dso-nav","dso-nav-main",{ready:void 0!==this.visibleMenuItemsCount}),ref:o=>this.navElement=o},this.visibleMainMenuItems.map(((i,e)=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label,ref:o=>this.menuItemElementRefs[e]=o}))),(void 0===this.visibleMenuItemsCount||this.hiddenMainMenuItems.length>0)&&o("li",{"aria-hidden":void 0===this.visibleMenuItemsCount,ref:o=>this.dropdownMenuItemElementRef=o,class:"dropdown-menu-item"},o("div",{class:"dropdown-menu",onFocusout:this.focusOutListener,ref:o=>this.dropdownElement=o},o("button",{id:x(),type:"button",onClick:()=>this.toggleOptions(),ref:o=>this.dropdownButtonElement=o,"aria-haspopup":"menu","aria-expanded":this.open?"true":"false"},o("span",null,this.text("overflowMenu")),o("dso-icon",{icon:"chevron-down",class:"main-menu-item-icon"})),o("div",{popover:"manual",ref:o=>this.popoverElement=o},o("div",{class:"dropdown-menu-options",role:"menu","aria-labelledby":this.dropdownButtonElement?.id,onKeyDown:this.keyDownHandler},o("ul",null,this.hiddenMainMenuItems.map((i=>o(y,{item:i,onClick:o=>this.clickHandler(o,"menuItem",{menuItem:i}),key:i.label})))))))),this.userHomeUrl&&o("li",{class:m("menu-user-home",{"dso-active":this.userHomeActive}),ref:o=>this.userHomeMenuItemElementRef=o},o("a",{href:this.userHomeUrl,"aria-current":this.userHomeActive?"page":void 0,onClick:o=>this.clickHandler(o,"userHome",{url:this.userHomeUrl})},o("dso-icon",{icon:"user-outline",class:"main-menu-item-icon"}),this.text("userHome"))))))}get host(){return this}static get watchers(){return{mainMenu:[{mainMenuChanged:0}]}}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-compact]) ::slotted([slot=logo]){--_dso-logo-block-size:2.5rem !important}:host([is-compact]) .dso-header{flex-wrap:nowrap}:host([is-compact]) .dropdown-menu .dropdown-menu-options{inline-size:100%}:host(:not([is-compact])) .dso-header{align-items:center}:host(:not([is-compact])) .dropdown-menu .dropdown-menu-options{inline-size:375px}div[popover]{margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset;inline-size:max-content}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;cursor:pointer;border:0;background-color:transparent;padding-inline:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile+.logout,.dso-header-session .logout+.help,.dso-header-session .login+.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%;max-inline-size:100%;position:relative}.dropdown-menu button{align-items:center;background-color:transparent;border:0;color:#39870c;display:flex;font-family:Asap, sans-serif;font-size:1rem;font-weight:600;line-height:normal;letter-spacing:inherit;position:relative}.dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0;inset-block-start:50%;transform:translateY(-50%)}.dropdown-menu button:hover,.dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}.dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}.dropdown-menu .dropdown-menu-options{box-sizing:border-box;background-clip:padding-box;background-color:#fff;border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-inline:0;z-index:220}.dropdown-menu .dropdown-menu-options ul{margin:0;padding:0;list-style:none}.dropdown-menu .dropdown-menu-options ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}.dropdown-menu .dropdown-menu-options ul li{list-style:none}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li a:active,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:active{text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a,.dropdown-menu .dropdown-menu-options ul li button{clear:both;color:#275937;display:block;font-size:1.25rem;font-weight:400;line-height:1.5;padding:16px;text-decoration:none;white-space:nowrap}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:focus,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}.dropdown-menu .dropdown-menu-options ul li a:focus-visible,.dropdown-menu .dropdown-menu-options ul li button:focus-visible{background-color:#39870c;color:#fff}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li a:hover:visited,.dropdown-menu .dropdown-menu-options ul li button:hover,.dropdown-menu .dropdown-menu-options ul li button:hover:visited{color:#275937}.dropdown-menu .dropdown-menu-options ul li a:hover,.dropdown-menu .dropdown-menu-options ul li button:hover{background-color:#fff;text-decoration:underline}.dropdown-menu .dropdown-menu-options ul li a:visited,.dropdown-menu .dropdown-menu-options ul li button:visited{color:#fff}.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus):not(:focus-visible),.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus):not(:focus-visible){color:#275937}.dropdown-menu .dropdown-menu-options ul li.dso-active a{font-weight:600}.dropdown-menu .dropdown-menu-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown .dropdown-menu{position:static}.dropdown .dropdown-menu .dropdown-menu-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dso-nav.ready .menu-user-home{margin-inline-start:auto}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{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{text-decoration:underline}.dso-nav.dso-nav-main>li>a{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main .dropdown-menu .dropdown-menu-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main .dropdown-menu button{font-size:1.25em;line-height:1;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main .dropdown-menu button:hover,.dso-nav.dso-nav-main .dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main .dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .main-menu-item-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}.dso-nav .dropdown-menu-item .main-menu-item-icon{margin-inline-end:0}"}},[257,"dso-header",{mainMenu:[16],compact:[1],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],showHelp:[4,"show-help"],helpUrl:[1,"help-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],userHomeActive:[4,"user-home-active"],visibleMenuItemsCount:[32],dropdownOptionsOffset:[32],open:[32]},void 0,{mainMenu:[{mainMenuChanged:0}]}]),M=C,z=function(){"undefined"!=typeof customElements&&["dso-header","dso-icon","dso-scrollable"].forEach((o=>{switch(o){case"dso-header":customElements.get(d(o))||customElements.define(d(o),C);break;case"dso-icon":customElements.get(d(o))||g();break;case"dso-scrollable":customElements.get(d(o))||w()}}))};export{M as DsoHeader,z as defineCustomElement}

package/dist/components/dso-highlight-box.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as r,h as t,Host as n,transformTag as e}from"@stencil/core/internal/client";const i=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow()}render(){const o=this.step||!!this.element.querySelector("[slot=icon]");return t(n,{key:"3293b12fe82396580186ef78dee0165063fa1a04","has-counter":o},o&&t("div",{key:"b8c864d67fcd3ea0d84a2037648ca72ce47103c4",class:"dso-step-counter","aria-hidden":"true"},this.step??t("slot",{key:"df482099bbb3e4b303238c36d2afcde6dfa6bba4",name:"icon"})),t("slot",{key:"a68efd769d984c6d936d4b0db53d7532ed648b35"}))}get element(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;inset-inline-start:16px;position:absolute;inset-block-start:-1.5rem;block-size:2rem;inline-size:2rem;color:#fff;font-size:1.25rem;font-weight:500;line-height:2rem;text-align:center}:host{display:block;container-type:inline-size;position:relative;z-index:1;margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--_dso-highlight-box-block-size, unset);min-block-size:var(--_dso-highlight-box-min-block-size, unset);--_dso-link-list-margin-block-end:0;--_dso-rich-content-margin-block-start:0}:host([has-counter]){block-size:var(--_dso-highlight-box-counter-block-size, unset);margin-block-start:48px;padding-block-start:2.5rem;position:relative}:host(:not([has-counter])){block-size:var(--_dso-highlight-box-nocounter-block-size, unset)}:host(:not([white],[yellow],[border],[green])){--_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}:host([grey]){--_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}:host([white]){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}:host([yellow]){--_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:#f8f6cc;color:#191919}:host([green]){--_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:#ebf3e6;color:#191919}:host([drop-shadow]){box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}:host([border]){border:1px solid #ccc;padding:15px}:host([border]:not([grey],[yellow])){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}::slotted([slot=icon]){margin-block-start:0.25rem}::slotted(img.dso-highlight-box-banner){aspect-ratio:2.38/1;margin-inline-start:-16px;margin-inline-end:-16px;margin-block-start:-16px;margin-block-end:8px;object-fit:cover;inline-size:calc(100% + 32px);max-inline-size:unset !important}@container (min-width: 360px) and (max-width: 470px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3/1}}@container (min-width: 471px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3.5/1}}::slotted(:last-child){margin-block-end:0 !important}"}},[257,"dso-highlight-box",{yellow:[516],border:[516],white:[516],green:[516],dropShadow:[516,"drop-shadow"],step:[514]}]),d=i,c=function(){"undefined"!=typeof customElements&&["dso-highlight-box"].forEach((o=>{"dso-highlight-box"===o&&(customElements.get(e(o))||customElements.define(e(o),i))}))};export{d as DsoHighlightBox,c as defineCustomElement}
+import{proxyCustomElement as o,HTMLElement as r,h as t,Host as e,transformTag as n}from"@stencil/core/internal/client";const i=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow()}render(){const o=this.step||!!this.element.querySelector("[slot=icon]");return t(e,{key:"3293b12fe82396580186ef78dee0165063fa1a04","has-counter":o},o&&t("div",{key:"b8c864d67fcd3ea0d84a2037648ca72ce47103c4",class:"dso-step-counter","aria-hidden":"true"},this.step??t("slot",{key:"df482099bbb3e4b303238c36d2afcde6dfa6bba4",name:"icon"})),t("slot",{key:"a68efd769d984c6d936d4b0db53d7532ed648b35"}))}get element(){return this}static get style(){return"*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;inset-inline-start:16px;position:absolute;inset-block-start:-1.5rem;block-size:2rem;inline-size:2rem;color:#fff;font-size:1.25rem;font-weight:500;line-height:2rem;text-align:center}:host{display:block;container-type:inline-size;position:relative;z-index:1;margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--_dso-highlight-box-block-size, unset);min-block-size:var(--_dso-highlight-box-min-block-size, unset);--_dso-link-list-margin-block-end:0;--_dso-rich-content-margin-block-start:0}:host([has-counter]){block-size:var(--_dso-highlight-box-counter-block-size, unset);margin-block-start:48px;padding-block-start:2.5rem;position:relative}:host(:not([has-counter])){block-size:var(--_dso-highlight-box-nocounter-block-size, unset)}:host(:not([white],[yellow],[border],[green])){--_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}:host([grey]){--_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}:host([white]){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}:host([yellow]){--_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:#f8f6cc;color:#191919}:host([green]){--_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:#ebf3e6;color:#191919}:host([drop-shadow]){box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}:host([border]){border:1px solid #ccc;padding:15px}:host([border]:not([grey],[yellow])){--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919}::slotted([slot=icon]){margin-block-start:0.25rem}::slotted(img.dso-highlight-box-banner){--_dso-image-margin-inline:-16px -16px;--_dso-image-margin-block:-16px 8px;aspect-ratio:2.38/1;object-fit:cover;inline-size:calc(100% + 32px);max-inline-size:unset !important}@container (min-width: 360px) and (max-width: 470px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3/1}}@container (min-width: 471px){::slotted(img.dso-highlight-box-banner){aspect-ratio:3.5/1}}::slotted(:last-child){margin-block-end:0 !important}"}},[257,"dso-highlight-box",{yellow:[516],border:[516],white:[516],green:[516],dropShadow:[516,"drop-shadow"],step:[514]}]),d=i,c=function(){"undefined"!=typeof customElements&&["dso-highlight-box"].forEach((o=>{"dso-highlight-box"===o&&(customElements.get(n(o))||customElements.define(n(o),i))}))};export{d as DsoHighlightBox,c as defineCustomElement}

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

@@ -1 +1 @@
-import{h as e,Fragment as t,proxyCustomElement as o,HTMLElement as s,createEvent as i,transformTag as n}from"@stencil/core/internal/client";import{c as r}from"./clsx.js";import{d as a}from"./icon.js";import{d as c}from"./progress-indicator.js";const l=({owner:o,ancestors:s,item:i,index:n,level:a,setSize:c})=>e("li",{key:i.id,class:r("tree-item",{"has-child":i.hasItems,"is-expanded":!!i.open&&!!i.items?.length}),role:"none"},e("div",{class:"tree-branch-control"},i.hasItems?e("div",{onClick:e=>o.itemClick(e,s,i)},e("dso-icon",{icon:i.open?"minus-square-outline":"plus-square-outline"})):e("dso-icon",null)),e("p",{class:r("tree-content",{active:i.active},{selected:i.selected}),tabindex:1===a&&0===n?0:-1,role:"treeitem","aria-expanded":i.hasItems?""+(!!i.open&&!!i.items?.length):void 0,"aria-current":i.active?"true":void 0,"aria-level":a,"aria-setsize":c,"aria-posinset":n+1,"aria-busy":i.loading?"true":void 0,"data-item-id":i.id,onClick:e=>o.itemClick(e,s,i)},i.selected&&e("span",{class:"sr-only"},"Resultaat: "),i.href?e("a",{href:i.href,tabindex:"-1"},i.label):e("span",null,i.label),i.icons?.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),i.open&&e(t,null,i.hasItems&&!i.items&&i.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},i.items?.map(((t,n,r)=>e(l,{owner:o,ancestors:[...s,i],item:t,index:n,level:a+1,setSize:r.length})))))),d=o(class t extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoOpenItem=i(this,"dsoOpenItem",7),this.dsoCloseItem=i(this,"dsoCloseItem",7),this.dsoClickItem=i(this,"dsoClickItem",7),this.keyDownListener=e=>{if(e.defaultPrevented)return;const o=e.composedPath().find((e=>e instanceof s&&"dso-tree"===e.className));if(e.target instanceof HTMLParagraphElement&&o instanceof s){switch(e.key){case"ArrowDown":t.moveFocus(o,e.target,"next");break;case"ArrowUp":t.moveFocus(o,e.target,"previous");break;case"ArrowRight":t.expandItemOrFocusChild(o,e.target);break;case"ArrowLeft":t.collapseItemOrFocusParent(o,e.target);break;case"End":t.moveFocus(o,e.target,"last");break;case"Home":t.moveFocus(o,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if((e=>1===e.length&&e.match(/\S/))(e.key)&&t.setFocusByFirstCharacter(o,e.target,e.key,e.shiftKey))break;return}e.preventDefault()}},this.itemClick=(e,o,i)=>{if(!(e.target instanceof s))return;const n=e.target.closest(".tree-content");if(n){const r=e.composedPath().find((e=>e instanceof s&&"dso-tree"===e.className));if(!(n instanceof HTMLParagraphElement&&r instanceof s))return;return t.setFocus(r,n),void this.dsoClickItem.emit({path:[...o,i],originalEvent:e})}i.open?this.dsoCloseItem.emit([...o,i]):this.dsoOpenItem.emit([...o,i])}}async focusItem(e){const o=this.tree;if(!o||0===e.length)return!1;const s=e[e.length-1];if(!s)throw Error("No itemToFocus found");const i=Array.from(o.querySelectorAll("p")??[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset.itemId===s.id));return!!i&&(t.setFocus(o,i),!0)}static setFocus(e,t){t&&(Array.from(e.querySelectorAll("p")).filter((e=>0===e.tabIndex)).forEach((e=>e.tabIndex=-1)),t.tabIndex=0,t.focus())}static moveFocus(e,o,s){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let n=0;switch(s){case"first":n=0;break;case"previous":n=i.indexOf(o)-1;break;case"next":n=i.indexOf(o)+1;break;case"last":n=i.length-1}const r=i[n];if(!r)throw Error("No focusableItem found");t.setFocus(e,r)}static expandItemOrFocusChild(e,o){if("true"===o?.getAttribute("aria-expanded"))t.moveFocus(e,o,"next");else{const e=o.previousElementSibling?.firstElementChild;e instanceof s&&e.click()}}static collapseItemOrFocusParent(e,o){if("true"===o?.getAttribute("aria-expanded")){const e=o.previousElementSibling?.firstElementChild;e instanceof s&&e.click()}else{const i=o?.parentElement?.parentElement?.previousElementSibling;i instanceof s&&t.setFocus(e,i)}}static setFocusByFirstCharacter(e,o,s,i){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));i&&n.reverse();const r=n.indexOf(o);s=s.toLowerCase();let a=n.find(((e,t)=>t>r&&e.textContent?.toLowerCase().startsWith(s)));return a||(a=n.find(((e,t)=>t<r&&e.textContent?.toLowerCase().startsWith(s)))),!!a&&(t.setFocus(e,a),!0)}render(){return e("div",{key:"045da3d6b0bc4381b3e439890e7f8db679fc8f9a",id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{key:"de2140f76fd20b0fa2bf85e60a79dede60a62082",role:"tree","aria-label":"Objectenboom"},this.collection?.map(((t,o)=>e(l,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}static get style(){return':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:"";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:"";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-flex;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;vertical-align:text-bottom}*,*::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)}'}},[1,"dso-tree-view",{collection:[16],focusItem:[64]}]),p=d,h=function(){"undefined"!=typeof customElements&&["dso-tree-view","dso-icon","dso-progress-indicator"].forEach((e=>{switch(e){case"dso-tree-view":customElements.get(n(e))||customElements.define(n(e),d);break;case"dso-icon":customElements.get(n(e))||a();break;case"dso-progress-indicator":customElements.get(n(e))||c()}}))};export{p as DsoTreeView,h as defineCustomElement}
+import{h as e,Fragment as t,proxyCustomElement as o,HTMLElement as s,createEvent as i,transformTag as n}from"@stencil/core/internal/client";import{c as r}from"./clsx.js";import{d as a}from"./icon.js";import{d as c}from"./progress-indicator.js";const l=({owner:o,ancestors:s,item:i,index:n,level:a,setSize:c})=>e("li",{key:i.id,class:r("tree-item",{"has-child":i.hasItems,"is-expanded":!!i.open&&!!i.items?.length}),role:"none"},e("div",{class:"tree-branch-control"},i.hasItems?e("div",{onClick:e=>o.itemClick(e,s,i)},e("dso-icon",{icon:i.open?"minus-square-outline":"plus-square-outline"})):e("dso-icon",null)),e("p",{class:r("tree-content",{active:i.active},{selected:i.selected}),tabindex:1===a&&0===n?0:-1,role:"treeitem","aria-expanded":i.hasItems?""+(!!i.open&&!!i.items?.length):void 0,"aria-current":i.active?"true":void 0,"aria-level":a,"aria-setsize":c,"aria-posinset":n+1,"aria-busy":i.loading?"true":void 0,"data-item-id":i.id,onClick:e=>o.itemClick(e,s,i)},i.selected&&e("span",{class:"sr-only"},"Resultaat: "),i.href?e("a",{href:i.href,tabindex:"-1"},i.label):e("span",null,i.label),i.icons?.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),i.open&&e(t,null,i.hasItems&&!i.items&&i.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},i.items?.map(((t,n,r)=>e(l,{owner:o,ancestors:[...s,i],item:t,index:n,level:a+1,setSize:r.length})))))),d=o(class t extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoOpenItem=i(this,"dsoOpenItem",7),this.dsoCloseItem=i(this,"dsoCloseItem",7),this.dsoClickItem=i(this,"dsoClickItem",7),this.keyDownListener=e=>{if(e.defaultPrevented)return;const o=e.composedPath().find((e=>e instanceof s&&"dso-tree"===e.className));if(e.target instanceof HTMLParagraphElement&&o instanceof s){switch(e.key){case"ArrowDown":t.moveFocus(o,e.target,"next");break;case"ArrowUp":t.moveFocus(o,e.target,"previous");break;case"ArrowRight":t.expandItemOrFocusChild(o,e.target);break;case"ArrowLeft":t.collapseItemOrFocusParent(o,e.target);break;case"End":t.moveFocus(o,e.target,"last");break;case"Home":t.moveFocus(o,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if((e=>1===e.length&&e.match(/\S/))(e.key)&&t.setFocusByFirstCharacter(o,e.target,e.key,e.shiftKey))break;return}e.preventDefault()}},this.itemClick=(e,o,i)=>{if(!(e.target instanceof s))return;const n=e.target.closest(".tree-content");if(n){const r=e.composedPath().find((e=>e instanceof s&&"dso-tree"===e.className));if(!(n instanceof HTMLParagraphElement&&r instanceof s))return;return t.setFocus(r,n),void this.dsoClickItem.emit({path:[...o,i],originalEvent:e})}i.open?this.dsoCloseItem.emit([...o,i]):this.dsoOpenItem.emit([...o,i])}}async focusItem(e){const o=this.tree;if(!o||0===e.length)return!1;const s=e[e.length-1];if(!s)throw Error("No itemToFocus found");const i=Array.from(o.querySelectorAll("p")??[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset.itemId===s.id));return!!i&&(t.setFocus(o,i),!0)}static setFocus(e,t){t&&(Array.from(e.querySelectorAll("p")).filter((e=>0===e.tabIndex)).forEach((e=>e.tabIndex=-1)),t.tabIndex=0,t.focus())}static moveFocus(e,o,s){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let n=0;switch(s){case"first":n=0;break;case"previous":n=i.indexOf(o)-1;break;case"next":n=i.indexOf(o)+1;break;case"last":n=i.length-1}const r=i[n];if(!r)throw Error("No focusableItem found");t.setFocus(e,r)}static expandItemOrFocusChild(e,o){if("true"===o?.getAttribute("aria-expanded"))t.moveFocus(e,o,"next");else{const e=o.previousElementSibling?.firstElementChild;e instanceof s&&e.click()}}static collapseItemOrFocusParent(e,o){if("true"===o?.getAttribute("aria-expanded")){const e=o.previousElementSibling?.firstElementChild;e instanceof s&&e.click()}else{const i=o?.parentElement?.parentElement?.previousElementSibling;i instanceof s&&t.setFocus(e,i)}}static setFocusByFirstCharacter(e,o,s,i){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));i&&n.reverse();const r=n.indexOf(o);s=s.toLowerCase();let a=n.find(((e,t)=>t>r&&e.textContent?.toLowerCase().startsWith(s)));return a||(a=n.find(((e,t)=>t<r&&e.textContent?.toLowerCase().startsWith(s)))),!!a&&(t.setFocus(e,a),!0)}render(){return e("div",{key:"283e4d605869d7a654955ffb9bcc3621a477b3af",id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{key:"a664ea7dade4174cccc880169de9d49d8eeb57db",role:"tree","aria-label":"Objectenboom"},this.collection?.map(((t,o)=>e(l,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}static get style(){return':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:"";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:"";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-flex;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;vertical-align:text-bottom}*,*::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)}'}},[1,"dso-tree-view",{collection:[16],focusItem:[64]}]),p=d,h=function(){"undefined"!=typeof customElements&&["dso-tree-view","dso-icon","dso-progress-indicator"].forEach((e=>{switch(e){case"dso-tree-view":customElements.get(n(e))||customElements.define(n(e),d);break;case"dso-icon":customElements.get(n(e))||a();break;case"dso-progress-indicator":customElements.get(n(e))||c()}}))};export{p as DsoTreeView,h as defineCustomElement}

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

@@ -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)},h=({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"}))),b=({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(b,{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(){return e(n,{key:"a59859e8cc19d069face18be0fd014fa48e566ed"},e("slot",{key:"2363b65917013dc198af796952f4b6a248f4b3e1",name:"top-bar"}),e("div",{key:"91eb5741de81c6f81fae358e78bea4d568a06629",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"09ad1c978936db241555c54aa1e22ab7bb888e78",class:"dso-navbar"},e("ul",{key:"616c9ed08160e5809b8952f12b8fc5e020116ca8",class:"dso-nav dso-nav-sub"},r.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:"bd917ab9c254c322df6a29b547841d9c1c89a1e8",tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden: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:"4273395e08a807b1e9c1be69ea94b2eaf3bca0f9",class:"map-area"},e("div",{key:"3fc00a8b39fc387b55303bed4d742acc530cd653",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"b623696c1d90ad1d5d7a44b12a7ef1255bf1828d",name:"map"})),e("slot",{key:"013a763fc6e500a531720dea02d2f55307ebb37f",name:"legend"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&"document"===this.activeTab||this.print)&&e(h,{key:"faeafe5d5044849bc9ca3290b488686606eac9da",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(u,{key:"eb0ae7936cc4029311fb2d93143938424625f20d",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,   :host(:not([print])[document-panel-size=small]) .dso-document-panel {     flex-basis: 375px;     min-inline-size: 0;     max-inline-size: 375px;   } } @media screen and (min-width: 1032px) and (max-width: 375px) {   :host(:not([print])[main-size=small]) .dso-main-panel,   :host(:not([print])[document-panel-size=small]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 0;     transition: none;   } } @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=medium]) .dso-main-panel,   :host(:not([print])[document-panel-size=medium]) .dso-document-panel {     flex-basis: 624px;     min-inline-size: 375px;     max-inline-size: 624px;   } } @media screen and (min-width: 1032px) and (max-width: 624px) {   :host(:not([print])[main-size=medium]) .dso-main-panel,   :host(:not([print])[document-panel-size=medium]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 375px;     transition: none;   } } @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=large]) .dso-main-panel,   :host(:not([print])[document-panel-size=large]) .dso-document-panel {     flex-basis: 60%;     min-inline-size: 768px;     max-inline-size: 1024px;   } } @media screen and (min-width: 1032px) and (max-width: 768px) {   :host(:not([print])[main-size=large]) .dso-main-panel,   :host(:not([print])[document-panel-size=large]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 768px;     transition: none;   } } @media screen and (min-width: 1032px) {   :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}
+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)},h=({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"}))),b=({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(b,{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(){return e(n,{key:"69a7b9d6956d0238f57fc3a7b21a1ecae9aacf78"},e("slot",{key:"b5a9aa2c800972284aafe7667d57da10be909379",name:"top-bar"}),e("div",{key:"96695156177c261841c1ebb4dacb9a488e31624e",class:"viewer-grid-columns"},this.tabView&&e("nav",{key:"db4823b2fab2e27a5e13f6f5d4bb613b82977d16",class:"dso-navbar"},e("ul",{key:"9cd931e9693c96516fd800be0eb5e7df993a4023",class:"dso-nav dso-nav-sub"},r.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:"523b13cf9dd9c67b2930e9494c606af41b572888",tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden: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:"a6d1dba4230967f6e70f00ebe447d7e78bac5f78",class:"map-area"},e("div",{key:"31c3d2288d1c61c9bc5d86d582f921dd9bf6bd74",class:"map",ref:e=>this.mapElement=e},e("slot",{key:"aba536a452d4d59608564a95c6342c3b02af0ddb",name:"map"})),e("slot",{key:"5c486a1a2c691c917a63540ce7cff4e755e1d541",name:"legend"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&"document"===this.activeTab||this.print)&&e(h,{key:"42667326ab4c77b38c7bee479713349e5789d115",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),e(u,{key:"87c1b94862cedda8980d5630c3fa9fdd90ac7eca",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,   :host(:not([print])[document-panel-size=small]) .dso-document-panel {     flex-basis: 375px;     min-inline-size: 0;     max-inline-size: 375px;   } } @media screen and (min-width: 1032px) and (max-width: 375px) {   :host(:not([print])[main-size=small]) .dso-main-panel,   :host(:not([print])[document-panel-size=small]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 0;     transition: none;   } } @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=medium]) .dso-main-panel,   :host(:not([print])[document-panel-size=medium]) .dso-document-panel {     flex-basis: 624px;     min-inline-size: 375px;     max-inline-size: 624px;   } } @media screen and (min-width: 1032px) and (max-width: 624px) {   :host(:not([print])[main-size=medium]) .dso-main-panel,   :host(:not([print])[document-panel-size=medium]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 375px;     transition: none;   } } @media screen and (min-width: 1032px) {   :host(:not([print])[main-size=large]) .dso-main-panel,   :host(:not([print])[document-panel-size=large]) .dso-document-panel {     flex-basis: 60%;     min-inline-size: 768px;     max-inline-size: 1024px;   } } @media screen and (min-width: 1032px) and (max-width: 768px) {   :host(:not([print])[main-size=large]) .dso-main-panel,   :host(:not([print])[document-panel-size=large]) .dso-document-panel {     flex-basis: 100vw;     max-inline-size: 100vw;     min-inline-size: 768px;     transition: none;   } } @media screen and (min-width: 1032px) {   :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}

package/dist/components/dsot-document-component-demo.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as n,h as o,Fragment as r,transformTag as s}from"@stencil/core/internal/client";import{g as i,c as a,d as c}from"./ozon-content.js";import{d as u}from"./alert.js";import{d}from"./annotation-locatie.js";import{d as f}from"./badge.js";import{d as l}from"./document-component.js";import{d as h}from"./icon.js";import{d as m}from"./icon-button.js";import{d as p}from"./image-overlay.js";import{d as b}from"./label.js";import{d as v}from"./modal.js";import{d as g}from"./ozon-content-toggletip.js";import{d as y}from"./panel.js";import{d as j}from"./renvooi.js";import{d as k}from"./responsive-element.js";import{d as C}from"./scrollable.js";import{d as E}from"./slide-toggle.js";import{d as w}from"./table.js";var D,A,O,z,S=i(function(){if(A)return D;A=1;var t=1/0,e=9007199254740991,n=/^\s+|\s+$/g,o=/^[-+]0x[0-9a-f]+$/i,r=/^0b[01]+$/i,s=/^0o[0-7]+$/i,i=/^(?:0|[1-9]\d*)$/,a=parseFloat,c=parseInt,u=Object.prototype.toString,d=Math.floor,f=Math.min,l=Math.random;function h(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function m(e){return e?(e=function(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==u.call(t)}(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var i=r.test(t);return i||s.test(t)?c(t.slice(2),i?2:8):o.test(t)?NaN:+t}(e))===t||e===-1/0?17976931348623157e292*(e<0?-1:1):e==e?e:0:0===e?e:0}return D=function(t,n,o){if(o&&"boolean"!=typeof o&&function(t,n,o){if(!h(o))return!1;var r=typeof n;return!!("number"==r?function(t){return null!=t&&function(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=e}(t.length)&&!function(t){var e=h(t)?u.call(t):"";return"[object Function]"==e||"[object GeneratorFunction]"==e}(t)}(o)&&function(t,n){return!!(n=null==n?e:n)&&("number"==typeof t||i.test(t))&&t>-1&&t%1==0&&t<n}(n,o.length):"string"==r&&n in o)&&function(t,e){return t===e||t!=t&&e!=e}(o[n],t)}(t,n,o)&&(n=o=void 0),void 0===o&&("boolean"==typeof n?(o=n,n=void 0):"boolean"==typeof t&&(o=t,t=void 0)),void 0===t&&void 0===n?(t=0,n=1):(t=m(t),void 0===n?(n=t,t=0):n=m(n)),t>n){var r=t;t=n,n=r}if(o||t%1||n%1){var s=l();return f(t+s*(n-t+a("1e-"+((s+"").length-1))),n)}return function(t,e){return t+d(l()*(e-t+1))}(t,n)}}()),T=i(function(){if(z)return O;z=1;var t=1/0,e=9007199254740991,n="[object Map]",o="[object Promise]",r="[object Set]",s="[object WeakMap]",i="[object DataView]",c=/^\s+|\s+$/g,u=/^[-+]0x[0-9a-f]+$/i,d=/^0b[01]+$/i,f=/^\[object .+?Constructor\]$/,l=/^0o[0-7]+$/i,h=/^(?:0|[1-9]\d*)$/,m="\\ud800-\\udfff",p="\\u0300-\\u036f\\ufe20-\\ufe23",b="\\u20d0-\\u20f0",v="\\ufe0e\\ufe0f",g="["+m+"]",y="["+p+b+"]",j="\\ud83c[\\udffb-\\udfff]",k="[^"+m+"]",C="(?:\\ud83c[\\udde6-\\uddff]){2}",E="[\\ud800-\\udbff][\\udc00-\\udfff]",w="\\u200d",D="(?:"+y+"|"+j+")?",A="["+v+"]?",S=A+D+"(?:"+w+"(?:"+[k,C,E].join("|")+")"+A+D+")*",T=RegExp(j+"(?="+j+")|(?:"+[k+y+"?",y,C,E,g].join("|")+")"+S,"g"),$=RegExp("["+w+m+p+b+v+"]"),F=parseInt,I="object"==typeof self&&self&&self.Object===Object&&self,x="object"==typeof a&&a&&a.Object===Object&&a||I||Function("return this")();function M(t){var e=-1,n=Array(t.size);return t.forEach((function(t,o){n[++e]=[o,t]})),n}function N(t){var e=-1,n=Array(t.size);return t.forEach((function(t){n[++e]=t})),n}var R=Function.prototype,W=Object.prototype,B=x["__core-js_shared__"],L=function(){var t=/[^.]+$/.exec(B&&B.keys&&B.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),V=R.toString,K=W.hasOwnProperty,P=W.toString,G=RegExp("^"+V.call(K).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),U=x.Symbol,H=U?U.iterator:void 0,_=W.propertyIsEnumerable,q=Math.floor,J=function(t,e){return function(n){return t(e(n))}}(Object.keys,Object),Q=Math.random,X=ct(x,"DataView"),Y=ct(x,"Map"),Z=ct(x,"Promise"),tt=ct(x,"Set"),et=ct(x,"WeakMap"),nt=ft(X),ot=ft(Y),rt=ft(Z),st=ft(tt),it=ft(et);function at(t,e){return t+q(Q()*(e-t+1))}function ct(t,e){var n=function(t,e){return null==t?void 0:t[e]}(t,e);return function(t){if(!pt(t)||function(t){return!!L&&L in t}(t))return!1;var e=mt(t)||function(t){var e=!1;if(null!=t&&"function"!=typeof t.toString)try{e=!!(t+"")}catch(t){}return e}(t)?G:f;return e.test(ft(t))}(n)?n:void 0}var ut=function(t){return P.call(t)};function dt(t,n){return!!(n=null==n?e:n)&&("number"==typeof t||h.test(t))&&t>-1&&t%1==0&&t<n}function ft(t){if(null!=t){try{return V.call(t)}catch(t){}try{return t+""}catch(t){}}return""}(X&&ut(new X(new ArrayBuffer(1)))!=i||Y&&ut(new Y)!=n||Z&&ut(Z.resolve())!=o||tt&&ut(new tt)!=r||et&&ut(new et)!=s)&&(ut=function(t){var e=P.call(t),a="[object Object]"==e?t.constructor:void 0,c=a?ft(a):void 0;if(c)switch(c){case nt:return i;case ot:return n;case rt:return o;case st:return r;case it:return s}return e});var lt=Array.isArray;function ht(t){return null!=t&&function(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=e}(t.length)&&!mt(t)}function mt(t){var e=pt(t)?P.call(t):"";return"[object Function]"==e||"[object GeneratorFunction]"==e}function pt(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function bt(t){return!!t&&"object"==typeof t}function vt(t){return t?function(t,e){return function(t,e){for(var n=-1,o=t?t.length:0,r=Array(o);++n<o;)r[n]=e(t[n]);return r}(e,(function(e){return t[e]}))}(t,function(t){return ht(t)?function(t){var e=lt(t)||function(t){return function(t){return bt(t)&&ht(t)}(t)&&K.call(t,"callee")&&(!_.call(t,"callee")||"[object Arguments]"==P.call(t))}(t)?function(t,e){for(var n=-1,o=Array(t);++n<t;)o[n]=e(n);return o}(t.length,String):[],n=e.length,o=!!n;for(var r in t)!K.call(t,r)||o&&("length"==r||dt(r,n))||e.push(r);return e}(t):function(t){if(!function(t){var e=t&&t.constructor;return t===("function"==typeof e&&e.prototype||W)}(t))return J(t);var e=[];for(var n in Object(t))K.call(t,n)&&"constructor"!=n&&e.push(n);return e}(t)}(t)):[]}return O=function(e,o,s){var i=-1,a=function(t){if(!t)return[];if(ht(t))return function(t){return"string"==typeof t||!lt(t)&&bt(t)&&"[object String]"==P.call(t)}(t)?function(t){return function(t){return $.test(t)}(t)?function(t){return t.match(T)||[]}(t):function(t){return t.split("")}(t)}(t):function(t,e){var n=-1,o=t.length;for(e||(e=Array(o));++n<o;)e[n]=t[n];return e}(t);if(H&&t[H])return function(t){for(var e,n=[];!(e=t.next()).done;)n.push(e.value);return n}(t[H]());var e=ut(t);return(e==n?M:e==r?N:vt)(t)}(e),f=a.length,h=f-1;for(o=(s?function(t,e,n){if(!pt(n))return!1;var o=typeof e;return!!("number"==o?ht(n)&&dt(e,n.length):"string"==o&&e in n)&&function(t,e){return t===e||t!=t&&e!=e}(n[e],t)}(e,o,s):void 0===o)?1:function(t,e,n){return t==t&&(void 0!==n&&(t=t<=n?t:n),t=t>=0?t:0),t}(function(e){var n=function(e){return e?(e=function(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||bt(t)&&"[object Symbol]"==P.call(t)}(t))return NaN;if(pt(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=pt(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(c,"");var n=d.test(t);return n||l.test(t)?F(t.slice(2),n?2:8):u.test(t)?NaN:+t}(e))===t||e===-1/0?17976931348623157e292*(e<0?-1:1):e==e?e:0:0===e?e:0}(e),o=n%1;return n==n?o?n-o:n:0}(o),0,f);++i<o;){var m=at(i,h),p=a[m];a[m]=a[i],a[i]=p}return a.length=o,a}}());const $=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.dsotOzonContentClick=n(this,"dsotOzonContentClick",7),this.dsotTableOfContentsClick=n(this,"dsotTableOfContentsClick",3),this.showCanvas=!1,this.showBesluitversie=!1,this.openDefault=!1,this.mode="document",this.openOrClosed=[],this.openedAnnotation=[],this.filtered=[],this.notApplicable=[],this.activeAnnotationSelectables=[],this.handleRecursiveToggle=(t,e)=>{const n=this.getEmbeddedDocumentComponents(t);if(n)for(const t of n.documentComponents)this.handleOpenToggle(t,e.next)},this.DocumentComponent=({path:t})=>{const e=t.at(-1);if(!e||"table-of-contents"===this.mode&&"LID"===e.type)return o(r,null);const{DocumentComponent:n}=this,s=this.getEmbeddedDocumentComponents(e);let i,a,c,u,d;return this.hasNestedDraft(e)&&(this.showBesluitversie?(i="B",a="primary",c="Dit is een besluitversie."):(i="!",a="warning",c="Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.")),e.bevatOntwerpInformatie&&(this.showBesluitversie?(u="Besluitversie",d="primary"):(u="Ontwerp",d="warning")),o("dso-document-component",{annotated:this.isAnnotated(e),filtered:this.isOpen(e)?this.isFiltered(e):this.hasFilteredChildren(e),gereserveerd:e.gereserveerd,heading:"h2",kop:e.kop,inhoud:e.inhoud,openAnnotation:this.isOpenedAnnotation(e),notApplicable:this.isNotApplicable(e)||t.some((t=>this.isNotApplicable(t))),onDsoAnnotationToggle:t=>this.handleAnnotationToggle(e,t.detail),onDsoOpenToggle:()=>this.handleOpenToggle(e),open:this.isOpen(e),type:e.type,vervallen:e.vervallen,wijzigactie:e.wijzigactie,recursiveToggle:this.recursiveToggleState(e),onDsoRecursiveToggle:t=>this.handleRecursiveToggle(e,t.detail),mode:this.mode,href:"table-of-contents"===this.mode?"/document/"+e.documentTechnischId:void 0,onDsoTableOfContentsClick:t=>this.handleTableOfContentsClick(t),onDsoOzonContentClick:t=>this.handleOzonContentClick(t),ozonContentUrlResolver:this.ozonContentUrlResolver,ozonContentBegripResolver:this.ozonContentBegripResolver,badge:i,badgeStatus:a,badgeTooltip:c,label:u,labelStatus:d},this.isOpenedAnnotation(e)&&o("div",{slot:"annotations"},o("dso-annotation-locatie",{active:this.isCheckedSlideToggle(e),"gewijzigde-locatie":!0,locatieNoemer:"Winkelgebied",onDsoActiveChange:()=>this.handleSelectableChange(e)},o("span",{class:"symboolcode",slot:"symbool","data-symboolcode":"vszt030"}))),this.showContent(e)&&s?.documentComponents.length&&o("ul",{class:"dso-document-component-list"},s.documentComponents.map((e=>o("li",{key:e.documentTechnischId},o(n,{path:[...t,e]}))))))},this.MenuButton=({documentComponent:t})=>{const{type:e}=t;return o("button",{type:"button",onClick:()=>this.document=t},o("span",null,o("i",null,e)))}}async jsonFileWatcher(){this.openOrClosed=[],await this.loadData()}async openDefaultWatcher(){this.openOrClosed=[],await this.loadData()}async componentDidLoad(){await this.loadData()}getEmbeddedDocumentComponents(t){return t?._embedded?.ontwerpDocumentComponenten?{documentComponents:t._embedded.ontwerpDocumentComponenten,ontwerp:!0}:t?._embedded?.documentComponenten?{documentComponents:t._embedded.documentComponenten,ontwerp:!1}:void 0}concatEmbeddedDocumentComponents(t){const e=[...this.getEmbeddedDocumentComponents(t)?.documentComponents??[]];for(const t of e)e.push(...this.concatEmbeddedDocumentComponents(t));return e}selectRandomDocumentComponents(t,e=[]){const n=this.concatEmbeddedDocumentComponents(t).filter((t=>!e.includes(t))),o=S(0,Math.floor(n.length/10));return T(n,o)}async loadData(){if(!this.jsonFile)return this.response=void 0,void(this.document=void 0);this.response=await fetch(this.jsonFile).then((t=>t.json())),this.document=this.getEmbeddedDocumentComponents(this.response)?.documentComponents[0],"LICHAAM"===this.document?.type?(this.notApplicable=this.selectRandomDocumentComponents(this.document),this.filtered=this.selectRandomDocumentComponents(this.document,this.notApplicable)):(this.notApplicable=[],this.filtered=[])}handleOpenToggle(t,e){const n="boolean"==typeof e?e:this.openOrClosed.includes(t);n&&this.openOrClosed.includes(t)?this.openOrClosed=this.openOrClosed.filter((e=>e!==t)):n||this.openOrClosed.includes(t)||(this.openOrClosed=[...this.openOrClosed,t])}handleAnnotationToggle(t,e){this.openedAnnotation=this.isOpenedAnnotation(t)&&!e.next?this.openedAnnotation.filter((e=>e!==t)):[...this.openedAnnotation,t],this.isOpen(t)||(this.openOrClosed=[...this.openOrClosed,t])}handleSelectableChange(t){this.activeAnnotationSelectables=this.isCheckedSlideToggle(t)?this.activeAnnotationSelectables.filter((e=>e!==t)):[...this.activeAnnotationSelectables,t]}handleOzonContentClick(t){this.dsotOzonContentClick.emit(t.detail)}handleTableOfContentsClick(t){this.dsotTableOfContentsClick.emit(t.detail)}isCheckedSlideToggle(t){return this.activeAnnotationSelectables.includes(t)}hasFilteredChildren(t){return this.filtered.includes(t)||(this.getEmbeddedDocumentComponents(t)?.documentComponents.some((t=>this.hasFilteredChildren(t)))??!1)}isOpen(t){return"LID"===t.type||this.openDefault?!this.openOrClosed.includes(t):this.openOrClosed.includes(t)}isOpenedAnnotation(t){return this.openedAnnotation.includes(t)}isFiltered(t){return this.filtered.includes(t)}isNotApplicable(t){return this.notApplicable.includes(t)}hasNestedDraft(t){return this.getEmbeddedDocumentComponents(t)?.documentComponents.some((t=>!!t.bevatOntwerpInformatie||this.hasNestedDraft(t)))??!1}showContent(t){return this.isOpen(t)&&!(!this.getEmbeddedDocumentComponents(t)?.documentComponents.length&&!t.inhoud)}recursiveToggleState(t){const e=this.getEmbeddedDocumentComponents(t);if(e&&!(e.documentComponents.length<=1)&&e.documentComponents.some((t=>"ARTIKEL"===t.type)))return e.documentComponents.every((t=>this.isOpen(t)))}isAnnotated(t){return"DIVISIE"===t.type||"DIVISIETEKST"===t.type||"ARTIKEL"===t.type||"LID"===t.type}render(){const{DocumentComponent:t,MenuButton:e}=this;return o("dso-responsive-element",{key:"d92fde8e8e4cc982f005c8571f010c27f36b48e4",class:"dso-document-components"},o("div",{key:"954d3e761228f6e169f9f49a123ac4ab84f0dd12",class:"dso-navbar"},o("ul",{key:"e406db3e0f02b92036f72d99d9bd828b898a0877",class:"dso-nav dso-nav-sub"},this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((t=>o("li",{class:this.document===t?"dso-active":void 0},o(e,{documentComponent:t})))))),this.document&&o(t,{key:"0ef374e5b148ed43e5bca9c01d5f2f44c0ef280b",path:[this.document]}))}static get watchers(){return{jsonFile:[{jsonFileWatcher:0}],openDefault:[{openDefaultWatcher:0}]}}static get style(){return".sc-dsot-document-component-demo-h{display:block;margin-block:0;margin-inline:8px;border-inline-start:1px dashed transparent;border-inline-end:1px dashed transparent}[show-canvas].sc-dsot-document-component-demo-h{border-inline-start:1px dashed pink;border-inline-end:1px dashed pink}"}},[2,"dsot-document-component-demo",{showCanvas:[516,"show-canvas"],showBesluitversie:[4,"show-besluitversie"],jsonFile:[1,"json-file"],openDefault:[4,"open-default"],mode:[513],ozonContentUrlResolver:[16],ozonContentBegripResolver:[16],response:[32],document:[32],openOrClosed:[32],openedAnnotation:[32],filtered:[32],notApplicable:[32],activeAnnotationSelectables:[32]},void 0,{jsonFile:[{jsonFileWatcher:0}],openDefault:[{openDefaultWatcher:0}]}]),F=$,I=function(){"undefined"!=typeof customElements&&["dsot-document-component-demo","dso-alert","dso-annotation-locatie","dso-badge","dso-document-component","dso-icon","dso-icon-button","dso-image-overlay","dso-label","dso-modal","dso-ozon-content","dso-ozon-content-toggletip","dso-panel","dso-renvooi","dso-responsive-element","dso-scrollable","dso-slide-toggle","dso-table"].forEach((t=>{switch(t){case"dsot-document-component-demo":customElements.get(s(t))||customElements.define(s(t),$);break;case"dso-alert":customElements.get(s(t))||u();break;case"dso-annotation-locatie":customElements.get(s(t))||d();break;case"dso-badge":customElements.get(s(t))||f();break;case"dso-document-component":customElements.get(s(t))||l();break;case"dso-icon":customElements.get(s(t))||h();break;case"dso-icon-button":customElements.get(s(t))||m();break;case"dso-image-overlay":customElements.get(s(t))||p();break;case"dso-label":customElements.get(s(t))||b();break;case"dso-modal":customElements.get(s(t))||v();break;case"dso-ozon-content":customElements.get(s(t))||c();break;case"dso-ozon-content-toggletip":customElements.get(s(t))||g();break;case"dso-panel":customElements.get(s(t))||y();break;case"dso-renvooi":customElements.get(s(t))||j();break;case"dso-responsive-element":customElements.get(s(t))||k();break;case"dso-scrollable":customElements.get(s(t))||C();break;case"dso-slide-toggle":customElements.get(s(t))||E();break;case"dso-table":customElements.get(s(t))||w()}}))};export{F as DsotDocumentComponentDemo,I as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as n,h as o,Fragment as r,transformTag as s}from"@stencil/core/internal/client";import{g as i,c as a,d as c}from"./ozon-content.js";import{d as u}from"./alert.js";import{d as l}from"./annotation-locatie.js";import{d}from"./badge.js";import{d as f}from"./document-component.js";import{d as h}from"./icon.js";import{d as m}from"./icon-button.js";import{d as p}from"./image-overlay.js";import{d as b}from"./label.js";import{d as v}from"./modal.js";import{d as g}from"./ozon-content-toggletip.js";import{d as y}from"./panel.js";import{d as j}from"./renvooi.js";import{d as k}from"./responsive-element.js";import{d as C}from"./scrollable.js";import{d as E}from"./slide-toggle.js";import{d as w}from"./table.js";var D,A,O,z,S=i(function(){if(A)return D;A=1;var t=1/0,e=9007199254740991,n=/^\s+|\s+$/g,o=/^[-+]0x[0-9a-f]+$/i,r=/^0b[01]+$/i,s=/^0o[0-7]+$/i,i=/^(?:0|[1-9]\d*)$/,a=parseFloat,c=parseInt,u=Object.prototype.toString,l=Math.floor,d=Math.min,f=Math.random;function h(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function m(e){return e?(e=function(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==u.call(t)}(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(n,"");var i=r.test(t);return i||s.test(t)?c(t.slice(2),i?2:8):o.test(t)?NaN:+t}(e))===t||e===-1/0?17976931348623157e292*(e<0?-1:1):e==e?e:0:0===e?e:0}return D=function(t,n,o){if(o&&"boolean"!=typeof o&&function(t,n,o){if(!h(o))return!1;var r=typeof n;return!!("number"==r?function(t){return null!=t&&function(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=e}(t.length)&&!function(t){var e=h(t)?u.call(t):"";return"[object Function]"==e||"[object GeneratorFunction]"==e}(t)}(o)&&function(t,n){return!!(n=null==n?e:n)&&("number"==typeof t||i.test(t))&&t>-1&&t%1==0&&t<n}(n,o.length):"string"==r&&n in o)&&function(t,e){return t===e||t!=t&&e!=e}(o[n],t)}(t,n,o)&&(n=o=void 0),void 0===o&&("boolean"==typeof n?(o=n,n=void 0):"boolean"==typeof t&&(o=t,t=void 0)),void 0===t&&void 0===n?(t=0,n=1):(t=m(t),void 0===n?(n=t,t=0):n=m(n)),t>n){var r=t;t=n,n=r}if(o||t%1||n%1){var s=f();return d(t+s*(n-t+a("1e-"+((s+"").length-1))),n)}return function(t,e){return t+l(f()*(e-t+1))}(t,n)}}()),T=i(function(){if(z)return O;z=1;var t=1/0,e=9007199254740991,n="[object Map]",o="[object Promise]",r="[object Set]",s="[object WeakMap]",i="[object DataView]",c=/^\s+|\s+$/g,u=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,d=/^\[object .+?Constructor\]$/,f=/^0o[0-7]+$/i,h=/^(?:0|[1-9]\d*)$/,m="\\ud800-\\udfff",p="\\u0300-\\u036f\\ufe20-\\ufe23",b="\\u20d0-\\u20f0",v="\\ufe0e\\ufe0f",g="["+m+"]",y="["+p+b+"]",j="\\ud83c[\\udffb-\\udfff]",k="[^"+m+"]",C="(?:\\ud83c[\\udde6-\\uddff]){2}",E="[\\ud800-\\udbff][\\udc00-\\udfff]",w="\\u200d",D="(?:"+y+"|"+j+")?",A="["+v+"]?",S=A+D+"(?:"+w+"(?:"+[k,C,E].join("|")+")"+A+D+")*",T=RegExp(j+"(?="+j+")|(?:"+[k+y+"?",y,C,E,g].join("|")+")"+S,"g"),$=RegExp("["+w+m+p+b+v+"]"),F=parseInt,I="object"==typeof self&&self&&self.Object===Object&&self,x="object"==typeof a&&a&&a.Object===Object&&a||I||Function("return this")();function M(t){var e=-1,n=Array(t.size);return t.forEach((function(t,o){n[++e]=[o,t]})),n}function N(t){var e=-1,n=Array(t.size);return t.forEach((function(t){n[++e]=t})),n}var R=Function.prototype,W=Object.prototype,L=x["__core-js_shared__"],B=function(){var t=/[^.]+$/.exec(L&&L.keys&&L.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),V=R.toString,K=W.hasOwnProperty,P=W.toString,G=RegExp("^"+V.call(K).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),U=x.Symbol,H=U?U.iterator:void 0,_=W.propertyIsEnumerable,q=Math.floor,J=function(t,e){return function(n){return t(e(n))}}(Object.keys,Object),Q=Math.random,X=ct(x,"DataView"),Y=ct(x,"Map"),Z=ct(x,"Promise"),tt=ct(x,"Set"),et=ct(x,"WeakMap"),nt=dt(X),ot=dt(Y),rt=dt(Z),st=dt(tt),it=dt(et);function at(t,e){return t+q(Q()*(e-t+1))}function ct(t,e){var n=function(t,e){return null==t?void 0:t[e]}(t,e);return function(t){if(!pt(t)||function(t){return!!B&&B in t}(t))return!1;var e=mt(t)||function(t){var e=!1;if(null!=t&&"function"!=typeof t.toString)try{e=!!(t+"")}catch(t){}return e}(t)?G:d;return e.test(dt(t))}(n)?n:void 0}var ut=function(t){return P.call(t)};function lt(t,n){return!!(n=null==n?e:n)&&("number"==typeof t||h.test(t))&&t>-1&&t%1==0&&t<n}function dt(t){if(null!=t){try{return V.call(t)}catch(t){}try{return t+""}catch(t){}}return""}(X&&ut(new X(new ArrayBuffer(1)))!=i||Y&&ut(new Y)!=n||Z&&ut(Z.resolve())!=o||tt&&ut(new tt)!=r||et&&ut(new et)!=s)&&(ut=function(t){var e=P.call(t),a="[object Object]"==e?t.constructor:void 0,c=a?dt(a):void 0;if(c)switch(c){case nt:return i;case ot:return n;case rt:return o;case st:return r;case it:return s}return e});var ft=Array.isArray;function ht(t){return null!=t&&function(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=e}(t.length)&&!mt(t)}function mt(t){var e=pt(t)?P.call(t):"";return"[object Function]"==e||"[object GeneratorFunction]"==e}function pt(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function bt(t){return!!t&&"object"==typeof t}function vt(t){return t?function(t,e){return function(t,e){for(var n=-1,o=t?t.length:0,r=Array(o);++n<o;)r[n]=e(t[n]);return r}(e,(function(e){return t[e]}))}(t,function(t){return ht(t)?function(t){var e=ft(t)||function(t){return function(t){return bt(t)&&ht(t)}(t)&&K.call(t,"callee")&&(!_.call(t,"callee")||"[object Arguments]"==P.call(t))}(t)?function(t,e){for(var n=-1,o=Array(t);++n<t;)o[n]=e(n);return o}(t.length,String):[],n=e.length,o=!!n;for(var r in t)!K.call(t,r)||o&&("length"==r||lt(r,n))||e.push(r);return e}(t):function(t){if(!function(t){var e=t&&t.constructor;return t===("function"==typeof e&&e.prototype||W)}(t))return J(t);var e=[];for(var n in Object(t))K.call(t,n)&&"constructor"!=n&&e.push(n);return e}(t)}(t)):[]}return O=function(e,o,s){var i=-1,a=function(t){if(!t)return[];if(ht(t))return function(t){return"string"==typeof t||!ft(t)&&bt(t)&&"[object String]"==P.call(t)}(t)?function(t){return function(t){return $.test(t)}(t)?function(t){return t.match(T)||[]}(t):function(t){return t.split("")}(t)}(t):function(t,e){var n=-1,o=t.length;for(e||(e=Array(o));++n<o;)e[n]=t[n];return e}(t);if(H&&t[H])return function(t){for(var e,n=[];!(e=t.next()).done;)n.push(e.value);return n}(t[H]());var e=ut(t);return(e==n?M:e==r?N:vt)(t)}(e),d=a.length,h=d-1;for(o=(s?function(t,e,n){if(!pt(n))return!1;var o=typeof e;return!!("number"==o?ht(n)&&lt(e,n.length):"string"==o&&e in n)&&function(t,e){return t===e||t!=t&&e!=e}(n[e],t)}(e,o,s):void 0===o)?1:function(t,e,n){return t==t&&(void 0!==n&&(t=t<=n?t:n),t=t>=0?t:0),t}(function(e){var n=function(e){return e?(e=function(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||bt(t)&&"[object Symbol]"==P.call(t)}(t))return NaN;if(pt(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=pt(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(c,"");var n=l.test(t);return n||f.test(t)?F(t.slice(2),n?2:8):u.test(t)?NaN:+t}(e))===t||e===-1/0?17976931348623157e292*(e<0?-1:1):e==e?e:0:0===e?e:0}(e),o=n%1;return n==n?o?n-o:n:0}(o),0,d);++i<o;){var m=at(i,h),p=a[m];a[m]=a[i],a[i]=p}return a.length=o,a}}());const $=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.dsotOzonContentClick=n(this,"dsotOzonContentClick",7),this.dsotTableOfContentsClick=n(this,"dsotTableOfContentsClick",3),this.showCanvas=!1,this.showBesluitversie=!1,this.openDefault=!1,this.mode="document",this.openOrClosed=[],this.openedAnnotation=[],this.filtered=[],this.notApplicable=[],this.activeAnnotationSelectables=[],this.handleRecursiveToggle=(t,e)=>{const n=this.getEmbeddedDocumentComponents(t);if(n)for(const t of n.documentComponents)this.handleOpenToggle(t,e.next)},this.DocumentComponent=({path:t})=>{const e=t.at(-1);if(!e||"table-of-contents"===this.mode&&"LID"===e.type)return o(r,null);const{DocumentComponent:n}=this,s=this.getEmbeddedDocumentComponents(e);let i,a,c,u,l;return this.hasNestedDraft(e)&&(this.showBesluitversie?(i="B",a="primary",c="Dit is een besluitversie."):(i="!",a="warning",c="Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.")),e.bevatOntwerpInformatie&&(this.showBesluitversie?(u="Besluitversie",l="primary"):(u="Ontwerp",l="warning")),o("dso-document-component",{annotated:this.isAnnotated(e),filtered:this.isOpen(e)?this.isFiltered(e):this.hasFilteredChildren(e),gereserveerd:e.gereserveerd,headingLevel:2,kop:e.kop,inhoud:e.inhoud,openAnnotation:this.isOpenedAnnotation(e),notApplicable:this.isNotApplicable(e)||t.some((t=>this.isNotApplicable(t))),onDsoAnnotationToggle:t=>this.handleAnnotationToggle(e,t.detail),onDsoOpenToggle:()=>this.handleOpenToggle(e),open:this.isOpen(e),type:e.type,vervallen:e.vervallen,wijzigactie:e.wijzigactie,recursiveToggle:this.recursiveToggleState(e),onDsoRecursiveToggle:t=>this.handleRecursiveToggle(e,t.detail),mode:this.mode,href:"table-of-contents"===this.mode?"/document/"+e.documentTechnischId:void 0,onDsoTableOfContentsClick:t=>this.handleTableOfContentsClick(t),onDsoOzonContentClick:t=>this.handleOzonContentClick(t),ozonContentUrlResolver:this.ozonContentUrlResolver,ozonContentBegripResolver:this.ozonContentBegripResolver,badge:i,badgeStatus:a,badgeTooltip:c,label:u,labelStatus:l},this.isOpenedAnnotation(e)&&o("div",{slot:"annotations"},o("dso-annotation-locatie",{active:this.isCheckedSlideToggle(e),"gewijzigde-locatie":!0,locatieNoemer:"Winkelgebied",onDsoActiveChange:()=>this.handleSelectableChange(e)},o("span",{class:"symboolcode",slot:"symbool","data-symboolcode":"vszt030"}))),this.showContent(e)&&s?.documentComponents.length&&o("ul",{class:"dso-document-component-list"},s.documentComponents.map((e=>o("li",{key:e.documentTechnischId},o(n,{path:[...t,e]}))))))},this.MenuButton=({documentComponent:t})=>{const{type:e}=t;return o("button",{type:"button",onClick:()=>this.document=t},o("span",null,o("i",null,e)))}}async jsonFileWatcher(){this.openOrClosed=[],await this.loadData()}async openDefaultWatcher(){this.openOrClosed=[],await this.loadData()}async componentDidLoad(){await this.loadData()}getEmbeddedDocumentComponents(t){return t?._embedded?.ontwerpDocumentComponenten?{documentComponents:t._embedded.ontwerpDocumentComponenten,ontwerp:!0}:t?._embedded?.documentComponenten?{documentComponents:t._embedded.documentComponenten,ontwerp:!1}:void 0}concatEmbeddedDocumentComponents(t){const e=[...this.getEmbeddedDocumentComponents(t)?.documentComponents??[]];for(const t of e)e.push(...this.concatEmbeddedDocumentComponents(t));return e}selectRandomDocumentComponents(t,e=[]){const n=this.concatEmbeddedDocumentComponents(t).filter((t=>!e.includes(t))),o=S(0,Math.floor(n.length/10));return T(n,o)}async loadData(){if(!this.jsonFile)return this.response=void 0,void(this.document=void 0);this.response=await fetch(this.jsonFile).then((t=>t.json())),this.document=this.getEmbeddedDocumentComponents(this.response)?.documentComponents[0],"LICHAAM"===this.document?.type?(this.notApplicable=this.selectRandomDocumentComponents(this.document),this.filtered=this.selectRandomDocumentComponents(this.document,this.notApplicable)):(this.notApplicable=[],this.filtered=[])}handleOpenToggle(t,e){const n="boolean"==typeof e?e:this.openOrClosed.includes(t);n&&this.openOrClosed.includes(t)?this.openOrClosed=this.openOrClosed.filter((e=>e!==t)):n||this.openOrClosed.includes(t)||(this.openOrClosed=[...this.openOrClosed,t])}handleAnnotationToggle(t,e){this.openedAnnotation=this.isOpenedAnnotation(t)&&!e.next?this.openedAnnotation.filter((e=>e!==t)):[...this.openedAnnotation,t],this.isOpen(t)||(this.openOrClosed=[...this.openOrClosed,t])}handleSelectableChange(t){this.activeAnnotationSelectables=this.isCheckedSlideToggle(t)?this.activeAnnotationSelectables.filter((e=>e!==t)):[...this.activeAnnotationSelectables,t]}handleOzonContentClick(t){this.dsotOzonContentClick.emit(t.detail)}handleTableOfContentsClick(t){this.dsotTableOfContentsClick.emit(t.detail)}isCheckedSlideToggle(t){return this.activeAnnotationSelectables.includes(t)}hasFilteredChildren(t){return this.filtered.includes(t)||(this.getEmbeddedDocumentComponents(t)?.documentComponents.some((t=>this.hasFilteredChildren(t)))??!1)}isOpen(t){return"LID"===t.type||this.openDefault?!this.openOrClosed.includes(t):this.openOrClosed.includes(t)}isOpenedAnnotation(t){return this.openedAnnotation.includes(t)}isFiltered(t){return this.filtered.includes(t)}isNotApplicable(t){return this.notApplicable.includes(t)}hasNestedDraft(t){return this.getEmbeddedDocumentComponents(t)?.documentComponents.some((t=>!!t.bevatOntwerpInformatie||this.hasNestedDraft(t)))??!1}showContent(t){return this.isOpen(t)&&!(!this.getEmbeddedDocumentComponents(t)?.documentComponents.length&&!t.inhoud)}recursiveToggleState(t){const e=this.getEmbeddedDocumentComponents(t);if(e&&!(e.documentComponents.length<=1)&&e.documentComponents.some((t=>"ARTIKEL"===t.type)))return e.documentComponents.every((t=>this.isOpen(t)))}isAnnotated(t){return"DIVISIE"===t.type||"DIVISIETEKST"===t.type||"ARTIKEL"===t.type||"LID"===t.type}render(){const{DocumentComponent:t,MenuButton:e}=this;return o("dso-responsive-element",{key:"ab236260f9a6a0b08cce77c0ff84b9a03b51ce44",class:"dso-document-components"},o("div",{key:"bb00e379af2aec12362a4e5eee21b335559866a3",class:"dso-navbar"},o("ul",{key:"c35d80d6e616224696d974450bedc34a75abc66e",class:"dso-nav dso-nav-sub"},this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((t=>o("li",{class:this.document===t?"dso-active":void 0},o(e,{documentComponent:t})))))),this.document&&o(t,{key:"63e65905336d74456fbd29bb97363bbae7411ec6",path:[this.document]}))}static get watchers(){return{jsonFile:[{jsonFileWatcher:0}],openDefault:[{openDefaultWatcher:0}]}}static get style(){return".sc-dsot-document-component-demo-h{display:block;margin-block:0;margin-inline:8px;border-inline-start:1px dashed transparent;border-inline-end:1px dashed transparent}[show-canvas].sc-dsot-document-component-demo-h{border-inline-start:1px dashed pink;border-inline-end:1px dashed pink}"}},[2,"dsot-document-component-demo",{showCanvas:[516,"show-canvas"],showBesluitversie:[4,"show-besluitversie"],jsonFile:[1,"json-file"],openDefault:[4,"open-default"],mode:[513],ozonContentUrlResolver:[16],ozonContentBegripResolver:[16],response:[32],document:[32],openOrClosed:[32],openedAnnotation:[32],filtered:[32],notApplicable:[32],activeAnnotationSelectables:[32]},void 0,{jsonFile:[{jsonFileWatcher:0}],openDefault:[{openDefaultWatcher:0}]}]),F=$,I=function(){"undefined"!=typeof customElements&&["dsot-document-component-demo","dso-alert","dso-annotation-locatie","dso-badge","dso-document-component","dso-icon","dso-icon-button","dso-image-overlay","dso-label","dso-modal","dso-ozon-content","dso-ozon-content-toggletip","dso-panel","dso-renvooi","dso-responsive-element","dso-scrollable","dso-slide-toggle","dso-table"].forEach((t=>{switch(t){case"dsot-document-component-demo":customElements.get(s(t))||customElements.define(s(t),$);break;case"dso-alert":customElements.get(s(t))||u();break;case"dso-annotation-locatie":customElements.get(s(t))||l();break;case"dso-badge":customElements.get(s(t))||d();break;case"dso-document-component":customElements.get(s(t))||f();break;case"dso-icon":customElements.get(s(t))||h();break;case"dso-icon-button":customElements.get(s(t))||m();break;case"dso-image-overlay":customElements.get(s(t))||p();break;case"dso-label":customElements.get(s(t))||b();break;case"dso-modal":customElements.get(s(t))||v();break;case"dso-ozon-content":customElements.get(s(t))||c();break;case"dso-ozon-content-toggletip":customElements.get(s(t))||g();break;case"dso-panel":customElements.get(s(t))||y();break;case"dso-renvooi":customElements.get(s(t))||j();break;case"dso-responsive-element":customElements.get(s(t))||k();break;case"dso-scrollable":customElements.get(s(t))||C();break;case"dso-slide-toggle":customElements.get(s(t))||E();break;case"dso-table":customElements.get(s(t))||w()}}))};export{F as DsotDocumentComponentDemo,I as defineCustomElement}

package/dist/components/index.d.ts

@@ -139,8 +139,6 @@ export { Tabs as DsoTabs } from '../types/components/tabs/tabs';
 export { defineCustomElement as defineCustomElementDsoTabs } from './dso-tabs';
 export { TijdreisBanner as DsoTijdreisBanner } from '../types/components/tijdreis-banner/tijdreis-banner';
 export { defineCustomElement as defineCustomElementDsoTijdreisBanner } from './dso-tijdreis-banner';
-export { Tooltip as DsoTooltip } from '../types/components/tooltip/tooltip';
-export { defineCustomElement as defineCustomElementDsoTooltip } from './dso-tooltip';
 export { TreeView as DsoTreeView } from '../types/components/tree-view/tree-view';
 export { defineCustomElement as defineCustomElementDsoTreeView } from './dso-tree-view';
 export { ViewerGrid as DsoViewerGrid } from '../types/components/viewer-grid/viewer-grid';