@dso-toolkit/core 69.2.1 → 70.0.1

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

@@ -1,14 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-57504611.js');
-const clsx = require('./clsx-fc789adc.js');
-const index = require('./index-a49786b9.js');
-const v4 = require('./v4-2a8f5623.js');
+var index$1 = require('./index-CkTcEJuV.js');
+var clsx = require('./clsx-BtxeOLZW.js');
+var index = require('./index-D8QM7CRO.js');
+var v4 = require('./v4-Br3XC_0C.js');
+require('./_commonjsHelpers-BJu3ubxk.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}.dso-label.dso-label-bright{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;
 
 const resizeObserver = new ResizeObserver(index.debounce((entries) => {
     entries.forEach(({ target }) => {
@@ -105,13 +103,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '3bf1a2b10d7cdb37d200dc8435872757f730f7f3' }, index$1.h("span", { key: '2963be77a7e44f85c07ae9885dd7aaeb4b6a04ae', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
+        return (index$1.h(index$1.Fragment, { key: '8fd30b6ad557f1d54be48b339e682b148b44e2ba' }, index$1.h("span", { key: '0bdb791180337871d18c42341c16fa897ca8922c', "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: '55b447e4ea124705739d3e65c53b3dcc87b6d8c4', name: "symbol" }), index$1.h("span", { key: '48fd3d404c04bcc3c4e69e1ac3e918997959a65c', class: clsx.clsx("dso-label-content", {
+            }) }, index$1.h("slot", { key: '3b42de72a93e7c0b3aee68935d7ed3aabfb0dd06', name: "symbol" }), index$1.h("span", { key: '107445074a029cdf794553429e05f2db498371ae', 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: 'ba3e40904693080e4558c9d0d982b8146092ecb2' })), this.removable && (index$1.h("button", { key: '6aa571c0e12e356951d1970e8f9afa4189c36fd0', 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: '4c06e38f4bad11a7208d924f715b0d7b4e3b5382', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: 'b549e2c517416cd705778addcc5594a6b2bd8b18', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: '6782bb54d4a720f90433ded22edc81badfc6acfb', 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: '8b5f26d80ca6b93fc2a18679526f9ca5c4539415' })), this.removable && (index$1.h("button", { key: '31a358d27b50ffa19a40fd13e5b4962a97b20267', 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: '825778552459fa71dc1dd1bfba8788ad33f82faa', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: 'a414a63d43c18e66355dd87eab556251490bff9e', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: 'd9bba58c8c88b5e4c33fecdbfd1f17a2db122cdc', 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 {
@@ -119,7 +117,7 @@ const Label = class {
         "truncate": ["watchTruncate"]
     }; }
 };
-Label.style = DsoLabelStyle0;
+Label.style = labelCss;
 
 const RenvooiRenderText = ({ text, mark, onMarkItemHighlight }) => {
     if (!mark) {
@@ -159,7 +157,6 @@ const RenvooiRender = ({ value, mark, onMarkItemHighlight }) => {
 };
 
 const renvooiCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}mark{background-color:var(--_dt-mark-bg-color, #f8f5ce);color:var(--_dt-mark-color, #000);padding-block:var(--_dt-mark-padding-block, 0.2rem);font-weight:var(--_dt-mark-font-weight, normal)}mark.dso-highlight{background-color:#dbd136}:host{display:inline}*,*::after,*::before{box-sizing:border-box}.text{text-decoration:var(--_dso-renvooi-text-decoration)}";
-const DsoRenvooiStyle0 = renvooiCss;
 
 const Renvooi = class {
     constructor(hostRef) {
@@ -179,10 +176,9 @@ const Renvooi = class {
         return (index$1.h(index$1.Fragment, null, this.values.map((v) => (index$1.h(RenvooiRender, { value: v, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, v, this.values); }), onMarkItemHighlight: this.handleMarkItemHighlight })))));
     }
 };
-Renvooi.style = DsoRenvooiStyle0;
+Renvooi.style = renvooiCss;
 
 const slideToggleCss = ".sc-dso-slide-toggle-h{display:inline-block;padding-block-start:2px}button.dso-slider.sc-dso-slide-toggle{border:0;padding:0}button.dso-slider.sc-dso-slide-toggle:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider.sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#999;transition:fill 0.25s}button.dso-slider.sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#275937}button.dso-slider[aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#ccc}button.dso-slider[disabled].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle rect.sc-dso-slide-toggle{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true].sc-dso-slide-toggle svg.sc-dso-slide-toggle circle.sc-dso-slide-toggle{fill:#e5e5e5}.dso-slider.sc-dso-slide-toggle{border-radius:24px;display:inline-flex}.dso-slider.sc-dso-slide-toggle:hover{cursor:pointer}";
-const DsoSlideToggleStyle0 = slideToggleCss;
 
 const SlideToggle = class {
     constructor(hostRef) {
@@ -211,14 +207,15 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index$1.h(index$1.Fragment, null, index$1.h("button", Object.assign({ key: '5aee4d9968329a8df970a172e481d00aa89f6cfc', 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: '470f2fef216e0b5fc3d450af8285c007a376d1f6', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: 'd013d54c54240c42ab7a2fe35cfaf8ff82fbe36d', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: 'abb51b7d6bf57c19945644d93d7f7651c728ec74', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: 'b4b6842b0a7acb77de82d79b9932dfaa3e0ae7c4', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '718c01776b005c142c58c3f5a96f956c8cecab5a', htmlFor: this.identifier }, index$1.h("slot", { key: '398f532a0442e039704f9fcd130eafb33a19b55f' })))));
+        return (index$1.h(index$1.Fragment, null, index$1.h("button", Object.assign({ key: '7ff86866a9d77df22b05998c9ab88e9b44a3037f', 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: 'fe3211c16c38e99ee8aecef786dd546e7c8a059f', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '771ac2486522b8e2bb130d7bb4e0779fe0adbe45', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '9856f027ca31cfd9732774c7440eb07ef749c4d0', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '65ea5eba7b1e850822b2bf57537739547bc19a52', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: 'e140104191700dbdb0e8c1061f78617217e459d8', htmlFor: this.identifier }, index$1.h("slot", { key: 'a2f1b30ad79f1ab9c47b28e2e4814a5198919bde' })))));
     }
     get host() { return index$1.getElement(this); }
 };
-SlideToggle.style = DsoSlideToggleStyle0;
+SlideToggle.style = slideToggleCss;
 
 exports.dso_label = Label;
 exports.dso_renvooi = Renvooi;
 exports.dso_slide_toggle = SlideToggle;
+//# sourceMappingURL=dso-label.dso-renvooi.dso-slide-toggle.entry.cjs.js.map
 
 //# sourceMappingURL=dso-label_3.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"dso-label.dso-renvooi.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/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","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\nimport { LabelStatus } from \"./label.interfaces\";\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({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: LabelStatus;\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 { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n  text: string;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, ref: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n  if (!mark) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  const result = mark(text);\r\n\r\n  if (!result) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {result.map((renvooiText) => {\r\n        if (typeof renvooiText === \"string\") {\r\n          return <>{renvooiText}</>;\r\n        }\r\n\r\n        return (\r\n          <mark\r\n            class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n            ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n          >\r\n            {renvooiText.text}\r\n          </mark>\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return (\r\n      <span class=\"text\">\r\n        <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </span>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return (\r\n      <ins>\r\n        <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    );\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return (\r\n      <del>\r\n        <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>\r\n        <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n      <ins>\r\n        <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    </>\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n  text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Fragment, Prop, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\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@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n  display: inline-block;\r\n  padding-block-start: (typography.$line-height-base * typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\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, Prop, EventEmitter, Element, State, Fragment } 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  scoped: true,\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-renvooi.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/renvooi/renvooi-render-text.tsx","src/components/renvooi/renvooi-render.tsx","src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","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\nimport { LabelStatus } from \"./label.interfaces\";\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({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop()\r\n  status?: LabelStatus;\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 { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { RenvooiRenderMarkFunction } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderTextProps {\r\n  text: string;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, ref: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRenderText: FunctionalComponent<RenvooiRenderTextProps> = ({ text, mark, onMarkItemHighlight }) => {\r\n  if (!mark) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  const result = mark(text);\r\n\r\n  if (!result) {\r\n    return <>{text}</>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {result.map((renvooiText) => {\r\n        if (typeof renvooiText === \"string\") {\r\n          return <>{renvooiText}</>;\r\n        }\r\n\r\n        return (\r\n          <mark\r\n            class={renvooiText.highlight ? \"dso-highlight\" : undefined}\r\n            ref={(ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref)}\r\n          >\r\n            {renvooiText.text}\r\n          </mark>\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport { RenvooiRenderMarkFunction, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRenderText } from \"./renvooi-render-text\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue;\r\n  mark: RenvooiRenderMarkFunction | undefined;\r\n  onMarkItemHighlight: (text: string, elementRef: HTMLElement) => void | undefined;\r\n}\r\n\r\nexport const RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value, mark, onMarkItemHighlight }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return (\r\n      <span class=\"text\">\r\n        <RenvooiRenderText text={value} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </span>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return (\r\n      <ins>\r\n        <RenvooiRenderText text={value.toegevoegd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    );\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return (\r\n      <del>\r\n        <RenvooiRenderText text={value.verwijderd} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>\r\n        <RenvooiRenderText text={value.was} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </del>\r\n      <ins>\r\n        <RenvooiRenderText text={value.wordt} mark={mark} onMarkItemHighlight={onMarkItemHighlight} />\r\n      </ins>\r\n    </>\r\n  );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.text {\r\n  text-decoration: var(--_dso-renvooi-text-decoration);\r\n}\r\n","import { Component, ComponentInterface, Fragment, Prop, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\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@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n  display: inline-block;\r\n  padding-block-start: (typography.$line-height-base * typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\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, Prop, EventEmitter, Element, State, Fragment } 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  scoped: true,\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}

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

@@ -1,12 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-57504611.js');
-const clsx = require('./clsx-fc789adc.js');
+var index = require('./index-CkTcEJuV.js');
+var clsx = require('./clsx-BtxeOLZW.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}\nbutton:focus, button:focus-visible {\n  outline-offset: 2px;\n}\nbutton:active {\n  outline: 0;\n}\nbutton {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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}\nbutton {\n  position: absolute;\n  inset-inline-end: 0;\n}";
-const DsoLegendItemStyle0 = legendItemCss;
 
 const LegendItem = class {
     constructor(hostRef) {
@@ -33,15 +30,16 @@ const LegendItem = class {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (index.h(index.Host, { key: 'fc79f2d5875d2f35d0209d007d0c483b0b3a72f7', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '353c8ec1f937683c95f35efc80660867192a6a41', class: clsx.clsx("legend-item", {
+        return (index.h(index.Host, { key: 'd156def85be1ec2a37d991b228faf5277833402a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: 'b107f35a432abff219fc66877a0d272f09033a1d', class: clsx.clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, index.h("div", { key: '9332a0474f37cd6bc840e77acb83367e91844d82', hidden: !hasSymbol }, index.h("slot", { key: 'f773b1dbd4c596c2678251fc31ba3b8bab19d0ed', name: "symbol" })), index.h("div", { key: 'b7d5fff4fa5cc85ef4e36f2479d615cf718d9497' }, index.h("slot", { key: 'ab9889a69d2a5ec8d57bbb142123f3e35e4899c6' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '05d711b7a3af1ccf6d664a493332245a143481a5', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: 'f7f40cb8c99bbe60cf94c22837be9fd4e5ea515c', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: 'bebe9f676b4a8f81e17137a4cb5a19509595bd6a', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: 'c68486b5f5a481336d25dd921906535ad1cc0366', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'fb4d95259f72734c25ad701ba1d54ceb81c1a342', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: '18368288cab62ff4d77d107b85bceacee6a4b6ea', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: 'b96d36039466662375e4d001ba7405f1f70a9ec3', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '15c61ac95b4dcd9868b95dd5f4f975fad0aa7abe', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '5f5f529c2c048adf320c7e63dc99597a29e38ba1', name: "body" }))));
+            }) }, index.h("div", { key: '1b016daa9b14722110b19a11fae10fa85dc84820', hidden: !hasSymbol }, index.h("slot", { key: '8f57a88efde9e827af56f53b2831e2b0e280c3a8', name: "symbol" })), index.h("div", { key: '5142f827716e2b369f903cb1d4597ce5c43446b0' }, index.h("slot", { key: '911d4a2e26f44e11ee06d51436d9ff3fb70f309b' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: 'b65362990e4acb3dbbdd1c82ec20e994bcba5717', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: 'f2eb84fe89d47a9d6e505dfc4e4c590a8e874dc9', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: '6c3c82821756f909145621e994adad1abe307dd6', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: '87e3832de8540b87ec4b72324417399d4ce88aef', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'e4f5e0b1b70736de5b72090a213448cb27c8cb81', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: '0d837176e583140a37ab5637a70f1c5f0717346e', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '53e00d795f9b2e30573d35e2343b48a7874fdd45', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '3012ea8681873b92090be198015f4e459b7cb7d8', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: 'a43f653b369d4ba75c8ab8a510f676aaf108958d', name: "body" }))));
     }
     get host() { return index.getElement(this); }
 };
-LegendItem.style = DsoLegendItemStyle0;
+LegendItem.style = legendItemCss;
 
 exports.dso_legend_item = LegendItem;
+//# sourceMappingURL=dso-legend-item.entry.cjs.js.map
 
 //# sourceMappingURL=dso-legend-item.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"dso-legend-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,gpHAAgpH,CAAC;AACvqH,4BAAe,aAAa;;MCaf,UAAU;IALvB;;;;;;;;QAaE,aAAQ,GAAG,KAAK,CAAC;QAiCjB,aAAQ,GAAG,KAAK,CAAC;KAwDlB;IAtDC,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KACnD;IAED,IAAI,wBAAwB;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;KAC3D;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QACrD,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC;QACjD,MAAM,YAAY,GAAG,IAAI,CAAC,wBAAwB,KAAK,IAAI,CAAC;QAE5D,QACEA,QAACC,UAAI,qDAAC,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAChGD,kEACE,KAAK,EAAEE,SAAI,CAAC,aAAa,EAAE;gBACzB,oBAAoB,EAAE,SAAS;gBAC/B,wBAAwB,EAAE,YAAY;aACvC,CAAC,IAEFF,kEAAK,MAAM,EAAE,CAAC,SAAS,IACrBA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACNA,oEACEA,oEAAa,CACT,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,KACpCA,4EAAe,QAAQ,EAAC,QAAQ,IAAE,IAAI,CAAC,eAAe,CAAiB,CACxE,EACA,IAAI,CAAC,SAAS,KACbA,qEAAQ,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IACrGA,mEAAM,KAAK,EAAC,SAAS,+BAAgC,EACrDA,uEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACV,EAEA,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,KACxBA,qEAAQ,EAAE,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IACpFA,mEAAM,KAAK,EAAC,SAAS,6BAA8B,EACnDA,uEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAI,CAC7C,CACV,CACG,EACNA,kEAAK,MAAM,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,IACpEA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACD,EACP;KACH;;;;;;;","names":["h","Host","clsx"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@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/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: units.$u1 * 0.5;\r\n  padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n  display: flex;\r\n  position: relative;\r\n\r\n  &.legend-item-symbol {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$symbol-inline-size + units.$u1;\r\n    }\r\n  }\r\n\r\n  &.legend-item-selectable {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$selectable-inline-size;\r\n    }\r\n\r\n    &.legend-item-symbol {\r\n      + .body {\r\n        margin-inline-start: (\r\n          legend-item-variables.$symbol-inline-size + units.$u1 + legend-item-variables.$selectable-inline-size\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    position: absolute;\r\n    inset-inline-end: 0;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showBody = false;\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\":scope > dso-selectable\");\r\n  }\r\n\r\n  get bodySlottedElement() {\r\n    return this.host.querySelector(\"[slot='body']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasBody = this.bodySlottedElement !== null;\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div\r\n          class={clsx(\"legend-item\", {\r\n            \"legend-item-symbol\": hasSymbol,\r\n            \"legend-item-selectable\": isSelectable,\r\n          })}\r\n        >\r\n          <div hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div>\r\n            <slot></slot>\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n          {this.removable && (\r\n            <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n              <span class=\"sr-only\">Legenda item verwijderen</span>\r\n              <dso-icon icon=\"trash\"></dso-icon>\r\n            </button>\r\n          )}\r\n\r\n          {hasBody && !this.disabled && (\r\n            <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n              <span class=\"sr-only\">Legenda item aanpassen</span>\r\n              <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n            </button>\r\n          )}\r\n        </div>\r\n        <div hidden={!hasBody || this.disabled || !this.showBody} class=\"body\">\r\n          <slot name=\"body\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-legend-item.entry.cjs.js","mappings":"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","names":["h","Host","clsx"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@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/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: units.$u1 * 0.5;\r\n  padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n  display: flex;\r\n  position: relative;\r\n\r\n  &.legend-item-symbol {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$symbol-inline-size + units.$u1;\r\n    }\r\n  }\r\n\r\n  &.legend-item-selectable {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$selectable-inline-size;\r\n    }\r\n\r\n    &.legend-item-symbol {\r\n      + .body {\r\n        margin-inline-start: (\r\n          legend-item-variables.$symbol-inline-size + units.$u1 + legend-item-variables.$selectable-inline-size\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    position: absolute;\r\n    inset-inline-end: 0;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showBody = false;\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\":scope > dso-selectable\");\r\n  }\r\n\r\n  get bodySlottedElement() {\r\n    return this.host.querySelector(\"[slot='body']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasBody = this.bodySlottedElement !== null;\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div\r\n          class={clsx(\"legend-item\", {\r\n            \"legend-item-symbol\": hasSymbol,\r\n            \"legend-item-selectable\": isSelectable,\r\n          })}\r\n        >\r\n          <div hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div>\r\n            <slot></slot>\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n          {this.removable && (\r\n            <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n              <span class=\"sr-only\">Legenda item verwijderen</span>\r\n              <dso-icon icon=\"trash\"></dso-icon>\r\n            </button>\r\n          )}\r\n\r\n          {hasBody && !this.disabled && (\r\n            <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n              <span class=\"sr-only\">Legenda item aanpassen</span>\r\n              <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n            </button>\r\n          )}\r\n        </div>\r\n        <div hidden={!hasBody || this.disabled || !this.showBody} class=\"body\">\r\n          <slot name=\"body\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"dso-legend-item.entry.cjs.js","sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@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/components/button\";\r\n@use \"~dso-toolkit/src/components/legend-item/legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: units.$u1 * 0.5;\r\n  padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.legend-item {\r\n  display: flex;\r\n  position: relative;\r\n\r\n  &.legend-item-symbol {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$symbol-inline-size + units.$u1;\r\n    }\r\n  }\r\n\r\n  &.legend-item-selectable {\r\n    + .body {\r\n      margin-inline-start: legend-item-variables.$selectable-inline-size;\r\n    }\r\n\r\n    &.legend-item-symbol {\r\n      + .body {\r\n        margin-inline-start: (\r\n          legend-item-variables.$symbol-inline-size + units.$u1 + legend-item-variables.$selectable-inline-size\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    position: absolute;\r\n    inset-inline-end: 0;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { LegendItemRemoveClickEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot - Either the label for this legend item or a `dso-selectable` holding the label.\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot body - The slot to place controls in (i.e. `dso-input-range` or multiple `dso-selectable`\\`s). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Shows a trash-can that, when clicked, emits `dsoRemoveClick`.\r\n   */\r\n  @Prop()\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<LegendItemRemoveClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showBody = false;\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\":scope > dso-selectable\");\r\n  }\r\n\r\n  get bodySlottedElement() {\r\n    return this.host.querySelector(\"[slot='body']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasBody = this.bodySlottedElement !== null;\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div\r\n          class={clsx(\"legend-item\", {\r\n            \"legend-item-symbol\": hasSymbol,\r\n            \"legend-item-selectable\": isSelectable,\r\n          })}\r\n        >\r\n          <div hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div>\r\n            <slot></slot>\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n          {this.removable && (\r\n            <button id=\"remove-button\" type=\"button\" onClick={(e) => this.dsoRemoveClick.emit({ originalEvent: e })}>\r\n              <span class=\"sr-only\">Legenda item verwijderen</span>\r\n              <dso-icon icon=\"trash\"></dso-icon>\r\n            </button>\r\n          )}\r\n\r\n          {hasBody && !this.disabled && (\r\n            <button id=\"edit-button\" type=\"button\" onClick={() => (this.showBody = !this.showBody)}>\r\n              <span class=\"sr-only\">Legenda item aanpassen</span>\r\n              <dso-icon icon={this.showBody ? \"times\" : \"more\"} />\r\n            </button>\r\n          )}\r\n        </div>\r\n        <div hidden={!hasBody || this.disabled || !this.showBody} class=\"body\">\r\n          <slot name=\"body\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host","clsx"],"mappings":"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"}

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

@@ -1,12 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CkTcEJuV.js');
+var clsx = require('./clsx-BtxeOLZW.js');
 
-const index = require('./index-57504611.js');
-const clsx = require('./clsx-fc789adc.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-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}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\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}\n.dso-button-group.dso-disabled > * {\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  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\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  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 > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\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  opacity: 1;\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}\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  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 {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\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}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\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  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
-const DsoListButtonStyle0 = listButtonCss;
+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-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}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\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}\n.dso-button-group.dso-disabled > * {\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  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\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  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 > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\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  opacity: 1;\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}\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}\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 {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\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: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}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\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  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
 
 const ListButton = class {
     constructor(hostRef) {
@@ -35,8 +32,10 @@ const ListButton = class {
         });
     }
     componentDidRender() {
-        var _a;
-        (_a = this.subcontentSlot) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true");
+        var _a, _b;
+        if (!((_a = this.subcontentSlot) === null || _a === void 0 ? void 0 : _a.hasAttribute("aria-hidden"))) {
+            (_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
+        }
     }
     disconnectedCallback() {
         var _a;
@@ -76,12 +75,13 @@ const ListButton = class {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (index.h("div", { key: '401ac6af5e5fa9ab3334ace93225fc1aa19da751', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'a88382af461ce5610e2603530dd59adf553ecf8f', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: '879ec8c619218a57ae775b932c6b5c3def0753e0', class: "dso-selectable" }, index.h("input", { key: '5f01db4dcb0bacb8a12b2b7fda95a30dfb3bd16c', 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: '76949467bbe709006f31936c214e02b074e412a4', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: '7b6a84904a0d6e0fa484147ca24aebcd7dcacb48', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: '97d53155731427f752f872cad77ef5d8f327905a', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '80276ba8f7b7c301a95e0654cf8a2bfba5c2f51a', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: '285b84d3fd88a0286dd639ee38a8f07f91d0a853', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: '1681f308f21df80b0e479b55ba363285cf6e3239', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, null, index.h("button", { key: '804ca34f83e05296a3a6ba1dfd2d6bc3e4ecea94', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: '8e5f6aaa2edfd68f2f1c1f32569902167509f34d', icon: "minus-circle" }), index.h("span", { key: 'e7b1fc8af2d84cd964bddaecb37bf73da8581c88', class: "sr-only" }, "Aantal verlagen")), index.h("span", { key: 'e476d0ca5b641a35d9dc99393190ac24857bc8c2', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.h("button", { key: '13b156984fdaf80a4eca8fe88e6e1d16328f33a3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: 'efba86f60c1ff9032cd30e081e2b0aac17ee4c10', icon: "plus-circle" }), index.h("span", { key: '7e3b8897c398feb65a6b540135bca4401cb4e859', class: "sr-only" }, "Aantal verhogen"))))));
+        return (index.h("div", { key: 'b598da82cfebc24eeccc5a2ec2b46613ba6eba69', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'ddf4368fb2eafc2be93b9a9e5c85c227c220303e', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: 'f2c536704711f53fadc40463b39f0fec0430d9c9', class: "dso-selectable" }, index.h("input", { key: 'e751f37d8eb12e3f6e41742dd93b1019a3bb9303', 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: '7ece1b6cdd28904be5dc222ce19f86f64d0cadac', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: '7d7bd35557060c7e4ca370f122bfed958957a634', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: '87dd6a05f6886e745f2448a2358cd3a8c2110cf7', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '0c490aa9be692955ab1fedae67d832d787e2edea', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: '9836db0e661e3eeb87d9dc74b0e4f033215d0fe0', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: 'c090e9c9eceec57fbe748739fef29da156576068', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, null, index.h("button", { key: '39ba1384b1ec7df2f816cfa33522e3cb8a7cd2b2', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: 'fe93d0957c319970873b5005e4f3502eacb30b90', icon: "minus-circle" }), index.h("span", { key: 'd0344facadf6c2923b9da6b54678222e6278fb48', class: "sr-only" }, "Aantal verlagen")), index.h("span", { key: '248ac189bdd3a8556c1b9f33033e4ca9b56ba3c7', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.h("button", { key: 'dfcd174240953bcb9956efe253e43e18d9a78318', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: '29c77388606a75f2b781760ef7055a66e6a1a3b4', icon: "plus-circle" }), index.h("span", { key: '7eb4b4ccf7403c63344ab75e9b49d9f814558049', class: "sr-only" }, "Aantal verhogen"))))));
     }
     get host() { return index.getElement(this); }
 };
-ListButton.style = DsoListButtonStyle0;
+ListButton.style = listButtonCss;
 
 exports.dso_list_button = ListButton;
+//# sourceMappingURL=dso-list-button.entry.cjs.js.map
 
 //# sourceMappingURL=dso-list-button.cjs.entry.js.map

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

@@ -1 +1 @@
-{"file":"dso-list-button.entry.cjs.js","mappings":"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","names":["forceUpdate","h","clsx"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n  & {\r\n    background-color: $background-color;\r\n    border-color: $border-color;\r\n    color: $color;\r\n  }\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.dso-input-number {\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  .dso-input-step-counter {\r\n    text-align: center;\r\n    inline-size: units.$ru3;\r\n    font-size: list-button-variables.$font-size-count;\r\n  }\r\n}\r\n\r\n.dso-button-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  &.dso-disabled {\r\n    > * {\r\n      @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        pointer-events: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  > * {\r\n    border-radius: 0;\r\n\r\n    &:first-child {\r\n      border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n    }\r\n\r\n    &:not(:first-child) {\r\n      border-inline-start-style: none !important;\r\n    }\r\n\r\n    &:last-child {\r\n      border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n    }\r\n\r\n    &:only-child {\r\n      border-radius: list-button-variables.$border-radius;\r\n    }\r\n  }\r\n\r\n  > .dso-input-number {\r\n    @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    flex-wrap: nowrap;\r\n    padding-block: 0;\r\n    padding-inline: units.$u2;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  > *:hover + .dso-input-number,\r\n  > *:focus + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *.dso-selected + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n\r\n    box-shadow:\r\n      inset 0 -1px 0 0 button.$secondary-border-color,\r\n      inset 0 1px 0 0 button.$secondary-border-color,\r\n      inset -1px 0 0 0 button.$secondary-border-color;\r\n  }\r\n\r\n  > *:active + .dso-input-number,\r\n  > *.active + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  > *.disabled + .dso-input-number,\r\n  > *[disabled] + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  .dso-list-button {\r\n    padding-inline-end: #{units.$u2 - 1};\r\n  }\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n\r\n  @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n  border-radius: button.$border-radius;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  font-weight: 600;\r\n  padding-block: #{units.$u2 - 1};\r\n  padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n  position: relative;\r\n  text-align: start;\r\n  white-space: normal;\r\n  inline-size: 100%;\r\n  cursor: pointer;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  &.disabled,\r\n  &[disabled] {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-selected {\r\n    border-color: colors.$grasgroen;\r\n    border-width: 1px;\r\n    box-shadow:\r\n      inset 0px 0px 0px 1px colors.$grasgroen,\r\n      inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n    &.dso-single-count {\r\n      @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n        border-inline-end: 0;\r\n        box-shadow:\r\n          colors.$grasgroen 0px 1px 0px 0px inset,\r\n          colors.$grasgroen 1px 0px 0px 0px inset,\r\n          colors.$grasgroen 0px -1px 0px 0px inset;\r\n      }\r\n    }\r\n  }\r\n\r\n  label {\r\n    cursor: inherit;\r\n  }\r\n\r\n  > span {\r\n    display: block;\r\n  }\r\n\r\n  .dso-sublabel {\r\n    font-weight: 400;\r\n    inline-size: 100%;\r\n    padding-inline-start: selectable.$size + units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    block-size: units.$u3;\r\n    color: colors.$grasgroen;\r\n    inset-block-start: #{units.$u2 - 1};\r\n    inset-inline-end: #{units.$u2 - 1};\r\n    inline-size: units.$u3;\r\n    page-break-before: always;\r\n    position: absolute;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    &.dso-selected.dso-single-count {\r\n      &::after {\r\n        inline-size: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Fragment,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\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\r\n  componentDidRender(): void {\r\n    this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"dso-tertiary\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onClick={(e) => this.stepValue(e, \"decrement\")}\r\n                >\r\n                  <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                  <span class=\"sr-only\">Aantal verlagen</span>\r\n                </button>\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </>\r\n            )}\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onClick={(e) => this.stepValue(e, \"increment\")}\r\n            >\r\n              <dso-icon icon=\"plus-circle\"></dso-icon>\r\n              <span class=\"sr-only\">Aantal verhogen</span>\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-list-button.entry.cjs.js","mappings":"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","names":["forceUpdate","h","clsx","Fragment"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n  & {\r\n    background-color: $background-color;\r\n    border-color: $border-color;\r\n    color: $color;\r\n  }\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.dso-input-number {\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  .dso-input-step-counter {\r\n    text-align: center;\r\n    inline-size: units.$ru3;\r\n    font-size: list-button-variables.$font-size-count;\r\n  }\r\n}\r\n\r\n.dso-button-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  &.dso-disabled {\r\n    > * {\r\n      @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        pointer-events: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  > * {\r\n    border-radius: 0;\r\n\r\n    &:first-child {\r\n      border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n    }\r\n\r\n    &:not(:first-child) {\r\n      border-inline-start-style: none !important;\r\n    }\r\n\r\n    &:last-child {\r\n      border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n    }\r\n\r\n    &:only-child {\r\n      border-radius: list-button-variables.$border-radius;\r\n    }\r\n  }\r\n\r\n  > .dso-input-number {\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    flex-wrap: nowrap;\r\n    padding-block: 0;\r\n    padding-inline: units.$u2;\r\n\r\n    @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  > *:hover + .dso-input-number,\r\n  > *:focus + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *.dso-selected + .dso-input-number {\r\n    box-shadow:\r\n      inset 0 -1px 0 0 button.$secondary-border-color,\r\n      inset 0 1px 0 0 button.$secondary-border-color,\r\n      inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *:active + .dso-input-number,\r\n  > *.active + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  > *.disabled + .dso-input-number,\r\n  > *[disabled] + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      opacity: 1;\r\n\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n    }\r\n  }\r\n\r\n  .dso-list-button {\r\n    padding-inline-end: #{units.$u2 - 1};\r\n  }\r\n}\r\n\r\n.dso-selectable {\r\n  @include selectable.root(\"dso-info\");\r\n\r\n  label {\r\n    font-weight: 700;\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n  & {\r\n    border-radius: button.$border-radius;\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    font-weight: 600;\r\n    padding-block: #{units.$u2 - 1};\r\n    padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n    position: relative;\r\n    text-align: start;\r\n    white-space: normal;\r\n    inline-size: 100%;\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  &.disabled,\r\n  &[disabled] {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n      & {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dso-selected {\r\n    border-color: colors.$grasgroen;\r\n    border-width: 1px;\r\n    box-shadow:\r\n      inset 0px 0px 0px 1px colors.$grasgroen,\r\n      inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n    &.dso-single-count {\r\n      @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n        border-inline-end: 0;\r\n        box-shadow:\r\n          colors.$grasgroen 0px 1px 0px 0px inset,\r\n          colors.$grasgroen 1px 0px 0px 0px inset,\r\n          colors.$grasgroen 0px -1px 0px 0px inset;\r\n      }\r\n    }\r\n  }\r\n\r\n  label {\r\n    cursor: inherit;\r\n  }\r\n\r\n  > span {\r\n    display: block;\r\n  }\r\n\r\n  .dso-sublabel {\r\n    font-weight: 400;\r\n    inline-size: 100%;\r\n    padding-inline-start: selectable.$size + units.$u1;\r\n  }\r\n\r\n  dso-icon {\r\n    block-size: units.$u3;\r\n    color: colors.$grasgroen;\r\n    inset-block-start: #{units.$u2 - 1};\r\n    inset-inline-end: #{units.$u2 - 1};\r\n    inline-size: units.$u3;\r\n    page-break-before: always;\r\n    position: absolute;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    &.dso-selected.dso-single-count {\r\n      &::after {\r\n        inline-size: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Fragment,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\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\r\n  componentDidRender(): void {\r\n    if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n      this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"dso-tertiary\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onClick={(e) => this.stepValue(e, \"decrement\")}\r\n                >\r\n                  <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                  <span class=\"sr-only\">Aantal verlagen</span>\r\n                </button>\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </>\r\n            )}\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onClick={(e) => this.stepValue(e, \"increment\")}\r\n            >\r\n              <dso-icon icon=\"plus-circle\"></dso-icon>\r\n              <span class=\"sr-only\">Aantal verhogen</span>\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}