<div id="search-box-31710-91394" class="search-box u-inverted">
<div class="search-box__headline">
<h2 class="headline headline--1"><span class="headline__text">Suchst Du was bestimmtes?</span></h2>
</div>
<div class="search-box__search">
<form id="search-box-31710-91394-search-form" class="inline-form" method="get">
<div class="inline-form__large-input">
<div id="search-box-31710-91394-search-form-input" class="large-input has-overlay-link">
<label for="search-box-31710-91394-search-form-input-input" class="large-input__label">Suchbegriff</label>
<input class="large-input__input" id="search-box-31710-91394-search-form-input-input" name="q" type="search" value="" data-sync-id="search-box-31710-91394-search-term">
</div>
</div>
<div class="inline-form__submit">
<button class="icon-button" type="submit" title="Suche">
<span class="icon-button__icon">
<svg class="icon icon--search" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#search"></use>
</svg> </span>
</button>
</div>
</form>
</div>
<div class="search-box__filters">
<div class="search-box__filters-button">
<button class="icon-button" type="button" data-overlay="search-box-31710-91394-filters">
<span class="icon-button__icon">
<svg class="icon icon--filter" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#filter"></use>
</svg> </span>
<span class="icon-button__text u-underline">Filter (3)</span>
</button>
</div>
<ul class="search-box__list" role="list">
<li class="search-box__list-item">
<div class="search-box__tag">
<button class="search-box__tag-inner" type="button" aria-label="Filter anzeigen" data-overlay="search-box-31710-91394-filters">
<span class="search-box__tag-prefix">Unternehmen: </span>
<span class="search-box__tag-text u-underline">Beispiel-Unternehmen A Beispiel-Unternehmen A</span>
</button>
<a class="search-box__tag-action" href="#" title="Filter "Unternehmen: Beispiel-Unternehmen A Beispiel-Unternehmen A" entfernen">
<svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
</svg> </a>
</div>
</li>
<li class="search-box__list-item">
<div class="search-box__tag">
<button class="search-box__tag-inner" type="button" aria-label="Filter anzeigen" data-overlay="search-box-31710-91394-filters">
<span class="search-box__tag-prefix">Hochschule: </span>
<span class="search-box__tag-text u-underline">Hochschule C</span>
</button>
<a class="search-box__tag-action" href="#" title="Filter "Hochschule: Hochschule C" entfernen">
<svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
</svg> </a>
</div>
</li>
<li class="search-box__list-item">
<div class="search-box__tag">
<button class="search-box__tag-inner" type="button" aria-label="Filter anzeigen" data-overlay="search-box-31710-91394-filters">
<span class="search-box__tag-text u-underline">Aktive Veranstaltungen</span>
</button>
<a class="search-box__tag-action" href="#" title="Filter "Aktive Veranstaltungen" entfernen">
<svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
</svg> </a>
</div>
</li>
</ul>
<div id="search-box-31710-91394-filters" class="overlay overlay--slim" hidden aria-labelledby="search-box-31710-91394-filters-headline" data-destroy-after-close="false" data-redirect-after-close="false">
<div class="overlay__backdrop"></div>
<div class="overlay__overlay u-inverted" role="document">
<div class="overlay__bar">
<button class="overlay__close" type="button" title="Schließen">
<svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
</svg> </button>
</div>
<div class="overlay__content">
<div class="overlay__headline">
<h2 id="search-box-31710-91394-filters-headline" class="headline headline--2"><span class="headline__text">Filter</span></h2>
</div>
<div class="overlay__blocks">
<div class="overlay__block">
<form id="search-box-31710-91394-filters-content" class="filters" method="get">
<div class="filters__search-term">
<div id="search-box-31710-91394-filters-content-search-term" class="large-input has-overlay-link">
<label for="search-box-31710-91394-filters-content-search-term-input" class="large-input__label">Suchbegriff</label>
<input class="large-input__input" id="search-box-31710-91394-filters-content-search-term-input" name="q" type="search" data-sync-from="search-box-31710-91394-search-term">
</div>
</div>
<div class="filters__filters">
<details id="search-box-31710-91394-filters-content-filter-1" class="filters__filter" open>
<summary class="filters__filter-summary has-underline">
<div class="filters__filter-summary-inner">
<span class="filters__filter-summary-text u-underline">Art der Förderung als checkbox-input</span>
<svg class="icon icon--caret-down-alt filters__filter-summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="filters__filter-fields">
<div class="filters__filter-field">
<fieldset id="search-box-31710-91394-filters-content-filter-1-field-1" class="field">
<legend class="field__label u-hidden-visually">
<span class="label">Wählen sie die Art der Förderung aus</span>
</legend>
<div id="search-box-31710-91394-filters-content-filter-1-field-1-errors" class="field__errors" hidden>
<div class="notice notice--error">
<svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
</svg>
<span class="notice__text"></span>
</div>
</div>
<div class="field__controls field__controls--stacked">
<div class="field__control">
<label class="checkbox" id="search-box-31710-91394-filters-content-filter-1-field-1-control-1-wrap" for="search-box-31710-91394-filters-content-filter-1-field-1-control-1">
<input class="checkbox__input" id="search-box-31710-91394-filters-content-filter-1-field-1-control-1" name="checkboxes" value="1" checked aria-required="false" aria-checked="true" type="checkbox" />
<span class="checkbox__icon">
<svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </span>
<span class="checkbox__label">Option 1</span>
</label>
</div>
<div class="field__control">
<label class="checkbox" id="search-box-31710-91394-filters-content-filter-1-field-1-control-2-wrap" for="search-box-31710-91394-filters-content-filter-1-field-1-control-2">
<input class="checkbox__input" id="search-box-31710-91394-filters-content-filter-1-field-1-control-2" name="checkboxes" value="2" checked aria-required="false" aria-checked="true" type="checkbox" />
<span class="checkbox__icon">
<svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </span>
<span class="checkbox__label">Option 2</span>
</label>
</div>
<div class="field__control">
<label class="checkbox" id="search-box-31710-91394-filters-content-filter-1-field-1-control-3-wrap" for="search-box-31710-91394-filters-content-filter-1-field-1-control-3">
<input class="checkbox__input" id="search-box-31710-91394-filters-content-filter-1-field-1-control-3" name="checkboxes" value="3" aria-required="false" aria-checked="false" type="checkbox" />
<span class="checkbox__icon">
<svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </span>
<span class="checkbox__label">Option 3</span>
</label>
</div>
<div class="field__control">
<label class="checkbox" id="search-box-31710-91394-filters-content-filter-1-field-1-control-4-wrap" for="search-box-31710-91394-filters-content-filter-1-field-1-control-4">
<input class="checkbox__input" id="search-box-31710-91394-filters-content-filter-1-field-1-control-4" name="checkboxes" value="4" aria-required="false" aria-checked="false" type="checkbox" />
<span class="checkbox__icon">
<svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </span>
<span class="checkbox__label">Option 4</span>
</label>
</div>
<div class="field__control">
<label class="checkbox" id="search-box-31710-91394-filters-content-filter-1-field-1-control-5-wrap" for="search-box-31710-91394-filters-content-filter-1-field-1-control-5">
<input class="checkbox__input" id="search-box-31710-91394-filters-content-filter-1-field-1-control-5" name="checkboxes" value="5" aria-required="false" aria-checked="false" type="checkbox" />
<span class="checkbox__icon">
<svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </span>
<span class="checkbox__label">Option 5</span>
</label>
</div>
</div>
<div class="field__footer">
</div>
</fieldset>
</div>
</div>
</details>
<details id="search-box-31710-91394-filters-content-filter-2" class="filters__filter">
<summary class="filters__filter-summary has-underline">
<div class="filters__filter-summary-inner">
<span class="filters__filter-summary-text u-underline">Art der Förderung als radio-input</span>
<svg class="icon icon--caret-down-alt filters__filter-summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="filters__filter-fields">
<div class="filters__filter-field">
<fieldset id="search-box-31710-91394-filters-content-filter-2-field-1" class="field">
<legend class="field__label u-hidden-visually">
<span class="label">Wählen sie die Art der Förderung aus</span>
</legend>
<div id="search-box-31710-91394-filters-content-filter-2-field-1-errors" class="field__errors" hidden>
<div class="notice notice--error">
<svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
</svg>
<span class="notice__text"></span>
</div>
</div>
<div class="field__controls field__controls--stacked">
<div class="field__control">
<label class="radio" id="search-box-31710-91394-filters-content-filter-2-field-1-control-1" for="search-box-31710-91394-filters-content-filter-2-field-1-control-1-input">
<input class="radio__input" id="search-box-31710-91394-filters-content-filter-2-field-1-control-1-input" name="radios" value="1" aria-required="false" aria-checked="false" type="radio" />
<div class="radio__marker"></div>
<span class="radio__label">Option 1</span>
</label>
</div>
<div class="field__control">
<label class="radio" id="search-box-31710-91394-filters-content-filter-2-field-1-control-2" for="search-box-31710-91394-filters-content-filter-2-field-1-control-2-input">
<input class="radio__input" id="search-box-31710-91394-filters-content-filter-2-field-1-control-2-input" name="radios" value="2" aria-required="false" aria-checked="false" type="radio" />
<div class="radio__marker"></div>
<span class="radio__label">Option 2</span>
</label>
</div>
<div class="field__control">
<label class="radio" id="search-box-31710-91394-filters-content-filter-2-field-1-control-3" for="search-box-31710-91394-filters-content-filter-2-field-1-control-3-input">
<input class="radio__input" id="search-box-31710-91394-filters-content-filter-2-field-1-control-3-input" name="radios" value="3" aria-required="false" aria-checked="false" type="radio" />
<div class="radio__marker"></div>
<span class="radio__label">Option 3</span>
</label>
</div>
</div>
<div class="field__footer">
</div>
</fieldset>
</div>
</div>
</details>
<details id="search-box-31710-91394-filters-content-filter-3" class="filters__filter">
<summary class="filters__filter-summary has-underline">
<div class="filters__filter-summary-inner">
<span class="filters__filter-summary-text u-underline">Art der Förderung als select</span>
<svg class="icon icon--caret-down-alt filters__filter-summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="filters__filter-fields">
<div class="filters__filter-field">
<div id="search-box-31710-91394-filters-content-filter-3-field-1" class="field">
<label class="field__label u-hidden-visually" for="search-box-31710-91394-filters-content-filter-3-field-1-control">
<span class="label">Wählen sie die Art der Förderung aus</span>
</label>
<div id="search-box-31710-91394-filters-content-filter-3-field-1-errors" class="field__errors" hidden>
<div class="notice notice--error">
<svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
</svg>
<span class="notice__text"></span>
</div>
</div>
<div class="field__controls field__controls--stacked">
<div class="field__control">
<div class="input">
<div class="input__inner">
<select class="input__input input__input--select" id="search-box-31710-91394-filters-content-filter-3-field-1-control" name="select">
<option class="input__option" value="1">Option 1</option>
<option class="input__option" value="2">Option 2</option>
<option class="input__option" value="3">Option 3</option>
</select> <svg class="icon icon--caret-down input__icon input__icon--select" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="field__footer">
</div>
</div>
</div>
</div>
</details>
<div id="search-box-31710-91394-filters-content-filter-4" class="filters__filter">
<div class="filters__filter-fields">
<div class="filters__filter-field">
<div id="search-box-31710-91394-filters-content-filter-4-field-1" class="field">
<label class="field__label u-hidden-visually" for="search-box-31710-91394-filters-content-filter-4-field-1-control">
<span class="label">Filter without summary</span>
</label>
<div id="search-box-31710-91394-filters-content-filter-4-field-1-errors" class="field__errors" hidden>
<div class="notice notice--error">
<svg class="icon icon--caution notice__icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caution"></use>
</svg>
<span class="notice__text"></span>
</div>
</div>
<div class="field__controls field__controls--stacked">
<div class="field__control">
<label class="checkbox" id="search-box-31710-91394-filters-content-filter-4-field-1-control-wrap" for="search-box-31710-91394-filters-content-filter-4-field-1-control">
<input class="checkbox__input" id="search-box-31710-91394-filters-content-filter-4-field-1-control" name="checkboxes" value="1" checked aria-required="false" aria-checked="true" type="checkbox" />
<span class="checkbox__icon">
<svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </span>
<span class="checkbox__label">Option 1</span>
</label>
</div>
</div>
<div class="field__footer">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="filters__actions">
<div class="filters__submit">
<button class="button u-underline" type="submit">Filter anwenden</button>
</div>
<div class="filters__reset">
<button class="button button--outline u-underline" type="reset" data-filters-reset>Filter entfernen</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% set level = level ??? 2 -%}
{% set id = id ??? html_id('search-box') -%}
<div {{ html_attributes({
id: id,
class: 'search-box u-inverted',
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="search-box__headline">
{% include '@headline' with headline | merge({
level: level,
size: 1,
}) only %}
</div>
{% endif %}
<div class="search-box__search">
{% include '@inline-form' with {
id: 'search-form' | namespaceInputId(id),
csrf: csrf ?? false,
actionMethod: actionMethod ?? false,
redirectUrl: redirectUrl ?? false,
action: action ?? false,
method: method ?? false,
input: {
label: 'Search Term' | t('site'),
name: searchTermName,
type: 'search',
inputAttrs: {
value: searchTerm ?? '',
'data-sync-id': 'search-term' | namespaceInputId(id),
},
},
button: {
icon: 'search',
title: 'Search' | t('site'),
},
} only %}
</div>
{% if suggestions|default %}
<div class="search-box__suggestions">
{% if suggestions.headline|default %}
<div class="search-box__suggestions-headline">
{% include '@headline' with suggestions.headline | merge({
level: level,
size: 4,
}) only %}
</div>
{% endif %}
<ul class="search-box__list" role="list">
{% for item in suggestions.items %}
<li class="search-box__list-item">
<a class="search-box__tag" href="{{ item.link }}">
<span class="search-box__tag-text u-underline">
{{- item.text -}}
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if toggles|default %}
<div class="search-box__toggles">
{% for toggle in toggles %}
<div class="search-box__toggle">
{% include '@toggle' with toggle only %}
</div>
{% endfor %}
</div>
{% endif %}
{% if filters|default %}
<div class="search-box__filters">
<div class="search-box__filters-button">
{% include '@icon-button' with {
icon: 'filter',
text: '{count, plural, =0 {Filters} other {Filters (#)}}' | t('site', {
count: activeFilters | default([]) | length,
}),
attrs: {
'data-overlay': 'filters' | namespaceInputId(id),
},
} only %}
</div>
{% if activeFilters|default %}
<ul class="search-box__list" role="list">
{% for activeFilter in activeFilters %}
<li class="search-box__list-item">
<div class="search-box__tag">
<button {{ html_attributes({
class: 'search-box__tag-inner',
type: 'button',
'aria-label': 'Show filters' | t('site'),
'data-overlay': 'filters' | namespaceInputId(id),
}) }}>
{% if activeFilter.prefix|default %}
<span class="search-box__tag-prefix">
{{- activeFilter.prefix -}}{{- ': ' -}}
</span>
{% endif %}
<span class="search-box__tag-text u-underline">
{{- activeFilter.text -}}
</span>
</button>
{% if activeFilter.link|default %}
<a {{ html_attributes({
class: 'search-box__tag-action',
href: activeFilter.link,
title: 'Remove filter "{filter}"' | t('site', {
filter: [activeFilter.prefix|default, activeFilter.text] | filter | join(': '),
}),
}) }}>
{% include '@icon' with { icon: 'cross' } only %}
</a>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
{% endif %}
{% include '@overlay' with {
id: 'filters' | namespaceInputId(id),
open: false,
slim: true,
destroyAfterClose: false,
headline: {
text: 'Filters' | t('site'),
},
use: '@filters',
configuration: filters | merge({
csrf: csrf ?? false,
actionMethod: actionMethod ?? false,
redirectUrl: redirectUrl ?? false,
action: action ?? false,
method: method ?? false,
searchTerm: {
id: 'search-term' | namespaceInputId(id),
name: searchTermName,
label: 'Search Term' | t('site'),
inputAttrs: {
'data-sync-from': 'search-term' | namespaceInputId(id),
},
},
}),
} only %}
</div>
{% endif %}
</div>
{
"headline": {
"text": "Suchst Du was bestimmtes?"
},
"searchTermName": "q",
"filters": {
"searchTerm": {
"name": "q",
"label": "Suchbegriff"
},
"filters": [
{
"summary": "Art der Förderung als checkbox-input",
"open": true,
"fields": [
{
"label": "Wählen sie die Art der Förderung aus",
"type": "checkboxes",
"name": "checkboxes",
"controls": [
{
"use": "@checkbox",
"value": 1,
"label": "Option 1",
"checked": true
},
{
"use": "@checkbox",
"value": 2,
"label": "Option 2",
"checked": true
},
{
"use": "@checkbox",
"value": 3,
"label": "Option 3"
},
{
"use": "@checkbox",
"value": 4,
"label": "Option 4"
},
{
"use": "@checkbox",
"value": 5,
"label": "Option 5"
}
]
}
]
},
{
"summary": "Art der Förderung als radio-input",
"fields": [
{
"label": "Wählen sie die Art der Förderung aus",
"instructions": false,
"type": "radio",
"name": "radios",
"controls": [
{
"use": "@radio",
"value": 1,
"label": "Option 1"
},
{
"use": "@radio",
"value": 2,
"label": "Option 2"
},
{
"use": "@radio",
"value": 3,
"label": "Option 3"
}
]
}
]
},
{
"summary": "Art der Förderung als select",
"fields": [
{
"label": "Wählen sie die Art der Förderung aus",
"instructions": false,
"type": "select",
"name": "select",
"controls": [
{
"use": "@input",
"type": "select",
"options": [
{
"value": 1,
"label": "Option 1"
},
{
"value": 2,
"label": "Option 2"
},
{
"value": 3,
"label": "Option 3"
}
]
}
]
}
]
},
{
"fields": [
{
"label": "Filter without summary",
"type": "checkboxes",
"name": "checkboxes",
"controls": [
{
"use": "@checkbox",
"value": 1,
"label": "Option 1",
"checked": true
}
]
}
]
}
]
},
"activeFilters": [
{
"prefix": "Unternehmen",
"text": "Beispiel-Unternehmen A Beispiel-Unternehmen A",
"link": "#"
},
{
"prefix": "Hochschule",
"text": "Hochschule C",
"link": "#"
},
{
"text": "Aktive Veranstaltungen",
"link": "#"
}
]
}
.search-box {
background-color: var(--search-box-background-color, var(--color-midnight-900));
color: var(--search-box-color, var(--color-white));
display: grid;
gap: var(--search-box-gap);
grid-template-columns: 100%;
padding-block: var(--search-box-padding-block);
padding-inline: var(--search-box-padding-inline);
@include use-responsive-sizing(--search-box-padding-block, responsive-map(xs 3rem, xl 5rem));
@include use-responsive-sizing(--search-box-padding-inline, responsive-map(xs 2rem, xl 5rem));
@include use-responsive-sizing(--search-box-gap, responsive-map(xs 2.5rem, xl 4rem));
}
.search-box__search {
max-inline-size: 80rem;
}
.search-box__suggestions {
display: grid;
gap: 2rem;
grid-template-columns: 100%;
max-inline-size: 80rem;
}
.search-box__list {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.search-box__list-item {
display: block;
max-inline-size: 100%;
}
.search-box__tag {
--_search-box-tag-padding-inline: var(--search-box-tag-padding-inline, 2rem);
--_search-box-tag-padding-block: var(--search-box-tag-padding-block, 0.8rem);
--_search-box-tag-line-height: var(--search-box-tag-line-height, 1.15);
--_search-box-tag-font-size: var(--search-box-tag-font-size, 1.4rem);
--_search-tag-border-radius: var(--search-tag-border-radius,
calc(((var(--_search-box-tag-padding-block) * 2) + (var(--_search-box-tag-font-size) * var(--_search-box-tag-line-height))) / 2));
align-items: stretch;
background-color: var(--search-box-tag-background-color, var(--color-midnight-700));
border-radius: var(--_search-tag-border-radius);
color: var(--search-box-tag-color);
display: inline-flex;
font-size: var(--_search-box-tag-font-size);
line-height: var(--_search-box-tag-line-height);
max-inline-size: 100%;
overflow: hidden;
padding-inline: var(--_search-box-tag-padding-inline);
transition-duration: var(--duration-fast);
transition-property: background-color, color;
&:is(button, :any-link):is(:hover, :focus-visible:not(.u-focus-invisible)) {
background-color: var(--search-box-tag-background-color--interacted, var(--color-orange));
color: var(--search-box-tag-background--interacted, var(--color-midnight));
}
}
.search-box__tag-inner {
display: flex;
margin-inline: calc(var(--_search-box-tag-padding-inline) * -1);
overflow: hidden;
padding-inline: var(--_search-box-tag-padding-inline);
transition-property: background-color, color;
&:is(button, :any-link):is(:hover, :focus-visible:not(.u-focus-invisible)) {
background-color: var(--search-box-tag-background-color--interacted, var(--color-orange));
color: var(--search-box-tag-background--interacted, var(--color-midnight));
}
}
.search-box__tag-prefix {
flex-shrink: 0;
opacity: 0.6;
padding-block: var(--_search-box-tag-padding-block);
}
.search-box__tag-text {
--underline-color: transparent;
--underline-color--enter: currentColor;
--underline-height: 1px;
--line-clamp: 1;
font-weight: var(--search-box-tag-prefix-font-weight, var(--font-weight-semibold));
overflow: hidden;
padding-block: var(--_search-box-tag-padding-block);
text-overflow: ellipsis;
white-space: nowrap;
}
.search-box__tag-action {
align-items: center;
background-color: var(--search-box-tag-action-background-color, var(--color-midnight-700));
border-color: var(--search-tag-action-border-color, var(--color-midnight-500));
border-inline-start-width: var(--search-tag-action-border-width, 1px);
border-style: var(--search-tag-action-border-style, solid);
display: flex;
flex-shrink: 0;
justify-content: center;
margin-inline-end: calc(var(--_search-box-tag-padding-inline) * -1);
margin-inline-start: calc(var(--_search-box-tag-padding-inline) * 0.75);
padding-inline-end: calc(var(--_search-box-tag-padding-inline) * 0.75);
padding-inline-start: calc(var(--_search-box-tag-padding-inline) * 0.6);
transition-property: background-color, border-color, color;
&:any-link:is(:hover, :focus-visible:not(.u-focus-invisible)) {
background-color: var(--search-box-tag-action-background-color--interacted, var(--color-orange));
border-color: var(--search-tag-action-border-color--interacted, var(--color-orange));
color: var(--search-box-tag-action-color--interacted, var(--color-midnight));
}
}
.search-box__toggles {
border-block-start: 2px solid var(--search-box-line-color, var(--color-midnight-800));
display: grid;
padding-block-start: var(--search-box-gap);
row-gap: calc(var(--search-box-gap) / 2);
}
.search-box__filters {
--icon-button-background-color: transparent;
--icon-button-background-color-active: transparent;
--icon-button-border-color: transparent;
--icon-button-border-color-active: transparent;
--icon-button-icon-color: var(--search-box-icon-color, var(--color-orange));
--icon-button-icon-color-active: var(--search-box-icon-color, var(--color-orange));
--icon-button-size: 4rem;
--icon-button-icon-size: 4rem;
--icon-button-gap: 1.5rem;
border-block-start: 2px solid var(--search-box-line-color, var(--color-midnight-800));
display: flex;
flex-direction: column;
padding-block-start: calc(var(--search-box-gap) - var(--icon-button-size) / 4);
row-gap: calc(var(--search-box-gap) / 2);
}
import { on } from 'delegated-events';
type Filter = { category: string; values: string[]; type: string };
on('submit', '.search-box__search', (event) => {
const { currentTarget: $form } = event;
const filters: Filter[] = [];
const category =
$form.querySelector('.large-input__label')?.textContent?.trim() ?? '';
const value =
$form.querySelector<HTMLInputElement>('.large-input__input')?.value ?? '';
filters.push({ category, values: [value], type: 'text' });
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'list_filter',
eventCategory: 'Liste',
eventSubcategory: 'Filter',
eventLocation: 'search_box',
eventLabel: 'Filter:Anwenden',
filters,
});
});
on('submit', '.search-box__filters', (event) => {
const { currentTarget: $form } = event;
const filters: Filter[] = [];
const $searchTerm = $form.querySelector('.filters__search-term');
if ($searchTerm) {
const category =
$searchTerm.querySelector('.large-input__label')?.textContent?.trim() ??
'';
const value =
$searchTerm.querySelector<HTMLInputElement>('.large-input__input')
?.value ?? '';
filters.push({ category, values: [value], type: 'text' });
}
$form.querySelectorAll('.filters__filter').forEach(($filter) => {
const category =
$filter.querySelector('.filters__filter-summary')?.textContent?.trim() ??
'';
const $$checkboxInput =
$filter.querySelectorAll<HTMLInputElement>('.checkbox__input');
const $$radioInput =
$filter.querySelectorAll<HTMLInputElement>('.radio__input');
const $dropdown = $filter.querySelector<HTMLSelectElement>(
'.input__input--select',
);
if ($$checkboxInput.length > 0) {
const values: string[] = Array.from($$checkboxInput)
.filter(($checkboxInput) => $checkboxInput.checked)
.map(
($checkboxInput) =>
$checkboxInput.labels?.[0].textContent?.trim() ?? '',
);
filters.push({ category, values, type: 'checkbox' });
} else if ($$radioInput.length > 0) {
const values: string[] = Array.from($$radioInput)
.filter(($radioInput) => $radioInput.checked)
.map(
($radioInput) => $radioInput.labels?.[0].textContent?.trim() ?? '',
);
filters.push({ category, values, type: 'radio' });
} else if ($dropdown) {
const { text } = $dropdown.options[$dropdown.selectedIndex];
filters.push({ category, values: [text], type: 'dropdown' });
}
});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'list_filter',
eventCategory: 'Liste',
eventSubcategory: 'Filter',
eventLocation: 'search_box',
eventLabel: 'Filter:Anwenden',
filters,
});
});
on('overlay:show', '.search-box__filters', (event) => {
const { currentTarget: $filters } = event;
$filters
.querySelectorAll<HTMLInputElement>('[data-sync-from]')
.forEach(($input) => {
const $sourceInput = document.querySelector<HTMLInputElement>(
`[data-sync-id="${$input.dataset.syncFrom}"]`,
);
$input.value = $sourceInput?.value ?? '';
});
});
on('overlay:hide', '.search-box__filters', (event) => {
const { currentTarget: $filters } = event;
$filters.querySelector('form')?.reset();
});
No notes defined.