npm - @dso-toolkit/core - Versions diffs - 62.30.1 → 63.0.0 - Mend

@dso-toolkit/core 62.30.1 → 63.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (395) hide show

package/dist/dso-toolkit/{p-ab3fca8d.entry.js.map → p-0b390a43.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"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","DsoDatePickerLegacyStyle0","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","key","id","identifier","invalid","describedBy","onInput","onFocus","onBlur","onKeyUp","autoComplete","icon","direction","onTouchMove","onTouchStart","onTouchEnd","htmlFor","onChange","indexOf","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: start;\r\n inline-size: 100%;\r\n\r\n &:not(.dso-visible) {\r\n .dso-date__dialog {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__input {\r\n @include form-control.root();\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TOGGLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__toggle {\r\n -moz-appearance: none;\r\n -webkit-appearance: none;\r\n -webkit-user-select: none;\r\n align-items: center;\r\n appearance: none;\r\n background: core-date-picker-legacy-variables.$color-button-bg;\r\n border: 0;\r\n border-radius: 0;\r\n border-end-end-radius: core-date-picker-legacy-variables.$radius;\r\n border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n color: core-date-picker-legacy-variables.$color-icon;\r\n cursor: pointer;\r\n display: flex;\r\n block-size: core-date-picker-legacy-variables.$size;\r\n justify-content: center;\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: 0;\r\n transform: translateY(-50%);\r\n inset-block-start: 50%;\r\n user-select: none;\r\n inline-size: core-date-picker-legacy-variables.$size;\r\n z-index: zindex.$datepicker + 1;\r\n\r\n &:disabled {\r\n color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n cursor: default;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ DIALOG\r\n// ---------------------------------------------\r\n\r\n.dso-date__dialog {\r\n border-width: core-date-picker-legacy-variables.$border-width;\r\n display: flex;\r\n inset-inline-end: 0;\r\n min-inline-size: 320px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 100%;\r\n transform: scale(0.96) translateZ(0) translateY(-20px);\r\n transform-origin: top right;\r\n transition:\r\n transform 300ms ease,\r\n opacity 300ms ease,\r\n visibility 300ms ease;\r\n visibility: hidden;\r\n will-change: transform, opacity, visibility;\r\n z-index: zindex.$datepicker-dialog;\r\n\r\n @media (max-width: 35.9375em) {\r\n background: core-date-picker-legacy-variables.$overlay;\r\n inset-block-end: 0;\r\n position: fixed;\r\n inset-inline-start: 0;\r\n inset-inline-end: 0;\r\n inset-block-start: 0;\r\n transform: translateZ(0);\r\n transform-origin: bottom center;\r\n }\r\n\r\n &.is-left {\r\n inset-inline-start: units.$padding-base-inline * -1 + core-date-picker-legacy-variables.$border-width;\r\n inset-inline-end: auto;\r\n inline-size: auto;\r\n }\r\n\r\n &.is-active {\r\n opacity: 1;\r\n // The value of 1.0001 fixes a Chrome glitch with scaling\r\n transform: scale(1.0001) translateZ(0) translateY(0);\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.dso-date__dialog-content {\r\n background: core-date-picker-legacy-variables.$surface;\r\n border: 1px solid rgba(0, 0, 0, 0.1);\r\n border-radius: core-date-picker-legacy-variables.$radius;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n margin-inline-start: auto;\r\n margin-inline-end: -1px;\r\n margin-block-start: 8px;\r\n max-inline-size: 310px;\r\n min-inline-size: 290px;\r\n padding: 16px;\r\n position: relative;\r\n transform: none;\r\n inline-size: 100%;\r\n z-index: zindex.$datepicker-dialog;\r\n\r\n @media (max-width: 35.9375em) {\r\n border: 0;\r\n border-radius: 0;\r\n border-start-start-radius: core-date-picker-legacy-variables.$radius;\r\n border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n inset-block-end: 0;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n max-inline-size: none;\r\n min-block-size: 26em;\r\n opacity: 0;\r\n padding-block: 0 20px;\r\n padding-inline: 8%;\r\n position: absolute;\r\n transform: translateZ(0) translateY(100%);\r\n transition:\r\n transform core-date-picker-legacy-variables.$transition-duration ease,\r\n opacity core-date-picker-legacy-variables.$transition-duration ease,\r\n visibility core-date-picker-legacy-variables.$transition-duration ease;\r\n visibility: hidden;\r\n will-change: transform, opacity, visibility;\r\n\r\n .is-active & {\r\n opacity: 1;\r\n transform: translateZ(0) translateY(0);\r\n visibility: visible;\r\n }\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TABLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__table {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n color: core-date-picker-legacy-variables.$color-text;\r\n font-size: 1rem;\r\n font-weight: core-date-picker-legacy-variables.$font-normal;\r\n line-height: 1.25;\r\n min-inline-size: (core-date-picker-legacy-variables.$size + 2) * 7;\r\n table-layout: fixed;\r\n text-align: center;\r\n inline-size: 100%;\r\n}\r\n\r\n.dso-date__table-header {\r\n font-size: 0.875em;\r\n font-weight: core-date-picker-legacy-variables.$font-bold;\r\n block-size: 36px;\r\n line-height: 36px;\r\n text-align: center;\r\n text-decoration: none;\r\n text-transform: uppercase;\r\n}\r\n\r\n.dso-date__cell {\r\n block-size: core-date-picker-legacy-variables.$size + 2;\r\n padding: 1px;\r\n text-align: center;\r\n inline-size: core-date-picker-legacy-variables.$size + 2;\r\n}\r\n\r\n.dso-date__day {\r\n -moz-appearance: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n background: transparent;\r\n border: 0;\r\n border-radius: 50%;\r\n box-shadow: 0 0 0 1px transparent;\r\n color: core-date-picker-legacy-variables.$color-text;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-family: core-date-picker-legacy-variables.$font;\r\n font-variant-numeric: tabular-nums;\r\n font-weight: core-date-picker-legacy-variables.$font-normal;\r\n block-size: core-date-picker-legacy-variables.$size;\r\n line-height: 0;\r\n padding: 0;\r\n position: relative;\r\n text-align: center;\r\n vertical-align: middle;\r\n inline-size: core-date-picker-legacy-variables.$size;\r\n z-index: zindex.$datepicker;\r\n\r\n &.is-today {\r\n background: transparent;\r\n block-size: core-date-picker-legacy-variables.$size - 2;\r\n box-shadow: 0 0 0 1px core-date-picker-legacy-variables.$color-button;\r\n inline-size: core-date-picker-legacy-variables.$size - 2;\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n background: core-date-picker-legacy-variables.$color-button;\r\n color: core-date-picker-legacy-variables.$color-text-active;\r\n }\r\n\r\n &:focus {\r\n background: transparent;\r\n box-shadow: 0 0 0 2px colors.$bosgroen;\r\n color: core-date-picker-legacy-variables.$color-text;\r\n block-size: core-date-picker-legacy-variables.$size - 4;\r\n outline: 0;\r\n inline-size: core-date-picker-legacy-variables.$size - 4;\r\n }\r\n\r\n [aria-selected=\"true\"] & {\r\n background: core-date-picker-legacy-variables.$color-button;\r\n color: core-date-picker-legacy-variables.$color-text-active;\r\n\r\n &:focus {\r\n background: transparent;\r\n\r\n span[aria-hidden=\"true\"] {\r\n background: core-date-picker-legacy-variables.$color-button;\r\n border: 1px solid colors.$wit;\r\n line-height: core-date-picker-legacy-variables.$size - 6;\r\n }\r\n }\r\n }\r\n\r\n &:disabled {\r\n background: colors.$wit;\r\n color: core-date-picker-legacy-variables.$color-text-disabled;\r\n cursor: default;\r\n }\r\n\r\n span[aria-hidden=\"true\"] {\r\n border-radius: 50%;\r\n display: inline-block;\r\n block-size: core-date-picker-legacy-variables.$size - 4;\r\n line-height: core-date-picker-legacy-variables.$size - 4;\r\n inline-size: core-date-picker-legacy-variables.$size - 4;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ HEADER\r\n// ---------------------------------------------\r\n\r\n.dso-date__header {\r\n align-items: center;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block-end: 16px;\r\n inline-size: 100%;\r\n\r\n span {\r\n font-size: 0.875rem;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ NAVIGATION\r\n// ---------------------------------------------\r\n\r\n.dso-date__nav {\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n}\r\n\r\n.dso-date__prev,\r\n.dso-date__next {\r\n -moz-appearance: none;\r\n -webkit-appearance: none;\r\n align-items: center;\r\n appearance: none;\r\n background: core-date-picker-legacy-variables.$color-button-bg;\r\n border: 1px solid core-date-picker-legacy-variables.$color-button;\r\n border-radius: core-date-picker-legacy-variables.$radius;\r\n box-sizing: border-box;\r\n color: core-date-picker-legacy-variables.$color-button;\r\n cursor: pointer;\r\n display: inline-flex;\r\n font-size: 1em;\r\n block-size: 32px;\r\n justify-content: center;\r\n margin-inline-start: 8px;\r\n padding: 0;\r\n inline-size: 32px;\r\n\r\n @media (max-width: 35.9375em) {\r\n block-size: 40px;\r\n inline-size: 40px;\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n background-color: core-date-picker-legacy-variables.$color-button;\r\n color: core-date-picker-legacy-variables.$color-text-active;\r\n }\r\n\r\n &:focus {\r\n background: core-date-picker-legacy-variables.$color-button-bg;\r\n color: core-date-picker-legacy-variables.$color-button;\r\n }\r\n\r\n &:disabled {\r\n &,\r\n &:hover {\r\n background-color: colors.$wit;\r\n border-color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n opacity: 1;\r\n }\r\n }\r\n\r\n svg {\r\n margin-block: 0; // left this in, just to be sure ;)\r\n margin-inline: auto;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ SELECT\r\n// ---------------------------------------------\r\n\r\n.dso-date__select {\r\n display: inline-flex;\r\n block-size: units.$u1 * 4 - 4;\r\n line-height: units.$u1 * 4 - 4;\r\n position: relative;\r\n\r\n span {\r\n margin-inline-end: 4px;\r\n }\r\n\r\n select {\r\n color: core-date-picker-legacy-variables.$color-primary;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$datepicker + 1;\r\n\r\n &:focus + .dso-date__select-label {\r\n box-shadow: 0 0 0 2px core-date-picker-legacy-variables.$color-primary;\r\n }\r\n\r\n &:disabled {\r\n color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__select-label {\r\n align-items: center;\r\n border-radius: core-date-picker-legacy-variables.$radius;\r\n color: core-date-picker-legacy-variables.$select;\r\n display: flex;\r\n padding-block: 0;\r\n padding-inline: 8px 4px;\r\n pointer-events: none;\r\n position: relative;\r\n inline-size: 100%;\r\n z-index: zindex.$datepicker;\r\n\r\n span {\r\n font-size: 1.25rem;\r\n font-weight: core-date-picker-legacy-variables.$font-bold;\r\n line-height: 1.25;\r\n }\r\n\r\n svg {\r\n inline-size: 16px;\r\n block-size: 16px;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ MOBILE\r\n// ---------------------------------------------\r\n\r\n.dso-date__mobile {\r\n align-items: center;\r\n border-block-end: 1px solid rgba(0, 0, 0, 0.12);\r\n display: flex;\r\n font-size: 1em;\r\n justify-content: space-between;\r\n margin-block-end: 20px;\r\n margin-inline-start: -10%;\r\n overflow: hidden;\r\n padding-block: 12px;\r\n padding-inline: 20px;\r\n position: relative;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n inline-size: 120%;\r\n\r\n @media (min-width: 36em) {\r\n border: 0;\r\n margin: 0;\r\n overflow: visible;\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: -16px;\r\n inset-block-start: -16px;\r\n inline-size: auto;\r\n }\r\n}\r\n\r\n.dso-date__mobile-heading {\r\n display: inline-block;\r\n font-weight: core-date-picker-legacy-variables.$font-bold;\r\n max-inline-size: 84%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n\r\n @media (min-width: 36em) {\r\n display: none;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ CLOSE\r\n// ---------------------------------------------\r\n\r\n.dso-date__close {\r\n -webkit-appearance: none;\r\n align-items: center;\r\n appearance: none;\r\n background-color: colors.$wit;\r\n border: 0;\r\n border-radius: 50%;\r\n color: core-date-picker-legacy-variables.$color-icon;\r\n cursor: pointer;\r\n display: flex;\r\n font-size: 1em;\r\n block-size: units.$u1 * 4;\r\n justify-content: center;\r\n margin-inline-end: -4px;\r\n padding: 0;\r\n inline-size: units.$u1 * 4;\r\n\r\n @media (min-width: 36em) {\r\n margin-inline-end: 0;\r\n opacity: 0;\r\n }\r\n\r\n &:focus {\r\n box-shadow: 0 0 0 2px colors.$bosgroen;\r\n outline: none;\r\n\r\n @media (min-width: 36em) {\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ VISUALLY HIDDEN\r\n// ---------------------------------------------\r\n\r\n.dso-date__vhidden {\r\n border: 0;\r\n clip: rect(1px, 1px, 1px, 1px);\r\n block-size: 1px;\r\n overflow: hidden;\r\n padding: 0;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 1px;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n 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 // eslint-disable-next-line @stencil-community/reserved-member-names\r\n role: string \| null = null;\r\n\r\n /\r\n Forces the opening direction of the calendar modal to be always left or right.\r\n * This setting can be useful when the input is smaller than the opening date picker\r\n * would be as by default the picker always opens towards right.\r\n /\r\n @Prop()\r\n direction: DsoDatePickerLegacyDirection = \"right\";\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop()\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DsoDatePickerLegacyChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DsoDatePickerLegacyKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DsoDatePickerLegacyKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n /\r\n @Event()\r\n dsoFocus!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\r\n\r\n /\r\n Component event handling.\r\n /\r\n @Listen(\"click\", { target: \"document\", capture: true })\r\n handleDocumentClick(e: MouseEvent) {\r\n if (!this.open) {\r\n return;\r\n }\r\n\r\n const path = e.composedPath();\r\n\r\n for (const target of path) {\r\n if (target instanceof Node && this.element.contains(target)) {\r\n return;\r\n }\r\n }\r\n\r\n this.hide(false);\r\n }\r\n\r\n /\r\n Sets focus on the date picker's input. Use this method instead of the global `focus()`.\r\n /\r\n @Method()\r\n async setFocus() {\r\n return this.datePickerLegacyInput?.focus();\r\n }\r\n\r\n /\r\n Public methods API\r\n /\r\n\r\n /\r\n Show the calendar modal, moving focus to the calendar inside.\r\n /\r\n @Method()\r\n async show() {\r\n if (typeof this.hideTimeoutId !== \"undefined\") {\r\n clearTimeout(this.hideTimeoutId);\r\n }\r\n\r\n this.visible = true;\r\n\r\n setTimeout(() => {\r\n this.open = true;\r\n this.setFocusedDay(parseDutchDate(this.value) \|\| new Date());\r\n\r\n if (typeof this.focusTimeoutId !== \"undefined\") {\r\n clearTimeout(this.focusTimeoutId);\r\n }\r\n\r\n this.focusTimeoutId = setTimeout(() => this.monthSelectNode?.focus(), TRANSITION_MS);\r\n });\r\n }\r\n\r\n /\r\n Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\r\n * returning to the date picker's button. Default is true.\r\n /\r\n @Method()\r\n async hide(moveFocusToButton = true) {\r\n this.open = false;\r\n\r\n // in cases where calendar is quickly shown and hidden\r\n // we should avoid moving focus to the button\r\n if (typeof this.focusTimeoutId !== \"undefined\") {\r\n clearTimeout(this.focusTimeoutId);\r\n }\r\n\r\n this.hideTimeoutId = setTimeout(() => {\r\n if (moveFocusToButton && this.datePickerLegacyButton) {\r\n this.datePickerLegacyButton.focus();\r\n }\r\n\r\n this.visible = false;\r\n }, TRANSITION_MS + 200);\r\n }\r\n\r\n /\r\n Local methods.\r\n /\r\n private enableActiveFocus = () => {\r\n this.activeFocus = true;\r\n };\r\n\r\n private disableActiveFocus = () => {\r\n this.activeFocus = false;\r\n };\r\n\r\n private addDays(days: number) {\r\n this.setFocusedDay(addDays(this.focusedDay, days));\r\n }\r\n\r\n private addMonths(months: number) {\r\n this.setMonth(this.focusedDay.getMonth() + months);\r\n }\r\n\r\n private addYears(years: number) {\r\n this.setYear(this.focusedDay.getFullYear() + years);\r\n }\r\n\r\n private startOfWeek() {\r\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n }\r\n\r\n private endOfWeek() {\r\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n }\r\n\r\n private setMonth(month: number) {\r\n const min = setMonth(startOfMonth(this.focusedDay), month);\r\n const max = endOfMonth(min);\r\n const date = setMonth(this.focusedDay, month);\r\n\r\n this.setFocusedDay(clamp(date, min, max));\r\n }\r\n\r\n private setYear(year: number) {\r\n const min = setYear(startOfMonth(this.focusedDay), year);\r\n const max = endOfMonth(min);\r\n const date = setYear(this.focusedDay, year);\r\n\r\n this.setFocusedDay(clamp(date, min, max));\r\n }\r\n\r\n private setFocusedDay(day: Date) {\r\n this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));\r\n }\r\n\r\n private toggleOpen = (e: Event) => {\r\n e.preventDefault();\r\n 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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","ignoreList":[]}
1	+ {"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","DsoDatePickerLegacyStyle0","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","key","id","identifier","invalid","describedBy","onInput","onFocus","onBlur","onKeyUp","autoComplete","icon","direction","onTouchMove","onTouchStart","onTouchEnd","htmlFor","onChange","indexOf","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: start;\r\n inline-size: 100%;\r\n\r\n &:not(.dso-visible) {\r\n .dso-date__dialog {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__input {\r\n @include form-control.root();\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TOGGLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__toggle {\r\n -moz-appearance: none;\r\n -webkit-appearance: none;\r\n -webkit-user-select: none;\r\n align-items: center;\r\n appearance: none;\r\n background: core-date-picker-legacy-variables.$color-button-bg;\r\n border: 0;\r\n border-radius: 0;\r\n border-end-end-radius: core-date-picker-legacy-variables.$radius;\r\n border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n color: core-date-picker-legacy-variables.$color-icon;\r\n cursor: pointer;\r\n display: flex;\r\n block-size: core-date-picker-legacy-variables.$size;\r\n justify-content: center;\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: 0;\r\n transform: translateY(-50%);\r\n inset-block-start: 50%;\r\n user-select: none;\r\n inline-size: core-date-picker-legacy-variables.$size;\r\n z-index: zindex.$datepicker + 1;\r\n\r\n &:disabled {\r\n color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n cursor: default;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ DIALOG\r\n// ---------------------------------------------\r\n\r\n.dso-date__dialog {\r\n border-width: core-date-picker-legacy-variables.$border-width;\r\n display: flex;\r\n inset-inline-end: 0;\r\n min-inline-size: 320px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 100%;\r\n transform: scale(0.96) translateZ(0) translateY(-20px);\r\n transform-origin: top right;\r\n transition:\r\n transform 300ms ease,\r\n opacity 300ms ease,\r\n visibility 300ms ease;\r\n visibility: hidden;\r\n will-change: transform, opacity, visibility;\r\n z-index: zindex.$datepicker-dialog;\r\n\r\n @media (max-width: 35.9375em) {\r\n background: core-date-picker-legacy-variables.$overlay;\r\n inset-block-end: 0;\r\n position: fixed;\r\n inset-inline-start: 0;\r\n inset-inline-end: 0;\r\n inset-block-start: 0;\r\n transform: translateZ(0);\r\n transform-origin: bottom center;\r\n }\r\n\r\n &.is-left {\r\n inset-inline-start: units.$padding-base-inline * -1 + core-date-picker-legacy-variables.$border-width;\r\n inset-inline-end: auto;\r\n inline-size: auto;\r\n }\r\n\r\n &.is-active {\r\n opacity: 1;\r\n // The value of 1.0001 fixes a Chrome glitch with scaling\r\n transform: scale(1.0001) translateZ(0) translateY(0);\r\n visibility: visible;\r\n }\r\n}\r\n\r\n.dso-date__dialog-content {\r\n background: core-date-picker-legacy-variables.$surface;\r\n border: 1px solid rgba(0, 0, 0, 0.1);\r\n border-radius: core-date-picker-legacy-variables.$radius;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n margin-inline-start: auto;\r\n margin-inline-end: -1px;\r\n margin-block-start: 8px;\r\n max-inline-size: 310px;\r\n min-inline-size: 290px;\r\n padding: 16px;\r\n position: relative;\r\n transform: none;\r\n inline-size: 100%;\r\n z-index: zindex.$datepicker-dialog;\r\n\r\n @media (max-width: 35.9375em) {\r\n border: 0;\r\n border-radius: 0;\r\n border-start-start-radius: core-date-picker-legacy-variables.$radius;\r\n border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n inset-block-end: 0;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n max-inline-size: none;\r\n min-block-size: 26em;\r\n opacity: 0;\r\n padding-block: 0 20px;\r\n padding-inline: 8%;\r\n position: absolute;\r\n transform: translateZ(0) translateY(100%);\r\n transition:\r\n transform core-date-picker-legacy-variables.$transition-duration ease,\r\n opacity core-date-picker-legacy-variables.$transition-duration ease,\r\n visibility core-date-picker-legacy-variables.$transition-duration ease;\r\n visibility: hidden;\r\n will-change: transform, opacity, visibility;\r\n\r\n .is-active & {\r\n opacity: 1;\r\n transform: translateZ(0) translateY(0);\r\n visibility: visible;\r\n }\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TABLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__table {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n color: core-date-picker-legacy-variables.$color-text;\r\n font-size: 1rem;\r\n font-weight: core-date-picker-legacy-variables.$font-normal;\r\n line-height: 1.25;\r\n min-inline-size: (core-date-picker-legacy-variables.$size + 2) * 7;\r\n table-layout: fixed;\r\n text-align: center;\r\n inline-size: 100%;\r\n}\r\n\r\n.dso-date__table-header {\r\n font-size: 0.875em;\r\n font-weight: core-date-picker-legacy-variables.$font-bold;\r\n block-size: 36px;\r\n line-height: 36px;\r\n text-align: center;\r\n text-decoration: none;\r\n text-transform: uppercase;\r\n}\r\n\r\n.dso-date__cell {\r\n block-size: core-date-picker-legacy-variables.$size + 2;\r\n padding: 1px;\r\n text-align: center;\r\n inline-size: core-date-picker-legacy-variables.$size + 2;\r\n}\r\n\r\n.dso-date__day {\r\n -moz-appearance: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n background: transparent;\r\n border: 0;\r\n border-radius: 50%;\r\n box-shadow: 0 0 0 1px transparent;\r\n color: core-date-picker-legacy-variables.$color-text;\r\n cursor: pointer;\r\n display: inline-block;\r\n font-family: core-date-picker-legacy-variables.$font;\r\n font-variant-numeric: tabular-nums;\r\n font-weight: core-date-picker-legacy-variables.$font-normal;\r\n block-size: core-date-picker-legacy-variables.$size;\r\n line-height: 0;\r\n padding: 0;\r\n position: relative;\r\n text-align: center;\r\n vertical-align: middle;\r\n inline-size: core-date-picker-legacy-variables.$size;\r\n z-index: zindex.$datepicker;\r\n\r\n &.is-today {\r\n background: transparent;\r\n block-size: core-date-picker-legacy-variables.$size - 2;\r\n box-shadow: 0 0 0 1px core-date-picker-legacy-variables.$color-button;\r\n inline-size: core-date-picker-legacy-variables.$size - 2;\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n background: core-date-picker-legacy-variables.$color-button;\r\n color: core-date-picker-legacy-variables.$color-text-active;\r\n }\r\n\r\n &:focus {\r\n background: transparent;\r\n box-shadow: 0 0 0 2px colors.$bosgroen;\r\n color: core-date-picker-legacy-variables.$color-text;\r\n block-size: core-date-picker-legacy-variables.$size - 4;\r\n outline: 0;\r\n inline-size: core-date-picker-legacy-variables.$size - 4;\r\n }\r\n\r\n [aria-selected=\"true\"] & {\r\n background: core-date-picker-legacy-variables.$color-button;\r\n color: core-date-picker-legacy-variables.$color-text-active;\r\n\r\n &:focus {\r\n background: transparent;\r\n\r\n span[aria-hidden=\"true\"] {\r\n background: core-date-picker-legacy-variables.$color-button;\r\n border: 1px solid colors.$wit;\r\n line-height: core-date-picker-legacy-variables.$size - 6;\r\n }\r\n }\r\n }\r\n\r\n &:disabled {\r\n background: colors.$wit;\r\n color: core-date-picker-legacy-variables.$color-text-disabled;\r\n cursor: default;\r\n }\r\n\r\n span[aria-hidden=\"true\"] {\r\n border-radius: 50%;\r\n display: inline-block;\r\n block-size: core-date-picker-legacy-variables.$size - 4;\r\n line-height: core-date-picker-legacy-variables.$size - 4;\r\n inline-size: core-date-picker-legacy-variables.$size - 4;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ HEADER\r\n// ---------------------------------------------\r\n\r\n.dso-date__header {\r\n align-items: center;\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block-end: 16px;\r\n inline-size: 100%;\r\n\r\n span {\r\n font-size: 0.875rem;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ NAVIGATION\r\n// ---------------------------------------------\r\n\r\n.dso-date__nav {\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n}\r\n\r\n.dso-date__prev,\r\n.dso-date__next {\r\n -moz-appearance: none;\r\n -webkit-appearance: none;\r\n align-items: center;\r\n appearance: none;\r\n background: core-date-picker-legacy-variables.$color-button-bg;\r\n border: 1px solid core-date-picker-legacy-variables.$color-button;\r\n border-radius: core-date-picker-legacy-variables.$radius;\r\n box-sizing: border-box;\r\n color: core-date-picker-legacy-variables.$color-button;\r\n cursor: pointer;\r\n display: inline-flex;\r\n font-size: 1em;\r\n block-size: 32px;\r\n justify-content: center;\r\n margin-inline-start: 8px;\r\n padding: 0;\r\n inline-size: 32px;\r\n\r\n @media (max-width: 35.9375em) {\r\n block-size: 40px;\r\n inline-size: 40px;\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n background-color: core-date-picker-legacy-variables.$color-button;\r\n color: core-date-picker-legacy-variables.$color-text-active;\r\n }\r\n\r\n &:focus {\r\n background: core-date-picker-legacy-variables.$color-button-bg;\r\n color: core-date-picker-legacy-variables.$color-button;\r\n }\r\n\r\n &:disabled {\r\n &,\r\n &:hover {\r\n background-color: colors.$wit;\r\n border-color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n opacity: 1;\r\n }\r\n }\r\n\r\n svg {\r\n margin-block: 0; // left this in, just to be sure ;)\r\n margin-inline: auto;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ SELECT\r\n// ---------------------------------------------\r\n\r\n.dso-date__select {\r\n display: inline-flex;\r\n block-size: units.$u1 * 4 - 4;\r\n line-height: units.$u1 * 4 - 4;\r\n position: relative;\r\n\r\n span {\r\n margin-inline-end: 4px;\r\n }\r\n\r\n select {\r\n color: core-date-picker-legacy-variables.$color-primary;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$datepicker + 1;\r\n\r\n &:focus + .dso-date__select-label {\r\n box-shadow: 0 0 0 2px core-date-picker-legacy-variables.$color-primary;\r\n }\r\n\r\n &:disabled {\r\n color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__select-label {\r\n align-items: center;\r\n border-radius: core-date-picker-legacy-variables.$radius;\r\n color: core-date-picker-legacy-variables.$select;\r\n display: flex;\r\n padding-block: 0;\r\n padding-inline: 8px 4px;\r\n pointer-events: none;\r\n position: relative;\r\n inline-size: 100%;\r\n z-index: zindex.$datepicker;\r\n\r\n span {\r\n font-size: 1.25rem;\r\n font-weight: core-date-picker-legacy-variables.$font-bold;\r\n line-height: 1.25;\r\n }\r\n\r\n svg {\r\n inline-size: 16px;\r\n block-size: 16px;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ MOBILE\r\n// ---------------------------------------------\r\n\r\n.dso-date__mobile {\r\n align-items: center;\r\n border-block-end: 1px solid rgba(0, 0, 0, 0.12);\r\n display: flex;\r\n font-size: 1em;\r\n justify-content: space-between;\r\n margin-block-end: 20px;\r\n margin-inline-start: -10%;\r\n overflow: hidden;\r\n padding-block: 12px;\r\n padding-inline: 20px;\r\n position: relative;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n inline-size: 120%;\r\n\r\n @media (min-width: 36em) {\r\n border: 0;\r\n margin: 0;\r\n overflow: visible;\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: -16px;\r\n inset-block-start: -16px;\r\n inline-size: auto;\r\n }\r\n}\r\n\r\n.dso-date__mobile-heading {\r\n display: inline-block;\r\n font-weight: core-date-picker-legacy-variables.$font-bold;\r\n max-inline-size: 84%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n\r\n @media (min-width: 36em) {\r\n display: none;\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ CLOSE\r\n// ---------------------------------------------\r\n\r\n.dso-date__close {\r\n -webkit-appearance: none;\r\n align-items: center;\r\n appearance: none;\r\n background-color: colors.$wit;\r\n border: 0;\r\n border-radius: 50%;\r\n color: core-date-picker-legacy-variables.$color-icon;\r\n cursor: pointer;\r\n display: flex;\r\n font-size: 1em;\r\n block-size: units.$u1 * 4;\r\n justify-content: center;\r\n margin-inline-end: -4px;\r\n padding: 0;\r\n inline-size: units.$u1 * 4;\r\n\r\n @media (min-width: 36em) {\r\n margin-inline-end: 0;\r\n opacity: 0;\r\n }\r\n\r\n &:focus {\r\n box-shadow: 0 0 0 2px colors.$bosgroen;\r\n outline: none;\r\n\r\n @media (min-width: 36em) {\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ VISUALLY HIDDEN\r\n// ---------------------------------------------\r\n\r\n.dso-date__vhidden {\r\n border: 0;\r\n clip: rect(1px, 1px, 1px, 1px);\r\n block-size: 1px;\r\n overflow: hidden;\r\n padding: 0;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 1px;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n 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 // eslint-disable-next-line @stencil-community/reserved-member-names\r\n role: string \| null = null;\r\n\r\n /\r\n Forces the opening direction of the calendar modal to be always left or right.\r\n * This setting can be useful when the input is smaller than the opening date picker\r\n * would be as by default the picker always opens towards right.\r\n /\r\n @Prop()\r\n direction: DsoDatePickerLegacyDirection = \"right\";\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop()\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DsoDatePickerLegacyChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DsoDatePickerLegacyKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DsoDatePickerLegacyKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n /\r\n @Event()\r\n dsoFocus!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\r\n\r\n /\r\n Component event handling.\r\n /\r\n @Listen(\"click\", { target: \"document\", capture: true })\r\n handleDocumentClick(e: MouseEvent) {\r\n if (!this.open) {\r\n return;\r\n }\r\n\r\n const path = e.composedPath();\r\n\r\n for (const target of path) {\r\n if (target instanceof Node && this.element.contains(target)) {\r\n return;\r\n }\r\n }\r\n\r\n this.hide(false);\r\n }\r\n\r\n /\r\n Sets focus on the date picker's input. Use this method instead of the global `focus()`.\r\n /\r\n @Method()\r\n async setFocus() {\r\n return this.datePickerLegacyInput?.focus();\r\n }\r\n\r\n /\r\n Public methods API\r\n /\r\n\r\n /\r\n Show the calendar modal, moving focus to the calendar inside.\r\n /\r\n @Method()\r\n async show() {\r\n if (typeof this.hideTimeoutId !== \"undefined\") {\r\n clearTimeout(this.hideTimeoutId);\r\n }\r\n\r\n this.visible = true;\r\n\r\n setTimeout(() => {\r\n this.open = true;\r\n this.setFocusedDay(parseDutchDate(this.value) \|\| new Date());\r\n\r\n if (typeof this.focusTimeoutId !== \"undefined\") {\r\n clearTimeout(this.focusTimeoutId);\r\n }\r\n\r\n this.focusTimeoutId = setTimeout(() => this.monthSelectNode?.focus(), TRANSITION_MS);\r\n });\r\n }\r\n\r\n /\r\n Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\r\n * returning to the date picker's button. Default is true.\r\n /\r\n @Method()\r\n async hide(moveFocusToButton = true) {\r\n this.open = false;\r\n\r\n // in cases where calendar is quickly shown and hidden\r\n // we should avoid moving focus to the button\r\n if (typeof this.focusTimeoutId !== \"undefined\") {\r\n clearTimeout(this.focusTimeoutId);\r\n }\r\n\r\n this.hideTimeoutId = setTimeout(() => {\r\n if (moveFocusToButton && this.datePickerLegacyButton) {\r\n this.datePickerLegacyButton.focus();\r\n }\r\n\r\n this.visible = false;\r\n }, TRANSITION_MS + 200);\r\n }\r\n\r\n /\r\n Local methods.\r\n /\r\n private enableActiveFocus = () => {\r\n this.activeFocus = true;\r\n };\r\n\r\n private disableActiveFocus = () => {\r\n this.activeFocus = false;\r\n };\r\n\r\n private addDays(days: number) {\r\n this.setFocusedDay(addDays(this.focusedDay, days));\r\n }\r\n\r\n private addMonths(months: number) {\r\n this.setMonth(this.focusedDay.getMonth() + months);\r\n }\r\n\r\n private addYears(years: number) {\r\n this.setYear(this.focusedDay.getFullYear() + years);\r\n }\r\n\r\n private startOfWeek() {\r\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n }\r\n\r\n private endOfWeek() {\r\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n }\r\n\r\n private setMonth(month: number) {\r\n const min = setMonth(startOfMonth(this.focusedDay), month);\r\n const max = endOfMonth(min);\r\n const date = setMonth(this.focusedDay, month);\r\n\r\n this.setFocusedDay(clamp(date, min, max));\r\n }\r\n\r\n private setYear(year: number) {\r\n const min = setYear(startOfMonth(this.focusedDay), year);\r\n const max = endOfMonth(min);\r\n const date = setYear(this.focusedDay, year);\r\n\r\n this.setFocusedDay(clamp(date, min, max));\r\n }\r\n\r\n private setFocusedDay(day: Date) {\r\n this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));\r\n }\r\n\r\n private toggleOpen = (e: Event) => {\r\n e.preventDefault();\r\n if (this.open) {\r\n this.hide(false);\r\n } else {\r\n this.show();\r\n }\r\n };\r\n\r\n private handleEscKey = (event: KeyboardEvent) => {\r\n if (event.keyCode === keyCode.ESC) {\r\n this.hide();\r\n }\r\n };\r\n\r\n private handleBlur = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n this.dsoBlur.emit({\r\n component: \"dso-date-picker-legacy\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker-legacy\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker-legacy\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleFocus = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n component: \"dso-date-picker-legacy\",\r\n });\r\n };\r\n\r\n private handleTouchStart = (event: TouchEvent) => {\r\n const touch = event.changedTouches[0];\r\n if (!touch) {\r\n throw new Error(\"No touch found\");\r\n }\r\n\r\n this.initialTouchX = touch.pageX;\r\n this.initialTouchY = touch.pageY;\r\n };\r\n\r\n private handleTouchMove = (event: TouchEvent) => {\r\n event.preventDefault();\r\n };\r\n\r\n private handleTouchEnd = (event: TouchEvent) => {\r\n const touch = event.changedTouches[0];\r\n if (!touch) {\r\n throw new Error(\"No touch found\");\r\n }\r\n\r\n const distX = touch.pageX - (this.initialTouchX ?? 0); // get horizontal dist traveled\r\n const distY = touch.pageY - (this.initialTouchY ?? 0); // get vertical dist traveled\r\n const threshold = 70;\r\n\r\n const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\r\n const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;\r\n\r\n if (isHorizontalSwipe) {\r\n this.addMonths(distX < 0 ? 1 : -1);\r\n } else if (isDownwardsSwipe) {\r\n this.hide(false);\r\n event.preventDefault();\r\n }\r\n\r\n this.initialTouchY = undefined;\r\n this.initialTouchX = undefined;\r\n };\r\n\r\n private handleNextMonthClick = (event: MouseEvent) => {\r\n event.preventDefault();\r\n this.addMonths(1);\r\n };\r\n\r\n private handlePreviousMonthClick = (event: MouseEvent) => {\r\n event.preventDefault();\r\n this.addMonths(-1);\r\n };\r\n\r\n private handleFirstFocusableKeydown = (event: KeyboardEvent) => {\r\n // this ensures focus is trapped inside the dialog\r\n if (event.keyCode === keyCode.TAB && event.shiftKey) {\r\n this.focusedDayNode?.focus();\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n private handleKeyboardNavigation = (event: KeyboardEvent) => {\r\n // handle tab separately, since it needs to be treated\r\n // differently to other keyboard interactions\r\n if (event.keyCode === keyCode.TAB && !event.shiftKey) {\r\n event.preventDefault();\r\n this.firstFocusableElement?.focus();\r\n return;\r\n }\r\n\r\n let handled = true;\r\n\r\n switch (event.keyCode) {\r\n case keyCode.RIGHT:\r\n this.addDays(1);\r\n break;\r\n case keyCode.LEFT:\r\n this.addDays(-1);\r\n break;\r\n case keyCode.DOWN:\r\n this.addDays(7);\r\n break;\r\n case keyCode.UP:\r\n this.addDays(-7);\r\n break;\r\n case keyCode.PAGE_UP:\r\n if (event.shiftKey) {\r\n this.addYears(-1);\r\n } else {\r\n this.addMonths(-1);\r\n }\r\n break;\r\n case keyCode.PAGE_DOWN:\r\n if (event.shiftKey) {\r\n this.addYears(1);\r\n } else {\r\n this.addMonths(1);\r\n }\r\n break;\r\n case keyCode.HOME:\r\n this.startOfWeek();\r\n break;\r\n case keyCode.END:\r\n this.endOfWeek();\r\n break;\r\n default:\r\n handled = false;\r\n }\r\n\r\n if (handled) {\r\n event.preventDefault();\r\n this.enableActiveFocus();\r\n }\r\n };\r\n\r\n private handleDaySelect = (_event: MouseEvent, day: Date) => {\r\n if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {\r\n return;\r\n }\r\n\r\n if (day.getMonth() === this.focusedDay.getMonth()) {\r\n this.setValue(day);\r\n this.hide();\r\n } else {\r\n this.setFocusedDay(day);\r\n }\r\n };\r\n\r\n private handleMonthSelect = (e: Event) => {\r\n // Todo\r\n if (e.target instanceof HTMLSelectElement) {\r\n this.setMonth(parseInt(e.target.value, 10));\r\n }\r\n };\r\n\r\n private handleYearSelect = (e: Event) => {\r\n if (e.target instanceof HTMLSelectElement) {\r\n this.setYear(parseInt(e.target.value, 10));\r\n }\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target as HTMLInputElement;\r\n\r\n const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);\r\n\r\n this.setValue(cleanedValue);\r\n };\r\n\r\n private setValue(value: Date \| string) {\r\n const event = this.prepareEvent(value);\r\n\r\n this.value = typeof value === \"string\" ? value : event.value;\r\n\r\n if (this.value !== this.previousValue) {\r\n this.dsoDateChange.emit(event);\r\n this.previousValue = this.value;\r\n }\r\n }\r\n\r\n private prepareEvent = (value: Date \| string): DsoDatePickerLegacyChangeEvent => {\r\n const event: DsoDatePickerLegacyChangeEvent = {\r\n component: \"dso-date-picker-legacy\",\r\n value: \"\",\r\n valueAsDate: undefined,\r\n };\r\n\r\n if (value instanceof Date) {\r\n event.valueAsDate = value;\r\n } else {\r\n event.value = value;\r\n event.valueAsDate = parseDutchDate(value);\r\n }\r\n\r\n if (event.valueAsDate) {\r\n event.value = printDutchDate(event.valueAsDate);\r\n }\r\n\r\n if (!event.valueAsDate && this.required) {\r\n event.error = \"required\";\r\n }\r\n\r\n if (event.value && !event.valueAsDate) {\r\n event.error = \"invalid\";\r\n }\r\n\r\n if (event.valueAsDate && (this.min \|\| this.max)) {\r\n const min = parseDutchDate(this.min);\r\n const max = parseDutchDate(this.max);\r\n const clampValue = clamp(event.valueAsDate, min, max);\r\n\r\n if (clampValue !== event.valueAsDate && clampValue === min) {\r\n event.valueAsDate = undefined;\r\n event.error = \"min-range\";\r\n } else if (clampValue !== event.valueAsDate && clampValue === max) {\r\n event.valueAsDate = undefined;\r\n event.error = \"max-range\";\r\n }\r\n }\r\n\r\n return event;\r\n };\r\n\r\n private processFocusedDayNode = (element: HTMLButtonElement) => {\r\n this.focusedDayNode = element;\r\n\r\n if (this.activeFocus && this.open) {\r\n setTimeout(() => element.focus(), 0);\r\n }\r\n };\r\n\r\n componentWillLoad(): void \| Promise<void> {\r\n const minDate = parseDutchDate(this.min);\r\n const maxDate = parseDutchDate(this.max);\r\n\r\n if (minDate && minDate > this.focusedDay) {\r\n this.focusedDay = minDate;\r\n }\r\n\r\n if (maxDate && maxDate < this.focusedDay) {\r\n this.focusedDay = maxDate;\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const valueAsDate = parseDutchDate(this.value);\r\n if (valueAsDate) {\r\n this.previousValue = this.value = printDutchDate(valueAsDate);\r\n }\r\n\r\n if (this.dsoAutofocus) {\r\n this.setFocus();\r\n }\r\n }\r\n\r\n /\r\n render() function\r\n * Always the last one in the class.\r\n */\r\n render() {\r\n const valueAsDate = parseDutchDate(this.value);\r\n const formattedDate = valueAsDate && printDutchDate(valueAsDate);\r\n const selectedYear = (valueAsDate \|\| this.focusedDay).getFullYear();\r\n const focusedMonth = this.focusedDay.getMonth();\r\n const focusedYear = this.focusedDay.getFullYear();\r\n\r\n const minDate = parseDutchDate(this.min);\r\n const maxDate = parseDutchDate(this.max);\r\n const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;\r\n const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;\r\n\r\n let minYear = selectedYear - 10;\r\n let maxYear = selectedYear + 10;\r\n if (minDate) {\r\n minYear = Math.max(minYear, minDate.getFullYear());\r\n }\r\n if (maxDate) {\r\n maxYear = Math.min(maxYear, maxDate.getFullYear());\r\n }\r\n\r\n return (\r\n <Host>\r\n <div class={{ \"dso-date\": true, \"dso-visible\": this.visible }}>\r\n <div class=\"dso-date__input-wrapper\">\r\n <input\r\n class=\"dso-date__input\"\r\n value={this.value}\r\n placeholder={this.localization.placeholder}\r\n id={this.identifier}\r\n disabled={this.disabled}\r\n role={this.role ?? undefined}\r\n required={this.required ? true : undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n onInput={this.handleInputChange}\r\n onFocus={this.handleFocus}\r\n onBlur={this.handleBlur}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n autoComplete=\"off\"\r\n ref={(element) => (this.datePickerLegacyInput = element)}\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"dso-date__toggle\"\r\n onClick={this.toggleOpen}\r\n disabled={this.disabled}\r\n ref={(element) => (this.datePickerLegacyButton = element)}\r\n >\r\n <span class=\"dso-date__toggle-icon\">\r\n <dso-icon icon=\"calendar\"></dso-icon>\r\n </span>\r\n <span class=\"dso-date__vhidden\">\r\n {this.localization.buttonLabel}\r\n {formattedDate && (\r\n <span>\r\n , {this.localization.selectedDateMessage} {formattedDate}\r\n </span>\r\n )}\r\n </span>\r\n </button>\r\n </div>\r\n\r\n <div\r\n class={{\r\n \"dso-date__dialog\": true,\r\n \"is-left\": this.direction === \"left\",\r\n \"is-active\": this.open,\r\n }}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-hidden={this.open ? \"false\" : \"true\"}\r\n aria-labelledby={this.dialogLabelId}\r\n onTouchMove={this.handleTouchMove}\r\n onTouchStart={this.handleTouchStart}\r\n onTouchEnd={this.handleTouchEnd}\r\n >\r\n <div class=\"dso-date__dialog-content\" onKeyDown={this.handleEscKey}>\r\n <div class=\"dso-date__vhidden dso-date__instructions\" aria-live=\"polite\">\r\n {this.localization.keyboardInstruction}\r\n </div>\r\n <div class=\"dso-date__mobile\" onFocusin={this.disableActiveFocus}>\r\n <label class=\"dso-date__mobile-heading\">{this.localization.calendarHeading}</label>\r\n <button\r\n class=\"dso-date__close\"\r\n ref={(element) => (this.firstFocusableElement = element)}\r\n onKeyDown={this.handleFirstFocusableKeydown}\r\n onClick={() => this.hide()}\r\n type=\"button\"\r\n >\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"dso-date__vhidden\">{this.localization.closeLabel}</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-date__header\" onFocusin={this.disableActiveFocus}>\r\n <div>\r\n <h2 id={this.dialogLabelId} class=\"dso-date__vhidden\" aria-live=\"polite\">\r\n {this.localization.monthNames[focusedMonth]} {this.focusedDay.getFullYear()}\r\n </h2>\r\n\r\n <label htmlFor={this.monthSelectId} class=\"dso-date__vhidden\">\r\n {this.localization.monthSelectLabel}\r\n </label>\r\n <div class=\"dso-date__select\">\r\n <select\r\n id={this.monthSelectId}\r\n class=\"dso-date__select--month\"\r\n ref={(element) => (this.monthSelectNode = element)}\r\n onChange={this.handleMonthSelect}\r\n >\r\n {monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {\r\n const index = this.localization.monthNames.indexOf(month);\r\n\r\n return (\r\n <option key={month} value={index} selected={index === focusedMonth}>\r\n {month}\r\n </option>\r\n );\r\n })}\r\n </select>\r\n <div class=\"dso-date__select-label\" aria-hidden=\"true\">\r\n <span>{this.localization.monthNamesShort[focusedMonth]}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </div>\r\n </div>\r\n\r\n <label htmlFor={this.yearSelectId} class=\"dso-date__vhidden\">\r\n {this.localization.yearSelectLabel}\r\n </label>\r\n <div class=\"dso-date__select\">\r\n <select id={this.yearSelectId} class=\"dso-date__select--year\" onChange={this.handleYearSelect}>\r\n {range(minYear, maxYear).map((year) => (\r\n <option key={year} selected={year === focusedYear}>\r\n {year}\r\n </option>\r\n ))}\r\n </select>\r\n <div class=\"dso-date__select-label\" aria-hidden=\"true\">\r\n <span>{this.focusedDay.getFullYear()}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dso-date__nav\">\r\n <button\r\n class=\"dso-date__prev\"\r\n onClick={this.handlePreviousMonthClick}\r\n disabled={prevMonthDisabled}\r\n type=\"button\"\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n <span class=\"dso-date__vhidden\">{this.localization.prevMonthLabel}</span>\r\n </button>\r\n <button\r\n class=\"dso-date__next\"\r\n onClick={this.handleNextMonthClick}\r\n disabled={nextMonthDisabled}\r\n type=\"button\"\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n <span class=\"dso-date__vhidden\">{this.localization.nextMonthLabel}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <DatePickerLegacyMonth\r\n selectedDate={valueAsDate}\r\n focusedDate={this.focusedDay}\r\n onDateSelect={this.handleDaySelect}\r\n onKeyboardNavigation={this.handleKeyboardNavigation}\r\n labelledById={this.dialogLabelId}\r\n localization={this.localization}\r\n firstDayOfWeek={this.firstDayOfWeek}\r\n focusedDayRef={this.processFocusedDayNode}\r\n min={minDate}\r\n max={maxDate}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/{p-421d223d.entry.js → p-289c49f5.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as n,h as e,F as o}from"./p-d638c2b0.js";import{c as t}from"./p-808a98bc.js";import"./p-1dbcaeef.js";const i=":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  block-size: 100%;\n  inset-inline-start: 0;\n  position: fixed;\n  inset-block-start: 0;\n  visibility: hidden;\n  inline-size: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  block-size: 100%;\n  opacity: 0.4;\n  inline-size: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  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-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border: 0;\n  inset-block-end: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  inset-inline-end: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.open-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  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-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border-inline-end: 0;\n  border-block-start: 0;\n  border-radius: 0 0 0 8px;\n  block-size: 40px;\n  min-inline-size: 40px;\n  padding: 0;\n  position: fixed;\n  inset-inline-end: 0;\n  inline-size: 40px;\n  inset-block-start: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  position: absolute;\n  inset-inline-start: 50%;\n  inset-block-start: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-inline-start: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  block-size: 100%;\n  position: absolute;\n  inset-block-start: 0;\n  transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    inset-inline-end: -320px;\n    inline-size: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    inset-inline-end: -480px;\n    inline-size: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    inset-inline-end: -640px;\n    inline-size: 640px;\n  }\n}\n.iframe-container.open {\n  inset-inline-end: 0;\n}\n\niframe {\n  border: 0;\n  block-size: 100%;\n  inline-size: 100%;\n}";const s=i;const r=500;const a=class{constructor(e){n(this,e);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),r)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),r)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const e=document.querySelector("body");if(n==="open"){e===null||e===void 0?void 0:e.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{e===null||e===void 0?void 0:e.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,e;if(!this.panelWrapperElement){return}this.trap=t(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(e=this.closeButtonElement)!==null&&e!==void 0?e:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return e(o,null,e("button",{key:"a8170e3024ee00b4c7907741061f20bd38bf043c",type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},e("dso-icon",{key:"9d86914b8a9d96f13e1675b31b423d6a1d627acc",icon:"help"}),e("span",{key:"115ff85cb5d22b3bc0976cadc3ae43c14b012219"},this.label)),e("div",{key:"9a48de7acbf0a1688602ace722126f42db980d0e",id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},e("div",{key:"dd98fd2c0270a0c6f19c44dcb73f14fb21cbdfdf",class:"dimscreen",onClick:this.closeClick}),e("div",{key:"67ed5ef2a7f2ec21d4d67937ec3e15000ff73e71",class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?e("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):e("div",null)),e("button",{key:"c16f22cda1869eb684c5fc0a11651441e82510a5",type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},e("dso-icon",{key:"4002011f88f58a7016e8ccbbc344ddbdaf56683b",icon:"times"}),e("span",{key:"25863addb1a994ee1d762ba4f2c54f44d409618c",class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};a.style=s;export{a as dso_helpcenter_panel};
-//# sourceMappingURL=p-421d223d.entry.js.map
+import{r as n,h as e,F as o}from"./p-d638c2b0.js";import{c as t}from"./p-808a98bc.js";import"./p-1dbcaeef.js";const i=":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  block-size: 100%;\n  inset-inline-start: 0;\n  position: fixed;\n  inset-block-start: 0;\n  visibility: hidden;\n  inline-size: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  block-size: 100%;\n  opacity: 0.4;\n  inline-size: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  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-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border: 0;\n  inset-block-end: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  inset-inline-end: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.dso-small {\n  line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.open-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  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-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border-inline-end: 0;\n  border-block-start: 0;\n  border-radius: 0 0 0 8px;\n  block-size: 40px;\n  min-inline-size: 40px;\n  padding: 0;\n  position: fixed;\n  inset-inline-end: 0;\n  inline-size: 40px;\n  inset-block-start: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.dso-small {\n  line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.close-button dso-icon {\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  position: absolute;\n  inset-inline-start: 50%;\n  inset-block-start: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-inline-start: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  block-size: 100%;\n  position: absolute;\n  inset-block-start: 0;\n  transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    inset-inline-end: -320px;\n    inline-size: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    inset-inline-end: -480px;\n    inline-size: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    inset-inline-end: -640px;\n    inline-size: 640px;\n  }\n}\n.iframe-container.open {\n  inset-inline-end: 0;\n}\n\niframe {\n  border: 0;\n  block-size: 100%;\n  inline-size: 100%;\n}";const s=i;const r=500;const a=class{constructor(e){n(this,e);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),r)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),r)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const e=document.querySelector("body");if(n==="open"){e===null||e===void 0?void 0:e.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{e===null||e===void 0?void 0:e.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,e;if(!this.panelWrapperElement){return}this.trap=t(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(e=this.closeButtonElement)!==null&&e!==void 0?e:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return e(o,null,e("button",{key:"7ebc1495b2933c451a256a4006cc8282e8f2325e",type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},e("dso-icon",{key:"119fcbef430ef1808b1a7890dafae7a989ac84d8",icon:"help"}),e("span",{key:"2d92f7abc9c01f217e59f3560ff6ebfb7cc1161b"},this.label)),e("div",{key:"f57b69556a038441adc316cce74c5e29b455ff4c",id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},e("div",{key:"4ca3979f6e933c0b102d8443f494d52a51629605",class:"dimscreen",onClick:this.closeClick}),e("div",{key:"da51b5c07f9bca49f35c0894997634ab736ab44d",class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?e("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):e("div",null)),e("button",{key:"bf2c1b8eee6509c14ea3710e60c83c2fbc949517",type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},e("dso-icon",{key:"3ece8241d7f302a9471ce232e763955a8ffb3094",icon:"times"}),e("span",{key:"284e9eadf0404f45c34b128ff833f0e0e5e81642",class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};a.style=s;export{a as dso_helpcenter_panel};
+//# sourceMappingURL=p-289c49f5.entry.js.map

package/dist/dso-toolkit/{p-5cf23978.entry.js → p-301dbfb1.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as s,h as r}from"./p-d638c2b0.js";const e=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";const a=e;const o=class{constructor(r){s(this,r);this.progress=undefined;this.min=0;this.max=100}render(){const s=Math.round(this.progress);const e=`${s}%`;return r("div",{key:"bdc673d9d6081248f02eb13bf4cc45e97ce9d754",class:"progress"},r("span",{key:"fc6057145d710db59a2cd6e4ac62fc98e3663211",class:"progress-bar",role:"progressbar","aria-labelledby":"progress-bar-label","aria-valuenow":s,"aria-valuemin":this.min,"aria-valuemax":this.max},r("span",{key:"c559fdf1e1777c56acf960c8cbf6154f53da393c",style:{width:`${e}`}})),r("span",{key:"42182aff70df5a667494d0c0e294a72349c194db",id:"progress-bar-label"},r("slot",{key:"fdd9990227e7ef80254da1722573fc4447f9ae90"})))}};o.style=a;export{o as dso_progress_bar};
-//# sourceMappingURL=p-5cf23978.entry.js.map
+import{r as s,h as r}from"./p-d638c2b0.js";const e=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";const a=e;const o=class{constructor(r){s(this,r);this.progress=undefined;this.min=0;this.max=100}render(){const s=Math.round(this.progress);const e=`${s}%`;return r("div",{key:"d1b4e6eb8fc5a1ee9b96f0774474420c271f759b",class:"progress"},r("span",{key:"b7a00ad201b2c7001c6ec7286b4aed496b7d8d2a",class:"progress-bar",role:"progressbar","aria-labelledby":"progress-bar-label","aria-valuenow":s,"aria-valuemin":this.min,"aria-valuemax":this.max},r("span",{key:"471b0487eeec277707610bc0b81bb2c860fe02ac",style:{width:`${e}`}})),r("span",{key:"513aa7c0f9881c9d95d54264553b16ddf0121e42",id:"progress-bar-label"},r("slot",{key:"6ad0ef5debf6fb5d67c3b38ab0ad148c855a4242"})))}};o.style=a;export{o as dso_progress_bar};
+//# sourceMappingURL=p-301dbfb1.entry.js.map

package/dist/dso-toolkit/p-3b2495b4.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as d,h as a,F as s}from"./p-d638c2b0.js";const t=":host .dso-card-list{padding-inline-start:0;list-style:none;border-block-end:1px solid #ccc;margin-block-start:-1px}:host .dso-card-grid{display:grid;gap:32px;grid-auto-rows:1fr}@media (max-width: 991px){:host .dso-card-grid{grid-template-columns:repeat(1, 1fr)}}@media (min-width: 992px) and (max-width: 1199px){:host .dso-card-grid{grid-template-columns:repeat(2, 1fr)}}@media (min-width: 1200px){:host .dso-card-grid{grid-template-columns:repeat(3, 1fr)}}";const r=t;const i=class{constructor(a){d(this,a);this.mode="list"}render(){return a(s,null,this.mode==="list"&&a("ul",{key:"54a6e926c22a118a77119add63558c55a7ef2cf9",class:"dso-card-list"},a("slot",{key:"63777d504620cbc54a94a95bbada8b7028ef5d92"})),this.mode==="grid"&&a("div",{key:"3b0feb3331f54fb7f084ad4c1e3bb18ddca6ee9d",class:"dso-card-grid"},a("slot",{key:"0bc1a70a40326d61cfa9af7b8cdf8e73bb8d39cf"})))}};i.style=r;export{i as dso_card_container};
2	+ //# sourceMappingURL=p-3b2495b4.entry.js.map

package/dist/dso-toolkit/{p-df30c56c.entry.js → p-44148440.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{g as t,f as e,r as s,h as n,H as o,a as r}from"./p-d638c2b0.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 d=t=>typeof t==="function"?t():t;const l=(t,e=((t,e)=>t!==e))=>{const s=d(t);let n=new Map(Object.entries(s!==null&&s!==void 0?s:{}));const o={dispose:[],get:[],set:[],reset:[]};const r=()=>{var e;n=new Map(Object.entries((e=d(t))!==null&&e!==void 0?e:{}));o.reset.forEach((t=>t()))};const c=()=>{o.dispose.forEach((t=>t()));r()};const i=t=>{o.get.forEach((e=>e(t)));return n.get(t)};const a=(t,s)=>{const r=n.get(t);if(e(s,r,t)){n.set(t,s);o.set.forEach((e=>e(t,s,r)))}};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)=>{o[t].push(e);return()=>{p(o[t],e)}};const l=(e,s)=>{const n=f("set",((t,n)=>{if(t===e){s(n)}}));const o=f("reset",(()=>s(d(t)[e])));return()=>{n();o()}};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);o.set.forEach((s=>s(t,e,e)))};return{state:u,get:i,set:a,on:f,onChange:l,use:h,dispose:c,reset:r,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=l(t,e);s.use(f());return s};const g=":host{display:block}*,*::after,*::before{box-sizing:border-box}";const b=g;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(o,{key:"b15aa4c4b93922e2416f82ce24cadf8e7116d70b",class:"dso-accordion"},n("slot",{key:"84f62dd6f77fc6418278aed71d9f42eefecbe42c"}))}get host(){return r(this)}static get watchers(){return{variant:["updateVariant"],reverseAlign:["updateReverseAlign"]}}};y.style=b;export{y as dso_accordion};
-//# sourceMappingURL=p-df30c56c.entry.js.map
+import{g as t,f as e,r as s,h as n,H as o,a as r}from"./p-d638c2b0.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 d=t=>typeof t==="function"?t():t;const l=(t,e=((t,e)=>t!==e))=>{const s=d(t);let n=new Map(Object.entries(s!==null&&s!==void 0?s:{}));const o={dispose:[],get:[],set:[],reset:[]};const r=()=>{var e;n=new Map(Object.entries((e=d(t))!==null&&e!==void 0?e:{}));o.reset.forEach((t=>t()))};const c=()=>{o.dispose.forEach((t=>t()));r()};const i=t=>{o.get.forEach((e=>e(t)));return n.get(t)};const a=(t,s)=>{const r=n.get(t);if(e(s,r,t)){n.set(t,s);o.set.forEach((e=>e(t,s,r)))}};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)=>{o[t].push(e);return()=>{p(o[t],e)}};const l=(e,s)=>{const n=f("set",((t,n)=>{if(t===e){s(n)}}));const o=f("reset",(()=>s(d(t)[e])));return()=>{n();o()}};const b=(...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 h=t=>{const e=n.get(t);o.set.forEach((s=>s(t,e,e)))};return{state:u,get:i,set:a,on:f,onChange:l,use:b,dispose:c,reset:r,forceUpdate:h}};const p=(t,e)=>{const s=t.indexOf(e);if(s>=0){t[s]=t[t.length-1];t.length--}};const b=(t,e)=>{const s=l(t,e);s.use(f());return s};const h=":host{display:block}*,*::after,*::before{box-sizing:border-box}";const g=h;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}=b({});this.accordionState=e}render(){return n(o,{key:"131dd3150b68be36ddc1c4c70f04368fea5367f1",class:"dso-accordion"},n("slot",{key:"eb99004ed2c6f09e350b52cb0ad00dcb1826bdcf"}))}get host(){return r(this)}static get watchers(){return{variant:["updateVariant"],reverseAlign:["updateReverseAlign"]}}};y.style=g;export{y as dso_accordion};
+//# sourceMappingURL=p-44148440.entry.js.map

package/dist/dso-toolkit/{p-d2e528b1.entry.js → p-53b5cc29.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,h as s,H as e,a as i}from"./p-d638c2b0.js";import{t as o}from"./p-1dbcaeef.js";import{h as n,c as r}from"./p-202d2cdf.js";import{g as a}from"./p-c8f6f8d9.js";import{v as h}from"./p-f5ff676c.js";const f=":host(:focus){outline:none}:host{display:inline-block}";const d=f;const c=class{constructor(s){t(this,s);this.focusOutListener=t=>{if(this.open&&(!(t.relatedTarget instanceof HTMLElement)||!this.tabbables(true).includes(t.relatedTarget))){this.open=false}};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.placement=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start")})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const s=this.boundary||document;while(t&&t.parentNode!==s){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}tabbables(t){const s=this.host.isConnected?o(this.host):[];return t?s:s.filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=h()}const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li"))){s.setAttribute("role","none")}}if(this.popper){return}const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=r(this.button,s,{placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start"),modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update()}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const s of this.host.isConnected?o(t):[]){s.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.button.setAttribute("aria-expanded",this.open?"true":"false")}onClick(t){const s=t.composedPath();if(this.isToggleButtonEvent(s)){this.open=!this.open}else if(this.open&&this.isMenuItemEvent(s)){this.open=false}}isToggleButtonEvent(t){return t.includes(this.button)}isMenuItemEvent(t){return t.includes(this.host)&&!this.isToggleButtonEvent(t)}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}keyDownListener(t){if(t.defaultPrevented||!this.open){return}switch(t.key){case"Tab":if(t.shiftKey){this.tabInPopup(this.tabbables(true),-1)}else{this.tabInPopup(this.tabbables(true),1)}break;case"ArrowDown":this.tabInPopup(this.tabbables(false),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(false),-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()}tabInPopup(t,s){var e;const i=t.findIndex((t=>t===a()));let o=i+s;if(o>=t.length){o=0}else if(o<0){o=t.length-1}(e=t[o])===null||e===void 0?void 0:e.focus()}render(){return s(e,{key:"976b334e90ff2b8d23d25cebbe02008ab924b046",onFocusout:this.focusOutListener},s("slot",{key:"84811cd273de19adbeb9d4157506dc3df7c96ec4",name:"toggle"}),s("div",{key:"a76e4162196a14f92c02f5bfab37e32f990fd45b",hidden:!this.open},s("slot",{key:"c3762cda1ccf72e176d496e44d7fcc6f9b32756c"})))}get host(){return i(this)}static get watchers(){return{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};c.style=d;export{c as dso_dropdown_menu};
-//# sourceMappingURL=p-d2e528b1.entry.js.map
+import{r as t,h as s,H as e,a as i}from"./p-d638c2b0.js";import{t as o}from"./p-1dbcaeef.js";import{h as n,c as r}from"./p-202d2cdf.js";import{g as a}from"./p-c8f6f8d9.js";import{v as h}from"./p-f5ff676c.js";const f=":host(:focus){outline:none}:host{display:inline-block}";const d=f;const c=class{constructor(s){t(this,s);this.focusOutListener=t=>{if(this.open&&(!(t.relatedTarget instanceof HTMLElement)||!this.tabbables(true).includes(t.relatedTarget))){this.open=false}};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.placement=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start")})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const s=this.boundary||document;while(t&&t.parentNode!==s){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}tabbables(t){const s=this.host.isConnected?o(this.host):[];return t?s:s.filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=h()}const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li"))){s.setAttribute("role","none")}}if(this.popper){return}const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=r(this.button,s,{placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start"),modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update()}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const s of this.host.isConnected?o(t):[]){s.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.button.setAttribute("aria-expanded",this.open?"true":"false")}onClick(t){const s=t.composedPath();if(this.isToggleButtonEvent(s)){this.open=!this.open}else if(this.open&&this.isMenuItemEvent(s)){this.open=false}}isToggleButtonEvent(t){return t.includes(this.button)}isMenuItemEvent(t){return t.includes(this.host)&&!this.isToggleButtonEvent(t)}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}keyDownListener(t){if(t.defaultPrevented||!this.open){return}switch(t.key){case"Tab":if(t.shiftKey){this.tabInPopup(this.tabbables(true),-1)}else{this.tabInPopup(this.tabbables(true),1)}break;case"ArrowDown":this.tabInPopup(this.tabbables(false),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(false),-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()}tabInPopup(t,s){var e;const i=t.findIndex((t=>t===a()));let o=i+s;if(o>=t.length){o=0}else if(o<0){o=t.length-1}(e=t[o])===null||e===void 0?void 0:e.focus()}render(){return s(e,{key:"64730f2a5269c26f82cc98c16a6706aea0d85139",onFocusout:this.focusOutListener},s("slot",{key:"b1ea51163d8aaa0a1bdebe8450d916fa004750d7",name:"toggle"}),s("div",{key:"50d3b624f62dc610657bcc91d9c1613b1f635a4e",hidden:!this.open},s("slot",{key:"05fc1a75012d442384a58313a5908a1c77f486b0"})))}get host(){return i(this)}static get watchers(){return{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};c.style=d;export{c as dso_dropdown_menu};
+//# sourceMappingURL=p-53b5cc29.entry.js.map

package/dist/dso-toolkit/{p-e15b7ce7.entry.js → p-53b7c61b.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as o}from"./p-d638c2b0.js";const n="*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;block-size:2.5rem;padding:8px;position:absolute;inset-inline-end:0;text-align:center;inset-block-start:0;inline-size:2.5rem}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";const a=n;const s=class{constructor(o){e(this,o);this.dsoInput=i(this,"dsoInput",3);this.dsoNext=i(this,"dsoNext",3);this.dsoPrevious=i(this,"dsoPrevious",3);this.dsoClear=i(this,"dsoClear",3);this.handleInput=e=>{if(!(e.target instanceof HTMLInputElement)){return}this.dsoInput.emit({originalEvent:e,value:e.target.value})};this.handleNext=e=>{this.dsoNext.emit({originalEvent:e})};this.handlePrevious=e=>{this.dsoPrevious.emit({originalEvent:e})};this.handleClear=e=>{this.dsoClear.emit({originalEvent:e})};this.handleKeyDown=e=>{if(e.key==="Enter"){this.handleNext(e)}};this.value=undefined;this.label="Zoeken in document";this.current=undefined;this.totalCount=undefined}async dsoFocus(e={}){var i,o;(i=this.inputElement)===null||i===void 0?void 0:i.focus();if(e.select){(o=this.inputElement)===null||o===void 0?void 0:o.select()}}render(){const e=this.current||0;const i=this.totalCount||0;return o("div",{key:"d66b3ca5cc3c0ec5fb32cb673ac93672e885bd8e",class:"dso-mark-bar"},o("div",{key:"bc42aea89efe2c211acf7a0d38e6a7dd6be6a6e5",class:"dso-mark-bar-input"},o("input",{key:"7413ba190a51be189a03eb7fb2ea5187807b40f1",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),o("label",{key:"d1284be2c862e4720c1eeb0bdfdc887e507718f2",htmlFor:"search-input"},o("dso-icon",{key:"032f8b0cb7fcd85a42c71864e30eb020150963f7",class:"dso-search-icon",icon:"search"}),o("span",{key:"5711b61364f1059ea2ec2e85fe5e3c7da18c4035",class:"label-text"},this.label)),o("button",{key:"c9db372c8da8ff018ead0711adc944b61503e8c4",type:"button",onClick:this.handleClear},o("dso-icon",{key:"bdfda039b8c488dcd3a96d25a7d9757becdd9c79",icon:"times"}),o("span",{key:"9a8935a37924417c72fecc32026aed6b1bd67c10",class:"sr-only"},"Zoekopdracht legen"))),o("div",{key:"c4d662a6ae7504f695f831bc27b4634407fb4c59",class:"dso-button-container"},o("span",{key:"39222d45e6d8d614301b8c007d9a5d437f178ad3",class:"divider"}),o("button",{key:"7c4f0c35bd52de9923b2c3676a70cf673c7270e2",type:"button",onClick:this.handlePrevious,disabled:e<=1},o("dso-icon",{key:"05b230ddbab54f81eecd659e43ccc050819601c6",icon:"chevron-up",class:"hydrated"}),o("span",{key:"f6061e9cb74d3b7e7efa8829388e8b52285f835d",class:"sr-only"},"Vorig zoekresultaat")),o("span",{key:"46fe7ddf2359795bf0323f34952c2985fe5c6c32"},e,"/",i),o("button",{key:"abc7272e3fc76b2eb556d318852672395070ef11",type:"button",onClick:this.handleNext,disabled:e>=i},o("dso-icon",{key:"30d7922d66334ed7c97cd848ff10e2691249755b",icon:"chevron-down",class:"hydrated"}),o("span",{key:"16b5e0a05ca46307c73bada038922ac98bc6a5ec",class:"sr-only"},"Volgend zoekresultaat"))))}};s.style=a;export{s as dso_mark_bar};
-//# sourceMappingURL=p-e15b7ce7.entry.js.map
+import{r as e,c as a,h as i}from"./p-d638c2b0.js";const o="*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;block-size:2.5rem;padding:8px;position:absolute;inset-inline-end:0;text-align:center;inset-block-start:0;inline-size:2.5rem}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";const n=o;const s=class{constructor(i){e(this,i);this.dsoInput=a(this,"dsoInput",3);this.dsoNext=a(this,"dsoNext",3);this.dsoPrevious=a(this,"dsoPrevious",3);this.dsoClear=a(this,"dsoClear",3);this.handleInput=e=>{if(!(e.target instanceof HTMLInputElement)){return}this.dsoInput.emit({originalEvent:e,value:e.target.value})};this.handleNext=e=>{this.dsoNext.emit({originalEvent:e})};this.handlePrevious=e=>{this.dsoPrevious.emit({originalEvent:e})};this.handleClear=e=>{this.dsoClear.emit({originalEvent:e})};this.handleKeyDown=e=>{if(e.key==="Enter"){this.handleNext(e)}};this.value=undefined;this.label="Zoeken in document";this.current=undefined;this.totalCount=undefined}async dsoFocus(e={}){var a,i;(a=this.inputElement)===null||a===void 0?void 0:a.focus();if(e.select){(i=this.inputElement)===null||i===void 0?void 0:i.select()}}render(){const e=this.current||0;const a=this.totalCount||0;return i("div",{key:"3df6289ae5ac91adf0ba9473e38adab8dc6b91f4",class:"dso-mark-bar"},i("div",{key:"702a95a26990c2afdc62726b23f2c5e278b2649c",class:"dso-mark-bar-input"},i("input",{key:"adbe69018b986b2ca4d73099ff8c6ece2fac1e5a",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),i("label",{key:"26a364def7585a8390c70f124b7be806fabda74c",htmlFor:"search-input"},i("dso-icon",{key:"bd2c98273728bff66236989d40807de2995eb2aa",class:"dso-search-icon",icon:"search"}),i("span",{key:"4cde1a75df6bb62dd1970c8aae52e31ac8ff9d00",class:"label-text"},this.label)),i("button",{key:"103d37170e51d078da432eb43fbd8edb5540758b",type:"button",onClick:this.handleClear},i("dso-icon",{key:"b11abdeabc4c91964ea0aad97c10ccb6a420cb5a",icon:"times"}),i("span",{key:"c4718f33f2c0acd1f78292a542351097b4ff31a1",class:"sr-only"},"Zoekopdracht legen"))),i("div",{key:"015d21fe0562ae31d55d46ce15353ad0853fb8db",class:"dso-button-container"},i("span",{key:"ad2efabb6240583c0279309e13111355a899a73d",class:"divider"}),i("button",{key:"d48f48ebb1be93f4b8132353ee0749bd1e4a5428",type:"button",onClick:this.handlePrevious,disabled:e<=1},i("dso-icon",{key:"cca9b200cbfc41d8af151f08077a0c3c48999a85",icon:"chevron-up",class:"hydrated"}),i("span",{key:"b21a8eabf37d9319f89908e1ec29e05f941cd5a4",class:"sr-only"},"Vorig zoekresultaat")),i("span",{key:"5a6a7483b0ecaa818f5a40370030230a26b13988"},e,"/",a),i("button",{key:"cf226989ea402fcb66d5549b48867bc20a923c79",type:"button",onClick:this.handleNext,disabled:e>=a},i("dso-icon",{key:"9b1a3178daa8746ca7434e7f4c03755f62deeece",icon:"chevron-down",class:"hydrated"}),i("span",{key:"71e707b2cfe6de7679819ee4fc8c5910a6681cd1",class:"sr-only"},"Volgend zoekresultaat"))))}};s.style=n;export{s as dso_mark_bar};
+//# sourceMappingURL=p-53b7c61b.entry.js.map