@dso-toolkit/core 60.0.0 → 61.0.0

package/dist/dso-toolkit/p-6b42f0cc.entry.js

@@ -0,0 +1,2 @@
+import{h as o,r as n,c as s,f as t,F as d,H as c,a as e}from"./p-3ca5b6f4.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i=({handleUrl:n,onClick:s,open:t},d)=>{if(n){return o("a",{href:n,onClick:s,"aria-expanded":t?"true":"false"},d)}return o("button",{type:"button",onClick:s,"aria-expanded":t?"true":"false"},d)};const r=({heading:n,ref:s},t)=>{switch(n){default:case"h2":return o("h2",{ref:s,class:"dso-section-handle"},t);case"h3":return o("h3",{ref:s,class:"dso-section-handle"},t);case"h4":return o("h4",{ref:s,class:"dso-section-handle"},t);case"h5":return o("h5",{ref:s,class:"dso-section-handle"},t)}};const l=({state:n})=>{if(n==="error"){return o("dso-icon",{icon:"status-error"})}if(n==="danger"){return o("dso-icon",{icon:"status-danger"})}if(n==="success"){return o("dso-icon",{icon:"status-success"})}if(n==="info"){return o("dso-icon",{icon:"status-info"})}if(n==="warning"){return o("dso-icon",{icon:"status-warning"})}};const h=({state:n,icon:s,attachmentCount:t})=>{if(n){return o(l,{state:n})}if(t){return o("dso-attachments-counter",{count:t})}if(s){return o("dso-icon",{icon:s})}};const p="*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button{color:#000;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:hover,:host(.dso-accordion-compact-black) .dso-section-handle button:active,:host(.dso-accordion-compact-black) .dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-top:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding:5px 16px 5px 0}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body{background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:0}:host(.dso-accordion-neutral) .dso-section-body.dso-animate-ready{transition:margin-block 260ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.dso-accordion-neutral) .dso-section-body .dso-section-body-content{padding:16px 32px 24px 32px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}";const u=class{constructor(o){n(this,o);this.dsoToggleClick=s(this,"dsoToggleClick",3);this.dsoAnimationEnd=s(this,"dsoAnimationEnd",3);this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:()=>this.scrollIntoView(o.detail.bodyHeight)})};this.handleTitle=undefined;this.heading="h2";this.handleUrl=undefined;this.status=undefined;this.attachmentCount=undefined;this.icon=undefined;this.statusDescription=undefined;this.open=false;this.hasNestedAccordion=false;this.hover=false}componentWillLoad(){var o;this.hasNestedAccordion=this.host.querySelector("dso-accordion")!==null;(o=this.accordion)===null||o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;t(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null||o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o){var n,s;const t=(n=this.sectionBody)===null||n===void 0?void 0:n.getBoundingClientRect();const d=(s=this.sectionHeading)===null||s===void 0?void 0:s.getBoundingClientRect();if(!t||!d||!this.accordionState){return}const c=d.top+d.height+(this.open?o!==null&&o!==void 0?o:0:0);if(c>window.innerHeight){const o=c-d.top;const n=o>window.innerHeight;window.scrollTo({top:n?this.host.offsetTop:this.host.offsetTop-(window.innerHeight-o),behavior:"smooth"})}else if(d.top<0){window.scrollTo({top:this.host.offsetTop,behavior:"smooth"})}}get accordion(){return this.host.closest("dso-accordion")}render(){var n;const{variant:s,reverseAlign:t}=(n=this.accordionState)!==null&&n!==void 0?n:{};const e=!!this.statusDescription||!!this.status||!!this.icon||!!this.attachmentCount;return o(c,{class:{"dso-accordion-section":true,["dso-accordion-"+s]:true,"dso-nested-accordion":this.hasNestedAccordion,"dso-accordion-reverse-align":t!==null&&t!==void 0?t:false},hidden:!s,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},o(r,{heading:this.heading,ref:o=>this.sectionHeading=o},o(i,{handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open},t?o(d,null,e&&o("div",{class:"dso-section-handle-addons"},o(h,{icon:this.icon})),o("span",null,this.handleTitle),o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"})):o(d,null,o("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&o("span",{class:"sr-only"},a[this.status]),o("span",null,this.handleTitle,this.isNeutral&&o("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),e&&o("div",{class:"dso-section-handle-addons"},this.statusDescription&&o("span",{class:"dso-status"},this.statusDescription),o(h,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),o("dso-expandable",{class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},o("div",{class:"dso-section-body-content",ref:o=>this.sectionBody=o},o("slot",null))))}get host(){return e(this)}};u.style=p;export{u as dso_accordion_section};
+//# sourceMappingURL=p-6b42f0cc.entry.js.map

package/dist/dso-toolkit/p-6b42f0cc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stateMap","success","info","warning","danger","error","HandleElement","handleUrl","onClick","open","children","h","href","type","Handle","heading","ref","class","HandleStateIcon","state","icon","HandleIcon","attachmentCount","count","accordionSectionCss","AccordionSection","this","handleClick","event","dsoToggleClick","emit","originalEvent","handleExpandableAnimationEnd","e","dsoAnimationEnd","scrollIntoView","detail","bodyHeight","componentWillLoad","hasNestedAccordion","host","querySelector","_a","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","window","innerHeight","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","offsetTop","behavior","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","hidden","onMouseenter","hover","onMouseleave","element","Fragment","handleTitle","enableAnimation","minimumHeight","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/handles/element.handle.tsx","src/components/accordion/components/handles/heading.handle.tsx","src/components/accordion/components/handles/state-icon.handle.tsx","src/components/accordion/components/handles/icon.handle.tsx","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport const HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n        {children}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionHeading } from \"../accordion-section.interfaces\";\r\n\r\nexport const Handle: FunctionalComponent<{\r\n  heading: AccordionHeading;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h5>\r\n      );\r\n  }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\n\r\nexport const HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n  if (state === \"error\") {\r\n    return <dso-icon icon=\"status-error\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"danger\") {\r\n    return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"success\") {\r\n    return <dso-icon icon=\"status-success\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"info\") {\r\n    return <dso-icon icon=\"status-info\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"warning\") {\r\n    return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n  }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\nimport { HandleStateIcon } from \"./state-icon.handle\";\r\n\r\nexport const HandleIcon: FunctionalComponent<{\r\n  state?: AccordionSectionState;\r\n  icon?: string;\r\n  attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n  if (state) {\r\n    return <HandleStateIcon state={state} />;\r\n  }\r\n\r\n  if (attachmentCount) {\r\n    return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n  }\r\n\r\n  if (icon) {\r\n    return <dso-icon icon={icon}></dso-icon>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n\r\n  .dso-section-handle {\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    position: relative;\r\n\r\n    > a:active {\r\n      text-decoration: none;\r\n    }\r\n\r\n    a {\r\n      @include anchor.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      font-weight: 400;\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  .dso-section-handle > button,\r\n  .dso-section-handle > a {\r\n    align-items: flex-start;\r\n    background-color: transparent;\r\n    border: 0;\r\n    cursor: pointer;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n    text-align: start;\r\n    width: 100%;\r\n    word-break: break-word;\r\n\r\n    dso-icon {\r\n      flex-shrink: 0;\r\n\r\n      &.dso-section-handle-chevron {\r\n        @include utilities.transition(transform);\r\n\r\n        transform: rotate(0);\r\n      }\r\n    }\r\n\r\n    > .dso-section-handle-addons:first-child,\r\n    > dso-icon:first-child {\r\n      margin-right: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-left: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-left: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-left: 16px;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n  .dso-section-handle {\r\n    > button,\r\n    > a {\r\n      .dso-section-handle-chevron {\r\n        &:first-child {\r\n          transform: rotate(90deg);\r\n        }\r\n\r\n        &:last-child {\r\n          transform: rotate(-180deg);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-section-body {\r\n  background-color: colors.$wit;\r\n  border-top: 0;\r\n  margin-top: accordion.$border-radius * -1;\r\n\r\n  .dso-section-body-content {\r\n    padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n  }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { Handle, HandleElement, HandleIcon } from \"./handles\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle?: string;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  @State()\r\n  hasNestedAccordion = false;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  componentWillLoad() {\r\n    this.hasNestedAccordion = this.host.querySelector(\"dso-accordion\") !== null;\r\n\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined): Promise<void> {\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n    if (sectionBottomY > window.innerHeight) {\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection\r\n          ? this.host.offsetTop\r\n          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),\r\n        behavior: \"smooth\",\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      window.scrollTo({\r\n        top: this.host.offsetTop,\r\n        behavior: \"smooth\",\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement handleUrl={this.handleUrl} onClick={this.handleClick} open={this.open}>\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n\r\n                <span>{this.handleTitle}</span>\r\n\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  {this.handleTitle}\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-6dfe9062.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as o,H as e}from"./p-3ca5b6f4.js";const a=':host {\n  max-block-size: 3rem;\n  block-size: 3rem;\n  display: grid;\n  grid-template-areas: "target wordmark label";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5625rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n  font-size: 1.5625rem;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #e17000;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding: 0 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  .logo-wordmark {\n    font-size: initial;\n  }\n  :host([label]) {\n    grid-template-areas: "target label";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    font-size: initial;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}';const r=class{constructor(o){n(this,o);this.label=undefined;this.ribbon=undefined}render(){return o(e,{"aria-label":["Omgevingsloket",this.label,this.ribbon&&`(${this.ribbon})`].filter((n=>!!n)).join(" ")},o("svg",{fill:"none",viewBox:"0 0 48 48",height:"100%",class:"logo-target"},o("path",{class:"outer",d:"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z"}),o("path",{class:"middle",d:"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z"}),o("path",{class:"inner",d:"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z"})),o("div",{class:"logo-wordmark"},o("span",{class:"logo-wordmark-omgevings"},"Omgevings"),o("span",{class:"logo-wordmark-loket"},"loket")),this.label&&o("span",{class:"logo-label"},this.label),this.ribbon&&o("div",{class:"logo-ribbon"},this.ribbon))}};r.style=a;export{r as dso_logo};
+//# sourceMappingURL=p-6dfe9062.entry.js.map

