@dso-toolkit/core 60.0.0 → 62.0.0

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

@@ -34,13 +34,20 @@ function createIdentifier(prefix) {
   return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
 }
 
-const selectableCss = ".sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}";
+const selectableCss = ".sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-height:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}";
 
 const Selectable = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dsoChange = index.createEvent(this, "dsoChange", 7);
     this.fallbackIdentifier = createIdentifier("DsoSelectable");
+    this.handleOnChange = (e) => {
+      const { target } = e;
+      this.dsoChange.emit({
+        originalEvent: e,
+        checked: target instanceof HTMLInputElement && target.checked,
+      });
+    };
     this.type = undefined;
     this.identifier = undefined;
     this.name = undefined;
@@ -87,7 +94,7 @@ const Selectable = class {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (index.h(index.Fragment, null, index.h("div", { class: clsx.clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, index.h("div", { class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null))), hasInfo && (index.h(index.Fragment, null, !this.infoFixed && (index.h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))))), hasInfo && (index.h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", null, index.h("slot", { name: "info" }))))));
+    return (index.h(index.Fragment, null, index.h("div", { class: clsx.clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, index.h("div", { class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null))), hasInfo && (index.h(index.Fragment, null, !this.infoFixed && (index.h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))))), hasInfo && (index.h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", null, index.h("slot", { name: "info" }))))));
   }
   getIdentifier() {
     var _a;

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

@@ -1 +1 @@
-{"file":"dso-info.dso-selectable.entry.cjs.js","mappings":"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","names":["h","Fragment","forceUpdate","clsx"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active]):not([fixed])) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include selectable.root(\"dso-info\", false);\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    @include selectable.invalid();\r\n  }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n  @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n  display: inline-block;\r\n  position: relative;\r\n  padding-inline-start: units.$u4;\r\n\r\n  &.has-info-button {\r\n    padding-inline-end: units.$u4;\r\n  }\r\n\r\n  .dso-selectable-input-wrapper {\r\n    display: inline-block;\r\n    margin-inline: -#{units.$u4};\r\n    min-height: units.$u3;\r\n    padding-inline: units.$u4;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      @include utilities.focus-outline();\r\n    }\r\n\r\n    input[type=\"radio\"],\r\n    input[type=\"checkbox\"] {\r\n      &:focus + label::before {\r\n        @include selectable.selectableBoxShadow(\r\n          selectable.$border-width,\r\n          var(--dso-selectable-color, selectable.$valid-color)\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndso-info-button {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop()\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={(e) => this.dsoChange.emit(e)}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot></slot>\r\n              </label>\r\n            ) : (\r\n              <label></label>\r\n            )}\r\n          </div>\r\n          {hasInfo && (\r\n            <Fragment>\r\n              {!this.infoFixed && (\r\n                <dso-info-button\r\n                  active={this.infoActive}\r\n                  onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n                ></dso-info-button>\r\n              )}\r\n            </Fragment>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-info.dso-selectable.entry.cjs.js","mappings":"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","names":["h","Fragment","forceUpdate","clsx"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  @include info.root();\r\n}\r\n\r\n:host(:not([active]):not([fixed])) {\r\n  display: none;\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  @include selectable.root(\"dso-info\", false);\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    @include selectable.invalid();\r\n  }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n  @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n  display: inline-block;\r\n  position: relative;\r\n  padding-inline-start: units.$u4;\r\n\r\n  &.has-info-button {\r\n    padding-inline-end: units.$u4;\r\n  }\r\n\r\n  .dso-selectable-input-wrapper {\r\n    display: inline-block;\r\n    min-height: units.$u3;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      @include utilities.focus-outline();\r\n    }\r\n\r\n    input[type=\"radio\"],\r\n    input[type=\"checkbox\"] {\r\n      &:focus + label::before {\r\n        @include selectable.selectableBoxShadow(\r\n          selectable.$border-width,\r\n          var(--dso-selectable-color, selectable.$valid-color)\r\n        );\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndso-info-button {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop()\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  private handleOnChange = (e: Event) => {\r\n    const { target } = e;\r\n\r\n    this.dsoChange.emit({\r\n      originalEvent: e,\r\n      checked: target instanceof HTMLInputElement && target.checked,\r\n    });\r\n  };\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={this.handleOnChange}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot></slot>\r\n              </label>\r\n            ) : (\r\n              <label></label>\r\n            )}\r\n          </div>\r\n          {hasInfo && (\r\n            <Fragment>\r\n              {!this.infoFixed && (\r\n                <dso-info-button\r\n                  active={this.infoActive}\r\n                  onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n                ></dso-info-button>\r\n              )}\r\n            </Fragment>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"],"version":3}

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

@@ -7,7 +7,7 @@ const focusTrap_esm = require('./focus-trap.esm-b6bba312.js');
 const clsx = require('./clsx-fd0bee58.js');
 require('./index.esm-970bc106.js');
 
-const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 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-left: 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-left: 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-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\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  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 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-left: 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  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 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  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 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  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 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  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 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-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 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  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 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 > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\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-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 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 > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
+const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 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-left: 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-left: 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-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\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  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 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-left: 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  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 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  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 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  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 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  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 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-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 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  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 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 > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\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-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 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 > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
 
 const ListButton = class {
   constructor(hostRef) {

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":["createFocusTrap","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/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\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@include utilities.box-sizing();\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-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\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 list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-left: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    width: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\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  private trap?: FocusTrap;\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\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   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\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  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\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) === false) {\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 setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\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 startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    if (\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    ) {\r\n      return false;\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\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              checked={selected}\r\n              disabled={this.disabled}\r\n              aria-label={this.label}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n          </div>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\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.manualCount === undefined && this.count > 1 && (\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            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual === true && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\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            )}\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":["createFocusTrap","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/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\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@include utilities.box-sizing();\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-manual-input-button {\r\n  cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n  @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\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 list-button.root();\r\n\r\n  .dso-sublabel {\r\n    padding-left: selectable.$size + units.$u1;\r\n  }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n  + .dso-list-button,\r\n  + .dso-button-group {\r\n    @include list-button.sibling();\r\n  }\r\n}\r\n\r\n.dso-input-wrapper {\r\n  position: relative;\r\n\r\n  .form-control {\r\n    width: 9ch;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n  background-color: transparent;\r\n  border: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.hidden {\r\n  display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\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  private trap?: FocusTrap;\r\n\r\n  @State()\r\n  private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n  private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n  @State()\r\n  manualCount?: number;\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   * Allow user to directly input a value.\r\n   *\r\n   * Set to `false` to force users to use plus/minus buttons.\r\n   */\r\n  @Prop()\r\n  manual = true;\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  @Watch(\"manual\")\r\n  watchManualCallback() {\r\n    if (!this.manual && this.manualCount) {\r\n      this.stopManualCountInput();\r\n    }\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n        escapeDeactivates: true,\r\n        setReturnFocus: false,\r\n\r\n        clickOutsideDeactivates: (e) => {\r\n          this.setCount(e);\r\n\r\n          return true;\r\n        },\r\n        onDeactivate: () => this.stopManualCountInput(),\r\n        onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n      }).activate();\r\n    } else if (this.manualCount === undefined && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate();\r\n  }\r\n\r\n  private handleOnChange({ target }: Event): void {\r\n    if (target instanceof HTMLInputElement) {\r\n      this.manualCount = target.valueAsNumber;\r\n    }\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) === false) {\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 setCount(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.manualCount,\r\n      });\r\n      this.stopManualCountInput();\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 startManualCountInput(): void {\r\n    this.manualCount = this.count;\r\n  }\r\n\r\n  private stopManualCountInput(): void {\r\n    this.manualCount = undefined;\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    if (\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    ) {\r\n      return false;\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  render() {\r\n    const showButtonInputs = this.manualCount === undefined;\r\n\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              checked={selected}\r\n              disabled={this.disabled}\r\n              aria-label={this.label}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n          </div>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\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.manualCount === undefined && this.count > 1 && (\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            )}\r\n\r\n            <div class=\"dso-input-wrapper\">\r\n              {this.manualCount === undefined && this.count > 1 && (\r\n                <input\r\n                  class=\"dso-input-step-counter\"\r\n                  type=\"number\"\r\n                  tabIndex={-1}\r\n                  aria-label=\"Aantal\"\r\n                  value={this.count}\r\n                  readOnly\r\n                />\r\n              )}\r\n\r\n              <form onSubmit={(e) => this.setCount(e)}>\r\n                <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n                  <input\r\n                    class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n                    type=\"number\"\r\n                    aria-label=\"Aantal\"\r\n                    value={this.manualCount}\r\n                    min={this.min}\r\n                    max={this.max}\r\n                    onInput={(e) => this.handleOnChange(e)}\r\n                  />\r\n                </div>\r\n\r\n                {this.manual === true && (\r\n                  <button\r\n                    class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n                    type={!showButtonInputs ? \"submit\" : \"button\"}\r\n                    disabled={this.disabled}\r\n                    onClick={() => showButtonInputs && this.startManualCountInput()}\r\n                  >\r\n                    {showButtonInputs ? (\r\n                      <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n                    ) : (\r\n                      <span class=\"sr-only\">Zet waarde</span>\r\n                    )}\r\n                  </button>\r\n                )}\r\n              </form>\r\n            </div>\r\n\r\n            {showButtonInputs && (\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            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d46ec033.js');
+
+const logoCss = ":host {\n  max-block-size: 3rem;\n  block-size: 3rem;\n  display: grid;\n  grid-template-areas: \"target wordmark label\";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5625rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n  font-size: 1.5625rem;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #e17000;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding: 0 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  .logo-wordmark {\n    font-size: initial;\n  }\n  :host([label]) {\n    grid-template-areas: \"target label\";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    font-size: initial;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}";
+
+const Logo = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = undefined;
+    this.ribbon = undefined;
+  }
+  render() {
+    return (index.h(index.Host, { "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, index.h("svg", { fill: "none", viewBox: "0 0 48 48", height: "100%", class: "logo-target" }, index.h("path", { class: "outer", d: "M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z" }), index.h("path", { class: "middle", d: "M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z" }), index.h("path", { class: "inner", d: "M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z" })), index.h("div", { class: "logo-wordmark" }, index.h("span", { class: "logo-wordmark-omgevings" }, "Omgevings"), index.h("span", { class: "logo-wordmark-loket" }, "loket")), this.label && index.h("span", { class: "logo-label" }, this.label), this.ribbon && index.h("div", { class: "logo-ribbon" }, this.ribbon)));
+  }
+};
+Logo.style = logoCss;
+
+exports.dso_logo = Logo;
+
+//# sourceMappingURL=dso-logo.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dso-logo.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,49DAA49D;;MCO/9D,IAAI;;;;;;EAgBf,MAAM;IACJ,QACEA,QAACC,UAAI,kBAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC9GD,iBAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACpEA,kBAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG,EACrEA,kBAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG,EACpEA,kBAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EAENA,iBAAK,KAAK,EAAC,eAAe,IACxBA,kBAAM,KAAK,EAAC,yBAAyB,gBAAiB,EACtDA,kBAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,EAEL,IAAI,CAAC,KAAK,IAAIA,kBAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1D,IAAI,CAAC,MAAM,IAAIA,iBAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$oranje;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding: 0 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify status of the page, like 'beta'.\r\n   *\r\n   */\r\n  @Prop()\r\n  ribbon?: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n          <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n          <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n          <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n        </svg>\r\n\r\n        <div class=\"logo-wordmark\">\r\n          <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n          <span class=\"logo-wordmark-loket\">loket</span>\r\n        </div>\r\n\r\n        {this.label && <span class=\"logo-label\">{this.label}</span>}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -16,7 +16,7 @@ const MapOverlays = class {
     this.overlays = undefined;
   }
   overlayChangeHandler(overlay, e) {
-    const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
+    const { checked } = e.detail;
     this.dsoToggleOverlay.emit({ overlay, checked });
   }
   componentDidRender() {

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

@@ -1 +1 @@
-{"file":"dso-map-overlays.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W;;MCYtX,WAAW;;;;IAEd,mBAAc,GAA+C,EAAE,CAAC;iBAMhEA,KAAM,EAAE;;;EAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;IAClF,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,YAAY,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC;IAEhG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;GAClD;EAED,kBAAkB;IAChB,IAAI,CAAC,QAAQ;OACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OAClG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;GACvC;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACEC,sBAAU,KAAK,EAAC,2BAA2B,IACzCA,oBAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3CA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,kBAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACNA,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzBA,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAGA,eAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;","names":["uuidv4","h"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-overlays.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W;;MCYtX,WAAW;;;;IAEd,mBAAc,GAA+C,EAAE,CAAC;iBAMhEA,KAAM,EAAE;;;EAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;IAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;IAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;GAClD;EAED,kBAAkB;IAChB,IAAI,CAAC,QAAQ;OACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OAClG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;GACvC;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACEC,sBAAU,KAAK,EAAC,2BAA2B,IACzCA,oBAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3CA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,kBAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACNA,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzBA,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAGA,eAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;","names":["uuidv4","h"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-progress-indicator.cjs.entry.js

@@ -17,7 +17,7 @@ const Progressindicator = class {
     return (index.h(index.Host, null, index.h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("style", null, `
                 .spinner { animation: rotator 8s linear infinite; transform-origin: center; }
                 @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
+                .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
                 @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }
               `), index.h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))), index.h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
   }

package/dist/cjs/dso-progress-indicator.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-progress-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,oyBAAoyB;;MCOpzB,iBAAiB;;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,kBAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IAExGA,iBAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3EA,uBACG;;;;;eAKA,CACK,EACRA,oBAAQ,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,kBAAc,IAAI,oBAAgB,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CACrG,CACD,EACPA,kBAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-progress-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,oyBAAoyB;;MCOpzB,iBAAiB;;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,kBAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IAExGA,iBAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3EA,uBACG;;;;;eAKA,CACK,EACRA,oBAAQ,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,kBAAc,IAAI,oBAAgB,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CACrG,CACD,EACPA,kBAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-toolkit.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[1],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[1,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[1,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3.cjs",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
+  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-logo.cjs",[[1,"dso-logo",{"label":[1],"ribbon":[1]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3.cjs",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;