@dso-toolkit/core 62.26.0 → 62.28.0

package/dist/esm/dso-date-picker.entry.js.map

@@ -1 +1 @@
-{"file":"dso-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    .dso-date__input {\r\n      border-color: colors.$danger-color;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n\r\n  &::-webkit-calendar-picker-indicator {\r\n    position: relative;\r\n    inset-inline-end: -8px;\r\n\r\n    font-size: 1.75rem;\r\n\r\n    filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/**\r\n * dd-mm-yyyy to yyyy-mm-dd\r\n */\r\nexport function parseToValueFormat(value: string | undefined): string | undefined {\r\n  if (!value) {\r\n    return;\r\n  }\r\n\r\n  const matches = value.split(\"-\");\r\n\r\n  if (\r\n    matches.length === 3 &&\r\n    typeof matches[0] === \"string\" &&\r\n    typeof matches[1] === \"string\" &&\r\n    typeof matches[2] === \"string\"\r\n  ) {\r\n    const [d, m, y] = matches;\r\n\r\n    const dd = d.padStart(2, \"0\");\r\n    const mm = m.padStart(2, \"0\");\r\n    const yyyy = y.padStart(4, \"0\");\r\n\r\n    return [yyyy, mm, dd].join(\"-\");\r\n  }\r\n\r\n  return value;\r\n}\r\n\r\n/**\r\n * yyyy-mm-dd to dd-mm-yyyy\r\n */\r\nexport function parseToDutchFormat(date: Date | null): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n  const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const yyyy = date.getFullYear().toString(10).padStart(4, \"0\");\r\n\r\n  return [dd, mm, yyyy].join(\"-\");\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  &[invalid]:not([invalid=\"false\"]) {\r\n    .dso-date__input {\r\n      border-color: colors.$danger-color;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n\r\n  &::-webkit-calendar-picker-indicator {\r\n    position: relative;\r\n    inset-inline-end: -8px;\r\n\r\n    font-size: 1.75rem;\r\n\r\n    filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n  tag: \"dso-date-picker\",\r\n  styleUrl: \"date-picker.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerElement;\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"dso-date\";\r\n\r\n  /**\r\n   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n   */\r\n  @Prop()\r\n  identifier: string | undefined;\r\n\r\n  /**\r\n   * Makes the date picker input component disabled. This prevents users from being able to\r\n   * interact with the input, and conveys its inactive state to assistive technologies.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop({ reflect: true })\r\n  required = false;\r\n\r\n  /**\r\n   * Is input invalid?\r\n   */\r\n  @Prop({ reflect: true })\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * ID of element that describes the input element\r\n   */\r\n  @Prop()\r\n  describedBy?: string;\r\n\r\n  /**\r\n   * Should the input be focused on load?\r\n   */\r\n  @Prop()\r\n  dsoAutofocus = false;\r\n\r\n  /**\r\n   * Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n   */\r\n  @Prop({ reflect: true })\r\n  value = \"\";\r\n\r\n  /**\r\n   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the max property.\r\n   */\r\n  @Prop()\r\n  min: string | undefined;\r\n\r\n  /**\r\n   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n   * This setting can be used alone or together with the min property.\r\n   */\r\n  @Prop()\r\n  max: string | undefined;\r\n\r\n  /**\r\n   * Events section.\r\n   */\r\n\r\n  /**\r\n   * Event emitted when a date is selected.\r\n   */\r\n  @Event()\r\n  dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DatePickerBlurEvent>;\r\n\r\n  /**\r\n   * Event emitted on key up in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted on key down in the date picker input.\r\n   */\r\n  @Event()\r\n  dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n  private handleBlur = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\r\n  };\r\n\r\n  private handleFocus = (event: FocusEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      originalEvent: event,\r\n      component: \"dso-date-picker\",\r\n    });\r\n  };\r\n\r\n  private handleKeyUp = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyUp.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoKeyDown.emit({\r\n      component: \"dso-date-picker\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        type=\"date\"\r\n        id={this.identifier}\r\n        class=\"dso-date__input\"\r\n        value={parseToValueFormat(this.value)}\r\n        name={this.name}\r\n        min={parseToValueFormat(this.min)}\r\n        max={parseToValueFormat(this.max)}\r\n        disabled={this.disabled || undefined}\r\n        required={this.required || undefined}\r\n        aria-autocomplete=\"none\"\r\n        aria-invalid={this.invalid?.toString()}\r\n        aria-describedby={this.describedBy}\r\n        autoComplete=\"off\"\r\n        autofocus={this.dsoAutofocus || undefined}\r\n        onBlur={this.handleBlur}\r\n        onFocus={this.handleFocus}\r\n        onKeyUp={this.handleKeyUp}\r\n        onKeyDown={this.handleKeyDown}\r\n        onChange={this.handleInputChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-dropdown-menu.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-93de4a35.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-c8e19f05.js';
 import { t as tabbable } from './index.esm-7a561c35.js';
 import { h as hasOverflow, c as createPopper } from './has-overflow-6d7f3a71.js';
 import { g as getActiveElement } from './get-active-element-37680994.js';
-import { v as v4 } from './v4-23648a96.js';
+import { v as v4 } from './v4-a79185f4.js';
 
 const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}";
 const DsoDropdownMenuStyle0 = dropdownMenuCss;