package/dist/dso-toolkit/p-6dfe9062.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["logoCss","Logo","render","h","Host","this","label","ribbon","filter","s","join","fill","viewBox","height","class","d"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$oranje;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding: 0 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify status of the page, like 'beta'.\r\n   *\r\n   */\r\n  @Prop()\r\n  ribbon?: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n          <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n          <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n          <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n        </svg>\r\n\r\n        <div class=\"logo-wordmark\">\r\n          <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n          <span class=\"logo-wordmark-loket\">loket</span>\r\n        </div>\r\n\r\n        {this.label && <span class=\"logo-label\">{this.label}</span>}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAU,y9D,MCOHC,EAAI,M,oEAgBf,MAAAC,GACE,OACEC,EAACC,EAAI,cAAa,CAAC,iBAAkBC,KAAKC,MAAOD,KAAKE,QAAU,IAAIF,KAAKE,WAAWC,QAAQC,KAAQA,IAAGC,KAAK,MAC1GP,EAAA,OAAKQ,KAAK,OAAOC,QAAQ,YAAYC,OAAO,OAAOC,MAAM,eACvDX,EAAA,QAAMW,MAAM,QAAQC,EAAE,+CACtBZ,EAAA,QAAMW,MAAM,SAASC,EAAE,6CACvBZ,EAAA,QAAMW,MAAM,QAAQC,EAAE,2CAGxBZ,EAAA,OAAKW,MAAM,iBACTX,EAAA,QAAMW,MAAM,2BAAyB,aACrCX,EAAA,QAAMW,MAAM,uBAAqB,UAGlCT,KAAKC,OAASH,EAAA,QAAMW,MAAM,cAAcT,KAAKC,OAC7CD,KAAKE,QAAUJ,EAAA,OAAKW,MAAM,eAAeT,KAAKE,Q"}

