@dso-toolkit/core 73.2.0 → 73.3.0

package/dist/bundle/dso-accordion.js

@@ -0,0 +1,262 @@
+import { c as getRenderingRef, f as forceUpdate, p as proxyCustomElement, H, h, d as Host } from './p-DHO_Za64.js';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2_000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
+
+const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        const { state } = createStore({
+            variant: "default",
+            reverseAlign: false,
+        });
+        this.accordionState = state;
+    }
+    /**
+     * The variant of the Accordion.
+     */
+    get variant() {
+        return this.accordionState.variant;
+    }
+    set variant(value) {
+        this.accordionState.variant = value || "default";
+    }
+    /**
+     * Places the chevron at the opposite side.
+     *
+     * Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections
+     */
+    get reverseAlign() {
+        return this.accordionState.reverseAlign;
+    }
+    set reverseAlign(value) {
+        this.accordionState.reverseAlign = value || false;
+    }
+    /**
+     * @internal
+     */
+    async _getState() {
+        return this.accordionState;
+    }
+    render() {
+        return (h(Host, { key: '5d93d27bbfb8f16c59eaec6f6f5796489004eb54', class: "dso-accordion" }, h("slot", { key: 'c92d0e2dcedb5e916c043cd3866d9dbf9ca7f449' })));
+    }
+    get host() { return this; }
+    static get style() { return accordionCss; }
+}, [1, "dso-accordion", {
+        "variant": [6145],
+        "reverseAlign": [6148, "reverse-align"],
+        "_getState": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Accordion);
+            }
+            break;
+    } });
+}
+
+const DsoAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAccordion, defineCustomElement };
+//# sourceMappingURL=dso-accordion.js.map
+
+//# sourceMappingURL=dso-accordion.js.map

package/dist/bundle/dso-accordion.js.map

