@dso-toolkit/core 62.17.0 → 62.19.0

package/dist/dso-toolkit/p-84be819d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["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","localization","onDateSelect","onMouseDown","onFocusIn","role","onFocusin","dayNames","dayName","scope","substr","week","undefined","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","monthNames","monthNamesShort","monthRange","selectedYear","minDate","maxDate","minYear","minMonth","maxYear","maxMonth","filter","_month","index","range","from","to","datePickerLegacyCss","keyCode","TAB","ESC","SPACE","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","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","defaultLocalization","enableActiveFocus","activeFocus","disableActiveFocus","toggleOpen","preventDefault","open","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","required","error","clampValue","processFocusedDayNode","element","setTimeout","handleDocumentClick","path","composedPath","Node","contains","setFocus","datePickerLegacyInput","hideTimeoutId","clearTimeout","visible","focusTimeoutId","monthSelectNode","moveFocusToButton","datePickerLegacyButton","months","years","previousValue","dsoDateChange","componentWillLoad","componentDidLoad","dsoAutofocus","render","formattedDate","focusedMonth","focusedYear","prevMonthDisabled","nextMonthDisabled","Host","id","identifier","invalid","describedBy","onInput","onFocus","onBlur","onKeyUp","autoComplete","icon","direction","onTouchMove","onTouchStart","onTouchEnd","htmlFor","onChange","indexOf","key","selected"],"sources":["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/date-localization.ts","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":["// 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 { h, FunctionalComponent } from \"@stencil/core\";\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 { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { DsoLocalizedText } from \"./date-localization\";\r\nimport { DatePickerLegacyDay, DatePickerLegacyDayProps } from \"./date-picker-day\";\r\nimport { getViewOfMonth, inRange, DaysOfWeek, 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","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","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: left;\r\n  width: 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-bottom-right-radius: core-date-picker-legacy-variables.$radius;\r\n  border-top-right-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  height: core-date-picker-legacy-variables.$size;\r\n  justify-content: center;\r\n  padding: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  transform: translateY(-50%);\r\n  top: 50%;\r\n  user-select: none;\r\n  width: 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  right: 0;\r\n  min-width: 320px;\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 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    bottom: 0;\r\n    position: fixed;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    transform: translateZ(0);\r\n    transform-origin: bottom center;\r\n  }\r\n\r\n  &.is-left {\r\n    left: units.$padding-base-horizontal * -1 + core-date-picker-legacy-variables.$border-width;\r\n    right: auto;\r\n    width: 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-left: auto;\r\n  margin-right: -1px;\r\n  margin-top: 8px;\r\n  max-width: 310px;\r\n  min-width: 290px;\r\n  padding: 16px;\r\n  position: relative;\r\n  transform: none;\r\n  width: 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-top-left-radius: core-date-picker-legacy-variables.$radius;\r\n    border-top-right-radius: core-date-picker-legacy-variables.$radius;\r\n    bottom: 0;\r\n    left: 0;\r\n    margin: 0;\r\n    max-width: none;\r\n    min-height: 26em;\r\n    opacity: 0;\r\n    padding: 0 8% 20px;\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-width: (core-date-picker-legacy-variables.$size + 2) * 7;\r\n  table-layout: fixed;\r\n  text-align: center;\r\n  width: 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  height: 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  height: core-date-picker-legacy-variables.$size + 2;\r\n  padding: 1px;\r\n  text-align: center;\r\n  width: 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  height: 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  width: core-date-picker-legacy-variables.$size;\r\n  z-index: zindex.$datepicker;\r\n\r\n  &.is-today {\r\n    background: transparent;\r\n    height: core-date-picker-legacy-variables.$size - 2;\r\n    box-shadow: 0 0 0 1px core-date-picker-legacy-variables.$color-button;\r\n    width: 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    height: core-date-picker-legacy-variables.$size - 4;\r\n    outline: 0;\r\n    width: 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    height: core-date-picker-legacy-variables.$size - 4;\r\n    line-height: core-date-picker-legacy-variables.$size - 4;\r\n    width: 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-bottom: 16px;\r\n  width: 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  height: 32px;\r\n  justify-content: center;\r\n  margin-left: 8px;\r\n  padding: 0;\r\n  width: 32px;\r\n\r\n  @media (max-width: 35.9375em) {\r\n    height: 40px;\r\n    width: 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: 0 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  height: units.$u1 * 4 - 4;\r\n  line-height: units.$u1 * 4 - 4;\r\n  position: relative;\r\n\r\n  span {\r\n    margin-right: 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    height: 100%;\r\n    left: 0;\r\n    opacity: 0;\r\n    position: absolute;\r\n    top: 0;\r\n    width: 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: 0 4px 0 8px;\r\n  pointer-events: none;\r\n  position: relative;\r\n  width: 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    width: 16px;\r\n    height: 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-bottom: 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-bottom: 20px;\r\n  margin-left: -10%;\r\n  overflow: hidden;\r\n  padding: 12px 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  width: 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    right: -16px;\r\n    top: -16px;\r\n    width: 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-width: 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  height: units.$u1 * 4;\r\n  justify-content: center;\r\n  margin-right: -4px;\r\n  padding: 0;\r\n  width: units.$u1 * 4;\r\n\r\n  @media (min-width: 36em) {\r\n    margin-right: 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  height: 1px;\r\n  overflow: hidden;\r\n  padding: 0;\r\n  position: absolute;\r\n  top: 0;\r\n  width: 1px;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Host,\r\n  Prop,\r\n  Element,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Listen,\r\n  Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport {\r\n  addDays,\r\n  startOfWeek,\r\n  endOfWeek,\r\n  setMonth,\r\n  setYear,\r\n  clamp,\r\n  inRange,\r\n  endOfMonth,\r\n  startOfMonth,\r\n  printDutchDate,\r\n  parseDutchDate,\r\n  DaysOfWeek,\r\n} from \"./date-utils\";\r\nimport { DatePickerLegacyMonth } from \"./date-picker-month\";\r\nimport defaultLocalization, { DsoLocalizedText } from \"./date-localization\";\r\nimport {\r\n  DsoDatePickerLegacyDirection,\r\n  DsoDatePickerLegacyChangeEvent,\r\n  DsoDatePickerLegacyFocusEvent,\r\n  DsoDatePickerLegacyKeyboardEvent,\r\n} from \"./date-picker-legacy.interfaces\";\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  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    this.open ? this.hide(false) : this.show();\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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"}

package/dist/dso-toolkit/p-94f26620.js

@@ -1,2 +0,0 @@
-function e(e,t=100,n={}){if(typeof e!=="function"){throw new TypeError(`Expected the first parameter to be a function, got \`${typeof e}\`.`)}if(t<0){throw new RangeError("`wait` must not be negative.")}const{immediate:i}=typeof n==="boolean"?{immediate:n}:n;let o;let f;let r;let d;let u;function c(){const n=Date.now()-d;if(n<t&&n>=0){r=setTimeout(c,t-n)}else{r=undefined;if(!i){const t=o;const n=f;o=undefined;f=undefined;u=e.apply(t,n)}}}const s=function(...n){if(o&&this!==o){throw new Error("Debounced method called with different contexts.")}o=this;f=n;d=Date.now();const s=i&&!r;if(!r){r=setTimeout(c,t)}if(s){const t=o;const n=f;o=undefined;f=undefined;u=e.apply(t,n)}return u};s.clear=()=>{if(!r){return}clearTimeout(r);r=undefined};s.flush=()=>{if(!r){return}const t=o;const n=f;o=undefined;f=undefined;u=e.apply(t,n);clearTimeout(r);r=undefined};return s}var t=e;var n=e;n.debounce=t;export{n as d};
-//# sourceMappingURL=p-94f26620.js.map

package/dist/dso-toolkit/p-94f26620.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["debounce","function_","wait","options","TypeError","RangeError","immediate","storedContext","storedArguments","timeoutId","timestamp","result","later","last","Date","now","setTimeout","undefined","callContext","callArguments","apply","debounced","arguments_","this","Error","callNow","clear","clearTimeout","flush","debounce_2"],"sources":["../../node_modules/debounce/index.js"],"sourcesContent":["function debounce(function_, wait = 100, options = {}) {\n\tif (typeof function_ !== 'function') {\n\t\tthrow new TypeError(`Expected the first parameter to be a function, got \\`${typeof function_}\\`.`);\n\t}\n\n\tif (wait < 0) {\n\t\tthrow new RangeError('`wait` must not be negative.');\n\t}\n\n\t// TODO: Deprecate the boolean parameter at some point.\n\tconst {immediate} = typeof options === 'boolean' ? {immediate: options} : options;\n\n\tlet storedContext;\n\tlet storedArguments;\n\tlet timeoutId;\n\tlet timestamp;\n\tlet result;\n\n\tfunction later() {\n\t\tconst last = Date.now() - timestamp;\n\n\t\tif (last < wait && last >= 0) {\n\t\t\ttimeoutId = setTimeout(later, wait - last);\n\t\t} else {\n\t\t\ttimeoutId = undefined;\n\n\t\t\tif (!immediate) {\n\t\t\t\tconst callContext = storedContext;\n\t\t\t\tconst callArguments = storedArguments;\n\t\t\t\tstoredContext = undefined;\n\t\t\t\tstoredArguments = undefined;\n\t\t\t\tresult = function_.apply(callContext, callArguments);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst debounced = function (...arguments_) {\n\t\tif (storedContext && this !== storedContext) {\n\t\t\tthrow new Error('Debounced method called with different contexts.');\n\t\t}\n\n\t\tstoredContext = this; // eslint-disable-line unicorn/no-this-assignment\n\t\tstoredArguments = arguments_;\n\t\ttimestamp = Date.now();\n\n\t\tconst callNow = immediate && !timeoutId;\n\n\t\tif (!timeoutId) {\n\t\t\ttimeoutId = setTimeout(later, wait);\n\t\t}\n\n\t\tif (callNow) {\n\t\t\tconst callContext = storedContext;\n\t\t\tconst callArguments = storedArguments;\n\t\t\tstoredContext = undefined;\n\t\t\tstoredArguments = undefined;\n\t\t\tresult = function_.apply(callContext, callArguments);\n\t\t}\n\n\t\treturn result;\n\t};\n\n\tdebounced.clear = () => {\n\t\tif (!timeoutId) {\n\t\t\treturn;\n\t\t}\n\n\t\tclearTimeout(timeoutId);\n\t\ttimeoutId = undefined;\n\t};\n\n\tdebounced.flush = () => {\n\t\tif (!timeoutId) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst callContext = storedContext;\n\t\tconst callArguments = storedArguments;\n\t\tstoredContext = undefined;\n\t\tstoredArguments = undefined;\n\t\tresult = function_.apply(callContext, callArguments);\n\n\t\tclearTimeout(timeoutId);\n\t\ttimeoutId = undefined;\n\t};\n\n\treturn debounced;\n}\n\n// Adds compatibility for ES modules\nmodule.exports.debounce = debounce;\n\nmodule.exports = debounce;\n"],"mappings":"AAAA,SAASA,EAASC,EAAWC,EAAO,IAAKC,EAAU,IAClD,UAAWF,IAAc,WAAY,CACpC,MAAM,IAAIG,UAAU,+DAA+DH,OACrF,CAEC,GAAIC,EAAO,EAAG,CACb,MAAM,IAAIG,WAAW,+BACvB,CAGC,MAAMC,UAACA,UAAoBH,IAAY,UAAY,CAACG,UAAWH,GAAWA,EAE1E,IAAII,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EAEJ,SAASC,IACR,MAAMC,EAAOC,KAAKC,MAAQL,EAE1B,GAAIG,EAAOX,GAAQW,GAAQ,EAAG,CAC7BJ,EAAYO,WAAWJ,EAAOV,EAAOW,EACxC,KAAS,CACNJ,EAAYQ,UAEZ,IAAKX,EAAW,CACf,MAAMY,EAAcX,EACpB,MAAMY,EAAgBX,EACtBD,EAAgBU,UAChBT,EAAkBS,UAClBN,EAASV,EAAUmB,MAAMF,EAAaC,EAC1C,CACA,CACA,CAEC,MAAME,EAAY,YAAaC,GAC9B,GAAIf,GAAiBgB,OAAShB,EAAe,CAC5C,MAAM,IAAIiB,MAAM,mDACnB,CAEEjB,EAAgBgB,KAChBf,EAAkBc,EAClBZ,EAAYI,KAAKC,MAEjB,MAAMU,EAAUnB,IAAcG,EAE9B,IAAKA,EAAW,CACfA,EAAYO,WAAWJ,EAAOV,EACjC,CAEE,GAAIuB,EAAS,CACZ,MAAMP,EAAcX,EACpB,MAAMY,EAAgBX,EACtBD,EAAgBU,UAChBT,EAAkBS,UAClBN,EAASV,EAAUmB,MAAMF,EAAaC,EACzC,CAEE,OAAOR,CACT,EAECU,EAAUK,MAAQ,KACjB,IAAKjB,EAAW,CACf,MACH,CAEEkB,aAAalB,GACbA,EAAYQ,SAAS,EAGtBI,EAAUO,MAAQ,KACjB,IAAKnB,EAAW,CACf,MACH,CAEE,MAAMS,EAAcX,EACpB,MAAMY,EAAgBX,EACtBD,EAAgBU,UAChBT,EAAkBS,UAClBN,EAASV,EAAUmB,MAAMF,EAAaC,GAEtCQ,aAAalB,GACbA,EAAYQ,SAAS,EAGtB,OAAOI,CACR,CAGA,IAAAQ,EAA0B7B,E,MAETA,E"}

