@dso-toolkit/core 81.0.0 → 82.0.0

package/dist/dso-toolkit/p-4f87903d.entry.js

@@ -0,0 +1,2 @@
+import{a as t,f as e,r as o,h as s,H as n,g as r}from"./p-DxWmN7gh.js";const c=(t,e,o)=>{const s=t.get(e);if(!s){t.set(e,[o])}else if(!s.includes(o)){s.push(o)}};const a=(t,e)=>{let o;return(...s)=>{if(o){clearTimeout(o)}o=setTimeout((()=>{o=0;t(...s)}),e)}};const i=t=>!("isConnected"in t)||t.isConnected;const d=a((t=>{for(let e of t.keys()){t.set(e,t.get(e).filter(i))}}),2e3);const f=()=>{if(typeof t!=="function"){return{}}const o=new Map;return{dispose:()=>o.clear(),get:e=>{const s=t();if(s){c(o,e,s)}},set:t=>{const s=o.get(t);if(s){o.set(t,s.filter(e))}d(o)},reset:()=>{o.forEach((t=>t.forEach(e)));d(o)}}};const l=t=>typeof t==="function"?t():t;const u=(t,e=(t,e)=>t!==e)=>{const o=l(t);let s=new Map(Object.entries(o??{}));const n={dispose:[],get:[],set:[],reset:[]};const r=new Map;const c=()=>{s=new Map(Object.entries(l(t)??{}));n.reset.forEach((t=>t()))};const a=()=>{n.dispose.forEach((t=>t()));c()};const i=t=>{n.get.forEach((e=>e(t)));return s.get(t)};const d=(t,o)=>{const r=s.get(t);if(e(o,r,t)){s.set(t,o);n.set.forEach((e=>e(t,o,r)))}};const f=typeof Proxy==="undefined"?{}:new Proxy(o,{get(t,e){return i(e)},ownKeys(t){return Array.from(s.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,e){return s.has(e)},set(t,e,o){d(e,o);return true}});const u=(t,e)=>{n[t].push(e);return()=>{p(n[t],e)}};const b=(e,o)=>{const s=(t,s)=>{if(t===e){o(s)}};const n=()=>o(l(t)[e]);const c=u("set",s);const a=u("reset",n);r.set(o,{setHandler:s,resetHandler:n,propName:e});return()=>{c();a();r.delete(o)}};const g=(...t)=>{const e=t.reduce(((t,e)=>{if(e.set){t.push(u("set",e.set))}if(e.get){t.push(u("get",e.get))}if(e.reset){t.push(u("reset",e.reset))}if(e.dispose){t.push(u("dispose",e.dispose))}return t}),[]);return()=>e.forEach((t=>t()))};const h=t=>{const e=s.get(t);n.set.forEach((o=>o(t,e,e)))};const m=(t,e)=>{const o=r.get(e);if(o&&o.propName===t){p(n.set,o.setHandler);p(n.reset,o.resetHandler);r.delete(e)}};return{state:f,get:i,set:d,on:u,onChange:b,use:g,dispose:a,reset:c,forceUpdate:h,removeListener:m}};const p=(t,e)=>{const o=t.indexOf(e);if(o>=0){t[o]=t[t.length-1];t.length--}};const b=(t,e)=>{const o=u(t,e);o.use(f());return o};const g=":host{display:block;margin-block-end:var(--_dso-accordion-margin-block-end, 32px)}*,*::after,*::before{box-sizing:border-box}::slotted(dso-accordion-section:not(:first-child,.dso-accordion-compact,.dso-accordion-compact-black)){margin-block-start:4px}::slotted(dso-accordion-section.dso-accordion-compact:last-child),::slotted(dso-accordion-section.dso-accordion-compact-black:last-child){border-block-end:1px solid #ccc}";const h=class{constructor(t){o(this,t);const{state:e}=b({variant:"default",reverseAlign:false});this.accordionState=e}get variant(){return this.accordionState.variant}set variant(t){this.accordionState.variant=t||"default"}get reverseAlign(){return this.accordionState.reverseAlign}set reverseAlign(t){this.accordionState.reverseAlign=t||false}async _getState(){return this.accordionState}render(){return s(n,{key:"a86cfcda16f93c5bb818a2c5b3566f8a493c77d8"},s("slot",{key:"e171013f8b1a480c9ceb386a4fa820ab3e04647a"}))}get host(){return r(this)}};h.style=g;export{h as dso_accordion};
+//# sourceMappingURL=p-4f87903d.entry.js.map

package/dist/dso-toolkit/p-4f87903d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["appendToMap","map","propName","value","items","get","set","includes","push","debounce","fn","ms","timeoutId","args","clearTimeout","setTimeout","isConnected","maybeElement","cleanupElements","key","keys","filter","stencilSubscription","getRenderingRef","elmsToUpdate","Map","dispose","clear","elm","elements","forceUpdate","reset","forEach","elms","unwrap","val","createObservableMap","defaultState","shouldUpdate","a","b","unwrappedState","states","Object","entries","handlers","changeListeners","cb","oldValue","state","Proxy","_","ownKeys","Array","from","getOwnPropertyDescriptor","enumerable","configurable","has","on","eventName","callback","removeFromArray","onChange","setHandler","newValue","resetHandler","unSet","unReset","delete","use","subscriptions","unsubs","reduce","subscription","unsub","removeListener","listener","listenerInfo","array","item","index","indexOf","length","createStore","accordionCss","Accordion","constructor","hostRef","variant","reverseAlign","this","accordionState","_getState","render","h","Host"],"sources":["../../node_modules/@stencil/store/dist/index.js","src/components/accordion/accordion.scss?tag=dso-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2_000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst unwrap = (val) => (typeof val === 'function' ? val() : val);\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    const unwrappedState = unwrap(defaultState);\n    let states = new Map(Object.entries(unwrappedState ?? {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    // Track onChange listeners to enable removeListener functionality\n    const changeListeners = new Map();\n    const reset = () => {\n        // When resetting the state, the default state may be a function - unwrap it to invoke it.\n        // otherwise, the state won't be properly reset\n        states = new Map(Object.entries(unwrap(defaultState) ?? {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(unwrappedState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const setHandler = (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        };\n        const resetHandler = () => cb(unwrap(defaultState)[propName]);\n        // Register the handlers\n        const unSet = on('set', setHandler);\n        const unReset = on('reset', resetHandler);\n        // Track the relationship between the user callback and internal handlers\n        changeListeners.set(cb, { setHandler, resetHandler, propName });\n        return () => {\n            unSet();\n            unReset();\n            changeListeners.delete(cb);\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    const removeListener = (propName, listener) => {\n        const listenerInfo = changeListeners.get(listener);\n        if (listenerInfo && listenerInfo.propName === propName) {\n            // Remove the specific handlers that were created for this listener\n            removeFromArray(handlers.set, listenerInfo.setHandler);\n            removeFromArray(handlers.reset, listenerInfo.resetHandler);\n            changeListeners.delete(listener);\n        }\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n        removeListener,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"accordion.variables\" as accordion-variables;\r\n\r\n:host {\r\n  display: block;\r\n  margin-block-end: var(--_dso-accordion-margin-block-end, units.$block-spacing-xlarge);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(dso-accordion-section:not(:first-child, .dso-accordion-compact, .dso-accordion-compact-black)) {\r\n  margin-block-start: units.$u1 * 0.5;\r\n}\r\n\r\n::slotted(dso-accordion-section.dso-accordion-compact:last-child),\r\n::slotted(dso-accordion-section.dso-accordion-compact-black:last-child) {\r\n  border-block-end: 1px solid accordion-variables.$compact-border-color;\r\n}\r\n","import { Component, ComponentInterface, Element, Host, Method, Prop, h } from \"@stencil/core\";\r\nimport { createStore } from \"@stencil/store\";\r\n\r\nimport { AccordionInternalState, AccordionVariant } from \"./accordion.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private readonly accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({\r\n      variant: \"default\",\r\n      reverseAlign: false,\r\n    });\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop()\r\n  get variant(): AccordionVariant {\r\n    return this.accordionState.variant;\r\n  }\r\n  set variant(value: AccordionVariant) {\r\n    this.accordionState.variant = value || \"default\";\r\n  }\r\n\r\n  /**\r\n   * Places the chevron at the opposite side.\r\n   *\r\n   * Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections\r\n   */\r\n  @Prop()\r\n  get reverseAlign() {\r\n    return this.accordionState.reverseAlign;\r\n  }\r\n  set reverseAlign(value: boolean) {\r\n    this.accordionState.reverseAlign = value || false;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-5a7ce367.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as n,f as t,h as s,F as c,H as d,g as e}from"./p-DxWmN7gh.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i='*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block;--_dso-accordion-margin-block-end:0}: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-visible{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{color:#000;font-size:14px;font-weight:400}: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-block:12px;padding-inline:16px;text-align:start;inline-size:100%;overflow-wrap:anywhere}: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) 0ms;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-inline-end:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-inline-start: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-inline-start:8px}:host .dso-section-handle>button>dso-label,:host .dso-section-handle>a>dso-label{margin-inline-start:auto;padding-inline-start:8px;word-break:normal}:host .dso-section-handle>button>dso-label+dso-icon:last-child,:host .dso-section-handle>button>dso-label+.dso-section-handle-addons:last-child,:host .dso-section-handle>a>dso-label+dso-icon:last-child,:host .dso-section-handle>a>dso-label+.dso-section-handle-addons:last-child{margin-inline-start:8px}: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-block-start:0}.dso-section-body .dso-section-body-content{padding-block:20px 16px;padding-inline:16px}:host(.dso-accordion-default){border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;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-handle .dso-status{text-decoration:underline}:host(.dso-accordion-default) .dso-section-body{border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0}: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-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-block-end:11px;padding-inline-start:0;padding-block-start: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-handle .dso-status{color:#000}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end: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-inline:16px 0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end: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-block-start:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider){color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start: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:not(.dso-slider):hover,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider):active,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider).active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider){color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a:hover,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a:active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a.active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider):hover,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider):active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider).active{color:#000}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle{display:flex}:host(.dso-accordion-compact-black.dso-accordion-section-activate) dso-slide-toggle{margin-block-start:11px;margin-inline:8px}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe){background-color:#e4f1d4}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) .dso-section-body{background-color:#e4f1d4}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){font-family:sans-serif}}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){background-color:#f5d8dc}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) .dso-section-body{background-color:#f5d8dc}: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-inline:16px 0}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end: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-block-start:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end: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-block:5px;padding-inline: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{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body[open],:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide){background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:-2px 0}:host(.dso-accordion-neutral) .dso-section-body[open].dso-animate-ready,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide).dso-animate-ready{transition-property:grid-template-rows, margin-block, border, opacity}:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:16px}@media screen and (min-width: 480px){:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:32px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-start-start-radius:4px;border-start-end-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 r=window["_dsoLog"]===true?console.log.bind(console.log):function(){};const l=({handleUrl:o,onClick:n,open:t,showSlideToggle:d,active:e,onActiveChange:a,handleElementRef:i},r)=>{if(o){return s(c,null,s("a",{href:o,onClick:n,"aria-expanded":t?"true":"false",ref:i},r),d&&s("dso-slide-toggle",{accessibleLabel:"Toon op kaart",checked:e,onDsoActiveChange:a}))}return s(c,null,s("button",{type:"button",onClick:n,"aria-expanded":t?"true":"false",ref:i},r),d&&s("dso-slide-toggle",{accessibleLabel:"Toon op kaart",checked:e,onDsoActiveChange:a}))};const h=({heading:o,ref:n},t)=>{switch(o){default:case"h2":return s("h2",{ref:n,class:"dso-section-handle"},t);case"h3":return s("h3",{ref:n,class:"dso-section-handle"},t);case"h4":return s("h4",{ref:n,class:"dso-section-handle"},t);case"h5":return s("h5",{ref:n,class:"dso-section-handle"},t)}};const p=({state:o,icon:n,attachmentCount:t})=>{if(o){return s(b,{state:o})}if(t){return s("dso-attachments-counter",{count:t})}if(n){return s("dso-icon",{icon:n})}};const b=({state:o})=>{if(o==="error"){return s("dso-icon",{icon:"status-error"})}if(o==="danger"){return s("dso-icon",{icon:"status-danger"})}if(o==="success"){return s("dso-icon",{icon:"status-success"})}if(o==="info"){return s("dso-icon",{icon:"status-info"})}if(o==="warning"){return s("dso-icon",{icon:"status-warning"})}};const u=class{constructor(t){o(this,t);this.dsoActiveChange=n(this,"dsoActiveChange",7);this.dsoToggleClick=n(this,"dsoToggleClick",3);this.dsoAnimationStart=n(this,"dsoAnimationStart",3);this.dsoAnimationEnd=n(this,"dsoAnimationEnd",3);this.heading="h2";this.open=false;this.hasNestedAccordion=false;this.activatable=false;this.active=false;this.hover=false;this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:Boolean(this.active),next:!this.active,originalEvent:o})};this.handleExpandableAnimationStart=o=>{this.dsoAnimationStart.emit({animation:this.open?"opening":"closing",scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})}}async focusHandle(){var o;(o=this.handleElementRef)===null||o===void 0?void 0:o.focus()}get containsNestedAccordion(){return this.host.querySelector("dso-accordion")!==null}componentWillLoad(){var o;(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,n="auto"){var t,s;r(`DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(o)}, behavior: ${JSON.stringify(n)})`);const c=(t=this.sectionBody)===null||t===void 0?void 0:t.getBoundingClientRect();const d=(s=this.sectionHeading)===null||s===void 0?void 0:s.getBoundingClientRect();r(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(c)};`);r(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(d)};`);r(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);r(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);if(!c||!d||!this.accordionState){r(`DSO Toolkit [Accordion Section] returning`);return}const e=d.top+d.height+(this.open?o!==null&&o!==void 0?o:0:0);r(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(e)};`);r(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);const a=this.host.getBoundingClientRect();const i=window.scrollY||document.documentElement.scrollTop||document.body.scrollTop;const l=document.documentElement.clientTop||document.body.clientTop||0;const h=a.top+i-l;r("DSO Toolkit [Accordion Section] scroll",{box:a,scrollTop:i,clientTop:l,top:h});if(e>window.innerHeight){r(`DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(e>window.innerHeight)};`);const o=e-d.top;const t=o>window.innerHeight;r(`DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(o)};`);r(`DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(t)};`);window.scrollTo({top:t?h:h-(window.innerHeight-o),behavior:n})}else if(d.top<0){r(`DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(d.top<0)};`);window.scrollTo({top:h,behavior:n})}}get accordion(){return this.host.closest("dso-accordion")}render(){var o;const{variant:n,reverseAlign:t}=(o=this.accordionState)!==null&&o!==void 0?o:{};const e=!!this.statusDescription||!!this.status||!!this.icon||!!this.attachmentCount;const i=this.activatable&&n==="compact-black"&&!t;return s(d,{key:"2e65f0a85688c2d52a1a337e90fdce86870bf713",class:{"dso-accordion-section":true,["dso-accordion-"+n]:!!n,"dso-nested-accordion":this.hasNestedAccordion||this.containsNestedAccordion,"dso-accordion-reverse-align":t!==null&&t!==void 0?t:false,["dso-accordion-wijzigactie-"+this.wijzigactie]:!!this.wijzigactie,"dso-accordion-section-activate":i},hidden:!n,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},s(h,{key:"0ba35033762292d6467ba90f7df97e169c870db5",heading:this.heading,ref:o=>this.sectionHeading=o},s(l,{key:"95c07f60960daf7d2718e6bd4fdd4723b1b9a1c3",handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open,showSlideToggle:i,active:this.active,onActiveChange:this.handleActiveChange,handleElementRef:o=>this.handleElementRef=o},t?s(c,null,this.icon&&s("div",{class:"dso-section-handle-addons"},s(p,{icon:this.icon})),s("dso-renvooi",{value:this.handleTitle}),this.label&&s("dso-label",{status:this.labelStatus,compact:true},this.label),s("div",{class:"dso-section-handle-addons"},this.statusDescription&&s("span",{class:"dso-status"},this.statusDescription),s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"}))):s(c,null,s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&s("span",{class:"sr-only"},a[this.status]),s("span",null,s("dso-renvooi",{value:this.handleTitle}),this.isNeutral&&s("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),this.label&&s("dso-label",{status:this.labelStatus,compact:true},this.label),e&&s("div",{class:"dso-section-handle-addons"},this.statusDescription&&s("span",{class:"dso-status"},this.statusDescription),s(p,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),s("dso-expandable",{key:"72113b4b9c53aa6ca84d481464e0e1bc39e57c6d",class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationStart:this.handleExpandableAnimationStart,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},s("div",{key:"6a2e4e4ab8bace1e7ba6784c81bb1c1171774ffc",class:"dso-section-body-content",ref:o=>this.sectionBody=o},s("slot",{key:"9e5190299f7eda51678bf06e172525fd378b05e8"}))))}get host(){return e(this)}};u.style=i;export{u as dso_accordion_section};
+//# sourceMappingURL=p-5a7ce367.entry.js.map

package/dist/dso-toolkit/p-5a7ce367.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stateMap","success","info","warning","danger","error","accordionSectionCss","log","window","console","bind","HandleElement","handleUrl","onClick","open","showSlideToggle","active","onActiveChange","handleElementRef","children","h","Fragment","href","ref","accessibleLabel","checked","onDsoActiveChange","type","Handle","heading","class","HandleIcon","state","icon","attachmentCount","HandleStateIcon","count","AccordionSection","constructor","hostRef","this","hasNestedAccordion","activatable","hover","handleClick","event","dsoToggleClick","emit","originalEvent","handleActiveChange","dsoActiveChange","current","Boolean","next","handleExpandableAnimationStart","e","dsoAnimationStart","animation","scrollIntoView","behavior","detail","bodyHeight","handleExpandableAnimationEnd","dsoAnimationEnd","focusHandle","_a","focus","containsNestedAccordion","host","querySelector","componentWillLoad","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","JSON","stringify","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","innerHeight","box","scrollTop","scrollY","document","documentElement","body","clientTop","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","key","wijzigactie","hidden","onMouseenter","onMouseleave","element","value","handleTitle","label","labelStatus","compact","enableAnimation","minimumHeight","onDsoExpandableAnimationStart","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","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 type AccordionSectionWijzigactie = \"voegtoe\" | \"verwijder\";\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 AccordionSectionAnimationStartEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * Whether or not the Accordion opening or closing.\r\n   */\r\n  animation: \"opening\" | \"closing\";\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(behavior?: ScrollBehavior): 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\r\nexport interface AccordionSectionActiveChangeEvent {\r\n  /**\r\n   * De current status van de Accordion Section.\r\n   */\r\n  current: boolean;\r\n\r\n  /**\r\n   * De desired status van de Accordion Section.\r\n   */\r\n  next: boolean;\r\n\r\n  originalEvent: Event;\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/link\";\r\n\r\n@use \"../accordion.variables\" as accordion-variables;\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  --_dso-accordion-margin-block-end: 0;\r\n\r\n  .dso-section-handle {\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion-variables.$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 link.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      color: colors.$zwart;\r\n      font-size: typography.$font-size-small;\r\n      font-weight: 400;\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-variables.$handle-line-height;\r\n    margin: 0;\r\n    padding-block: accordion-variables.$block-padding;\r\n    padding-inline: accordion-variables.$inline-padding;\r\n    text-align: start;\r\n    inline-size: 100%;\r\n    overflow-wrap: anywhere;\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-inline-end: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-inline-start: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-inline-start: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-inline-start: units.$u1;\r\n      }\r\n    }\r\n\r\n    > dso-label {\r\n      margin-inline-start: auto;\r\n      padding-inline-start: units.$u1;\r\n      word-break: normal;\r\n\r\n      & + dso-icon:last-child,\r\n      & + .dso-section-handle-addons:last-child {\r\n        margin-inline-start: units.$u1;\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-block-start: 0;\r\n\r\n  .dso-section-body-content {\r\n    padding-block: units.$u2 + accordion-variables.$border-radius units.$u2;\r\n    padding-inline: 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-section-activate) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-activate();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-voegtoe();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-verwijder();\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  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { SlideToggleActiveEvent } from \"../../slide-toggle/slide-toggle.interfaces\";\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\n\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionActiveChangeEvent,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionAnimationStartEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  AccordionSectionWijzigactie,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  showSlideToggle: boolean;\r\n  active: boolean;\r\n  onActiveChange: (e: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => void;\r\n  handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, showSlideToggle, active, onActiveChange, handleElementRef }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <Fragment>\r\n        <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n          {children}\r\n        </a>\r\n        {showSlideToggle && (\r\n          <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Fragment>\r\n      <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n        {children}\r\n      </button>\r\n      {showSlideToggle && (\r\n        <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n      )}\r\n    </Fragment>\r\n  );\r\n};\r\n\r\nconst 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\r\nconst 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\r\nconst 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\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!: RenvooiValue | RenvooiValue[] | undefined;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the section is added or removed.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: AccordionSectionWijzigactie;\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  /**\r\n   * Set when this Accordion Section contains or will contain an Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasNestedAccordion = false;\r\n\r\n  /**\r\n   * The label to be displayed in the heading handle inside a Label (optional)\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The status of the Label in the heading handle (optional)\r\n   */\r\n  @Prop()\r\n  labelStatus?: LabelStatus;\r\n\r\n  /**\r\n   * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays\r\n   * on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false.\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable = false;\r\n\r\n  /**\r\n   * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is\r\n   * `activatable`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active = false;\r\n\r\n  /**\r\n   * An optional event listener for changes on the value of property `active`.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AccordionSectionActiveChangeEvent>;\r\n\r\n  /**\r\n   * Calling this method will set focus to the handle.\r\n   */\r\n  @Method()\r\n  async focusHandle() {\r\n    this.handleElementRef?.focus();\r\n  }\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  get containsNestedAccordion() {\r\n    return this.host.querySelector(\"dso-accordion\") !== null;\r\n  }\r\n\r\n  componentWillLoad() {\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, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n    log(\r\n      `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n        bodyHeight,\r\n      )}, behavior: ${JSON.stringify(behavior)})`,\r\n    );\r\n\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      log(`DSO Toolkit [Accordion Section] returning`);\r\n\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\r\n    log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n    log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n    const box = this.host.getBoundingClientRect();\r\n\r\n    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n    const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n    const top = box.top + scrollTop - clientTop;\r\n\r\n    log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n    if (sectionBottomY > window.innerHeight) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n          sectionBottomY > window.innerHeight,\r\n        )};`,\r\n      );\r\n\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n      );\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n          shouldScrollToTopOfSection,\r\n        )};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n        behavior,\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top,\r\n        behavior,\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 handleActiveChange = (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => {\r\n    this.dsoActiveChange.emit({\r\n      current: Boolean(this.active),\r\n      next: !this.active,\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n    this.dsoAnimationStart.emit({\r\n      animation: this.open ? \"opening\" : \"closing\",\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\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: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\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 starts its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\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  private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\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    const showSlideToggle = this.activatable && variant === \"compact-black\" && !reverseAlign;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: !!variant,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n          [\"dso-accordion-wijzigactie-\" + this.wijzigactie]: !!this.wijzigactie,\r\n          \"dso-accordion-section-activate\": showSlideToggle,\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\r\n            handleUrl={this.handleUrl}\r\n            onClick={this.handleClick}\r\n            open={this.open}\r\n            showSlideToggle={showSlideToggle}\r\n            active={this.active}\r\n            onActiveChange={this.handleActiveChange}\r\n            handleElementRef={(e) => (this.handleElementRef = e)}\r\n          >\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {this.icon && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n                <dso-renvooi value={this.handleTitle} />\r\n                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n                <div class=\"dso-section-handle-addons\">\r\n                  {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                  <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n                </div>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n                <span>\r\n                  <dso-renvooi value={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                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\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          onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\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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","ignoreList":[]}

package/dist/dso-toolkit/p-DrItCTMr.js

@@ -0,0 +1,2 @@
+import{h as e,F as n}from"./p-DxWmN7gh.js";const r=({mark:r,text:t,emitMarkItemHighlight:i})=>{const o=r(t);return!o||o.length===0?e(n,null,t):e(n,null,o.map((r=>{if(typeof r==="string"){return e(n,null,r)}return e("mark",{class:r.highlight?"dso-highlight":undefined,ref:e=>r.highlight&&e&&i(r.text,e)},r.text)})))};const t=new DOMParser;function i(e){if(!e){return undefined}const n=t.parseFromString(e,"application/xml");if(n.querySelector("parsererror")){console.error({message:"Unable to parse XML",input:e,document:n},null,2);return undefined}return n}function o(e){const n=e instanceof Element?e.getAttribute("wijzigactie"):undefined;return n==="voegtoe"||n==="verwijder"?n:undefined}export{r as M,o as a,i as p};
+//# sourceMappingURL=p-DrItCTMr.js.map

package/dist/dso-toolkit/p-DrItCTMr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-DrItCTMr.js","sources":["src/functional-components/mark-text/mark-text.functional-component.tsx","src/utils/parse-xml.ts","src/components/ozon-content/functions/parse-wijzigactie-from-node.function.ts"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { MarkTextMarkFunction } from \"./mark-text.interfaces\";\r\n\r\nexport interface MarkTextProps {\r\n  mark: MarkTextMarkFunction;\r\n  text: string;\r\n  emitMarkItemHighlight(text: string, elementRef: HTMLElement): void;\r\n}\r\n\r\nexport const MarkText: FunctionalComponent<MarkTextProps> = ({ mark, text, emitMarkItemHighlight }) => {\r\n  const result = mark(text);\r\n\r\n  return !result || result.length === 0 ? (\r\n    <Fragment>{text}</Fragment>\r\n  ) : (\r\n    <Fragment>\r\n      {result.map((value) => {\r\n        if (typeof value === \"string\") {\r\n          return <Fragment>{value}</Fragment>;\r\n        }\r\n\r\n        return (\r\n          <mark\r\n            class={value.highlight ? \"dso-highlight\" : undefined}\r\n            ref={(ref) => value.highlight && ref && emitMarkItemHighlight(value.text, ref)}\r\n          >\r\n            {value.text}\r\n          </mark>\r\n        );\r\n      })}\r\n    </Fragment>\r\n  );\r\n};\r\n","const parser = new DOMParser();\r\n\r\nexport function parseXml(input: string): XMLDocument | undefined {\r\n  if (!input) {\r\n    return undefined;\r\n  }\r\n\r\n  const doc = parser.parseFromString(input, \"application/xml\");\r\n\r\n  if (doc.querySelector(\"parsererror\")) {\r\n    console.error(\r\n      {\r\n        message: \"Unable to parse XML\",\r\n        input,\r\n        document: doc,\r\n      },\r\n      null,\r\n      2,\r\n    );\r\n\r\n    return undefined;\r\n  }\r\n\r\n  return doc;\r\n}\r\n","import { OzonContentWijzigActie } from \"../ozon-content.interfaces\";\r\n\r\nexport function parseWijzigactieFromNode(node: Node): OzonContentWijzigActie | undefined {\r\n  const wijzigactie = node instanceof Element ? node.getAttribute(\"wijzigactie\") : undefined;\r\n\r\n  return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\" ? wijzigactie : undefined;\r\n}\r\n"],"names":[],"mappings":";;AAUO,MAAM,QAAQ,GAAuC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAI;AACpG,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AAEzB,IAAA,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IACnC,CAAA,CAAC,QAAQ,EAAE,IAAA,EAAA,IAAI,CAAY,KAE3B,EAAC,QAAQ,EAAA,IAAA,EACN,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACpB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,CAAC,CAAA,QAAQ,EAAE,IAAA,EAAA,KAAK,CAAY;;AAGrC,QAAA,QACE,CACE,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,eAAe,GAAG,SAAS,EACpD,GAAG,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,SAAS,IAAI,GAAG,IAAI,qBAAqB,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,EAE7E,EAAA,KAAK,CAAC,IAAI,CACN;KAEV,CAAC,CACO,CACZ;AACH;;ACjCA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;AAExB,SAAU,QAAQ,CAAC,KAAa,EAAA;IACpC,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,OAAO,SAAS;;IAGlB,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,iBAAiB,CAAC;AAE5D,IAAA,IAAI,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE;QACpC,OAAO,CAAC,KAAK,CACX;AACE,YAAA,OAAO,EAAE,qBAAqB;YAC9B,KAAK;AACL,YAAA,QAAQ,EAAE,GAAG;AACd,SAAA,EACD,IAAI,EACJ,CAAC,CACF;AAED,QAAA,OAAO,SAAS;;AAGlB,IAAA,OAAO,GAAG;AACZ;;ACtBM,SAAU,wBAAwB,CAAC,IAAU,EAAA;AACjD,IAAA,MAAM,WAAW,GAAG,IAAI,YAAY,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,SAAS;AAE1F,IAAA,OAAO,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,WAAW,GAAG,WAAW,GAAG,SAAS;AAC3F;;;;"}

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

