hr-design-system-handlebars 1.114.102 → 1.114.104
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.
- package/CHANGELOG.md +25 -0
- package/dist/assets/index.css +14 -3
- package/dist/views/components/forms/components/input.hbs +1 -1
- package/dist/views/components/page/search/search_form.hbs +40 -0
- package/dist/views/components/page/ticker/components/header.hbs +18 -0
- package/dist/views_static/components/forms/components/input.hbs +1 -1
- package/dist/views_static/components/page/search/search_form.hbs +40 -0
- package/dist/views_static/components/page/ticker/components/header.hbs +18 -0
- package/package.json +1 -1
- package/src/stories/views/components/forms/components/input.hbs +1 -1
- package/src/stories/views/components/label/label.stories.js +22 -1
- package/src/stories/views/components/page/search/search_form.hbs +40 -0
- package/src/stories/views/components/page/ticker/components/header.hbs +18 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v1.114.104 (Fri Feb 21 2025)
|
|
2
|
+
|
|
3
|
+
#### ⚠️ Pushed to `main`
|
|
4
|
+
|
|
5
|
+
- Refactoring search result page ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.114.103 (Fri Feb 21 2025)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Dpe 3552 b [#1249](https://github.com/mumprod/hr-design-system-handlebars/pull/1249) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
|
|
18
|
+
|
|
19
|
+
#### Authors: 2
|
|
20
|
+
|
|
21
|
+
- [@eduardo-hr](https://github.com/eduardo-hr)
|
|
22
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v1.114.102 (Thu Feb 20 2025)
|
|
2
27
|
|
|
3
28
|
#### ⚠️ Pushed to `main`
|
package/dist/assets/index.css
CHANGED
|
@@ -1607,6 +1607,9 @@ article #commentList {
|
|
|
1607
1607
|
.mt-7 {
|
|
1608
1608
|
margin-top: 1.75rem;
|
|
1609
1609
|
}
|
|
1610
|
+
.mt-8 {
|
|
1611
|
+
margin-top: 2rem;
|
|
1612
|
+
}
|
|
1610
1613
|
.mt-9 {
|
|
1611
1614
|
margin-top: 2.25rem;
|
|
1612
1615
|
}
|
|
@@ -3846,7 +3849,7 @@ article #commentList {
|
|
|
3846
3849
|
border-bottom-color: var(--color-secondary-ds);
|
|
3847
3850
|
}
|
|
3848
3851
|
.counter-reset {
|
|
3849
|
-
counter-reset:
|
|
3852
|
+
counter-reset: cnt1740160284330;
|
|
3850
3853
|
}
|
|
3851
3854
|
.animate-delay-100 {
|
|
3852
3855
|
--tw-animate-delay: 100ms;
|
|
@@ -4291,7 +4294,7 @@ html { scroll-behavior: smooth; }
|
|
|
4291
4294
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
4292
4295
|
}
|
|
4293
4296
|
.-ordered {
|
|
4294
|
-
counter-increment:
|
|
4297
|
+
counter-increment: cnt1740160284330 1;
|
|
4295
4298
|
}
|
|
4296
4299
|
.-ordered::before {
|
|
4297
4300
|
position: absolute;
|
|
@@ -4309,7 +4312,7 @@ html { scroll-behavior: smooth; }
|
|
|
4309
4312
|
--tw-text-opacity: 1;
|
|
4310
4313
|
color: rgba(0, 0, 0, 1);
|
|
4311
4314
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
4312
|
-
content: counter(
|
|
4315
|
+
content: counter(cnt1740160284330);
|
|
4313
4316
|
}
|
|
4314
4317
|
/*! ****************************/
|
|
4315
4318
|
/*! DataPolicy stuff */
|
|
@@ -7238,6 +7241,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
7238
7241
|
padding-bottom: 6rem;
|
|
7239
7242
|
}
|
|
7240
7243
|
|
|
7244
|
+
.sm\:pb-6 {
|
|
7245
|
+
padding-bottom: 1.5rem;
|
|
7246
|
+
}
|
|
7247
|
+
|
|
7241
7248
|
.sm\:pb-\[86px\] {
|
|
7242
7249
|
padding-bottom: 86px;
|
|
7243
7250
|
}
|
|
@@ -7270,6 +7277,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
7270
7277
|
padding-top: 0.75rem;
|
|
7271
7278
|
}
|
|
7272
7279
|
|
|
7280
|
+
.sm\:pt-4 {
|
|
7281
|
+
padding-top: 1rem;
|
|
7282
|
+
}
|
|
7283
|
+
|
|
7273
7284
|
.sm\:pt-8 {
|
|
7274
7285
|
padding-top: 2rem;
|
|
7275
7286
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
x-init="validateField()"
|
|
5
5
|
x-ignore
|
|
6
6
|
>
|
|
7
|
-
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
7
|
+
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none {{#if _autoSuggestFeature}}js-load{{/if}}"
|
|
8
8
|
:class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
|
|
9
9
|
x-model="input{{getRandom}}"
|
|
10
10
|
id="input{{getRandom}}"
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<form id="search_form" method="GET" action="#">
|
|
2
|
+
<div class="relative flex px-4 pt-6 pb-6 mt-8 mb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:px-4 sm:pt-4 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
|
|
3
|
+
<div class="relative h-12 basis-full width-full">
|
|
4
|
+
{{~> components/forms/components/input
|
|
5
|
+
_locaKey="search_form_label_searchTerm"
|
|
6
|
+
_name="query"
|
|
7
|
+
_label="Suchbegriff"
|
|
8
|
+
_labelClass=""
|
|
9
|
+
_description=""
|
|
10
|
+
_type="text"
|
|
11
|
+
_value=this.queryString
|
|
12
|
+
_autocompleteOff=true
|
|
13
|
+
_autoSuggestFeature=true
|
|
14
|
+
}}
|
|
15
|
+
</div>
|
|
16
|
+
<div class="relative flex h-12 basis-full width-full">
|
|
17
|
+
<div class="relative h-12 basis-full">
|
|
18
|
+
<select class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none border-form-highlight dark:border-form-highlight-dark" id="select_search" title="" name="all" isFocused="false">
|
|
19
|
+
<option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
|
|
20
|
+
"website_name_search_button"}}</option>
|
|
21
|
+
<option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
|
|
22
|
+
"search_select_all"}}</option>
|
|
23
|
+
</select>
|
|
24
|
+
<label for="select_search" class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
|
|
25
|
+
{{loca "search_form_label_searchType"}}
|
|
26
|
+
</label>
|
|
27
|
+
<div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
|
|
28
|
+
{{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="relative">
|
|
32
|
+
<button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
|
|
33
|
+
class="inline-flex items-center justify-center order-2 w-12 h-12 border rounded-r cursor-pointer ds-button font-heading text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark active:scale-95 min-w-11">
|
|
34
|
+
{{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
|
|
35
|
+
<span class="hide">{{loca "search_button_label"}}</span>
|
|
36
|
+
</button>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</form>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<header class="mt-1 sm:mt-8">
|
|
2
|
+
{{#with this.label}}
|
|
3
|
+
{{#> components/label/label_group _css=(if ../../../this.tickerTopic "mb-2 float-left block" "mb-2")}}
|
|
4
|
+
{{> components/label/label _type=this.type _text=(loca this.loca)}}
|
|
5
|
+
{{/components/label/label_group}}
|
|
6
|
+
{{/with}}
|
|
7
|
+
<h2>
|
|
8
|
+
{{#unless this.label }}
|
|
9
|
+
{{~#if topline}}
|
|
10
|
+
<span class="block mb-2 text-base sm480:text-xl font-heading dark:text-text-dark">{{this.topline}}</span>
|
|
11
|
+
{{/if~}}
|
|
12
|
+
{{/unless~}}
|
|
13
|
+
{{#if ../../this.tickerTopic}}
|
|
14
|
+
{{> components/label/label_byline _css="ml-2 mb-2 pt-1 h-6 inline-block" _text=../../../this.tickerTopic}}
|
|
15
|
+
{{/if}}
|
|
16
|
+
<span class="block text-3xl ui-test-story-title font-headingSerif sm480:text-4xl dark:text-text-dark">{{this.title}}</span>
|
|
17
|
+
</h2>
|
|
18
|
+
</header>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
x-init="validateField()"
|
|
5
5
|
x-ignore
|
|
6
6
|
>
|
|
7
|
-
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
7
|
+
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none {{#if _autoSuggestFeature}}js-load{{/if}}"
|
|
8
8
|
:class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
|
|
9
9
|
x-model="input{{getRandom}}"
|
|
10
10
|
id="input{{getRandom}}"
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<form id="search_form" method="GET" action="#">
|
|
2
|
+
<div class="relative flex px-4 pt-6 pb-6 mt-8 mb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:px-4 sm:pt-4 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
|
|
3
|
+
<div class="relative h-12 basis-full width-full">
|
|
4
|
+
{{~> components/forms/components/input
|
|
5
|
+
_locaKey="search_form_label_searchTerm"
|
|
6
|
+
_name="query"
|
|
7
|
+
_label="Suchbegriff"
|
|
8
|
+
_labelClass=""
|
|
9
|
+
_description=""
|
|
10
|
+
_type="text"
|
|
11
|
+
_value=this.queryString
|
|
12
|
+
_autocompleteOff=true
|
|
13
|
+
_autoSuggestFeature=true
|
|
14
|
+
}}
|
|
15
|
+
</div>
|
|
16
|
+
<div class="relative flex h-12 basis-full width-full">
|
|
17
|
+
<div class="relative h-12 basis-full">
|
|
18
|
+
<select class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none border-form-highlight dark:border-form-highlight-dark" id="select_search" title="" name="all" isFocused="false">
|
|
19
|
+
<option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
|
|
20
|
+
"website_name_search_button"}}</option>
|
|
21
|
+
<option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
|
|
22
|
+
"search_select_all"}}</option>
|
|
23
|
+
</select>
|
|
24
|
+
<label for="select_search" class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
|
|
25
|
+
{{loca "search_form_label_searchType"}}
|
|
26
|
+
</label>
|
|
27
|
+
<div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
|
|
28
|
+
{{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="relative">
|
|
32
|
+
<button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
|
|
33
|
+
class="inline-flex items-center justify-center order-2 w-12 h-12 border rounded-r cursor-pointer ds-button font-heading text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark active:scale-95 min-w-11">
|
|
34
|
+
{{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
|
|
35
|
+
<span class="hide">{{loca "search_button_label"}}</span>
|
|
36
|
+
</button>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</form>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<header class="mt-1 sm:mt-8">
|
|
2
|
+
{{#with this.label}}
|
|
3
|
+
{{#> components/label/label_group _css=(if ../../../this.tickerTopic "mb-2 float-left block" "mb-2")}}
|
|
4
|
+
{{> components/label/label _type=this.type _text=(loca this.loca)}}
|
|
5
|
+
{{/components/label/label_group}}
|
|
6
|
+
{{/with}}
|
|
7
|
+
<h2>
|
|
8
|
+
{{#unless this.label }}
|
|
9
|
+
{{~#if topline}}
|
|
10
|
+
<span class="block mb-2 text-base sm480:text-xl font-heading dark:text-text-dark">{{this.topline}}</span>
|
|
11
|
+
{{/if~}}
|
|
12
|
+
{{/unless~}}
|
|
13
|
+
{{#if ../../this.tickerTopic}}
|
|
14
|
+
{{> components/label/label_byline _css="ml-2 mb-2 pt-1 h-6 inline-block" _text=../../../this.tickerTopic}}
|
|
15
|
+
{{/if}}
|
|
16
|
+
<span class="block text-3xl ui-test-story-title font-headingSerif sm480:text-4xl dark:text-text-dark">{{this.title}}</span>
|
|
17
|
+
</h2>
|
|
18
|
+
</header>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.114.
|
|
9
|
+
"version": "1.114.104",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
x-init="validateField()"
|
|
5
5
|
x-ignore
|
|
6
6
|
>
|
|
7
|
-
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
|
|
7
|
+
<input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none {{#if _autoSuggestFeature}}js-load{{/if}}"
|
|
8
8
|
:class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
|
|
9
9
|
x-model="input{{getRandom}}"
|
|
10
10
|
id="input{{getRandom}}"
|
|
@@ -8,12 +8,23 @@ hbsTemplates['label'] = handlebars.compile(`
|
|
|
8
8
|
{{> components/label/label}}
|
|
9
9
|
`)
|
|
10
10
|
|
|
11
|
+
hbsTemplates['label_with_byline'] = handlebars.compile(`
|
|
12
|
+
{{#> components/label/label_group _css="mb-2" _tag=_tag}}
|
|
13
|
+
{{> components/label/label}}
|
|
14
|
+
{{> components/label/label_byline _css="ml-2" _text=_byline}}
|
|
15
|
+
{{/components/label/label_group}}
|
|
16
|
+
`)
|
|
17
|
+
|
|
11
18
|
const Template = (args) => {
|
|
12
19
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
13
20
|
// return `<div>${label}</div>`;
|
|
14
21
|
return hbsTemplates['label']({ ...args })
|
|
15
22
|
}
|
|
16
|
-
|
|
23
|
+
const Template_withByline = (args) => {
|
|
24
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
25
|
+
// return `<div>${label}</div>`;
|
|
26
|
+
return hbsTemplates['label_with_byline']({ ...args })
|
|
27
|
+
}
|
|
17
28
|
const snapshotTemplate = (args) => {
|
|
18
29
|
return getSnapshotsTemplate({ hbsTemplates, args })
|
|
19
30
|
}
|
|
@@ -199,7 +210,17 @@ export const Kurzmeldung = {
|
|
|
199
210
|
_text: 'Kurzmeldung',
|
|
200
211
|
},
|
|
201
212
|
}
|
|
213
|
+
export const TickerMitByline = {
|
|
214
|
+
render: Template_withByline.bind({}),
|
|
215
|
+
name: 'Ticker mit Byline',
|
|
202
216
|
|
|
217
|
+
args: {
|
|
218
|
+
_type: 'ticker',
|
|
219
|
+
_text: 'Ticker',
|
|
220
|
+
_byline: 'Hessen am Morgen',
|
|
221
|
+
_tag: "h3"
|
|
222
|
+
},
|
|
223
|
+
}
|
|
203
224
|
export const Snapshot = {
|
|
204
225
|
render: snapshotTemplate.bind({}),
|
|
205
226
|
name: 'Snapshot',
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<form id="search_form" method="GET" action="#">
|
|
2
|
+
<div class="relative flex px-4 pt-6 pb-6 mt-8 mb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:px-4 sm:pt-4 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
|
|
3
|
+
<div class="relative h-12 basis-full width-full">
|
|
4
|
+
{{~> components/forms/components/input
|
|
5
|
+
_locaKey="search_form_label_searchTerm"
|
|
6
|
+
_name="query"
|
|
7
|
+
_label="Suchbegriff"
|
|
8
|
+
_labelClass=""
|
|
9
|
+
_description=""
|
|
10
|
+
_type="text"
|
|
11
|
+
_value=this.queryString
|
|
12
|
+
_autocompleteOff=true
|
|
13
|
+
_autoSuggestFeature=true
|
|
14
|
+
}}
|
|
15
|
+
</div>
|
|
16
|
+
<div class="relative flex h-12 basis-full width-full">
|
|
17
|
+
<div class="relative h-12 basis-full">
|
|
18
|
+
<select class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none border-form-highlight dark:border-form-highlight-dark" id="select_search" title="" name="all" isFocused="false">
|
|
19
|
+
<option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
|
|
20
|
+
"website_name_search_button"}}</option>
|
|
21
|
+
<option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
|
|
22
|
+
"search_select_all"}}</option>
|
|
23
|
+
</select>
|
|
24
|
+
<label for="select_search" class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
|
|
25
|
+
{{loca "search_form_label_searchType"}}
|
|
26
|
+
</label>
|
|
27
|
+
<div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
|
|
28
|
+
{{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="relative">
|
|
32
|
+
<button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
|
|
33
|
+
class="inline-flex items-center justify-center order-2 w-12 h-12 border rounded-r cursor-pointer ds-button font-heading text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark active:scale-95 min-w-11">
|
|
34
|
+
{{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
|
|
35
|
+
<span class="hide">{{loca "search_button_label"}}</span>
|
|
36
|
+
</button>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</form>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<header class="mt-1 sm:mt-8">
|
|
2
|
+
{{#with this.label}}
|
|
3
|
+
{{#> components/label/label_group _css=(if ../../../this.tickerTopic "mb-2 float-left block" "mb-2")}}
|
|
4
|
+
{{> components/label/label _type=this.type _text=(loca this.loca)}}
|
|
5
|
+
{{/components/label/label_group}}
|
|
6
|
+
{{/with}}
|
|
7
|
+
<h2>
|
|
8
|
+
{{#unless this.label }}
|
|
9
|
+
{{~#if topline}}
|
|
10
|
+
<span class="block mb-2 text-base sm480:text-xl font-heading dark:text-text-dark">{{this.topline}}</span>
|
|
11
|
+
{{/if~}}
|
|
12
|
+
{{/unless~}}
|
|
13
|
+
{{#if ../../this.tickerTopic}}
|
|
14
|
+
{{> components/label/label_byline _css="ml-2 mb-2 pt-1 h-6 inline-block" _text=../../../this.tickerTopic}}
|
|
15
|
+
{{/if}}
|
|
16
|
+
<span class="block text-3xl ui-test-story-title font-headingSerif sm480:text-4xl dark:text-text-dark">{{this.title}}</span>
|
|
17
|
+
</h2>
|
|
18
|
+
</header>
|