@@ -0,0 +1 @@
+{"file":"dso-accordion.js","mappings":";;AAEA,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,KAAK;AAC9C,IAAI,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC;AACnC,IAAI,IAAI,CAAC,KAAK,EAAE;AAChB,QAAQ,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;AAClC;AACA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AACrC,QAAQ,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AACzB;AACA,CAAC;AACD,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK;AAC7B,IAAI,IAAI,SAAS;AACjB,IAAI,OAAO,CAAC,GAAG,IAAI,KAAK;AACxB,QAAQ,IAAI,SAAS,EAAE;AACvB,YAAY,YAAY,CAAC,SAAS,CAAC;AACnC;AACA,QAAQ,SAAS,GAAG,UAAU,CAAC,MAAM;AACrC,YAAY,SAAS,GAAG,CAAC;AACzB,YAAY,EAAE,CAAC,GAAG,IAAI,CAAC;AACvB,SAAS,EAAE,EAAE,CAAC;AACd,KAAK;AACL,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,WAAW,GAAG,CAAC,YAAY,KAAK,EAAE,aAAa,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC,WAAW;AAClG,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,GAAG,KAAK;AAC1C,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,EAAE;AAChC,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;AACtD;AACA,CAAC,EAAE,KAAK,CAAC;AACT,MAAM,mBAAmB,GAAG,MAAM;AAClC,IAAI,IAAI,OAAO,eAAe,KAAK,UAAU,EAAE;AAC/C;AACA;AACA,QAAQ,OAAO,EAAE;AACjB;AACA,IAAI,MAAM,YAAY,GAAG,IAAI,GAAG,EAAE;AAClC,IAAI,OAAO;AACX,QAAQ,OAAO,EAAE,MAAM,YAAY,CAAC,KAAK,EAAE;AAC3C,QAAQ,GAAG,EAAE,CAAC,QAAQ,KAAK;AAC3B,YAAY,MAAM,GAAG,GAAG,eAAe,EAAE;AACzC,YAAY,IAAI,GAAG,EAAE;AACrB,gBAAgB,WAAW,CAAC,YAAY,EAAE,QAAQ,EAAE,GAAG,CAAC;AACxD;AACA,SAAS;AACT,QAAQ,GAAG,EAAE,CAAC,QAAQ,KAAK;AAC3B,YAAY,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC;AACvD,YAAY,IAAI,QAAQ,EAAE;AAC1B,gBAAgB,YAAY,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;AACxE;AACA,YAAY,eAAe,CAAC,YAAY,CAAC;AACzC,SAAS;AACT,QAAQ,KAAK,EAAE,MAAM;AACrB,YAAY,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AACrE,YAAY,eAAe,CAAC,YAAY,CAAC;AACzC,SAAS;AACT,KAAK;AACL,CAAC;;AAED,MAAM,MAAM,GAAG,CAAC,GAAG,MAAM,OAAO,GAAG,KAAK,UAAU,GAAG,GAAG,EAAE,GAAG,GAAG,CAAC;AACjE,MAAM,mBAAmB,GAAG,CAAC,YAAY,EAAE,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK;AAChF,IAAI,MAAM,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC;AAC/C,IAAI,IAAI,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC;AAC9D,IAAI,MAAM,QAAQ,GAAG;AACrB,QAAQ,OAAO,EAAE,EAAE;AACnB,QAAQ,GAAG,EAAE,EAAE;AACf,QAAQ,GAAG,EAAE,EAAE;AACf,QAAQ,KAAK,EAAE,EAAE;AACjB,KAAK;AACL,IAAI,MAAM,KAAK,GAAG,MAAM;AACxB;AACA;AACA,QAAQ,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;AACpE,QAAQ,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;AAC5C,KAAK;AACL,IAAI,MAAM,OAAO,GAAG,MAAM;AAC1B;AACA;AACA,QAAQ,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;AAC9C,QAAQ,KAAK,EAAE;AACf,KAAK;AACL,IAAI,MAAM,GAAG,GAAG,CAAC,QAAQ,KAAK;AAC9B,QAAQ,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;AAClD,QAAQ,OAAO,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;AACnC,KAAK;AACL,IAAI,MAAM,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,KAAK;AACrC,QAAQ,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC7C,QAAQ,IAAI,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE;AACrD,YAAY,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC;AACvC,YAAY,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;AACvE;AACA,KAAK;AACL,IAAI,MAAM,KAAK,IAAI,OAAO,KAAK,KAAK;AACpC,UAAU;AACV,UAAU,IAAI,KAAK,CAAC,cAAc,EAAE;AACpC,YAAY,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE;AAC7B,gBAAgB,OAAO,GAAG,CAAC,QAAQ,CAAC;AACpC,aAAa;AACb,YAAY,OAAO,CAAC,CAAC,EAAE;AACvB,gBAAgB,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;AAChD,aAAa;AACb,YAAY,wBAAwB,GAAG;AACvC,gBAAgB,OAAO;AACvB,oBAAoB,UAAU,EAAE,IAAI;AACpC,oBAAoB,YAAY,EAAE,IAAI;AACtC,iBAAiB;AACjB,aAAa;AACb,YAAY,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE;AAC7B,gBAAgB,OAAO,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC3C,aAAa;AACb,YAAY,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;AACpC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC;AACpC,gBAAgB,OAAO,IAAI;AAC3B,aAAa;AACb,SAAS,CAAC,CAAC;AACX,IAAI,MAAM,EAAE,GAAG,CAAC,SAAS,EAAE,QAAQ,KAAK;AACxC,QAAQ,QAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC1C,QAAQ,OAAO,MAAM;AACrB,YAAY,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC;AAC1D,SAAS;AACT,KAAK;AACL,IAAI,MAAM,QAAQ,GAAG,CAAC,QAAQ,EAAE,EAAE,KAAK;AACvC,QAAQ,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK;AACnD,YAAY,IAAI,GAAG,KAAK,QAAQ,EAAE;AAClC,gBAAgB,EAAE,CAAC,QAAQ,CAAC;AAC5B;AACA,SAAS,CAAC;AACV;AACA;AACA,QAAQ,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC7E,QAAQ,OAAO,MAAM;AACrB,YAAY,KAAK,EAAE;AACnB,YAAY,OAAO,EAAE;AACrB,SAAS;AACT,KAAK;AACL,IAAI,MAAM,GAAG,GAAG,CAAC,GAAG,aAAa,KAAK;AACtC,QAAQ,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,YAAY,KAAK;AACtE,YAAY,IAAI,YAAY,CAAC,GAAG,EAAE;AAClC,gBAAgB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;AACxD;AACA,YAAY,IAAI,YAAY,CAAC,GAAG,EAAE;AAClC,gBAAgB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;AACxD;AACA,YAAY,IAAI,YAAY,CAAC,KAAK,EAAE;AACpC,gBAAgB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;AAC5D;AACA,YAAY,IAAI,YAAY,CAAC,OAAO,EAAE;AACtC,gBAAgB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AAChE;AACA,YAAY,OAAO,MAAM;AACzB,SAAS,EAAE,EAAE,CAAC;AACd,QAAQ,OAAO,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;AACvD,KAAK;AACL,IAAI,MAAM,WAAW,GAAG,CAAC,GAAG,KAAK;AACjC,QAAQ,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;AACxC,QAAQ,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACjE,KAAK;AACL,IAAI,OAAO;AACX,QAAQ,KAAK;AACb,QAAQ,GAAG;AACX,QAAQ,GAAG;AACX,QAAQ,EAAE;AACV,QAAQ,QAAQ;AAChB,QAAQ,GAAG;AACX,QAAQ,OAAO;AACf,QAAQ,KAAK;AACb,QAAQ,WAAW;AACnB,KAAK;AACL,CAAC;AACD,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,IAAI,KAAK;AACzC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;AACrC,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE;AACpB,QAAQ,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAC9C,QAAQ,KAAK,CAAC,MAAM,EAAE;AACtB;AACA,CAAC;;AAED,MAAM,WAAW,GAAG,CAAC,YAAY,EAAE,YAAY,KAAK;AACpD,IAAI,MAAM,GAAG,GAAG,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC;AAC/D,IAAI,GAAG,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;AAClC,IAAI,OAAO,GAAG;AACd,CAAC;;AC9LD,MAAM,YAAY,GAAG,iEAAiE;;MCUzE,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AAMpB,IAAA,WAAA,GAAA;;;;AACE,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,CAAyB;AACpD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,YAAY,EAAE,KAAK;AACpB,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC5B;AAED;;AAEG;AACH,IAAA,IACI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO;;IAEpC,IAAI,OAAO,CAAC,KAAuB,EAAA;QACjC,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,KAAK,IAAI,SAAS;;AAGlD;;;;AAIG;AACH,IAAA,IACI,YAAY,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,YAAY;;IAEzC,IAAI,YAAY,CAAC,KAAc,EAAA;QAC7B,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,KAAK,IAAI,KAAK;;AAGnD;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,IAAI,CAAC,cAAc;;IAG5B,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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    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 unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        // We need to unwrap the defaultState because it might be a function.\n        // Otherwise we might not be sending the right reset value.\n        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));\n        return () => {\n            unSet();\n            unReset();\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    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\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"],"version":3}