package/dist/dso-toolkit/{p-a2a82d7c.entry.js → p-ca222ec3.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as e,H as r}from"./p-3ca5b6f4.js";const t="*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";const i=class{constructor(e){s(this,e);this.label="Resultaten laden: een moment geduld alstublieft.";this.size=undefined;this.block=undefined}render(){return e(r,null,e("span",{class:"dso-progress-indicator-spinner",role:"progressbar","aria-labelledby":"progress-indicator-label"},e("svg",{class:"spinner",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},e("style",null,`\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\n              `),e("circle",{class:"path",fill:"none","stroke-width":"10","stroke-linecap":"butt",cx:"50",cy:"50",r:"45"}))),e("span",{id:"progress-indicator-label",class:"dso-progress-indicator-label"},this.label))}};i.style=t;export{i as dso_progress_indicator};
-//# sourceMappingURL=p-a2a82d7c.entry.js.map
+import{r as s,h as e,H as r}from"./p-3ca5b6f4.js";const t="*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";const i=class{constructor(e){s(this,e);this.label="Resultaten laden: een moment geduld alstublieft.";this.size=undefined;this.block=undefined}render(){return e(r,null,e("span",{class:"dso-progress-indicator-spinner",role:"progressbar","aria-labelledby":"progress-indicator-label"},e("svg",{class:"spinner",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},e("style",null,`\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n                .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\n              `),e("circle",{class:"path",fill:"none","stroke-width":"10","stroke-linecap":"butt",cx:"50",cy:"50",r:"45"}))),e("span",{id:"progress-indicator-label",class:"dso-progress-indicator-label"},this.label))}};i.style=t;export{i as dso_progress_indicator};
+//# sourceMappingURL=p-ca222ec3.entry.js.map