package/dist/dso-toolkit/p-9bf33855.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as n,f as t,h as s,F as c,H as d,a as e}from"./p-4592810d.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i="*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus-visible{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button{color:#000;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:hover,:host(.dso-accordion-compact-black) .dso-section-handle button:active,:host(.dso-accordion-compact-black) .dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-top:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding:5px 16px 5px 0}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body{background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:0}:host(.dso-accordion-neutral) .dso-section-body.dso-animate-ready{transition:margin-block 260ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.dso-accordion-neutral) .dso-section-body .dso-section-body-content{padding:16px 16px 24px}@media screen and (min-width: 480px){:host(.dso-accordion-neutral) .dso-section-body .dso-section-body-content{padding:16px 32px 24px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}";const r=window["_dsoLog"]===true?console.log.bind(console.log):function(){};const l=({handleUrl:o,onClick:n,open:t,handleElementRef:c},d)=>{if(o){return s("a",{href:o,onClick:n,"aria-expanded":t?"true":"false",ref:c},d)}return s("button",{type:"button",onClick:n,"aria-expanded":t?"true":"false",ref:c},d)};const h=({heading:o,ref:n},t)=>{switch(o){default:case"h2":return s("h2",{ref:n,class:"dso-section-handle"},t);case"h3":return s("h3",{ref:n,class:"dso-section-handle"},t);case"h4":return s("h4",{ref:n,class:"dso-section-handle"},t);case"h5":return s("h5",{ref:n,class:"dso-section-handle"},t)}};const p=({state:o,icon:n,attachmentCount:t})=>{if(o){return s(u,{state:o})}if(t){return s("dso-attachments-counter",{count:t})}if(n){return s("dso-icon",{icon:n})}};const u=({state:o})=>{if(o==="error"){return s("dso-icon",{icon:"status-error"})}if(o==="danger"){return s("dso-icon",{icon:"status-danger"})}if(o==="success"){return s("dso-icon",{icon:"status-success"})}if(o==="info"){return s("dso-icon",{icon:"status-info"})}if(o==="warning"){return s("dso-icon",{icon:"status-warning"})}};const b=class{constructor(t){o(this,t);this.dsoToggleClick=n(this,"dsoToggleClick",3);this.dsoAnimationStart=n(this,"dsoAnimationStart",3);this.dsoAnimationEnd=n(this,"dsoAnimationEnd",3);this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleExpandableAnimationStart=o=>{this.dsoAnimationStart.emit({animation:this.open?"opening":"closing",scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleTitle=undefined;this.heading="h2";this.handleUrl=undefined;this.status=undefined;this.attachmentCount=undefined;this.icon=undefined;this.statusDescription=undefined;this.open=false;this.hasNestedAccordion=false;this.hover=false}async focusHandle(){var o;(o=this.handleElementRef)===null||o===void 0?void 0:o.focus()}get containsNestedAccordion(){return this.host.querySelector("dso-accordion")!==null}componentWillLoad(){var o;(o=this.accordion)===null||o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;t(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null||o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o,n="auto"){var t,s;r(`DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(o)}, behavior: ${JSON.stringify(n)})`);const c=(t=this.sectionBody)===null||t===void 0?void 0:t.getBoundingClientRect();const d=(s=this.sectionHeading)===null||s===void 0?void 0:s.getBoundingClientRect();r(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(c)};`);r(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(d)};`);r(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);r(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);if(!c||!d||!this.accordionState){r(`DSO Toolkit [Accordion Section] returning`);return}const e=d.top+d.height+(this.open?o!==null&&o!==void 0?o:0:0);r(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(e)};`);r(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);const a=this.host.getBoundingClientRect();const i=window.scrollY||document.documentElement.scrollTop||document.body.scrollTop;const l=document.documentElement.clientTop||document.body.clientTop||0;const h=a.top+i-l;r("DSO Toolkit [Accordion Section] scroll",{box:a,scrollTop:i,clientTop:l,top:h});if(e>window.innerHeight){r(`DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(e>window.innerHeight)};`);const o=e-d.top;const t=o>window.innerHeight;r(`DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(o)};`);r(`DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(t)};`);window.scrollTo({top:t?h:h-(window.innerHeight-o),behavior:n})}else if(d.top<0){r(`DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(d.top<0)};`);window.scrollTo({top:h,behavior:n})}}get accordion(){return this.host.closest("dso-accordion")}render(){var o;const{variant:n,reverseAlign:t}=(o=this.accordionState)!==null&&o!==void 0?o:{};const e=!!this.statusDescription||!!this.status||!!this.icon||!!this.attachmentCount;return s(d,{class:{"dso-accordion-section":true,["dso-accordion-"+n]:true,"dso-nested-accordion":this.hasNestedAccordion||this.containsNestedAccordion,"dso-accordion-reverse-align":t!==null&&t!==void 0?t:false},hidden:!n,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},s(h,{heading:this.heading,ref:o=>this.sectionHeading=o},s(l,{handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open,handleElementRef:o=>this.handleElementRef=o},t?s(c,null,e&&s("div",{class:"dso-section-handle-addons"},s(p,{icon:this.icon})),s("span",null,this.handleTitle),s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"})):s(c,null,s("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&s("span",{class:"sr-only"},a[this.status]),s("span",null,this.handleTitle,this.isNeutral&&s("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),e&&s("div",{class:"dso-section-handle-addons"},this.statusDescription&&s("span",{class:"dso-status"},this.statusDescription),s(p,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),s("dso-expandable",{class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationStart:this.handleExpandableAnimationStart,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},s("div",{class:"dso-section-body-content",ref:o=>this.sectionBody=o},s("slot",null))))}get host(){return e(this)}};b.style=i;export{b as dso_accordion_section};
-//# sourceMappingURL=p-9bf33855.entry.js.map

package/dist/dso-toolkit/p-9bf33855.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stateMap","success","info","warning","danger","error","accordionSectionCss","log","window","console","bind","HandleElement","handleUrl","onClick","open","handleElementRef","children","h","href","ref","type","Handle","heading","class","HandleIcon","state","icon","attachmentCount","HandleStateIcon","count","AccordionSection","this","handleClick","event","dsoToggleClick","emit","originalEvent","handleExpandableAnimationStart","e","dsoAnimationStart","animation","scrollIntoView","behavior","detail","bodyHeight","handleExpandableAnimationEnd","dsoAnimationEnd","focusHandle","_a","focus","containsNestedAccordion","host","querySelector","componentWillLoad","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","JSON","stringify","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","innerHeight","box","scrollTop","scrollY","document","documentElement","body","clientTop","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","hasNestedAccordion","hidden","onMouseenter","hover","onMouseleave","element","Fragment","handleTitle","enableAnimation","minimumHeight","onDsoExpandableAnimationStart","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * Whether or not the Accordion opening or closing.\r\n   */\r\n  animation: \"opening\" | \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\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:host {\r\n  display: block;\r\n\r\n  .dso-section-handle {\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    position: relative;\r\n\r\n    > a:active {\r\n      text-decoration: none;\r\n    }\r\n\r\n    a {\r\n      @include anchor.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      font-weight: 400;\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  .dso-section-handle > button,\r\n  .dso-section-handle > a {\r\n    align-items: flex-start;\r\n    background-color: transparent;\r\n    border: 0;\r\n    cursor: pointer;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion.$handle-line-height;\r\n    margin: 0;\r\n    padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n    text-align: start;\r\n    width: 100%;\r\n    word-break: break-word;\r\n\r\n    dso-icon {\r\n      flex-shrink: 0;\r\n\r\n      &.dso-section-handle-chevron {\r\n        @include utilities.transition(transform);\r\n\r\n        transform: rotate(0);\r\n      }\r\n    }\r\n\r\n    > .dso-section-handle-addons:first-child,\r\n    > dso-icon:first-child {\r\n      margin-right: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-left: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-left: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-left: 16px;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n  .dso-section-handle {\r\n    > button,\r\n    > a {\r\n      .dso-section-handle-chevron {\r\n        &:first-child {\r\n          transform: rotate(90deg);\r\n        }\r\n\r\n        &:last-child {\r\n          transform: rotate(-180deg);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-section-body {\r\n  background-color: colors.$wit;\r\n  border-top: 0;\r\n  margin-top: accordion.$border-radius * -1;\r\n\r\n  .dso-section-body-content {\r\n    padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n  }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n  Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  AccordionSectionAnimationStartEvent,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, handleElementRef }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n        {children}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n  heading: AccordionHeading;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return (\r\n        <h2 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h2>\r\n      );\r\n    case \"h3\":\r\n      return (\r\n        <h3 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h3>\r\n      );\r\n    case \"h4\":\r\n      return (\r\n        <h4 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h4>\r\n      );\r\n    case \"h5\":\r\n      return (\r\n        <h5 ref={ref} class=\"dso-section-handle\">\r\n          {children}\r\n        </h5>\r\n      );\r\n  }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n  state?: AccordionSectionState;\r\n  icon?: string;\r\n  attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n  if (state) {\r\n    return <HandleStateIcon state={state} />;\r\n  }\r\n\r\n  if (attachmentCount) {\r\n    return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n  }\r\n\r\n  if (icon) {\r\n    return <dso-icon icon={icon}></dso-icon>;\r\n  }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n  if (state === \"error\") {\r\n    return <dso-icon icon=\"status-error\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"danger\") {\r\n    return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"success\") {\r\n    return <dso-icon icon=\"status-success\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"info\") {\r\n    return <dso-icon icon=\"status-info\"></dso-icon>;\r\n  }\r\n\r\n  if (state === \"warning\") {\r\n    return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n  }\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-accordion-section\",\r\n  styleUrl: \"accordion-section.scss\",\r\n  shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n  private accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionSectionElement;\r\n\r\n  /**\r\n   * The title of the handle\r\n   */\r\n  @Prop()\r\n  handleTitle?: string;\r\n\r\n  /**\r\n   * Which heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: AccordionHeading = \"h2\";\r\n\r\n  /**\r\n   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n   */\r\n  @Prop()\r\n  handleUrl?: string;\r\n\r\n  /**\r\n   * `state` takes precedence over `attachmentCount` and `icon`\r\n   */\r\n  @Prop()\r\n  status?: AccordionSectionState;\r\n\r\n  /**\r\n   * `attachmentCount` takes precedence over `icon`\r\n   */\r\n  @Prop()\r\n  attachmentCount?: number;\r\n\r\n  /**\r\n   * To set an icon in the heading handle.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  /**\r\n   * The status of the section.\r\n   */\r\n  @Prop()\r\n  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Set when this Accordion Section contains or will contain an Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasNestedAccordion = false;\r\n\r\n  /**\r\n   * Calling this method will set focus to the handle.\r\n   */\r\n  @Method()\r\n  async focusHandle() {\r\n    this.handleElementRef?.focus();\r\n  }\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  get containsNestedAccordion() {\r\n    return this.host.querySelector(\"dso-accordion\") !== null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n    log(\r\n      `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n        bodyHeight,\r\n      )}, behavior: ${JSON.stringify(behavior)})`,\r\n    );\r\n\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n      return;\r\n    }\r\n\r\n    // this y is relative to the top of the viewport.\r\n    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight ?? 0 : 0);\r\n\r\n    log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n    log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n    const box = this.host.getBoundingClientRect();\r\n\r\n    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n    const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n    const top = box.top + scrollTop - clientTop;\r\n\r\n    log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n    if (sectionBottomY > window.innerHeight) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n          sectionBottomY > window.innerHeight,\r\n        )};`,\r\n      );\r\n\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n      );\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n          shouldScrollToTopOfSection,\r\n        )};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n        behavior,\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top,\r\n        behavior,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n    this.dsoAnimationStart.emit({\r\n      animation: this.open ? \"opening\" : \"closing\",\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section starts its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: true,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n        }}\r\n        hidden={!variant}\r\n        onMouseenter={() => (this.hover = true)}\r\n        onMouseleave={() => (this.hover = false)}\r\n      >\r\n        <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n          <HandleElement\r\n            handleUrl={this.handleUrl}\r\n            onClick={this.handleClick}\r\n            open={this.open}\r\n            handleElementRef={(e) => (this.handleElementRef = e)}\r\n          >\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n\r\n                <span>{this.handleTitle}</span>\r\n\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n\r\n                <span>\r\n                  {this.handleTitle}\r\n                  {this.isNeutral && (\r\n                    <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n                  )}\r\n                </span>\r\n\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n                  </div>\r\n                )}\r\n              </Fragment>\r\n            )}\r\n          </HandleElement>\r\n        </Handle>\r\n        <dso-expandable\r\n          class=\"dso-section-body\"\r\n          open={this.open}\r\n          enableAnimation\r\n          minimumHeight={this.isNeutral ? 0 : 4}\r\n          onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-a435b9fd.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as i,H as e,a as l}from"./p-4592810d.js";const o=":host{display:block}";const a=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];const r=class{constructor(i){s(this,i);this.dsoSizeChange=t(this,"dsoSizeChange",7);this.observer=new ResizeObserver((([s])=>{var t,i;if(!s){throw new Error("No entry found")}const e=(i=(t=a.find((t=>s.contentRect.width>=t.width)))===null||t===void 0?void 0:t.alias)!==null&&i!==void 0?i:a[0].alias;this.sizeAlias=e;this.dsoSizeChange.emit(e)}));this.sizeAlias=a[0].alias;this.sizeWidth=0}async getSize(){return this.sizeAlias}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return i(e,{small:this.sizeAlias==="small",medium:this.sizeAlias==="medium",large:this.sizeAlias==="large"},i("slot",null))}get host(){return l(this)}};r.style=o;export{r as dso_responsive_element};
-//# sourceMappingURL=p-a435b9fd.entry.js.map

package/dist/dso-toolkit/p-a435b9fd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["responsiveElementCss","elementSizes","width","alias","ResponsiveElement","this","observer","ResizeObserver","entry","Error","size","_b","_a","find","s","contentRect","sizeAlias","dsoSizeChange","emit","getSize","componentWillLoad","observe","host","disconnectedCallback","unobserve","render","h","Host","small","medium","large"],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, State } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"gEAAA,MAAMA,EAAuB,uBCI7B,MAAMC,EAAwD,CAC5D,CACEC,MAAO,IACPC,MAAO,SAET,CACED,MAAO,IACPC,MAAO,UAET,CACED,MAAO,EACPC,MAAO,U,MASEC,EAAiB,M,sEAqBpBC,KAAAC,SAAW,IAAIC,gBAAe,EAAEC,M,QACtC,IAAKA,EAAO,CACV,MAAM,IAAIC,MAAM,iB,CAGlB,MAAMC,GAAOC,GAAAC,EAAAX,EAAaY,MAAMC,GAAMN,EAAMO,YAAYb,OAASY,EAAEZ,WAAM,MAAAU,SAAA,SAAAA,EAAET,SAAK,MAAAQ,SAAA,EAAAA,EAAIV,EAAa,GAAGE,MAEpGE,KAAKW,UAAYN,EACjBL,KAAKY,cAAcC,KAAKR,EAAK,I,eA3BIT,EAAa,GAAGE,M,eAGvC,C,CAYZ,aAAMgB,GACJ,OAAOd,KAAKW,S,CAiBd,iBAAAI,GACEf,KAAKC,SAASe,QAAQhB,KAAKiB,K,CAG7B,oBAAAC,GACElB,KAAKC,SAASkB,UAAUnB,KAAKiB,K,CAG/B,MAAAG,GACE,OACEC,EAACC,EAAI,CAACC,MAAOvB,KAAKW,YAAc,QAASa,OAAQxB,KAAKW,YAAc,SAAUc,MAAOzB,KAAKW,YAAc,SACtGU,EAAA,a"}