package/dist/bundle/dso-action-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoActionListItem extends Components.DsoActionListItem, HTMLElement {}
+export const DsoActionListItem: {
+    prototype: DsoActionListItem;
+    new (): DsoActionListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/bundle/dso-action-list-item.js

@@ -0,0 +1,63 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DHO_Za64.js';
+import { d as defineCustomElement$2 } from './p-D2nuXSd0.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class ActionListItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Show flow line to next step
+         */
+        this.flowLine = false;
+        /**
+         * When there is a warning.
+         */
+        this.warning = false;
+        /**
+         * Places a dashed line at the bottom of the item.
+         */
+        this.divider = false;
+    }
+    render() {
+        return (h(Host, { key: 'a694a6b4796fe890be89948bfa4b32551601a523', class: {
+                divider: this.divider,
+                "flow-line": this.flowLine,
+            } }, h("div", { key: '4fc4186ff650df724b96ea008e165809cfac73be', class: "dso-action-list-item" }, this.warning ? h("dso-icon", { icon: "status-warning" }) : h("div", { class: "dso-step-counter" }, this.step), h("div", { key: '1ab7156ebbbdc2593fe73024d960c0807e1fd579', class: "action-list-item-content" }, this.itemTitle && h("h3", { key: '02a6d517ae8a1817246ea178c4fa8dbcd699f3e1' }, this.itemTitle), h("slot", { key: '9f81a101ee2a126df0955fee2cac9a06f5e84560' })))));
+    }
+    static get style() { return actionListItemCss; }
+}, [1, "dso-action-list-item", {
+        "step": [2],
+        "itemTitle": [1, "item-title"],
+        "flowLine": [4, "flow-line"],
+        "warning": [4],
+        "divider": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-action-list-item", "dso-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-action-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ActionListItem);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoActionListItem = ActionListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoActionListItem, defineCustomElement };
+//# sourceMappingURL=dso-action-list-item.js.map
+
+//# sourceMappingURL=dso-action-list-item.js.map

