@dso-toolkit/core 62.27.0 → 62.29.0

package/dist/cjs/dso-label_2.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-56461a0b.js');
+const index$1 = require('./index-ac055dd1.js');
 const clsx = require('./clsx-fc789adc.js');
 const index = require('./index-10c6b031.js');
-const v4 = require('./v4-c23234d2.js');
+const hasOverflow = require('./has-overflow-2fb1d618.js');
 
 const labelCss = ":host{display:inline-block;max-inline-size:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{border-radius:4px;display:inline-block;line-height:1.5;max-inline-size:100%;padding-block:4px;padding-inline:8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:inline-end;font-size:1rem;margin-block-end:-4px;margin-inline-start:8px;margin-inline-end:-4px;margin-block-start:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label{background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}.dso-label.dso-label-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;border-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding-block:0;padding-inline:8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}";
 const DsoLabelStyle0 = labelCss;
@@ -113,13 +113,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: 'cbeb665084f6c9ae343ec221c27e7fda24a2215b' }, index$1.h("span", { key: 'e5876df3c31450fdf4b06c988f55cfcab5278220', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
+        return (index$1.h(index$1.Fragment, { key: '63bab23d605ff8edc1fe6bd2bdac751f890d81f4' }, index$1.h("span", { key: 'c7e6f11ba9be8c3666f335c0a1acd8f0a20a1c90', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, index$1.h("slot", { key: '200321159ee7c00f20678f66bd25aadf4ab160d2', name: "symbol" }), index$1.h("span", { key: '17a7ffd2f9f89e301930910ad102a7762a614448', class: clsx.clsx("dso-label-content", {
+            }) }, index$1.h("slot", { key: 'b973a7965b5100f9ac28309dd48ffacb44276198', name: "symbol" }), index$1.h("span", { key: 'da0cc9a0f71117144d0e67efe86bc70bf970ee65', class: clsx.clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '606fdf8fb1b38519741054b3c84fdce6a9af7b3b' })), this.removable && (index$1.h("button", { key: '74d6b6e8c4da368c22aedbd538d4d57112e8834d', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { key: '84ce4a2c450ed605f4337e098690dd0843023812', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: '02e15f5243b78776015f36010bd672f42247dcc8', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: '0480b653c2d490919ccab44cb8ba1dab6e9e608b', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '0a74dc7a557ebae1a0d7a30888fe6716b4bdee72' })), this.removable && (index$1.h("button", { key: '53edfc2ee675a00196afc294fe3f92832074e0b8', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { key: '4d01d7c7583881847012605dc95633875d8c63c3', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: '2c491a534f65603292b65905e17da3cd6c11d00f', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: 'e7a24a236e64f272a694ae81ac9fa6a2442aa2d1', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -129,37 +129,262 @@ const Label = class {
 };
 Label.style = DsoLabelStyle0;
 
-const slideToggleCss = "button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";
-const DsoSlideToggleStyle0 = slideToggleCss;
+var maxSize = {
+  name: 'maxSize',
+  enabled: true,
+  phase: 'main',
+  requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+  fn: function fn(_ref) {
+    var state = _ref.state,
+        name = _ref.name,
+        options = _ref.options;
+    var overflow = hasOverflow.detectOverflow(state, options);
 
-const SlideToggle = class {
+    var _ref2 = state.modifiersData.preventOverflow || {
+      x: 0,
+      y: 0
+    },
+        x = _ref2.x,
+        y = _ref2.y;
+
+    var _state$rects$popper = state.rects.popper,
+        width = _state$rects$popper.width,
+        height = _state$rects$popper.height;
+
+    var _state$placement$spli = state.placement.split('-'),
+        basePlacement = _state$placement$spli[0];
+
+    var widthProp = basePlacement === 'left' ? 'left' : 'right';
+    var heightProp = basePlacement === 'top' ? 'top' : 'bottom';
+    state.modifiersData[name] = {
+      width: width - overflow[widthProp] - x,
+      height: height - overflow[heightProp] - y
+    };
+  }
+};
+
+const tooltipCss = ":host(.hidden){visibility:hidden}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:break-word;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;padding-block:8px;padding-inline:16px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-block:6px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{inset-block-end:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-block:0;padding-inline:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{inset-inline-start:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{inset-block-start:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{inset-inline-end:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}";
+const DsoTooltipStyle0 = tooltipCss;
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Tooltip_target;
+// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin
+const transitionDuration = 150;
+const applyMaxSize = {
+    name: "applyMaxSize",
+    enabled: true,
+    phase: hasOverflow.beforeWrite,
+    requires: ["maxSize"],
+    fn({ state }) {
+        let { width } = state.modifiersData.maxSize;
+        if (width < 160) {
+            width = 160;
+        }
+        state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
+    },
+};
+const Tooltip = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
-        this.dsoActiveChange = index$1.createEvent(this, "dsoActiveChange", 5);
-        this.checked = false;
-        this.disabled = false;
-        this.accessibleLabel = undefined;
-        this.labelledbyId = undefined;
-        this.hasVisibleLabel = undefined;
-        this.identifier = v4.v4();
-    }
-    handleSwitch(e) {
-        this.dsoActiveChange.emit({
-            originalEvent: e,
-            checked: !this.checked,
+        this.callbacks = {
+            activate: () => (this.active = true),
+            deactivate: () => (this.active = false),
+        };
+        this.onMouseLeave = () => {
+            var _a;
+            if (!this.element.matches(":hover") && !((_a = this.target) === null || _a === void 0 ? void 0 : _a.matches(":hover"))) {
+                this.callbacks.deactivate();
+            }
+        };
+        this.keyDownListener = (event) => {
+            if (event.key === "Escape") {
+                this.deactivate();
+            }
+        };
+        this.deactivatePopper = index.debounce(() => {
+            var _a;
+            this.hidden = true;
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.popper = undefined;
+        }, transitionDuration);
+        _Tooltip_target.set(this, void 0);
+        this.descriptive = false;
+        this.position = "top";
+        this.strategy = "auto";
+        this.noArrow = false;
+        this.stateless = undefined;
+        this.small = undefined;
+        this.active = false;
+        this.hidden = true;
+    }
+    /**
+     * Activate the tooltip (Sets the `active` attribute)
+     */
+    async activate() {
+        this.active = true;
+    }
+    /**
+     * Deactivate the tooltip (Removes the `active` attribute)
+     */
+    async deactivate() {
+        this.active = false;
+    }
+    watchPosition() {
+        if (!this.popper) {
+            return;
+        }
+        this.popper.setOptions({
+            placement: this.position,
         });
     }
-    componentWillLoad() {
-        this.hasVisibleLabel = this.host.querySelector("*") !== null;
+    watchStrategy() {
+        this.setStrategy();
+    }
+    setStrategy() {
+        if (!this.popper) {
+            return;
+        }
+        if (this.strategy === "absolute" || this.strategy === "fixed") {
+            this.popper.setOptions({
+                strategy: this.strategy,
+            });
+            return;
+        }
+        let element = this.element;
+        while (element && element.parentNode !== document) {
+            element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+            if (element !== null && hasOverflow.hasOverflow(element)) {
+                this.popper.setOptions({
+                    strategy: "fixed",
+                });
+                return;
+            }
+        }
+        this.popper.setOptions({
+            strategy: "absolute",
+        });
+    }
+    watchActive() {
+        if (this.active) {
+            this.activatePopper();
+            if (!this.stateless) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+                        modifiers: [{ name: "eventListeners", enabled: true }],
+                    });
+                    document.addEventListener("keydown", this.keyDownListener);
+                });
+            }
+        }
+        else {
+            document.removeEventListener("keydown", this.keyDownListener);
+            this.deactivatePopper();
+        }
+    }
+    listenClick(e) {
+        e.stopPropagation();
+    }
+    componentDidLoad() {
+        var _a;
+        const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".tooltip");
+        if (!(tooltip instanceof HTMLElement)) {
+            throw new Error("tooltip element is not instanceof HTMLElement");
+        }
+        if (!this.stateless && this.target) {
+            this.target.addEventListener("mouseenter", this.callbacks.activate);
+            [this.element, this.target].forEach((element) => element.addEventListener("mouseleave", this.onMouseLeave));
+            this.target.addEventListener("focus", this.callbacks.activate);
+            this.target.addEventListener("blur", this.callbacks.deactivate);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+        if (!this.stateless && this.target) {
+            this.target.removeEventListener("mouseenter", this.callbacks.activate);
+            [this.element, this.target].forEach((element) => element.removeEventListener("mouseleave", this.onMouseLeave));
+            this.target.removeEventListener("focus", this.callbacks.activate);
+            this.target.removeEventListener("blur", this.callbacks.deactivate);
+        }
+        this.target = undefined;
+    }
+    componentDidRender() {
+        var _a;
+        if (this.active) {
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+        }
     }
     render() {
-        return (index$1.h(index$1.Fragment, null, index$1.h("button", Object.assign({ key: '2f041ba46888fc7f12eca25309eedaf6f92509f5', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: '2028e621c3dfd4d6751044eeeb5a887fd196476d', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: 'f610a403b34591b0fb0571d191430749cff28c64', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '734939934ef6152a5961262abe5f6454a7e72780', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '3d603a04e5d2d0c741317188dd0f2f612223d585', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '66c9f4d20e3bbe2855a718cac3583b68dd907b8c', htmlFor: this.identifier }, index$1.h("slot", { key: '408fda225c63c407acbeb341761c2ab86851a3bc' })))));
+        return (index$1.h(index$1.Host, { key: '46cf85f470ba4a74966d0c792ae81c11efa39808', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, index$1.h("div", { key: 'ec613cea1d402473b442a79abada1b2c7ef7b245', class: clsx.clsx("tooltip", { in: this.active }) }, !this.noArrow && index$1.h("div", { key: '2be32f7acb19152aaf933c275fedc1ba6d9563d1', "data-popper-arrow": true, class: "tooltip-arrow" }), index$1.h("div", { key: '6d791bcb763d0eccc54875f8a51fad4f90c8387d', "aria-hidden": !this.descriptive || undefined, class: clsx.clsx("tooltip-inner", { "dso-small": this.small }) }, index$1.h("slot", { key: '89f68418f41bd6163492165ecd88087ad78d26b6' })))));
     }
-    get host() { return index$1.getElement(this); }
+    activatePopper() {
+        var _a;
+        this.hidden = false;
+        if (this.popper) {
+            return;
+        }
+        const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".tooltip");
+        if (this.target && tooltip instanceof HTMLElement) {
+            this.popper = hasOverflow.createPopper(this.target, tooltip, {
+                placement: this.position,
+                modifiers: [maxSize, applyMaxSize, { name: "eventListeners", enabled: false }],
+            });
+            this.setStrategy();
+        }
+    }
+    get target() {
+        var _a;
+        return (_a = __classPrivateFieldGet(this, _Tooltip_target, "f")) !== null && _a !== void 0 ? _a : this.initializeTarget();
+    }
+    set target(element) {
+        __classPrivateFieldSet(this, _Tooltip_target, element, "f");
+    }
+    initializeTarget() {
+        const id = this.element.id;
+        if (!id) {
+            console.warn("Unable to find reference tooltip has no [id] attribute.");
+            return;
+        }
+        const rootNode = this.element.getRootNode();
+        if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
+            console.warn(`rootNode is not instance of Document or ShadowRoot`);
+            return;
+        }
+        const reference = rootNode.querySelector(`[aria-describedBy="${id}`);
+        if (!reference) {
+            console.warn(`Unable to find reference with aria-describedby ${id}`);
+            return;
+        }
+        __classPrivateFieldSet(this, _Tooltip_target, reference, "f");
+        return reference;
+    }
+    get element() { return index$1.getElement(this); }
+    static get watchers() { return {
+        "position": ["watchPosition"],
+        "strategy": ["watchStrategy"],
+        "active": ["watchActive"]
+    }; }
 };
-SlideToggle.style = DsoSlideToggleStyle0;
+_Tooltip_target = new WeakMap();
+Tooltip.style = DsoTooltipStyle0;
 
 exports.dso_label = Label;
-exports.dso_slide_toggle = SlideToggle;
+exports.dso_tooltip = Tooltip;
 
 //# sourceMappingURL=dso-label_2.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"dso-label.dso-slide-toggle.entry.cjs.js","mappings":"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","names":["debounce","h","Fragment","clsx","v4"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-inline-size: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-label.dso-tooltip.entry.cjs.js","mappings":"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","names":["debounce","h","Fragment","clsx","detectOverflow","beforeWrite","hasOverflow","Host","createPopper"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx","../../node_modules/popper-max-size-modifier/dist/popper-max-size-modifier.esm.js","src/components/tooltip/tooltip.scss?tag=dso-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-inline-size: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop()\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\";\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop()\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby=\"toggle-anchor\"\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            >\r\n              <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","import { detectOverflow } from '@popperjs/core';\n\nvar maxSize = {\n  name: 'maxSize',\n  enabled: true,\n  phase: 'main',\n  requiresIfExists: ['offset', 'preventOverflow', 'flip'],\n  fn: function fn(_ref) {\n    var state = _ref.state,\n        name = _ref.name,\n        options = _ref.options;\n    var overflow = detectOverflow(state, options);\n\n    var _ref2 = state.modifiersData.preventOverflow || {\n      x: 0,\n      y: 0\n    },\n        x = _ref2.x,\n        y = _ref2.y;\n\n    var _state$rects$popper = state.rects.popper,\n        width = _state$rects$popper.width,\n        height = _state$rects$popper.height;\n\n    var _state$placement$spli = state.placement.split('-'),\n        basePlacement = _state$placement$spli[0];\n\n    var widthProp = basePlacement === 'left' ? 'left' : 'right';\n    var heightProp = basePlacement === 'top' ? 'top' : 'bottom';\n    state.modifiersData[name] = {\n      width: width - overflow[widthProp] - x,\n      height: height - overflow[heightProp] - y\n    };\n  }\n};\n\nexport default maxSize;\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"tooltip.variables\" as tooltip-variables;\r\n\r\n:host(.hidden) {\r\n  visibility: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tooltip {\r\n  font-family: typography.$font-family-base;\r\n  // We deliberately do NOT reset font-size.\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: typography.$line-height-base;\r\n  line-break: auto;\r\n  text-align: start;\r\n  text-decoration: none;\r\n  text-shadow: none;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  word-break: break-word;\r\n  word-spacing: normal;\r\n  word-wrap: normal;\r\n  white-space: normal;\r\n\r\n  --link-color: #{colors.$grasgroen};\r\n\r\n  display: block;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n  font-size: typography.$font-size-small;\r\n  opacity: 0;\r\n  position: absolute;\r\n  transition: opacity tooltip-variables.$transition-duration linear;\r\n  z-index: zindex.$tooltip;\r\n\r\n  &.in {\r\n    opacity: tooltip-variables.$opacity;\r\n  }\r\n\r\n  .tooltip-inner {\r\n    background-color: colors.$wit;\r\n    border-radius: tooltip-variables.$border-radius;\r\n    color: colors.$grijs-90;\r\n    display: inline-block;\r\n    font-size: typography.$root-font-size-base;\r\n    max-inline-size: tooltip-variables.$max-inline-size;\r\n    padding-block: tooltip-variables.$padding-block;\r\n    padding-inline: tooltip-variables.$padding-inline;\r\n    position: relative;\r\n\r\n    &.dso-small {\r\n      max-inline-size: tooltip-variables.$max-inline-size-small;\r\n    }\r\n  }\r\n\r\n  .tooltip-arrow {\r\n    border-color: transparent;\r\n    border-style: solid;\r\n    block-size: 0;\r\n    inline-size: 0;\r\n  }\r\n\r\n  &[data-popper-placement=\"top\"] {\r\n    margin-block-start: -3px;\r\n    padding-block: tooltip-variables.$arrow-inline-size;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      inset-block-end: 0;\r\n      border-block-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-block-end-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"right\"] {\r\n    margin-inline-start: 3px;\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n    .tooltip-arrow {\r\n      inset-inline-start: 0;\r\n      border-inline-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-inline-start-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"bottom\"] {\r\n    margin-block-start: 3px;\r\n    padding-block: tooltip-variables.$arrow-inline-size;\r\n    padding-inline: 0;\r\n\r\n    .tooltip-arrow {\r\n      inset-block-start: 0;\r\n      border-block-end-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-block-start-width: 0;\r\n      margin-inline-start: var(--tooltip-margin-inline-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n\r\n  &[data-popper-placement=\"left\"] {\r\n    margin-inline-start: -3px;\r\n    margin-inline-end: var(--tooltip-margin-inline-end, unset);\r\n    padding-block: 0;\r\n    padding-inline: tooltip-variables.$arrow-inline-size;\r\n\r\n    .tooltip-arrow {\r\n      inset-inline-end: 0;\r\n      border-inline-start-color: tooltip-variables.$arrow-color;\r\n      border-width: tooltip-variables.$arrow-inline-size;\r\n      border-inline-end-width: 0;\r\n      margin-block-start: var(--tooltip-margin-block-start, tooltip-variables.$arrow-margin * -1);\r\n    }\r\n  }\r\n}\r\n","import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n  name: \"applyMaxSize\",\r\n  enabled: true,\r\n  phase: beforeWrite,\r\n  requires: [\"maxSize\"],\r\n  fn({ state }: { state: PopperState }) {\r\n    let { width } = state.modifiersData.maxSize;\r\n    if (width < 160) {\r\n      width = 160;\r\n    }\r\n\r\n    state.styles.popper = {\r\n      ...state.styles.popper,\r\n      maxWidth: `${width}px`,\r\n    };\r\n  },\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-tooltip\",\r\n  styleUrl: \"tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tooltip {\r\n  /**\r\n   * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n   */\r\n  @Prop({\r\n    reflect: true,\r\n  })\r\n  descriptive = false;\r\n\r\n  /**\r\n   * Set position of tooltip relative to target\r\n   */\r\n  @Prop()\r\n  position: Placement = \"top\";\r\n\r\n  /**\r\n   * Set position strategy of tooltip\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  /**\r\n   * Set attribute `no-arrow` to hide the arrow\r\n   */\r\n  @Prop()\r\n  noArrow = false;\r\n\r\n  /**\r\n   * Deactivates mouseover behaviour\r\n   */\r\n  @Prop()\r\n  stateless?: boolean;\r\n\r\n  /**\r\n   * Defines if the tooltip has a smaller max-width\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  active = false;\r\n\r\n  /**\r\n   * Activate the tooltip (Sets the `active` attribute)\r\n   */\r\n  @Method()\r\n  async activate(): Promise<void> {\r\n    this.active = true;\r\n  }\r\n\r\n  /**\r\n   * Deactivate the tooltip (Removes the `active` attribute)\r\n   */\r\n  @Method()\r\n  async deactivate(): Promise<void> {\r\n    this.active = false;\r\n  }\r\n\r\n  @Watch(\"position\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.position,\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.element;\r\n    while (element && element.parentNode !== document) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Watch(\"active\")\r\n  watchActive() {\r\n    if (this.active) {\r\n      this.activatePopper();\r\n\r\n      if (!this.stateless) {\r\n        setTimeout(() => {\r\n          this.popper?.setOptions({\r\n            modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n          });\r\n          document.addEventListener(\"keydown\", this.keyDownListener);\r\n        });\r\n      }\r\n    } else {\r\n      document.removeEventListener(\"keydown\", this.keyDownListener);\r\n      this.deactivatePopper();\r\n    }\r\n  }\r\n\r\n  @Element()\r\n  private element!: HTMLDsoTooltipElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  private callbacks: TooltipCallbacks = {\r\n    activate: () => (this.active = true),\r\n    deactivate: () => (this.active = false),\r\n  };\r\n\r\n  private onMouseLeave = () => {\r\n    if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n      this.callbacks.deactivate();\r\n    }\r\n  };\r\n\r\n  @State()\r\n  private hidden = true;\r\n\r\n  private listenClick(e: MouseEvent) {\r\n    e.stopPropagation();\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n    if (!(tooltip instanceof HTMLElement)) {\r\n      throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.popper?.destroy();\r\n\r\n    if (!this.stateless && this.target) {\r\n      this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n      [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n      this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n      this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n    }\r\n\r\n    this.target = undefined;\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active) {\r\n      this.popper?.update();\r\n    }\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.deactivate();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n        <div class={clsx(\"tooltip\", { in: this.active })}>\r\n          {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n          <div aria-hidden={!this.descriptive || undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private deactivatePopper = debounce(() => {\r\n    this.hidden = true;\r\n    this.popper?.destroy();\r\n    this.popper = undefined;\r\n  }, transitionDuration);\r\n\r\n  private activatePopper(): void {\r\n    this.hidden = false;\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n    if (this.target && tooltip instanceof HTMLElement) {\r\n      this.popper = createPopper(this.target, tooltip, {\r\n        placement: this.position,\r\n        modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n      });\r\n\r\n      this.setStrategy();\r\n    }\r\n  }\r\n\r\n  private get target(): HTMLElement | undefined {\r\n    return this.#target ?? this.initializeTarget();\r\n  }\r\n\r\n  private set target(element: HTMLElement | undefined) {\r\n    this.#target = element;\r\n  }\r\n\r\n  #target?: HTMLElement;\r\n\r\n  private initializeTarget(): HTMLElement | undefined {\r\n    const id = this.element.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.element.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    this.#target = reference;\r\n    return reference;\r\n  }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n  activate: () => void;\r\n  deactivate: () => void;\r\n}\r\n"],"version":3}

package/dist/cjs/dso-legend-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-56461a0b.js');
+const index = require('./index-ac055dd1.js');
 const clsx = require('./clsx-fc789adc.js');
 
 const legendItemCss = ":host {\n  display: block;\n  padding-block: 4px;\n  padding-inline: 4px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.legend-item {\n  display: flex;\n  position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n  margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n  margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n  margin-inline-start: 70px;\n}\n\nbutton {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  position: absolute;\n  inset-inline-end: 0;\n}\nbutton:focus, button:focus-visible {\n  outline-offset: 2px;\n}\nbutton:active {\n  outline: 0;\n}\nbutton[disabled] {\n  color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n  color: #39870c;\n}\nbutton:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton:not([disabled]):active {\n  color: #173521;\n}\nbutton.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\nbutton.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nbutton.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}";
@@ -32,10 +32,10 @@ const LegendItem = class {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (index.h(index.Host, { key: 'c004f8202b61416261292f9d662e36e8165f3439', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '61fbea4d5443eb885542fe60c2a291e1b15c58f7', class: clsx.clsx("legend-item", {
+        return (index.h(index.Host, { key: '8ea01dfcb640d2e3a6767de6fb581913722bc37a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '7e3f837a3b4370cb354a3c5e7e4f698bcca3a856', class: clsx.clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, index.h("div", { key: 'e3871d797250ad550f5beed65af222fe14191182', hidden: !hasSymbol }, index.h("slot", { key: 'a32b0a6a2b2f42317de05841458944866bf6b8ad', name: "symbol" })), index.h("div", { key: '22e1a547ed3f275af2ca4484867a31c32216141c' }, index.h("slot", { key: '93731a611e898b6e5c53b171f3f6e44af7e6622e' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '69eb20452cbb47bc241a9923bf0b659e4d5e6ce4', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: 'f2de4d27c5f851857a3b0d17e347025772e0b800', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: 'da0491938193ed5b0fb113ed6750b5ff33f19043', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: '3395148769cf6cbbbea2e7c724e2189a7f4b4440', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'fc172ae2f4f95da35a6beb6be749e966e5270bb9', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: 'd69e26a81c630511fc51d0cb0f7e46591ab0315b', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '94e76ca98fc6180ac40fc7b3dd9d2520b051fef2', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '212e6659dff04e22f64d10cb18aae9b5d5ee26df', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '395b05d3e877e1cb1f0ca5d5ff908fd9122c2a59', name: "body" }))));
+            }) }, index.h("div", { key: 'e24ef7f85e830d69f179794daa70f5427ef56163', hidden: !hasSymbol }, index.h("slot", { key: 'df812c8618d62572da8850e3ee4b57fa28155483', name: "symbol" })), index.h("div", { key: 'cf87688885bf1371fe69c8b55e0de9702beaa1b1' }, index.h("slot", { key: 'dbb1be783d9b79489d8fcfd69e643d14bbc2fb3f' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '3fc250b6b42cd7980c268d3dbdc2afcc20e9f700', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: 'f6b4085d0c39941c70aa68b64f2eae73bc1737d8', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: '7c4cbf3a573be1052f0f0f441fa1a62caba9fdee', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: 'd9240cec6cd536fc50e8cb6902da6956c34d2daf', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'e26526598d1a301e48672da6f30857a65568ddbd', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: 'f04f3ea3548ce26be41e3f11a8bf26d37717e315', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '2ad21eee3d8cd97faa746fbbf941af5ab7573ff2', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: 'fe3a07b920bd7af69f1f52e95373ceef5c7fa5be', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: 'b5be190d74a6e05d1bf7d035fcfb6f4475339d21', name: "body" }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-56461a0b.js');
+const index = require('./index-ac055dd1.js');
 const focusTrap_esm = require('./focus-trap.esm-6cff35a7.js');
 const clsx = require('./clsx-fc789adc.js');
 require('./index.esm-970bc106.js');
 
-const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  inline-size: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  block-size: 1.5rem;\n  text-align: center;\n  inline-size: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-inline-start: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  inline-size: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  block-size: 24px;\n  position: absolute;\n  inset-inline-end: 15px;\n  inset-block-start: 15px;\n  inline-size: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-inline-start: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-block-start: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  inline-size: 9ch;\n}\n\n.form-control {\n  display: block;\n  inline-size: 100%;\n  block-size: 40px;\n  padding-block: 6px;\n  padding-inline: 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  inline-size: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
+const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  inline-size: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  block-size: 1.5rem;\n  text-align: center;\n  inline-size: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #d7e7ce, inset 0 1px 0 0 #d7e7ce, inset -1px 0 0 0 #d7e7ce;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-inline-start: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  inline-size: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  block-size: 24px;\n  position: absolute;\n  inset-inline-end: 15px;\n  inset-block-start: 15px;\n  inline-size: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-inline-start: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-block-start: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  inline-size: 9ch;\n}\n\n.form-control {\n  display: block;\n  inline-size: 100%;\n  block-size: 40px;\n  padding-block: 6px;\n  padding-inline: 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  inline-size: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
 const DsoListButtonStyle0 = listButtonCss;
 
 const ListButton = class {
@@ -125,7 +125,7 @@ const ListButton = class {
     render() {
         const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (index.h("div", { key: 'a7081662fb2f3ff4379657cba4b16bc1d7f6c794', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: '9634845843257078488292d9d2d16d0cfc413744', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: 'd24d32d2e9de61b0f641e7d09bbf8aae17ac6b9b', class: "dso-selectable" }, index.h("input", { key: '1cfa9ae22dfc4a104a2f4ab6d2dc8ab29cd61753', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), index.h("label", { key: '2f49787d8800edfdd41ac70d30d07f876f4add44', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: '8068c6495c7aedd29b8965a761d9d84486bbd8e6', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: 'c1efb3c0b83658846da26d7df8018aa0a015b792', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: 'b82a8b9fa1e47afea93ed7884ad609df0c340d69', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: '97538ed22e40c42bf8dee90f02fc1f555c2b3486', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: '4d667eecc82c48e3c471bea637d4eda22bbc5464', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (index.h("button", { key: '45f56234d9263924a921060f98e670127bbc5c0c', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: '7471483fd19876dada62fc3d6a9fad65858d9dea', icon: "minus-circle" }), index.h("span", { key: 'b0ff9565269b8b78647fadba0cbcb7dd2e5816a7', class: "sr-only" }, "Aantal verlagen"))), index.h("div", { key: '315ed0f7f87dfc0a1d27dded8a38cec5c60f9a63', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (index.h("input", { key: '620db229f96ab2956d7adcd0552661394dbfb015', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), index.h("form", { key: 'eef1f15d159adc64f9baa496719bd94be26b24a5', onSubmit: (e) => this.setCount(e) }, index.h("div", { key: '20e1b4018c23b564e54040014b853848e13f9d2c', ref: (element) => (this.manualInputWrapperElement = element) }, index.h("input", { key: '772f05dbc9104b2b4ad2e2e238512f3f98d58373', class: clsx.clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (index.h("button", { key: 'ae5a7ec0e6413ab9fc86dca79631e1a1ea27d15e', class: clsx.clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (index.h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (index.h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (index.h("button", { key: 'e726222f54d93445295364e0b493b099b6dccc78', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: 'c0d43c185a704259d330e2ee413355c5f7af34d7', icon: "plus-circle" }), index.h("span", { key: '6a54fd8645e34cc6850a675743eb89fb66329663', class: "sr-only" }, "Aantal verhogen")))))));
+        return (index.h("div", { key: '7cd66b1005ca012be7debec40c85dfa245103482', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'd71e1cb57d2eba09adf61bd4944cb9c7aa1318f0', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: '3e60dc348e53946cd2d0e6ef519d7a5a84b20177', class: "dso-selectable" }, index.h("input", { key: 'c3d9e437d66676515d7488d474e4bbdac90a58c4', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), index.h("label", { key: '7db34b3d190d5ca267d78e3e27b76ecdcf2b0429', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: 'bc4d3255062c5a45de627f911f1dd9f3cc666c39', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: 'cf7396b00a3f0720d69a32254b5bab79291382f3', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '475ddfe5f776f8feecae6041e3b008cf8abc7ce2', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: '8e70a5e273eda24cff6676ff4018277db135b61f', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: '8fbc9df64f5fcad29bf26391c3258bd93c9786f8', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (index.h("button", { key: 'bc2ce4408fbf3727511b52ade6bab7c3c434e045', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: '7f22151f8f8979be45f86f76bcfd12676a37d8fb', icon: "minus-circle" }), index.h("span", { key: 'a33ceeb8f6b953693bf575bfab4111905ee96854', class: "sr-only" }, "Aantal verlagen"))), index.h("div", { key: '6658e579ded3557e634bf3ddb7b8577e9d14df17', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (index.h("input", { key: 'd82691484c68cf49920611239fcd25e87a267113', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), index.h("form", { key: 'aa20545748dce7bf3aa56669680ebfbdc790aa81', onSubmit: (e) => this.setCount(e) }, index.h("div", { key: '69d4a9866822ebf1ccb525681d9b53406bd3fe88', ref: (element) => (this.manualInputWrapperElement = element) }, index.h("input", { key: 'adec7b270253cfa23128577bf82422ad2fe1e190', class: clsx.clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (index.h("button", { key: '21ca1f41974c793693b6dfd5d52da5cee46bfef3', class: clsx.clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (index.h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (index.h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (index.h("button", { key: 'dac00a3af549df46e9ba050354983637f39055f0', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: '73314b7a40caae99052e6f1e63e28370ea5d36ea', icon: "plus-circle" }), index.h("span", { key: '0ff4e475035dd40abbc9e02ec562156517b7f725', class: "sr-only" }, "Aantal verhogen")))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {