@dso-toolkit/core 79.0.0-pre.3 → 79.0.0

package/dist/cjs/dso-accordion.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-accordion.entry.cjs.js","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\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\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 class=\"dso-accordion\">\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["getRenderingRef","forceUpdate","h","Host"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"dso-accordion.entry.cjs.js","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\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\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 class=\"dso-accordion\">\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["getRenderingRef","forceUpdate","h","Host"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/cjs/dso-action-list-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DvLsepiK.js');
 
-const actionListItemCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;position:relative}:host .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host(.divider) .dso-action-list-item::after{border-block-end:0.25rem dashed #6ca4d9;inset-block-end:0;content:\"\";display:block;block-size:24px;position:absolute;inset-inline-start:calc(2rem + 16px + 16px + 8px - 8px);inline-size:calc(100% - (2rem + 16px + 16px + 8px - 8px))}@media screen and (min-width: 480px){:host(.divider) .dso-action-list-item::after{inset-inline-start:calc(2rem + 16px + 16px + 8px);inline-size:calc(100% - (2rem + 16px + 16px + 8px))}}h3{margin-block-end:16px;margin-block-start:0;min-block-size:48px;padding-block-start:9px;color:#275937;color:#275937;font-size:1.125rem;font-weight:600}@media screen and (min-width: 480px){h3{font-size:1.25rem}}.dso-action-list-item{display:grid;grid-template-columns:calc(2rem + 16px + 16px + 8px - 8px) 1fr}@media screen and (min-width: 480px){.dso-action-list-item{grid-template-columns:calc(2rem + 16px + 16px + 8px) 1fr}}.dso-action-list-item .dso-step-counter{position:unset}.dso-action-list-item .action-list-item-content{grid-column:2/2}dso-icon{block-size:48px;inline-size:48px}";
+const actionListItemCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;position:relative}:host .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host(.divider) .dso-action-list-item::after{border-block-end:0.25rem dashed #6ca4d9;inset-block-end:0;content:\"\";display:block;block-size:24px;position:absolute;inset-inline-start:calc(2rem + 16px + 16px + 8px - 8px);inline-size:calc(100% - (2rem + 16px + 16px + 8px - 8px))}@media screen and (min-width: 480px){:host(.divider) .dso-action-list-item::after{inset-inline-start:calc(2rem + 16px + 16px + 8px);inline-size:calc(100% - (2rem + 16px + 16px + 8px))}}h3{margin-block-end:16px;margin-block-start:0;min-block-size:48px;padding-block-start:9px;color:#275937;color:#275937;font-size:1.125rem;font-weight:600}@media screen and (min-width: 480px){h3{font-size:1.25rem}}.dso-action-list-item{display:grid;grid-template-columns:calc(2rem + 16px + 16px + 8px - 8px) 1fr}@media screen and (min-width: 480px){.dso-action-list-item{grid-template-columns:calc(2rem + 16px + 16px + 8px) 1fr}}.dso-action-list-item .dso-step-counter{position:unset}.dso-action-list-item .action-list-item-content{grid-column:2/2}dso-icon{block-size:48px;inline-size:48px}";
 
 const ActionListItem = class {
     constructor(hostRef) {

package/dist/cjs/dso-action-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-action-list-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,47CAA47C;;MCOz8C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-action-list-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y6CAAy6C;;MCOt7C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-action-list-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-action-list-item.entry.cjs.js","sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,47CAA47C;;MCOz8C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;"}
+{"version":3,"file":"dso-action-list-item.entry.cjs.js","sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y6CAAy6C;;MCOt7C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;"}

package/dist/cjs/dso-action-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DvLsepiK.js');
 
-const actionListCss = "@charset \"UTF-8\";:host{display:block;padding-block:16px;padding-inline:16px}@media screen and (min-width: 768px){:host{padding-inline-end:96px}}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host 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 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 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 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\"))}*,*::after,*::before{box-sizing:border-box}h2{margin-block:0 16px;color:#275937;color:#275937;font-size:1.25rem;font-weight:700}@media screen and (min-width: 480px){h2{font-size:1.5rem}}.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px - 8px)}@media screen and (min-width: 480px){.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px)}}";
+const actionListCss = ":host{display:block;padding-block:16px;padding-inline:16px}@media screen and (min-width: 768px){:host{padding-inline-end:96px}}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host 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 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 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 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\"))}*,*::after,*::before{box-sizing:border-box}h2{margin-block:0 16px;color:#275937;color:#275937;font-size:1.25rem;font-weight:700}@media screen and (min-width: 480px){h2{font-size:1.5rem}}.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px - 8px)}@media screen and (min-width: 480px){.dso-action-list-content{padding-inline-start:calc(2rem + 16px + 16px + 8px)}}";
 
 const ActionList = class {
     constructor(hostRef) {

package/dist/cjs/dso-action-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-action-list.entry.cjs.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,69CAA69C;;MCOt+C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-action-list.entry.cjs.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,08CAA08C;;MCOn9C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-action-list.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-action-list.entry.cjs.js","sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,69CAA69C;;MCOt+C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;"}
+{"version":3,"file":"dso-action-list.entry.cjs.js","sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,08CAA08C;;MCOn9C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;"}

package/dist/cjs/dso-advanced-select.cjs.entry.js

@@ -6,7 +6,7 @@ var focusTrap_esm = require('./focus-trap.esm-c-Aj_u8L.js');
 var index_esm = require('./index.esm-DtPCE30D.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const advancedSelectCss = "@charset \"UTF-8\";:host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative;z-index:200}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:\"\";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%}.group .option-label::before{background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}";
+const advancedSelectCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative;z-index:200}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:\"\";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%}.group .option-label::before{background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}";
 
 const AdvancedSelect = class {
     constructor(hostRef) {

package/dist/cjs/dso-advanced-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-advanced-select.entry.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n  z-index: zindex.$advanced-select-group;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\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  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return (\r\n    group && (\r\n      <dso-label compact status={group.variant}>\r\n        {group.activeLabel}\r\n      </dso-label>\r\n    )\r\n  );\r\n};\r\n"],"version":3}
+{"file":"dso-advanced-select.entry.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n  z-index: zindex.$advanced-select-group;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\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  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return (\r\n    group && (\r\n      <dso-label compact status={group.variant}>\r\n        {group.activeLabel}\r\n      </dso-label>\r\n    )\r\n  );\r\n};\r\n"],"version":3}

package/dist/cjs/dso-advanced-select.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-advanced-select.entry.cjs.js","sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n  z-index: zindex.$advanced-select-group;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\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  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return (\r\n    group && (\r\n      <dso-label compact status={group.variant}>\r\n        {group.activeLabel}\r\n      </dso-label>\r\n    )\r\n  );\r\n};\r\n"],"names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"mappings":"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"}
+{"version":3,"file":"dso-advanced-select.entry.cjs.js","sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n  z-index: zindex.$advanced-select-group;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\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  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return (\r\n    group && (\r\n      <dso-label compact status={group.variant}>\r\n        {group.activeLabel}\r\n      </dso-label>\r\n    )\r\n  );\r\n};\r\n"],"names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"mappings":"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"}