@dso-toolkit/core 73.1.0 → 73.2.1

package/dist/dso-toolkit/p-2dc3dc9a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["localization","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","dayNames","monthNames","monthNamesShort","DaysOfWeek","createDate","year","month","day","dayInt","parseInt","monthInt","yearInt","isValid","Number","isInteger","Date","parseDutchDate","value","matches","split","length","printDutchDate","date","d","getDate","toString","padStart","m","getMonth","y","getFullYear","isEqual","a","b","addDays","days","setDate","startOfWeek","firstDayOfWeek","Monday","getDay","diff","endOfWeek","startOfMonth","endOfMonth","setMonth","setYear","setFullYear","inRange","min","max","clamp","time","getTime","getDaysInRange","start","end","current","push","getViewOfMonth","DatePickerLegacyDay","focusedDay","today","onDaySelect","onKeyboardNavigation","focusedDayRef","isToday","isFocused","notCurrentMonth","isOutsideRange","handleClick","e","h","class","tabIndex","onClick","onKeyDown","disabled","type","ref","el","chunk","array","chunkSize","result","i","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","item","Error","DatePickerLegacyMonth","selectedDate","focusedDate","labelledById","onDateSelect","onMouseDown","onFocusIn","role","onFocusin","dayName","scope","substr","week","undefined","monthRange","selectedYear","minDate","maxDate","minYear","minMonth","maxYear","maxMonth","filter","_month","index","range","from","to","datePickerLegacyCss","keyCode","TAB","ESC","PAGE_UP","PAGE_DOWN","END","HOME","LEFT","UP","RIGHT","DOWN","DISALLOWED_CHARACTERS","TRANSITION_MS","cleanValue","input","regex","cursor","selectionStart","beforeCursor","afterCursor","filteredBeforeCursor","replace","filterAfterCursor","newValue","newCursor","selectionEnd","DsoDatePickerLegacy","constructor","hostRef","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","defaultLocalization","activeFocus","open","visible","name","direction","required","dsoAutofocus","enableActiveFocus","disableActiveFocus","toggleOpen","preventDefault","hide","show","handleEscKey","event","handleBlur","stopPropagation","dsoBlur","emit","component","handleKeyUp","dsoKeyUp","originalEvent","handleKeyDown","dsoKeyDown","handleFocus","dsoFocus","handleTouchStart","touch","changedTouches","initialTouchX","pageX","initialTouchY","pageY","handleTouchMove","handleTouchEnd","distX","_a","distY","_b","threshold","isHorizontalSwipe","Math","abs","isDownwardsSwipe","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleFirstFocusableKeydown","shiftKey","focusedDayNode","focus","handleKeyboardNavigation","firstFocusableElement","handled","addYears","handleDaySelect","_event","setValue","setFocusedDay","handleMonthSelect","target","HTMLSelectElement","handleYearSelect","handleInputChange","cleanedValue","prepareEvent","valueAsDate","error","clampValue","processFocusedDayNode","element","setTimeout","handleDocumentClick","path","composedPath","Node","contains","setFocus","datePickerLegacyInput","hideTimeoutId","clearTimeout","focusTimeoutId","monthSelectNode","moveFocusToButton","datePickerLegacyButton","months","years","previousValue","dsoDateChange","componentWillLoad","componentDidLoad","render","formattedDate","focusedMonth","focusedYear","prevMonthDisabled","nextMonthDisabled","Host","key","id","identifier","invalid","describedBy","onInput","onFocus","onBlur","onKeyUp","autoComplete","icon","onTouchMove","onTouchStart","onTouchEnd","htmlFor","onChange","indexOf","selected"],"sources":["src/components/date-picker-legacy/date-localization.ts","src/components/date-picker-legacy/date-utils.ts","src/components/date-picker-legacy/date-picker-day.tsx","src/components/date-picker-legacy/date-picker-month.tsx","src/components/date-picker-legacy/utils/month-range.ts","src/components/date-picker-legacy/utils/range.ts","src/components/date-picker-legacy/date-picker-legacy.scss?tag=dso-date-picker-legacy&encapsulation=scoped","src/components/date-picker-legacy/date-picker-legacy.tsx"],"sourcesContent":["type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];\r\ntype DayNames = [string, string, string, string, string, string, string];\r\n\r\nexport type DsoLocalizedText = {\r\n  buttonLabel: string;\r\n  placeholder: string;\r\n  selectedDateMessage: string;\r\n  prevMonthLabel: string;\r\n  nextMonthLabel: string;\r\n  monthSelectLabel: string;\r\n  yearSelectLabel: string;\r\n  closeLabel: string;\r\n  keyboardInstruction: string;\r\n  calendarHeading: string;\r\n  dayNames: DayNames;\r\n  monthNames: MonthsNames;\r\n  monthNamesShort: MonthsNames;\r\n};\r\n\r\nconst localization: DsoLocalizedText = {\r\n  buttonLabel: \"Kies datum\",\r\n  placeholder: \"dd-mm-jjjj\",\r\n  selectedDateMessage: \"Geselecteerde datum is\",\r\n  prevMonthLabel: \"Vorige maand\",\r\n  nextMonthLabel: \"Volgende maand\",\r\n  monthSelectLabel: \"Maand\",\r\n  yearSelectLabel: \"Jaar\",\r\n  closeLabel: \"Sluiten\",\r\n  keyboardInstruction: \"Gebruik de pijltjestoetsen om een dag te kiezen\",\r\n  calendarHeading: \"Kies een datum\",\r\n  dayNames: [\"Zondag\", \"Maandag\", \"Dinsdag\", \"Woensdag\", \"Donderdag\", \"Vrijdag\", \"Zaterdag\"],\r\n  monthNames: [\r\n    \"Januari\",\r\n    \"Februari\",\r\n    \"Maart\",\r\n    \"April\",\r\n    \"Mei\",\r\n    \"Juni\",\r\n    \"Juli\",\r\n    \"Augustus\",\r\n    \"September\",\r\n    \"Oktober\",\r\n    \"November\",\r\n    \"December\",\r\n  ],\r\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mrt\", \"Apr\", \"Mei\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dec\"],\r\n};\r\n\r\nexport default localization;\r\n","// eslint-disable-next-line @stencil-community/ban-exported-const-enums -- This enum is not part of public API\r\nexport enum DaysOfWeek {\r\n  Sunday = 0,\r\n  Monday = 1,\r\n  Tuesday = 2,\r\n  Wednesday = 3,\r\n  Thursday = 4,\r\n  Friday = 5,\r\n  Saturday = 6,\r\n}\r\n\r\nexport function createDate(year: string, month: string, day: string): Date | undefined {\r\n  const dayInt = parseInt(day, 10);\r\n  const monthInt = parseInt(month, 10);\r\n  const yearInt = parseInt(year, 10);\r\n\r\n  const isValid =\r\n    Number.isInteger(yearInt) && // all parts should be integers\r\n    Number.isInteger(monthInt) &&\r\n    Number.isInteger(dayInt) &&\r\n    monthInt > 0 && // month must be 1-12\r\n    monthInt <= 12 &&\r\n    dayInt > 0 && // day must be 1-31\r\n    dayInt <= 31 &&\r\n    yearInt > 0;\r\n\r\n  if (isValid) {\r\n    return new Date(yearInt, monthInt - 1, dayInt);\r\n  }\r\n}\r\n\r\n/**\r\n * @param value date string in Dutch format D-M-YYYY\r\n */\r\nexport function parseDutchDate(value: string | undefined): Date | 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    matches[2].length === 4\r\n  ) {\r\n    return createDate(matches[2], matches[1], matches[0]);\r\n  }\r\n}\r\n\r\n/**\r\n * print date in format DD-MM-YYYY\r\n * @param date\r\n */\r\nexport function printDutchDate(date: Date | undefined): string {\r\n  if (!date) {\r\n    return \"\";\r\n  }\r\n\r\n  const d = date.getDate().toString(10).padStart(2, \"0\");\r\n  const m = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n  const y = date.getFullYear().toString(10).padStart(2, \"0\");\r\n\r\n  return `${d}-${m}-${y}`;\r\n}\r\n\r\n/**\r\n * Compare if two dates are equal in terms of day, month, and year\r\n */\r\nexport function isEqual(a: Date | undefined, b: Date | undefined): boolean {\r\n  if (!a || !b) {\r\n    return false;\r\n  }\r\n\r\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\r\n}\r\n\r\nexport function addDays(date: Date, days: number): Date {\r\n  const d = new Date(date);\r\n  d.setDate(d.getDate() + days);\r\n  return d;\r\n}\r\n\r\nexport function addMonths(date: Date, months: number): Date {\r\n  const d = new Date(date);\r\n  d.setMonth(date.getMonth() + months);\r\n  return d;\r\n}\r\n\r\nexport function addYears(date: Date, years: number): Date {\r\n  const d = new Date(date);\r\n  d.setFullYear(date.getFullYear() + years);\r\n  return d;\r\n}\r\n\r\nexport function startOfWeek(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date {\r\n  const d = new Date(date);\r\n  const day = d.getDay();\r\n  const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\r\n\r\n  d.setDate(d.getDate() - diff);\r\n  return d;\r\n}\r\n\r\nexport function endOfWeek(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date {\r\n  const d = new Date(date);\r\n  const day = d.getDay();\r\n  const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\r\n\r\n  d.setDate(d.getDate() + diff);\r\n  return d;\r\n}\r\n\r\nexport function startOfMonth(date: Date): Date {\r\n  return new Date(date.getFullYear(), date.getMonth(), 1);\r\n}\r\n\r\nexport function endOfMonth(date: Date): Date {\r\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\r\n}\r\n\r\nexport function setMonth(date: Date, month: number): Date {\r\n  const d = new Date(date);\r\n  d.setMonth(month);\r\n  return d;\r\n}\r\n\r\nexport function setYear(date: Date, year: number): Date {\r\n  const d = new Date(date);\r\n  d.setFullYear(year);\r\n  return d;\r\n}\r\n\r\n/**\r\n * Check if date is within a min and max\r\n */\r\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\r\n  return clamp(date, min, max) === date;\r\n}\r\n\r\n/**\r\n * Ensures date is within range, returns min or max if out of bounds\r\n */\r\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\r\n  const time = date.getTime();\r\n\r\n  if (min && min instanceof Date && time < min.getTime()) {\r\n    return min;\r\n  }\r\n\r\n  if (max && max instanceof Date && time > max.getTime()) {\r\n    return max;\r\n  }\r\n\r\n  return date;\r\n}\r\n\r\n/**\r\n * given start and end date, return an (inclusive) array of all dates in between\r\n * @param start\r\n * @param end\r\n */\r\nfunction getDaysInRange(start: Date, end: Date): Date[] {\r\n  const days: Date[] = [];\r\n  let current = start;\r\n\r\n  while (!isEqual(current, end)) {\r\n    days.push(current);\r\n    current = addDays(current, 1);\r\n  }\r\n\r\n  days.push(current);\r\n\r\n  return days;\r\n}\r\n\r\n/**\r\n * given a date, return an array of dates from a calendar perspective\r\n * @param date\r\n * @param firstDayOfWeek\r\n */\r\nexport function getViewOfMonth(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date[] {\r\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\r\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\r\n\r\n  return getDaysInRange(start, end);\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { isEqual, printDutchDate } from \"./date-utils\";\r\n\r\nexport type DatePickerLegacyDayProps = {\r\n  focusedDay: Date;\r\n  today: Date;\r\n  day: Date;\r\n  inRange: boolean;\r\n  onDaySelect: (event: MouseEvent, day: Date) => void;\r\n  onKeyboardNavigation: (event: KeyboardEvent) => void;\r\n  focusedDayRef?: (element: HTMLButtonElement) => void;\r\n};\r\n\r\nexport const DatePickerLegacyDay: FunctionalComponent<DatePickerLegacyDayProps> = ({\r\n  focusedDay,\r\n  today,\r\n  day,\r\n  onDaySelect,\r\n  onKeyboardNavigation,\r\n  focusedDayRef,\r\n  inRange,\r\n}) => {\r\n  const isToday = isEqual(day, today);\r\n  const isFocused = isEqual(day, focusedDay);\r\n  const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();\r\n  const isOutsideRange = !inRange;\r\n\r\n  function handleClick(e: MouseEvent) {\r\n    onDaySelect(e, day);\r\n  }\r\n\r\n  return (\r\n    <button\r\n      class={{\r\n        \"dso-date__day\": true,\r\n        \"is-today\": isToday,\r\n      }}\r\n      tabIndex={isFocused ? 0 : -1}\r\n      onClick={handleClick}\r\n      onKeyDown={onKeyboardNavigation}\r\n      disabled={isOutsideRange || notCurrentMonth}\r\n      type=\"button\"\r\n      ref={(el) => {\r\n        if (isFocused && el && focusedDayRef) {\r\n          focusedDayRef(el);\r\n        }\r\n      }}\r\n    >\r\n      <span aria-hidden=\"true\">{day.getDate()}</span>\r\n      <span class=\"dso-date__vhidden\">{printDutchDate(day)}</span>\r\n    </button>\r\n  );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { DsoLocalizedText } from \"./date-localization\";\r\nimport { DatePickerLegacyDay, DatePickerLegacyDayProps } from \"./date-picker-day\";\r\nimport { DaysOfWeek, getViewOfMonth, inRange, isEqual } from \"./date-utils\";\r\n\r\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\r\n  const result = [];\r\n\r\n  for (let i = 0; i < array.length; i += chunkSize) {\r\n    result.push(array.slice(i, i + chunkSize));\r\n  }\r\n\r\n  return result;\r\n}\r\n\r\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\r\n  return array.map((_, i) => {\r\n    const adjustedIndex = (i + startingOffset) % array.length;\r\n    const item = array[adjustedIndex];\r\n    if (!item) {\r\n      throw new Error(\"No item found\");\r\n    }\r\n\r\n    return mapFn(item);\r\n  });\r\n}\r\n\r\ntype DatePickerLegacyMonthProps = {\r\n  selectedDate: Date | undefined;\r\n  focusedDate: Date;\r\n  labelledById: string;\r\n  localization: DsoLocalizedText;\r\n  firstDayOfWeek: DaysOfWeek;\r\n  min?: Date;\r\n  max?: Date;\r\n  onDateSelect: DatePickerLegacyDayProps[\"onDaySelect\"];\r\n  onKeyboardNavigation: DatePickerLegacyDayProps[\"onKeyboardNavigation\"];\r\n  focusedDayRef: (element: HTMLButtonElement) => void;\r\n  onFocusIn?: (e: FocusEvent) => void;\r\n  onMouseDown?: (e: MouseEvent) => void;\r\n};\r\n\r\nexport const DatePickerLegacyMonth: FunctionalComponent<DatePickerLegacyMonthProps> = ({\r\n  selectedDate,\r\n  focusedDate,\r\n  labelledById,\r\n  localization,\r\n  firstDayOfWeek,\r\n  min,\r\n  max,\r\n  onDateSelect,\r\n  onKeyboardNavigation,\r\n  focusedDayRef,\r\n  onMouseDown,\r\n  onFocusIn,\r\n}) => {\r\n  const today = new Date();\r\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek);\r\n\r\n  return (\r\n    <table\r\n      class=\"dso-date__table\"\r\n      role=\"grid\"\r\n      aria-labelledby={labelledById}\r\n      onFocusin={onFocusIn}\r\n      onMouseDown={onMouseDown}\r\n    >\r\n      <thead>\r\n        <tr>\r\n          {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\r\n            <th class=\"dso-date__table-header\" scope=\"col\">\r\n              <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\r\n              <span class=\"dso-date__vhidden\">{dayName}</span>\r\n            </th>\r\n          ))}\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        {chunk(days, 7).map((week) => (\r\n          <tr class=\"dso-date__row\">\r\n            {week.map((day) => (\r\n              <td\r\n                class=\"dso-date__cell\"\r\n                role=\"gridcell\"\r\n                aria-selected={isEqual(day, selectedDate) ? \"true\" : undefined}\r\n                aria-current={isEqual(day, today) ? \"date\" : undefined}\r\n              >\r\n                <DatePickerLegacyDay\r\n                  day={day}\r\n                  today={today}\r\n                  focusedDay={focusedDate}\r\n                  inRange={inRange(day, min, max)}\r\n                  onDaySelect={onDateSelect}\r\n                  onKeyboardNavigation={onKeyboardNavigation}\r\n                  focusedDayRef={focusedDayRef}\r\n                />\r\n              </td>\r\n            ))}\r\n          </tr>\r\n        ))}\r\n      </tbody>\r\n    </table>\r\n  );\r\n};\r\n","import { DsoLocalizedText } from \"../date-localization\";\r\n\r\nexport function monthRange(\r\n  localization: DsoLocalizedText,\r\n  selectedYear: number,\r\n  minDate?: Date,\r\n  maxDate?: Date,\r\n): string[] {\r\n  if (minDate && maxDate) {\r\n    const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };\r\n    const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };\r\n\r\n    return localization.monthNames.filter((_month, index) => {\r\n      if (minYear === selectedYear && maxYear === selectedYear) {\r\n        return index >= minMonth && index >= maxMonth;\r\n      }\r\n\r\n      if (minYear === selectedYear) {\r\n        return index >= minMonth;\r\n      }\r\n\r\n      if (maxYear === selectedYear) {\r\n        return index <= maxMonth;\r\n      }\r\n\r\n      return true;\r\n    });\r\n  }\r\n\r\n  if (minDate) {\r\n    const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };\r\n\r\n    return localization.monthNames.filter((_month, index) => minYear === selectedYear && index >= minMonth);\r\n  }\r\n\r\n  if (maxDate) {\r\n    const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };\r\n\r\n    return localization.monthNames.filter((_month, index) => maxYear === selectedYear && index <= maxMonth);\r\n  }\r\n\r\n  return localization.monthNames;\r\n}\r\n","export function range(from: number, to: number) {\r\n  const result: number[] = [];\r\n  for (let i = from; i <= to; i++) {\r\n    result.push(i);\r\n  }\r\n  return result;\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-legacy.variables\" as core-date-picker-legacy-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 *,\r\n.dso-date *::before,\r\n.dso-date *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.dso-date {\r\n  box-sizing: border-box;\r\n  color: core-date-picker-legacy-variables.$color-text;\r\n  display: block;\r\n  font-family: core-date-picker-legacy-variables.$font;\r\n  margin: 0;\r\n  position: relative;\r\n  text-align: start;\r\n  inline-size: 100%;\r\n\r\n  &:not(.dso-visible) {\r\n    .dso-date__dialog {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TOGGLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__toggle {\r\n  -moz-appearance: none;\r\n  -webkit-appearance: none;\r\n  -webkit-user-select: none;\r\n  align-items: center;\r\n  appearance: none;\r\n  background: core-date-picker-legacy-variables.$color-button-bg;\r\n  border: 0;\r\n  border-radius: 0;\r\n  border-end-end-radius: core-date-picker-legacy-variables.$radius;\r\n  border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n  color: core-date-picker-legacy-variables.$color-icon;\r\n  cursor: pointer;\r\n  display: flex;\r\n  block-size: core-date-picker-legacy-variables.$size;\r\n  justify-content: center;\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-inline-end: 0;\r\n  transform: translateY(-50%);\r\n  inset-block-start: 50%;\r\n  user-select: none;\r\n  inline-size: core-date-picker-legacy-variables.$size;\r\n  z-index: zindex.$datepicker + 1;\r\n\r\n  &:disabled {\r\n    color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n    cursor: default;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ DIALOG\r\n// ---------------------------------------------\r\n\r\n.dso-date__dialog {\r\n  border-width: core-date-picker-legacy-variables.$border-width;\r\n  display: flex;\r\n  inset-inline-end: 0;\r\n  min-inline-size: 320px;\r\n  opacity: 0;\r\n  position: absolute;\r\n  inset-block-start: 100%;\r\n  transform: scale(0.96) translateZ(0) translateY(-20px);\r\n  transform-origin: top right;\r\n  transition:\r\n    transform 300ms ease,\r\n    opacity 300ms ease,\r\n    visibility 300ms ease;\r\n  visibility: hidden;\r\n  will-change: transform, opacity, visibility;\r\n  z-index: zindex.$datepicker-dialog;\r\n\r\n  @media (max-width: 35.9375em) {\r\n    background: core-date-picker-legacy-variables.$overlay;\r\n    inset-block-end: 0;\r\n    position: fixed;\r\n    inset-inline-start: 0;\r\n    inset-inline-end: 0;\r\n    inset-block-start: 0;\r\n    transform: translateZ(0);\r\n    transform-origin: bottom center;\r\n  }\r\n\r\n  &.is-left {\r\n    inset-inline-start: units.$padding-base-inline * -1 + core-date-picker-legacy-variables.$border-width;\r\n    inset-inline-end: auto;\r\n    inline-size: auto;\r\n  }\r\n\r\n  &.is-active {\r\n    opacity: 1;\r\n    // The value of 1.0001 fixes a Chrome glitch with scaling\r\n    transform: scale(1.0001) translateZ(0) translateY(0);\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dso-date__dialog-content {\r\n  background: core-date-picker-legacy-variables.$surface;\r\n  border: 1px solid rgba(0, 0, 0, 0.1);\r\n  border-radius: core-date-picker-legacy-variables.$radius;\r\n  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n  margin-inline-start: auto;\r\n  margin-inline-end: -1px;\r\n  margin-block-start: 8px;\r\n  max-inline-size: 310px;\r\n  min-inline-size: 290px;\r\n  padding: 16px;\r\n  position: relative;\r\n  transform: none;\r\n  inline-size: 100%;\r\n  z-index: zindex.$datepicker-dialog;\r\n\r\n  @media (max-width: 35.9375em) {\r\n    border: 0;\r\n    border-radius: 0;\r\n    border-start-start-radius: core-date-picker-legacy-variables.$radius;\r\n    border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n    margin: 0;\r\n    max-inline-size: none;\r\n    min-block-size: 26em;\r\n    opacity: 0;\r\n    padding-block: 0 20px;\r\n    padding-inline: 8%;\r\n    position: absolute;\r\n    transform: translateZ(0) translateY(100%);\r\n    transition:\r\n      transform core-date-picker-legacy-variables.$transition-duration ease,\r\n      opacity core-date-picker-legacy-variables.$transition-duration ease,\r\n      visibility core-date-picker-legacy-variables.$transition-duration ease;\r\n    visibility: hidden;\r\n    will-change: transform, opacity, visibility;\r\n\r\n    .is-active & {\r\n      opacity: 1;\r\n      transform: translateZ(0) translateY(0);\r\n      visibility: visible;\r\n    }\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TABLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__table {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n  color: core-date-picker-legacy-variables.$color-text;\r\n  font-size: 1rem;\r\n  font-weight: core-date-picker-legacy-variables.$font-normal;\r\n  line-height: 1.25;\r\n  min-inline-size: (core-date-picker-legacy-variables.$size + 2) * 7;\r\n  table-layout: fixed;\r\n  text-align: center;\r\n  inline-size: 100%;\r\n}\r\n\r\n.dso-date__table-header {\r\n  font-size: 0.875em;\r\n  font-weight: core-date-picker-legacy-variables.$font-bold;\r\n  block-size: 36px;\r\n  line-height: 36px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.dso-date__cell {\r\n  block-size: core-date-picker-legacy-variables.$size + 2;\r\n  padding: 1px;\r\n  text-align: center;\r\n  inline-size: core-date-picker-legacy-variables.$size + 2;\r\n}\r\n\r\n.dso-date__day {\r\n  -moz-appearance: none;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 0 1px transparent;\r\n  color: core-date-picker-legacy-variables.$color-text;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  font-family: core-date-picker-legacy-variables.$font;\r\n  font-variant-numeric: tabular-nums;\r\n  font-weight: core-date-picker-legacy-variables.$font-normal;\r\n  block-size: core-date-picker-legacy-variables.$size;\r\n  line-height: 0;\r\n  padding: 0;\r\n  position: relative;\r\n  text-align: center;\r\n  vertical-align: middle;\r\n  inline-size: core-date-picker-legacy-variables.$size;\r\n  z-index: zindex.$datepicker;\r\n\r\n  &.is-today {\r\n    background: transparent;\r\n    block-size: core-date-picker-legacy-variables.$size - 2;\r\n    box-shadow: 0 0 0 1px core-date-picker-legacy-variables.$color-button;\r\n    inline-size: core-date-picker-legacy-variables.$size - 2;\r\n  }\r\n\r\n  &:hover,\r\n  &:active {\r\n    background: core-date-picker-legacy-variables.$color-button;\r\n    color: core-date-picker-legacy-variables.$color-text-active;\r\n  }\r\n\r\n  &:focus {\r\n    background: transparent;\r\n    box-shadow: 0 0 0 2px colors.$bosgroen;\r\n    color: core-date-picker-legacy-variables.$color-text;\r\n    block-size: core-date-picker-legacy-variables.$size - 4;\r\n    outline: 0;\r\n    inline-size: core-date-picker-legacy-variables.$size - 4;\r\n  }\r\n\r\n  [aria-selected=\"true\"] & {\r\n    background: core-date-picker-legacy-variables.$color-button;\r\n    color: core-date-picker-legacy-variables.$color-text-active;\r\n\r\n    &:focus {\r\n      background: transparent;\r\n\r\n      span[aria-hidden=\"true\"] {\r\n        background: core-date-picker-legacy-variables.$color-button;\r\n        border: 1px solid colors.$wit;\r\n        line-height: core-date-picker-legacy-variables.$size - 6;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: colors.$wit;\r\n    color: core-date-picker-legacy-variables.$color-text-disabled;\r\n    cursor: default;\r\n  }\r\n\r\n  span[aria-hidden=\"true\"] {\r\n    border-radius: 50%;\r\n    display: inline-block;\r\n    block-size: core-date-picker-legacy-variables.$size - 4;\r\n    line-height: core-date-picker-legacy-variables.$size - 4;\r\n    inline-size: core-date-picker-legacy-variables.$size - 4;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ HEADER\r\n// ---------------------------------------------\r\n\r\n.dso-date__header {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block-end: 16px;\r\n  inline-size: 100%;\r\n\r\n  span {\r\n    font-size: 0.875rem;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ NAVIGATION\r\n// ---------------------------------------------\r\n\r\n.dso-date__nav {\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n}\r\n\r\n.dso-date__prev,\r\n.dso-date__next {\r\n  -moz-appearance: none;\r\n  -webkit-appearance: none;\r\n  align-items: center;\r\n  appearance: none;\r\n  background: core-date-picker-legacy-variables.$color-button-bg;\r\n  border: 1px solid core-date-picker-legacy-variables.$color-button;\r\n  border-radius: core-date-picker-legacy-variables.$radius;\r\n  box-sizing: border-box;\r\n  color: core-date-picker-legacy-variables.$color-button;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  font-size: 1em;\r\n  block-size: 32px;\r\n  justify-content: center;\r\n  margin-inline-start: 8px;\r\n  padding: 0;\r\n  inline-size: 32px;\r\n\r\n  @media (max-width: 35.9375em) {\r\n    block-size: 40px;\r\n    inline-size: 40px;\r\n  }\r\n\r\n  &:hover,\r\n  &:active {\r\n    background-color: core-date-picker-legacy-variables.$color-button;\r\n    color: core-date-picker-legacy-variables.$color-text-active;\r\n  }\r\n\r\n  &:focus {\r\n    background: core-date-picker-legacy-variables.$color-button-bg;\r\n    color: core-date-picker-legacy-variables.$color-button;\r\n  }\r\n\r\n  &:disabled {\r\n    &,\r\n    &:hover {\r\n      background-color: colors.$wit;\r\n      border-color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n      color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  svg {\r\n    margin-block: 0; // left this in, just to be sure ;)\r\n    margin-inline: auto;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ SELECT\r\n// ---------------------------------------------\r\n\r\n.dso-date__select {\r\n  display: inline-flex;\r\n  block-size: units.$u1 * 4 - 4;\r\n  line-height: units.$u1 * 4 - 4;\r\n  position: relative;\r\n\r\n  span {\r\n    margin-inline-end: 4px;\r\n  }\r\n\r\n  select {\r\n    color: core-date-picker-legacy-variables.$color-primary;\r\n    cursor: pointer;\r\n    font-size: 1rem;\r\n    block-size: 100%;\r\n    inset-inline-start: 0;\r\n    opacity: 0;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    inline-size: 100%;\r\n    z-index: zindex.$datepicker + 1;\r\n\r\n    &:focus + .dso-date__select-label {\r\n      box-shadow: 0 0 0 2px core-date-picker-legacy-variables.$color-primary;\r\n    }\r\n\r\n    &:disabled {\r\n      color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__select-label {\r\n  align-items: center;\r\n  border-radius: core-date-picker-legacy-variables.$radius;\r\n  color: core-date-picker-legacy-variables.$select;\r\n  display: flex;\r\n  padding-block: 0;\r\n  padding-inline: 8px 4px;\r\n  pointer-events: none;\r\n  position: relative;\r\n  inline-size: 100%;\r\n  z-index: zindex.$datepicker;\r\n\r\n  span {\r\n    font-size: 1.25rem;\r\n    font-weight: core-date-picker-legacy-variables.$font-bold;\r\n    line-height: 1.25;\r\n  }\r\n\r\n  svg {\r\n    inline-size: 16px;\r\n    block-size: 16px;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ MOBILE\r\n// ---------------------------------------------\r\n\r\n.dso-date__mobile {\r\n  align-items: center;\r\n  border-block-end: 1px solid rgba(0, 0, 0, 0.12);\r\n  display: flex;\r\n  font-size: 1em;\r\n  justify-content: space-between;\r\n  margin-block-end: 20px;\r\n  margin-inline-start: -10%;\r\n  overflow: hidden;\r\n  padding-block: 12px;\r\n  padding-inline: 20px;\r\n  position: relative;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n  inline-size: 120%;\r\n\r\n  @media (min-width: 36em) {\r\n    border: 0;\r\n    margin: 0;\r\n    overflow: visible;\r\n    padding: 0;\r\n    position: absolute;\r\n    inset-inline-end: -16px;\r\n    inset-block-start: -16px;\r\n    inline-size: auto;\r\n  }\r\n}\r\n\r\n.dso-date__mobile-heading {\r\n  display: inline-block;\r\n  font-weight: core-date-picker-legacy-variables.$font-bold;\r\n  max-inline-size: 84%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n\r\n  @media (min-width: 36em) {\r\n    display: none;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ CLOSE\r\n// ---------------------------------------------\r\n\r\n.dso-date__close {\r\n  -webkit-appearance: none;\r\n  align-items: center;\r\n  appearance: none;\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  color: core-date-picker-legacy-variables.$color-icon;\r\n  cursor: pointer;\r\n  display: flex;\r\n  font-size: 1em;\r\n  block-size: units.$u1 * 4;\r\n  justify-content: center;\r\n  margin-inline-end: -4px;\r\n  padding: 0;\r\n  inline-size: units.$u1 * 4;\r\n\r\n  @media (min-width: 36em) {\r\n    margin-inline-end: 0;\r\n    opacity: 0;\r\n  }\r\n\r\n  &:focus {\r\n    box-shadow: 0 0 0 2px colors.$bosgroen;\r\n    outline: none;\r\n\r\n    @media (min-width: 36em) {\r\n      opacity: 1;\r\n    }\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ VISUALLY HIDDEN\r\n// ---------------------------------------------\r\n\r\n.dso-date__vhidden {\r\n  border: 0;\r\n  clip: rect(1px, 1px, 1px, 1px);\r\n  block-size: 1px;\r\n  overflow: hidden;\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  inline-size: 1px;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport defaultLocalization, { DsoLocalizedText } from \"./date-localization\";\r\nimport {\r\n  DsoDatePickerLegacyChangeEvent,\r\n  DsoDatePickerLegacyDirection,\r\n  DsoDatePickerLegacyFocusEvent,\r\n  DsoDatePickerLegacyKeyboardEvent,\r\n} from \"./date-picker-legacy.interfaces\";\r\nimport { DatePickerLegacyMonth } from \"./date-picker-month\";\r\nimport {\r\n  DaysOfWeek,\r\n  addDays,\r\n  clamp,\r\n  endOfMonth,\r\n  endOfWeek,\r\n  inRange,\r\n  parseDutchDate,\r\n  printDutchDate,\r\n  setMonth,\r\n  setYear,\r\n  startOfMonth,\r\n  startOfWeek,\r\n} from \"./date-utils\";\r\nimport { monthRange } from \"./utils/month-range\";\r\nimport { range } from \"./utils/range\";\r\n\r\nconst keyCode = {\r\n  TAB: 9,\r\n  ESC: 27,\r\n  SPACE: 32,\r\n  PAGE_UP: 33,\r\n  PAGE_DOWN: 34,\r\n  END: 35,\r\n  HOME: 36,\r\n  LEFT: 37,\r\n  UP: 38,\r\n  RIGHT: 39,\r\n  DOWN: 40,\r\n};\r\n\r\nconst DISALLOWED_CHARACTERS = /[^0-9-]+/g;\r\nconst TRANSITION_MS = 300;\r\n\r\nfunction cleanValue(input: HTMLInputElement, regex: RegExp): string {\r\n  const value = input.value;\r\n  const cursor = input.selectionStart;\r\n\r\n  if (!cursor) {\r\n    return value;\r\n  }\r\n\r\n  const beforeCursor = value.slice(0, cursor);\r\n  const afterCursor = value.slice(cursor, value.length);\r\n\r\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\");\r\n  const filterAfterCursor = afterCursor.replace(regex, \"\");\r\n\r\n  const newValue = filteredBeforeCursor + filterAfterCursor;\r\n  const newCursor = filteredBeforeCursor.length;\r\n\r\n  input.value = newValue;\r\n  input.selectionStart = input.selectionEnd = newCursor;\r\n\r\n  return newValue;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-date-picker-legacy\",\r\n  styleUrl: \"date-picker-legacy.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePickerLegacy implements ComponentInterface {\r\n  /**\r\n   * Own Properties\r\n   */\r\n  private monthSelectId = createIdentifier(\"DsoDateMonth\");\r\n  private yearSelectId = createIdentifier(\"DsoDateYear\");\r\n  private dialogLabelId = createIdentifier(\"DsoDateLabel\");\r\n\r\n  private datePickerLegacyButton: HTMLButtonElement | undefined;\r\n  private datePickerLegacyInput: HTMLInputElement | undefined;\r\n  private firstFocusableElement: HTMLElement | undefined;\r\n  private monthSelectNode: HTMLElement | undefined;\r\n  private focusedDayNode: HTMLButtonElement | undefined;\r\n\r\n  private focusTimeoutId: ReturnType<typeof setTimeout> | undefined;\r\n  private hideTimeoutId: ReturnType<typeof setTimeout> | undefined;\r\n\r\n  private initialTouchX: number | undefined;\r\n  private initialTouchY: number | undefined;\r\n\r\n  private localization: DsoLocalizedText = defaultLocalization;\r\n  private firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\r\n\r\n  private previousValue: string | undefined;\r\n\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerLegacyElement;\r\n\r\n  /**\r\n   * State() variables\r\n   */\r\n  @State()\r\n  activeFocus = false;\r\n\r\n  @State()\r\n  focusedDay = new Date();\r\n\r\n  @State()\r\n  open = false;\r\n\r\n  @State()\r\n  visible = false;\r\n\r\n  /**\r\n   * Public Property API\r\n   */\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"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   * Defines a specific role attribute for the date picker input.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = null;\r\n\r\n  /**\r\n   * Forces the opening direction of the calendar modal to be always left or right.\r\n   * This setting can be useful when the input is smaller than the opening date picker\r\n   * would be as by default the picker always opens towards right.\r\n   */\r\n  @Prop()\r\n  direction: DsoDatePickerLegacyDirection = \"right\";\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop()\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, mutable: 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<DsoDatePickerLegacyChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\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<DsoDatePickerLegacyKeyboardEvent>;\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<DsoDatePickerLegacyKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\r\n\r\n  /**\r\n   * Component event handling.\r\n   */\r\n  @Listen(\"click\", { target: \"document\", capture: true })\r\n  handleDocumentClick(e: MouseEvent) {\r\n    if (!this.open) {\r\n      return;\r\n    }\r\n\r\n    const path = e.composedPath();\r\n\r\n    for (const target of path) {\r\n      if (target instanceof Node && this.element.contains(target)) {\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.hide(false);\r\n  }\r\n\r\n  /**\r\n   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    return this.datePickerLegacyInput?.focus();\r\n  }\r\n\r\n  /**\r\n   * Public methods API\r\n   */\r\n\r\n  /**\r\n   * Show the calendar modal, moving focus to the calendar inside.\r\n   */\r\n  @Method()\r\n  async show() {\r\n    if (typeof this.hideTimeoutId !== \"undefined\") {\r\n      clearTimeout(this.hideTimeoutId);\r\n    }\r\n\r\n    this.visible = true;\r\n\r\n    setTimeout(() => {\r\n      this.open = true;\r\n      this.setFocusedDay(parseDutchDate(this.value) || new Date());\r\n\r\n      if (typeof this.focusTimeoutId !== \"undefined\") {\r\n        clearTimeout(this.focusTimeoutId);\r\n      }\r\n\r\n      this.focusTimeoutId = setTimeout(() => this.monthSelectNode?.focus(), TRANSITION_MS);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\r\n   * returning to the date picker's button. Default is true.\r\n   */\r\n  @Method()\r\n  async hide(moveFocusToButton = true) {\r\n    this.open = false;\r\n\r\n    // in cases where calendar is quickly shown and hidden\r\n    // we should avoid moving focus to the button\r\n    if (typeof this.focusTimeoutId !== \"undefined\") {\r\n      clearTimeout(this.focusTimeoutId);\r\n    }\r\n\r\n    this.hideTimeoutId = setTimeout(() => {\r\n      if (moveFocusToButton && this.datePickerLegacyButton) {\r\n        this.datePickerLegacyButton.focus();\r\n      }\r\n\r\n      this.visible = false;\r\n    }, TRANSITION_MS + 200);\r\n  }\r\n\r\n  /**\r\n   * Local methods.\r\n   */\r\n  private enableActiveFocus = () => {\r\n    this.activeFocus = true;\r\n  };\r\n\r\n  private disableActiveFocus = () => {\r\n    this.activeFocus = false;\r\n  };\r\n\r\n  private addDays(days: number) {\r\n    this.setFocusedDay(addDays(this.focusedDay, days));\r\n  }\r\n\r\n  private addMonths(months: number) {\r\n    this.setMonth(this.focusedDay.getMonth() + months);\r\n  }\r\n\r\n  private addYears(years: number) {\r\n    this.setYear(this.focusedDay.getFullYear() + years);\r\n  }\r\n\r\n  private startOfWeek() {\r\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n  }\r\n\r\n  private endOfWeek() {\r\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n  }\r\n\r\n  private setMonth(month: number) {\r\n    const min = setMonth(startOfMonth(this.focusedDay), month);\r\n    const max = endOfMonth(min);\r\n    const date = setMonth(this.focusedDay, month);\r\n\r\n    this.setFocusedDay(clamp(date, min, max));\r\n  }\r\n\r\n  private setYear(year: number) {\r\n    const min = setYear(startOfMonth(this.focusedDay), year);\r\n    const max = endOfMonth(min);\r\n    const date = setYear(this.focusedDay, year);\r\n\r\n    this.setFocusedDay(clamp(date, min, max));\r\n  }\r\n\r\n  private setFocusedDay(day: Date) {\r\n    this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));\r\n  }\r\n\r\n  private toggleOpen = (e: Event) => {\r\n    e.preventDefault();\r\n    if (this.open) {\r\n      this.hide(false);\r\n    } else {\r\n      this.show();\r\n    }\r\n  };\r\n\r\n  private handleEscKey = (event: KeyboardEvent) => {\r\n    if (event.keyCode === keyCode.ESC) {\r\n      this.hide();\r\n    }\r\n  };\r\n\r\n  private handleBlur = (event: Event) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoBlur.emit({\r\n      component: \"dso-date-picker-legacy\",\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-legacy\",\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-legacy\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleFocus = (event: Event) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      component: \"dso-date-picker-legacy\",\r\n    });\r\n  };\r\n\r\n  private handleTouchStart = (event: TouchEvent) => {\r\n    const touch = event.changedTouches[0];\r\n    if (!touch) {\r\n      throw new Error(\"No touch found\");\r\n    }\r\n\r\n    this.initialTouchX = touch.pageX;\r\n    this.initialTouchY = touch.pageY;\r\n  };\r\n\r\n  private handleTouchMove = (event: TouchEvent) => {\r\n    event.preventDefault();\r\n  };\r\n\r\n  private handleTouchEnd = (event: TouchEvent) => {\r\n    const touch = event.changedTouches[0];\r\n    if (!touch) {\r\n      throw new Error(\"No touch found\");\r\n    }\r\n\r\n    const distX = touch.pageX - (this.initialTouchX ?? 0); // get horizontal dist traveled\r\n    const distY = touch.pageY - (this.initialTouchY ?? 0); // get vertical dist traveled\r\n    const threshold = 70;\r\n\r\n    const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\r\n    const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;\r\n\r\n    if (isHorizontalSwipe) {\r\n      this.addMonths(distX < 0 ? 1 : -1);\r\n    } else if (isDownwardsSwipe) {\r\n      this.hide(false);\r\n      event.preventDefault();\r\n    }\r\n\r\n    this.initialTouchY = undefined;\r\n    this.initialTouchX = undefined;\r\n  };\r\n\r\n  private handleNextMonthClick = (event: MouseEvent) => {\r\n    event.preventDefault();\r\n    this.addMonths(1);\r\n  };\r\n\r\n  private handlePreviousMonthClick = (event: MouseEvent) => {\r\n    event.preventDefault();\r\n    this.addMonths(-1);\r\n  };\r\n\r\n  private handleFirstFocusableKeydown = (event: KeyboardEvent) => {\r\n    // this ensures focus is trapped inside the dialog\r\n    if (event.keyCode === keyCode.TAB && event.shiftKey) {\r\n      this.focusedDayNode?.focus();\r\n      event.preventDefault();\r\n    }\r\n  };\r\n\r\n  private handleKeyboardNavigation = (event: KeyboardEvent) => {\r\n    // handle tab separately, since it needs to be treated\r\n    // differently to other keyboard interactions\r\n    if (event.keyCode === keyCode.TAB && !event.shiftKey) {\r\n      event.preventDefault();\r\n      this.firstFocusableElement?.focus();\r\n      return;\r\n    }\r\n\r\n    let handled = true;\r\n\r\n    switch (event.keyCode) {\r\n      case keyCode.RIGHT:\r\n        this.addDays(1);\r\n        break;\r\n      case keyCode.LEFT:\r\n        this.addDays(-1);\r\n        break;\r\n      case keyCode.DOWN:\r\n        this.addDays(7);\r\n        break;\r\n      case keyCode.UP:\r\n        this.addDays(-7);\r\n        break;\r\n      case keyCode.PAGE_UP:\r\n        if (event.shiftKey) {\r\n          this.addYears(-1);\r\n        } else {\r\n          this.addMonths(-1);\r\n        }\r\n        break;\r\n      case keyCode.PAGE_DOWN:\r\n        if (event.shiftKey) {\r\n          this.addYears(1);\r\n        } else {\r\n          this.addMonths(1);\r\n        }\r\n        break;\r\n      case keyCode.HOME:\r\n        this.startOfWeek();\r\n        break;\r\n      case keyCode.END:\r\n        this.endOfWeek();\r\n        break;\r\n      default:\r\n        handled = false;\r\n    }\r\n\r\n    if (handled) {\r\n      event.preventDefault();\r\n      this.enableActiveFocus();\r\n    }\r\n  };\r\n\r\n  private handleDaySelect = (_event: MouseEvent, day: Date) => {\r\n    if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {\r\n      return;\r\n    }\r\n\r\n    if (day.getMonth() === this.focusedDay.getMonth()) {\r\n      this.setValue(day);\r\n      this.hide();\r\n    } else {\r\n      this.setFocusedDay(day);\r\n    }\r\n  };\r\n\r\n  private handleMonthSelect = (e: Event) => {\r\n    // Todo\r\n    if (e.target instanceof HTMLSelectElement) {\r\n      this.setMonth(parseInt(e.target.value, 10));\r\n    }\r\n  };\r\n\r\n  private handleYearSelect = (e: Event) => {\r\n    if (e.target instanceof HTMLSelectElement) {\r\n      this.setYear(parseInt(e.target.value, 10));\r\n    }\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);\r\n\r\n    this.setValue(cleanedValue);\r\n  };\r\n\r\n  private setValue(value: Date | string) {\r\n    const event = this.prepareEvent(value);\r\n\r\n    this.value = typeof value === \"string\" ? value : event.value;\r\n\r\n    if (this.value !== this.previousValue) {\r\n      this.dsoDateChange.emit(event);\r\n      this.previousValue = this.value;\r\n    }\r\n  }\r\n\r\n  private prepareEvent = (value: Date | string): DsoDatePickerLegacyChangeEvent => {\r\n    const event: DsoDatePickerLegacyChangeEvent = {\r\n      component: \"dso-date-picker-legacy\",\r\n      value: \"\",\r\n      valueAsDate: undefined,\r\n    };\r\n\r\n    if (value instanceof Date) {\r\n      event.valueAsDate = value;\r\n    } else {\r\n      event.value = value;\r\n      event.valueAsDate = parseDutchDate(value);\r\n    }\r\n\r\n    if (event.valueAsDate) {\r\n      event.value = printDutchDate(event.valueAsDate);\r\n    }\r\n\r\n    if (!event.valueAsDate && this.required) {\r\n      event.error = \"required\";\r\n    }\r\n\r\n    if (event.value && !event.valueAsDate) {\r\n      event.error = \"invalid\";\r\n    }\r\n\r\n    if (event.valueAsDate && (this.min || this.max)) {\r\n      const min = parseDutchDate(this.min);\r\n      const max = parseDutchDate(this.max);\r\n      const clampValue = clamp(event.valueAsDate, min, max);\r\n\r\n      if (clampValue !== event.valueAsDate && clampValue === min) {\r\n        event.valueAsDate = undefined;\r\n        event.error = \"min-range\";\r\n      } else if (clampValue !== event.valueAsDate && clampValue === max) {\r\n        event.valueAsDate = undefined;\r\n        event.error = \"max-range\";\r\n      }\r\n    }\r\n\r\n    return event;\r\n  };\r\n\r\n  private processFocusedDayNode = (element: HTMLButtonElement) => {\r\n    this.focusedDayNode = element;\r\n\r\n    if (this.activeFocus && this.open) {\r\n      setTimeout(() => element.focus(), 0);\r\n    }\r\n  };\r\n\r\n  componentWillLoad(): void | Promise<void> {\r\n    const minDate = parseDutchDate(this.min);\r\n    const maxDate = parseDutchDate(this.max);\r\n\r\n    if (minDate && minDate > this.focusedDay) {\r\n      this.focusedDay = minDate;\r\n    }\r\n\r\n    if (maxDate && maxDate < this.focusedDay) {\r\n      this.focusedDay = maxDate;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const valueAsDate = parseDutchDate(this.value);\r\n    if (valueAsDate) {\r\n      this.previousValue = this.value = printDutchDate(valueAsDate);\r\n    }\r\n\r\n    if (this.dsoAutofocus) {\r\n      this.setFocus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * render() function\r\n   * Always the last one in the class.\r\n   */\r\n  render() {\r\n    const valueAsDate = parseDutchDate(this.value);\r\n    const formattedDate = valueAsDate && printDutchDate(valueAsDate);\r\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();\r\n    const focusedMonth = this.focusedDay.getMonth();\r\n    const focusedYear = this.focusedDay.getFullYear();\r\n\r\n    const minDate = parseDutchDate(this.min);\r\n    const maxDate = parseDutchDate(this.max);\r\n    const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;\r\n    const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;\r\n\r\n    let minYear = selectedYear - 10;\r\n    let maxYear = selectedYear + 10;\r\n    if (minDate) {\r\n      minYear = Math.max(minYear, minDate.getFullYear());\r\n    }\r\n    if (maxDate) {\r\n      maxYear = Math.min(maxYear, maxDate.getFullYear());\r\n    }\r\n\r\n    return (\r\n      <Host>\r\n        <div class={{ \"dso-date\": true, \"dso-visible\": this.visible }}>\r\n          <div class=\"dso-date__input-wrapper\">\r\n            <input\r\n              class=\"dso-date__input\"\r\n              value={this.value}\r\n              placeholder={this.localization.placeholder}\r\n              id={this.identifier}\r\n              disabled={this.disabled}\r\n              role={this.role ?? undefined}\r\n              required={this.required ? true : undefined}\r\n              aria-autocomplete=\"none\"\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={this.describedBy}\r\n              onInput={this.handleInputChange}\r\n              onFocus={this.handleFocus}\r\n              onBlur={this.handleBlur}\r\n              onKeyUp={this.handleKeyUp}\r\n              onKeyDown={this.handleKeyDown}\r\n              autoComplete=\"off\"\r\n              ref={(element) => (this.datePickerLegacyInput = element)}\r\n            />\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-date__toggle\"\r\n              onClick={this.toggleOpen}\r\n              disabled={this.disabled}\r\n              ref={(element) => (this.datePickerLegacyButton = element)}\r\n            >\r\n              <span class=\"dso-date__toggle-icon\">\r\n                <dso-icon icon=\"calendar\"></dso-icon>\r\n              </span>\r\n              <span class=\"dso-date__vhidden\">\r\n                {this.localization.buttonLabel}\r\n                {formattedDate && (\r\n                  <span>\r\n                    , {this.localization.selectedDateMessage} {formattedDate}\r\n                  </span>\r\n                )}\r\n              </span>\r\n            </button>\r\n          </div>\r\n\r\n          <div\r\n            class={{\r\n              \"dso-date__dialog\": true,\r\n              \"is-left\": this.direction === \"left\",\r\n              \"is-active\": this.open,\r\n            }}\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            aria-hidden={this.open ? \"false\" : \"true\"}\r\n            aria-labelledby={this.dialogLabelId}\r\n            onTouchMove={this.handleTouchMove}\r\n            onTouchStart={this.handleTouchStart}\r\n            onTouchEnd={this.handleTouchEnd}\r\n          >\r\n            <div class=\"dso-date__dialog-content\" onKeyDown={this.handleEscKey}>\r\n              <div class=\"dso-date__vhidden dso-date__instructions\" aria-live=\"polite\">\r\n                {this.localization.keyboardInstruction}\r\n              </div>\r\n              <div class=\"dso-date__mobile\" onFocusin={this.disableActiveFocus}>\r\n                <label class=\"dso-date__mobile-heading\">{this.localization.calendarHeading}</label>\r\n                <button\r\n                  class=\"dso-date__close\"\r\n                  ref={(element) => (this.firstFocusableElement = element)}\r\n                  onKeyDown={this.handleFirstFocusableKeydown}\r\n                  onClick={() => this.hide()}\r\n                  type=\"button\"\r\n                >\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"dso-date__vhidden\">{this.localization.closeLabel}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"dso-date__header\" onFocusin={this.disableActiveFocus}>\r\n                <div>\r\n                  <h2 id={this.dialogLabelId} class=\"dso-date__vhidden\" aria-live=\"polite\">\r\n                    {this.localization.monthNames[focusedMonth]} {this.focusedDay.getFullYear()}\r\n                  </h2>\r\n\r\n                  <label htmlFor={this.monthSelectId} class=\"dso-date__vhidden\">\r\n                    {this.localization.monthSelectLabel}\r\n                  </label>\r\n                  <div class=\"dso-date__select\">\r\n                    <select\r\n                      id={this.monthSelectId}\r\n                      class=\"dso-date__select--month\"\r\n                      ref={(element) => (this.monthSelectNode = element)}\r\n                      onChange={this.handleMonthSelect}\r\n                    >\r\n                      {monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {\r\n                        const index = this.localization.monthNames.indexOf(month);\r\n\r\n                        return (\r\n                          <option key={month} value={index} selected={index === focusedMonth}>\r\n                            {month}\r\n                          </option>\r\n                        );\r\n                      })}\r\n                    </select>\r\n                    <div class=\"dso-date__select-label\" aria-hidden=\"true\">\r\n                      <span>{this.localization.monthNamesShort[focusedMonth]}</span>\r\n                      <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <label htmlFor={this.yearSelectId} class=\"dso-date__vhidden\">\r\n                    {this.localization.yearSelectLabel}\r\n                  </label>\r\n                  <div class=\"dso-date__select\">\r\n                    <select id={this.yearSelectId} class=\"dso-date__select--year\" onChange={this.handleYearSelect}>\r\n                      {range(minYear, maxYear).map((year) => (\r\n                        <option key={year} selected={year === focusedYear}>\r\n                          {year}\r\n                        </option>\r\n                      ))}\r\n                    </select>\r\n                    <div class=\"dso-date__select-label\" aria-hidden=\"true\">\r\n                      <span>{this.focusedDay.getFullYear()}</span>\r\n                      <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"dso-date__nav\">\r\n                  <button\r\n                    class=\"dso-date__prev\"\r\n                    onClick={this.handlePreviousMonthClick}\r\n                    disabled={prevMonthDisabled}\r\n                    type=\"button\"\r\n                  >\r\n                    <dso-icon icon=\"chevron-left\"></dso-icon>\r\n                    <span class=\"dso-date__vhidden\">{this.localization.prevMonthLabel}</span>\r\n                  </button>\r\n                  <button\r\n                    class=\"dso-date__next\"\r\n                    onClick={this.handleNextMonthClick}\r\n                    disabled={nextMonthDisabled}\r\n                    type=\"button\"\r\n                  >\r\n                    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                    <span class=\"dso-date__vhidden\">{this.localization.nextMonthLabel}</span>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              <DatePickerLegacyMonth\r\n                selectedDate={valueAsDate}\r\n                focusedDate={this.focusedDay}\r\n                onDateSelect={this.handleDaySelect}\r\n                onKeyboardNavigation={this.handleKeyboardNavigation}\r\n                labelledById={this.dialogLabelId}\r\n                localization={this.localization}\r\n                firstDayOfWeek={this.firstDayOfWeek}\r\n                focusedDayRef={this.processFocusedDayNode}\r\n                min={minDate}\r\n                max={maxDate}\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/{p-25121130.entry.js → p-320629e5.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as t,h as i,F as e,g as o}from"./p-C-b4jsbt.js";import{d as h}from"./p-DDU8nTJS.js";import{i as n}from"./p-CrdKfv3R.js";import{v as r}from"./p-BF0_OXTe.js";import"./p-BFTU3MAI.js";function a(s){if(typeof s!=="string"){throw new TypeError("Expected a string")}return s.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}const u={en:{"dso-autosuggest":{notFound:"{{inputValue}} was not found."}},nl:{"dso-autosuggest":{notFound:"{{inputValue}} is niet gevonden."}}};const l=".sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--_dso-autosuggest-max-block-size);min-block-size:50px;overflow-y:auto;position:absolute;z-index:200}.listbox.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}.listbox.sc-dso-autosuggest{padding-block:8px;padding-inline:0}.listbox.sc-dso-autosuggest .group.sc-dso-autosuggest:not(:first-child) .group-label.sc-dso-autosuggest{border-block-start:1px solid #b2b2b2;padding-block-start:12px}.listbox.sc-dso-autosuggest .group-label.sc-dso-autosuggest{color:#275937;font-weight:700;padding-block:4px;margin-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active{background-color:#275937}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .type.sc-dso-autosuggest,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .extra.sc-dso-autosuggest{color:#fff}.option[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#d7e7ce}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.type.sc-dso-autosuggest{text-align:end}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}.extra.sc-dso-autosuggest:not(:first-child){text-align:end}";const d=10;const c=8;const g=1;const f=({id:s,mouseEnter:t,mouseLeave:e,click:o,selected:h,suggestion:n,ref:r,markedSuggestion:a})=>i("div",{class:"option",role:"option",id:s,onMouseEnter:t,onMouseLeave:e,onClick:o,"aria-selected":h,"aria-label":n.value,ref:r},i("div",{class:"suggestion-row"},i("span",{class:"value"},a.value),a.type?i("span",{class:"type"},a.type):undefined),a.extras&&a.extras.map((s=>i("div",{class:"suggestion-row"},s.map((s=>i("span",{class:"extra"},s)))))));function p(s){return!!s&&s.length>0&&s.every((s=>s!==undefined&&"groupLabel"in s&&s.groupLabel!==undefined&&"suggestions"in s&&s.suggestions.length>0))}function v(s){return!!s&&s.length>0&&s.every((s=>s!==undefined&&"value"in s&&s.value!==undefined))}const b=class{constructor(i){s(this,i);this.dsoSelect=t(this,"dsoSelect",7);this.dsoChange=t(this,"dsoChange",7);this.dsoSearch=t(this,"dsoSearch",7);this.suggestions=null;this.loading=false;this.loadingLabel="Een moment geduld.";this.suggestOnFocus=false;this.showSuggestions=false;this.notFound=false;this.showLoading=false;this.listboxItems=[];this.listboxId=r();this.inputId=r();this.labelId=r();this.resizeObserver=new ResizeObserver(h((()=>this.setListboxContainerMaxBlockSize()),150));this.debouncedEmitValue=h((s=>{this.dsoChange.emit(s);this.debouncedShowLoading()}),200);this.debouncedShowLoading=h((()=>{if(this.inputValue){this.showLoading=true}}),this.loadingDelayed);this.inputValue="";this.onInput=s=>{if(!(s.target instanceof HTMLInputElement)){return}this.showLoading=!this.loadingDelayed;this.inputValue=s.target.value;this.debouncedEmitValue(s.target.value.match(/(\S+)/g)?s.target.value:"")};this.onFocusIn=()=>{if(this.suggestOnFocus){this.openSuggestions()}};this.text=n((()=>this.host),u);this.onWindowResize=h((()=>this.setListboxContainerMaxBlockSize()),150);this.onScrollend=()=>this.setListboxContainerMaxBlockSize();this.onKeyDown=s=>{if(s.defaultPrevented||this.loading){return}switch(s.key){case"ArrowDown":if(!this.showSuggestions){this.openSuggestions("first")}else{this.selectNextSuggestion()}break;case"ArrowUp":if(!this.showSuggestions){this.openSuggestions("last")}else{this.selectPreviousSuggestion()}break;case"Tab":this.closeSuggestions();return;case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}s.preventDefault()}}suggestionsWatcher(){this.resetSelectedSuggestion();if((!this.showSuggestions||!this.notFound)&&this.inputValue){this.openSuggestions()}else if((this.showSuggestions||this.notFound)&&!this.inputValue){this.closeSuggestions()}}onDocumentClick(s){if((this.showSuggestions||this.notFound)&&this.listbox&&s.target instanceof Node&&!this.listbox.contains(s.target)&&this.input!==s.target){this.closeSuggestions()}}componentDidRender(){this.setListboxContainerMaxBlockSize()}connectedCallback(){const s=this.host.querySelector('input[type="text"]');if(!(s instanceof HTMLInputElement)){return}this.input=s;if(s.id){this.inputId=s.id}else{s.id=this.inputId}if(!this.input.labels||this.input.labels.length<1){return}const t=this.input.labels[0];if(t===null||t===void 0?void 0:t.id){this.labelId=t.id}else if(t){t.id=this.labelId}this.input.setAttribute("role","combobox");this.input.setAttribute("aria-haspopup","listbox");this.input.setAttribute("aria-expanded","false");this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");this.input.setAttribute("aria-activedescendant","");this.input.addEventListener("input",this.onInput);this.input.addEventListener("keydown",this.onKeyDown);this.input.addEventListener("focusin",this.onFocusIn);window.addEventListener("resize",this.onWindowResize);document.addEventListener("scrollend",this.onScrollend);this.resizeObserver.observe(this.host)}disconnectedCallback(){var s,t,i;(s=this.input)===null||s===void 0?void 0:s.removeEventListener("input",this.onInput);(t=this.input)===null||t===void 0?void 0:t.removeEventListener("keydown",this.onKeyDown);(i=this.input)===null||i===void 0?void 0:i.removeEventListener("focusin",this.onFocusIn);window.removeEventListener("resize",this.onWindowResize);document.removeEventListener("scrollend",this.onScrollend);this.resizeObserver.disconnect()}setListboxContainerMaxBlockSize(){var s;if(!this.listboxContainer||!this.showSuggestions){return}if(this.showSuggestions){let t=0;let i=0;const e=this.listboxItems.length?Math.min(this.listboxItems.length,d):0;for(let i=0;i<e;i++){t=t+(((s=this.listboxItems[i])===null||s===void 0?void 0:s.getBoundingClientRect().height)||0)}const o=window.innerHeight-this.host.getBoundingClientRect().bottom;const h=t+2*c+2*g;if(o<h||o<=t){i=o-2*c}else{i=h}this.listboxContainer.style.setProperty("--_dso-autosuggest-max-block-size",`${i}px`)}}showInputValueNotFound(s){var t,i;return this.processAutosuggestMarkItems(this.markTerms((i=(t=this.input)===null||t===void 0?void 0:t.value.split(" ").filter((s=>s)))!==null&&i!==void 0?i:[],s))}handleMark(s,t,i,e){var o,h;if(this.mark&&i){return this.processAutosuggestMarkItems(this.mark(s,t,i,e))}return this.processAutosuggestMarkItems(this.markTerms((h=(o=this.input)===null||o===void 0?void 0:o.value.split(" ").filter((s=>s)))!==null&&h!==void 0?h:[],t))}markTerms(s,t){if(!t||!s||s.length===0||s[0]===undefined){return[""]}const i=new RegExp(`(${a(s[0])})`,"gi");return t.split(i).reduce(((t,e)=>{if(!e){t.push(e)}else if(i.test(e)){t.push({mark:e})}else if(s.length===1){t.push(e)}else{t.push(...this.markTerms(s.slice(1),e))}return t}),[])}processAutosuggestMarkItems(s){if(s.length===0){return[""]}return s.map((s=>{if(typeof s==="object"){return i("mark",null,s.mark)}return s}))}selectSuggestion(s,t){this.selectedSuggestion=s;this.selectedSuggestionGroup=t;this.setAriaActiveDescendant()}selectFirstSuggestion(){if(!this.suggestions){return}if(p(this.suggestions)&&this.selectedSuggestionGroup){this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}else{if(v(this.suggestions)){this.selectedSuggestion=this.suggestions[0]}}this.setAriaActiveDescendant(true)}selectLastSuggestion(){if(!this.suggestions){return}if(p(this.suggestions)&&this.selectedSuggestionGroup){this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}else{if(v(this.suggestions)){this.selectedSuggestion=this.suggestions[this.suggestions.length-1]}}this.setAriaActiveDescendant(true)}selectNextSuggestion(){var s;if(!this.suggestions){return}if(p(this.suggestions)){this.selectNextGroupedSuggestion()}else{const t=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=(s=this.suggestions[t+1])!==null&&s!==void 0?s:this.suggestions[0]}this.setAriaActiveDescendant(true)}selectNextGroupedSuggestion(){var s;if(!this.suggestions){return}if(this.selectedSuggestionGroup){const t=this.selectedSuggestion?this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion):-1;if(t===this.selectedSuggestionGroup.suggestions.length-1){const t=this.suggestionGroups.indexOf(this.selectedSuggestionGroup);this.selectedSuggestionGroup=(s=this.suggestionGroups[t+1])!==null&&s!==void 0?s:this.suggestionGroups[0];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}else{this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[t+1]}}else{this.selectedSuggestionGroup=this.suggestionGroups[0];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}}selectPreviousSuggestion(){var s;if(!this.suggestions){return}if(p(this.suggestions)){this.selectPreviousGroupedSuggestion()}else{const t=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=(s=this.suggestions[t-1])!==null&&s!==void 0?s:this.suggestions[this.suggestions.length-1]}this.setAriaActiveDescendant(true)}selectPreviousGroupedSuggestion(){var s;if(!this.suggestions){return}if(this.selectedSuggestionGroup){const t=this.selectedSuggestion?this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion):-1;if(t===0){const t=this.suggestionGroups.indexOf(this.selectedSuggestionGroup);this.selectedSuggestionGroup=(s=this.suggestionGroups[t-1])!==null&&s!==void 0?s:this.suggestionGroups[this.suggestions.length-1];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}else{this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[t-1]}}else{this.selectedSuggestionGroup=this.suggestionGroups[this.suggestions.length-1];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}}get suggestionGroups(){return p(this.suggestions)?this.suggestions:[]}setAriaActiveDescendant(s=false){var t,i;if(this.selectedSuggestion){const e=this.selectedSuggestionGroup?this.listboxGroupedItemId(this.selectedSuggestionGroup,this.selectedSuggestion):this.listboxItemId(this.selectedSuggestion);(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",e);if(s){(i=document.getElementById(e))===null||i===void 0?void 0:i.scrollIntoView({block:"nearest"})}}}resetSelectedSuggestion(){var s;this.showLoading=!this.loadingDelayed;this.notFound=false;this.selectedSuggestion=undefined;this.selectedSuggestionGroup=undefined;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant","")}openSuggestions(s){var t,i,e,o;this.showSuggestions=(t=this.suggestions&&this.suggestions.length>0)!==null&&t!==void 0?t:false;this.notFound=(e=this.suggestions&&((i=this.suggestions)===null||i===void 0?void 0:i.length)===0)!==null&&e!==void 0?e:false;(o=this.input)===null||o===void 0?void 0:o.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString());if(this.showSuggestions&&s==="first"){this.selectFirstSuggestion()}else if(this.showSuggestions&&s==="last"){this.selectLastSuggestion()}}closeSuggestions(){var s;this.showSuggestions=false;this.notFound=false;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-expanded","false");this.selectFirstSuggestion()}pickSelectedValue(){var s;if(this.selectedSuggestion&&this.showSuggestions){this.dsoSelect.emit(this.selectedSuggestion)}else{this.dsoSearch.emit((s=this.input)===null||s===void 0?void 0:s.value)}this.closeSuggestions()}listboxItemId(s){if(!this.suggestions){return""}return`${this.inputId}-${v(this.suggestions)&&this.suggestions.indexOf(s)+1}`}listboxGroupedItemId(s,t){if(!this.suggestions){return""}return`${this.inputId}-${this.suggestionGroups.indexOf(s)+1}-${s.suggestions.indexOf(t)+1}`}getMarkedChunkedExtras(s,t){const i=s.reduce(((s,t,i)=>{var e;const o=Math.floor(i/2);if(!s[o]){s[o]=[]}(e=s[o])===null||e===void 0?void 0:e.push(t);return s}),[]);return i.map(((s,i)=>s.map(((s,e)=>this.handleMark(t,s,"extra",i*2+e)))))}getMarkedSuggestions(s){return{value:this.handleMark(s,s.value,"value"),type:s.type?this.handleMark(s,s.type,"type"):undefined,extras:s.extras?this.getMarkedChunkedExtras(s.extras,s):undefined}}getAutosuggestStatus(){if(this.notFound){return`"${this.inputValue}" is niet gevonden.`}let s=0;if(v(this.suggestions)){s=this.suggestions.length}else if(p(this.suggestions)){s=this.suggestions.reduce(((s,t)=>s+t.suggestions.length),0)}return`${s} resultaten gevonden.`}render(){this.listboxItems=[];const s=this.showSuggestions||this.notFound;const t=p(this.suggestions);const o=v(this.suggestions);if(s&&this.input){this.input.setAttribute("aria-controls",this.listboxId)}else if(this.input){this.input.removeAttribute("aria-controls")}return i(e,null,i("slot",{key:"c5b140e442bb2dbb1ceba81cf7cbab49721af0e3"}),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):s&&i(e,null,i("dso-scrollable",{class:"listbox-container",ref:s=>this.listboxContainer=s},i("div",{class:"listbox",role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:s=>this.listbox=s,tabindex:"0"},o&&this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>i(f,{id:this.listboxItemId(s),mouseEnter:()=>this.selectSuggestion(s),mouseLeave:()=>this.resetSelectedSuggestion(),click:()=>this.pickSelectedValue(),selected:(s===this.selectedSuggestion).toString(),suggestion:s,ref:s=>s&&this.listboxItems.push(s),markedSuggestion:this.getMarkedSuggestions(s)})))||t&&this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>{const t=r();return i("div",{role:"group",class:"group","aria-labelledby":t},i("div",{class:"group-label",role:"presentation",id:t,ref:s=>s&&this.listboxItems.push(s)},s.groupLabel),s.suggestions.map((t=>i(f,{id:this.listboxGroupedItemId(s,t),mouseEnter:()=>this.selectSuggestion(t,s),mouseLeave:()=>this.resetSelectedSuggestion(),click:()=>this.pickSelectedValue(),selected:(t===this.selectedSuggestion).toString(),suggestion:t,ref:s=>s&&this.listboxItems.push(s),markedSuggestion:this.getMarkedSuggestions(t)}))))}))||this.notFound&&i("div",{class:"option"},i("span",{class:"value"},this.notFoundLabel||this.showInputValueNotFound(this.text("notFound",{inputValue:this.inputValue})))))),i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.getAutosuggestStatus())))}get host(){return o(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};b.style=l;export{b as dso_autosuggest};
-//# sourceMappingURL=p-25121130.entry.js.map
+import{r as s,c as t,h as i,F as e,g as o}from"./p-C-b4jsbt.js";import{d as h}from"./p-DDU8nTJS.js";import{i as n}from"./p-B_kXuEcW.js";import{v as a}from"./p-BF0_OXTe.js";import"./p-BFTU3MAI.js";function r(s){if(typeof s!=="string"){throw new TypeError("Expected a string")}return s.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}const u={en:{"dso-autosuggest":{notFound:"{{inputValue}} was not found."}},nl:{"dso-autosuggest":{notFound:"{{inputValue}} is niet gevonden."}}};const l=".sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--_dso-autosuggest-max-block-size);min-block-size:50px;overflow-y:auto;position:absolute;z-index:200}.listbox.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}.listbox.sc-dso-autosuggest{padding-block:8px;padding-inline:0}.listbox.sc-dso-autosuggest .group.sc-dso-autosuggest:not(:first-child) .group-label.sc-dso-autosuggest{border-block-start:1px solid #b2b2b2;padding-block-start:12px}.listbox.sc-dso-autosuggest .group-label.sc-dso-autosuggest{color:#275937;font-weight:700;padding-block:4px;margin-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active{background-color:#275937}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .type.sc-dso-autosuggest,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .extra.sc-dso-autosuggest{color:#fff}.option[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#d7e7ce}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.type.sc-dso-autosuggest{text-align:end}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}.extra.sc-dso-autosuggest:not(:first-child){text-align:end}";const d=10;const c=8;const g=1;const f=({id:s,mouseEnter:t,mouseLeave:e,click:o,selected:h,suggestion:n,ref:a,markedSuggestion:r})=>i("div",{class:"option",role:"option",id:s,onMouseEnter:t,onMouseLeave:e,onClick:o,"aria-selected":h,"aria-label":n.value,ref:a},i("div",{class:"suggestion-row"},i("span",{class:"value"},r.value),r.type?i("span",{class:"type"},r.type):undefined),r.extras&&r.extras.map((s=>i("div",{class:"suggestion-row"},s.map((s=>i("span",{class:"extra"},s)))))));function p(s){return!!s&&s.length>0&&s.every((s=>s!==undefined&&"groupLabel"in s&&s.groupLabel!==undefined&&"suggestions"in s&&s.suggestions.length>0))}function v(s){return!!s&&s.length>0&&s.every((s=>s!==undefined&&"value"in s&&s.value!==undefined))}const b=class{constructor(i){s(this,i);this.dsoSelect=t(this,"dsoSelect",7);this.dsoChange=t(this,"dsoChange",7);this.dsoSearch=t(this,"dsoSearch",7);this.suggestions=null;this.loading=false;this.loadingLabel="Een moment geduld.";this.suggestOnFocus=false;this.showSuggestions=false;this.notFound=false;this.showLoading=false;this.listboxItems=[];this.listboxId=a();this.inputId=a();this.labelId=a();this.resizeObserver=new ResizeObserver(h((()=>this.setListboxContainerMaxBlockSize()),150));this.debouncedEmitValue=h((s=>{this.dsoChange.emit(s);this.debouncedShowLoading()}),200);this.debouncedShowLoading=h((()=>{if(this.inputValue){this.showLoading=true}}),this.loadingDelayed);this.inputValue="";this.onInput=s=>{if(!(s.target instanceof HTMLInputElement)){return}this.showLoading=!this.loadingDelayed;this.inputValue=s.target.value;this.debouncedEmitValue(s.target.value.match(/(\S+)/g)?s.target.value:"")};this.onFocusIn=()=>{if(this.suggestOnFocus){this.openSuggestions()}};this.text=n((()=>this.host),u);this.onWindowResize=h((()=>this.setListboxContainerMaxBlockSize()),150);this.onScrollend=()=>this.setListboxContainerMaxBlockSize();this.onKeyDown=s=>{if(s.defaultPrevented||this.loading){return}switch(s.key){case"ArrowDown":if(!this.showSuggestions){this.openSuggestions("first")}else{this.selectNextSuggestion()}break;case"ArrowUp":if(!this.showSuggestions){this.openSuggestions("last")}else{this.selectPreviousSuggestion()}break;case"Tab":this.closeSuggestions();return;case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}s.preventDefault()}}suggestionsWatcher(){this.resetSelectedSuggestion();if((!this.showSuggestions||!this.notFound)&&this.inputValue){this.openSuggestions()}else if((this.showSuggestions||this.notFound)&&!this.inputValue){this.closeSuggestions()}}onDocumentClick(s){if((this.showSuggestions||this.notFound)&&this.listbox&&s.target instanceof Node&&!this.listbox.contains(s.target)&&this.input!==s.target){this.closeSuggestions()}}componentDidRender(){this.setListboxContainerMaxBlockSize()}connectedCallback(){const s=this.host.querySelector('input[type="text"]');if(!(s instanceof HTMLInputElement)){return}this.input=s;if(s.id){this.inputId=s.id}else{s.id=this.inputId}if(!this.input.labels||this.input.labels.length<1){return}const t=this.input.labels[0];if(t===null||t===void 0?void 0:t.id){this.labelId=t.id}else if(t){t.id=this.labelId}this.input.setAttribute("role","combobox");this.input.setAttribute("aria-haspopup","listbox");this.input.setAttribute("aria-expanded","false");this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");this.input.setAttribute("aria-activedescendant","");this.input.addEventListener("input",this.onInput);this.input.addEventListener("keydown",this.onKeyDown);this.input.addEventListener("focusin",this.onFocusIn);window.addEventListener("resize",this.onWindowResize);document.addEventListener("scrollend",this.onScrollend);this.resizeObserver.observe(this.host)}disconnectedCallback(){var s,t,i;(s=this.input)===null||s===void 0?void 0:s.removeEventListener("input",this.onInput);(t=this.input)===null||t===void 0?void 0:t.removeEventListener("keydown",this.onKeyDown);(i=this.input)===null||i===void 0?void 0:i.removeEventListener("focusin",this.onFocusIn);window.removeEventListener("resize",this.onWindowResize);document.removeEventListener("scrollend",this.onScrollend);this.resizeObserver.disconnect()}setListboxContainerMaxBlockSize(){var s;if(!this.listboxContainer||!this.showSuggestions){return}if(this.showSuggestions){let t=0;let i=0;const e=this.listboxItems.length?Math.min(this.listboxItems.length,d):0;for(let i=0;i<e;i++){t=t+(((s=this.listboxItems[i])===null||s===void 0?void 0:s.getBoundingClientRect().height)||0)}const o=window.innerHeight-this.host.getBoundingClientRect().bottom;const h=t+2*c+2*g;if(o<h||o<=t){i=o-2*c}else{i=h}this.listboxContainer.style.setProperty("--_dso-autosuggest-max-block-size",`${i}px`)}}showInputValueNotFound(s){var t,i;return this.processAutosuggestMarkItems(this.markTerms((i=(t=this.input)===null||t===void 0?void 0:t.value.split(" ").filter((s=>s)))!==null&&i!==void 0?i:[],s))}handleMark(s,t,i,e){var o,h;if(this.mark&&i){return this.processAutosuggestMarkItems(this.mark(s,t,i,e))}return this.processAutosuggestMarkItems(this.markTerms((h=(o=this.input)===null||o===void 0?void 0:o.value.split(" ").filter((s=>s)))!==null&&h!==void 0?h:[],t))}markTerms(s,t){if(!t||!s||s.length===0||s[0]===undefined){return[""]}const i=new RegExp(`(${r(s[0])})`,"gi");return t.split(i).reduce(((t,e)=>{if(!e){t.push(e)}else if(i.test(e)){t.push({mark:e})}else if(s.length===1){t.push(e)}else{t.push(...this.markTerms(s.slice(1),e))}return t}),[])}processAutosuggestMarkItems(s){if(s.length===0){return[""]}return s.map((s=>{if(typeof s==="object"){return i("mark",null,s.mark)}return s}))}selectSuggestion(s,t){this.selectedSuggestion=s;this.selectedSuggestionGroup=t;this.setAriaActiveDescendant()}selectFirstSuggestion(){if(!this.suggestions){return}if(p(this.suggestions)&&this.selectedSuggestionGroup){this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}else{if(v(this.suggestions)){this.selectedSuggestion=this.suggestions[0]}}this.setAriaActiveDescendant(true)}selectLastSuggestion(){if(!this.suggestions){return}if(p(this.suggestions)&&this.selectedSuggestionGroup){this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}else{if(v(this.suggestions)){this.selectedSuggestion=this.suggestions[this.suggestions.length-1]}}this.setAriaActiveDescendant(true)}selectNextSuggestion(){var s;if(!this.suggestions){return}if(p(this.suggestions)){this.selectNextGroupedSuggestion()}else{const t=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=(s=this.suggestions[t+1])!==null&&s!==void 0?s:this.suggestions[0]}this.setAriaActiveDescendant(true)}selectNextGroupedSuggestion(){var s;if(!this.suggestions){return}if(this.selectedSuggestionGroup){const t=this.selectedSuggestion?this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion):-1;if(t===this.selectedSuggestionGroup.suggestions.length-1){const t=this.suggestionGroups.indexOf(this.selectedSuggestionGroup);this.selectedSuggestionGroup=(s=this.suggestionGroups[t+1])!==null&&s!==void 0?s:this.suggestionGroups[0];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}else{this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[t+1]}}else{this.selectedSuggestionGroup=this.suggestionGroups[0];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[0]}}selectPreviousSuggestion(){var s;if(!this.suggestions){return}if(p(this.suggestions)){this.selectPreviousGroupedSuggestion()}else{const t=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=(s=this.suggestions[t-1])!==null&&s!==void 0?s:this.suggestions[this.suggestions.length-1]}this.setAriaActiveDescendant(true)}selectPreviousGroupedSuggestion(){var s;if(!this.suggestions){return}if(this.selectedSuggestionGroup){const t=this.selectedSuggestion?this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion):-1;if(t===0){const t=this.suggestionGroups.indexOf(this.selectedSuggestionGroup);this.selectedSuggestionGroup=(s=this.suggestionGroups[t-1])!==null&&s!==void 0?s:this.suggestionGroups[this.suggestions.length-1];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}else{this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[t-1]}}else{this.selectedSuggestionGroup=this.suggestionGroups[this.suggestions.length-1];this.selectedSuggestion=this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length-1]}}get suggestionGroups(){return p(this.suggestions)?this.suggestions:[]}setAriaActiveDescendant(s=false){var t,i;if(this.selectedSuggestion){const e=this.selectedSuggestionGroup?this.listboxGroupedItemId(this.selectedSuggestionGroup,this.selectedSuggestion):this.listboxItemId(this.selectedSuggestion);(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",e);if(s){(i=document.getElementById(e))===null||i===void 0?void 0:i.scrollIntoView({block:"nearest"})}}}resetSelectedSuggestion(){var s;this.showLoading=!this.loadingDelayed;this.notFound=false;this.selectedSuggestion=undefined;this.selectedSuggestionGroup=undefined;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant","")}openSuggestions(s){var t,i,e,o;this.showSuggestions=(t=this.suggestions&&this.suggestions.length>0)!==null&&t!==void 0?t:false;this.notFound=(e=this.suggestions&&((i=this.suggestions)===null||i===void 0?void 0:i.length)===0)!==null&&e!==void 0?e:false;(o=this.input)===null||o===void 0?void 0:o.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString());if(this.showSuggestions&&s==="first"){this.selectFirstSuggestion()}else if(this.showSuggestions&&s==="last"){this.selectLastSuggestion()}}closeSuggestions(){var s;this.showSuggestions=false;this.notFound=false;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-expanded","false");this.selectFirstSuggestion()}pickSelectedValue(){var s;if(this.selectedSuggestion&&this.showSuggestions){this.dsoSelect.emit(this.selectedSuggestion)}else{this.dsoSearch.emit((s=this.input)===null||s===void 0?void 0:s.value)}this.closeSuggestions()}listboxItemId(s){if(!this.suggestions){return""}return`${this.inputId}-${v(this.suggestions)&&this.suggestions.indexOf(s)+1}`}listboxGroupedItemId(s,t){if(!this.suggestions){return""}return`${this.inputId}-${this.suggestionGroups.indexOf(s)+1}-${s.suggestions.indexOf(t)+1}`}getMarkedChunkedExtras(s,t){const i=s.reduce(((s,t,i)=>{var e;const o=Math.floor(i/2);if(!s[o]){s[o]=[]}(e=s[o])===null||e===void 0?void 0:e.push(t);return s}),[]);return i.map(((s,i)=>s.map(((s,e)=>this.handleMark(t,s,"extra",i*2+e)))))}getMarkedSuggestions(s){return{value:this.handleMark(s,s.value,"value"),type:s.type?this.handleMark(s,s.type,"type"):undefined,extras:s.extras?this.getMarkedChunkedExtras(s.extras,s):undefined}}getAutosuggestStatus(){if(this.notFound){return`"${this.inputValue}" is niet gevonden.`}let s=0;if(v(this.suggestions)){s=this.suggestions.length}else if(p(this.suggestions)){s=this.suggestions.reduce(((s,t)=>s+t.suggestions.length),0)}return`${s} resultaten gevonden.`}render(){this.listboxItems=[];const s=this.showSuggestions||this.notFound;const t=p(this.suggestions);const o=v(this.suggestions);if(s&&this.input){this.input.setAttribute("aria-controls",this.listboxId)}else if(this.input){this.input.removeAttribute("aria-controls")}return i(e,null,i("slot",{key:"75db3245d7e2a85722c0a408bfa8c2d117000a4a"}),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):s&&i(e,null,i("dso-scrollable",{class:"listbox-container",ref:s=>this.listboxContainer=s},i("div",{class:"listbox",role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:s=>this.listbox=s,tabindex:"0"},o&&this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>i(f,{id:this.listboxItemId(s),mouseEnter:()=>this.selectSuggestion(s),mouseLeave:()=>this.resetSelectedSuggestion(),click:()=>this.pickSelectedValue(),selected:(s===this.selectedSuggestion).toString(),suggestion:s,ref:s=>s&&this.listboxItems.push(s),markedSuggestion:this.getMarkedSuggestions(s)})))||t&&this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>{const t=a();return i("div",{role:"group",class:"group","aria-labelledby":t},i("div",{class:"group-label",role:"presentation",id:t,ref:s=>s&&this.listboxItems.push(s)},s.groupLabel),s.suggestions.map((t=>i(f,{id:this.listboxGroupedItemId(s,t),mouseEnter:()=>this.selectSuggestion(t,s),mouseLeave:()=>this.resetSelectedSuggestion(),click:()=>this.pickSelectedValue(),selected:(t===this.selectedSuggestion).toString(),suggestion:t,ref:s=>s&&this.listboxItems.push(s),markedSuggestion:this.getMarkedSuggestions(t)}))))}))||this.notFound&&i("div",{class:"option"},i("span",{class:"value"},this.notFoundLabel||this.showInputValueNotFound(this.text("notFound",{inputValue:this.inputValue})))))),i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.getAutosuggestStatus())))}get host(){return o(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};b.style=l;export{b as dso_autosuggest};
+//# sourceMappingURL=p-320629e5.entry.js.map

package/dist/dso-toolkit/p-320629e5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["escapeStringRegexp","string","TypeError","replace","translations","en","notFound","nl","autosuggestCss","maxSuggestionsViewable","listboxPaddingBlock","listboxBorderWidth","Option","id","mouseEnter","mouseLeave","click","selected","suggestion","ref","markedSuggestion","h","class","role","onMouseEnter","onMouseLeave","onClick","value","type","undefined","extras","map","markedChunk","extra","isGrouped","suggestions","length","every","groupLabel","isFlat","Autosuggest","constructor","hostRef","this","loading","loadingLabel","suggestOnFocus","showSuggestions","showLoading","listboxItems","listboxId","v4","inputId","labelId","resizeObserver","ResizeObserver","debounce","setListboxContainerMaxBlockSize","debouncedEmitValue","dsoChange","emit","debouncedShowLoading","inputValue","loadingDelayed","onInput","event","target","HTMLInputElement","match","onFocusIn","openSuggestions","text","i18n","host","onWindowResize","onScrollend","onKeyDown","defaultPrevented","key","selectNextSuggestion","selectPreviousSuggestion","closeSuggestions","pickSelectedValue","preventDefault","suggestionsWatcher","resetSelectedSuggestion","onDocumentClick","listbox","Node","contains","input","componentDidRender","connectedCallback","querySelector","labels","label","setAttribute","addEventListener","window","document","observe","disconnectedCallback","_a","removeEventListener","_b","_c","disconnect","listboxContainer","blockSizeViewableListItems","listboxContainerMaxBlockSize","total","Math","min","i","getBoundingClientRect","height","availableBlockSize","innerHeight","bottom","listboxMaxBlockSize","style","setProperty","showInputValueNotFound","processAutosuggestMarkItems","markTerms","split","filter","t","handleMark","extraIndex","mark","terms","suggestionValue","termRegex","RegExp","reduce","valuePart","push","test","slice","items","item","selectSuggestion","group","selectedSuggestion","selectedSuggestionGroup","setAriaActiveDescendant","selectFirstSuggestion","selectLastSuggestion","selectNextGroupedSuggestion","index","indexOf","indexInGroup","groupIndex","suggestionGroups","selectPreviousGroupedSuggestion","scroll","listboxGroupedItemId","listboxItemId","getElementById","scrollIntoView","block","_d","toString","dsoSelect","dsoSearch","suggestionGroup","getMarkedChunkedExtras","chunkedExtras","resultArray","chunkIndex","floor","chunk","c","getMarkedSuggestions","getAutosuggestStatus","totalSuggestions","count","render","showListbox","grouped","flat","removeAttribute","Fragment","element","tabindex","groupLabelId","notFoundLabel"],"sources":["../../node_modules/escape-string-regexp/index.js","src/components/autosuggest/autosuggest.i18n.ts","src/components/autosuggest/autosuggest.scss?tag=dso-autosuggest&encapsulation=scoped","src/components/autosuggest/autosuggest.tsx"],"sourcesContent":["export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-autosuggest\": {\r\n      notFound: \"{{inputValue}} was not found.\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-autosuggest\": {\r\n      notFound: \"{{inputValue}} is niet gevonden.\",\r\n    },\r\n  },\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/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"autosuggest.variables\" as core-autosuggest-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\n.listbox-container {\r\n  inset-inline: 0;\r\n  inset-block-start: 100%;\r\n  block-size: auto;\r\n  max-block-size: var(--_dso-autosuggest-max-block-size);\r\n  min-block-size: core-autosuggest-variables.$listbox-min-block-size;\r\n  overflow-y: auto;\r\n  position: absolute;\r\n  z-index: zindex.$autosuggest;\r\n}\r\n\r\n.listbox,\r\n.autosuggest-progress-box {\r\n  background-clip: padding-box;\r\n  background-color: core-autosuggest-variables.$background-color;\r\n  border: core-autosuggest-variables.$listbox-border-width solid core-autosuggest-variables.$border-color;\r\n  border-radius: scaffolding.$border-radius-base;\r\n  box-shadow: core-autosuggest-variables.$box-shadow;\r\n  list-style-type: none;\r\n  margin-block: 0;\r\n}\r\n\r\n.autosuggest-progress-box {\r\n  padding-block: units.$u1 * 1.5;\r\n  padding-inline: units.$u1;\r\n}\r\n\r\n.listbox {\r\n  padding-block: core-autosuggest-variables.$listbox-padding-block;\r\n  padding-inline: 0;\r\n\r\n  .group:not(:first-child) {\r\n    .group-label {\r\n      border-block-start: 1px solid colors.$grijs-30;\r\n      padding-block-start: units.$padding-base-inline;\r\n    }\r\n  }\r\n\r\n  .group-label {\r\n    color: colors.$bosgroen;\r\n    font-weight: 700;\r\n    padding-block: core-autosuggest-variables.$list-item-padding-block;\r\n    margin-inline: units.$u2;\r\n  }\r\n\r\n  .option {\r\n    padding-block: core-autosuggest-variables.$list-item-padding-block;\r\n    padding-inline: units.$u2;\r\n\r\n    .suggestion-row {\r\n      display: flex;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    &:active {\r\n      background-color: colors.$bosgroen;\r\n\r\n      &,\r\n      .type,\r\n      .extra {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.option[aria-selected=\"true\"] {\r\n  cursor: pointer;\r\n  background-color: colors.$grasgroen-20;\r\n}\r\n\r\nmark {\r\n  font-weight: 700;\r\n  background-color: inherit;\r\n  color: inherit;\r\n  padding: 0;\r\n}\r\n\r\n.type,\r\n.extra {\r\n  color: colors.$grijs-60;\r\n}\r\n\r\n.type {\r\n  text-align: end;\r\n}\r\n\r\n.extra {\r\n  font-size: typography.$root-font-size-small;\r\n  line-height: typography.$root-font-size-small * typography.$line-height-base;\r\n\r\n  &:not(:first-child) {\r\n    text-align: end;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  VNode,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport escapeStringRegexp from \"escape-string-regexp\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./autosuggest.i18n\";\r\nimport { AutosuggestMarkFunction, AutosuggestMarkItem, Suggestion, SuggestionGroup } from \"./autosuggest.interfaces\";\r\n\r\ninterface MarkedSuggestion {\r\n  value: (VNode | string)[];\r\n  type?: (VNode | string)[];\r\n  extras?: (VNode | string)[][][];\r\n}\r\n\r\nconst maxSuggestionsViewable = 10;\r\nconst listboxPaddingBlock = 8;\r\nconst listboxBorderWidth = 1;\r\n\r\nconst Option: FunctionalComponent<{\r\n  id: string;\r\n  mouseEnter: () => void;\r\n  mouseLeave: () => void;\r\n  click: () => void;\r\n  selected: string;\r\n  suggestion: Suggestion;\r\n  markedSuggestion: MarkedSuggestion;\r\n  ref: (element: HTMLDivElement | undefined) => void;\r\n}> = ({ id, mouseEnter, mouseLeave, click, selected, suggestion, ref, markedSuggestion }) => (\r\n  <div\r\n    class=\"option\"\r\n    role=\"option\"\r\n    id={id}\r\n    onMouseEnter={mouseEnter}\r\n    onMouseLeave={mouseLeave}\r\n    onClick={click}\r\n    aria-selected={selected}\r\n    aria-label={suggestion.value}\r\n    ref={ref}\r\n  >\r\n    <div class=\"suggestion-row\">\r\n      <span class=\"value\">{markedSuggestion.value}</span>\r\n      {markedSuggestion.type ? <span class=\"type\">{markedSuggestion.type}</span> : undefined}\r\n    </div>\r\n    {markedSuggestion.extras &&\r\n      markedSuggestion.extras.map((markedChunk) => (\r\n        <div class=\"suggestion-row\">\r\n          {markedChunk.map((extra) => (\r\n            <span class=\"extra\">{extra}</span>\r\n          ))}\r\n        </div>\r\n      ))}\r\n  </div>\r\n);\r\n\r\nfunction isGrouped(suggestions: Suggestion[] | SuggestionGroup[] | null): suggestions is SuggestionGroup[] {\r\n  return (\r\n    !!suggestions &&\r\n    suggestions.length > 0 &&\r\n    suggestions.every(\r\n      (suggestion) =>\r\n        suggestion !== undefined &&\r\n        \"groupLabel\" in suggestion &&\r\n        suggestion.groupLabel !== undefined &&\r\n        \"suggestions\" in suggestion &&\r\n        suggestion.suggestions.length > 0,\r\n    )\r\n  );\r\n}\r\n\r\nfunction isFlat(suggestions: Suggestion[] | SuggestionGroup[] | null): suggestions is Suggestion[] {\r\n  return (\r\n    !!suggestions &&\r\n    suggestions.length > 0 &&\r\n    suggestions.every(\r\n      (suggestion) => suggestion !== undefined && \"value\" in suggestion && suggestion.value !== undefined,\r\n    )\r\n  );\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-autosuggest\",\r\n  styleUrl: \"autosuggest.scss\",\r\n  scoped: true,\r\n})\r\nexport class Autosuggest {\r\n  /**\r\n   * The suggestions for the value of the slotted input element.\r\n   *\r\n   * This can be an array of type Suggestion or an Array of type SuggestionGroup.\r\n   *\r\n   * A suggestionGroup must have a `groupLabel` and `suggestions`.\r\n   *\r\n   * A suggestion must have a `value` and can have a `type`, an `item` or `extras`.\r\n   *\r\n   * The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to\r\n   * create the suggestion. `extras` is an array of additional strings to further specify the suggestion.\r\n   *\r\n   * The value should be null when no suggestions have been fetched.\r\n   */\r\n  @Prop()\r\n  readonly suggestions: Suggestion[] | SuggestionGroup[] | null = null;\r\n\r\n  /**\r\n   * Shows progress indicator when fetching results.\r\n   */\r\n  @Prop()\r\n  loading = false;\r\n\r\n  /**\r\n   * To override progress indicator's default loading label.\r\n   */\r\n  @Prop()\r\n  loadingLabel?: string = \"Een moment geduld.\";\r\n\r\n  /**\r\n   * To delay progress indicator showing (in ms).\r\n   */\r\n  @Prop()\r\n  loadingDelayed?: number;\r\n\r\n  /**\r\n   * To show text when no results are found.\r\n   */\r\n  @Prop()\r\n  notFoundLabel?: string;\r\n\r\n  /**\r\n   * Whether the previous suggestions will be presented when the input gets focus again.\r\n   */\r\n  @Prop()\r\n  suggestOnFocus = false;\r\n\r\n  /**\r\n   * A function provided by the consumer of the autosuggest component, that returns an array of `AutosuggestMarkItem`s\r\n   */\r\n  @Prop()\r\n  mark?: AutosuggestMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a suggestion is selected.\r\n   * The `detail` property of the `CustomEvent` will contain the selected suggestion.\r\n   */\r\n  @Event()\r\n  dsoSelect!: EventEmitter<Suggestion>;\r\n\r\n  /**\r\n   * This is emitted debounced for every change for the slotted input type=text element.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<string>;\r\n\r\n  /**\r\n   * Emitted when enter is pressed.\r\n   * The `detail` property of the `CustomEvent` will contain the input text.\r\n   */\r\n  @Event()\r\n  dsoSearch!: EventEmitter<string>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAutosuggestElement;\r\n\r\n  @State()\r\n  showSuggestions = false;\r\n\r\n  @State()\r\n  selectedSuggestion: Suggestion | undefined;\r\n\r\n  @State()\r\n  selectedSuggestionGroup: SuggestionGroup | undefined;\r\n\r\n  @State()\r\n  notFound = false;\r\n\r\n  @State()\r\n  showLoading = false;\r\n\r\n  @Watch(\"suggestions\")\r\n  suggestionsWatcher() {\r\n    this.resetSelectedSuggestion();\r\n\r\n    if ((!this.showSuggestions || !this.notFound) && this.inputValue) {\r\n      this.openSuggestions();\r\n    } else if ((this.showSuggestions || this.notFound) && !this.inputValue) {\r\n      this.closeSuggestions();\r\n    }\r\n  }\r\n\r\n  private input?: HTMLInputElement;\r\n\r\n  private listboxContainer: HTMLDsoScrollableElement | undefined;\r\n\r\n  private listbox: HTMLDivElement | undefined;\r\n\r\n  // ListboxItems are used for the calculation of the listboxContainerMaxBlockSize\r\n  private listboxItems: HTMLDivElement[] = [];\r\n\r\n  private listboxId: string = v4();\r\n\r\n  private inputId: string = v4();\r\n\r\n  private labelId: string = v4();\r\n\r\n  private resizeObserver = new ResizeObserver(debounce(() => this.setListboxContainerMaxBlockSize(), 150));\r\n\r\n  private debouncedEmitValue = debounce((value: string) => {\r\n    this.dsoChange.emit(value);\r\n    this.debouncedShowLoading();\r\n  }, 200);\r\n\r\n  private debouncedShowLoading = debounce(() => {\r\n    if (this.inputValue) {\r\n      this.showLoading = true;\r\n    }\r\n  }, this.loadingDelayed);\r\n\r\n  private inputValue = \"\";\r\n\r\n  private onInput = (event: Event) => {\r\n    if (!(event.target instanceof HTMLInputElement)) {\r\n      return;\r\n      // throw new Error(\"event.target is not instanceof HTMLInputElement\"); #2293\r\n    }\r\n\r\n    this.showLoading = !this.loadingDelayed;\r\n    this.inputValue = event.target.value;\r\n    this.debouncedEmitValue(event.target.value.match(/(\\S+)/g) ? event.target.value : \"\");\r\n  };\r\n\r\n  private onFocusIn = () => {\r\n    if (this.suggestOnFocus) {\r\n      this.openSuggestions();\r\n    }\r\n  };\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  onDocumentClick(event: MouseEvent) {\r\n    if (\r\n      (this.showSuggestions || this.notFound) &&\r\n      this.listbox &&\r\n      event.target instanceof Node &&\r\n      !this.listbox.contains(event.target) &&\r\n      this.input !== event.target\r\n    ) {\r\n      this.closeSuggestions();\r\n    }\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.setListboxContainerMaxBlockSize();\r\n  }\r\n\r\n  connectedCallback() {\r\n    const input = this.host.querySelector('input[type=\"text\"]');\r\n    if (!(input instanceof HTMLInputElement)) {\r\n      return;\r\n      // throw new ReferenceError(\"Mandatory text input not found\"); #2293\r\n    }\r\n\r\n    this.input = input;\r\n    if (input.id) {\r\n      this.inputId = input.id;\r\n    } else {\r\n      input.id = this.inputId;\r\n    }\r\n\r\n    if (!this.input.labels || this.input.labels.length < 1) {\r\n      return;\r\n      // throw new ReferenceError(\"Mandatory label for text input not found\"); #2293\r\n    }\r\n\r\n    const label = this.input.labels[0];\r\n    if (label?.id) {\r\n      this.labelId = label.id;\r\n    } else if (label) {\r\n      label.id = this.labelId;\r\n    }\r\n\r\n    this.input.setAttribute(\"role\", \"combobox\");\r\n    this.input.setAttribute(\"aria-haspopup\", \"listbox\");\r\n    this.input.setAttribute(\"aria-expanded\", \"false\");\r\n    this.input.setAttribute(\"autocomplete\", \"off\");\r\n    this.input.setAttribute(\"aria-autocomplete\", \"list\");\r\n    this.input.setAttribute(\"aria-activedescendant\", \"\");\r\n    this.input.addEventListener(\"input\", this.onInput);\r\n    this.input.addEventListener(\"keydown\", this.onKeyDown);\r\n    this.input.addEventListener(\"focusin\", this.onFocusIn);\r\n\r\n    window.addEventListener(\"resize\", this.onWindowResize);\r\n\r\n    document.addEventListener(\"scrollend\", this.onScrollend);\r\n\r\n    this.resizeObserver.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.input?.removeEventListener(\"input\", this.onInput);\r\n    this.input?.removeEventListener(\"keydown\", this.onKeyDown);\r\n    this.input?.removeEventListener(\"focusin\", this.onFocusIn);\r\n\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n\r\n    document.removeEventListener(\"scrollend\", this.onScrollend);\r\n\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  private onWindowResize = debounce(() => this.setListboxContainerMaxBlockSize(), 150);\r\n\r\n  private onScrollend = () => this.setListboxContainerMaxBlockSize();\r\n\r\n  private setListboxContainerMaxBlockSize(): void {\r\n    if (!this.listboxContainer || !this.showSuggestions) {\r\n      return;\r\n    }\r\n\r\n    if (this.showSuggestions) {\r\n      let blockSizeViewableListItems = 0;\r\n      let listboxContainerMaxBlockSize = 0;\r\n\r\n      // The total number of list items to reserve vertical space for.\r\n      const total = this.listboxItems.length ? Math.min(this.listboxItems.length, maxSuggestionsViewable) : 0;\r\n      for (let i = 0; i < total; i++) {\r\n        blockSizeViewableListItems =\r\n          blockSizeViewableListItems + (this.listboxItems[i]?.getBoundingClientRect().height || 0);\r\n      }\r\n\r\n      const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;\r\n      const listboxMaxBlockSize = blockSizeViewableListItems + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;\r\n\r\n      if (availableBlockSize < listboxMaxBlockSize || availableBlockSize <= blockSizeViewableListItems) {\r\n        listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;\r\n      } else {\r\n        listboxContainerMaxBlockSize = listboxMaxBlockSize;\r\n      }\r\n\r\n      this.listboxContainer.style.setProperty(\"--_dso-autosuggest-max-block-size\", `${listboxContainerMaxBlockSize}px`);\r\n    }\r\n  }\r\n\r\n  private showInputValueNotFound(text?: string) {\r\n    return this.processAutosuggestMarkItems(this.markTerms(this.input?.value.split(\" \").filter((t) => t) ?? [], text));\r\n  }\r\n\r\n  private handleMark(\r\n    suggestion: Suggestion,\r\n    text: string,\r\n    type?: \"value\" | \"type\" | \"extra\",\r\n    extraIndex?: number,\r\n  ): (VNode | string)[] {\r\n    if (this.mark && type) {\r\n      return this.processAutosuggestMarkItems(this.mark(suggestion, text, type, extraIndex));\r\n    }\r\n    return this.processAutosuggestMarkItems(this.markTerms(this.input?.value.split(\" \").filter((t) => t) ?? [], text));\r\n  }\r\n\r\n  private markTerms(terms: string[], suggestionValue?: string): AutosuggestMarkItem[] {\r\n    if (!suggestionValue || !terms || terms.length === 0 || terms[0] === undefined) {\r\n      return [\"\"];\r\n    }\r\n\r\n    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, \"gi\");\r\n\r\n    return suggestionValue.split(termRegex).reduce((total: AutosuggestMarkItem[], valuePart: string) => {\r\n      if (!valuePart) {\r\n        total.push(valuePart);\r\n      } else if (termRegex.test(valuePart)) {\r\n        total.push({ mark: valuePart });\r\n      } else if (terms.length === 1) {\r\n        total.push(valuePart);\r\n      } else {\r\n        total.push(...this.markTerms(terms.slice(1), valuePart));\r\n      }\r\n\r\n      return total;\r\n    }, []);\r\n  }\r\n\r\n  private processAutosuggestMarkItems(items: AutosuggestMarkItem[]): (VNode | string)[] {\r\n    if (items.length === 0) {\r\n      return [\"\"];\r\n    }\r\n\r\n    return items.map((item) => {\r\n      if (typeof item === \"object\") {\r\n        return <mark>{item.mark}</mark>;\r\n      }\r\n      return item;\r\n    });\r\n  }\r\n\r\n  private selectSuggestion(suggestion: Suggestion, group?: SuggestionGroup) {\r\n    this.selectedSuggestion = suggestion;\r\n    this.selectedSuggestionGroup = group;\r\n\r\n    this.setAriaActiveDescendant();\r\n  }\r\n\r\n  private selectFirstSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    if (isGrouped(this.suggestions) && this.selectedSuggestionGroup) {\r\n      this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[0];\r\n    } else {\r\n      if (isFlat(this.suggestions)) {\r\n        this.selectedSuggestion = this.suggestions[0];\r\n      }\r\n    }\r\n\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private selectLastSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    if (isGrouped(this.suggestions) && this.selectedSuggestionGroup) {\r\n      this.selectedSuggestion =\r\n        this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length - 1];\r\n    } else {\r\n      if (isFlat(this.suggestions)) {\r\n        this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];\r\n      }\r\n    }\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private selectNextSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    if (isGrouped(this.suggestions)) {\r\n      this.selectNextGroupedSuggestion();\r\n    } else {\r\n      const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;\r\n\r\n      this.selectedSuggestion = this.suggestions[index + 1] ?? this.suggestions[0];\r\n    }\r\n\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private selectNextGroupedSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    if (this.selectedSuggestionGroup) {\r\n      const indexInGroup = this.selectedSuggestion\r\n        ? this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion)\r\n        : -1;\r\n\r\n      if (indexInGroup === this.selectedSuggestionGroup.suggestions.length - 1) {\r\n        // Move to first suggestion in next or first group\r\n        const groupIndex = this.suggestionGroups.indexOf(this.selectedSuggestionGroup);\r\n        this.selectedSuggestionGroup = this.suggestionGroups[groupIndex + 1] ?? this.suggestionGroups[0];\r\n        this.selectedSuggestion = this.selectedSuggestionGroup!.suggestions[0];\r\n      } else {\r\n        // Within this group\r\n        this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[indexInGroup + 1];\r\n      }\r\n    } else {\r\n      this.selectedSuggestionGroup = this.suggestionGroups[0];\r\n      this.selectedSuggestion = this.selectedSuggestionGroup!.suggestions[0];\r\n    }\r\n  }\r\n\r\n  private selectPreviousSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    if (isGrouped(this.suggestions)) {\r\n      this.selectPreviousGroupedSuggestion();\r\n    } else {\r\n      const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;\r\n\r\n      this.selectedSuggestion = this.suggestions[index - 1] ?? this.suggestions[this.suggestions.length - 1];\r\n    }\r\n\r\n    this.setAriaActiveDescendant(true);\r\n  }\r\n\r\n  private selectPreviousGroupedSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    if (this.selectedSuggestionGroup) {\r\n      const indexInGroup = this.selectedSuggestion\r\n        ? this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion)\r\n        : -1;\r\n\r\n      if (indexInGroup === 0) {\r\n        // Move to last suggestion in previous or last group\r\n        const groupIndex = this.suggestionGroups.indexOf(this.selectedSuggestionGroup);\r\n\r\n        this.selectedSuggestionGroup =\r\n          this.suggestionGroups[groupIndex - 1] ?? this.suggestionGroups[this.suggestions.length - 1];\r\n        this.selectedSuggestion =\r\n          this.selectedSuggestionGroup!.suggestions[this.selectedSuggestionGroup!.suggestions.length - 1];\r\n      } else {\r\n        // Within this group\r\n        this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[indexInGroup - 1];\r\n      }\r\n    } else {\r\n      this.selectedSuggestionGroup = this.suggestionGroups[this.suggestions.length - 1];\r\n      this.selectedSuggestion =\r\n        this.selectedSuggestionGroup!.suggestions[this.selectedSuggestionGroup!.suggestions.length - 1];\r\n    }\r\n  }\r\n\r\n  private get suggestionGroups(): SuggestionGroup[] {\r\n    return isGrouped(this.suggestions) ? this.suggestions : [];\r\n  }\r\n\r\n  private setAriaActiveDescendant(scroll = false): void {\r\n    if (this.selectedSuggestion) {\r\n      const id = this.selectedSuggestionGroup\r\n        ? this.listboxGroupedItemId(this.selectedSuggestionGroup, this.selectedSuggestion)\r\n        : this.listboxItemId(this.selectedSuggestion);\r\n      this.input?.setAttribute(\"aria-activedescendant\", id);\r\n      if (scroll) {\r\n        document.getElementById(id)?.scrollIntoView({ block: \"nearest\" });\r\n      }\r\n    }\r\n  }\r\n\r\n  private resetSelectedSuggestion() {\r\n    this.showLoading = !this.loadingDelayed;\r\n    this.notFound = false;\r\n    this.selectedSuggestion = undefined;\r\n    this.selectedSuggestionGroup = undefined;\r\n    this.input?.setAttribute(\"aria-activedescendant\", \"\");\r\n  }\r\n\r\n  private openSuggestions(selectSuggestion?: \"first\" | \"last\") {\r\n    this.showSuggestions = (this.suggestions && this.suggestions.length > 0) ?? false;\r\n    this.notFound = (this.suggestions && this.suggestions?.length === 0) ?? false;\r\n    this.input?.setAttribute(\"aria-expanded\", (this.showSuggestions || this.notFound).toString());\r\n\r\n    if (this.showSuggestions && selectSuggestion === \"first\") {\r\n      this.selectFirstSuggestion();\r\n    } else if (this.showSuggestions && selectSuggestion === \"last\") {\r\n      this.selectLastSuggestion();\r\n    }\r\n  }\r\n\r\n  private closeSuggestions() {\r\n    this.showSuggestions = false;\r\n    this.notFound = false;\r\n    this.input?.setAttribute(\"aria-expanded\", \"false\");\r\n    this.selectFirstSuggestion();\r\n  }\r\n\r\n  private pickSelectedValue() {\r\n    if (this.selectedSuggestion && this.showSuggestions) {\r\n      this.dsoSelect.emit(this.selectedSuggestion);\r\n    } else {\r\n      this.dsoSearch.emit(this.input?.value);\r\n    }\r\n\r\n    this.closeSuggestions();\r\n  }\r\n\r\n  private onKeyDown = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || this.loading) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        if (!this.showSuggestions) {\r\n          this.openSuggestions(\"first\");\r\n        } else {\r\n          this.selectNextSuggestion();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        if (!this.showSuggestions) {\r\n          this.openSuggestions(\"last\");\r\n        } else {\r\n          this.selectPreviousSuggestion();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Tab\":\r\n        this.closeSuggestions();\r\n        return;\r\n\r\n      case \"Escape\":\r\n        this.closeSuggestions();\r\n        break;\r\n\r\n      case \"Enter\":\r\n        this.pickSelectedValue();\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private listboxItemId(suggestion: Suggestion): string {\r\n    if (!this.suggestions) {\r\n      return \"\";\r\n    }\r\n    return `${this.inputId}-${isFlat(this.suggestions) && this.suggestions.indexOf(suggestion) + 1}`;\r\n  }\r\n\r\n  private listboxGroupedItemId(suggestionGroup: SuggestionGroup, suggestion: Suggestion): string {\r\n    if (!this.suggestions) {\r\n      return \"\";\r\n    }\r\n\r\n    return `${this.inputId}-${this.suggestionGroups.indexOf(suggestionGroup) + 1}-${suggestionGroup.suggestions.indexOf(suggestion) + 1}`;\r\n  }\r\n\r\n  private getMarkedChunkedExtras(extras: string[], suggestion: Suggestion): (string | VNode)[][][] {\r\n    const chunkedExtras = extras.reduce((resultArray: string[][], extra, index) => {\r\n      const chunkIndex = Math.floor(index / 2);\r\n\r\n      if (!resultArray[chunkIndex]) {\r\n        resultArray[chunkIndex] = [];\r\n      }\r\n      resultArray[chunkIndex]?.push(extra);\r\n      return resultArray;\r\n    }, []);\r\n\r\n    return chunkedExtras.map((chunk, index) =>\r\n      chunk.map((c, i) => this.handleMark(suggestion, c, \"extra\", index * 2 + i)),\r\n    );\r\n  }\r\n\r\n  private getMarkedSuggestions(suggestion: Suggestion): MarkedSuggestion {\r\n    return {\r\n      value: this.handleMark(suggestion, suggestion.value, \"value\"),\r\n      type: suggestion.type ? this.handleMark(suggestion, suggestion.type, \"type\") : undefined,\r\n      extras: suggestion.extras ? this.getMarkedChunkedExtras(suggestion.extras, suggestion) : undefined,\r\n    };\r\n  }\r\n\r\n  private getAutosuggestStatus() {\r\n    if (this.notFound) {\r\n      return `\"${this.inputValue}\" is niet gevonden.`;\r\n    }\r\n\r\n    let totalSuggestions = 0;\r\n\r\n    if (isFlat(this.suggestions)) {\r\n      totalSuggestions = this.suggestions.length;\r\n    } else if (isGrouped(this.suggestions)) {\r\n      totalSuggestions = this.suggestions.reduce((count, group) => count + group.suggestions.length, 0);\r\n    }\r\n\r\n    return `${totalSuggestions} resultaten gevonden.`;\r\n  }\r\n\r\n  render() {\r\n    this.listboxItems = [];\r\n\r\n    const showListbox = this.showSuggestions || this.notFound;\r\n\r\n    const grouped = isGrouped(this.suggestions);\r\n    const flat = isFlat(this.suggestions);\r\n\r\n    if (showListbox && this.input) {\r\n      this.input.setAttribute(\"aria-controls\", this.listboxId);\r\n    } else if (this.input) {\r\n      this.input.removeAttribute(\"aria-controls\");\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <slot />\r\n        {this.loading && this.showLoading ? (\r\n          <div class=\"autosuggest-progress-box\">\r\n            <dso-progress-indicator label={this.loadingLabel}></dso-progress-indicator>\r\n          </div>\r\n        ) : (\r\n          showListbox && (\r\n            <>\r\n              <dso-scrollable class=\"listbox-container\" ref={(element) => (this.listboxContainer = element)}>\r\n                <div\r\n                  class=\"listbox\"\r\n                  role=\"listbox\"\r\n                  id={this.listboxId}\r\n                  aria-labelledby={this.labelId}\r\n                  ref={(element) => (this.listbox = element)}\r\n                  tabindex=\"0\"\r\n                >\r\n                  {(flat &&\r\n                    this.showSuggestions &&\r\n                    this.suggestions &&\r\n                    this.suggestions.map((suggestion) => (\r\n                      <Option\r\n                        id={this.listboxItemId(suggestion)}\r\n                        mouseEnter={() => this.selectSuggestion(suggestion)}\r\n                        mouseLeave={() => this.resetSelectedSuggestion()}\r\n                        click={() => this.pickSelectedValue()}\r\n                        selected={(suggestion === this.selectedSuggestion).toString()}\r\n                        suggestion={suggestion}\r\n                        ref={(element) => element && this.listboxItems.push(element)}\r\n                        markedSuggestion={this.getMarkedSuggestions(suggestion)}\r\n                      />\r\n                    ))) ||\r\n                    (grouped &&\r\n                      this.showSuggestions &&\r\n                      this.suggestions &&\r\n                      this.suggestions.map((suggestionGroup) => {\r\n                        const groupLabelId = v4();\r\n                        return (\r\n                          <div role=\"group\" class=\"group\" aria-labelledby={groupLabelId}>\r\n                            <div\r\n                              class=\"group-label\"\r\n                              role=\"presentation\"\r\n                              id={groupLabelId}\r\n                              ref={(element) => element && this.listboxItems.push(element)}\r\n                            >\r\n                              {suggestionGroup.groupLabel}\r\n                            </div>\r\n                            {suggestionGroup.suggestions.map((suggestion) => (\r\n                              <Option\r\n                                id={this.listboxGroupedItemId(suggestionGroup, suggestion)}\r\n                                mouseEnter={() => this.selectSuggestion(suggestion, suggestionGroup)}\r\n                                mouseLeave={() => this.resetSelectedSuggestion()}\r\n                                click={() => this.pickSelectedValue()}\r\n                                selected={(suggestion === this.selectedSuggestion).toString()}\r\n                                suggestion={suggestion}\r\n                                ref={(element) => element && this.listboxItems.push(element)}\r\n                                markedSuggestion={this.getMarkedSuggestions(suggestion)}\r\n                              />\r\n                            ))}\r\n                          </div>\r\n                        );\r\n                      })) ||\r\n                    (this.notFound && (\r\n                      <div class=\"option\">\r\n                        <span class=\"value\">\r\n                          {this.notFoundLabel ||\r\n                            this.showInputValueNotFound(this.text(\"notFound\", { inputValue: this.inputValue }))}\r\n                        </span>\r\n                      </div>\r\n                    ))}\r\n                </div>\r\n              </dso-scrollable>\r\n              <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n                {this.getAutosuggestStatus()}\r\n              </div>\r\n            </>\r\n          )\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oMAAe,SAASA,EAAmBC,GAC1C,UAAWA,IAAW,SAAU,CAC/B,MAAM,IAAIC,UAAU,oBACtB,CAIC,OAAOD,EACLE,QAAQ,sBAAuB,QAC/BA,QAAQ,KAAM,QACjB,CCRO,MAAMC,EAAyB,CACpCC,GAAI,CACF,kBAAmB,CACjBC,SAAU,kCAGdC,GAAI,CACF,kBAAmB,CACjBD,SAAU,sCCVhB,MAAME,EAAiB,i4DC6BvB,MAAMC,EAAyB,GAC/B,MAAMC,EAAsB,EAC5B,MAAMC,EAAqB,EAE3B,MAAMC,EASD,EAAGC,KAAIC,aAAYC,aAAYC,QAAOC,WAAUC,aAAYC,MAAKC,sBACpEC,EACE,OAAAC,MAAM,SACNC,KAAK,SACLV,GAAIA,EACJW,aAAcV,EACdW,aAAcV,EACdW,QAASV,EAAK,gBACCC,EAAQ,aACXC,EAAWS,MACvBR,IAAKA,GAELE,EAAK,OAAAC,MAAM,kBACTD,EAAA,QAAMC,MAAM,SAASF,EAAiBO,OACrCP,EAAiBQ,KAAOP,EAAA,QAAMC,MAAM,QAAQF,EAAiBQ,MAAeC,WAE9ET,EAAiBU,QAChBV,EAAiBU,OAAOC,KAAKC,GAC3BX,EAAA,OAAKC,MAAM,kBACRU,EAAYD,KAAKE,GAChBZ,EAAM,QAAAC,MAAM,SAASW,SAOjC,SAASC,EAAUC,GACjB,QACIA,GACFA,EAAYC,OAAS,GACrBD,EAAYE,OACTnB,GACCA,IAAeW,WACf,eAAgBX,GAChBA,EAAWoB,aAAeT,WAC1B,gBAAiBX,GACjBA,EAAWiB,YAAYC,OAAS,GAGxC,CAEA,SAASG,EAAOJ,GACd,QACIA,GACFA,EAAYC,OAAS,GACrBD,EAAYE,OACTnB,GAAeA,IAAeW,WAAa,UAAWX,GAAcA,EAAWS,QAAUE,WAGhG,C,MAOaW,EAAW,MALxB,WAAAC,CAAAC,G,yHAqBWC,KAAWR,YAA4C,KAMhEQ,KAAOC,QAAG,MAMVD,KAAYE,aAAY,qBAkBxBF,KAAcG,eAAG,MAgCjBH,KAAeI,gBAAG,MASlBJ,KAAQrC,SAAG,MAGXqC,KAAWK,YAAG,MAoBNL,KAAYM,aAAqB,GAEjCN,KAASO,UAAWC,IAEpBR,KAAOS,QAAWD,IAElBR,KAAOU,QAAWF,IAElBR,KAAAW,eAAiB,IAAIC,eAAeC,GAAS,IAAMb,KAAKc,mCAAmC,MAE3Fd,KAAAe,mBAAqBF,GAAU7B,IACrCgB,KAAKgB,UAAUC,KAAKjC,GACpBgB,KAAKkB,sBAAsB,GAC1B,KAEKlB,KAAAkB,qBAAuBL,GAAS,KACtC,GAAIb,KAAKmB,WAAY,CACnBnB,KAAKK,YAAc,I,IAEpBL,KAAKoB,gBAEApB,KAAUmB,WAAG,GAEbnB,KAAAqB,QAAWC,IACjB,KAAMA,EAAMC,kBAAkBC,kBAAmB,CAC/C,M,CAIFxB,KAAKK,aAAeL,KAAKoB,eACzBpB,KAAKmB,WAAaG,EAAMC,OAAOvC,MAC/BgB,KAAKe,mBAAmBO,EAAMC,OAAOvC,MAAMyC,MAAM,UAAYH,EAAMC,OAAOvC,MAAQ,GAAG,EAG/EgB,KAAS0B,UAAG,KAClB,GAAI1B,KAAKG,eAAgB,CACvBH,KAAK2B,iB,GAiBD3B,KAAA4B,KAAOC,GAAK,IAAM7B,KAAK8B,MAAMrE,GA6D7BuC,KAAA+B,eAAiBlB,GAAS,IAAMb,KAAKc,mCAAmC,KAExEd,KAAWgC,YAAG,IAAMhC,KAAKc,kCAoQzBd,KAAAiC,UAAaX,IACnB,GAAIA,EAAMY,kBAAoBlC,KAAKC,QAAS,CAC1C,M,CAGF,OAAQqB,EAAMa,KACZ,IAAK,YACH,IAAKnC,KAAKI,gBAAiB,CACzBJ,KAAK2B,gBAAgB,Q,KAChB,CACL3B,KAAKoC,sB,CAGP,MAEF,IAAK,UACH,IAAKpC,KAAKI,gBAAiB,CACzBJ,KAAK2B,gBAAgB,O,KAChB,CACL3B,KAAKqC,0B,CAGP,MAEF,IAAK,MACHrC,KAAKsC,mBACL,OAEF,IAAK,SACHtC,KAAKsC,mBACL,MAEF,IAAK,QACHtC,KAAKuC,oBACL,MAEF,QACE,OAGJjB,EAAMkB,gBAAgB,CA2JzB,CA5kBC,kBAAAC,GACEzC,KAAK0C,0BAEL,KAAM1C,KAAKI,kBAAoBJ,KAAKrC,WAAaqC,KAAKmB,WAAY,CAChEnB,KAAK2B,iB,MACA,IAAK3B,KAAKI,iBAAmBJ,KAAKrC,YAAcqC,KAAKmB,WAAY,CACtEnB,KAAKsC,kB,EAoDT,eAAAK,CAAgBrB,GACd,IACGtB,KAAKI,iBAAmBJ,KAAKrC,WAC9BqC,KAAK4C,SACLtB,EAAMC,kBAAkBsB,OACvB7C,KAAK4C,QAAQE,SAASxB,EAAMC,SAC7BvB,KAAK+C,QAAUzB,EAAMC,OACrB,CACAvB,KAAKsC,kB,EAMT,kBAAAU,GACEhD,KAAKc,iC,CAGP,iBAAAmC,GACE,MAAMF,EAAQ/C,KAAK8B,KAAKoB,cAAc,sBACtC,KAAMH,aAAiBvB,kBAAmB,CACxC,M,CAIFxB,KAAK+C,MAAQA,EACb,GAAIA,EAAM7E,GAAI,CACZ8B,KAAKS,QAAUsC,EAAM7E,E,KAChB,CACL6E,EAAM7E,GAAK8B,KAAKS,O,CAGlB,IAAKT,KAAK+C,MAAMI,QAAUnD,KAAK+C,MAAMI,OAAO1D,OAAS,EAAG,CACtD,M,CAIF,MAAM2D,EAAQpD,KAAK+C,MAAMI,OAAO,GAChC,GAAIC,IAAK,MAALA,SAAK,SAALA,EAAOlF,GAAI,CACb8B,KAAKU,QAAU0C,EAAMlF,E,MAChB,GAAIkF,EAAO,CAChBA,EAAMlF,GAAK8B,KAAKU,O,CAGlBV,KAAK+C,MAAMM,aAAa,OAAQ,YAChCrD,KAAK+C,MAAMM,aAAa,gBAAiB,WACzCrD,KAAK+C,MAAMM,aAAa,gBAAiB,SACzCrD,KAAK+C,MAAMM,aAAa,eAAgB,OACxCrD,KAAK+C,MAAMM,aAAa,oBAAqB,QAC7CrD,KAAK+C,MAAMM,aAAa,wBAAyB,IACjDrD,KAAK+C,MAAMO,iBAAiB,QAAStD,KAAKqB,SAC1CrB,KAAK+C,MAAMO,iBAAiB,UAAWtD,KAAKiC,WAC5CjC,KAAK+C,MAAMO,iBAAiB,UAAWtD,KAAK0B,WAE5C6B,OAAOD,iBAAiB,SAAUtD,KAAK+B,gBAEvCyB,SAASF,iBAAiB,YAAatD,KAAKgC,aAE5ChC,KAAKW,eAAe8C,QAAQzD,KAAK8B,K,CAGnC,oBAAA4B,G,WACEC,EAAA3D,KAAK+C,SAAK,MAAAY,SAAA,SAAAA,EAAEC,oBAAoB,QAAS5D,KAAKqB,UAC9CwC,EAAA7D,KAAK+C,SAAK,MAAAc,SAAA,SAAAA,EAAED,oBAAoB,UAAW5D,KAAKiC,YAChD6B,EAAA9D,KAAK+C,SAAK,MAAAe,SAAA,SAAAA,EAAEF,oBAAoB,UAAW5D,KAAK0B,WAEhD6B,OAAOK,oBAAoB,SAAU5D,KAAK+B,gBAE1CyB,SAASI,oBAAoB,YAAa5D,KAAKgC,aAE/ChC,KAAKW,eAAeoD,Y,CAOd,+BAAAjD,G,MACN,IAAKd,KAAKgE,mBAAqBhE,KAAKI,gBAAiB,CACnD,M,CAGF,GAAIJ,KAAKI,gBAAiB,CACxB,IAAI6D,EAA6B,EACjC,IAAIC,EAA+B,EAGnC,MAAMC,EAAQnE,KAAKM,aAAab,OAAS2E,KAAKC,IAAIrE,KAAKM,aAAab,OAAQ3B,GAA0B,EACtG,IAAK,IAAIwG,EAAI,EAAGA,EAAIH,EAAOG,IAAK,CAC9BL,EACEA,KAA8BN,EAAA3D,KAAKM,aAAagE,MAAE,MAAAX,SAAA,SAAAA,EAAEY,wBAAwBC,SAAU,E,CAG1F,MAAMC,EAAqBlB,OAAOmB,YAAc1E,KAAK8B,KAAKyC,wBAAwBI,OAClF,MAAMC,EAAsBX,EAA6B,EAAIlG,EAAsB,EAAIC,EAEvF,GAAIyG,EAAqBG,GAAuBH,GAAsBR,EAA4B,CAChGC,EAA+BO,EAAqB,EAAI1G,C,KACnD,CACLmG,EAA+BU,C,CAGjC5E,KAAKgE,iBAAiBa,MAAMC,YAAY,oCAAqC,GAAGZ,M,EAI5E,sBAAAa,CAAuBnD,G,QAC7B,OAAO5B,KAAKgF,4BAA4BhF,KAAKiF,WAAUpB,GAAAF,EAAA3D,KAAK+C,SAAK,MAAAY,SAAA,SAAAA,EAAE3E,MAAMkG,MAAM,KAAKC,QAAQC,GAAMA,OAAE,MAAAvB,SAAA,EAAAA,EAAI,GAAIjC,G,CAGtG,UAAAyD,CACN9G,EACAqD,EACA3C,EACAqG,G,QAEA,GAAItF,KAAKuF,MAAQtG,EAAM,CACrB,OAAOe,KAAKgF,4BAA4BhF,KAAKuF,KAAKhH,EAAYqD,EAAM3C,EAAMqG,G,CAE5E,OAAOtF,KAAKgF,4BAA4BhF,KAAKiF,WAAUpB,GAAAF,EAAA3D,KAAK+C,SAAK,MAAAY,SAAA,SAAAA,EAAE3E,MAAMkG,MAAM,KAAKC,QAAQC,GAAMA,OAAE,MAAAvB,SAAA,EAAAA,EAAI,GAAIjC,G,CAGtG,SAAAqD,CAAUO,EAAiBC,GACjC,IAAKA,IAAoBD,GAASA,EAAM/F,SAAW,GAAK+F,EAAM,KAAOtG,UAAW,CAC9E,MAAO,CAAC,G,CAGV,MAAMwG,EAAY,IAAIC,OAAO,IAAItI,EAAmBmI,EAAM,OAAQ,MAElE,OAAOC,EAAgBP,MAAMQ,GAAWE,QAAO,CAACzB,EAA8B0B,KAC5E,IAAKA,EAAW,CACd1B,EAAM2B,KAAKD,E,MACN,GAAIH,EAAUK,KAAKF,GAAY,CACpC1B,EAAM2B,KAAK,CAAEP,KAAMM,G,MACd,GAAIL,EAAM/F,SAAW,EAAG,CAC7B0E,EAAM2B,KAAKD,E,KACN,CACL1B,EAAM2B,QAAQ9F,KAAKiF,UAAUO,EAAMQ,MAAM,GAAIH,G,CAG/C,OAAO1B,CAAK,GACX,G,CAGG,2BAAAa,CAA4BiB,GAClC,GAAIA,EAAMxG,SAAW,EAAG,CACtB,MAAO,CAAC,G,CAGV,OAAOwG,EAAM7G,KAAK8G,IAChB,UAAWA,IAAS,SAAU,CAC5B,OAAOxH,EAAO,YAAAwH,EAAKX,K,CAErB,OAAOW,CAAI,G,CAIP,gBAAAC,CAAiB5H,EAAwB6H,GAC/CpG,KAAKqG,mBAAqB9H,EAC1ByB,KAAKsG,wBAA0BF,EAE/BpG,KAAKuG,yB,CAGC,qBAAAC,GACN,IAAKxG,KAAKR,YAAa,CACrB,M,CAGF,GAAID,EAAUS,KAAKR,cAAgBQ,KAAKsG,wBAAyB,CAC/DtG,KAAKqG,mBAAqBrG,KAAKsG,wBAAwB9G,YAAY,E,KAC9D,CACL,GAAII,EAAOI,KAAKR,aAAc,CAC5BQ,KAAKqG,mBAAqBrG,KAAKR,YAAY,E,EAI/CQ,KAAKuG,wBAAwB,K,CAGvB,oBAAAE,GACN,IAAKzG,KAAKR,YAAa,CACrB,M,CAGF,GAAID,EAAUS,KAAKR,cAAgBQ,KAAKsG,wBAAyB,CAC/DtG,KAAKqG,mBACHrG,KAAKsG,wBAAwB9G,YAAYQ,KAAKsG,wBAAwB9G,YAAYC,OAAS,E,KACxF,CACL,GAAIG,EAAOI,KAAKR,aAAc,CAC5BQ,KAAKqG,mBAAqBrG,KAAKR,YAAYQ,KAAKR,YAAYC,OAAS,E,EAGzEO,KAAKuG,wBAAwB,K,CAGvB,oBAAAnE,G,MACN,IAAKpC,KAAKR,YAAa,CACrB,M,CAGF,GAAID,EAAUS,KAAKR,aAAc,CAC/BQ,KAAK0G,6B,KACA,CACL,MAAMC,EAAQ3G,KAAKqG,mBAAqBrG,KAAKR,YAAYoH,QAAQ5G,KAAKqG,qBAAsB,EAE5FrG,KAAKqG,oBAAqB1C,EAAA3D,KAAKR,YAAYmH,EAAQ,MAAE,MAAAhD,SAAA,EAAAA,EAAI3D,KAAKR,YAAY,E,CAG5EQ,KAAKuG,wBAAwB,K,CAGvB,2BAAAG,G,MACN,IAAK1G,KAAKR,YAAa,CACrB,M,CAGF,GAAIQ,KAAKsG,wBAAyB,CAChC,MAAMO,EAAe7G,KAAKqG,mBACtBrG,KAAKsG,wBAAwB9G,YAAYoH,QAAQ5G,KAAKqG,qBACtD,EAEJ,GAAIQ,IAAiB7G,KAAKsG,wBAAwB9G,YAAYC,OAAS,EAAG,CAExE,MAAMqH,EAAa9G,KAAK+G,iBAAiBH,QAAQ5G,KAAKsG,yBACtDtG,KAAKsG,yBAA0B3C,EAAA3D,KAAK+G,iBAAiBD,EAAa,MAAE,MAAAnD,SAAA,EAAAA,EAAI3D,KAAK+G,iBAAiB,GAC9F/G,KAAKqG,mBAAqBrG,KAAKsG,wBAAyB9G,YAAY,E,KAC/D,CAELQ,KAAKqG,mBAAqBrG,KAAKsG,wBAAwB9G,YAAYqH,EAAe,E,MAE/E,CACL7G,KAAKsG,wBAA0BtG,KAAK+G,iBAAiB,GACrD/G,KAAKqG,mBAAqBrG,KAAKsG,wBAAyB9G,YAAY,E,EAIhE,wBAAA6C,G,MACN,IAAKrC,KAAKR,YAAa,CACrB,M,CAGF,GAAID,EAAUS,KAAKR,aAAc,CAC/BQ,KAAKgH,iC,KACA,CACL,MAAML,EAAQ3G,KAAKqG,mBAAqBrG,KAAKR,YAAYoH,QAAQ5G,KAAKqG,oBAAsB,EAE5FrG,KAAKqG,oBAAqB1C,EAAA3D,KAAKR,YAAYmH,EAAQ,MAAE,MAAAhD,SAAA,EAAAA,EAAI3D,KAAKR,YAAYQ,KAAKR,YAAYC,OAAS,E,CAGtGO,KAAKuG,wBAAwB,K,CAGvB,+BAAAS,G,MACN,IAAKhH,KAAKR,YAAa,CACrB,M,CAGF,GAAIQ,KAAKsG,wBAAyB,CAChC,MAAMO,EAAe7G,KAAKqG,mBACtBrG,KAAKsG,wBAAwB9G,YAAYoH,QAAQ5G,KAAKqG,qBACtD,EAEJ,GAAIQ,IAAiB,EAAG,CAEtB,MAAMC,EAAa9G,KAAK+G,iBAAiBH,QAAQ5G,KAAKsG,yBAEtDtG,KAAKsG,yBACH3C,EAAA3D,KAAK+G,iBAAiBD,EAAa,MAAM,MAAAnD,SAAA,EAAAA,EAAA3D,KAAK+G,iBAAiB/G,KAAKR,YAAYC,OAAS,GAC3FO,KAAKqG,mBACHrG,KAAKsG,wBAAyB9G,YAAYQ,KAAKsG,wBAAyB9G,YAAYC,OAAS,E,KAC1F,CAELO,KAAKqG,mBAAqBrG,KAAKsG,wBAAwB9G,YAAYqH,EAAe,E,MAE/E,CACL7G,KAAKsG,wBAA0BtG,KAAK+G,iBAAiB/G,KAAKR,YAAYC,OAAS,GAC/EO,KAAKqG,mBACHrG,KAAKsG,wBAAyB9G,YAAYQ,KAAKsG,wBAAyB9G,YAAYC,OAAS,E,EAInG,oBAAYsH,GACV,OAAOxH,EAAUS,KAAKR,aAAeQ,KAAKR,YAAc,E,CAGlD,uBAAA+G,CAAwBU,EAAS,O,QACvC,GAAIjH,KAAKqG,mBAAoB,CAC3B,MAAMnI,EAAK8B,KAAKsG,wBACZtG,KAAKkH,qBAAqBlH,KAAKsG,wBAAyBtG,KAAKqG,oBAC7DrG,KAAKmH,cAAcnH,KAAKqG,qBAC5B1C,EAAA3D,KAAK+C,SAAO,MAAAY,SAAA,SAAAA,EAAAN,aAAa,wBAAyBnF,GAClD,GAAI+I,EAAQ,EACVpD,EAAAL,SAAS4D,eAAelJ,MAAG,MAAA2F,SAAA,SAAAA,EAAEwD,eAAe,CAAEC,MAAO,W,GAKnD,uBAAA5E,G,MACN1C,KAAKK,aAAeL,KAAKoB,eACzBpB,KAAKrC,SAAW,MAChBqC,KAAKqG,mBAAqBnH,UAC1Bc,KAAKsG,wBAA0BpH,WAC/ByE,EAAA3D,KAAK+C,SAAO,MAAAY,SAAA,SAAAA,EAAAN,aAAa,wBAAyB,G,CAG5C,eAAA1B,CAAgBwE,G,YACtBnG,KAAKI,iBAAkBuD,EAAC3D,KAAKR,aAAeQ,KAAKR,YAAYC,OAAS,KAAE,MAAAkE,SAAA,EAAAA,EAAI,MAC5E3D,KAAKrC,UAAWmG,EAAC9D,KAAKR,eAAeqE,EAAA7D,KAAKR,eAAa,MAAAqE,SAAA,SAAAA,EAAApE,UAAW,KAAM,MAAAqE,SAAA,EAAAA,EAAA,OACxEyD,EAAAvH,KAAK+C,SAAK,MAAAwE,SAAA,SAAAA,EAAElE,aAAa,iBAAkBrD,KAAKI,iBAAmBJ,KAAKrC,UAAU6J,YAElF,GAAIxH,KAAKI,iBAAmB+F,IAAqB,QAAS,CACxDnG,KAAKwG,uB,MACA,GAAIxG,KAAKI,iBAAmB+F,IAAqB,OAAQ,CAC9DnG,KAAKyG,sB,EAID,gBAAAnE,G,MACNtC,KAAKI,gBAAkB,MACvBJ,KAAKrC,SAAW,OAChBgG,EAAA3D,KAAK+C,SAAO,MAAAY,SAAA,SAAAA,EAAAN,aAAa,gBAAiB,SAC1CrD,KAAKwG,uB,CAGC,iBAAAjE,G,MACN,GAAIvC,KAAKqG,oBAAsBrG,KAAKI,gBAAiB,CACnDJ,KAAKyH,UAAUxG,KAAKjB,KAAKqG,mB,KACpB,CACLrG,KAAK0H,UAAUzG,MAAK0C,EAAA3D,KAAK+C,SAAK,MAAAY,SAAA,SAAAA,EAAE3E,M,CAGlCgB,KAAKsC,kB,CA8CC,aAAA6E,CAAc5I,GACpB,IAAKyB,KAAKR,YAAa,CACrB,MAAO,E,CAET,MAAO,GAAGQ,KAAKS,WAAWb,EAAOI,KAAKR,cAAgBQ,KAAKR,YAAYoH,QAAQrI,GAAc,G,CAGvF,oBAAA2I,CAAqBS,EAAkCpJ,GAC7D,IAAKyB,KAAKR,YAAa,CACrB,MAAO,E,CAGT,MAAO,GAAGQ,KAAKS,WAAWT,KAAK+G,iBAAiBH,QAAQe,GAAmB,KAAKA,EAAgBnI,YAAYoH,QAAQrI,GAAc,G,CAG5H,sBAAAqJ,CAAuBzI,EAAkBZ,GAC/C,MAAMsJ,EAAgB1I,EAAOyG,QAAO,CAACkC,EAAyBxI,EAAOqH,K,MACnE,MAAMoB,EAAa3D,KAAK4D,MAAMrB,EAAQ,GAEtC,IAAKmB,EAAYC,GAAa,CAC5BD,EAAYC,GAAc,E,EAE5BpE,EAAAmE,EAAYC,MAAW,MAAApE,SAAA,SAAAA,EAAEmC,KAAKxG,GAC9B,OAAOwI,CAAW,GACjB,IAEH,OAAOD,EAAczI,KAAI,CAAC6I,EAAOtB,IAC/BsB,EAAM7I,KAAI,CAAC8I,EAAG5D,IAAMtE,KAAKqF,WAAW9G,EAAY2J,EAAG,QAASvB,EAAQ,EAAIrC,M,CAIpE,oBAAA6D,CAAqB5J,GAC3B,MAAO,CACLS,MAAOgB,KAAKqF,WAAW9G,EAAYA,EAAWS,MAAO,SACrDC,KAAMV,EAAWU,KAAOe,KAAKqF,WAAW9G,EAAYA,EAAWU,KAAM,QAAUC,UAC/EC,OAAQZ,EAAWY,OAASa,KAAK4H,uBAAuBrJ,EAAWY,OAAQZ,GAAcW,U,CAIrF,oBAAAkJ,GACN,GAAIpI,KAAKrC,SAAU,CACjB,MAAO,IAAIqC,KAAKmB,+B,CAGlB,IAAIkH,EAAmB,EAEvB,GAAIzI,EAAOI,KAAKR,aAAc,CAC5B6I,EAAmBrI,KAAKR,YAAYC,M,MAC/B,GAAIF,EAAUS,KAAKR,aAAc,CACtC6I,EAAmBrI,KAAKR,YAAYoG,QAAO,CAAC0C,EAAOlC,IAAUkC,EAAQlC,EAAM5G,YAAYC,QAAQ,E,CAGjG,MAAO,GAAG4I,wB,CAGZ,MAAAE,GACEvI,KAAKM,aAAe,GAEpB,MAAMkI,EAAcxI,KAAKI,iBAAmBJ,KAAKrC,SAEjD,MAAM8K,EAAUlJ,EAAUS,KAAKR,aAC/B,MAAMkJ,EAAO9I,EAAOI,KAAKR,aAEzB,GAAIgJ,GAAexI,KAAK+C,MAAO,CAC7B/C,KAAK+C,MAAMM,aAAa,gBAAiBrD,KAAKO,U,MACzC,GAAIP,KAAK+C,MAAO,CACrB/C,KAAK+C,MAAM4F,gBAAgB,gB,CAG7B,OACEjK,EAAAkK,EAAA,KACElK,EAAQ,QAAAyD,IAAA,6CACPnC,KAAKC,SAAWD,KAAKK,YACpB3B,EAAK,OAAAC,MAAM,4BACTD,EAAA,0BAAwB0E,MAAOpD,KAAKE,gBAGtCsI,GACE9J,EAAAkK,EAAA,KACElK,EAAA,kBAAgBC,MAAM,oBAAoBH,IAAMqK,GAAa7I,KAAKgE,iBAAmB6E,GACnFnK,EAAA,OACEC,MAAM,UACNC,KAAK,UACLV,GAAI8B,KAAKO,UAAS,kBACDP,KAAKU,QACtBlC,IAAMqK,GAAa7I,KAAK4C,QAAUiG,EAClCC,SAAS,KAEPJ,GACA1I,KAAKI,iBACLJ,KAAKR,aACLQ,KAAKR,YAAYJ,KAAKb,GACpBG,EAACT,EAAM,CACLC,GAAI8B,KAAKmH,cAAc5I,GACvBJ,WAAY,IAAM6B,KAAKmG,iBAAiB5H,GACxCH,WAAY,IAAM4B,KAAK0C,0BACvBrE,MAAO,IAAM2B,KAAKuC,oBAClBjE,UAAWC,IAAeyB,KAAKqG,oBAAoBmB,WACnDjJ,WAAYA,EACZC,IAAMqK,GAAYA,GAAW7I,KAAKM,aAAawF,KAAK+C,GACpDpK,iBAAkBuB,KAAKmI,qBAAqB5J,QAG/CkK,GACCzI,KAAKI,iBACLJ,KAAKR,aACLQ,KAAKR,YAAYJ,KAAKuI,IACpB,MAAMoB,EAAevI,IACrB,OACE9B,EAAK,OAAAE,KAAK,QAAQD,MAAM,QAAO,kBAAkBoK,GAC/CrK,EAAA,OACEC,MAAM,cACNC,KAAK,eACLV,GAAI6K,EACJvK,IAAMqK,GAAYA,GAAW7I,KAAKM,aAAawF,KAAK+C,IAEnDlB,EAAgBhI,YAElBgI,EAAgBnI,YAAYJ,KAAKb,GAChCG,EAACT,EAAM,CACLC,GAAI8B,KAAKkH,qBAAqBS,EAAiBpJ,GAC/CJ,WAAY,IAAM6B,KAAKmG,iBAAiB5H,EAAYoJ,GACpDvJ,WAAY,IAAM4B,KAAK0C,0BACvBrE,MAAO,IAAM2B,KAAKuC,oBAClBjE,UAAWC,IAAeyB,KAAKqG,oBAAoBmB,WACnDjJ,WAAYA,EACZC,IAAMqK,GAAYA,GAAW7I,KAAKM,aAAawF,KAAK+C,GACpDpK,iBAAkBuB,KAAKmI,qBAAqB5J,OAG5C,KAGXyB,KAAKrC,UACJe,EAAK,OAAAC,MAAM,UACTD,EAAA,QAAMC,MAAM,SACTqB,KAAKgJ,eACJhJ,KAAK+E,uBAAuB/E,KAAK4B,KAAK,WAAY,CAAET,WAAYnB,KAAKmB,kBAMnFzC,EAAA,OAAKC,MAAM,UAAS,YAAW,SAAQ,cAAa,QACjDqB,KAAKoI,yB","ignoreList":[]}

package/dist/dso-toolkit/{p-802d9be8.entry.js → p-322b7db4.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as o,F as n}from"./p-C-b4jsbt.js";const a=':host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: "";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #b62f41;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #ce3f51;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e17000;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #dcd400;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #79b929;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #39870c;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #275937;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: "";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}';const s=class{constructor(o){e(this,o);this.dsoSubmit=r(this,"dsoSubmit",7);this.dsoClose=r(this,"dsoClose",7)}handleForm(e){e.preventDefault();this.dsoSubmit.emit({rating:this.rating,scale:{start:1,end:7},originalEvent:e})}handleChange(e){const r=e.target;this.rating=Number(r.value)}render(){const e=["Heel moeilijk","Moeilijk","Redelijk moeilijk","Neutraal","Redelijk makkelijk","Makkelijk","Heel makkelijk"];return o("dso-panel",{key:"2a2195f431d05af2f95157241dbe233743cc45a6",emphasized:true,onDsoCloseClick:e=>this.dsoClose.emit({originalEvent:e}),role:"dialog","aria-labelledby":"panel-heading"},o("h2",{key:"6078cb4a0285e2f4afda8c2452efbbbdd2938c20",id:"panel-heading",slot:"heading"},"Help ons met een onderzoek"),o("strong",{key:"1e424390809f7a1cb59f636f4bd27f9d9e4b3c70"},"Hoe moeilijk of makkelijk was deze taak om uit te voeren?"),o("form",{key:"22c216ba2253ae2f748030be3336155318d01449",onSubmit:e=>this.handleForm(e)},o("div",{key:"3eb88c0afcf933bb8974df638b5eb2aed1a45d0a",class:"visual-rating-labels","aria-hidden":"true"},o("span",{key:"1a74a9093fc56e5f1192e1400d9989074d2c0add"},"Heel moeilijk"),o("span",{key:"78c7bffac4fd101c39917a9903fda62acdbf3806"},"Heel makkelijk")),o("div",{key:"d1b523bf50e3a901da0f6d0af0e20c72df9e8bc9",role:"radiogroup"},e.map(((e,r)=>{const a=r+1;return o(n,null,o("label",{class:`survey-rating-${a}`},a,o("span",{class:"sr-only"},e),o("input",{type:"radio",name:"rating",value:a,checked:a===this.rating,onChange:e=>this.handleChange(e)})))}))),o("button",{key:"8105cc59e8f59f056579f21f56d82e518cfe7396",type:"submit",class:"dso-secondary"},o("span",{key:"379e72689c91d68a90013578fc03019a0eac4042"},"Antwoord verzenden"))))}};s.style=a;export{s as dso_survey_rating};
-//# sourceMappingURL=p-802d9be8.entry.js.map
+import{r as e,c as r,h as o,F as n}from"./p-C-b4jsbt.js";const a=':host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: "";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #b62f41;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #ce3f51;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e17000;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-3::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #dcd400;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-4::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #79b929;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-5::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #39870c;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #275937;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: "";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::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: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n  background-repeat: no-repeat;\n  content: "";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}';const s=class{constructor(o){e(this,o);this.dsoSubmit=r(this,"dsoSubmit",7);this.dsoClose=r(this,"dsoClose",7)}handleForm(e){e.preventDefault();this.dsoSubmit.emit({rating:this.rating,scale:{start:1,end:7},originalEvent:e})}handleChange(e){const r=e.target;this.rating=Number(r.value)}render(){const e=["Heel moeilijk","Moeilijk","Redelijk moeilijk","Neutraal","Redelijk makkelijk","Makkelijk","Heel makkelijk"];return o("dso-panel",{key:"9040ae190a33af5d259011c22016749d84720da2",emphasized:true,onDsoCloseClick:e=>this.dsoClose.emit({originalEvent:e}),role:"dialog","aria-labelledby":"panel-heading"},o("h2",{key:"b7b9bd9b0a97c5e3fa227e0af5949f6f36c39275",id:"panel-heading",slot:"heading"},"Help ons met een onderzoek"),o("strong",{key:"1db31c25e032536223ae9c53718dcea388d6b0fd"},"Hoe moeilijk of makkelijk was deze taak om uit te voeren?"),o("form",{key:"422e4887289d315d5f008e0f1d6ae4936e08da86",onSubmit:e=>this.handleForm(e)},o("div",{key:"ea9eef2c9b40f68a562eda5df4943e6e3a4393a1",class:"visual-rating-labels","aria-hidden":"true"},o("span",{key:"fe9d2c8bf6cac8705a9eca4250d91b95e67ec35c"},"Heel moeilijk"),o("span",{key:"7a039794087fd90273e21fc0926e1eb4fed8ebee"},"Heel makkelijk")),o("div",{key:"002b4918b471324eeabcbeeda2899024286c0df6",role:"radiogroup"},e.map(((e,r)=>{const a=r+1;return o(n,null,o("label",{class:`survey-rating-${a}`},a,o("span",{class:"sr-only"},e),o("input",{type:"radio",name:"rating",value:a,checked:a===this.rating,onChange:e=>this.handleChange(e)})))}))),o("button",{key:"e1257162f5826778a751ca0d8dbc3f4b4a9a0177",type:"submit",class:"dso-secondary"},o("span",{key:"8bd71f5506750e1e9e7c67cbd08489fd00149ba0"},"Antwoord verzenden"))))}};s.style=a;export{s as dso_survey_rating};
+//# sourceMappingURL=p-322b7db4.entry.js.map

package/dist/dso-toolkit/{p-802d9be8.entry.js.map → p-322b7db4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["surveyRatingCss","SurveyRating","handleForm","e","preventDefault","this","dsoSubmit","emit","rating","scale","start","end","originalEvent","handleChange","target","Number","value","render","ratings","h","key","emphasized","onDsoCloseClick","dsoClose","role","id","slot","onSubmit","class","map","index","ratingNumber","Fragment","type","name","checked","onChange"],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\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.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAkB,k+rB,MCQXC,EAAY,M,iGAef,UAAAC,CAAWC,GACjBA,EAAEC,iBACFC,KAAKC,UAAUC,KAAK,CAAEC,OAAQH,KAAKG,OAAQC,MAAO,CAAEC,MAAO,EAAGC,IAAK,GAAKC,cAAeT,G,CAGjF,YAAAU,CAAaV,GACnB,MAAMW,EAASX,EAAEW,OACjBT,KAAKG,OAASO,OAAOD,EAAOE,M,CAG9B,MAAAC,GACE,MAAMC,EAAU,CACd,gBACA,WACA,oBACA,WACA,qBACA,YACA,kBAGF,OACEC,EAAA,aAAAC,IAAA,2CACEC,WAAU,KACVC,gBAAkBnB,GAAME,KAAKkB,SAAShB,KAAK,CAAEK,cAAeT,IAC5DqB,KAAK,SAAQ,kBACG,iBAEhBL,EAAA,MAAAC,IAAA,2CAAIK,GAAG,gBAAgBC,KAAK,WAEvB,8BACLP,EAA0E,UAAAC,IAAA,yGAC1ED,EAAA,QAAAC,IAAA,2CAAMO,SAAWxB,GAAME,KAAKH,WAAWC,IACrCgB,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,uBAAsB,cAAa,QAC5CT,EAA0B,QAAAC,IAAA,6DAC1BD,EAAA,QAAAC,IAAA,+DAEFD,EAAA,OAAAC,IAAA,2CAAKI,KAAK,cACPN,EAAQW,KAAI,CAACrB,EAAQsB,KACpB,MAAMC,EAAeD,EAAQ,EAE7B,OACEX,EAAAa,EAAA,KACEb,EAAA,SAAOS,MAAO,iBAAiBG,KAC5BA,EACDZ,EAAA,QAAMS,MAAM,WAAWpB,GACvBW,EAAA,SACEc,KAAK,QACLC,KAAK,SACLlB,MAAOe,EACPI,QAASJ,IAAiB1B,KAAKG,OAC/B4B,SAAWjC,GAAME,KAAKQ,aAAaV,MAGtC,KAITgB,EAAA,UAAAC,IAAA,2CAAQa,KAAK,SAASL,MAAM,iBAC1BT,EAAA,QAAAC,IAAA,oE","ignoreList":[]}
+{"version":3,"names":["surveyRatingCss","SurveyRating","handleForm","e","preventDefault","this","dsoSubmit","emit","rating","scale","start","end","originalEvent","handleChange","target","Number","value","render","ratings","h","key","emphasized","onDsoCloseClick","dsoClose","role","id","slot","onSubmit","class","map","index","ratingNumber","Fragment","type","name","checked","onChange"],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  background-color: survey-rating-variables.$survey-rating-background-color;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n  z-index: zindex.$survey-rating;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\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.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\n\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when the user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren?</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAkB,k+rB,MCSXC,EAAY,M,iGAef,UAAAC,CAAWC,GACjBA,EAAEC,iBACFC,KAAKC,UAAUC,KAAK,CAAEC,OAAQH,KAAKG,OAAQC,MAAO,CAAEC,MAAO,EAAGC,IAAK,GAAKC,cAAeT,G,CAGjF,YAAAU,CAAaV,GACnB,MAAMW,EAASX,EAAEW,OACjBT,KAAKG,OAASO,OAAOD,EAAOE,M,CAG9B,MAAAC,GACE,MAAMC,EAAU,CACd,gBACA,WACA,oBACA,WACA,qBACA,YACA,kBAGF,OACEC,EAAA,aAAAC,IAAA,2CACEC,WAAU,KACVC,gBAAkBnB,GAAME,KAAKkB,SAAShB,KAAK,CAAEK,cAAeT,IAC5DqB,KAAK,SAAQ,kBACG,iBAEhBL,EAAA,MAAAC,IAAA,2CAAIK,GAAG,gBAAgBC,KAAK,WAEvB,8BACLP,EAA0E,UAAAC,IAAA,yGAC1ED,EAAA,QAAAC,IAAA,2CAAMO,SAAWxB,GAAME,KAAKH,WAAWC,IACrCgB,EAAA,OAAAC,IAAA,2CAAKQ,MAAM,uBAAsB,cAAa,QAC5CT,EAA0B,QAAAC,IAAA,6DAC1BD,EAAA,QAAAC,IAAA,+DAEFD,EAAA,OAAAC,IAAA,2CAAKI,KAAK,cACPN,EAAQW,KAAI,CAACrB,EAAQsB,KACpB,MAAMC,EAAeD,EAAQ,EAE7B,OACEX,EAAAa,EAAA,KACEb,EAAA,SAAOS,MAAO,iBAAiBG,KAC5BA,EACDZ,EAAA,QAAMS,MAAM,WAAWpB,GACvBW,EAAA,SACEc,KAAK,QACLC,KAAK,SACLlB,MAAOe,EACPI,QAASJ,IAAiB1B,KAAKG,OAC/B4B,SAAWjC,GAAME,KAAKQ,aAAaV,MAGtC,KAITgB,EAAA,UAAAC,IAAA,2CAAQa,KAAK,SAASL,MAAM,iBAC1BT,EAAA,QAAAC,IAAA,oE","ignoreList":[]}