package/dist/bundle/dso-action-list-item.js.map

@@ -0,0 +1 @@
+{"file":"dso-action-list-item.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,y6CAAy6C;;MCOt7C,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;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,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAG,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAG,WAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7G,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAI,6DAAK,IAAI,CAAC,SAAS,CAAM,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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/bundle/dso-action-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoActionList extends Components.DsoActionList, HTMLElement {}
+export const DsoActionList: {
+    prototype: DsoActionList;
+    new (): DsoActionList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/bundle/dso-action-list.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DHO_Za64.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class ActionList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '1863dac06435fbfa6422a48f8109cfefaa06dcb5' }, h("h2", { key: '8b7edefe67ad62cf78e1d6b9ab02b7ed917e6766' }, this.listTitle), h("div", { key: '4cdbf73a61127fe8430157012b94f6f1a45380d5', class: "dso-action-list-content" }, h("slot", { key: '703e3a3abda8ca77f893bbf2fbbf747d8ea71b4a' }))));
+    }
+    static get style() { return actionListCss; }
+}, [1, "dso-action-list", {
+        "listTitle": [1, "list-title"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-action-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-action-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ActionList);
+            }
+            break;
+    } });
+}
+
+const DsoActionList = ActionList;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoActionList, defineCustomElement };
+//# sourceMappingURL=dso-action-list.js.map
+
+//# sourceMappingURL=dso-action-list.js.map

package/dist/bundle/dso-action-list.js.map

