hr-design-system-handlebars 1.104.0 → 1.105.1
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 +24 -0
- package/build/handlebars/helpers/handlebar-helpers.js +24 -0
- package/dist/assets/index.css +25 -30
- package/dist/assets/js/alpine.js +4 -1
- package/dist/assets/js/components/forms/contactForm.alpine.js +36 -0
- package/dist/assets/js/components/forms/inputHandler.alpine.js +18 -12
- package/dist/views/components/external-service/external_service_with_datapolicy_check.hbs +2 -2
- package/dist/views/components/forms/choice.hbs +2 -2
- package/dist/views/components/forms/fields.hbs +6 -2
- package/dist/views/components/forms/input.hbs +33 -20
- package/dist/views/components/forms/select.hbs +3 -8
- package/dist/views/components/forms/textarea.hbs +11 -8
- package/dist/views/components/forms/webform.hbs +23 -45
- package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs +1 -1
- package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +1 -1
- package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs +1 -1
- package/dist/views_static/components/external-service/external_service_with_datapolicy_check.hbs +2 -2
- package/dist/views_static/components/forms/choice.hbs +2 -2
- package/dist/views_static/components/forms/fields.hbs +6 -2
- package/dist/views_static/components/forms/input.hbs +33 -20
- package/dist/views_static/components/forms/select.hbs +3 -8
- package/dist/views_static/components/forms/textarea.hbs +11 -8
- package/dist/views_static/components/forms/webform.hbs +23 -45
- package/dist/views_static/components/site_header/brand_navigation/brand_navigation_item.hbs +1 -1
- package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs +1 -1
- package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/fixtures/content/copytext/copytext_webform.json +60 -0
- package/src/assets/fixtures/external-service/external_service.inc.json +19 -19
- package/src/assets/js/alpine.js +4 -1
- package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json +1 -1
- package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json +1 -1
- package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs +2 -2
- package/src/stories/views/components/external-service/fixtures/external_service.json +1 -1
- package/src/stories/views/components/forms/choice.hbs +2 -2
- package/src/stories/views/components/forms/contactForm.alpine.js +36 -0
- package/src/stories/views/components/forms/fields.hbs +6 -2
- package/src/stories/views/components/forms/input.hbs +33 -20
- package/src/stories/views/components/forms/inputHandler.alpine.js +18 -12
- package/src/stories/views/components/forms/select.hbs +3 -8
- package/src/stories/views/components/forms/textarea.hbs +11 -8
- package/src/stories/views/components/forms/webform.hbs +23 -45
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs +1 -1
- package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +1 -1
- package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs +1 -1
- package/dist/assets/js/components/forms/selectHandler.alpine.js +0 -15
- package/src/stories/views/components/forms/selectHandler.alpine.js +0 -15
package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"Wahl Gemeinde Ergebnis"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.js*data-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeDatapolicyCheck":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
|
|
1
|
+
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"Wahl Gemeinde Ergebnis"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.js*data-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true}]}}]}
|
|
1
|
+
{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}},{"isHeadline":true,"text":"Noch ein Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":false,"maxLength":"140"},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
|
package/src/stories/views/components/external-service/external_service_with_datapolicy_check.hbs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
|
|
3
3
|
<div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
|
|
4
4
|
this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
|
|
5
|
-
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.
|
|
5
|
+
data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.isWhitelisted}},"iFrameConfig": { {{~#if this.fixedHeight~}}
|
|
6
6
|
"fixedHeight":"{{this.fixedHeight}}"{{~else~}}{{~#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{~else~}}"aspectRatio":"16x9"{{/if}}{{~/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{~#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{~/if}} }}'>
|
|
7
7
|
{{~> components/external-service/components/external_service_data_policy ~}}
|
|
8
8
|
</div>
|
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
17
|
{{~#if (isStorybook)~}}
|
|
18
|
-
<div id="{{this.externalServiceConfig.externalServiceId}}" data-whitelist="{{this.externalServiceConfig.
|
|
18
|
+
<div id="{{this.externalServiceConfig.externalServiceId}}" data-whitelist="{{this.externalServiceConfig.isWhitelisted}}"></div>
|
|
19
19
|
{{/if}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"ARD_Mediathek_Video":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"
|
|
1
|
+
{"config":{"template":"default","layout":"grid","renderSnapshotsWrapper":false},"ARD_Mediathek_Video":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"ARTE_concert_new":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Datawrapper_CDN_NoResponsiveFixedHeightReload":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":true,"setTimeForReload":"300","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveFixedHeight":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"700","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Datawrapper_CDN_NoResponsiveAspectRatio":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":"4x3"}},"Datawrapper_CDN":{"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","aspectRatio":""}},"Esri":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}},"Facebook":{"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Flourish":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Giphy":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Instagram":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Twitter":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Vimeo":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}},"Youtube_360":{"config":{"useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}},"Wahl_Gemeinde_Ergebnis":{"config":{"template":"noDatapolicyCheck","useAsSnapshot":false},"args":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5"
|
|
2
2
|
ax-load
|
|
3
|
-
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
|
|
3
|
+
x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}')"
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
|
|
7
7
|
<input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '[" border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent"," border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
|
|
8
8
|
:class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
|
|
9
|
-
@change="
|
|
9
|
+
@change="input{{getRandom}}.checked ? valid = true : valid = false;"
|
|
10
10
|
x-model="isChecked"
|
|
11
11
|
id="input{{getRandom}}"
|
|
12
12
|
{{#if _required}}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export default function contactForm(formId) {
|
|
2
|
+
return {
|
|
3
|
+
formInit(){
|
|
4
|
+
this.$store.forms.submissionAttempted[formId] = false;
|
|
5
|
+
console.log("this.$store.forms.submissionAttempted",this.$store.forms.submissionAttempted[formId]);
|
|
6
|
+
},
|
|
7
|
+
clickHandler() {
|
|
8
|
+
console.log('check for Error:',formId);
|
|
9
|
+
const form = this.$refs[formId];
|
|
10
|
+
console.log('form',form);
|
|
11
|
+
const formData = new FormData(form);
|
|
12
|
+
const fields = Array.from(form.elements); // Array of all form fields
|
|
13
|
+
|
|
14
|
+
// Loop through each field, focus it, blur it, and serialize the data
|
|
15
|
+
|
|
16
|
+
if(form.reportValidity()){
|
|
17
|
+
this.submitData();
|
|
18
|
+
} else {
|
|
19
|
+
this.$store.forms.submissionAttempted[formId] = true;
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
submitData() {
|
|
23
|
+
const formData = new FormData(this.$refs[formId]);
|
|
24
|
+
// Convert the FormData to a serialized string
|
|
25
|
+
const serializedData = Array.from(formData.entries())
|
|
26
|
+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
|
|
27
|
+
.join('&');
|
|
28
|
+
|
|
29
|
+
// Log the serialized form data
|
|
30
|
+
console.log('DATA: ' + serializedData);
|
|
31
|
+
},
|
|
32
|
+
getSubmissionAttempted() {
|
|
33
|
+
return this.$store.forms.submissionAttempted[formId]
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
{{/if}}
|
|
14
14
|
|
|
15
15
|
{{else}}
|
|
16
|
-
|
|
17
16
|
<div class="js-wrapper-{{this.name}}">
|
|
18
17
|
{{#if this.type.isTextarea}}
|
|
19
18
|
{{~> components/forms/textarea
|
|
@@ -27,6 +26,7 @@
|
|
|
27
26
|
_required=this.isRequired
|
|
28
27
|
_maxLength=this.maxLength
|
|
29
28
|
_errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
29
|
+
_formId=../_formId
|
|
30
30
|
}}
|
|
31
31
|
{{else if this.type.isText}}
|
|
32
32
|
{{~> components/forms/input
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
_maxLength=this.maxLength
|
|
44
44
|
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
45
45
|
_errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
|
|
46
|
+
_formId=../_formId
|
|
46
47
|
}}
|
|
47
48
|
{{else if this.type.isSelect}}
|
|
48
49
|
{{~> components/forms/select
|
|
@@ -53,6 +54,7 @@
|
|
|
53
54
|
_items=this.options
|
|
54
55
|
_required=this.isRequired
|
|
55
56
|
_errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
57
|
+
_formId=../_formId
|
|
56
58
|
}}
|
|
57
59
|
{{else if this.type.isChoice}}
|
|
58
60
|
{{#if this.isGrouped }}
|
|
@@ -66,7 +68,7 @@
|
|
|
66
68
|
_multipleChoice=../_multipleChoice
|
|
67
69
|
_addClass=../_addClass
|
|
68
70
|
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
69
|
-
|
|
71
|
+
_formId=../_formId
|
|
70
72
|
}}
|
|
71
73
|
{{else}}
|
|
72
74
|
{{~> components/forms/choice
|
|
@@ -79,6 +81,7 @@
|
|
|
79
81
|
_required=this.isRequired
|
|
80
82
|
_selected= this.options.[0].isSelected
|
|
81
83
|
_errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
|
|
84
|
+
_formId=../_formId
|
|
82
85
|
}}
|
|
83
86
|
{{/if}}
|
|
84
87
|
{{else if this.type.isUpload}}
|
|
@@ -89,6 +92,7 @@
|
|
|
89
92
|
_multiple=false
|
|
90
93
|
_required=this.isRequired
|
|
91
94
|
_locaKeyButton="uploadForm_label_file_button"
|
|
95
|
+
_formId=../_formId
|
|
92
96
|
}}
|
|
93
97
|
{{/if}}
|
|
94
98
|
</div>
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
<div class=" relative flex flex-col w-full mb-5 {{_wrapperClass}}"
|
|
2
|
-
:class="{'animate-shake': hideDescription() }"
|
|
3
2
|
ax-load
|
|
4
|
-
x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
3
|
+
x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
|
+
x-init="validateField()"
|
|
5
5
|
x-ignore
|
|
6
6
|
>
|
|
7
7
|
<input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none"
|
|
8
8
|
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
9
9
|
x-model="input{{getRandom}}"
|
|
10
10
|
id="input{{getRandom}}"
|
|
11
|
-
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
|
|
16
|
-
{{/if}}
|
|
11
|
+
x-bind:data-is-valid="valid ? 'true' : 'false'"
|
|
12
|
+
@focus="isFocused = true;"
|
|
13
|
+
@blur="wasFocused = true; isFocused=false; validateField();"
|
|
14
|
+
x-on:keyup ="validateField();"
|
|
17
15
|
type="{{#if _type}}{{_type}}{{/if}}"
|
|
18
16
|
name="{{#if _name}}{{_name}}{{/if}}"
|
|
19
17
|
{{#if _locaKey}}
|
|
@@ -61,20 +59,35 @@
|
|
|
61
59
|
{{/if}}
|
|
62
60
|
{{/if}}
|
|
63
61
|
</label>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
|
|
63
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
+
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
65
|
+
</div>
|
|
66
|
+
|
|
69
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
70
68
|
{{#if _description}}
|
|
71
|
-
<div class="pl-4 text-xs text-gray-500"
|
|
69
|
+
<div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
|
|
72
70
|
{{/if}}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
71
|
+
|
|
72
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
|
|
73
|
+
|
|
74
|
+
</div>
|
|
75
|
+
<div class="hidden">
|
|
76
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
77
|
+
DEBUG
|
|
78
|
+
</div>
|
|
79
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
80
|
+
<div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
81
|
+
<div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
82
|
+
<div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
83
|
+
|
|
84
|
+
<div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
85
|
+
<div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
86
|
+
<div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>
|
|
87
|
+
<div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
|
|
88
|
+
<div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
|
|
89
|
+
<div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
|
|
90
|
+
<div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
|
|
91
|
+
</div>
|
|
79
92
|
</div>
|
|
80
93
|
</div>
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
export default function inputHandler(element, errorMandatory, type, errorEmail, prefilledText = '') {
|
|
1
|
+
export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
|
|
2
2
|
return {
|
|
3
3
|
[element]: prefilledText,
|
|
4
|
-
valid:
|
|
4
|
+
valid: false,
|
|
5
5
|
wasFocused: false,
|
|
6
6
|
isFocused: false,
|
|
7
|
-
validEmail: false,
|
|
8
7
|
isChecked: false,
|
|
8
|
+
typeMismatch: true,
|
|
9
|
+
valueMissing: true,
|
|
10
|
+
|
|
9
11
|
errorMessage() {
|
|
10
12
|
if( type == "email"){
|
|
11
|
-
return
|
|
13
|
+
return this.valueMissing ? errorMandatory : errorEmail
|
|
12
14
|
}
|
|
13
15
|
else {
|
|
14
16
|
return errorMandatory
|
|
@@ -17,19 +19,23 @@ export default function inputHandler(element, errorMandatory, type, errorEmail,
|
|
|
17
19
|
hideDescription() {
|
|
18
20
|
switch (type) {
|
|
19
21
|
case "email":
|
|
20
|
-
return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (
|
|
22
|
+
return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
|
|
21
23
|
case "checkbox":
|
|
22
|
-
return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked);
|
|
24
|
+
return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
|
|
25
|
+
case "select":
|
|
26
|
+
return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]))
|
|
23
27
|
default:
|
|
24
|
-
return Boolean(!this.valid && this.wasFocused && !this.isFocused);
|
|
28
|
+
return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
|
|
25
29
|
}
|
|
26
30
|
},
|
|
27
31
|
hideError() {
|
|
28
|
-
|
|
32
|
+
return Boolean(!this.hideDescription())
|
|
29
33
|
},
|
|
30
|
-
|
|
31
|
-
var
|
|
32
|
-
this.
|
|
33
|
-
|
|
34
|
+
validateField() {
|
|
35
|
+
var field = document.getElementById(element)
|
|
36
|
+
this.typeMismatch = field.validity.typeMismatch;
|
|
37
|
+
this.valueMissing = field.validity.valueMissing;
|
|
38
|
+
this.valid = field.checkValidity()
|
|
39
|
+
}
|
|
34
40
|
};
|
|
35
41
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="relative flex flex-col w-full mb-5 "
|
|
2
2
|
ax-load
|
|
3
|
-
x-data="
|
|
3
|
+
x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
|
|
4
4
|
x-ignore
|
|
5
5
|
>
|
|
6
6
|
<select
|
|
@@ -43,17 +43,12 @@
|
|
|
43
43
|
">
|
|
44
44
|
{{_label}}{{#if _required}}*{{/if}}
|
|
45
45
|
</label>
|
|
46
|
-
{{#if _required}}
|
|
47
|
-
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
|
|
48
|
-
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
49
|
-
</div>
|
|
50
|
-
{{/if}}
|
|
51
46
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
52
47
|
{{#if _description}}
|
|
53
|
-
<div class="pl-4 text-xs text-gray-500 "
|
|
48
|
+
<div class="pl-4 text-xs text-gray-500 " :class="{'hidden': hideDescription()}">{{_description}}</div>
|
|
54
49
|
{{/if}}
|
|
55
50
|
{{#if _required}}
|
|
56
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden':
|
|
51
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
|
|
57
52
|
{{/if}}
|
|
58
53
|
</div>
|
|
59
54
|
<div class="absolute 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">
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<div class="relative flex flex-col w-full mb-5"
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
ax-load
|
|
3
|
+
x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
|
|
4
|
+
x-init="validateField()"
|
|
5
|
+
x-ignore
|
|
6
|
+
>
|
|
4
7
|
<div class="w-full h-4 bg-white"></div>
|
|
5
8
|
<textarea
|
|
6
9
|
x-model="textarea{{getRandom}}"
|
|
@@ -33,7 +36,7 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
|
|
|
33
36
|
{{#if _required}}required{{/if}}
|
|
34
37
|
class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none"
|
|
35
38
|
{{#if _required}}
|
|
36
|
-
:class="{'border-blue-500':
|
|
39
|
+
:class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
|
|
37
40
|
{{/if}}
|
|
38
41
|
>{{~#if _formField.isValid~}}
|
|
39
42
|
{{{_formField.forHtmlContent}}}
|
|
@@ -57,16 +60,16 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
|
|
|
57
60
|
{{/if}}
|
|
58
61
|
</label>
|
|
59
62
|
{{#if _required}}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
<div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
|
|
64
|
+
{{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
|
|
65
|
+
</div>
|
|
63
66
|
{{/if}}
|
|
64
67
|
<div class="flex items-end justify-between h-5 font-heading">
|
|
65
68
|
{{#if _description}}
|
|
66
|
-
<div class="pl-4 text-xs text-gray-500
|
|
69
|
+
<div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
|
|
67
70
|
{{/if}}
|
|
68
71
|
{{#if _required}}
|
|
69
|
-
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden':
|
|
72
|
+
<div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
|
|
70
73
|
{{/if}}
|
|
71
74
|
{{#if _maxLength}}
|
|
72
75
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
@@ -6,59 +6,37 @@
|
|
|
6
6
|
{{this.title}}
|
|
7
7
|
</h3>
|
|
8
8
|
|
|
9
|
-
<form
|
|
10
|
-
|
|
9
|
+
<form
|
|
10
|
+
x-ref="form{{nextRandom}}"
|
|
11
|
+
ax-load
|
|
12
|
+
x-data="contactForm('form{{getRandom}}')"
|
|
13
|
+
x-init="formInit()"
|
|
14
|
+
x-ignore
|
|
15
|
+
|
|
11
16
|
@submit.prevent="submitData"
|
|
12
|
-
|
|
17
|
+
id="form{{getRandom}}"
|
|
13
18
|
class="relative flex flex-col justify-center overflow-hidden group"
|
|
14
|
-
id="form--{{nextRandom}}"
|
|
15
19
|
action="{{this.url}}"
|
|
16
20
|
method="post"
|
|
17
21
|
enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}"
|
|
18
|
-
accept-charset="utf-8"
|
|
19
|
-
|
|
22
|
+
accept-charset="utf-8"
|
|
23
|
+
|
|
24
|
+
>
|
|
25
|
+
|
|
26
|
+
<div class="">
|
|
27
|
+
<div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
|
|
28
|
+
DEBUG
|
|
29
|
+
</div>
|
|
30
|
+
<div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
|
|
31
|
+
<div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
{{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }}
|
|
20
35
|
|
|
21
36
|
{{> components/forms/controls }}
|
|
22
|
-
</form>
|
|
23
|
-
<script>
|
|
24
|
-
function contactForm() {
|
|
25
|
-
return {
|
|
26
|
-
formData: {
|
|
27
|
-
name: '',
|
|
28
|
-
email: '',
|
|
29
|
-
message: ''
|
|
30
|
-
},
|
|
31
|
-
clickHandler() {
|
|
32
|
-
console.log('check for Error ');
|
|
33
|
-
const form = this.$refs.contactFormRef;
|
|
34
|
-
const formData = new FormData(form);
|
|
35
|
-
const fields = Array.from(form.elements); // Array of all form fields
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
if (field.type !== 'submit') { // Skip the submit button
|
|
40
|
-
field.focus(); // Focus the field
|
|
41
|
-
field.blur(); // Immediately unfocus (blur) the field
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
if(form.reportValidity()){
|
|
45
|
-
this.submitData();
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
submitData() {
|
|
50
|
-
const formData = new FormData(this.$refs.contactFormRef);
|
|
51
|
-
// Convert the FormData to a serialized string
|
|
52
|
-
const serializedData = Array.from(formData.entries())
|
|
53
|
-
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
|
|
54
|
-
.join('&');
|
|
55
|
-
|
|
56
|
-
// Log the serialized form data
|
|
57
|
-
console.log('DATA: ' + serializedData);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
</script>
|
|
38
|
+
</form>
|
|
39
|
+
|
|
62
40
|
{{/components/forms/backgroundBox }}
|
|
63
41
|
{{~else~}}
|
|
64
42
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:
|
|
1
|
+
<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block hover:lg:underline active:font-bold active:text-primary">
|
|
2
2
|
<a class="{{if (isUserConsentNeeded (resourceUrl "index.html" _site=this.site)) 'js-user-consent-needed ' ''}}link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<li x-data="dropdown"
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
|
-
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:
|
|
5
|
+
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' hover:lg:underline'"
|
|
6
6
|
class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
|
|
7
7
|
|
|
8
8
|
{{#if this.isCluster ~}}
|
package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
@close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
|
|
9
9
|
x-data="dropdown"
|
|
10
10
|
id="{{getRandom}}"
|
|
11
|
-
class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:
|
|
11
|
+
class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 hover:lg:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset {{#if this.selected}}-currentService{{/if}}"
|
|
12
12
|
|
|
13
13
|
:class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
|
|
14
14
|
aria-owns="flyout-{{getRandom}}"
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export default function selectHandler(element) {
|
|
2
|
-
return {
|
|
3
|
-
[element]: '',
|
|
4
|
-
valid: false,
|
|
5
|
-
wasFocused: false,
|
|
6
|
-
isFocused: false,
|
|
7
|
-
validEmail: false,
|
|
8
|
-
hideDescription() {
|
|
9
|
-
return Boolean(!this.valid && this.wasFocused && !this.isFocused)
|
|
10
|
-
},
|
|
11
|
-
hideError() {
|
|
12
|
-
return Boolean(!this.hideDescription())
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
}
|