package/dist/dso-toolkit/{p-a2a82d7c.entry.js.map → p-ca222ec3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["progressIndicatorCss","Progressindicator","render","h","Host","class","role","viewBox","xmlns","fill","cx","cy","r","id","this","label"],"sources":["src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAuB,qyB,MCOhBC,EAAiB,M,oCAKpB,mD,yCAgBR,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,QAAME,MAAM,iCAAiCC,KAAK,cAAa,kBAAiB,4BAE9EH,EAAA,OAAKE,MAAM,UAAUE,QAAQ,cAAcC,MAAM,8BAC/CL,EAAA,aACG,gjBAOHA,EAAA,UAAQE,MAAM,OAAOI,KAAK,OAAM,eAAc,KAAI,iBAAgB,OAAOC,GAAG,KAAKC,GAAG,KAAKC,EAAE,SAG/FT,EAAA,QAAMU,GAAG,2BAA2BR,MAAM,gCACvCS,KAAKC,O"}
+{"version":3,"names":["progressIndicatorCss","Progressindicator","render","h","Host","class","role","viewBox","xmlns","fill","cx","cy","r","id","this","label"],"sources":["src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAuB,qyB,MCOhBC,EAAiB,M,oCAKpB,mD,yCAgBR,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,QAAME,MAAM,iCAAiCC,KAAK,cAAa,kBAAiB,4BAE9EH,EAAA,OAAKE,MAAM,UAAUE,QAAQ,cAAcC,MAAM,8BAC/CL,EAAA,aACG,qmBAOHA,EAAA,UAAQE,MAAM,OAAOI,KAAK,OAAM,eAAc,KAAI,iBAAgB,OAAOC,GAAG,KAAKC,GAAG,KAAKC,EAAE,SAG/FT,EAAA,QAAMU,GAAG,2BAA2BR,MAAM,gCACvCS,KAAKC,O"}

package/dist/dso-toolkit/p-caf4d880.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as t,h as o}from"./p-3ca5b6f4.js";import{c as e}from"./p-1521d319.js";import{c as s}from"./p-c87b4d11.js";import"./p-86133aa5.js";const i="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";const r=class{constructor(o){n(this,o);this.dsoCountChange=t(this,"dsoCountChange",7);this.dsoSelectedChange=t(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.manual=true}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}componentDidRender(){var n;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=e(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}disconnectedCallback(){var n;(n=this.trap)===null||n===void 0?void 0:n.deactivate()}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,t){if(typeof this.count==="number"){const o=t==="increment"?this.count+1:this.count-1;if(this.isNewCountValid(o)===false){return}this.dsoCountChange.emit({originalEvent:n,count:o})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){if(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max))){return false}return true}render(){const n=this.manualCount===undefined;const t=this.checked||this.count!==undefined&&this.count>0;return o("div",{class:s(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{class:s(["dso-list-button",{"dso-selected":t,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{class:"dso-selectable"},o("input",{id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam",checked:t,disabled:this.disabled,"aria-label":this.label}),o("label",{htmlFor:"dso-list-button-checkbox"},this.label)),this.sublabel&&o("span",{class:"dso-sublabel"},this.sublabel),o("slot",{name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{icon:"minus-circle"}),o("span",{class:"sr-only"},"Aantal verlagen")),o("div",{class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{onSubmit:n=>this.setCount(n)},o("div",{ref:n=>this.manualInputWrapperElement=n},o("input",{class:s("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual===true&&o("button",{class:s("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?o("span",{class:"sr-only"},"Handmatig aantal invullen"):o("span",{class:"sr-only"},"Zet waarde")))),n&&o("button",{type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{icon:"plus-circle"}),o("span",{class:"sr-only"},"Aantal verhogen"))))}static get watchers(){return{manual:["watchManualCallback"]}}};r.style=i;export{r as dso_list_button};
+//# sourceMappingURL=p-caf4d880.entry.js.map

package/dist/dso-toolkit/{p-d37a6c95.entry.js.map → p-caf4d880.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["listButtonCss","ListButton","watchManualCallback","this","manual","manualCount","stopManualCountInput","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","disconnectedCallback","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","class","clsx","disabled","onClick","id","type","value","name","label","htmlFor","sublabel","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-left: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    width: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (this.isNewCountValid(newValue) === false) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    if (\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    ) {\r\n      return false;\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n              aria-label={this.label}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n          </div>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.manualCount === undefined && this.count > 1 && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.min) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"decrement\")}\r\n              >\r\n                <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verlagen</span>\r\n              </button>\r\n            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual === true && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.max) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"increment\")}\r\n              >\r\n                <dso-icon icon=\"plus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verhogen</span>\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}
+{"version":3,"names":["listButtonCss","ListButton","watchManualCallback","this","manual","manualCount","stopManualCountInput","componentDidRender","undefined","manualInputWrapperElement","trap","createFocusTrap","escapeDeactivates","setReturnFocus","clickOutsideDeactivates","e","setCount","onDeactivate","onPostDeactivate","_a","manualInputButtonElement","focus","activate","deactivate","disconnectedCallback","handleOnChange","target","HTMLInputElement","valueAsNumber","stepValue","direction","count","newValue","isNewCountValid","dsoCountChange","emit","originalEvent","preventDefault","handleSelectClick","dsoSelectedChange","checked","startManualCountInput","min","max","Number","render","showButtonInputs","selected","h","class","clsx","disabled","onClick","id","type","value","name","label","htmlFor","sublabel","icon","tabIndex","readOnly","onSubmit","ref","element","hidden","onInput"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-left: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    width: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (this.isNewCountValid(newValue) === false) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    if (\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    ) {\r\n      return false;\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n              aria-label={this.label}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n          </div>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.manualCount === undefined && this.count > 1 && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.min) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"decrement\")}\r\n              >\r\n                <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verlagen</span>\r\n              </button>\r\n            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual === true && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\r\n              <button\r\n                type=\"button\"\r\n                class=\"dso-tertiary\"\r\n                disabled={this.count === Number(this.max) || this.disabled}\r\n                onClick={(e) => this.stepValue(e, \"increment\")}\r\n              >\r\n                <dso-icon icon=\"plus-circle\"></dso-icon>\r\n                <span class=\"sr-only\">Aantal verhogen</span>\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-dbea5bbd.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","h","class","onTransitionEnd","e","propertyName","emit","currentSize","type","onClick","icon","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","ref","id","preventDefault","MainPanel","mode","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","expandContent","toggleMainPanel","dsoMainSizeChangeAnimationEnd","clsx","compact","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","this","mediaCondition","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","documentPanelSize","dsoMainPanelExpand","expand","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","window","innerWidth","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","_a","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","filterpanelOpen","overlayOpen","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","Fragment","key","activeTab"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  main: \"Hoofdpaneel\",\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <div class=\"sizing-buttons\">\r\n        <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n          Breedte documentpaneel: {viewerGridSizeLabelMap[panelSize]}\r\n        </span>\r\n        {panelSize !== \"small\" && (\r\n          <button type=\"button\" class=\"shrink\" onClick={shrinkDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        )}\r\n        {panelSize !== \"large\" && (\r\n          <button type=\"button\" class=\"expand\" onClick={expandDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n        )}\r\n      </div>\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridMode,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  mode: ViewerGridMode;\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n  expandContent: () => void;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  mode,\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  shrinkMain,\r\n  expandMain,\r\n  expandContent,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView &&\r\n      (!documentPanelOpen ? (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte {mode === \"vdk\" ? \"zoeken paneel\" : \"hoofdpaneel\"}: {viewerGridSizeLabelMap[mainSize]}\r\n          </span>\r\n          {mainSize !== \"small\" && (\r\n            <button type=\"button\" class=\"shrink\" onClick={shrinkMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n          )}\r\n          {mainSize !== \"large\" && (\r\n            <button type=\"button\" class=\"expand\" onClick={expandMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </div>\r\n      ) : (\r\n        <div class=\"toggle-button\">\r\n          <button type=\"button\" onClick={toggleMainPanel}>\r\n            <span class=\"sr-only\">\r\n              {mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} {mainPanelHidden ? \"Tonen\" : \"Verbergen\"}\r\n            </span>\r\n            <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n          </button>\r\n        </div>\r\n      ))}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n      {!tabView && documentPanelOpen && (\r\n        <button class=\"dso-tertiary expand-button\" onClick={expandContent}>\r\n          <dso-icon icon={mainPanelExpanded ? \"chevron-up\" : \"chevron-down\"}></dso-icon>\r\n          <span>{mainPanelExpanded ? \"Verberg\" : \"Toon\"} documenten op gekozen locatie</span>\r\n        </button>\r\n      )}\r\n      {documentPanelOpen && mainPanelExpanded && <slot name=\"main-expanded\" />}\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n  .overlay {\r\n    height: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    height: 100%;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      left: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    height: 100%;\r\n  }\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    left: calc(100% + 1px);\r\n    transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n    padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-bottom-right-radius: 4px;\r\n      border-top-right-radius: 4px;\r\n    }\r\n  }\r\n\r\n  .expand-button {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    padding-block: units.$u2;\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    right: calc(100% + 1px);\r\n    transition: right core-viewer-grid-variables.$transition-time ease-in;\r\n    padding: 0 0 units.$u1 * 0.5 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-bottom-left-radius: 4px;\r\n      border-top-left-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  height: 100%;\r\n  margin-block: 0;\r\n  max-height: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-width: unset;\r\n      max-width: unset;\r\n      width: 440px;\r\n\r\n      .content {\r\n        height: auto;\r\n        overflow-y: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n    padding-right: units.$u1;\r\n\r\n    .content {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n    width: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n      left: core-viewer-grid-variables.$filterpanel-max-width;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n        left: auto;\r\n        width: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    width: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    font-weight: 300;\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-width: 100vw;\r\n    top: 0;\r\n    width: 100vw;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridVdkTab,\r\n  ViewerGridVrkTab,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridMode,\r\n  viewerGridTabLabelMap,\r\n  viewerGridVdkTabs,\r\n  viewerGridVrkTabs,\r\n  ViewerGridTab,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50)\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n * @slot main-expanded - VDK only\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * VRK or VDK implementation.\r\n   */\r\n  @Prop()\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterpanelSlot() {\r\n    return this.host.querySelector(\"[slot='filterpanel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.mode === \"vdk\" &&\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: (this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\"),\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: (this.documentPanelSize = this.mainSize === \"small\" ? \"medium\" : \"large\"),\r\n    });\r\n  };\r\n\r\n  private expandContent = () => {\r\n    this.dsoMainPanelExpand.emit({\r\n      expand: !this.mainPanelExpanded,\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                    {viewerGridTabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && (this.activeTab === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            documentPanelOpen={this.documentPanelOpen}\r\n            mainPanelExpanded={this.mainPanelExpanded}\r\n            mainPanelHidden={this.mainPanelHidden}\r\n            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            expandContent={this.expandContent}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={this.handleFilterpanelApply}\r\n          onCancel={this.handleFilterpanelCancel}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n          <DocumentPanel\r\n            tabView={this.tabView}\r\n            panelSize={this.documentPanelSize}\r\n            shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n            expandDocumentPanel={this.expandDocumentPanel}\r\n            dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n          ></DocumentPanel>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}
+{"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","h","class","onTransitionEnd","e","propertyName","emit","currentSize","type","onClick","icon","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","ref","id","preventDefault","MainPanel","mode","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","expandContent","toggleMainPanel","dsoMainSizeChangeAnimationEnd","clsx","compact","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","this","mediaCondition","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","documentPanelSize","dsoMainPanelExpand","expand","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","window","innerWidth","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","_a","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","filterpanelOpen","overlayOpen","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","Fragment","key","activeTab"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  main: \"Hoofdpaneel\",\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <div class=\"sizing-buttons\">\r\n        <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n          Breedte documentpaneel: {viewerGridSizeLabelMap[panelSize]}\r\n        </span>\r\n        {panelSize !== \"small\" && (\r\n          <button type=\"button\" class=\"shrink\" onClick={shrinkDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        )}\r\n        {panelSize !== \"large\" && (\r\n          <button type=\"button\" class=\"expand\" onClick={expandDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n        )}\r\n      </div>\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridMode,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  mode: ViewerGridMode;\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n  expandContent: () => void;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  mode,\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  shrinkMain,\r\n  expandMain,\r\n  expandContent,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView &&\r\n      (!documentPanelOpen ? (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte {mode === \"vdk\" ? \"zoeken paneel\" : \"hoofdpaneel\"}: {viewerGridSizeLabelMap[mainSize]}\r\n          </span>\r\n          {mainSize !== \"small\" && (\r\n            <button type=\"button\" class=\"shrink\" onClick={shrinkMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n          )}\r\n          {mainSize !== \"large\" && (\r\n            <button type=\"button\" class=\"expand\" onClick={expandMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </div>\r\n      ) : (\r\n        <div class=\"toggle-button\">\r\n          <button type=\"button\" onClick={toggleMainPanel}>\r\n            <span class=\"sr-only\">\r\n              {mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} {mainPanelHidden ? \"Tonen\" : \"Verbergen\"}\r\n            </span>\r\n            <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n          </button>\r\n        </div>\r\n      ))}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n      {!tabView && documentPanelOpen && (\r\n        <button class=\"dso-tertiary expand-button\" onClick={expandContent}>\r\n          <dso-icon icon={mainPanelExpanded ? \"chevron-up\" : \"chevron-down\"}></dso-icon>\r\n          <span>{mainPanelExpanded ? \"Verberg\" : \"Toon\"} documenten op gekozen locatie</span>\r\n        </button>\r\n      )}\r\n      {documentPanelOpen && mainPanelExpanded && <slot name=\"main-expanded\" />}\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n  .overlay {\r\n    height: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    height: 100%;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      left: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    height: 100%;\r\n  }\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    left: calc(100% + 1px);\r\n    transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n    padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-bottom-right-radius: 4px;\r\n      border-top-right-radius: 4px;\r\n    }\r\n  }\r\n\r\n  .expand-button {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    padding-block: units.$u2;\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    right: calc(100% + 1px);\r\n    transition: right core-viewer-grid-variables.$transition-time ease-in;\r\n    padding: 0 0 units.$u1 * 0.5 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-bottom-left-radius: 4px;\r\n      border-top-left-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  height: 100%;\r\n  margin-block: 0;\r\n  max-height: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-width: unset;\r\n      max-width: unset;\r\n      width: 440px;\r\n\r\n      .content {\r\n        height: auto;\r\n        overflow-y: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n    padding-right: units.$u1;\r\n\r\n    .content {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n    width: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n      left: core-viewer-grid-variables.$filterpanel-max-width;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n        left: auto;\r\n        width: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    width: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    font-weight: 300;\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-width: 100vw;\r\n    top: 0;\r\n    width: 100vw;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridVdkTab,\r\n  ViewerGridVrkTab,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridMode,\r\n  viewerGridTabLabelMap,\r\n  viewerGridVdkTabs,\r\n  viewerGridVrkTabs,\r\n  ViewerGridTab,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50)\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n * @slot main-expanded - VDK only\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * VRK or VDK implementation.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterpanelSlot() {\r\n    return this.host.querySelector(\"[slot='filterpanel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.mode === \"vdk\" &&\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: (this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\"),\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: (this.documentPanelSize = this.mainSize === \"small\" ? \"medium\" : \"large\"),\r\n    });\r\n  };\r\n\r\n  private expandContent = () => {\r\n    this.dsoMainPanelExpand.emit({\r\n      expand: !this.mainPanelExpanded,\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                    {viewerGridTabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && (this.activeTab === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            documentPanelOpen={this.documentPanelOpen}\r\n            mainPanelExpanded={this.mainPanelExpanded}\r\n            mainPanelHidden={this.mainPanelHidden}\r\n            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            expandContent={this.expandContent}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={this.handleFilterpanelApply}\r\n          onCancel={this.handleFilterpanelCancel}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n          <DocumentPanel\r\n            tabView={this.tabView}\r\n            panelSize={this.documentPanelSize}\r\n            shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n            expandDocumentPanel={this.expandDocumentPanel}\r\n            dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n          ></DocumentPanel>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-e45febe8.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as s,h as t,F as l,f as o,a as c}from"./p-3ca5b6f4.js";import{c as a}from"./p-c87b4d11.js";const i=":host{display:block;background-color:#f2f2f2;color:#000;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host(:not([active]):not([fixed])){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";const d=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,null,t("slot",null),!this.fixed&&t("button",{type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"Sluiten")))}};d.style=i;function b(){return Math.random().toString(16).slice(-4)}function n(e){return`${e}-${b()}${b()}-${b()}-${b()}-${b()}-${b()}${b()}${b()}`}const r='.sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-height:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}';const p=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=n("DsoSelectable");this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,null,t("div",{class:a("dso-selectable-container",{"has-info-button":s})},t("div",{class:a("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:e=>this.dsoChange.emit(e),onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null)),s&&t(l,null,!this.infoFixed&&t("dso-info-button",{active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active}))),s&&t("dso-info",{id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",null,t("slot",{name:"info"}))))}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};p.style=r;export{d as dso_info,p as dso_selectable};
+//# sourceMappingURL=p-e45febe8.entry.js.map

package/dist/dso-toolkit/p-e45febe8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["infoCss","Info","render","h","Fragment","this","fixed","type","onClick","e","dsoClose","emit","icon","class","chr4","Math","random","toString","slice","createIdentifier","prefix","selectableCss","Selectable","fallbackIdentifier","toggleInfo","active","infoActive","componentDidLoad","_a","mutationObserver","disconnect","MutationObserver","forceUpdate","host","observe","childList","setIndeterminate","disconnectedCallback","input","HTMLInputElement","indeterminate","hasInfo","querySelector","clsx","keyboardFocus","id","getIdentifier","value","name","invalid","infoFixed","describedById","undefined","labelledById","disabled","required","checked","onChange","dsoChange","onBlur","onKeyUp","ref","el","htmlFor","onDsoToggle","detail","onDsoClose","identifier"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active]):not([fixed])) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  @include selectable.root(\"dso-info\", false);\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    @include selectable.invalid();\r\n  }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n  @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n  display: inline-block;\r\n  position: relative;\r\n  padding-inline-start: units.$u4;\r\n\r\n  &.has-info-button {\r\n    padding-inline-end: units.$u4;\r\n  }\r\n\r\n  .dso-selectable-input-wrapper {\r\n    display: inline-block;\r\n    min-height: units.$u3;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      @include utilities.focus-outline();\r\n    }\r\n\r\n    input[type=\"radio\"],\r\n    input[type=\"checkbox\"] {\r\n      &:focus + label::before {\r\n        @include selectable.selectableBoxShadow(\r\n          selectable.$border-width,\r\n          var(--dso-selectable-color, selectable.$valid-color)\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndso-info-button {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop()\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={(e) => this.dsoChange.emit(e)}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot></slot>\r\n              </label>\r\n            ) : (\r\n              <label></label>\r\n            )}\r\n          </div>\r\n          {hasInfo && (\r\n            <Fragment>\r\n              {!this.infoFixed && (\r\n                <dso-info-button\r\n                  active={this.infoActive}\r\n                  onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n                ></dso-info-button>\r\n              )}\r\n            </Fragment>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"],"mappings":"2GAAA,MAAMA,EAAU,kqB,MCOHC,EAAI,M,uGAmBf,MAAAC,GACE,OACEC,EAACC,EAAQ,KACPD,EAAA,cACEE,KAAKC,OACLH,EAAA,UAAQI,KAAK,SAASC,QAAUC,GAAMJ,KAAKK,SAASC,KAAKF,IACvDN,EAAA,YAAUS,KAAK,UACfT,EAAA,QAAMU,MAAM,WAAS,Y,sBC9BjBC,IACd,OAAOC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAC3C,C,SAMgBC,EAAiBC,GAC/B,MAAO,GAAGA,KAAUN,MAASA,OAAUA,OAAUA,OAAUA,OAAUA,MAASA,MAASA,KACzF,CCbA,MAAMO,EAAgB,mtL,MCsBTC,EAAU,M,8DA0GbjB,KAAAkB,mBAAqBJ,EAAiB,iB,oTAlBjC,M,mBAGG,K,CAShB,gBAAMK,CAAWC,GACfpB,KAAKqB,WAAaD,IAAM,MAANA,SAAM,EAANA,GAAWpB,KAAKqB,U,CASpC,gBAAAC,G,OACEC,EAAAvB,KAAKwB,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,aAEvBzB,KAAKwB,iBAAmB,IAAIE,kBAAiB,IAAMC,EAAY3B,KAAK4B,QACpE5B,KAAKwB,iBAAiBK,QAAQ7B,KAAK4B,KAAM,CACvCE,UAAW,OAGb9B,KAAK+B,kB,CAGP,oBAAAC,G,OACET,EAAAvB,KAAKwB,oBAAgB,MAAAD,SAAA,SAAAA,EAAEE,Y,CAIzB,gBAAAM,GACE,KAAM/B,KAAKiC,iBAAiBC,mBAAqBlC,KAAKE,OAAS,WAAY,CACzE,M,CAGFF,KAAKiC,MAAME,gBAAkBnC,KAAKmC,a,CAGpC,MAAAtC,G,MACE,MAAMuC,IAAYpC,KAAK4B,KAAKS,cAAc,iBAE1C,OACEvC,EAACC,EAAQ,KACPD,EAAA,OAAKU,MAAO8B,EAAK,2BAA4B,CAAE,kBAAmBF,KAChEtC,EAAA,OAAKU,MAAO8B,EAAK,+BAAgC,CAAE,qBAAsBtC,KAAKuC,iBAC5EzC,EAAA,SACEI,KAAMF,KAAKE,KACXsC,GAAIxC,KAAKyC,gBACTC,MAAO1C,KAAK0C,MACZC,KAAM3C,KAAK2C,KAAI,gBACDpB,EAAAvB,KAAK4C,WAAO,MAAArB,SAAA,SAAAA,EAAEX,WAAU,mBACpBwB,GAAWpC,KAAK6C,UAAY7C,KAAK8C,cAAgBC,UAAS,kBAC3D/C,KAAKgD,aACtBC,SAAUjD,KAAKiD,SACfC,SAAUlD,KAAKkD,SACfC,QAASnD,KAAKmD,QACdC,SAAWhD,GAAMJ,KAAKqD,UAAU/C,KAAKF,GACrCkD,OAAQ,IAAOtD,KAAKuC,cAAgB,MACpCgB,QAAS,IAAOvD,KAAKuC,cAAgB,KACrCiB,IAAMC,GAAQzD,KAAKiC,MAAQwB,KAE3BzD,KAAKgD,aACLlD,EAAA,SAAO4D,QAAS1D,KAAKyC,iBACnB3C,EAAA,cAGFA,EAAA,eAGHsC,GACCtC,EAACC,EAAQ,MACLC,KAAK6C,WACL/C,EAAA,mBACEsB,OAAQpB,KAAKqB,WACbsC,YAAcvD,GAAOJ,KAAKqB,WAAajB,EAAEwD,OAAOxC,WAMzDgB,GACCtC,EAAA,YACE0C,GAAIJ,GAAWpC,KAAK6C,UAAY7C,KAAK8C,cAAgBC,UACrD9C,MAAOD,KAAK6C,UACZzB,OAAQpB,KAAKqB,WACbwC,WAAY,IAAO7D,KAAKqB,WAAa,OAErCvB,EAAA,WACEA,EAAA,QAAM6C,KAAK,W,CAQf,aAAAF,G,MACN,OAAOlB,EAAAvB,KAAK8D,cAAU,MAAAvC,SAAA,EAAAA,EAAIvB,KAAKkB,kB"}