npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta4 → 3.0.0-beta5 - Mend

@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

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 (590) hide show

package/dist/esm/stzh-calendar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-calendar.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-calendar/stzh-calendar-day.tsx","src/components/stzh-calendar/stzh-calendar-month.tsx","src/components/stzh-calendar/stzh-calendar.scss?tag=stzh-calendar&encapsulation=scoped","src/components/stzh-calendar/stzh-calendar.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\"\nimport { isEqual, isEqualMonth } from \"../../utils/date-utils\"\n\nexport type StzhCalendarDayProps = {\n focusedDay: Date\n today: Date\n day: Date\n disabled: boolean\n inRange: boolean\n isSelected: boolean\n dateFormatter: Intl.DateTimeFormat\n onDaySelect: (event: MouseEvent, day: Date) => void\n onKeyboardNavigation: (event: KeyboardEvent) => void\n focusedDayRef?: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarDay: FunctionalComponent<StzhCalendarDayProps> = ({\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n focusedDayRef,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}) => {\n const isToday = isEqual(day, today)\n const isMonth = isEqualMonth(day, focusedDay)\n const isFocused = isEqual(day, focusedDay)\n const isOutsideRange = !inRange\n\n function handleClick(e) {\n onDaySelect(e, day)\n }\n\n return (\n <button\n class={{\n \"stzh-calendar__day\": true,\n \"is-outside\": isOutsideRange,\n \"is-today\": isToday,\n \"is-month\": isMonth,\n \"is-disabled\": disabled,\n }}\n tabIndex={isFocused ? 0 : -1}\n onClick={handleClick}\n onKeyDown={onKeyboardNavigation}\n aria-disabled={disabled ? \"true\" : undefined}\n disabled={isOutsideRange}\n type=\"button\"\n aria-pressed={isSelected ? \"true\" : \"false\"}\n aria-current={isToday ? \"date\" : undefined}\n s-object-id={dateFormatter.format(day)}\n ref={el => {\n if (isFocused && el && focusedDayRef) {\n focusedDayRef(el)\n }\n }}\n >\n <span aria-hidden=\"true\">{day.getDate()}</span>\n <span class=\"stzh-calendar__vhidden\">{dateFormatter.format(day)}</span>\n </button>\n )\n}\n","import { h, FunctionalComponent } from \"@stencil/core\"\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from \"../../utils/date-utils\"\n\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\"\nimport { StzhCalendarDay, StzhCalendarDayProps } from \"./stzh-calendar-day\"\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n const result = []\n\n for (let i = 0; i < array.length; i += chunkSize) {\n result.push(array.slice(i, i + chunkSize))\n }\n\n return result\n}\n\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\n return array.map((_, i) => {\n const adjustedIndex = (i + startingOffset) % array.length\n return mapFn(array[adjustedIndex])\n })\n}\n\ntype StzhCalendarMonthProps = {\n selectedDate: Date\n focusedDate: Date\n labelledById: string\n localization: StzhCalendarLocalizedText\n firstDayOfWeek: DaysOfWeek\n min?: Date\n max?: Date\n dateFormatter: Intl.DateTimeFormat\n isDateDisabled: StzhCalendarDateDisabledPredicate\n onDateSelect: StzhCalendarDayProps[\"onDaySelect\"]\n onKeyboardNavigation: StzhCalendarDayProps[\"onKeyboardNavigation\"]\n focusedDayRef: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarMonth: FunctionalComponent<StzhCalendarMonthProps> = ({\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n focusedDayRef,\n}) => {\n const today = new Date()\n const days = getViewOfMonth(focusedDate, firstDayOfWeek)\n\n return (\n <table class=\"stzh-calendar__table\" aria-labelledby={labelledById}>\n <thead>\n <tr>\n {mapWithOffset(localization.$globals.dayNames, firstDayOfWeek, dayName => (\n <th class=\"stzh-calendar__table-header\" scope=\"col\">\n <span aria-hidden=\"true\">{dayName.substring(0, 2)}</span>\n <span class=\"stzh-calendar__vhidden\">{dayName}</span>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {chunk(days, 7).map(week => (\n <tr class=\"stzh-calendar__row\">\n {week.map(day => (\n <td class=\"stzh-calendar__cell\">\n <StzhCalendarDay\n day={day}\n today={today}\n focusedDay={focusedDate}\n isSelected={isEqual(day, selectedDate)}\n disabled={isDateDisabled(day)}\n inRange={inRange(day, min, max)}\n onDaySelect={onDateSelect}\n dateFormatter={dateFormatter}\n onKeyboardNavigation={onKeyboardNavigation}\n focusedDayRef={focusedDayRef}\n />\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n )\n}\n","/*\n @prop --background: Background color of calendar\n * @prop --padding-top: Padding top of calendar\n * @prop --padding-bottom: Padding bottom color of calendar\n * @prop --padding-left: Padding left color of calendar\n * @prop --padding-right: Padding right color of calendar\n * @prop --background-color: Background color of calendar\n /\n\n:host {\n --padding-top: #{space('small')};\n --padding-bottom: #{space('small')};\n --padding-left: #{space('xsmall')};\n --padding-right: #{space('xsmall')};\n\n width: #{$calendarWidth};\n}\n\n.stzh-calendar {\n display: flex;\n position: relative;\n text-align: left;\n touch-action: pan-y;\n user-select: none;\n overflow: hidden;\n overflow: clip;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n\n &__wrapper {\n width: 100%;\n }\n\n &__table {\n @include font;\n @include fontSize('milli');\n border-collapse: collapse;\n border-spacing: 0;\n text-align: center;\n width: 100%;\n }\n\n &__table-header,\n &__cell {\n padding: space('xxxsmall');\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__row:last-child &__cell {\n padding-bottom: 0;\n }\n\n &__table-header {\n @include font;\n @include fontSize('nano');\n text-decoration-line: none;\n padding-top: 0;\n padding-bottom: 0;\n width: 44px;\n height: 40px;\n }\n\n &__cell {\n text-align: center;\n }\n\n &__day {\n @include font;\n @include fontSize('milli');\n appearance: none;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-variant-numeric: tabular-nums;\n width: 40px;\n height: 40px;\n text-align: center;\n vertical-align: middle;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n // position: relative;\n // padding: 0 0 1px;\n // z-index: 1;\n\n // &::before {\n // z-index: -1;\n // bottom: 0;\n // content: \"\";\n // left: 0;\n // position: absolute;\n // right: 0;\n // top: 0;\n // }\n\n &.is-today {\n @include font('heavy');\n color: $colorPrimary70;\n // box-shadow: 0 0 0 1px $colorPrimary;\n // position: relative;\n // z-index: 200;\n }\n\n &:hover {\n background: $colorGrey20;\n }\n\n // &:hover::before {\n // background: $colorGrey20;\n // }\n\n // &:focus,\n &[aria-pressed=\"true\"] {\n background: $colorSecondary30;\n // box-shadow: none;\n color: $colorPrimary70;\n }\n\n &:active {\n background: $colorSecondary30;\n // box-shadow: 0 0 5px $colorPrimary;\n color: $colorPrimary70;\n // z-index: 200;\n }\n\n // &:focus {\n // z-index: 200;\n // }\n\n // &:not(.is-month) {\n // box-shadow: none;\n // }\n\n &:not(.is-month),\n &[aria-disabled=\"true\"] {\n background: transparent;\n color: $colorGrey60;\n cursor: default;\n }\n\n // &[aria-disabled=\"true\"] {\n // &.is-today {\n // box-shadow: 0 0 0 1px $colorGrey20;\n\n // &:focus {\n // box-shadow: 0 0 5px $colorPrimary;\n // }\n // }\n\n // &::before {\n // display: none;\n // }\n // }\n\n &.is-disabled {\n text-decoration-line: line-through;\n }\n\n &.is-outside {\n color: $colorGrey60;\n background: $colorGrey20;\n // box-shadow: none;\n cursor: default;\n pointer-events: none;\n text-decoration-line: none;\n\n // &::before {\n // display: none;\n // }\n }\n }\n\n &__header {\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n &__nav {\n display: flex;\n align-items: center;\n\n &.is-dropdowns {\n gap: calc(#{space('xsmall')} + #{space('small')});\n margin-left: space('small');\n }\n }\n\n // &__prev,\n // &__next {\n // align-items: center;\n // appearance: none;\n // font-family: inherit;\n // background: transparent;\n // border-radius: 50%;\n // color: $colorPrimary70;\n // cursor: pointer;\n // display: inline-flex;\n // flex-shrink: 0;\n // justify-content: center;\n // margin-left: space('xsmall');\n // padding: 0;\n // transition: background-color 300ms ease;\n // height: 32px;\n // width: 32px;\n\n // &:disabled {\n // cursor: default;\n // color: $colorGrey60;\n // }\n // }\n\n stzh-dropdown#{&}__dropdown {\n --popover-width: 100%;\n --popover-height: calc(100% - #{$formInputHeightSmall} - var(--padding-top));\n --popover-max-height: initial;\n position: static;\n }\n\n &__select-wrapper {\n display: inline-flex;\n position: relative;\n\n span {\n margin-right: 0px;\n }\n }\n\n &__select {\n @include fontSize('milli');\n cursor: pointer;\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 2;\n border-radius: $formInputBorderRadius;\n }\n\n &__select-label {\n @include fontSize('milli');\n appearance: none;\n border: none;\n align-items: center;\n border-radius: $formInputBorderRadius;\n color: $colorPrimary70;\n display: flex;\n gap: space('xsmall');\n padding: 0;\n padding-left: space('small');\n padding-right: space('xsmall');\n\n position: relative;\n width: 100%;\n min-height: 40px;\n z-index: 1;\n }\n\n &__select-icon {\n --size: #{iconSize('xsmall')};\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n Prop,\n Element,\n h,\n Event,\n EventEmitter,\n State,\n Method,\n Watch\n} from \"@stencil/core\"\n\nimport {\n addDays,\n startOfWeek,\n endOfWeek,\n setMonth,\n setYear,\n clamp,\n inRange,\n endOfMonth,\n startOfMonth,\n printISODate,\n parseISODate,\n DaysOfWeek,\n} from \"../../utils/date-utils\";\n\nimport { StzhCalendarChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { StzhCalendarMonth } from \"./stzh-calendar-month\";\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\";\n\nfunction range(from: number, to: number) {\n var result: number[] = []\n for (var i = from; i <= to; i++) {\n result.push(i)\n }\n return result\n}\n\nconst keyCode = {\n TAB: 9,\n ESC: 27,\n SPACE: 32,\n PAGE_UP: 33,\n PAGE_DOWN: 34,\n END: 35,\n HOME: 36,\n LEFT: 37,\n UP: 38,\n RIGHT: 39,\n DOWN: 40,\n}\n\nlet calendarCounter = 0;\n\n@Component({\n tag: \"stzh-calendar\",\n styleUrl: \"stzh-calendar.scss\",\n scoped: true\n})\nexport class StzhCalendar implements ComponentInterface {\n /* Date value. Must be in IS0-8601 format: YYYY-MM-DD. /\n @Prop({ mutable: true }) value: string = \"\"\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() min: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() max: string = \"\"\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /* Day names, month names, etc, used for localization. /\n @Prop() localization: StzhCalendarLocalizedText;\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @Prop() isDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the previous month button element.\n * Default value will be taken from translations.\n /\n @Prop() prevMonthAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the next month button element.\n * Default value will be taken from translations.\n /\n @Prop() nextMonthAnalyticsId: string;\n\n @State() activeFocus = false\n @State() focusedDay = new Date()\n\n /* Event emitted when a date is selected. /\n @Event() stzhChange: EventEmitter<StzhCalendarChangeEvent>\n\n @Watch(\"localization\")\n createDateFormatters() {\n if (this.localization) {\n this.dateFormatShort = new Intl.DateTimeFormat(this.localization.$locale, { day: \"numeric\", month: \"long\" })\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n if (newValue) {\n this.setFocusedDay(parseISODate(this.value));\n } else {\n this.setFocusedDay(new Date());\n }\n }\n\n /* Set focused day element by a JS Date object /\n @Method()\n async setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n }\n\n /* Set value by a JS Date object /\n @Method()\n async setDate(date: Date) {\n this.value = printISODate(date)\n }\n\n @Element() element: HTMLStzhCalendarElement\n\n // private monthSelectId: string\n // private yearSelectId: string\n private dialogLabelId: string\n\n // private focusedDayNode: HTMLButtonElement\n\n private initialTouchX: number = null\n private initialTouchY: number = null\n\n /\n To format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n /\n private dateFormatShort: Intl.DateTimeFormat\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = () => {\n this.activeFocus = false\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const touch = event.changedTouches[0]\n this.initialTouchX = touch.pageX\n this.initialTouchY = touch.pageY\n }\n\n // private handleTouchMove = (event: TouchEvent) => {\n // event.preventDefault()\n // }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const touch = event.changedTouches[0]\n const distX = touch.pageX - this.initialTouchX // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY // get vertical dist traveled\n const threshold = 70\n\n const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold\n\n if (isHorizontalSwipe) {\n this.addMonths(distX < 0 ? 1 : -1)\n }\n\n this.initialTouchY = null\n this.initialTouchX = null\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private handleKeyboardNavigation = (event: KeyboardEvent) => {\n var handled = true\n\n switch (event.keyCode) {\n case keyCode.RIGHT:\n this.addDays(1)\n break\n case keyCode.LEFT:\n this.addDays(-1)\n break\n case keyCode.DOWN:\n this.addDays(7)\n break\n case keyCode.UP:\n this.addDays(-7)\n break\n case keyCode.PAGE_UP:\n if (event.shiftKey) {\n this.addYears(-1)\n } else {\n this.addMonths(-1)\n }\n break\n case keyCode.PAGE_DOWN:\n if (event.shiftKey) {\n this.addYears(1)\n } else {\n this.addMonths(1)\n }\n break\n case keyCode.HOME:\n this.startOfWeek()\n break\n case keyCode.END:\n this.endOfWeek()\n break\n default:\n handled = false\n }\n\n if (handled) {\n event.preventDefault()\n this.enableActiveFocus()\n }\n }\n\n private handleDaySelect = (_event: MouseEvent, day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.setDate(day)\n\n this.stzhChange.emit({\n component: \"stzh-calendar\",\n value: this.value,\n valueAsDate: day,\n })\n } else {\n // for consistency we should set the focused day in cases where\n // user has selected a day that has been specifically disallowed\n this.setFocusedDay(day)\n }\n }\n\n private handleMonthSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n this.setMonth(parseInt(value, 10))\n }\n\n private handleYearSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n this.setYear(parseInt(value, 10))\n }\n\n private processFocusedDayNode = (element: HTMLButtonElement) => {\n // this.focusedDayNode = element\n\n if (this.activeFocus) {\n setTimeout(() => element.focus(), 0)\n }\n }\n\n async componentWillLoad() {\n // this.monthSelectId = `stzh-calendar-month-${calendarCounter}`;\n // this.yearSelectId = `stzh-calendar-year-${calendarCounter}`;\n this.dialogLabelId = `stzh-calendar-dialog-${calendarCounter}`;\n calendarCounter++;\n\n this.valueWatcher(this.value);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'calendar');\n }\n }\n\n connectedCallback() {\n this.createDateFormatters()\n }\n\n render() {\n const valueAsDate = parseISODate(this.value)\n const selectedYear = (valueAsDate \|\| this.focusedDay).getFullYear()\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const prevMonthDisabled =\n minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear\n const nextMonthDisabled =\n maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear\n\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n const monthDropdownOptions = this.localization.$globals.monthNames.map((month, i) => {\n return {\n value: i.toString(),\n text: month,\n disabled: !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n ),\n }\n });\n\n const yearDropdownOptions = range(minYear, maxYear).map(year => {\n return {\n value: year.toString(),\n text: year.toString(),\n }\n });\n\n return (\n <Host>\n <div\n class={{\n \"stzh-calendar\": true\n }}\n / onTouchMove={this.handleTouchMove} /\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <div class=\"stzh-calendar__wrapper\">\n {/\n <div class=\"stzh-calendar__mobile\" onFocusin={this.disableActiveFocus}>\n <label class=\"stzh-calendar__mobile-heading\">{this.localization.calendarHeading}</label>\n </div>\n /}\n {/ @ts-ignore /}\n <div class=\"stzh-calendar__header\" onFocusin={this.disableActiveFocus}>\n <div class=\"stzh-calendar__nav is-dropdowns\">\n <h2\n id={this.dialogLabelId}\n class=\"stzh-calendar__vhidden\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n {this.localization.$globals.monthNames[focusedMonth]}\n {this.focusedDay.getFullYear()}\n </h2>\n\n <stzh-dropdown\n class=\"stzh-calendar__dropdown\"\n variant=\"plain\"\n size=\"small\"\n inline\n popover-fullwidth=\"horizontal\"\n noSearch={true}\n openOnFocus={false}\n items={[focusedMonth.toString()]}\n options={monthDropdownOptions}\n label={this.localization.monthSelectLabel}\n labelHidden={true}\n onStzhChange={this.handleMonthSelect}\n ></stzh-dropdown>\n\n <stzh-dropdown\n class=\"stzh-calendar__dropdown\"\n variant=\"plain\"\n size=\"small\"\n inline\n popover-fullwidth=\"horizontal\"\n noSearch={true}\n openOnFocus={false}\n items={[focusedYear.toString()]}\n options={yearDropdownOptions}\n label={this.localization.yearSelectLabel}\n labelHidden={true}\n onStzhChange={this.handleYearSelect}\n ></stzh-dropdown>\n\n {/ alternative for dropdown with popover:\n <stzh-popover>\n <button class=\"stzh-calendar__select-label\" aria-label={this.localization.monthSelectLabel}>\n <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </button>\n <stzh-menu slot=\"content\">\n {this.localization.$globals.monthNames.map((month, i) => (\n <stzh-menu-item\n // onClick={this.handleMonthSelect(month)}\n active={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n /}\n\n {/ original implmentation with native select:\n <label htmlFor={this.monthSelectId} class=\"stzh-calendar__vhidden\">\n {this.localization.monthSelectLabel}\n </label>\n\n <div class=\"stzh-calendar__select-wrapper\">\n <select\n id={this.monthSelectId}\n class=\"stzh-calendar__select stzh-calendar__select--month\"\n onChange={this.handleMonthSelect}\n >\n {this.localization.$globals.monthNames.map((month, i) => (\n <option\n key={month}\n value={i}\n selected={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </option>\n ))}\n </select>\n <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </div>\n </div>\n\n <label htmlFor={this.yearSelectId} class=\"stzh-calendar__vhidden\">\n {this.localization.yearSelectLabel}\n </label>\n\n <div class=\"stzh-calendar__select-wrapper\">\n <select\n id={this.yearSelectId}\n class=\"stzh-calendar__select stzh-calendar__select--year\"\n onChange={this.handleYearSelect}\n >\n {range(minYear, maxYear).map(year => (\n <option key={year} selected={year === focusedYear}>\n {year}\n </option>\n ))}\n </select>\n <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n <span>{this.focusedDay.getFullYear()}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </div>\n </div>\n */}\n\n </div>\n\n <div class=\"stzh-calendar__nav\">\n <stzh-button\n class=\"stzh-calendar__prev\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"arrow-left\"\n iconOnly={true}\n onClick={this.handlePreviousMonthClick}\n disabled={prevMonthDisabled}\n type=\"button\"\n a11yLabel={this.localization.prevMonthLabel}\n analyticsId={this.prevMonthAnalyticsId \|\| this.localization.prevMonthLabel}\n ></stzh-button>\n <stzh-button\n class=\"stzh-calendar__next\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"arrow-right\"\n iconOnly={true}\n onClick={this.handleNextMonthClick}\n disabled={nextMonthDisabled}\n type=\"button\"\n a11yLabel={this.localization.nextMonthLabel}\n analyticsId={this.nextMonthAnalyticsId \|\| this.localization.nextMonthLabel}\n ></stzh-button>\n </div>\n </div>\n\n <StzhCalendarMonth\n dateFormatter={this.dateFormatShort}\n selectedDate={valueAsDate}\n focusedDate={this.focusedDay}\n onDateSelect={this.handleDaySelect}\n onKeyboardNavigation={this.handleKeyboardNavigation}\n labelledById={this.dialogLabelId}\n localization={this.localization}\n firstDayOfWeek={this.firstDayOfWeek}\n focusedDayRef={this.processFocusedDayNode}\n min={minDate}\n max={maxDate}\n isDateDisabled={this.isDateDisabled}\n />\n </div>\n </div>\n </Host>\n )\n }\n}\n"],"version":3}
1	+ {"file":"stzh-calendar.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-calendar/stzh-calendar-day.tsx","src/components/stzh-calendar/stzh-calendar-month.tsx","src/components/stzh-calendar/stzh-calendar.scss?tag=stzh-calendar&encapsulation=scoped","src/components/stzh-calendar/stzh-calendar.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\"\nimport { isEqual, isEqualMonth } from \"../../utils/date-utils\"\n\nexport type StzhCalendarDayProps = {\n focusedDay: Date\n today: Date\n day: Date\n disabled: boolean\n inRange: boolean\n isSelected: boolean\n dateFormatter: Intl.DateTimeFormat\n onDaySelect: (event: MouseEvent, day: Date) => void\n onKeyboardNavigation: (event: KeyboardEvent) => void\n focusedDayRef?: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarDay: FunctionalComponent<StzhCalendarDayProps> = ({\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n focusedDayRef,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}) => {\n const isToday = isEqual(day, today)\n const isMonth = isEqualMonth(day, focusedDay)\n const isFocused = isEqual(day, focusedDay)\n const isOutsideRange = !inRange\n\n function handleClick(e) {\n onDaySelect(e, day)\n }\n\n return (\n <button\n class={{\n \"stzh-calendar__day\": true,\n \"is-outside\": isOutsideRange,\n \"is-today\": isToday,\n \"is-month\": isMonth,\n \"is-disabled\": disabled,\n }}\n tabIndex={isFocused ? 0 : -1}\n onClick={handleClick}\n onKeyDown={onKeyboardNavigation}\n aria-disabled={disabled ? \"true\" : undefined}\n disabled={isOutsideRange}\n type=\"button\"\n aria-pressed={isSelected ? \"true\" : \"false\"}\n aria-current={isToday ? \"date\" : undefined}\n s-object-id={dateFormatter.format(day)}\n ref={el => {\n if (isFocused && el && focusedDayRef) {\n focusedDayRef(el)\n }\n }}\n >\n <span aria-hidden=\"true\">{day.getDate()}</span>\n <span class=\"stzh-calendar__vhidden\">{dateFormatter.format(day)}</span>\n </button>\n )\n}\n","import { h, FunctionalComponent } from \"@stencil/core\"\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from \"../../utils/date-utils\"\n\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\"\nimport { StzhCalendarDay, StzhCalendarDayProps } from \"./stzh-calendar-day\"\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n const result = []\n\n for (let i = 0; i < array.length; i += chunkSize) {\n result.push(array.slice(i, i + chunkSize))\n }\n\n return result\n}\n\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\n return array.map((_, i) => {\n const adjustedIndex = (i + startingOffset) % array.length\n return mapFn(array[adjustedIndex])\n })\n}\n\ntype StzhCalendarMonthProps = {\n selectedDate: Date\n focusedDate: Date\n labelledById: string\n localization: StzhCalendarLocalizedText\n firstDayOfWeek: DaysOfWeek\n min?: Date\n max?: Date\n dateFormatter: Intl.DateTimeFormat\n isDateDisabled: StzhCalendarDateDisabledPredicate\n onDateSelect: StzhCalendarDayProps[\"onDaySelect\"]\n onKeyboardNavigation: StzhCalendarDayProps[\"onKeyboardNavigation\"]\n focusedDayRef: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarMonth: FunctionalComponent<StzhCalendarMonthProps> = ({\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n focusedDayRef,\n}) => {\n const today = new Date()\n const days = getViewOfMonth(focusedDate, firstDayOfWeek)\n\n return (\n <table class=\"stzh-calendar__table\" aria-labelledby={labelledById}>\n <thead>\n <tr>\n {mapWithOffset(localization.$globals.dayNames, firstDayOfWeek, dayName => (\n <th class=\"stzh-calendar__table-header\" scope=\"col\">\n <span aria-hidden=\"true\">{dayName.substring(0, 2)}</span>\n <span class=\"stzh-calendar__vhidden\">{dayName}</span>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {chunk(days, 7).map(week => (\n <tr class=\"stzh-calendar__row\">\n {week.map(day => (\n <td class=\"stzh-calendar__cell\">\n <StzhCalendarDay\n day={day}\n today={today}\n focusedDay={focusedDate}\n isSelected={isEqual(day, selectedDate)}\n disabled={isDateDisabled(day)}\n inRange={inRange(day, min, max)}\n onDaySelect={onDateSelect}\n dateFormatter={dateFormatter}\n onKeyboardNavigation={onKeyboardNavigation}\n focusedDayRef={focusedDayRef}\n />\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n )\n}\n","/*\n @prop --background: Background color of calendar\n * @prop --padding-top: Padding top of calendar\n * @prop --padding-bottom: Padding bottom color of calendar\n * @prop --padding-left: Padding left color of calendar\n * @prop --padding-right: Padding right color of calendar\n * @prop --background-color: Background color of calendar\n /\n\n:host {\n --padding-top: #{space('small')};\n --padding-bottom: #{space('small')};\n --padding-left: #{space('xsmall')};\n --padding-right: #{space('xsmall')};\n\n width: #{$calendarWidth};\n}\n\n.stzh-calendar {\n --stzh-description-min-height: initial;\n\n display: flex;\n position: relative;\n text-align: left;\n touch-action: pan-y;\n user-select: none;\n overflow: hidden;\n overflow: clip;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n\n &__wrapper {\n width: 100%;\n }\n\n &__table {\n @include font;\n @include fontSize('milli');\n border-collapse: collapse;\n border-spacing: 0;\n text-align: center;\n width: 100%;\n }\n\n &__table-header,\n &__cell {\n padding: space('xxxsmall');\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__row:last-child &__cell {\n padding-bottom: 0;\n }\n\n &__table-header {\n @include font;\n @include fontSize('nano');\n text-decoration-line: none;\n padding-top: 0;\n padding-bottom: 0;\n width: 44px;\n height: 40px;\n }\n\n &__cell {\n text-align: center;\n }\n\n &__day {\n @include font;\n @include fontSize('milli');\n appearance: none;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-variant-numeric: tabular-nums;\n width: 40px;\n height: 40px;\n text-align: center;\n vertical-align: middle;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n // position: relative;\n // padding: 0 0 1px;\n // z-index: 1;\n\n // &::before {\n // z-index: -1;\n // bottom: 0;\n // content: \"\";\n // left: 0;\n // position: absolute;\n // right: 0;\n // top: 0;\n // }\n\n &.is-today {\n @include font('heavy');\n color: $colorPrimary70;\n // box-shadow: 0 0 0 1px $colorPrimary;\n // position: relative;\n // z-index: 200;\n }\n\n &:hover {\n background: $colorGrey20;\n }\n\n // &:hover::before {\n // background: $colorGrey20;\n // }\n\n // &:focus,\n &[aria-pressed=\"true\"] {\n background: $colorSecondary30;\n // box-shadow: none;\n color: $colorPrimary70;\n }\n\n &:active {\n background: $colorSecondary30;\n // box-shadow: 0 0 5px $colorPrimary;\n color: $colorPrimary70;\n // z-index: 200;\n }\n\n // &:focus {\n // z-index: 200;\n // }\n\n // &:not(.is-month) {\n // box-shadow: none;\n // }\n\n &:not(.is-month),\n &[aria-disabled=\"true\"] {\n background: transparent;\n color: $colorGrey60;\n cursor: default;\n }\n\n // &[aria-disabled=\"true\"] {\n // &.is-today {\n // box-shadow: 0 0 0 1px $colorGrey20;\n\n // &:focus {\n // box-shadow: 0 0 5px $colorPrimary;\n // }\n // }\n\n // &::before {\n // display: none;\n // }\n // }\n\n &.is-disabled {\n text-decoration-line: line-through;\n }\n\n &.is-outside {\n color: $colorGrey60;\n background: $colorGrey20;\n // box-shadow: none;\n cursor: default;\n pointer-events: none;\n text-decoration-line: none;\n\n // &::before {\n // display: none;\n // }\n }\n }\n\n &__header {\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n &__nav {\n display: flex;\n align-items: center;\n\n &.is-dropdowns {\n gap: calc(#{space('xsmall')} + #{space('small')});\n margin-left: space('small');\n }\n }\n\n // &__prev,\n // &__next {\n // align-items: center;\n // appearance: none;\n // font-family: inherit;\n // background: transparent;\n // border-radius: 50%;\n // color: $colorPrimary70;\n // cursor: pointer;\n // display: inline-flex;\n // flex-shrink: 0;\n // justify-content: center;\n // margin-left: space('xsmall');\n // padding: 0;\n // transition: background-color 300ms ease;\n // height: 32px;\n // width: 32px;\n\n // &:disabled {\n // cursor: default;\n // color: $colorGrey60;\n // }\n // }\n\n stzh-dropdown#{&}__dropdown {\n --popover-width: 100%;\n --popover-height: calc(100% - #{$formInputHeightSmall} - var(--padding-top));\n --popover-max-height: initial;\n position: static;\n }\n\n &__select-wrapper {\n display: inline-flex;\n position: relative;\n\n span {\n margin-right: 0px;\n }\n }\n\n &__select {\n @include fontSize('milli');\n cursor: pointer;\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 2;\n border-radius: $formInputBorderRadius;\n }\n\n &__select-label {\n @include fontSize('milli');\n appearance: none;\n border: none;\n align-items: center;\n border-radius: $formInputBorderRadius;\n color: $colorPrimary70;\n display: flex;\n gap: space('xsmall');\n padding: 0;\n padding-left: space('small');\n padding-right: space('xsmall');\n\n position: relative;\n width: 100%;\n min-height: 40px;\n z-index: 1;\n }\n\n &__select-icon {\n --size: #{iconSize('xsmall')};\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n Prop,\n Element,\n h,\n Event,\n EventEmitter,\n State,\n Method,\n Watch\n} from \"@stencil/core\"\n\nimport {\n addDays,\n startOfWeek,\n endOfWeek,\n setMonth,\n setYear,\n clamp,\n inRange,\n endOfMonth,\n startOfMonth,\n printISODate,\n parseISODate,\n DaysOfWeek,\n} from \"../../utils/date-utils\";\n\nimport { StzhCalendarChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { StzhCalendarMonth } from \"./stzh-calendar-month\";\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\";\n\nfunction range(from: number, to: number) {\n var result: number[] = []\n for (var i = from; i <= to; i++) {\n result.push(i)\n }\n return result\n}\n\nconst keyCode = {\n TAB: 9,\n ESC: 27,\n SPACE: 32,\n PAGE_UP: 33,\n PAGE_DOWN: 34,\n END: 35,\n HOME: 36,\n LEFT: 37,\n UP: 38,\n RIGHT: 39,\n DOWN: 40,\n}\n\nlet calendarCounter = 0;\n\n@Component({\n tag: \"stzh-calendar\",\n styleUrl: \"stzh-calendar.scss\",\n scoped: true\n})\nexport class StzhCalendar implements ComponentInterface {\n /* Date value. Must be in IS0-8601 format: YYYY-MM-DD. /\n @Prop({ mutable: true }) value: string = \"\"\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() min: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() max: string = \"\"\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /* Day names, month names, etc, used for localization. /\n @Prop() localization: StzhCalendarLocalizedText;\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @Prop() isDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the previous month button element.\n * Default value will be taken from translations.\n /\n @Prop() prevMonthAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the next month button element.\n * Default value will be taken from translations.\n /\n @Prop() nextMonthAnalyticsId: string;\n\n @State() activeFocus = false\n @State() focusedDay = new Date()\n\n /* Event emitted when a date is selected. /\n @Event() stzhChange: EventEmitter<StzhCalendarChangeEvent>\n\n @Watch(\"localization\")\n createDateFormatters() {\n if (this.localization) {\n this.dateFormatShort = new Intl.DateTimeFormat(this.localization.$locale, { day: \"numeric\", month: \"long\" })\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n if (newValue) {\n this.setFocusedDay(parseISODate(this.value));\n } else {\n this.setFocusedDay(new Date());\n }\n }\n\n /* Set focused day element by a JS Date object /\n @Method()\n async setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n }\n\n /* Set value by a JS Date object /\n @Method()\n async setDate(date: Date) {\n this.value = printISODate(date)\n }\n\n @Element() element: HTMLStzhCalendarElement\n\n // private monthSelectId: string\n // private yearSelectId: string\n private dialogLabelId: string\n\n // private focusedDayNode: HTMLButtonElement\n\n private initialTouchX: number = null\n private initialTouchY: number = null\n\n /\n To format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n /\n private dateFormatShort: Intl.DateTimeFormat\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = () => {\n this.activeFocus = false\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const touch = event.changedTouches[0]\n this.initialTouchX = touch.pageX\n this.initialTouchY = touch.pageY\n }\n\n // private handleTouchMove = (event: TouchEvent) => {\n // event.preventDefault()\n // }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const touch = event.changedTouches[0]\n const distX = touch.pageX - this.initialTouchX // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY // get vertical dist traveled\n const threshold = 70\n\n const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold\n\n if (isHorizontalSwipe) {\n this.addMonths(distX < 0 ? 1 : -1)\n }\n\n this.initialTouchY = null\n this.initialTouchX = null\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private handleKeyboardNavigation = (event: KeyboardEvent) => {\n var handled = true\n\n switch (event.keyCode) {\n case keyCode.RIGHT:\n this.addDays(1)\n break\n case keyCode.LEFT:\n this.addDays(-1)\n break\n case keyCode.DOWN:\n this.addDays(7)\n break\n case keyCode.UP:\n this.addDays(-7)\n break\n case keyCode.PAGE_UP:\n if (event.shiftKey) {\n this.addYears(-1)\n } else {\n this.addMonths(-1)\n }\n break\n case keyCode.PAGE_DOWN:\n if (event.shiftKey) {\n this.addYears(1)\n } else {\n this.addMonths(1)\n }\n break\n case keyCode.HOME:\n this.startOfWeek()\n break\n case keyCode.END:\n this.endOfWeek()\n break\n default:\n handled = false\n }\n\n if (handled) {\n event.preventDefault()\n this.enableActiveFocus()\n }\n }\n\n private handleDaySelect = (_event: MouseEvent, day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.setDate(day)\n\n this.stzhChange.emit({\n component: \"stzh-calendar\",\n value: this.value,\n valueAsDate: day,\n })\n } else {\n // for consistency we should set the focused day in cases where\n // user has selected a day that has been specifically disallowed\n this.setFocusedDay(day)\n }\n }\n\n private handleMonthSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n this.setMonth(parseInt(value, 10))\n }\n\n private handleYearSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n this.setYear(parseInt(value, 10))\n }\n\n private processFocusedDayNode = (element: HTMLButtonElement) => {\n // this.focusedDayNode = element\n\n if (this.activeFocus) {\n setTimeout(() => element.focus(), 0)\n }\n }\n\n async componentWillLoad() {\n // this.monthSelectId = `stzh-calendar-month-${calendarCounter}`;\n // this.yearSelectId = `stzh-calendar-year-${calendarCounter}`;\n this.dialogLabelId = `stzh-calendar-dialog-${calendarCounter}`;\n calendarCounter++;\n\n this.valueWatcher(this.value);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'calendar');\n }\n }\n\n connectedCallback() {\n this.createDateFormatters()\n }\n\n render() {\n const valueAsDate = parseISODate(this.value)\n const selectedYear = (valueAsDate \|\| this.focusedDay).getFullYear()\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const prevMonthDisabled =\n minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear\n const nextMonthDisabled =\n maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear\n\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n const monthDropdownOptions = this.localization.$globals.monthNames.map((month, i) => {\n return {\n value: i.toString(),\n text: month,\n disabled: !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n ),\n }\n });\n\n const yearDropdownOptions = range(minYear, maxYear).map(year => {\n return {\n value: year.toString(),\n text: year.toString(),\n }\n });\n\n return (\n <Host>\n <div\n class={{\n \"stzh-calendar\": true\n }}\n / onTouchMove={this.handleTouchMove} /\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <div class=\"stzh-calendar__wrapper\">\n {/\n <div class=\"stzh-calendar__mobile\" onFocusin={this.disableActiveFocus}>\n <label class=\"stzh-calendar__mobile-heading\">{this.localization.calendarHeading}</label>\n </div>\n /}\n {/ @ts-ignore /}\n <div class=\"stzh-calendar__header\" onFocusin={this.disableActiveFocus}>\n <div class=\"stzh-calendar__nav is-dropdowns\">\n <h2\n id={this.dialogLabelId}\n class=\"stzh-calendar__vhidden\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n {this.localization.$globals.monthNames[focusedMonth]}\n {this.focusedDay.getFullYear()}\n </h2>\n\n <stzh-dropdown\n class=\"stzh-calendar__dropdown\"\n variant=\"plain\"\n size=\"small\"\n inline\n popover-fullwidth=\"horizontal\"\n noSearch={true}\n openOnFocus={false}\n items={[focusedMonth.toString()]}\n options={monthDropdownOptions}\n label={this.localization.monthSelectLabel}\n labelHidden={true}\n onStzhChange={this.handleMonthSelect}\n ></stzh-dropdown>\n\n <stzh-dropdown\n class=\"stzh-calendar__dropdown\"\n variant=\"plain\"\n size=\"small\"\n inline\n popover-fullwidth=\"horizontal\"\n noSearch={true}\n openOnFocus={false}\n items={[focusedYear.toString()]}\n options={yearDropdownOptions}\n label={this.localization.yearSelectLabel}\n labelHidden={true}\n onStzhChange={this.handleYearSelect}\n ></stzh-dropdown>\n\n {/ alternative for dropdown with popover:\n <stzh-popover>\n <button class=\"stzh-calendar__select-label\" aria-label={this.localization.monthSelectLabel}>\n <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </button>\n <stzh-menu slot=\"content\">\n {this.localization.$globals.monthNames.map((month, i) => (\n <stzh-menu-item\n // onClick={this.handleMonthSelect(month)}\n active={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n /}\n\n {/ original implmentation with native select:\n <label htmlFor={this.monthSelectId} class=\"stzh-calendar__vhidden\">\n {this.localization.monthSelectLabel}\n </label>\n\n <div class=\"stzh-calendar__select-wrapper\">\n <select\n id={this.monthSelectId}\n class=\"stzh-calendar__select stzh-calendar__select--month\"\n onChange={this.handleMonthSelect}\n >\n {this.localization.$globals.monthNames.map((month, i) => (\n <option\n key={month}\n value={i}\n selected={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </option>\n ))}\n </select>\n <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </div>\n </div>\n\n <label htmlFor={this.yearSelectId} class=\"stzh-calendar__vhidden\">\n {this.localization.yearSelectLabel}\n </label>\n\n <div class=\"stzh-calendar__select-wrapper\">\n <select\n id={this.yearSelectId}\n class=\"stzh-calendar__select stzh-calendar__select--year\"\n onChange={this.handleYearSelect}\n >\n {range(minYear, maxYear).map(year => (\n <option key={year} selected={year === focusedYear}>\n {year}\n </option>\n ))}\n </select>\n <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n <span>{this.focusedDay.getFullYear()}</span>\n <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n </div>\n </div>\n */}\n\n </div>\n\n <div class=\"stzh-calendar__nav\">\n <stzh-button\n class=\"stzh-calendar__prev\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"arrow-left\"\n iconOnly={true}\n onClick={this.handlePreviousMonthClick}\n disabled={prevMonthDisabled}\n type=\"button\"\n a11yLabel={this.localization.prevMonthLabel}\n analyticsId={this.prevMonthAnalyticsId \|\| this.localization.prevMonthLabel}\n ></stzh-button>\n <stzh-button\n class=\"stzh-calendar__next\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"arrow-right\"\n iconOnly={true}\n onClick={this.handleNextMonthClick}\n disabled={nextMonthDisabled}\n type=\"button\"\n a11yLabel={this.localization.nextMonthLabel}\n analyticsId={this.nextMonthAnalyticsId \|\| this.localization.nextMonthLabel}\n ></stzh-button>\n </div>\n </div>\n\n <StzhCalendarMonth\n dateFormatter={this.dateFormatShort}\n selectedDate={valueAsDate}\n focusedDate={this.focusedDay}\n onDateSelect={this.handleDaySelect}\n onKeyboardNavigation={this.handleKeyboardNavigation}\n labelledById={this.dialogLabelId}\n localization={this.localization}\n firstDayOfWeek={this.firstDayOfWeek}\n focusedDayRef={this.processFocusedDayNode}\n min={minDate}\n max={maxDate}\n isDateDisabled={this.isDateDisabled}\n />\n </div>\n </div>\n </Host>\n )\n }\n}\n"],"version":3}

