npm - @dso-toolkit/core - Versions diffs - 62.2.1 → 62.3.0-ghi-2431.0 - Mend

@dso-toolkit/core 62.2.1 → 62.3.0-ghi-2431.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 (177) hide show

package/dist/components/dso-date-picker-legacy.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/components/dso-highlight-box.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
-const highlightBoxCss = ":host{display:block;container-type:inline-size}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;color:#000;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";
+const highlightBoxCss = ":host{display:block;container-type:inline-size;position:relative;z-index:1}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;color:#000;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}.dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}.dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}.dso-highlight-box>dso-icon{vertical-align:text-top}";
 const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends HTMLElement {
   constructor() {

package/dist/components/dso-highlight-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-highlight-box.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,~~8zCAA8zC~~;;~~MCQz0C~~,YAAY;;;;;;;;;;;EAkCvB,MAAM;;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE;MACxC,YAAY,EAAE,IAAI,CAAC,MAAM;MACzB,YAAY,EAAE,IAAI,CAAC,MAAM;MACzB,WAAW,EAAE,IAAI,CAAC,KAAK;MACvB,iBAAiB,EAAE,IAAI,CAAC,UAAU;MAClC,iBAAiB,EAAE,UAAU;KAC9B,CAAC,CAAC;IAEH,QACE,WAAK,KAAK,EAAE,OAAO,IAChB,UAAU,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n\r\n:host {\r\n display: block;\r\n container-type: inline-size;\r\n}\r\n\r\n:host-context(.row.dso-equal-heights) {\r\n height: 100%;\r\n min-height: auto;\r\n\r\n > .dso-highlight-box {\r\n min-height: auto;\r\n\r\n &.dso-has-counter {\r\n height: calc(100% - #{units.$shared-equal-heights-highlight-box-height});\r\n }\r\n\r\n &:not(.dso-has-counter) {\r\n height: calc(100% - #{units.$u2});\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-highlight-box {\r\n @include highlight-box.root();\r\n}\r\n","import { Component, h, Prop, Element } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop()\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop()\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop()\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop()\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop()\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n const classes = clsx(\"dso-highlight-box\", {\r\n \"dso-yellow\": this.yellow,\r\n \"dso-border\": this.border,\r\n \"dso-white\": this.white,\r\n \"dso-drop-shadow\": this.dropShadow,\r\n \"dso-has-counter\": hasCounter,\r\n });\r\n\r\n return (\r\n <div class={classes}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-highlight-box.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,01CAA01C;;MCQr2C,YAAY;;;;;;;;;;;EAkCvB,MAAM;;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,EAAE;MACxC,YAAY,EAAE,IAAI,CAAC,MAAM;MACzB,YAAY,EAAE,IAAI,CAAC,MAAM;MACzB,WAAW,EAAE,IAAI,CAAC,KAAK;MACvB,iBAAiB,EAAE,IAAI,CAAC,UAAU;MAClC,iBAAiB,EAAE,UAAU;KAC9B,CAAC,CAAC;IAEH,QACE,WAAK,KAAK,EAAE,OAAO,IAChB,UAAU,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n\r\n:host {\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n:host-context(.row.dso-equal-heights) {\r\n height: 100%;\r\n min-height: auto;\r\n\r\n > .dso-highlight-box {\r\n min-height: auto;\r\n\r\n &.dso-has-counter {\r\n height: calc(100% - #{units.$shared-equal-heights-highlight-box-height});\r\n }\r\n\r\n &:not(.dso-has-counter) {\r\n height: calc(100% - #{units.$u2});\r\n }\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-highlight-box {\r\n @include highlight-box.root();\r\n}\r\n","import { Component, h, Prop, Element } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop()\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop()\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop()\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop()\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop()\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n const classes = clsx(\"dso-highlight-box\", {\r\n \"dso-yellow\": this.yellow,\r\n \"dso-border\": this.border,\r\n \"dso-white\": this.white,\r\n \"dso-drop-shadow\": this.dropShadow,\r\n \"dso-has-counter\": hasCounter,\r\n });\r\n\r\n return (\r\n <div class={classes}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-image-overlay.js CHANGED Viewed

@@ -1,125 +1,4 @@
-import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index2.js';
-import { c as createFocusTrap } from './focus-trap.esm.js';
-import { d as defineCustomElement$2 } from './icon.js';
-const imageOverlayCss = ":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host(:hover) .open,\n.open:focus {\n  opacity: 1;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.open {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  opacity: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.open:focus, .open:focus-visible {\n  outline-offset: 2px;\n}\n.open:active {\n  outline: 0;\n}\n.open:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.open.dso-small {\n  line-height: 1rem;\n}\n.open.dso-small dso-icon,\n.open.dso-small svg.di, .open.dso-small.extern::after, .open.dso-small.download::after, .open.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.open.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.open.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.open.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n\n.dimmer {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 19;\n  display: flex;\n  padding: 32px;\n  background-color: rgba(255, 255, 255, 0.8);\n  justify-content: center;\n}\n\n.wrapper {\n  align-self: center;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  line-height: 0;\n  outline: 4px solid #fff;\n  position: relative;\n  z-index: 20;\n}\n.wrapper .titel:not([hidden]) {\n  background-color: #fff;\n  font-weight: 700;\n  line-height: initial;\n  padding: 8px;\n  position: absolute;\n}\n.wrapper img {\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: calc(100vh - 64px);\n}\n.wrapper .figuur-bijschrift:not([hidden]) {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n  padding-bottom: 12px;\n  padding-top: 16px;\n}\n\n.close {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  min-width: auto;\n  padding: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n}\n.close:focus, .close:focus-visible {\n  outline-offset: 2px;\n}\n.close:active {\n  outline: 0;\n}\n.close:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close.dso-small {\n  line-height: 1rem;\n}\n.close.dso-small dso-icon,\n.close.dso-small svg.di, .close.dso-small.extern::after, .close.dso-small.download::after, .close.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.close.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.close.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}";
-const ImageOverlay = /*@__PURE__*/ proxyCustomElement(class ImageOverlay extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.titelSlot = null;
-    this.bijschriftSlot = null;
-    this.active = false;
-    this.zoomable = false;
-  }
-  loadListener(event) {
-    if (event.target instanceof HTMLImageElement) {
-      this.setZoomable(event.target);
-    }
-  }
-  connectedCallback() {
-    this.titelSlot = this.host.querySelector("div[slot='titel']");
-    this.bijschriftSlot = this.host.querySelector("div[slot='bijschrift']");
-  }
-  componentDidLoad() {
-    this.resizeObserver = new ResizeObserver(debounce_1(() => {
-      const imgElement = this.host.querySelector("img");
-      if (imgElement instanceof HTMLImageElement) {
-        this.setZoomable(imgElement);
-      }
-    }, 200));
-    this.mutationObserver = new MutationObserver((e) => {
-      var _a, _b;
-      forceUpdate(this.host);
-      if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === "childList") {
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        // <img> is gone or a new element.
-        this.initZoomableImage();
-      }
-    });
-    this.mutationObserver.observe(this.host, {
-      attributes: true,
-      subtree: true,
-      attributeFilter: ["src", "alt"],
-      childList: true,
-    });
-    this.initZoomableImage();
-  }
-  disconnectedCallback() {
-    var _a, _b, _c;
-    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
-  }
-  initZoomableImage() {
-    var _a;
-    const imgElement = this.host.querySelector("img");
-    if (!(imgElement instanceof HTMLImageElement)) {
-      return;
-    }
-    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
-    if (imgElement.complete) {
-      this.setZoomable(imgElement);
-    }
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
-  }
-  setZoomable(imageElement) {
-    const { width, naturalWidth, height, naturalHeight } = imageElement;
-    this.zoomable = width < naturalWidth || height < naturalHeight;
-  }
-  render() {
-    var _a;
-    const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
-    return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
-  }
-  componentDidRender() {
-    var _a, _b;
-    if (this.active && this.wrapperElement && !this.trap) {
-      this.trap = createFocusTrap(this.wrapperElement, {
-        escapeDeactivates: true,
-        clickOutsideDeactivates: (e) => {
-          if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
-            this.active = false;
-            return false;
-          }
-          return true;
-        },
-        setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
-        onDeactivate: () => (this.active = false),
-      }).activate();
-    }
-    else if (!this.active && this.trap) {
-      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
-      delete this.trap;
-    }
-  }
-  get host() { return this; }
-  static get style() { return imageOverlayCss; }
-}, [1, "dso-image-overlay", {
-    "active": [32],
-    "zoomable": [32]
-  }, [[2, "load", "loadListener"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-image-overlay", "dso-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-image-overlay":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ImageOverlay);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { I as ImageOverlay, d as defineCustomElement$1 } from './image-overlay.js';
 const DsoImageOverlay = ImageOverlay;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-image-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-image-overlay.js","mappings":"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","names":["debounce"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.open {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-width: auto;\r\n padding: units.$u1;\r\n opacity: 0;\r\n position: absolute;\r\n right: units.$u2;\r\n top: units.$u2;\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: fade-out(colors.$wit, 0.2);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .titel:not([hidden]) {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n width: auto;\r\n height: auto;\r\n max-width: 100%;\r\n max-height: calc(100vh - units.$u8);\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-bottom: units.$u1 * 1.5;\r\n padding-top: units.$u2;\r\n }\r\n}\r\n\r\n.close {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-width: auto;\r\n padding: units.$u1;\r\n position: absolute;\r\n top: units.$u2;\r\n right: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Element, forceUpdate, h, Host, Listen, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private buttonElement: HTMLButtonElement \| undefined;\r\n\r\n private wrapperElement: HTMLDivElement \| undefined;\r\n\r\n private trap: FocusTrap \| undefined;\r\n\r\n private titelSlot: HTMLElement \| null = null;\r\n\r\n private bijschriftSlot: HTMLElement \| null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200)\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth \|\| height < naturalHeight;\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n {this.active && src && alt && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={(element) => (this.wrapperElement = element)}>\r\n <div class=\"titel\" hidden={!this.titelSlot}>\r\n <slot name=\"titel\" />\r\n </div>\r\n <img src={src} alt={alt} />\r\n <button type=\"button\" class=\"close\" onClick={() => (this.active = false)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span>Sluiten</span>\r\n </button>\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n <slot />\r\n {this.zoomable && (\r\n <button\r\n type=\"button\"\r\n class=\"open\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => (this.active = true)}\r\n >\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span>Afbeelding vergroot weergeven</span>\r\n </button>\r\n )}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-image-overlay.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-list-button.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { c as createFocusTrap } from './focus-trap.esm.js';
 import { c as clsx } from './clsx.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding: 0 0 0 32px;\n}\n.dso-selectable .dso-selectable-options {\n  list-style: none;\n  margin-top: 8px;\n  padding-left: 0;\n}\n.dso-selectable .dso-selectable-options li + li {\n  margin-top: 8px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable > dso-info {\n  float: none;\n  margin: 8px 16px 0 0;\n  width: 100%;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
+const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-manual-input-button {\n  cursor: text;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.dso-input-number:not(.form-group) {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.dso-input-number label {\n  width: 100%;\n}\n.dso-input-number .dso-input-step-counter {\n  align-self: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-block;\n  height: 1.5rem;\n  text-align: center;\n  width: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n  outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n  -moz-appearance: textfield;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-left-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding: 0 16px;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-button-group .dso-list-button {\n  padding-right: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding: 0 0 0 32px;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  height: 24px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-left: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  width: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  height: 18px;\n  left: 3px;\n  top: 3px;\n  width: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  height: 22px;\n  left: 1px;\n  top: 1px;\n  width: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-top-color: transparent;\n  border-width: 0 0 3px 3px;\n  height: 8px;\n  transform: rotate(-45deg);\n  width: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  height: 12px;\n  width: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  height: 12px;\n  left: 6px;\n  opacity: 0;\n  position: absolute;\n  top: 6px;\n  width: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding: 15px 47px 15px 15px;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  width: 100%;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-right: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  width: 100%;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di,\n.dso-list-button .dso-count {\n  height: 24px;\n  position: absolute;\n  right: 15px;\n  top: 15px;\n  width: 24px;\n}\n.dso-list-button dso-icon,\n.dso-list-button svg.di {\n  color: #39870c;\n  page-break-before: always;\n}\n.dso-list-button .dso-count {\n  font-weight: 700;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    width: 0;\n  }\n}\n.dso-list-button .dso-sublabel {\n  padding-left: 32px;\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n  margin-top: 4px;\n}\n\n.dso-input-wrapper {\n  position: relative;\n}\n.dso-input-wrapper .form-control {\n  width: 9ch;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  height: 40px;\n  padding: 6px 14px;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #191919;\n  background-color: #fff;\n  background-image: none;\n  border: 1px solid #275937;\n  border-radius: 4px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n  color: #666;\n  opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n  color: #666;\n}\n.form-control::-webkit-input-placeholder {\n  color: #666;\n}\n.form-control::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.form-control:focus {\n  border-color: #275937;\n  outline: 0;\n  box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n  background-color: #fff;\n  opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n  cursor: default;\n}\n.form-control[disabled] {\n  border-color: #e5e5e5;\n  color: #999;\n}\n.form-control[readonly] {\n  border-width: 1px;\n}\n.form-control[type=text] {\n  line-height: 40px;\n}\n.form-control[size] {\n  width: auto;\n}\n\n.dso-manual-input-button[type=button] {\n  background-color: transparent;\n  border: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hidden {\n  display: none !important;\n}";
 const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTMLElement {
   constructor() {

package/dist/components/dso-list-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-list-button.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Allow user to directly input a value.\r\n \r\n Set to `false` to force users to use plus/minus buttons.\r\n /\r\n @Prop()\r\n manual = true;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (this.isNewCountValid(newValue) === false) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n if (\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n ) {\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n checked={selected}\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n </div>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual === true && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-list-button.js","mappings":"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","names":[],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/input-number\";\r\n@use \"~dso-toolkit/src/components/list-button\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-manual-input-button {\r\n cursor: text;\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n @include input-number.root();\r\n}\r\n\r\n.dso-button-group {\r\n @include list-button.button-group(\".dso-input-number\", \".dso-list-button\");\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include list-button.root();\r\n\r\n .dso-sublabel {\r\n padding-left: selectable.$size + units.$u1;\r\n }\r\n}\r\n\r\n.dso-list-button,\r\n.dso-button-group {\r\n + .dso-list-button,\r\n + .dso-button-group {\r\n @include list-button.sibling();\r\n }\r\n}\r\n\r\n.dso-input-wrapper {\r\n position: relative;\r\n\r\n .form-control {\r\n width: 9ch;\r\n }\r\n}\r\n\r\n.form-control {\r\n @include form-control.root();\r\n}\r\n\r\n.dso-manual-input-button[type=\"button\"] {\r\n background-color: transparent;\r\n border: 0;\r\n bottom: 0;\r\n left: 0;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n\r\n.hidden {\r\n display: none !important;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Allow user to directly input a value.\r\n \r\n Set to `false` to force users to use plus/minus buttons.\r\n /\r\n @Prop()\r\n manual = true;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (this.isNewCountValid(newValue) === false) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n if (\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n ) {\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n checked={selected}\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n </div>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual === true && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}