@@ -0,0 +1 @@
+{"file":"dso-action-list.js","mappings":";;AAAA,MAAM,aAAa,GAAG,08CAA08C;;MCOn9C,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;IAOrB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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/bundle/dso-advanced-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoAdvancedSelect extends Components.DsoAdvancedSelect, HTMLElement {}
+export const DsoAdvancedSelect: {
+    prototype: DsoAdvancedSelect;
+    new (): DsoAdvancedSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/bundle/dso-advanced-select.js

@@ -0,0 +1,155 @@
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { c as createFocusTrap } from './p-BocpUT46.js';
+import { t as tabbable } from './p-Pk8qng7t.js';
+import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
+import { d as defineCustomElement$5 } from './p-Cbba2ZRN.js';
+import { d as defineCustomElement$4 } from './p-D2nuXSd0.js';
+import { d as defineCustomElement$3 } from './p-BPLPqKUj.js';
+import { d as defineCustomElement$2 } from './p-kDtv6DeD.js';
+
+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-danger .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.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 = /*@__PURE__*/ proxyCustomElement(class AdvancedSelect extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoChange = createEvent(this, "dsoChange", 3);
+        this.dsoRedirect = createEvent(this, "dsoRedirect", 3);
+        /**
+         * The options to display in the select.
+         */
+        this.options = [];
+        /**
+         * The open state of the options list.
+         */
+        this.open = false;
+        this.toggleOpen = () => {
+            this.open = !this.open;
+        };
+        this.handleOptionClick = (event, option) => {
+            this.dsoChange.emit({ originalEvent: event, option });
+            this.open = false;
+        };
+        this.handleRedirectClick = (event, redirect) => {
+            this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });
+            this.open = false;
+        };
+    }
+    keyDownListener(event) {
+        if (this.open && event.key === "ArrowUp") {
+            event.preventDefault();
+            this.handleTab(-1);
+        }
+        else if (this.open && event.key === "ArrowDown") {
+            event.preventDefault();
+            this.handleTab(1);
+        }
+    }
+    componentDidRender() {
+        if (this.open && !this.trap) {
+            this.createTrap();
+        }
+        else if (!this.open && this.trap) {
+            this.removeTrap();
+        }
+    }
+    createTrap() {
+        this.trap = createFocusTrap(this.host, {
+            clickOutsideDeactivates: true,
+            escapeDeactivates: true,
+            setReturnFocus: this.toggleButtonElementRef,
+            tabbableOptions: {
+                getShadowRoot: true,
+            },
+            onDeactivate: () => {
+                this.open = false;
+            },
+        }).activate();
+    }
+    removeTrap() {
+        var _a;
+        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+        delete this.trap;
+    }
+    handleTab(direction) {
+        var _a;
+        const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];
+        const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
+        let nextIndex = currentIndex + direction;
+        if (nextIndex >= elements.length) {
+            nextIndex = 0;
+        }
+        else if (nextIndex < 0) {
+            nextIndex = elements.length - 1;
+        }
+        (_a = elements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        var _a, _b;
+        return (h(Fragment, null, h("button", { key: '57d5cbcc817c119c470a08d43b92832bed397a2a', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: 'b91590eabccc667dcaf3e331522dfe90c8b137e6', active: this.active, options: this.options }), h("span", { key: 'ef0cff05fac02406b2e4df6b762a917044554a16', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '61b2dda775ac610cc3c36e2e8795e58efaafb3fd', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: 'e264d64ad86adf4a8daa5fe3be4d20815f4468c3', class: "badges" }, this.options
+            .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
+            .map((group) => {
+            var _a;
+            return (h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
+        }))), h("dso-icon", { key: 'cb475802c2552024418f1911d442ac05b9cf4791', icon: "caret-down" }))), this.open && (h("div", { key: '19b91e26c714cdcd810f7be9cde41da1e1b8598f', class: "groups-container" }, h("ul", { key: 'ca00d61058824d3f3eb29f15b77d52ecf9d7e605', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+            ("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
+    }
+    get host() { return this; }
+    static get style() { return advancedSelectCss; }
+}, [1, "dso-advanced-select", {
+        "options": [16],
+        "active": [16],
+        "activeHint": [1, "active-hint"],
+        "open": [32]
+    }, [[8, "keydown", "keyDownListener"]]]);
+const OptionButton = ({ option, active, activeHint, callback }) => (h("button", { class: clsx(["option", { "option-active": active === option }]), type: "button", onClick: (e) => callback(e, option) }, h("span", { class: "option-label" }, option.label), !!activeHint && active === option && h("span", { class: "option-hint" }, "(", activeHint, ")")));
+const RedirectAnchor = ({ redirect, callback }) => (h("a", { class: "group-link", href: redirect.href, onClick: (e) => callback(e, redirect) }, redirect.label, h("dso-icon", { icon: "chevron-right" })));
+const ActiveGroupLabel = ({ active, options }) => {
+    const group = options.find((optionOrGroup) => "options" in optionOrGroup &&
+        !!optionOrGroup.options.find((option) => option === active) &&
+        !!optionOrGroup.activeLabel);
+    return group ? (h("dso-label", { compact: true, status: group.variant }, group.activeLabel)) : undefined;
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-advanced-select", "dso-badge", "dso-icon", "dso-label", "dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-advanced-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AdvancedSelect);
+            }
+            break;
+        case "dso-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoAdvancedSelect = AdvancedSelect;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAdvancedSelect, defineCustomElement };
+//# sourceMappingURL=dso-advanced-select.js.map
+
+//# sourceMappingURL=dso-advanced-select.js.map