package/dist/esm/stzh-card-navigation.entry.js CHANGED Viewed

@@ -11,7 +11,8 @@ const StzhCardNavigation = class {
     this.handleCardClick = (originalEvent) => {
       this.stzhClick.emit({
         component: "stzh-card-navigation",
-        originalEvent
+        originalEvent,
+        href: this.href
       });
     };
     this.href = undefined;

package/dist/esm/stzh-card-navigation.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-card-navigation.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,ylNAAylN;;MCwB1mN,kBAAkB;;;;IA+BrB,oBAAe,GAAG,CAAC,aAAyB;MAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;~~OACd~~,CAAC,CAAC;KACJ,CAAA;;;;~~mBArByB~~,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;;~~EAiBzB~~,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;KAC1C,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7C,QACE,EAAC,IAAI,gBAAW,OAAO,IACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChE,WAAK,KAAK,EAAC,+BAA+B,IACxC,EAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B,IAC1C,EAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAClF,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC/D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ,EAEV,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC9C,CACF,EAEN,WAAK,KAAK,EAAC,6BAA6B,IACtC,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-card-navigation/stzh-card-navigation.scss?tag=stzh-card-navigation&encapsulation=scoped","src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n}\n\n.stzh-card-navigation {\n position: relative;\n flex-grow: 1;\n display: flex;\n gap: space('small');\n background-color: $colorGrey10;\n\n &__wrapper {\n @include spaceCurve('padding-left', 'regular');\n display: flex;\n align-items: center;\n flex-grow: 1;\n // safe space padding top/bottom when it would go to three lines\n padding-top: 10px;\n padding-bottom: 10px;\n }\n\n &__title {\n @include font('heavy');\n @include fontSize('centi', 'heading');\n\t\t@include wordWrap;\n color: $colorPrimary70;\n\t\tmargin: 0;\n }\n\n &__title-link {\n display: block;\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n appearance: none;\n background-color: transparent;\n border: none;\n color: $colorPrimary;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &::after {\n z-index: 1;\n }\n }\n\n &__lead {\n @include fontCurve('p2');\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n &__arrow {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 64px;\n height: 64px;\n color: $colorPrimary70;\n background-color: $colorSecondary30;\n }\n\n &__arrow-icon {\n --size: #{iconSize('large')};\n }\n\n /* Has lead variant /\n\n &--has-lead &__wrapper {\n @include spaceCurve('padding-right', 'regular');\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'large');\n flex-direction: column;\n align-items: flex-start;\n }\n\n &--has-lead &__arrow {\n position: absolute;\n right: 0;\n bottom: 0;\n width: 44px;\n height: 44px;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhCardNavigationClickEvent\n} from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n /\n@Component({\n tag: \"stzh-card-navigation\",\n styleUrl: \"stzh-card-navigation.scss\",\n scoped: true\n})\nexport class StzhCardNavigation {\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Lead text (alternative for lead slot) /\n @Prop() lead: string = \"\";\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardNavigationClickEvent>;\n\n private titleLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-navigation\",\n originalEvent\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n render() {\n const hasLead = !!this.lead \|\| hasSlot(this.element, 'lead');\n\n const classes = {\n \"stzh-card-navigation\": true,\n \"stzh-card-navigation--has-lead\": hasLead,\n };\n\n const Heading = `h${this.headingLevel}`;\n const TitleLink = this.href ? \"a\" : \"button\";\n\n return (\n <Host has-lead={hasLead}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n <div class=\"stzh-card-navigation__wrapper\">\n <Heading class=\"stzh-card-navigation__title\">\n <TitleLink\n ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-card-navigation__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </TitleLink>\n </Heading>\n\n <div class=\"stzh-card-navigation__lead\">\n {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-navigation__arrow\">\n <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-card-navigation.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,ylNAAylN;;MCwB1mN,kBAAkB;;;;IA+BrB,oBAAe,GAAG,CAAC,aAAyB;MAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,sBAAsB;QACjC,aAAa;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;KACJ,CAAA;;;;mBAtByB,EAAE;wBAGkB,GAAG;gBAG1B,EAAE;;EAkBzB,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;MAC5B,gCAAgC,EAAE,OAAO;KAC1C,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7C,QACE,EAAC,IAAI,gBAAW,OAAO,IACrB,eAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChE,WAAK,KAAK,EAAC,+BAA+B,IACxC,EAAC,OAAO,IAAC,KAAK,EAAC,6BAA6B,IAC1C,EAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAClF,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC/D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ,EAEV,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC9C,CACF,EAEN,WAAK,KAAK,EAAC,6BAA6B,IACtC,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC/E,CACE,CACL,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-card-navigation/stzh-card-navigation.scss?tag=stzh-card-navigation&encapsulation=scoped","src/components/stzh-card-navigation/stzh-card-navigation.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n}\n\n.stzh-card-navigation {\n position: relative;\n flex-grow: 1;\n display: flex;\n gap: space('small');\n background-color: $colorGrey10;\n\n &__wrapper {\n @include spaceCurve('padding-left', 'regular');\n display: flex;\n align-items: center;\n flex-grow: 1;\n // safe space padding top/bottom when it would go to three lines\n padding-top: 10px;\n padding-bottom: 10px;\n }\n\n &__title {\n @include font('heavy');\n @include fontSize('centi', 'heading');\n\t\t@include wordWrap;\n color: $colorPrimary70;\n\t\tmargin: 0;\n }\n\n &__title-link {\n display: block;\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n appearance: none;\n background-color: transparent;\n border: none;\n color: $colorPrimary;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &::after {\n z-index: 1;\n }\n }\n\n &__lead {\n @include fontCurve('p2');\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n &__arrow {\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 64px;\n height: 64px;\n color: $colorPrimary70;\n background-color: $colorSecondary30;\n }\n\n &__arrow-icon {\n --size: #{iconSize('large')};\n }\n\n /* Has lead variant /\n\n &--has-lead &__wrapper {\n @include spaceCurve('padding-right', 'regular');\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'large');\n flex-direction: column;\n align-items: flex-start;\n }\n\n &--has-lead &__arrow {\n position: absolute;\n right: 0;\n bottom: 0;\n width: 44px;\n height: 44px;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhCardNavigationClickEvent\n} from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n /\n@Component({\n tag: \"stzh-card-navigation\",\n styleUrl: \"stzh-card-navigation.scss\",\n scoped: true\n})\nexport class StzhCardNavigation {\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Lead text (alternative for lead slot) /\n @Prop() lead: string = \"\";\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardNavigationClickEvent>;\n\n private titleLinkElement: HTMLAnchorElement \| HTMLButtonElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-navigation\",\n originalEvent,\n href: this.href\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n render() {\n const hasLead = !!this.lead \|\| hasSlot(this.element, 'lead');\n\n const classes = {\n \"stzh-card-navigation\": true,\n \"stzh-card-navigation--has-lead\": hasLead,\n };\n\n const Heading = `h${this.headingLevel}`;\n const TitleLink = this.href ? \"a\" : \"button\";\n\n return (\n <Host has-lead={hasLead}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n <div class=\"stzh-card-navigation__wrapper\">\n <Heading class=\"stzh-card-navigation__title\">\n <TitleLink\n ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement \| HTMLButtonElement)}\n class=\"stzh-card-navigation__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.handleCardClick}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </TitleLink>\n </Heading>\n\n <div class=\"stzh-card-navigation__lead\">\n {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-navigation__arrow\">\n <stzh-icon class=\"stzh-card-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-card-searchresult.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g
 import { h as hasSlot } from './utils-54aead01.js';
 import './string-utils-e252977e.js';
-const stzhCardSearchresultCss = ".sc-stzh-card-searchresult-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-searchresult-h{display:none}.sc-stzh-card-searchresult-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::before,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-searchresult-h .has-focus.sc-stzh-card-searchresult{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult{outline-style:none !important}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult::-moz-focus-inner{border:0 !important}.sc-stzh-card-searchresult-h{--tag-right-background-color:var(--stzh-color-secondary30);--tag-right-color:var(--stzh-color-primary70);--grid-template-areas:\"heading\"\n    \"description\"\n    \"meta\"\n    \"download\";--grid-template-rows:repeat(3, auto);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"image\"\n    \"heading\"\n    \"description\"\n    \"meta\"\n    \"download\";--grid-template-rows:repeat(4, auto);--grid-template-columns:minmax(0, 1fr)}@media screen and (min-width: 600px){[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description image\"\n      \"meta image\"\n      \"download image\";--grid-template-rows:repeat(3, auto);--grid-template-columns:minmax(0, 1fr) minmax(11.25rem, min-content)}}@media screen and (max-width: 599px){[has-image][image-position=right].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description description\"\n      \"meta meta\"\n      \"download download\";--grid-template-rows:repeat(3, auto);--grid-template-columns:minmax(0, 1fr) minmax(6.25rem, min-content)}}.stzh-card-searchresult.sc-stzh-card-searchresult{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-searchresult__tag-left.sc-stzh-card-searchresult,.stzh-card-searchresult__dateline.sc-stzh-card-searchresult,.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult,.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult,.stzh-card-searchresult__heading-link-text.sc-stzh-card-searchresult,.stzh-card-searchresult__description.sc-stzh-card-searchresult,.stzh-card-searchresult__meta.sc-stzh-card-searchresult,.stzh-card-searchresult__download.sc-stzh-card-searchresult{z-index:1;position:relative}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__meta.sc-stzh-card-searchresult,.stzh-card-searchresult__download.sc-stzh-card-searchresult{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{grid-area:heading;display:grid;margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult__image.sc-stzh-card-searchresult{display:grid;grid-area:image;width:100%}.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{grid-area:description}.stzh-card-searchresult__meta.sc-stzh-card-searchresult{grid-area:meta;overflow:hidden}.stzh-card-searchresult__download.sc-stzh-card-searchresult{grid-area:download;display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-searchresult__download-button.sc-stzh-card-searchresult{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-searchresult__download-heading.sc-stzh-card-searchresult{color:var(--stzh-color-primary70);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.stzh-card-searchresult__tag-left.sc-stzh-card-searchresult,.stzh-card-searchresult__tag-right.sc-stzh-card-searchresult,.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{z-index:2}.stzh-card-searchresult__tag-left.sc-stzh-card-searchresult{position:absolute;left:0;top:0}.stzh-card-searchresult__tag-right.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--tag-right-background-color);color:var(--tag-right-color);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}@media screen and (min-width: 600px){.stzh-card-searchresult__tag-right.sc-stzh-card-searchresult{min-width:11.25rem}}.stzh-card-searchresult__dateline.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__heading.sc-stzh-card-searchresult{margin-top:0px;margin-bottom:var(--stzh-space-xsmall)}.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black)}.stzh-card-searchresult.sc-stzh-card-searchresult:has(.stzh-card-searchresult__description:not(:empty)) .stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__description.sc-stzh-card-searchresult:empty{display:none}.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-searchresult__event-date-teaser-day.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-searchresult__meta-list.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall);white-space:nowrap}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult::before,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult::before{content:\"\";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before,.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{z-index:10}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before{background-color:var(--stzh-color-secondary10)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag-left.sc-stzh-card-searchresult{--color:var(--stzh-color-secondary60)}.stzh-card-searchresult--has-tag-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-big)}.stzh-card-searchresult--has-breadcrumb.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult--has-image.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{z-index:1;position:relative}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-default.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-small)}}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}}.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__tag-right.sc-stzh-card-searchresult{position:static}.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty),.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__meta.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}";
+const stzhCardSearchresultCss = ".sc-stzh-card-searchresult-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-searchresult-h{display:none}.sc-stzh-card-searchresult-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::before,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-searchresult-h .has-focus.sc-stzh-card-searchresult{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult{outline-style:none !important}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult::-moz-focus-inner{border:0 !important}.sc-stzh-card-searchresult-h{--service-background-color:var(--stzh-color-secondary30);--service-color:var(--stzh-color-primary70);--grid-template-areas:\"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"image\"\n    \"heading\"\n    \"description\"\n    \"meta\";--grid-template-rows:repeat(3, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr)}@media screen and (min-width: 600px){[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description image\"\n      \"meta image\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(11.25rem, min-content)}}@media screen and (max-width: 599px){[has-image][image-position=right].sc-stzh-card-searchresult-h{--grid-template-areas:\"heading image\"\n      \"description description\"\n      \"meta meta\";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(6.25rem, min-content)}}.stzh-card-searchresult.sc-stzh-card-searchresult{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__dateline.sc-stzh-card-searchresult,.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult,.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult,.stzh-card-searchresult__heading-link-text.sc-stzh-card-searchresult,.stzh-card-searchresult__description.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{z-index:1;position:relative}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{grid-area:heading;display:grid;margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult__image.sc-stzh-card-searchresult{display:grid;grid-area:image;width:100%}.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{grid-area:description}.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{grid-area:meta}.stzh-card-searchresult__meta.sc-stzh-card-searchresult{overflow:hidden}.stzh-card-searchresult__download.sc-stzh-card-searchresult{display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-searchresult__download-button.sc-stzh-card-searchresult{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-searchresult__download-heading.sc-stzh-card-searchresult{color:var(--stzh-color-primary70);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult,.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{z-index:2}.stzh-card-searchresult__tag.sc-stzh-card-searchresult{position:absolute;left:0;top:0}.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--stzh-color-secondary30);color:var(--stzh-color-primary70);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}@media screen and (min-width: 600px){.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{min-width:11.25rem}}.stzh-card-searchresult__service.sc-stzh-card-searchresult{background-color:var(--service-background-color);color:var(--service-color)}.stzh-card-searchresult__dateline.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__heading.sc-stzh-card-searchresult{margin-top:0px;margin-bottom:var(--stzh-space-xsmall)}.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}@media screen and (min-width: 900px){.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black)}.stzh-card-searchresult.sc-stzh-card-searchresult:has(.stzh-card-searchresult__description:not(:empty)) .stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__description.sc-stzh-card-searchresult:empty{display:none}.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-searchresult__event-date-teaser-day.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-searchresult__meta-list.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult::before,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult::before{content:\"\";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before,.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{z-index:10}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before{background-color:var(--stzh-color-secondary10)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag.sc-stzh-card-searchresult{--color:var(--stzh-color-secondary60)}.stzh-card-searchresult--has-breadcrumb.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult--has-tag.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-service.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxxlarge)}.stzh-card-searchresult--has-service.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-image.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{z-index:1;position:relative}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-default.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-small)}}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}}.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__topic.sc-stzh-card-searchresult{position:static}.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty),.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__meta.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}";
 const StzhCardSearchresult = class {
   constructor(hostRef) {
@@ -11,7 +11,8 @@ const StzhCardSearchresult = class {
     this.handleCardClick = (originalEvent) => {
       this.stzhClick.emit({
         component: "stzh-card-searchresult",
-        originalEvent
+        originalEvent,
+        href: this.href
       });
     };
     this.localization = undefined;
@@ -22,11 +23,13 @@ const StzhCardSearchresult = class {
     this.heading = "";
     this.headingLevel = "3";
     this.description = "";
-    this.tagLeft = undefined;
-    this.tagRight = undefined;
+    this.tag = undefined;
+    this.topic = undefined;
+    this.service = undefined;
     this.dateline = undefined;
     this.meta = undefined;
     this.breadcrumbItems = undefined;
+    this.datalistItems = [];
     this.eventDateStart = undefined;
     this.eventDateEnd = undefined;
     this.eventLocation = undefined;
@@ -51,22 +54,6 @@ const StzhCardSearchresult = class {
       this._meta = newValue;
     }
   }
-  breadcrumbItemsWatcher(newValue) {
-    if (!newValue) {
-      this._breadcrumbItems = [];
-    }
-    else if (typeof newValue === "string") {
-      try {
-        this._breadcrumbItems = JSON.parse(newValue);
-      }
-      catch (e) {
-        this._breadcrumbItems = [];
-      }
-    }
-    else {
-      this._breadcrumbItems = newValue;
-    }
-  }
   downloadMetaWatcher(newValue) {
     if (!newValue) {
       this._downloadMeta = [];
@@ -94,7 +81,6 @@ const StzhCardSearchresult = class {
   }
   async componentWillLoad() {
     this.metaWatcher(this.meta);
-    this.breadcrumbItemsWatcher(this.breadcrumbItems);
     this.downloadMetaWatcher(this.downloadMeta);
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "card-searchresult");
@@ -115,33 +101,36 @@ const StzhCardSearchresult = class {
       "stzh-card-searchresult--has-description": hasDescription,
       "stzh-card-searchresult--has-description-wrapper": hasDescription || !!eventDateStart || !!this.eventLocation,
       "stzh-card-searchresult--has-link": !!this.href,
-      "stzh-card-searchresult--has-tag-right": !!this.tagRight,
+      "stzh-card-searchresult--has-service": !!this.service,
+      "stzh-card-searchresult--has-tag": !!this.tag,
+      "stzh-card-searchresult--has-topic": !!this.topic,
       "stzh-card-searchresult--has-image": hasImage,
       "stzh-card-searchresult--has-image-default": hasImage && this.imagePosition === "default",
       "stzh-card-searchresult--has-image-right": hasImage && this.imagePosition === "right",
       "stzh-card-searchresult--has-meta": this._meta.length > 0,
       "stzh-card-searchresult--has-download": !!this.downloadHeading || this._downloadMeta.length > 0,
-      "stzh-card-searchresult--has-breadcrumb": this._breadcrumbItems.length > 0,
+      "stzh-card-searchresult--has-breadcrumb": !!this.breadcrumbItems,
     };
     const Heading = `h${this.headingLevel}`;
     const HeadingLink = this.href ? "a" : "div";
-    return (h(Host, { "has-image": hasImage }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, this.tagLeft &&
-      h("stzh-tag", { class: "stzh-card-searchresult__tag-left", label: this.tagLeft, nonInteractive: true }), h("div", { class: "stzh-card-searchresult__heading-wrapper" }, this._breadcrumbItems.length > 0 &&
-      h("stzh-breadcrumb", { class: "stzh-card-searchresult__breadcrumb", items: this._breadcrumbItems, variant: "teaser" }), this.dateline &&
+    return (h(Host, { "has-image": hasImage }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, this.tag &&
+      h("stzh-tag", { class: "stzh-card-searchresult__tag", label: this.tag, nonInteractive: true }), h("div", { class: "stzh-card-searchresult__heading-wrapper" }, this.breadcrumbItems &&
+      h("stzh-breadcrumb", { class: "stzh-card-searchresult__breadcrumb", items: this.breadcrumbItems, variant: "teaser" }), this.dateline &&
       h("div", { class: "stzh-card-searchresult__dateline" }, this.dateline), h(Heading, { class: "stzh-card-searchresult__heading" }, h(HeadingLink, { ref: (el) => (this.headingLinkElement = el), class: "stzh-card-searchresult__heading-link", href: this.href, target: this.target, download: this.download, onClick: this.handleCardClick }, h("div", { class: "stzh-card-searchresult__heading-link-text", ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("div", { class: "stzh-card-searchresult__description-wrapper" }, (eventDateStart || this.eventLocation) &&
       h("div", { class: "stzh-card-searchresult__event-infos" }, eventDateStart &&
         h("div", { class: "stzh-card-searchresult__event-date" }, h("span", null, this.dateAdapter.format(eventDateStart, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, "time")), this.eventLocation &&
         h("div", { class: "stzh-card-searchresult__event-location" }, this.eventLocation)), h("div", { class: "stzh-card-searchresult__description" }, this.description ? this.description : h("slot", { name: "description" }))), h("div", { class: "stzh-card-searchresult__image" }, eventDateStart &&
-      h("div", { class: "stzh-card-searchresult__event-date-teaser" }, h("div", { class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()])), this.tagRight && h("div", { class: "stzh-card-searchresult__tag-right" }, this.tagRight), h("slot", { name: "image" })), this._meta.length > 0 &&
-      h("div", { class: "stzh-card-searchresult__meta" }, h("div", { class: "stzh-card-searchresult__meta-list" }, this._meta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))), (!!this.downloadHeading || this._downloadMeta.length > 0) &&
-      h("div", { class: "stzh-card-searchresult__download" }, h("div", { class: "stzh-card-searchresult__download-data" }, this.downloadHeading &&
-        h("div", { class: "stzh-card-searchresult__download-heading" }, this.downloadHeading), this._downloadMeta.length > 0 &&
-        h("div", { class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))), h("div", { class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { class: "stzh-card-searchresult__download-icon", name: "download" }))))));
+      h("div", { class: "stzh-card-searchresult__event-date-teaser" }, h("div", { class: "stzh-card-searchresult__event-date-teaser-day-name" }, this.localization.$globals.dayNamesShort[eventDateStart.getDay()]), h("div", { class: "stzh-card-searchresult__event-date-teaser-day" }, eventDateStart.getDate() < 10 && '0', eventDateStart.getDate()), h("div", { class: "stzh-card-searchresult__event-date-teaser-month" }, this.localization.$globals.monthNamesShort[eventDateStart.getMonth()])), this.topic && h("div", { class: "stzh-card-searchresult__topic" }, this.topic), this.service && h("div", { class: "stzh-card-searchresult__service" }, this.service), h("slot", { name: "image" })), (this._meta.length > 0 || this.datalistItems || (!!this.downloadHeading || this._downloadMeta.length > 0)) &&
+      h("div", { class: "stzh-card-searchresult__meta-wrapper" }, this.datalistItems &&
+        h("stzh-datalist", { class: "stzh-card-searchresult__datalist", items: this.datalistItems }), this._meta.length > 0 &&
+        h("div", { class: "stzh-card-searchresult__meta" }, h("div", { class: "stzh-card-searchresult__meta-list" }, this._meta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__meta-list-item" }, meta))))), (!!this.downloadHeading || this._downloadMeta.length > 0) &&
+        h("div", { class: "stzh-card-searchresult__download" }, h("div", { class: "stzh-card-searchresult__download-data" }, this.downloadHeading &&
+          h("div", { class: "stzh-card-searchresult__download-heading" }, this.downloadHeading), this._downloadMeta.length > 0 &&
+          h("div", { class: "stzh-card-searchresult__download-meta-list" }, this._downloadMeta.map((meta) => h(Fragment, null, h("div", { class: "stzh-card-searchresult__download-meta-list-item" }, meta))))), h("div", { class: "stzh-card-searchresult__download-button" }, h("stzh-icon", { class: "stzh-card-searchresult__download-icon", name: "download" })))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
     "meta": ["metaWatcher"],
-    "breadcrumbItems": ["breadcrumbItemsWatcher"],
     "downloadMeta": ["downloadMetaWatcher"]
   }; }
 };

package/dist/esm/stzh-card-searchresult.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-card-searchresult.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":[":host {\n --tag-right-background-color: #{$colorSecondary30};\n --tag-right-color: #{$colorPrimary70};\n\n --grid-template-areas:\n \"heading\"\n \"description\"\n \"meta\"\n \"download\";\n --grid-template-rows: repeat(3, auto);\n --grid-template-columns: minmax(0, 1fr);\n\n display: grid;\n\n ::slotted(img) {\n width: 100%;\n max-width: 100%;\n }\n\n &[has-image] {\n --grid-template-areas:\n \"image\"\n \"heading\"\n \"description\"\n \"meta\"\n \"download\";\n --grid-template-rows: repeat(4, auto);\n --grid-template-columns: minmax(0, 1fr);\n\n @include mq($from: small) {\n --grid-template-areas:\n \"heading image\"\n \"description image\"\n \"meta image\"\n \"download image\";\n --grid-template-rows: repeat(3, auto);\n --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n }\n }\n\n &[has-image][image-position=\"right\"] {\n @include mq($to: small) {\n --grid-template-areas:\n \"heading image\"\n \"description description\"\n \"meta meta\"\n \"download download\";\n --grid-template-rows: repeat(3, auto);\n --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n }\n }\n}\n\n.stzh-card-searchresult {\n @include fontSize('milli');\n position: relative;\n display: grid;\n background-color: $colorGrey10;\n grid-template-areas: var(--grid-template-areas);\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n color: $colorGrey80;\n\n &__tag-left,\n &__dateline,\n &__breadcrumb,\n &__event-infos,\n &__heading-link-text,\n &__description,\n &__meta,\n &__download {\n z-index: 1;\n position: relative;\n }\n\n &__heading-wrapper,\n &__description-wrapper,\n &__meta,\n &__download {\n margin-left: space('medium');\n margin-right: space('medium');\n margin-bottom: space('large');\n }\n\n &__heading-wrapper {\n grid-area: heading;\n display: grid;\n margin-top: space('xxxlarge');\n }\n\n &__image {\n display: grid;\n grid-area: image;\n width: 100%;\n }\n\n &__description-wrapper {\n grid-area: description;\n }\n\n &__meta {\n grid-area: meta;\n overflow: hidden;\n }\n\n &__download {\n grid-area: download;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: space('xsmall');\n overflow: hidden;\n }\n\n &__download-button {\n align-self: flex-end;\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n color: $colorPrimary70;\n }\n\n &__download-heading {\n color: $colorPrimary70;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n }\n\n &__tag-left,\n &__tag-right,\n &__event-date-teaser {\n z-index: 2;\n }\n\n &__tag-left {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &__tag-right {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n right: 0;\n background-color: var(--tag-right-background-color);\n color: var(--tag-right-color);\n padding: space('xsmall') space('medium');\n text-align: center;\n\n @include mq($from: small) {\n min-width: 180px;\n }\n }\n\n &__dateline {\n @include fontSize('micro');\n margin-bottom: space('small');\n }\n\n &__heading {\n margin-top: 0px;\n margin-bottom: space('xsmall');\n }\n\n &__heading-link {\n @include font('heavy');\n @include fontSize('milli');\n display: block;\n color: $colorPrimary70;\n text-decoration-line: none;\n }\n\n &__event-infos {\n @include fontSize('micro');\n color: $colorBlack;\n }\n\n &:has(#{&}__description:not(:empty)) &__event-infos {\n margin-bottom: space('small');\n }\n\n &__description {\n &:empty {\n display: none;\n }\n }\n\n &__breadcrumb {\n margin-bottom: space('small');\n }\n\n &__event-date-teaser {\n @include fontSize('nano');\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n color: $colorBlack;\n background-color: $colorSecondary30;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n &__event-date-teaser-day {\n @include font('heavy');\n @include fontSize('hecto');\n color: $colorPrimary70;\n margin-top: -7px;\n margin-bottom: -7px;\n }\n\n &__meta-list,\n &__download-meta-list {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n margin-left: calc((#{space('xsmall')} + 1px) / -1);\n }\n\n &__meta-list-item,\n &__download-meta-list-item {\n display: flex;\n align-items: center;\n min-height: 24px;\n gap: space('xsmall');\n white-space: nowrap;\n\n &::before {\n content: '';\n display: block;\n width: 1px;\n height: 16px;\n background-color: currentColor;\n }\n }\n\n /* Has link /\n\n &--has-link &__heading-link {\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n &::before {\n background-color: $colorSecondary10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__tag-left {\n --color: #{$colorSecondary60};\n }\n\n / Has tag right /\n\n &--has-tag-right &__heading-wrapper {\n margin-top: space('big');\n }\n\n / Has breadcrumb /\n\n &--has-breadcrumb &__heading-wrapper {\n margin-top: space('xlarge');\n }\n\n / Has image (default) /\n\n &--has-image &__image {\n z-index: 1;\n position: relative;\n }\n\n &--has-image-default &__heading-wrapper {\n @include mq($to: small) {\n margin-top: space('small');\n }\n }\n\n / Has image right /\n\n &--has-image-right &__image {\n @include mq($to: small) {\n margin-bottom: space('xsmall');\n }\n }\n\n &--has-image-right &__tag-right {\n position: static;\n }\n\n / Has description wrapper, meta or download /\n\n &--has-description-wrapper &__heading-wrapper,\n &--has-meta &__heading-wrapper,\n &--has-download &__heading-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description-wrapper,\n &--has-download &__description-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description,\n &--has-download &__description {\n &:not(:empty) {\n margin-bottom: space('small');\n }\n }\n\n &--has-download &__meta {\n margin-bottom: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhCardSearchresultClickEvent,\n StzhBreadcrumbItem,\n StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhCardSearchresultLocalizedText } from './stzh-card-searchresult.localization';\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n /\n@Component({\n tag: \"stzh-card-searchresult\",\n styleUrl: \"stzh-card-searchresult.scss\",\n scoped: true\n})\nexport class StzhCardSearchresult {\n /* Translation strings /\n @Prop() localization: StzhCardSearchresultLocalizedText;\n\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /* Download attribute (if href is used) /\n @Prop() download: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Description text (alternative for description slot) /\n @Prop() description: string = \"\";\n\n /* Tag left /\n @Prop() tagLeft: string;\n\n /* Tag right /\n @Prop() tagRight: string;\n\n /* Dateline /\n @Prop() dateline: string;\n\n /* Meta /\n @Prop() meta: string[] \| string;\n private _meta: string[];\n\n /* Breadcrumb items /\n @Prop() breadcrumbItems: StzhBreadcrumbItem[] \| string;\n private _breadcrumbItems: StzhBreadcrumbItem[];\n\n /* Event start date /\n @Prop() eventDateStart: Date \| string;\n\n /* Event start date /\n @Prop() eventDateEnd: Date \| string;\n\n /* Event location /\n @Prop() eventLocation: string;\n\n /* Image position /\n @Prop({ reflect: true }) imagePosition: \"default\" \| \"right\" = \"default\";\n\n /* Download heading /\n @Prop() downloadHeading: string;\n\n /* Download meta /\n @Prop() downloadMeta: string[] \| string;\n private _downloadMeta: string[];\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n /\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._meta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (e) {\n this._meta = [];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"breadcrumbItems\")\n breadcrumbItemsWatcher(newValue: string \| StzhBreadcrumbItem[]) {\n if (!newValue) {\n this._breadcrumbItems = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._breadcrumbItems = JSON.parse(newValue);\n } catch (e) {\n this._breadcrumbItems = [];\n }\n } else {\n this._breadcrumbItems = newValue;\n }\n }\n\n @Watch(\"downloadMeta\")\n downloadMetaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._downloadMeta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._downloadMeta = JSON.parse(newValue);\n } catch (e) {\n this._downloadMeta = [];\n }\n } else {\n this._downloadMeta = newValue;\n }\n }\n\n private headingLinkElement: HTMLAnchorElement \| HTMLDivElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-searchresult\",\n originalEvent\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n async componentWillLoad() {\n this.metaWatcher(this.meta);\n this.breadcrumbItemsWatcher(this.breadcrumbItems);\n this.downloadMetaWatcher(this.downloadMeta);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-searchresult\");\n }\n\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n render() {\n const hasHeading = !!this.heading \|\| hasSlot(this.element, 'heading');\n const hasDescription = !!this.description \|\| hasSlot(this.element, 'description');\n const hasImage = hasSlot(this.element, 'image');\n\n const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n const classes = {\n \"stzh-card-searchresult\": true,\n \"stzh-card-searchresult--has-heading\": hasHeading,\n \"stzh-card-searchresult--has-description\": hasDescription,\n \"stzh-card-searchresult--has-description-wrapper\": hasDescription \|\| !!eventDateStart \|\| !!this.eventLocation,\n \"stzh-card-searchresult--has-link\": !!this.href,\n \"stzh-card-searchresult--has-tag-right\": !!this.tagRight,\n \"stzh-card-searchresult--has-image\": hasImage,\n \"stzh-card-searchresult--has-image-default\": hasImage && this.imagePosition === \"default\",\n \"stzh-card-searchresult--has-image-right\": hasImage && this.imagePosition === \"right\",\n \"stzh-card-searchresult--has-meta\": this._meta.length > 0,\n \"stzh-card-searchresult--has-download\": !!this.downloadHeading \|\| this._downloadMeta.length > 0,\n \"stzh-card-searchresult--has-breadcrumb\": this._breadcrumbItems.length > 0,\n };\n\n const Heading = `h${this.headingLevel}`;\n const HeadingLink = this.href ? \"a\" : \"div\";\n\n return (\n <Host has-image={hasImage}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {this.tagLeft &&\n <stzh-tag\n class=\"stzh-card-searchresult__tag-left\"\n label={this.tagLeft}\n nonInteractive={true}\n ></stzh-tag>\n }\n\n <div class=\"stzh-card-searchresult__heading-wrapper\">\n {this._breadcrumbItems.length > 0 &&\n <stzh-breadcrumb\n class=\"stzh-card-searchresult__breadcrumb\"\n items={this._breadcrumbItems}\n variant=\"teaser\"\n ></stzh-breadcrumb>\n }\n\n {this.dateline &&\n <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>\n }\n\n <Heading class=\"stzh-card-searchresult__heading\">\n <HeadingLink\n ref={(el) => (this.headingLinkElement = el as HTMLAnchorElement \| HTMLDivElement)}\n class=\"stzh-card-searchresult__heading-link\"\n href={this.href}\n target={this.target}\n download={this.download}\n onClick={this.handleCardClick}\n >\n <div\n class=\"stzh-card-searchresult__heading-link-text\"\n ref={(el) => (this.headingTextElement = el as HTMLDivElement)}\n >\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </HeadingLink>\n </Heading>\n </div>\n\n <div class=\"stzh-card-searchresult__description-wrapper\">\n {(eventDateStart \|\| this.eventLocation) &&\n <div class=\"stzh-card-searchresult__event-infos\">\n {eventDateStart &&\n <div class=\"stzh-card-searchresult__event-date\">\n <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")}, </span>\n {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n </div>\n }\n {this.eventLocation &&\n <div class=\"stzh-card-searchresult__event-location\">\n {this.eventLocation}\n </div>\n }\n </div>\n }\n\n <div class=\"stzh-card-searchresult__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-searchresult__image\">\n {eventDateStart &&\n <div class=\"stzh-card-searchresult__event-date-teaser\">\n <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n {eventDateStart.getDate() < 10 && '0'}{eventDateStart.getDate()}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n </div>\n </div>\n }\n {this.tagRight && <div class=\"stzh-card-searchresult__tag-right\">{this.tagRight}</div>}\n <slot name=\"image\"></slot>\n </div>\n\n {this._meta.length > 0 &&\n <div class=\"stzh-card-searchresult__meta\">\n <div class=\"stzh-card-searchresult__meta-list\">\n {this._meta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n </div>\n }\n\n {(!!this.downloadHeading \|\| this._downloadMeta.length > 0) &&\n <div class=\"stzh-card-searchresult__download\">\n <div class=\"stzh-card-searchresult__download-data\">\n {this.downloadHeading &&\n <div class=\"stzh-card-searchresult__download-heading\">\n {this.downloadHeading}\n </div>\n }\n {this._downloadMeta.length > 0 &&\n <div class=\"stzh-card-searchresult__download-meta-list\">\n {this._downloadMeta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n }\n </div>\n\n <div class=\"stzh-card-searchresult__download-button\">\n <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n </div>\n </div>\n }\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-card-searchresult.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":[":host {\n --service-background-color: #{$colorSecondary30};\n --service-color: #{$colorPrimary70};\n\n --grid-template-areas:\n \"heading\"\n \"description\"\n \"meta\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n\n display: grid;\n\n ::slotted(img) {\n width: 100%;\n max-width: 100%;\n }\n\n &[has-image] {\n --grid-template-areas:\n \"image\"\n \"heading\"\n \"description\"\n \"meta\";\n --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr);\n\n @include mq($from: small) {\n --grid-template-areas:\n \"heading image\"\n \"description image\"\n \"meta image\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n }\n }\n\n &[has-image][image-position=\"right\"] {\n @include mq($to: small) {\n --grid-template-areas:\n \"heading image\"\n \"description description\"\n \"meta meta\";\n --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n }\n }\n}\n\n.stzh-card-searchresult {\n @include fontSize('milli');\n position: relative;\n display: grid;\n background-color: $colorGrey10;\n grid-template-areas: var(--grid-template-areas);\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n color: $colorGrey80;\n\n &__tag,\n &__dateline,\n &__breadcrumb,\n &__event-infos,\n &__heading-link-text,\n &__description,\n &__meta-wrapper {\n z-index: 1;\n position: relative;\n }\n\n &__heading-wrapper,\n &--has-description-wrapper &__description-wrapper,\n &__meta-wrapper {\n margin-left: space('medium');\n margin-right: space('medium');\n margin-bottom: space('large');\n }\n\n &__heading-wrapper {\n grid-area: heading;\n display: grid;\n margin-top: space('xlarge');\n }\n\n &__image {\n display: grid;\n grid-area: image;\n width: 100%;\n }\n\n &__description-wrapper {\n grid-area: description;\n }\n\n &__meta-wrapper {\n grid-area: meta;\n }\n\n &__meta {\n overflow: hidden;\n }\n\n &__download {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: space('xsmall');\n overflow: hidden;\n }\n\n &__download-button {\n align-self: flex-end;\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n color: $colorPrimary70;\n }\n\n &__download-heading {\n color: $colorPrimary70;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n }\n\n &__tag,\n &__topic,\n &__service,\n &__event-date-teaser {\n z-index: 2;\n }\n\n &__tag {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &__service,\n &__topic {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n right: 0;\n background-color: $colorSecondary30;\n color: $colorPrimary70;\n padding: space('xsmall') space('medium');\n text-align: center;\n\n @include mq($from: small) {\n min-width: 180px;\n }\n }\n\n &__service {\n background-color: var(--service-background-color);\n color: var(--service-color);\n }\n\n &__dateline {\n @include fontSize('micro');\n margin-bottom: space('small');\n }\n\n &__heading {\n margin-top: 0px;\n margin-bottom: space('xsmall');\n }\n\n &__heading-link {\n @include font('heavy');\n @include fontCurve('p1');\n display: block;\n color: $colorPrimary70;\n text-decoration-line: none;\n }\n\n &__event-infos {\n @include fontSize('micro');\n color: $colorBlack;\n }\n\n &:has(#{&}__description:not(:empty)) &__event-infos {\n margin-bottom: space('small');\n }\n\n &__description {\n &:empty {\n display: none;\n }\n }\n\n &__breadcrumb {\n margin-bottom: space('small');\n }\n\n &__event-date-teaser {\n @include fontSize('nano');\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n color: $colorBlack;\n background-color: $colorSecondary30;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n &__event-date-teaser-day {\n @include font('heavy');\n @include fontSize('hecto');\n color: $colorPrimary70;\n margin-top: -7px;\n margin-bottom: -7px;\n }\n\n &__meta-list,\n &__download-meta-list {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n margin-left: calc((#{space('xsmall')} + 1px) / -1);\n }\n\n &__meta-list-item,\n &__download-meta-list-item {\n display: flex;\n align-items: center;\n min-height: 24px;\n gap: space('xsmall');\n\n &::before {\n content: '';\n display: block;\n width: 1px;\n height: 16px;\n background-color: currentColor;\n }\n }\n\n /* Has link /\n\n &--has-link &__heading-link {\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n &::before {\n background-color: $colorSecondary10;\n }\n }\n\n &--has-link:has(#{&}__heading-link:hover) &__tag {\n --color: #{$colorSecondary60};\n }\n\n / Has breadcrumb /\n\n &--has-breadcrumb &__heading-wrapper {\n margin-top: space('xlarge');\n }\n\n / Has tag /\n\n &--has-tag &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n / Has topic or service /\n\n &--has-service &__heading-wrapper,\n &--has-topic &__heading-wrapper {\n margin-top: space('xxxxlarge');\n }\n\n &--has-service#{&}--has-image-right &__heading-wrapper,\n &--has-topic#{&}--has-image-right &__heading-wrapper {\n margin-top: space('xxxlarge');\n }\n\n / Has image (default) /\n\n &--has-image &__image {\n z-index: 1;\n position: relative;\n }\n\n &--has-image-default &__heading-wrapper {\n @include mq($to: small) {\n margin-top: space('small');\n }\n }\n\n / Has image right /\n\n &--has-image-right &__image {\n @include mq($to: small) {\n margin-bottom: space('xsmall');\n }\n }\n\n &--has-image-right &__service,\n &--has-image-right &__topic {\n position: static;\n }\n\n / Has description wrapper, meta or download /\n\n &--has-description-wrapper &__heading-wrapper,\n &--has-meta &__heading-wrapper,\n &--has-download &__heading-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description-wrapper,\n &--has-download &__description-wrapper {\n margin-bottom: 0px;\n }\n\n &--has-meta &__description,\n &--has-download &__description {\n &:not(:empty) {\n margin-bottom: space('small');\n }\n }\n\n &--has-download &__meta {\n margin-bottom: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Fragment\n} from \"@stencil/core\";\n\nimport {\n StzhCardSearchresultClickEvent,\n StzhBreadcrumbItem,\n StzhDatalistItemEntry,\n StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n /\n@Component({\n tag: \"stzh-card-searchresult\",\n styleUrl: \"stzh-card-searchresult.scss\",\n scoped: true\n})\nexport class StzhCardSearchresult {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Href of card /\n @Prop({ reflect: true }) href: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string;\n\n /* Download attribute (if href is used) /\n @Prop() download: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n /\n @Prop() analyticsId: string;\n\n /* Heading (alternative for heading slot) /\n @Prop() heading: string = \"\";\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Description text (alternative for description slot) /\n @Prop() description: string = \"\";\n\n /* Tag /\n @Prop() tag: string;\n\n /* Topic /\n @Prop() topic: string;\n\n /* Service /\n @Prop() service: string;\n\n /* Dateline /\n @Prop() dateline: string;\n\n /* Meta /\n @Prop() meta: string[] \| string;\n private _meta: string[];\n\n /* Breadcrumb items /\n @Prop() breadcrumbItems: StzhBreadcrumbItem[] \| string;\n\n /* Datalist items /\n @Prop() datalistItems: StzhDatalistItemEntry[] \| string = [];\n\n /* Event start date /\n @Prop() eventDateStart: Date \| string;\n\n /* Event start date /\n @Prop() eventDateEnd: Date \| string;\n\n /* Event location /\n @Prop() eventLocation: string;\n\n /* Image position /\n @Prop({ reflect: true }) imagePosition: \"default\" \| \"right\" = \"default\";\n\n /* Download heading /\n @Prop() downloadHeading: string;\n\n /* Download meta /\n @Prop() downloadMeta: string[] \| string;\n private _downloadMeta: string[];\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n /\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Element() element: HTMLStzhListElement;\n\n /* Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._meta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (e) {\n this._meta = [];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"downloadMeta\")\n downloadMetaWatcher(newValue: string \| string[]) {\n if (!newValue) {\n this._downloadMeta = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._downloadMeta = JSON.parse(newValue);\n } catch (e) {\n this._downloadMeta = [];\n }\n } else {\n this._downloadMeta = newValue;\n }\n }\n\n private headingLinkElement: HTMLAnchorElement \| HTMLDivElement;\n private headingTextElement: HTMLDivElement;\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card-searchresult\",\n originalEvent,\n href: this.href\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId \|\| this.headingTextElement?.innerText;\n\n if (objectId) {\n this.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n async componentWillLoad() {\n this.metaWatcher(this.meta);\n this.downloadMetaWatcher(this.downloadMeta);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-searchresult\");\n }\n\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n render() {\n const hasHeading = !!this.heading \|\| hasSlot(this.element, 'heading');\n const hasDescription = !!this.description \|\| hasSlot(this.element, 'description');\n const hasImage = hasSlot(this.element, 'image');\n\n const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n const classes = {\n \"stzh-card-searchresult\": true,\n \"stzh-card-searchresult--has-heading\": hasHeading,\n \"stzh-card-searchresult--has-description\": hasDescription,\n \"stzh-card-searchresult--has-description-wrapper\": hasDescription \|\| !!eventDateStart \|\| !!this.eventLocation,\n \"stzh-card-searchresult--has-link\": !!this.href,\n \"stzh-card-searchresult--has-service\": !!this.service,\n \"stzh-card-searchresult--has-tag\": !!this.tag,\n \"stzh-card-searchresult--has-topic\": !!this.topic,\n \"stzh-card-searchresult--has-image\": hasImage,\n \"stzh-card-searchresult--has-image-default\": hasImage && this.imagePosition === \"default\",\n \"stzh-card-searchresult--has-image-right\": hasImage && this.imagePosition === \"right\",\n \"stzh-card-searchresult--has-meta\": this._meta.length > 0,\n \"stzh-card-searchresult--has-download\": !!this.downloadHeading \|\| this._downloadMeta.length > 0,\n \"stzh-card-searchresult--has-breadcrumb\": !!this.breadcrumbItems,\n };\n\n const Heading = `h${this.headingLevel}`;\n const HeadingLink = this.href ? \"a\" : \"div\";\n\n return (\n <Host has-image={hasImage}>\n <article class={classes} aria-label={this.heading} role=\"listitem\">\n {this.tag &&\n <stzh-tag\n class=\"stzh-card-searchresult__tag\"\n label={this.tag}\n nonInteractive={true}\n ></stzh-tag>\n }\n\n <div class=\"stzh-card-searchresult__heading-wrapper\">\n {this.breadcrumbItems &&\n <stzh-breadcrumb\n class=\"stzh-card-searchresult__breadcrumb\"\n items={this.breadcrumbItems}\n variant=\"teaser\"\n ></stzh-breadcrumb>\n }\n\n {this.dateline &&\n <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>\n }\n\n <Heading class=\"stzh-card-searchresult__heading\">\n <HeadingLink\n ref={(el) => (this.headingLinkElement = el as HTMLAnchorElement \| HTMLDivElement)}\n class=\"stzh-card-searchresult__heading-link\"\n href={this.href}\n target={this.target}\n download={this.download}\n onClick={this.handleCardClick}\n >\n <div\n class=\"stzh-card-searchresult__heading-link-text\"\n ref={(el) => (this.headingTextElement = el as HTMLDivElement)}\n >\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </HeadingLink>\n </Heading>\n </div>\n\n <div class=\"stzh-card-searchresult__description-wrapper\">\n {(eventDateStart \|\| this.eventLocation) &&\n <div class=\"stzh-card-searchresult__event-infos\">\n {eventDateStart &&\n <div class=\"stzh-card-searchresult__event-date\">\n <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")}, </span>\n {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n </div>\n }\n {this.eventLocation &&\n <div class=\"stzh-card-searchresult__event-location\">\n {this.eventLocation}\n </div>\n }\n </div>\n }\n\n <div class=\"stzh-card-searchresult__description\">\n {this.description ? this.description : <slot name=\"description\"></slot>}\n </div>\n </div>\n\n <div class=\"stzh-card-searchresult__image\">\n {eventDateStart &&\n <div class=\"stzh-card-searchresult__event-date-teaser\">\n <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n {eventDateStart.getDate() < 10 && '0'}{eventDateStart.getDate()}\n </div>\n <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n </div>\n </div>\n }\n {this.topic && <div class=\"stzh-card-searchresult__topic\">{this.topic}</div>}\n {this.service && <div class=\"stzh-card-searchresult__service\">{this.service}</div>}\n <slot name=\"image\"></slot>\n </div>\n\n {(this._meta.length > 0 \|\| this.datalistItems \|\| (!!this.downloadHeading \|\| this._downloadMeta.length > 0)) &&\n <div class=\"stzh-card-searchresult__meta-wrapper\">\n {this.datalistItems &&\n <stzh-datalist\n class=\"stzh-card-searchresult__datalist\"\n items={this.datalistItems}\n >\n </stzh-datalist>\n }\n\n {this._meta.length > 0 &&\n <div class=\"stzh-card-searchresult__meta\">\n <div class=\"stzh-card-searchresult__meta-list\">\n {this._meta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n </div>\n }\n\n {(!!this.downloadHeading \|\| this._downloadMeta.length > 0) &&\n <div class=\"stzh-card-searchresult__download\">\n <div class=\"stzh-card-searchresult__download-data\">\n {this.downloadHeading &&\n <div class=\"stzh-card-searchresult__download-heading\">\n {this.downloadHeading}\n </div>\n }\n {this._downloadMeta.length > 0 &&\n <div class=\"stzh-card-searchresult__download-meta-list\">\n {this._downloadMeta.map((meta) =>\n <Fragment>\n <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n </Fragment>\n )}\n </div>\n }\n </div>\n\n <div class=\"stzh-card-searchresult__download-button\">\n <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n </div>\n </div>\n }\n </div>\n }\n </article>\n </Host>\n );\n }\n}\n"],"version":3}