package/dist/dso-toolkit/p-aa6d1e42.entry.js

@@ -1,2 +0,0 @@
-import{h as n,r as t,c as e,F as o,a as s}from"./p-4592810d.js";import{c as i}from"./p-c87b4d11.js";import{d as a}from"./p-94f26620.js";const r=["main","map"];const l=["search","map","document"];const d={main:"Hoofdpaneel",map:"Kaart",document:"Document",search:"Zoeken"};const p={small:"smal",medium:"middel",large:"breed"};const c=({className:t,onClick:e,label:o,icon:s})=>n("button",{type:"button",class:t,onClick:e},n("span",{class:"sr-only"},o),n("dso-icon",{icon:s}));const h=({shrink:t,expand:e,size:o,panelLabel:s,placement:i})=>{const a=[];if(o!=="small"){a.push(n(c,{onClick:t,label:`${s} smaller maken`,icon:i==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(o!=="large"){a.push(n(c,{onClick:e,label:`${s} breder maken`,icon:i==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",s.toLocaleLowerCase(),": ",p[o]),a)};const f=({tabView:t,panelSize:e,shrinkDocumentPanel:o,expandDocumentPanel:s,dsoDocumentPanelSizeChangeAnimationEnd:i})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){i.emit({currentSize:e})}}},!t&&n(h,{panelLabel:"Documentpaneel",size:e,expand:s,shrink:o,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({onApply:t,onCancel:e})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:e},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:t},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const b=({ref:t,onApply:e,onCancel:o})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:t,onCancel:n=>{n.preventDefault();o(n)}},n("h1",null,"Uw keuzes"),n(g,{onApply:e,onCancel:o}),n("slot",{name:"filterpanel"}),n(g,{onApply:e,onCancel:o}));const u=({mode:t,tabView:e,mainSize:o,documentPanelOpen:s,mainPanelExpanded:a,mainPanelHidden:r,shrinkMain:l,expandMain:d,toggleMainPanel:p,dsoMainSizeChangeAnimationEnd:c})=>n("div",{class:i("dso-main-panel",{compact:!e&&s&&!a,expanded:!e&&s&&a,collapsed:r}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){c.emit({currentSize:o})}}},!e&&(t==="vrk"&&n(h,{panelLabel:"Hoofdpaneel",size:o,expand:d,shrink:l,placement:"left"})||t==="vdk"&&s&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:p},n("span",{class:"sr-only"},"Zoeken paneel ",r?"tonen":"verbergen"),n("dso-icon",{icon:r?"chevron-right":"chevron-left"})))),n("div",{class:i("content",{invisible:r})},n("slot",{name:"main"})));const m=({ref:t,dsoCloseOverlay:e})=>n("dialog",{class:"overlay",ref:t,onCancel:n=>{n.preventDefault();e(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:e},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const v="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n  height: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\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}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  height: 100%;\n  padding: 0 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  left: -432px;\n}\n.dso-main-panel.compact {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  height: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  left: calc(100% + 1px);\n  transition: left 200ms ease-in;\n  padding: 0 4px 4px 0;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  top: calc(50vh - 40px);\n  right: calc(100% + 1px);\n  transition: right 200ms ease-in;\n  padding: 0 0 4px 4px;\n}\n.dso-document-panel .sizing-buttons button {\n  border-bottom-left-radius: 4px;\n  border-top-left-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  top: 16px;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  height: 100%;\n  margin-block: 0;\n  max-height: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding: 8px 16px;\n  left: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.overlay {\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.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: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.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: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-width: 0;\n    max-width: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-width: 375px;\n    max-width: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-width: 768px;\n    max-width: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    height: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-width: unset;\n    max-width: unset;\n    width: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    height: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    box-shadow: 2px 0 5px #666;\n    margin-inline: 0 auto;\n    max-width: 896px;\n    width: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 896px;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-height: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: left;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-width: auto;\n    padding: 5px 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-bottom: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n    font-size: 1.25em;\n    line-height: 1;\n    margin-top: 8px;\n    padding: 8px 16px 7px;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n    font-size: 1rem;\n    margin-top: 4px;\n    padding: 4px 8px 3px;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-bottom: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    width: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-bottom: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: left;\n    user-select: none;\n    vertical-align: middle;\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n    font-weight: 300;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding: 11px 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    height: 24px;\n    vertical-align: middle;\n    width: 24px;\n    margin-right: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    height: 24px;\n    vertical-align: middle;\n    width: 24px;\n    margin-left: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-left: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-left: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-left: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-width: 100vw;\n    top: 0;\n    width: 100vw;\n  }\n}";const x=new ResizeObserver(a((([n])=>{const t=n===null||n===void 0?void 0:n.target.getRootNode();if(t instanceof ShadowRoot&&y(t.host)){t.host._checkMainPanelVisibility()}}),50));function y(n){return n.tagName==="DSO-VIEWER-GRID"}const k=40;const w=768+k;const B=440;const D=class{constructor(n){t(this,n);this.dsoCloseOverlay=e(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=e(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=e(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=e(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=e(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=e(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=e(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=e(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=e(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=e(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${w}px)`;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.emitShrinkMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="large"?"medium":"small"})};this.emitExpandMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="small"?"medium":"large"})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=B+k+k){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches;this.handleFilterpanelApply=n=>{this.dsoFilterpanelApply.emit({originalEvent:n})};this.handleFilterpanelCancel=n=>{this.dsoFilterpanelCancel.emit({originalEvent:n})};this.mode="vrk";this.filterpanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.activeTab=undefined;this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<w}get filterpanelSlot(){return this.host.querySelector("[slot='filterpanel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterpanelOpenWatcher(n){var t,e;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(t=this.filterpanel)===null||t===void 0?void 0:t.showModal()}else{(e=this.filterpanel)===null||e===void 0?void 0:e.close()}}overlayOpenWatcher(n){var t,e;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(t=this.overlay)===null||t===void 0?void 0:t.showModal()}else{(e=this.overlay)===null||e===void 0?void 0:e.close()}}async _checkMainPanelVisibility(){if(this.mode==="vdk"&&this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=B+k+k&&!this.mainPanelExpanded||this.mapElement.clientWidth<=k+k&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,t;if(this.filterpanelOpen&&this.filterpanelSlot){(n=this.filterpanel)===null||n===void 0?void 0:n.showModal()}if(this.overlayOpen&&this.overlaySlot){(t=this.overlay)===null||t===void 0?void 0:t.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){x.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){x.unobserve(this.mapElement)}}render(){const t=this.mode==="vdk"?l:r;return n(o,null,this.tabView&&n("nav",{class:"dso-navbar"},n("ul",{class:"dso-nav dso-nav-sub"},t.map((t=>n("li",{key:t,class:i({"dso-active":this.activeTab===t})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(t)},d[t])))))),(!this.tabView||this.tabView&&(this.activeTab==="main"||this.activeTab==="search"))&&n(u,{mode:this.mode,tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,shrinkMain:this.emitShrinkMain,expandMain:this.emitExpandMain,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),n(b,{ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{class:"map",ref:n=>this.mapElement=n},n("slot",{name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})}))}get host(){return s(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};D.style=v;export{D as dso_viewer_grid};
-//# sourceMappingURL=p-aa6d1e42.entry.js.map

package/dist/dso-toolkit/p-aa6d1e42.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["viewerGridVrkTabs","viewerGridVdkTabs","viewerGridTabLabelMap","main","map","document","search","viewerGridSizeLabelMap","small","medium","large","SizingButton","className","onClick","label","icon","h","type","class","SizingButtons","shrink","expand","size","panelLabel","placement","buttons","push","toLocaleLowerCase","DocumentPanel","tabView","panelSize","shrinkDocumentPanel","expandDocumentPanel","dsoDocumentPanelSizeChangeAnimationEnd","onTransitionEnd","e","propertyName","emit","currentSize","name","ViewerGridFilterpanelButtons","onApply","onCancel","Filterpanel","ref","id","preventDefault","MainPanel","mode","mainSize","documentPanelOpen","mainPanelExpanded","mainPanelHidden","shrinkMain","expandMain","toggleMainPanel","dsoMainSizeChangeAnimationEnd","clsx","compact","expanded","collapsed","invisible","Overlay","dsoCloseOverlay","viewerGridCss","resizeObserver","ResizeObserver","debounce","entry","shadowRoot","target","getRootNode","ShadowRoot","isDsoViewerGridComponent","host","_checkMainPanelVisibility","element","tagName","buttonWidth","tabViewBreakpoint","minMapElementWidth","ViewerGrid","this","mediaCondition","switchActiveTab","tab","dsoActiveTabSwitch","emitShrinkMain","dsoMainSizeChange","nextSize","emitExpandMain","dsoDocumentPanelSizeChange","documentPanelSize","mapElement","HTMLDivElement","clientWidth","dsoMainPanelToggle","hide","changeListener","largeScreen","matches","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","window","innerWidth","filterpanelSlot","querySelector","overlaySlot","documentPanelOpenWatcher","open","filterpanelOpenWatcher","console","warn","_a","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","addEventListener","componentDidLoad","filterpanelOpen","overlayOpen","observe","disconnectedCallback","removeEventListener","unobserve","render","tabLabels","Fragment","key","activeTab"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/sizing-buttons.tsx","src/components/viewer-grid/components/document-panel.tsx","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n  nextSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridChangeSizeAnimationEndEvent {\r\n  currentSize: ViewerGridPanelSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridActiveTabSwitchEvent {\r\n  tab: ViewerGridTab;\r\n}\r\n\r\nexport interface ViewerGridMainExpandEvent {\r\n  expand: boolean;\r\n}\r\n\r\nexport interface ViewerGridMainToggleEvent {\r\n  hide: boolean;\r\n}\r\n\r\nexport type ViewerGridMode = \"vdk\" | \"vrk\";\r\n\r\nexport type ViewerGridPanelSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type ViewerGridLabelSizeMap = { [key in ViewerGridPanelSize]: string };\r\n\r\nexport const viewerGridVrkTabs = [\"main\", \"map\"] as const;\r\nexport type ViewerGridVrkTab = (typeof viewerGridVrkTabs)[number];\r\n\r\nexport const viewerGridVdkTabs = [\"search\", \"map\", \"document\"] as const;\r\nexport type ViewerGridVdkTab = (typeof viewerGridVdkTabs)[number];\r\n\r\nexport type ViewerGridTab = ViewerGridVrkTab | ViewerGridVdkTab;\r\n\r\nexport type ViewerGridTabLabelMap = { [key in ViewerGridTab]: string };\r\n\r\nexport const viewerGridTabLabelMap: ViewerGridTabLabelMap = {\r\n  main: \"Hoofdpaneel\",\r\n  map: \"Kaart\",\r\n  document: \"Document\",\r\n  search: \"Zoeken\",\r\n};\r\n\r\nexport const viewerGridSizeLabelMap: ViewerGridLabelSizeMap = {\r\n  small: \"smal\",\r\n  medium: \"middel\",\r\n  large: \"breed\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { ViewerGridPanelSize, viewerGridSizeLabelMap } from \"../viewer-grid.interfaces\";\r\n\r\ninterface SizingButtonProp {\r\n  className: string;\r\n  onClick: any;\r\n  label: string;\r\n  icon: \"chevron-left\" | \"chevron-right\";\r\n}\r\n\r\nconst SizingButton: FunctionalComponent<SizingButtonProp> = ({ className, onClick, label, icon }) => (\r\n  <button type=\"button\" class={className} onClick={onClick}>\r\n    <span class=\"sr-only\">{label}</span>\r\n    <dso-icon icon={icon}></dso-icon>\r\n  </button>\r\n);\r\n\r\ninterface SizingButtonProps {\r\n  panelLabel: string;\r\n  size: ViewerGridPanelSize;\r\n  expand: () => void;\r\n  shrink: () => void;\r\n  placement: \"left\" | \"right\";\r\n}\r\n\r\nexport const SizingButtons: FunctionalComponent<SizingButtonProps> = ({\r\n  shrink,\r\n  expand,\r\n  size,\r\n  panelLabel,\r\n  placement,\r\n}) => {\r\n  const buttons = [];\r\n\r\n  if (size !== \"small\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={shrink}\r\n        label={`${panelLabel} smaller maken`}\r\n        icon={placement === \"right\" ? \"chevron-right\" : \"chevron-left\"}\r\n        className=\"shrink\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  if (size !== \"large\") {\r\n    buttons.push(\r\n      <SizingButton\r\n        onClick={expand}\r\n        label={`${panelLabel} breder maken`}\r\n        icon={placement === \"right\" ? \"chevron-left\" : \"chevron-right\"}\r\n        className=\"expand\"\r\n      />,\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div class=\"sizing-buttons\">\r\n      <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        Breedte {panelLabel.toLocaleLowerCase()}: {viewerGridSizeLabelMap[size]}\r\n      </span>\r\n      {buttons}\r\n    </div>\r\n  );\r\n};\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <SizingButtons\r\n        panelLabel=\"Documentpaneel\"\r\n        size={panelSize}\r\n        expand={expandDocumentPanel}\r\n        shrink={shrinkDocumentPanel}\r\n        placement=\"right\"\r\n      />\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridPanelSize, ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode } from \"../viewer-grid.interfaces\";\r\nimport { SizingButtons } from \"./sizing-buttons\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  mode: ViewerGridMode;\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  mode,\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  shrinkMain,\r\n  expandMain,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView &&\r\n      ((mode === \"vrk\" && (\r\n        <SizingButtons\r\n          panelLabel=\"Hoofdpaneel\"\r\n          size={mainSize}\r\n          expand={expandMain}\r\n          shrink={shrinkMain}\r\n          placement=\"left\"\r\n        />\r\n      )) ||\r\n        (mode === \"vdk\" && documentPanelOpen && (\r\n          <div class=\"toggle-button\">\r\n            <button type=\"button\" onClick={toggleMainPanel}>\r\n              <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</span>\r\n              <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n            </button>\r\n          </div>\r\n        )))}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n    </div>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([mode=\"vdk\"]) {\r\n  .overlay {\r\n    height: calc(100% - units.$u4);\r\n    margin-block: units.$u2;\r\n    margin-inline: auto units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.content.invisible {\r\n  visibility: hidden;\r\n}\r\n\r\n.dso-main-panel,\r\n.dso-document-panel {\r\n  .content {\r\n    height: 100%;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5;\r\n  }\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  &.compact,\r\n  &.expanded {\r\n    &.collapsed {\r\n      left: -432px;\r\n    }\r\n  }\r\n\r\n  &.compact {\r\n    flex-shrink: unset;\r\n    flex-grow: unset;\r\n    position: absolute;\r\n    transition: none;\r\n  }\r\n\r\n  &.expanded.collapsed {\r\n    position: absolute;\r\n    height: 100%;\r\n  }\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .sizing-buttons,\r\n  .toggle-button {\r\n    left: calc(100% + 1px);\r\n    transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n    padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n\r\n    button {\r\n      border-bottom-right-radius: 4px;\r\n      border-top-right-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-document-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition:\r\n    flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .sizing-buttons {\r\n    top: calc(50vh - #{core-viewer-grid-variables.$resize-button-size});\r\n    right: calc(100% + 1px);\r\n    transition: right core-viewer-grid-variables.$transition-time ease-in;\r\n    padding: 0 0 units.$u1 * 0.5 units.$u1 * 0.5;\r\n\r\n    button {\r\n      border-bottom-left-radius: 4px;\r\n      border-top-left-radius: 4px;\r\n    }\r\n  }\r\n}\r\n\r\n.sizing-buttons,\r\n.toggle-button {\r\n  overflow-x: hidden;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  height: 100%;\r\n  margin-block: 0;\r\n  max-height: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host([main-size=\"small\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"small\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$small;\r\n    min-width: 0;\r\n    max-width: core-viewer-grid-variables.$small;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: 0;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"medium\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"medium\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$medium;\r\n    min-width: core-viewer-grid-variables.$small;\r\n    max-width: core-viewer-grid-variables.$medium;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host([main-size=\"large\"]) .dso-main-panel,\r\n  :host([document-panel-size=\"large\"]) .dso-document-panel {\r\n    flex-basis: core-viewer-grid-variables.$large;\r\n    min-width: core-viewer-grid-variables.$large-min;\r\n    max-width: core-viewer-grid-variables.$large-max;\r\n\r\n    @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n      flex-basis: 100vw;\r\n      max-width: 100vw;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      transition: none;\r\n    }\r\n  }\r\n\r\n  :host {\r\n    display: flex;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n\r\n    .dso-main-panel.compact,\r\n    .dso-main-panel.expanded {\r\n      flex-basis: unset;\r\n      min-width: unset;\r\n      max-width: unset;\r\n      width: 440px;\r\n\r\n      .content {\r\n        height: auto;\r\n        overflow-y: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel,\r\n  .dso-document-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n\r\n    .content {\r\n      overflow-y: auto;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n    width: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n      left: core-viewer-grid-variables.$filterpanel-max-width;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n        left: auto;\r\n        width: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    width: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    font-weight: 300;\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-width: 100vw;\r\n    top: 0;\r\n    width: 100vw;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DocumentPanel, Filterpanel, MainPanel, Overlay } from \"./components\";\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridVdkTab,\r\n  ViewerGridVrkTab,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  ViewerGridMainExpandEvent,\r\n  ViewerGridMainToggleEvent,\r\n  ViewerGridActiveTabSwitchEvent,\r\n  ViewerGridMode,\r\n  viewerGridTabLabelMap,\r\n  viewerGridVdkTabs,\r\n  viewerGridVrkTabs,\r\n  ViewerGridTab,\r\n} from \"./viewer-grid.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(([entry]) => {\r\n    const shadowRoot = entry?.target.getRootNode();\r\n    if (shadowRoot instanceof ShadowRoot && isDsoViewerGridComponent(shadowRoot.host)) {\r\n      shadowRoot.host._checkMainPanelVisibility();\r\n    }\r\n  }, 50),\r\n);\r\n\r\nfunction isDsoViewerGridComponent(element: Element): element is HTMLDsoViewerGridElement {\r\n  return element.tagName === \"DSO-VIEWER-GRID\";\r\n}\r\n\r\nconst buttonWidth = 40;\r\n\r\nconst tabViewBreakpoint = 768 + buttonWidth;\r\n\r\nconst minMapElementWidth = 440;\r\n\r\n/**\r\n * @slot main\r\n * @slot map\r\n * @slot filterpanel\r\n * @slot overlay\r\n * @slot document-panel - VDK only\r\n */\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewBreakpoint}px)`;\r\n\r\n  private mapElement?: HTMLDivElement;\r\n\r\n  /**\r\n   * VRK or VDK implementation.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: ViewerGridMode = \"vrk\";\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to true when document panel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelOpen = false;\r\n\r\n  /**\r\n   * Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mainSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * Set active tab in tab view.\r\n   */\r\n  @Prop()\r\n  activeTab?: ViewerGridVdkTab | ViewerGridVrkTab;\r\n\r\n  /**\r\n   * **VDK only.** Size of the panel when component loads.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  documentPanelSize: ViewerGridPanelSize = \"large\";\r\n\r\n  /**\r\n   * **VDK only.** Set to show main panel expanded.\r\n   */\r\n  @Prop()\r\n  mainPanelExpanded = false;\r\n\r\n  /**\r\n   * **VDK only.** Set to hide the main panel.\r\n   */\r\n  @Prop()\r\n  mainPanelHidden = false;\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoActiveTabSwitch!: EventEmitter<ViewerGridActiveTabSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted on interaction with sizing buttons.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted after main size animation.\r\n   */\r\n  @Event()\r\n  dsoDocumentPanelSizeChangeAnimationEnd!: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user wants to expand the main panel.\r\n   */\r\n  @Event()\r\n  dsoMainPanelExpand!: EventEmitter<ViewerGridMainExpandEvent>;\r\n\r\n  /**\r\n   * **VDK only.** Emitted when the user toggles the visibility of the main panel.\r\n   *\r\n   * Also emitted by scripting when the panels do not fit anymore.\r\n   */\r\n  @Event()\r\n  dsoMainPanelToggle!: EventEmitter<ViewerGridMainToggleEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewBreakpoint;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private get filterpanelSlot() {\r\n    return this.host.querySelector(\"[slot='filterpanel']\");\r\n  }\r\n\r\n  private get overlaySlot() {\r\n    return this.host.querySelector(\"[slot='overlay']\");\r\n  }\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  @Watch(\"documentPanelOpen\")\r\n  documentPanelOpenWatcher(open: boolean) {\r\n    if (open) {\r\n      this._checkMainPanelVisibility();\r\n    }\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _checkMainPanelVisibility() {\r\n    if (\r\n      this.mode === \"vdk\" &&\r\n      this.documentPanelOpen &&\r\n      !this.mainPanelHidden &&\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      ((this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth && !this.mainPanelExpanded) ||\r\n        (this.mapElement.clientWidth <= buttonWidth + buttonWidth && this.mainPanelExpanded))\r\n    ) {\r\n      this.dsoMainPanelToggle.emit({\r\n        hide: true,\r\n      });\r\n    }\r\n  }\r\n\r\n  private switchActiveTab = (tab: ViewerGridTab) => {\r\n    this.dsoActiveTabSwitch.emit({\r\n      tab,\r\n    });\r\n  };\r\n\r\n  private emitShrinkMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private emitExpandMain = () => {\r\n    this.dsoMainSizeChange.emit({\r\n      currentSize: this.mainSize,\r\n      nextSize: this.mainSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private shrinkDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"large\" ? \"medium\" : \"small\",\r\n    });\r\n  };\r\n\r\n  private expandDocumentPanel = () => {\r\n    this.dsoDocumentPanelSizeChange.emit({\r\n      currentSize: this.documentPanelSize,\r\n      nextSize: this.documentPanelSize === \"small\" ? \"medium\" : \"large\",\r\n    });\r\n  };\r\n\r\n  private toggleMainPanel = () => {\r\n    if (\r\n      this.mapElement instanceof HTMLDivElement &&\r\n      this.mapElement.clientWidth <= minMapElementWidth + buttonWidth + buttonWidth\r\n    ) {\r\n      this.mainSize = \"small\";\r\n    }\r\n\r\n    this.dsoMainPanelToggle.emit({\r\n      hide: !this.mainPanelHidden,\r\n    });\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  private handleFilterpanelApply = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  private handleFilterpanelCancel = (mouseEvent: MouseEvent | Event) => {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  };\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.mapElement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n\r\n    if (this.mode === \"vdk\" && this.mapElement) {\r\n      resizeObserver.unobserve(this.mapElement);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const tabLabels = this.mode === \"vdk\" ? viewerGridVdkTabs : viewerGridVrkTabs;\r\n\r\n    return (\r\n      <>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabLabels.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => this.switchActiveTab(tab)}>\r\n                    {viewerGridTabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && (this.activeTab === \"main\" || this.activeTab === \"search\"))) && (\r\n          <MainPanel\r\n            mode={this.mode}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            documentPanelOpen={this.documentPanelOpen}\r\n            mainPanelExpanded={this.mainPanelExpanded}\r\n            mainPanelHidden={this.mainPanelHidden}\r\n            shrinkMain={this.emitShrinkMain}\r\n            expandMain={this.emitExpandMain}\r\n            toggleMainPanel={this.toggleMainPanel}\r\n            dsoMainSizeChangeAnimationEnd={this.dsoMainSizeChangeAnimationEnd}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={this.handleFilterpanelApply}\r\n          onCancel={this.handleFilterpanelCancel}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\" ref={(element) => (this.mapElement = element)}>\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        {((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === \"document\")) && (\r\n          <DocumentPanel\r\n            tabView={this.tabView}\r\n            panelSize={this.documentPanelSize}\r\n            shrinkDocumentPanel={this.shrinkDocumentPanel}\r\n            expandDocumentPanel={this.expandDocumentPanel}\r\n            dsoDocumentPanelSizeChangeAnimationEnd={this.dsoDocumentPanelSizeChangeAnimationEnd}\r\n          ></DocumentPanel>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-b6af439e.entry.js

@@ -1,2 +0,0 @@
-import{g as t,f as e,r as s,h as n,H as r,a as o}from"./p-4592810d.js";const c=(t,e,s)=>{const n=t.get(e);if(!n){t.set(e,[s])}else if(!n.includes(s)){n.push(s)}};const i=(t,e)=>{let s;return(...n)=>{if(s){clearTimeout(s)}s=setTimeout((()=>{s=0;t(...n)}),e)}};const a=t=>!("isConnected"in t)||t.isConnected;const u=i((t=>{for(let e of t.keys()){t.set(e,t.get(e).filter(a))}}),2e3);const f=()=>{if(typeof t!=="function"){return{}}const s=new Map;return{dispose:()=>s.clear(),get:e=>{const n=t();if(n){c(s,e,n)}},set:t=>{const n=s.get(t);if(n){s.set(t,n.filter(e))}u(s)},reset:()=>{s.forEach((t=>t.forEach(e)));u(s)}}};const l=t=>typeof t==="function"?t():t;const d=(t,e=((t,e)=>t!==e))=>{const s=l(t);let n=new Map(Object.entries(s!==null&&s!==void 0?s:{}));const r={dispose:[],get:[],set:[],reset:[]};const o=()=>{var e;n=new Map(Object.entries((e=l(t))!==null&&e!==void 0?e:{}));r.reset.forEach((t=>t()))};const c=()=>{r.dispose.forEach((t=>t()));o()};const i=t=>{r.get.forEach((e=>e(t)));return n.get(t)};const a=(t,s)=>{const o=n.get(t);if(e(s,o,t)){n.set(t,s);r.set.forEach((e=>e(t,s,o)))}};const u=typeof Proxy==="undefined"?{}:new Proxy(s,{get(t,e){return i(e)},ownKeys(t){return Array.from(n.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,e){return n.has(e)},set(t,e,s){a(e,s);return true}});const f=(t,e)=>{r[t].push(e);return()=>{p(r[t],e)}};const d=(e,s)=>{const n=f("set",((t,n)=>{if(t===e){s(n)}}));const r=f("reset",(()=>s(l(t)[e])));return()=>{n();r()}};const h=(...t)=>{const e=t.reduce(((t,e)=>{if(e.set){t.push(f("set",e.set))}if(e.get){t.push(f("get",e.get))}if(e.reset){t.push(f("reset",e.reset))}if(e.dispose){t.push(f("dispose",e.dispose))}return t}),[]);return()=>e.forEach((t=>t()))};const g=t=>{const e=n.get(t);r.set.forEach((s=>s(t,e,e)))};return{state:u,get:i,set:a,on:f,onChange:d,use:h,dispose:c,reset:o,forceUpdate:g}};const p=(t,e)=>{const s=t.indexOf(e);if(s>=0){t[s]=t[t.length-1];t.length--}};const h=(t,e)=>{const s=d(t,e);s.use(f());return s};const g=":host{display:block}*,*::after,*::before{box-sizing:border-box}";const y=class{updateVariant(t="default"){this.accordionState.variant=t}updateReverseAlign(t){this.accordionState.reverseAlign=t}async _getState(){return this.accordionState}componentWillLoad(){this.accordionState.variant=this.variant;this.accordionState.reverseAlign=this.reverseAlign}constructor(t){s(this,t);this.variant="default";this.reverseAlign=false;const{state:e}=h({});this.accordionState=e}render(){return n(r,{class:"dso-accordion"},n("slot",null))}get host(){return o(this)}static get watchers(){return{variant:["updateVariant"],reverseAlign:["updateReverseAlign"]}}};y.style=g;export{y as dso_accordion};
-//# sourceMappingURL=p-b6af439e.entry.js.map