@@ -0,0 +1,2 @@
+import{r as n,c as o,h as e,F as r,g as a,H as t}from"./p-DxWmN7gh.js";import{A as s}from"./p-CtC5362R.js";import{w as i,A as d,a as l}from"./p-Dk013L7v.js";import{p as c,a as b,M as p}from"./p-DrItCTMr.js";import{i as m}from"./p-Hgv-pDpy.js";const f='a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const g=class{constructor(e){n(this,e);this.dsoActiveChange=o(this,"dsoActiveChange",7);this.watcher=i(this.host)}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const n=this.watcher.hasSymbool();return e(s,{key:"5dd14da69d583927dce47b326e4b78caf6f9f05d",symbol:n?e(l,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:e(r,null,e("span",{class:"content"},e("dso-renvooi",{value:this.locatieNoemer})),this.gewijzigdeLocatie&&e(d,null))})}get host(){return a(this)}};g.style=f;var h=undefined&&undefined.__rest||function(n,o){var e={};for(var r in n)if(Object.prototype.hasOwnProperty.call(n,r)&&o.indexOf(r)<0)e[r]=n[r];if(n!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,r=Object.getOwnPropertySymbols(n);a<r.length;a++){if(o.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(n,r[a]))e[r[a]]=n[r[a]]}return e};const y=(n,o)=>{var{heading:r,mode:a,href:t,onClick:s}=n,i=h(n,["heading","mode","href","onClick"]);let d;switch(r){default:case"h2":d=e("h2",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h3":d=e("h3",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h4":d=e("h4",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h5":d=e("h5",Object.assign({},i,{onClick:a==="document"?s:undefined}),o);break;case"h6":d=e("h6",Object.assign({},i,{onClick:a==="document"?s:undefined}),o)}if(a==="table-of-contents"&&t){return e("a",{href:t,onClick:s,class:"heading-anchor"},d)}return d};const u="button {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: var(--_dso-button-primary-background-color, #39870c);\n  border-color: var(--_dso-button-primary-border-color, #39870c);\n  color: var(--_dso-button-primary-color, #fff);\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: var(--_dso-button-primary-hover-background-color, #275937);\n  border-color: var(--_dso-button-primary-hover-border-color, #275937);\n  color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: var(--_dso-button-primary-active-background-color, #173521);\n  border-color: var(--_dso-button-primary-active-border-color, #173521);\n  color: var(--_dso-button-primary-active-color, #fff);\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,\nbutton.dso-primary.dso-extra-small dso-icon,\nbutton.dso-primary.dso-extra-small.extern::after,\nbutton.dso-primary.dso-extra-small.download::after,\nbutton.dso-primary.dso-extra-small.dso-spinner::before,\nlabel.dso-primary.dso-extra-small dso-icon,\nlabel.dso-primary.dso-extra-small.extern::after,\nlabel.dso-primary.dso-extra-small.download::after,\nlabel.dso-primary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-primary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-primary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-primary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-primary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./di.svg#download-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./di.svg#external-link-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,\nbutton.dso-secondary.dso-extra-small dso-icon,\nbutton.dso-secondary.dso-extra-small.extern::after,\nbutton.dso-secondary.dso-extra-small.download::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner::before,\nlabel.dso-secondary.dso-extra-small dso-icon,\nlabel.dso-secondary.dso-extra-small.extern::after,\nlabel.dso-secondary.dso-extra-small.download::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\"));\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: 2px;\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n  outline: 0;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-map:hover,\nbutton.dso-map:hover,\nlabel.dso-map:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-map[disabled], a.dso-map[disabled]:hover,\nbutton.dso-map[disabled],\nbutton.dso-map[disabled]:hover,\nlabel.dso-map[disabled],\nlabel.dso-map[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-map.dso-small,\nbutton.dso-map.dso-small,\nlabel.dso-map.dso-small {\n  line-height: 1rem;\n}\na.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,\nbutton.dso-map.dso-small dso-icon,\nbutton.dso-map.dso-small.extern::after,\nbutton.dso-map.dso-small.download::after,\nbutton.dso-map.dso-small.dso-spinner::before,\nlabel.dso-map.dso-small dso-icon,\nlabel.dso-map.dso-small.extern::after,\nlabel.dso-map.dso-small.download::after,\nlabel.dso-map.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-small.dso-spinner-left::before,\nbutton.dso-map.dso-small.dso-spinner-left::before,\nlabel.dso-map.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-small.dso-spinner-right::after,\nbutton.dso-map.dso-small.dso-spinner-right::after,\nlabel.dso-map.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,\nbutton.dso-map.dso-extra-small dso-icon,\nbutton.dso-map.dso-extra-small.extern::after,\nbutton.dso-map.dso-extra-small.download::after,\nbutton.dso-map.dso-extra-small.dso-spinner::before,\nlabel.dso-map.dso-extra-small dso-icon,\nlabel.dso-map.dso-extra-small.extern::after,\nlabel.dso-map.dso-extra-small.download::after,\nlabel.dso-map.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-extra-small.dso-spinner-left::before,\nbutton.dso-map.dso-extra-small.dso-spinner-left::before,\nlabel.dso-map.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small.dso-spinner-right::after,\nbutton.dso-map.dso-extra-small.dso-spinner-right::after,\nlabel.dso-map.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-map dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-map dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-map dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-map span:not(.sr-only) + dso-icon,\nbutton.dso-map span:not(.sr-only) + dso-icon,\nlabel.dso-map span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-map dso-icon + span:not(.sr-only),\nbutton.dso-map dso-icon + span:not(.sr-only),\nlabel.dso-map dso-icon + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],\nbutton.dso-map.dso-spinner-left[disabled],\nbutton.dso-map.dso-spinner-right[disabled],\nlabel.dso-map.dso-spinner-left[disabled],\nlabel.dso-map.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-map.dso-spinner-left::before,\nbutton.dso-map.dso-spinner-left::before,\nlabel.dso-map.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-map.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-spinner-right::after,\nbutton.dso-map.dso-spinner-right::after,\nlabel.dso-map.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  border: 0;\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding-block: 8px;\n  padding-inline: 16px;\n  white-space: nowrap;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: -1px;\n}\na.dso-map:has(span.sr-only):has(dso-icon),\nbutton.dso-map:has(span.sr-only):has(dso-icon),\nlabel.dso-map:has(span.sr-only):has(dso-icon) {\n  padding: 8px;\n  min-inline-size: auto;\n  block-size: 40px;\n  inline-size: 40px;\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #275937;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\nmark {\n  background-color: var(--_dt-mark-bg-color, #f8f5ce);\n  color: var(--_dt-mark-color, #000);\n  padding-block: var(--_dt-mark-padding-block, 0.2rem);\n  font-weight: var(--_dt-mark-font-weight, normal);\n}\nmark.dso-highlight {\n  background-color: #dbd136;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n:host {\n  display: block;\n  --depth: var(--a, 0);\n}\n\n:host([not-collapsible]:where([wijzigactie=verwijder], [wijzigactie=voegtoe])) {\n  padding-inline-start: 8px;\n  margin-inline-end: 8px;\n}\n\n:host(:where([wijzigactie=verwijder], [wijzigactie=voegtoe])),\n:host(:where([wijzigactie=nieuweContainer], [wijzigactie=verwijderContainer])) .heading-container {\n  padding-block-start: 4px;\n  padding-block-end: 4px;\n}\n\n:host([wijzigactie=verwijderContainer]) .heading-container,\n:host(:where([wijzigactie=verwijder])) {\n  --_dso-document-component-text-decoration: line-through;\n}\n:host([wijzigactie=verwijderContainer]) .heading-container,\n:host(:where([wijzigactie=verwijder])) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #f5d8dc;\n  color: #191919;\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\n:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\n:host([wijzigactie=verwijderContainer]) .heading-container,\n:host(:where([wijzigactie=verwijder])) {\n  --_dso-ozon-content-toggletip-color: colors.$zwart;\n}\n\n.heading-element,\n.content {\n  text-decoration: var(--_dso-document-component-text-decoration);\n  --_dso-ozon-content-toggletip-text-decoration: underline var(--_dso-document-component-text-decoration);\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n  .heading-element,\n  .content {\n    font-family: sans-serif;\n  }\n}\n\n:host([wijzigactie=nieuweContainer]) .heading-container,\n:host([wijzigactie=voegtoe]) {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #191919;\n  --_dso-icon-button-tertiary-hover-color: #4c4c4c;\n  --_dso-icon-button-tertiary-active-color: #173521;\n  --_dso-icon-button-tertiary-disabled-color: #999;\n  background-color: #e4f1d4;\n  color: #191919;\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\n:host([wijzigactie=nieuweContainer]) .heading-container,\n:host([wijzigactie=voegtoe]) {\n  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);\n  --_dso-ozon-content-toggletip-color: colors.$zwart;\n}\n\n:host([filtered]) {\n  position: relative;\n}\n:host([filtered])::before {\n  content: \"\";\n  inset-inline-start: -3px;\n  position: absolute;\n  display: block;\n  inline-size: 3px;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  background-color: #6ca4d9;\n}\n\n:host([open]) .annotation-container,\n:host([open]) .heading-container,\n:host([open-annotation]) .annotation-container,\n:host([open-annotation]) .heading-container {\n  margin-block-end: 8px;\n}\n\n:host(:not([open])) dso-ozon-content::part(_subtitels),\n:host([mode=table-of-contents]) dso-ozon-content::part(_subtitels) {\n  display: none;\n}\n\n.recursive-toggle,\n.toggle-button {\n  --_dso-icon-button-tertiary-color: #275937;\n  border: 0;\n  padding: 0;\n  background: 0;\n  color: #275937;\n}\n\n.heading-anchor {\n  display: flex;\n  flex-wrap: nowrap;\n  background-color: transparent;\n  color: var(--link-color);\n  text-decoration: underline;\n  text-underline-offset: 15%;\n  text-decoration: none;\n}\n.heading-anchor:hover, .heading-anchor:focus-visible {\n  color: var(--link-hover-color);\n  text-decoration: underline;\n}\n.heading-anchor:active {\n  text-decoration: none;\n}\n.heading-anchor dso-icon + span,\n.heading-anchor span + dso-icon {\n  margin-inline-start: 8px;\n}\n.heading-anchor .sr-only + dso-icon {\n  margin-inline-start: 0;\n}\n.heading-anchor:visited {\n  color: var(--link-visited-color);\n}\n\n.heading-element {\n  align-items: start;\n  display: flex;\n  font-size: 1rem;\n  color: #275937;\n  margin: 0;\n}\n.heading-element > * {\n  vertical-align: middle;\n}\n\n.alternative-title {\n  cursor: pointer;\n}\n.alternative-title:hover, .alternative-title:focus-visible {\n  color: var(--link-hover-color);\n  text-decoration: underline;\n}\n.alternative-title:active {\n  text-decoration: none;\n}\n\n:host([not-collapsible]) .heading-container {\n  margin-block-end: 0;\n}\n:host([not-collapsible]) .editaction-label {\n  margin-inline-start: 0;\n}\n:host([not-collapsible]) dso-ozon-content.kop::part(_kop) {\n  color: #000;\n}\n\n:host([mode=document]:not([not-collapsible])) {\n  --link-color: #39870c;\n  --link-hover-color: #676cb0;\n}\n:host([mode=document]:not([not-collapsible])) dso-ozon-content.kop::part(_kop) {\n  cursor: pointer;\n}\n:host([mode=document]:not([not-collapsible])) dso-ozon-content.kop::part(_kop):hover {\n  color: var(--link-hover-color);\n  text-decoration: underline;\n}\n:host([mode=document]:not([not-collapsible])) dso-ozon-content[inline].kop::part(_kop) {\n  display: inline;\n}\n:host([mode=document]:not([not-collapsible])) .editaction-label {\n  margin-inline-start: 24px;\n}\n\n:host([mode=document]:not([not-collapsible]):active) dso-ozon-content.kop::part(_kop) {\n  text-decoration: none;\n}\n\n:host([mode=table-of-contents]) .heading-container {\n  padding-inline-start: 8px;\n}\n:host([mode=table-of-contents]) .heading-element {\n  color: inherit;\n}\n:host([mode=table-of-contents]) .editaction-label {\n  margin-inline-start: 0;\n}\n\n:host([mode=table-of-contents][type=ARTIKEL]) dso-ozon-content.kop::part(_kop) {\n  --_dso-icon-button-tertiary-color: inherit;\n  color: inherit;\n}\n\n:host([mode=table-of-contents]:not([type=HOOFDSTUK])) dso-ozon-content.kop::part(_kop) {\n  font-weight: normal;\n}\n\n.addons {\n  margin-inline-start: auto;\n  display: flex;\n  gap: 8px;\n}\n\n.heading {\n  display: flex;\n  align-items: start;\n  gap: 8px;\n}\n\n:host([type=ARTIKEL]:not([alternative-title])) dso-ozon-content.kop::part(_kop),\n:host([type=ARTIKEL]:not([alternative-title])) .toggle-button {\n  --_dso-icon-button-tertiary-color: #000;\n  color: #000;\n}\n\n:host([type=LID][open-annotation]) .annotation-container {\n  margin-block-start: 8px;\n}\n\n.editaction-label {\n  font-style: italic;\n  margin-inline-start: 8px;\n}\n\n.content,\n.heading-container {\n  padding-inline-end: 8px;\n}\n\n.content {\n  --_dso-alert-margin-block-end: 8px;\n}\n\n.annotation-container {\n  padding-inline-end: 8px;\n}\n.annotation-container dso-panel {\n  --_dso-panel-body-background-color: #fff;\n}\n\n:host(:where([annotations-wijzigactie=verwijder])) .annotation-container dso-panel {\n  --_dso-panel-body-background-color: #faecee;\n  --_dso-renvooi-text-decoration: line-through;\n}\n\n:host([annotations-wijzigactie=voegtoe]) .annotation-container dso-panel {\n  --_dso-panel-body-background-color: #f2f8ea;\n}";const v={nieuweContainer:"Toegevoegd",verwijder:"Verwijderd",verwijderContainer:"Verwijderd",voegtoe:"Toegevoegd"};const k=({gereserveerd:n,vervallen:o})=>e(r,null," ",n&&e("dso-label",Object.assign({compact:true},n.wijzigactie?{status:n.wijzigactie==="voegtoe"?"toegevoegd":"verwijderd"}:{}),n.type)," ",o&&e("dso-label",Object.assign({compact:true},o.wijzigactie?{status:o.wijzigactie==="voegtoe"?"toegevoegd":"verwijderd"}:{}),o.type));const x=({gereserveerd:n,vervallen:o})=>{if(n&&n.wijzigactie!=="verwijder"&&!o){return e("dso-alert",{status:"info"},"Dit onderdeel is gereserveerd voor toekomstige toevoeging.")}if(o&&o.wijzigactie!=="voegtoe"&&!n){return e("dso-alert",{status:"info"},"Dit onderdeel is vervallen.")}return null};const w=class{constructor(e){n(this,e);this.dsoRecursiveToggle=o(this,"dsoRecursiveToggle",3);this.dsoOpenToggle=o(this,"dsoOpenToggle",3);this.dsoTableOfContentsClick=o(this,"dsoTableOfContentsClick",3);this.dsoOzonContentClick=o(this,"dsoOzonContentClick",3);this.dsoAnnotationToggle=o(this,"dsoAnnotationToggle",3);this.dsoMarkItemHighlight=o(this,"dsoMarkItemHighlight",3);this.heading="h2";this.open=false;this.filtered=false;this.notApplicable=false;this.genesteOntwerpInformatie=false;this.bevatOntwerpInformatie=false;this.annotated=false;this.openAnnotation=false;this.mode="document";this.handleHeadingClick=n=>{if(this.mode==="table-of-contents"){this.dsoTableOfContentsClick.emit({originalEvent:n,isModifiedEvent:m(n)})}else if(this.type!=="LID"){this.dsoOpenToggle.emit({originalEvent:n,open:!this.open})}};this.handleOzonContentClick=n=>{const{detail:o}=n;if(o.type==="Kop"){this.handleHeadingClick(o.originalEvent)}else{this.dsoOzonContentClick.emit({originalEvent:n,ozonContentClick:n.detail})}};this.handleRecursiveToggleClick=n=>{this.dsoRecursiveToggle.emit({originalEvent:n,current:this.recursiveToggle,next:this.recursiveToggle!==true})}}get kop(){return this._kopInput}set kop(n){this._kopInput=n;this._kop=typeof n==="string"?c(n):n}get inhoud(){return this._inhoudInput}set inhoud(n){this._inhoudInput=n;this._inhoud=typeof n==="string"?c(n):n}get gereserveerd(){return this._gereserveerdInput}set gereserveerd(n){this._gereserveerdInput=n;this._gereserveerd=this.parseAantekenElement(n)}get vervallen(){return this._vervallenInput}set vervallen(n){this._vervallenInput=n;this._vervallen=this.parseAantekenElement(n)}get wijzigactieLabel(){return this.wijzigactie&&v[this.wijzigactie]}showOntwerpBadge(){return this.genesteOntwerpInformatie&&!this.bevatOntwerpInformatie&&(!this.open&&this.mode==="document"||this.mode==="table-of-contents")}parseAantekenElement(n){if(!n){return undefined}let o;if(typeof n==="string"){const e=c(n);o=e===null||e===void 0?void 0:e.documentElement}else if(n instanceof XMLDocument){o=n.documentElement}if(!o){return undefined}const e=b(o);const r=o.tagName.toLowerCase();let a;if(r==="vervallen"){a="Vervallen"}else if(r==="gereserveerd"){a="Gereserveerd"}if(!a){return undefined}return{type:a,wijzigactie:e}}render(){const n=!!((this._kop||this.alternativeTitle)&&this.type!=="LID");const o=!!(this.wijzigactie||n||this._kop||this.alternativeTitle||this.bevatOntwerpInformatie||this.annotated);return e(t,{key:"a04ce40e9ca213a84e1736e1e65f3e85a79e52ce","not-collapsible":!n},o&&e("div",{key:"347b7cb66a2190c0ac4923f582bc3fe19e0fdac2",class:"heading-container",part:"_heading-container"},this.wijzigactie&&e("span",{key:"0ebc7852dee8808c8c37a772853b7a44455f33c4",class:"editaction-label"},this.wijzigactieLabel,":"),e("div",{key:"c55d245a1278aa8f43f7768ad26f14e6c2cd04fd",class:"heading"},e(y,{key:"041d2f80439ad0f25203aca499f4a3602d21f805",heading:this.heading,class:"heading-element",onClick:this.alternativeTitle?this.handleHeadingClick:undefined,mode:this.mode,href:this.href},n&&this.mode==="document"&&e("dso-icon-button",{key:"3a2d2d7a551fbc3ceb17dada4a80f1f03a1123b3",label:this.open?"Invouwen":"Uitvouwen",class:"toggle-button",icon:this.open?"chevron-down":"chevron-right",variant:"tertiary",onDsoClick:n=>this.handleHeadingClick(n.detail.originalEvent)}),e("div",{key:"4fa33c2d037aa22be50f65b1404580aea38274cc"},this.notApplicable&&e("span",{key:"1e982b0e5e21c4d67c93cf932e16f7cf8e27f436",class:"sr-only"},"Niet van toepassing:"),this._kop?e("dso-ozon-content",{class:"kop",content:this._kop,onDsoClick:this.handleOzonContentClick,mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"kop")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"kop"})),inline:true,urlResolver:this.ozonContentUrlResolver,begripResolver:this.ozonContentBegripResolver}):e("span",{class:"alternative-title"},!this.mark&&this.alternativeTitle||this.mark&&this.alternativeTitle&&e(p,{mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"alternativeTitle")}),text:this.alternativeTitle,emitMarkItemHighlight:(n,o)=>this.dsoMarkItemHighlight.emit({text:n,elementRef:o,source:"alternativeTitle"})})),e(k,{key:"859de840ad4782436aa069bb4c24696eb62b3190",gereserveerd:this._gereserveerd,vervallen:this._vervallen}))),this.recursiveToggle!==undefined&&this.open&&this.mode==="document"&&e("dso-icon-button",{key:"313cd6a8c977cdaa50e840af1cb0e8b31cbfdeca",label:this.recursiveToggle===true?"Verberg alles":"Toon alles",class:"recursive-toggle",icon:this.recursiveToggle===true?"eye":"eye-slash",variant:"tertiary",onDsoClick:n=>this.handleRecursiveToggleClick(n.detail.originalEvent)}),this.showOntwerpBadge()&&e(r,{key:"861d7ade671e404c93e8d47a463ac648919301f1"},e("dso-badge",{key:"3dddc7ad2355e629bdd6698e561679bc51f8525f",status:"warning","aria-describedby":"nested-draft-description"},"!"),e("dso-tooltip",{key:"be655fb54bc7d95a1194201eae460b5323b28631",id:"nested-draft-description"},"Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.")),(this.bevatOntwerpInformatie||this.annotated)&&e("div",{key:"5bca885fe602673e1b8e9f0138210b8ea4ce86ef",class:"addons"},this.bevatOntwerpInformatie&&e("dso-label",{key:"8a6696e93bbac26d13087b9e53a3849f90aa5faa",status:"warning",compact:true},"Ontwerp"),this.annotated&&this.mode==="document"&&e("dso-icon-button",{key:"0ab9ae22eadb59fa3721b18767afc61b1b8d4b4e",label:`Kenmerken en kaartgegevens ${this.openAnnotation?"verbergen":"tonen"}`,icon:"label",variant:"tertiary",onDsoClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n.detail.originalEvent})})))),this.openAnnotation&&e("div",{key:"8ff29b3ac993340b7889abc8397e65d7fc2a3eb0",class:"annotation-container",part:"_annotation-container"},e("dso-panel",{key:"22ec590f5a3e8b22b5cfba8cfaf48101060dbc26",id:"annotations",onDsoCloseClick:n=>this.dsoAnnotationToggle.emit({originalEvent:n}),closeButtonLabel:"Kenmerken en kaartgegevens verbergen"},e("h2",{key:"401535cef9f7b6c8d91e470d4a4693e6134c6e5c",slot:"heading"},"Kenmerken en kaart"),e("slot",{key:"26b505f2b9fc449752b637b1a617f5d8ffbe6110",name:"annotations"}))),this.open&&(this._inhoud||this._gereserveerd||this._vervallen)&&this.mode==="document"&&e("div",{key:"78190976bb360ae0151ba2b8e294b35f24f399ba",class:"content",part:"_content"},e(x,{key:"6f7b11b22484a689b881c142de9ad3b2c1a829ba",gereserveerd:this._gereserveerd,vervallen:this._vervallen}),this._inhoud&&e("dso-ozon-content",{key:"9ab80ee9ec66649bf2a98e0025047fc98e72ebca",content:this._inhoud,onDsoClick:this.handleOzonContentClick,mark:this.mark&&(n=>{var o;return(o=this.mark)===null||o===void 0?void 0:o.call(this,n,"inhoud")}),onDsoOzonContentMarkItemHighlight:n=>this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({},n.detail),{source:"inhoud"})),urlResolver:this.ozonContentUrlResolver,begripResolver:this.ozonContentBegripResolver})),e("div",{key:"4d2cd47c8d2b70aba4d948d54d91de604206dcb9",class:"children-container",part:"_children-container"},e("slot",{key:"f0c4ef222aa935696242faed166861c2927f535b"})))}};w.style=u;export{g as dso_annotation_locatie,w as dso_document_component};
+//# sourceMappingURL=p-c0bb872c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["annotationCss","AnnotationLocatie","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","class","value","locatieNoemer","gewijzigdeLocatie","AnnotationGewijzigdeLocatie","Heading","_a","children","heading","mode","href","onClick","props","__rest","headingElement","Object","assign","documentComponentCss","wijzigactieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","AantekenStatus","gereserveerd","vervallen","compact","wijzigactie","status","type","AantekenAlert","DocumentComponent","open","filtered","notApplicable","genesteOntwerpInformatie","bevatOntwerpInformatie","annotated","openAnnotation","handleHeadingClick","e","dsoTableOfContentsClick","emit","originalEvent","isModifiedEvent","dsoOpenToggle","handleOzonContentClick","event","detail","dsoOzonContentClick","ozonContentClick","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","kop","_kopInput","_kop","parseXml","inhoud","_inhoudInput","_inhoud","_gereserveerdInput","_gereserveerd","parseAantekenElement","_vervallenInput","_vervallen","wijzigactieLabel","showOntwerpBadge","input","element","doc","documentElement","XMLDocument","parseWijzigactieFromNode","tag","tagName","toLowerCase","collapsible","alternativeTitle","showHeading","Host","part","label","icon","variant","onDsoClick","content","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","urlResolver","ozonContentUrlResolver","begripResolver","ozonContentBegripResolver","MarkText","emitMarkItemHighlight","elementRef","id","dsoAnnotationToggle","onDsoCloseClick","closeButtonLabel","slot","name"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { FunctionalComponent, VNode, h } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { DocumentComponentMode } from \"./document-component.interfaces\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  mode: DocumentComponentMode;\r\n  href?: string;\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, mode, href, onClick, ...props }, children) => {\r\n  let headingElement: VNode;\r\n\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      headingElement = (\r\n        <h2 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h2>\r\n      );\r\n      break;\r\n    case \"h3\":\r\n      headingElement = (\r\n        <h3 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h3>\r\n      );\r\n      break;\r\n    case \"h4\":\r\n      headingElement = (\r\n        <h4 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h4>\r\n      );\r\n      break;\r\n    case \"h5\":\r\n      headingElement = (\r\n        <h5 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h5>\r\n      );\r\n      break;\r\n    case \"h6\":\r\n      headingElement = (\r\n        <h6 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n          {children}\r\n        </h6>\r\n      );\r\n  }\r\n\r\n  if (mode === \"table-of-contents\" && href) {\r\n    return (\r\n      <a href={href} onClick={onClick} class=\"heading-anchor\">\r\n        {headingElement}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return headingElement;\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\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  --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-block-start: units.$u1 * 0.5;\r\n  padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  --_dso-document-component-text-decoration: line-through;\r\n\r\n  @include delete.root($strikethrough: false);\r\n}\r\n\r\n.heading-element,\r\n.content {\r\n  @include delete.strikethrough($_value: var(--_dso-document-component-text-decoration));\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    inset-inline-start: -3px;\r\n    position: absolute;\r\n    display: block;\r\n    inline-size: 3px;\r\n    inset-block-start: 0;\r\n    inset-block-end: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]),\r\n:host([open-annotation]) {\r\n  .annotation-container,\r\n  .heading-container {\r\n    margin-block-end: units.$u1;\r\n  }\r\n}\r\n\r\n:host(:not([open])),\r\n:host([mode=\"table-of-contents\"]) {\r\n  dso-ozon-content::part(_subtitels) {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n  --_dso-icon-button-tertiary-color: #{colors.$bosgroen};\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.heading-anchor {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n\r\n  @include link.root();\r\n\r\n  text-decoration: none;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n.alternative-title {\r\n  cursor: pointer;\r\n  @include link.pseudo();\r\n}\r\n\r\n:host([not-collapsible]) {\r\n  .heading-container {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n\r\n  dso-ozon-content.kop::part(_kop) {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible])) {\r\n  --link-color: #{document-component.$heading-anchor-color};\r\n  --link-hover-color: #{document-component.$heading-anchor-hover-color};\r\n\r\n  dso-ozon-content {\r\n    &.kop::part(_kop) {\r\n      cursor: pointer;\r\n\r\n      &:hover {\r\n        color: var(--link-hover-color);\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n\r\n    &[inline].kop::part(_kop) {\r\n      display: inline;\r\n    }\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: document-component.$indent;\r\n  }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible]):active) {\r\n  dso-ozon-content.kop::part(_kop) {\r\n    text-decoration: none;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]) {\r\n  .heading-container {\r\n    padding-inline-start: document-component.$indent-table-of-contents;\r\n  }\r\n\r\n  .heading-element {\r\n    color: inherit;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"][type=\"ARTIKEL\"]) {\r\n  dso-ozon-content.kop::part(_kop) {\r\n    --_dso-icon-button-tertiary-color: inherit;\r\n    color: inherit;\r\n  }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]:not([type=\"HOOFDSTUK\"])) {\r\n  dso-ozon-content.kop::part(_kop) {\r\n    font-weight: normal;\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  align-items: start;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]:not([alternative-title])) {\r\n  dso-ozon-content.kop::part(_kop),\r\n  .toggle-button {\r\n    --_dso-icon-button-tertiary-color: #{colors.$zwart};\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"][open-annotation]) {\r\n  .annotation-container {\r\n    margin-block-start: units.$u1;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n  padding-inline-end: units.$u1;\r\n}\r\n\r\n.content {\r\n  --_dso-alert-margin-block-end: #{units.$u1};\r\n}\r\n\r\n.annotation-container {\r\n  padding-inline-end: units.$u1;\r\n\r\n  dso-panel {\r\n    --_dso-panel-body-background-color: #{colors.$wit};\r\n  }\r\n}\r\n\r\n:host(:where([annotations-wijzigactie=\"verwijder\"])) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$rood-10};\r\n      --_dso-renvooi-text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n:host([annotations-wijzigactie=\"voegtoe\"]) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$lime-10};\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Prop,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { MarkText } from \"../../functional-components/mark-text/mark-text.functional-component\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { parseXml } from \"../../utils/parse-xml\";\r\nimport { parseWijzigactieFromNode } from \"../ozon-content/functions/parse-wijzigactie-from-node.function\";\r\nimport {\r\n  OzonContentBegripResolver,\r\n  OzonContentClickEvent,\r\n  OzonContentUrlResolver,\r\n} from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nimport { Heading } from \"./document-component-heading\";\r\nimport {\r\n  DocumentComponentAantekenElement,\r\n  DocumentComponentAnnotationsWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentMode,\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentOzonContentClickEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n  DocumentComponentTableOfContentsClickEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentWijzigactie,\r\n} from \"./document-component.interfaces\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst AantekenStatus: FunctionalComponent<{\r\n  gereserveerd?: DocumentComponentAantekenElement;\r\n  vervallen?: DocumentComponentAantekenElement;\r\n}> = ({ gereserveerd, vervallen }) => {\r\n  return (\r\n    <Fragment>\r\n      {\" \"}\r\n      {gereserveerd && (\r\n        <dso-label\r\n          compact\r\n          {...(gereserveerd.wijzigactie\r\n            ? { status: gereserveerd.wijzigactie === \"voegtoe\" ? \"toegevoegd\" : \"verwijderd\" }\r\n            : {})}\r\n        >\r\n          {gereserveerd.type}\r\n        </dso-label>\r\n      )}{\" \"}\r\n      {vervallen && (\r\n        <dso-label\r\n          compact\r\n          {...(vervallen.wijzigactie\r\n            ? { status: vervallen.wijzigactie === \"voegtoe\" ? \"toegevoegd\" : \"verwijderd\" }\r\n            : {})}\r\n        >\r\n          {vervallen.type}\r\n        </dso-label>\r\n      )}\r\n    </Fragment>\r\n  );\r\n};\r\n\r\nconst AantekenAlert: FunctionalComponent<{\r\n  gereserveerd?: DocumentComponentAantekenElement;\r\n  vervallen?: DocumentComponentAantekenElement;\r\n}> = ({ gereserveerd, vervallen }) => {\r\n  if (gereserveerd && gereserveerd.wijzigactie !== \"verwijder\" && !vervallen) {\r\n    return <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>;\r\n  }\r\n\r\n  if (vervallen && vervallen.wijzigactie !== \"voegtoe\" && !gereserveerd) {\r\n    return <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>;\r\n  }\r\n\r\n  return null;\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  private _kopInput?: DocumentComponentInputType;\r\n  private _kop?: XMLDocument;\r\n  /**\r\n   * The Kop XML.\r\n   */\r\n  @Prop()\r\n  get kop(): DocumentComponentInputType | undefined {\r\n    return this._kopInput;\r\n  }\r\n  set kop(value: DocumentComponentInputType | undefined) {\r\n    this._kopInput = value;\r\n    this._kop = typeof value === \"string\" ? parseXml(value) : value;\r\n  }\r\n\r\n  private _inhoudInput?: DocumentComponentInputType;\r\n  private _inhoud?: XMLDocument;\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  get inhoud(): DocumentComponentInputType | undefined {\r\n    return this._inhoudInput;\r\n  }\r\n  set inhoud(value: DocumentComponentInputType | undefined) {\r\n    this._inhoudInput = value;\r\n    this._inhoud = typeof value === \"string\" ? parseXml(value) : value;\r\n  }\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  private _gereserveerdInput?: DocumentComponentInputType;\r\n  private _gereserveerd?: DocumentComponentAantekenElement;\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  get gereserveerd(): DocumentComponentInputType | undefined {\r\n    return this._gereserveerdInput;\r\n  }\r\n  set gereserveerd(value: DocumentComponentInputType | undefined) {\r\n    this._gereserveerdInput = value;\r\n    this._gereserveerd = this.parseAantekenElement(value);\r\n  }\r\n\r\n  private _vervallenInput?: DocumentComponentInputType;\r\n  private _vervallen?: DocumentComponentAantekenElement;\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  get vervallen(): DocumentComponentInputType | undefined {\r\n    return this._vervallenInput;\r\n  }\r\n  set vervallen(value: DocumentComponentInputType | undefined) {\r\n    this._vervallenInput = value;\r\n    this._vervallen = this.parseAantekenElement(value);\r\n  }\r\n\r\n  /**\r\n   * When the Annotation is opened, set this to true.\r\n   */\r\n  @Prop({ reflect: true })\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop({ reflect: true })\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * The wijzigactie for all annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  ozonContentUrlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * A BegripResolver that will be called for STOP element \"IntRef\" with @scope=\"Begrip\".\r\n   */\r\n  @Prop()\r\n  ozonContentBegripResolver?: OzonContentBegripResolver;\r\n\r\n  /**\r\n   * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: DocumentComponentMode = \"document\";\r\n\r\n  /**\r\n   * The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user clicks the heading in mode=\"table-of-contents\".\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user interacts with Kop, IntRef or the Kenmerken en kaart button of IntIoRef in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentClick!: EventEmitter<DocumentComponentOzonContentClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.mode === \"table-of-contents\") {\r\n      this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n    } else if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private handleOzonContentClick = (event: DsoOzonContentCustomEvent<OzonContentClickEvent>) => {\r\n    const { detail } = event;\r\n\r\n    if (detail.type === \"Kop\") {\r\n      this.handleHeadingClick(detail.originalEvent);\r\n    } else {\r\n      this.dsoOzonContentClick.emit({ originalEvent: event, ozonContentClick: event.detail });\r\n    }\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  private showOntwerpBadge(): boolean {\r\n    return (\r\n      this.genesteOntwerpInformatie &&\r\n      !this.bevatOntwerpInformatie &&\r\n      ((!this.open && this.mode === \"document\") || this.mode === \"table-of-contents\")\r\n    );\r\n  }\r\n\r\n  private parseAantekenElement(input?: DocumentComponentInputType): DocumentComponentAantekenElement | undefined {\r\n    if (!input) {\r\n      return undefined;\r\n    }\r\n\r\n    let element: Element | undefined;\r\n\r\n    if (typeof input === \"string\") {\r\n      const doc = parseXml(input);\r\n      element = doc?.documentElement;\r\n    } else if (input instanceof XMLDocument) {\r\n      element = input.documentElement;\r\n    }\r\n\r\n    if (!element) {\r\n      return undefined;\r\n    }\r\n\r\n    const wijzigactie = parseWijzigactieFromNode(element);\r\n    const tag = element.tagName.toLowerCase();\r\n\r\n    let type: DocumentComponentAantekenElement[\"type\"] | undefined;\r\n    if (tag === \"vervallen\") {\r\n      type = \"Vervallen\";\r\n    } else if (tag === \"gereserveerd\") {\r\n      type = \"Gereserveerd\";\r\n    }\r\n\r\n    if (!type) {\r\n      return undefined;\r\n    }\r\n\r\n    return { type, wijzigactie };\r\n  }\r\n\r\n  render() {\r\n    const collapsible = !!((this._kop || this.alternativeTitle) && this.type !== \"LID\");\r\n\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this._kop ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading\r\n                heading={this.heading}\r\n                class=\"heading-element\"\r\n                onClick={this.alternativeTitle ? this.handleHeadingClick : undefined}\r\n                mode={this.mode}\r\n                href={this.href}\r\n              >\r\n                {collapsible && this.mode === \"document\" && (\r\n                  <dso-icon-button\r\n                    label={this.open ? \"Invouwen\" : \"Uitvouwen\"}\r\n                    class=\"toggle-button\"\r\n                    icon={this.open ? \"chevron-down\" : \"chevron-right\"}\r\n                    variant=\"tertiary\"\r\n                    onDsoClick={(e) => this.handleHeadingClick(e.detail.originalEvent)}\r\n                  />\r\n                )}\r\n                <div>\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n                  {this._kop ? (\r\n                    <dso-ozon-content\r\n                      class=\"kop\"\r\n                      content={this._kop}\r\n                      onDsoClick={this.handleOzonContentClick}\r\n                      mark={this.mark && ((text) => this.mark?.(text, \"kop\"))}\r\n                      onDsoOzonContentMarkItemHighlight={(e) =>\r\n                        this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"kop\" })\r\n                      }\r\n                      inline\r\n                      urlResolver={this.ozonContentUrlResolver}\r\n                      begripResolver={this.ozonContentBegripResolver}\r\n                    />\r\n                  ) : (\r\n                    <span class=\"alternative-title\">\r\n                      {(!this.mark && this.alternativeTitle) ||\r\n                        (this.mark && this.alternativeTitle && (\r\n                          <MarkText\r\n                            mark={this.mark && ((text: string) => this.mark?.(text, \"alternativeTitle\"))}\r\n                            text={this.alternativeTitle}\r\n                            emitMarkItemHighlight={(text, elementRef) =>\r\n                              this.dsoMarkItemHighlight.emit({ text, elementRef, source: \"alternativeTitle\" })\r\n                            }\r\n                          />\r\n                        ))}\r\n                    </span>\r\n                  )}\r\n                  <AantekenStatus gereserveerd={this._gereserveerd} vervallen={this._vervallen} />\r\n                </div>\r\n              </Heading>\r\n\r\n              {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\r\n                <dso-icon-button\r\n                  label={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  class=\"recursive-toggle\"\r\n                  icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"}\r\n                  variant=\"tertiary\"\r\n                  onDsoClick={(e) => this.handleRecursiveToggleClick(e.detail.originalEvent)}\r\n                />\r\n              )}\r\n\r\n              {this.showOntwerpBadge() && (\r\n                <Fragment>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">\r\n                    Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.\r\n                  </dso-tooltip>\r\n                </Fragment>\r\n              )}\r\n\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && this.mode === \"document\" && (\r\n                    <dso-icon-button\r\n                      label={`Kenmerken en kaartgegevens ${this.openAnnotation ? \"verbergen\" : \"tonen\"}`}\r\n                      icon=\"label\"\r\n                      variant=\"tertiary\"\r\n                      onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent })}\r\n                    />\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        {this.openAnnotation && (\r\n          <div class=\"annotation-container\" part=\"_annotation-container\">\r\n            <dso-panel\r\n              id=\"annotations\"\r\n              onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n              closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n            >\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          </div>\r\n        )}\r\n\r\n        {this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === \"document\" && (\r\n          <div class=\"content\" part=\"_content\">\r\n            <AantekenAlert gereserveerd={this._gereserveerd} vervallen={this._vervallen} />\r\n\r\n            {this._inhoud && (\r\n              <dso-ozon-content\r\n                content={this._inhoud}\r\n                onDsoClick={this.handleOzonContentClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n                urlResolver={this.ozonContentUrlResolver}\r\n                begripResolver={this.ozonContentBegripResolver}\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}