@@ -212,7 +212,7 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '780e049d0f7971387dd4980413cdff233dac637c', onFocusout: this.focusOutListener }, h("slot", { key: '453e8e683a525196ddf717ff8a9f6706c6819975', name: "toggle" }), h("div", { key: '3a891b4d5a05ff25a7c6826f96455d9ffcb2eb01', hidden: !this.open }, h("slot", { key: 'b584d5dbf8776ebcdb4ca23dc572ef367728d0be' }))));
+        return (h(Host, { key: '051e0e49f0787115d3c0d32d64afd9925bbf7015', onFocusout: this.focusOutListener }, h("slot", { key: '19ef2a3cd39f922e97e6bdb2700fafa64f3c34ee', name: "toggle" }), h("div", { key: '07476f4d79b5eadab813d522381a4e918bb12e5e', hidden: !this.open }, h("slot", { key: 'fb6106ab14abaf2bc32cb9938519b97a14127c37' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dso-expandable.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-93de4a35.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-c8e19f05.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 
 const expandableCss = ":host([enable-animation]){display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1)}:host([enable-animation]) .slot-container{overflow:hidden}:host(:not([enable-animation])),:host([enable-animation=false]){display:none}:host([open][enable-animation]:not([open=false])){grid-template-rows:1fr}:host([open]:not([enable-animation]):not([open=false])),:host([open][enable-animation=false]:not([open=false])){display:block}*,*::after,*::before{box-sizing:border-box}";

package/dist/esm/dso-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-93de4a35.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-c8e19f05.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { d as debounce } from './index-bbc2933c.js';
 import { i as isModifiedEvent } from './is-modified-event-70db5fa8.js';

package/dist/esm/dso-helpcenter-panel.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment } from './index-93de4a35.js';
+import { r as registerInstance, h, F as Fragment } from './index-c8e19f05.js';
 import { c as createFocusTrap } from './focus-trap.esm-f16e876b.js';
 import './index.esm-7a561c35.js';
 
@@ -83,10 +83,10 @@ const HelpcenterPanel = class {
         }
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '4feefc0a55d6cca8c7eacb63a6a05cceaab2c945', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '5f65143e673f8c81a7caf57c4a1df65f5739d7da', icon: "help" }), h("span", { key: 'a2e52d76c3dd57bf3c2af14cd212c713b625fc14' }, this.label)), h("div", { key: 'cffc86409de62caa06d4923885190390780e492d', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '65c0f760c97ab3e14daa20d088f4a7c7d041e0ef', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '4f8e345279535fc2c8f00d42c7529fb37142a7f9', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
+        return (h(Fragment, null, h("button", { key: '4eb48fdad3b3ad4e196c057be9e4ca2be9acad95', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '4ed80fd64c25eec34883b8254f065f880b7d41a6', icon: "help" }), h("span", { key: '1e43605ab14511b8e8d4b7628b4f2bcb19a0f57a' }, this.label)), h("div", { key: 'db5d93917c9b7c64f8b41ad63edde93df4fbc44d', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '5024649ae6920e583242554b215ea5dd43790eb4', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '83b15da9a1647e578394ea594cf6a74089e3b416', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
                 this.createTrap();
                 this.iframeLoaded = true;
-            } })) : (h("div", null))), h("button", { key: '17f29f66e7a11910f7cbe611d5e7587cb4becbda', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '6857ebf299bda79c7783847af915baeee53fc3c2', icon: "times" }), h("span", { key: '2d186f391469a05e1f2a0fece42720cf0ff55f99', class: "sr-only" }, "sluiten")))));
+            } })) : (h("div", null))), h("button", { key: 'a20fabcb6e42397b514d0b15dd6dcaa4f5c04495', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '4e06edd5f7d870db47a41b8b9ae95e7e0dcd2bf6', icon: "times" }), h("span", { key: 'd8092cfddace1390453ca1122980a524cc79993e', class: "sr-only" }, "sluiten")))));
     }
     static get watchers() { return {
         "url": ["watchUrl"],

package/dist/esm/dso-highlight-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-93de4a35.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-c8e19f05.js';
 
 const highlightBoxCss = "*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset);display:block;container-type:inline-size;position:relative;z-index:1}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}";
 const DsoHighlightBoxStyle0 = highlightBoxCss;
@@ -15,7 +15,7 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '8d51ec0165aaaea5a1ebf8582c79be9a4a8ef67f', "has-counter": hasCounter }, hasCounter && h("div", { key: '21deb0ff1e55dd3cdc283921b5bf496625bbd989', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'e3a6ac0f446ab0fe94bc2c9f833b00b936a83f34', name: "icon" })), h("slot", { key: '1f424d6b7c5285e366f2db64383133bcfa3cc8f6' })));
+        return (h(Host, { key: '197d41b2fe49363ee590921008c935f43a5b1fee', "has-counter": hasCounter }, hasCounter && h("div", { key: 'f166216f13a0f703896c2c44aa89ae43d73051aa', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'd31ea4d9b291e4619ec15eb1d71142a4e8077450', name: "icon" })), h("slot", { key: '0f2a7876ea72118d06ffecd753c4c9f24c22dd7e' })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-93de4a35.js';
+import { r as registerInstance, h } from './index-c8e19f05.js';
 
 const air = `<svg id="air" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M24,8h0a.6.6,0,0,1-.38.56l-.1,0h0A8.18,8.18,0,0,0,21,10c-.21.55.33,2.11.77,3a.61.61,0,0,1-.12.71.63.63,0,0,1-.39.17,4.8,4.8,0,0,0-4-2.15H17a4.58,4.58,0,0,0-.37-.69A3.07,3.07,0,0,0,19,8.62h0a2.24,2.24,0,0,0,.06-.52s0-.07,0-.1,0-.07,0-.1A2.24,2.24,0,0,0,19,7.38h0a3.07,3.07,0,0,0-6,0h0a2.24,2.24,0,0,0-.06.52s0,.07,0,.1,0,.06,0,.1a.77.77,0,0,0,0,.15,6.49,6.49,0,0,0-4.51.35l-.06,0A.61.61,0,0,1,8,8.09V8H8V7.91a.61.61,0,0,1,.37-.48l.11,0h0A13.68,13.68,0,0,0,11.08,6a9.37,9.37,0,0,0-.86-3,.62.62,0,0,1,.83-.81,9.12,9.12,0,0,0,2.8.89H14A6.79,6.79,0,0,0,15.42.42a.61.61,0,0,1,1.15,0,8.43,8.43,0,0,0,1.65,2.76h.13a7.76,7.76,0,0,0,2.58-.91.61.61,0,0,1,.84.81c-.44.89-1,2.45-.77,3a8.18,8.18,0,0,0,2.48,1.33h0l.1,0A.6.6,0,0,1,24,8ZM10.68,22.34a5.15,5.15,0,0,1-3.12,1,4.72,4.72,0,0,1-4.81-3.76l-.14-.45h-.5A2,2,0,0,1,0,17.24a2,2,0,0,1,2.11-1.92,2.17,2.17,0,0,1,1.32.43l.4.29.37-.32a5,5,0,0,1,2.18-1.09l.44-.24V14a4.17,4.17,0,0,1,4.35-4,4.24,4.24,0,0,1,4.3,3.43l.1.67.69-.25a3,3,0,0,1,1-.17A2.64,2.64,0,0,1,20,16.19a2.32,2.32,0,0,1,0,.46l-.08.38.38.18A2.93,2.93,0,0,1,22,19.83a3.12,3.12,0,0,1-3.24,3,3.52,3.52,0,0,1-1.71-.45L16.47,22l-.26.58a2.58,2.58,0,0,1-4.62,0l-.3-.68Z"/>
@@ -658,7 +658,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '8d9a58ec32a61e261ce372bda5d252dac335730b', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'ad568e901aca0e1bb7bfb6c5cf35579fd78e97f9', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };

package/dist/esm/dso-info-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-93de4a35.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c8e19f05.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 
 const infoButtonCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:8px;padding:0;cursor:pointer;vertical-align:top}button.dso-info-secondary{color:#666}dso-icon{display:block}";
@@ -25,7 +25,7 @@ const InfoButton = class {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: 'a9afc4b8538284ccbbfb0ef26de4309380faa673', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '08911957ed2c44f2576cc541aae4c4fe2e2afb60', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '1cff75564204ba2ba31600e9c721fbfcb7b2dbb8', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '4d615ba1e61ddec946c39cb44eac90bbb3691045', class: "sr-only" }, this.label))));
+        return (h(Host, { key: 'a6e2aa03eb9724228f309392cfb9b2a8da123a15', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '419f8090a67ec29c910b1d925177451d4e98609c', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '2f5b81f8142336f42e51c800fc8486b98095a40c', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '310fa68092bbee52d8c3935e48d6e5befd16c4ea', class: "sr-only" }, this.label))));
     }
 };
 InfoButton.style = DsoInfoButtonStyle0;

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, f as forceUpdate, a as getElement } from './index-93de4a35.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, f as forceUpdate, a as getElement } from './index-c8e19f05.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { c as createIdentifier } from './create-identifier-d61d46af.js';
 
-const infoCss = ":host{display:block;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 const DsoInfoStyle0 = infoCss;
 
 const Info = class {
@@ -13,7 +13,7 @@ const Info = class {
         this.active = undefined;
     }
     render() {
-        return (h(Fragment, { key: '3dcb0b7964995734a527775251fac2c0dac5a62f' }, h("slot", { key: 'b6217bab04d44d36de11b0876a07825253303100' }), !this.fixed && (h("button", { key: '41c1f3facca9066b6c760e5a7b9b71aeaecb1590', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '615e0cf09f692c0cb2a9efdf96e35035db6baf20', icon: "times" }), h("span", { key: 'f69da4351264fe6283e71e6fd2af584c09ef6815', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '902f98c97248e2ddd76978921405904b843de499' }, h("slot", { key: 'fe9eed78ba371fc455ccaa6d9d3cc5eb5d042184' }), !this.fixed && (h("button", { key: 'c915ed3281316046b27b60e32d5f8a2d3399839d', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '7f342560dc0cd59123e8a1f3a37fcf0d88da9efa', icon: "times" }), h("span", { key: '966b0fdafa67cd988cb5c2c7efbcc90288810ca5', class: "sr-only" }, "Sluiten")))));
     }
 };
 Info.style = DsoInfoStyle0;
@@ -80,7 +80,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '0061629edfc95238fad0a7ce59ef33d784715f48' }, h("div", { key: '21eead2fe7c96e0019baf0249c6d901276dde3a6', class: "dso-selectable-container" }, h("div", { key: 'c0ef4e985f2cbc828579556957c52631e6fbb418', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '50e495ec15d8319cb29c0de9931d8e35400228c0', 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 ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'eaedc13f6945d9eb2b45d2db3d6d8f203d67b0b7', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'd33b87765ac73156cc2c6b8a18054e708a5963ec', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '228a0f425250e29a10c30a5b678ea7fb4a24fc14' }, h("slot", { key: '597d0b42196974aa8686e98570b543de11cd8f93', name: "info" })))), h("slot", { key: '1a97013dc9f4d5c534cf765453c7e8ecbe879e81', name: "options" })));
+        return (h(Fragment, { key: 'dd7208bc6160768997ff4b00a1611316d0d3b170' }, h("div", { key: '3a56145fbd723e97dfd1047144699295e64cd83c', class: "dso-selectable-container" }, h("div", { key: '960d6051962d016eb4d10cd42e0378e348176e00', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '62515e7eb4d4752e9cd884ebb55e25600c796569', 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 ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '88c7368c7cf2679a5b553423d6241e6edf1e171c', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '574762e0f3643edb8b2fe2e728c7bdaff02fbb2e', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '4d7366f99efa8e9dd04787630a86f2d8f4720f8b' }, h("slot", { key: '7294a8c9318544819d392552c529ac04a6af2322', name: "info" })))), h("slot", { key: 'fe3293f3aef16561ab13519887293181af6b2347', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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

@@ -1 +1 @@
-{"file":"dso-info.dso-selectable.entry.js","mappings":"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","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","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], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\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","@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(false);\r\n\r\n  padding-inline-start: selectable.$symbol-indent;\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\r\n  .dso-selectable-input-wrapper {\r\n    display: inline-block;\r\n    min-block-size: units.$u3;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      position: relative;\r\n      inset-inline-start: -(selectable.$symbol-indent);\r\n\r\n      padding-inline-start: selectable.$symbol-indent;\r\n\r\n      margin-inline-end: -(selectable.$symbol-indent);\r\n\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","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  ComponentInterface,\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/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\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 implements ComponentInterface {\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({ reflect: true })\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    forceUpdate(this.host);\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=\"dso-selectable-container\">\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 />\r\n              </label>\r\n            ) : (\r\n              <label>\r\n                <slot />\r\n              </label>\r\n            )}\r\n          </div>\r\n          {hasInfo && !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        </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        <slot name=\"options\" />\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n      this.input.checked = this.checked;\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.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,ivBAAivB,CAAC;AAClwB,sBAAe,OAAO;;MCMT,IAAI;;;;;;;IAmBf,MAAM;QACJ,QACE,EAAC,QAAQ,uDACP,8DAAa,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACzD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,EACX;KACH;;;;ACtCH,MAAM,aAAa,GAAG,ynLAAynL,CAAC;AAChpL,4BAAe,aAAa;;MC2Bf,UAAU;;;;QA0Gb,uBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAIvD,mBAAc,GAAG,CAAC,CAAQ;YAChC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;YAErB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,aAAa,EAAE,CAAC;gBAChB,OAAO,EAAE,MAAM,YAAY,gBAAgB,IAAI,MAAM,CAAC,OAAO;aAC9D,CAAC,CAAC;YAEH,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxB,CAAC;;;;;;;;;;;;;0BA/BW,KAAK;6BAGF,KAAK;;;;;;;;IASrB,MAAM,UAAU,CAAC,MAAgB;QAC/B,IAAI,CAAC,UAAU,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,IAAI,CAAC,UAAU,CAAC;KAC9C;IAmBD,gBAAgB;;QACd,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACvC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;KACrC;IAGD,gBAAgB;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,YAAY,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YACzE,OAAO;SACR;QAED,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;KACjD;IAED,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE3D,QACE,EAAC,QAAQ,uDACP,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DAAK,KAAK,EAAE,IAAI,CAAC,8BAA8B,EAAE,EAAE,oBAAoB,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAC5F,8DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,sBACpB,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,qBAC3D,IAAI,CAAC,YAAY,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,MAAM,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,EAC1C,OAAO,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAC1C,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAC9B,EACD,CAAC,IAAI,CAAC,YAAY,IACjB,aAAO,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,IAClC,eAAQ,CACF,KAER,iBACE,eAAQ,CACF,CACT,CACG,EACL,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,KACzB,wEACE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,WAAW,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GACtC,CACpB,CACG,EACL,OAAO,KACN,iEACE,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,UAAU,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAE3C,8DACE,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACG,CACZ,EACD,6DAAM,IAAI,EAAC,SAAS,GAAG,CACd,EACX;KACH;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE;YAC1F,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACnC;KACF;IAEO,aAAa;;QACnB,OAAO,MAAA,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,kBAAkB,CAAC;KACnD;;;;;;;;;;","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","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], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\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","@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(false);\r\n\r\n  padding-inline-start: selectable.$symbol-indent;\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\r\n  .dso-selectable-input-wrapper {\r\n    display: inline-block;\r\n    min-block-size: units.$u3;\r\n\r\n    &:focus-within.dso-keyboard-focus {\r\n      position: relative;\r\n      inset-inline-start: -(selectable.$symbol-indent);\r\n\r\n      padding-inline-start: selectable.$symbol-indent;\r\n\r\n      margin-inline-end: -(selectable.$symbol-indent);\r\n\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","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  ComponentInterface,\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/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\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 implements ComponentInterface {\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({ reflect: true })\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    forceUpdate(this.host);\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=\"dso-selectable-container\">\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 />\r\n              </label>\r\n            ) : (\r\n              <label>\r\n                <slot />\r\n              </label>\r\n            )}\r\n          </div>\r\n          {hasInfo && !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        </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        <slot name=\"options\" />\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n      this.input.checked = this.checked;\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/esm/dso-input-range.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-93de4a35.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-c8e19f05.js';
 
 const inputRangeCss = ":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";
 const DsoInputRangeStyle0 = inputRangeCss;
@@ -19,13 +19,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'da13ae51dbb89593f553c2cecac9c5f889e65376', id: "description", hidden: true }, this.description)), h("span", { key: '7a244701a0e9a7ccc54c4565644f0a04bd7ea7cc', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'adf4e0ef4b5339f4744a105be76af9bb12087859', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'd5ecf14f7a8950cde120066a8f8fe9770451cd84', id: "description", hidden: true }, this.description)), h("span", { key: '877239f0082c1e2b2254e9bd6e1e01ce1ae10933', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'c5df969a844d7773cebd6f8f97c72fb09aad7f05', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '85bef9f227fd222860c83f600f0266447bb9a647', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '29900f5d80966b2ad6be15b81d3895ebe46c287e', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return getElement(this); }
 };