diff --git a/.eslintignore b/.eslintignore
index 1d650e3ee..439b52016 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,4 @@ node_modules/**/*
webpack.config.js
webpack.config.dev.js
webpack.config.build.js
+src/js/calculator/*/tests/*
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
index f86d68404..b337d7970 100644
--- a/dist/css/styles.min.css
+++ b/dist/css/styles.min.css
@@ -20,4 +20,4 @@
[data-hds-variant="secondary"]){display:block}.sidebar-text .sidebar-text__text-content [data-hds-component=button]:not([class*=hds-button]):where(:not([data-hds-variant]), /* When variant is not defined, we fallback to primary styles*/
[data-hds-variant="primary"],
[data-hds-variant="secondary"]):not(:first-child){margin-top:8px}}.sidebar-text .sidebar-text__text-content [data-hds-component=button]:not([class*=hds-button])[data-hds-variant=supplementary]:first-child,.sidebar-text .sidebar-text__text-content .hds-button--supplementary:first-child{margin-left:0}.sidebar-text ul,.sidebar-text ol{background-color:#f1f1f1;background-color:var(--color-black-5);padding:16px}.sidebar-text ul li,.sidebar-text ol li{margin-left:32px;padding-left:8px}.sidebar-text ul ul,.sidebar-text ul ol,.sidebar-text ol ul,.sidebar-text ol ol{margin-top:0}.sidebar-text ul ul li,.sidebar-text ul ol li,.sidebar-text ol ul li,.sidebar-text ol ol li{margin-left:8px}.sidebar-text--service-links .sidebar-text__text-content>a{background-color:#f1f1f1;background-color:var(--color-black-5);display:grid;grid-template-columns:1fr calc(24px + 8px);margin-top:16px;padding:24px 16px;-webkit-text-decoration:none;text-decoration:none}.sidebar-text--service-links .sidebar-text__text-content>a:after{background-color:#000;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--arrow-right);mask-image:var(--hel-icon--arrow-right);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px;align-self:center;justify-self:end;order:3}.sidebar-text--service-links .sidebar-text__text-content>a[data-is-external]:after{display:none}.sidebar-text--service-links .sidebar-text__text-content>a:hover{-webkit-text-decoration:underline;text-decoration:underline}.target-group-links{--gap: 8px;display:flex;flex-wrap:wrap;gap:8px;gap:var(--gap, 8px)}@media(min-width: 768px){.target-group-links{--gap: 24px}}.target-group-link{--icon-size: 32px;--title-line-height: 1.625rem;grid-column-gap:24px;background-color:#f7f7f8;display:grid;grid-template-areas:"icon title" "icon subtitle";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;padding:24px;position:relative;width:100%}@media(min-width: 768px){.target-group-link{--icon-size: 48px;width:calc(50% - .5*var(--gap))}}@media(min-width: 992px){.target-group-link{--title-line-height: 1.75rem}}.target-group-link__icon{grid-area:icon}.target-group-link__icon .hel-icon{display:block}.target-group-link__title{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word;--line-height: 1.3;font-size:1.25rem;font-weight:500;line-height:1.3;line-height:var(--line-height);grid-area:title;margin:0;padding-top:calc(.5*(var(--icon-size) - var(--title-line-height)))}@media(min-width: 992px){.target-group-link__title{--line-height: 1.1666666667;font-size:1.5rem;font-weight:500}}.target-group-link__link{-webkit-text-decoration:none;text-decoration:none}.target-group-link__link::before{content:"";height:100%;top:0;right:0;bottom:0;left:0;position:absolute}.target-group-link__link:hover{-webkit-text-decoration:underline;text-decoration:underline}.target-group-link__subtitle{--line-height: 1.5;font-size:1rem;font-weight:400;line-height:1.5;line-height:var(--line-height);grid-area:subtitle;margin-bottom:calc(.5*(var(--icon-size) - var(--title-line-height)));margin-top:8px}.target-group-link__subtitle p{margin-top:0}.component--paragraph-text .component__content{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height);max-width:860px}.component--paragraph-text .component__content>*:first-child,.component--paragraph-text .component__content>p:first-child{margin-top:0}.component--paragraph-text .component__content>*:last-child{margin-bottom:0}.component--unit-search{padding-left:16px;padding-right:16px;background-color:#f7f7f8}@media(min-width: 768px){.component--unit-search{padding-left:32px;padding-right:32px}}.component--unit-search .hds-checkbox__input{z-index:1}.component--unit-search .hds-checkbox__label,.component--unit-search .hds-checkbox>label{background-color:#f7f7f8}.layout-main-wrapper>*:last-child .component--unit-search:last-child{margin-bottom:-115px;padding-bottom:55px}.views--unit-search{margin-top:32px}.views--unit-search .form-actions{width:100%}.views--unit-search .form-actions [data-hds-component=button]:not([class*=hds-button]):where(:not([data-hds-variant]), /* When variant is not defined, we fallback to primary styles*/
- [data-hds-variant="primary"],),.views--unit-search .form-actions .hds-button--primary{margin-top:16px;max-width:280px;min-width:44px;width:100%}@media(min-width: 768px){.views--unit-search .views-exposed-form{align-items:flex-end;display:flex;flex-wrap:wrap;max-width:860px}}@media(min-width: 768px){.views--unit-search .views-exposed-form .form-item{width:100%}}.views--unit-search .views-exposed-form .description{white-space:normal}.views--unit-search .views-exposed-form .hds-text-input__input-wrapper .hds-text-input__input{border-radius:0;padding-right:48px}.views--unit-search .views-exposed-form [data-drupal-selector=edit-provided-languages-value]{margin-top:24px}.unit-search__results{display:block;margin-top:64px;width:100%}.unit-search__results>.views-row:first-of-type{margin-top:16px}@media(min-width: 768px){.unit-search__results>.views-row:first-of-type{margin-top:32px}}.unit-search__results>.views-row+.views-row{margin-top:16px}.unit-search__count-container{margin-top:0}.unit-search__count-container:focus{outline:3px solid #000;outline-offset:2px}@media(min-width: 768px){.unit-search__result-actions{align-items:center;display:flex;justify-content:space-between}}.unit-search__additional-information{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height);display:block;margin-bottom:24px;margin-top:16px}.unit-search__additional-information.unit-search__address-not-found{padding-left:48px;position:relative}.unit-search__additional-information.unit-search__address-not-found::before{background-color:#000;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--alert-circle-fill);mask-image:var(--hel-icon--alert-circle-fill);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px;background-color:#d18200;left:16px;margin-top:-12px;position:absolute;top:50%}.unit-search__additional-information.unit-search__address-not-found p{margin-top:0}.unit-search__result--list,.unit-search__result--map{margin-top:16px}.unit-search__result--map{padding-bottom:52%;position:relative;width:100%}.unit-search__map{border:none;height:100%;left:0;position:absolute;top:0;width:100%}.unit-search__map-actions{display:flex;justify-content:flex-end;margin-top:16px}@media(min-width: 768px){.unit-search__map-actions{margin-top:24px}}.unit-search__no-results-title{--line-height: 1.3333333333;font-size:1.5rem;font-weight:500;line-height:1.3333333333;line-height:var(--line-height);margin-top:24px}@media(min-width: 992px){.unit-search__no-results-title{--line-height: 1;font-size:2rem;font-weight:400}}.unit-search__no-results-desc{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height)}.views--unit-search--large-volume .unit-search__results .views-row+.views-row{margin-top:8px}.components--upper>.component--unit-accessibility-information,.components--unit>.component--unit-accessibility-information,.components--service>.component--unit-accessibility-information{padding-left:0;padding-right:0}.component--unit-contact-card{background-color:#f7f7f8}.layout-main-wrapper>*:last-child .component--unit-contact-card:last-child{margin-bottom:-115px;padding-bottom:55px}.components--upper>.component--unit-contact-card .component__container,.components--unit>.component--unit-contact-card .component__container,.components--service>.component--unit-contact-card .component__container{padding-left:16px;padding-right:16px}@media(min-width: 768px){.components--upper>.component--unit-contact-card .component__container,.components--unit>.component--unit-contact-card .component__container,.components--service>.component--unit-contact-card .component__container{padding-bottom:48px;padding-left:32px;padding-right:32px;padding-top:48px}}@media(min-width: 992px){.components--upper>.component--unit-contact-card .component__container .component__title+.component__content,.components--unit>.component--unit-contact-card .component__container .component__title+.component__content,.components--service>.component--unit-contact-card .component__container .component__title+.component__content{margin-top:40px}}.component--unit-contact-card .component__container{padding-bottom:32px;padding-top:32px}@media(min-width: 768px){.component--unit-contact-card .component__container{padding-bottom:64px;padding-top:64px}}@media(min-width: 992px){.unit-contact-card{overflow:hidden}}.unit-contact-card__info-row{margin-top:32px;padding-left:calc(24px + 8px);position:relative;width:100%}@media(min-width: 992px){.unit-contact-card__info-row{float:left;margin-right:50%;padding-right:24px;width:50%}}@media(min-width: 992px){.unit-contact-card__info-row:first-child{margin-top:0}}.unit-contact-card__info-row::before{left:0;position:absolute;top:0}.unit-contact-card__info-row p:first-child{margin-top:0}@media(min-width: 992px){.unit-contact-card__info-row--details{display:none}}@media(min-width: 992px){.unit-contact-card--details-on-left .unit-contact-card__info-row--details{display:block}}@media(min-width: 992px){.unit-contact-card--details-on-left .unit-contact-card__image-with-details .unit-contact-card__info-row--details{display:none}}@media(min-width: 992px){.unit-contact-card__image-with-details{float:right;margin-left:-50%;width:50%}}.unit-contact-card__image-with-details .unit-contact-card__info-row--details{display:none}@media(min-width: 992px){.unit-contact-card__image-with-details .unit-contact-card__info-row--details{display:block;float:none;margin-right:0;padding-right:0;width:100%}}.unit-contact-card--left-column-empty .unit-contact-card__image-with-details{float:none;margin-left:0}.unit-contact-card__image{margin-top:24px}.unit-contact-card__image img{display:block;height:auto;overflow:hidden;width:100%}.unit-contact-card__image+.unit-contact-card__info-row{margin-top:24px}@media(min-width: 992px){.unit-contact-card__image+.unit-contact-card__info-row{margin-top:32px}}@media(min-width: 992px){.unit-contact-card__image:first-child{margin-top:0}}.unit-contact-card__info-row__title{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:1.5;line-height:var(--line-height)}@media(min-width: 992px){.unit-contact-card__info-row__title{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.unit-contact-card__info-row__content{margin-top:8px}.unit-contact-card__info-row--address::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--location);mask-image:var(--hel-icon--location);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__info-row--phone::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--phone);mask-image:var(--hel-icon--phone);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__info-row--opening-hours::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--clock);mask-image:var(--hel-icon--clock);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__info-row--details::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--info-circle);mask-image:var(--hel-icon--info-circle);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__link-wrapper{margin-top:32px;padding-left:0}@media(min-width: 992px){.unit-contact-card__link-wrapper:first-child{margin-top:0}}.unit-contact-card__link{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:1.5;line-height:var(--line-height)}@media(min-width: 992px){.unit-contact-card__link{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.unit-contact-card__link::after{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--arrow-right);mask-image:var(--hel-icon--arrow-right);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px;margin-left:8px}.component--hdbt-search--ploughing-schedule .component__container{background-color:#f7f7f8}.components--upper .component--hdbt-search--ploughing-schedule .component__container{padding:24px}@media(min-width: 768px){.components--upper .component--hdbt-search--ploughing-schedule .component__container{padding:32px}}@media(min-width: 992px){.components--upper .component--hdbt-search--ploughing-schedule .component__container{margin:0}}.component--hdbt-search--ploughing-schedule .hdbt-search--react__form-title{margin-top:0}.hdbt-search--ploughing-schedule__submit-button:not(:disabled){margin-bottom:0}.hdbt-search--ploughing-schedule__result-card{border-left:8px solid #c2a251;margin-top:32px;padding-bottom:12px;padding-left:32px;padding-right:32px;padding-top:12px}.hdbt-search--ploughing-schedule__result-card.no-results{border:none}.hdbt-search--ploughing-schedule__result-card--title{margin-bottom:16px;margin-top:0}.layout-main-wrapper>*:last-child .component--react-search--ploughing-schedule:last-child .component__container{margin-bottom:0;padding-bottom:32px}.dialog-off-canvas-main-canvas::after{background-color:rgba(0,0,0,.4);content:"";height:0;opacity:0;pointer-events:none;visibility:hidden;width:0}.eu-cookie-compliance-banner{background-color:#0000bf;color:#fff;max-height:100vh;overflow:auto;padding:0 0 24px}@media(min-width: 768px){.eu-cookie-compliance-banner{padding:0 0 32px}}.eu-cookie-compliance-banner .eu-cookie-compliance-content{display:flex;flex-wrap:wrap;padding-top:24px}.eu-cookie-compliance-banner .eu-cookie-compliance-message{float:none;max-width:100%;width:100%}.eu-cookie-compliance-banner .eu-cookie-compliance-message>h2{--line-height: 1.3;font-size:1.25rem;font-weight:500;line-height:1.3;line-height:var(--line-height);margin-top:0;max-width:860px}@media(min-width: 992px){.eu-cookie-compliance-banner .eu-cookie-compliance-message>h2{--line-height: 1.1666666667;font-size:1.5rem;font-weight:500}}.eu-cookie-compliance-banner .eu-cookie-compliance-message>p{max-width:860px}.eu-cookie-compliance-banner .eu-cookie-compliance-more-info,.eu-cookie-compliance-banner .eu-cookie-compliance-all-buttons{margin-top:32px;width:100%}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-more-info,.eu-cookie-compliance-banner .eu-cookie-compliance-all-buttons{align-items:center;display:flex}}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-more-info{width:30%}}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-all-buttons{justify-content:flex-end;width:70%}}.eu-cookie-compliance-banner .eu-cookie-compliance-categories-buttons{margin-top:16px}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-categories-buttons{margin-left:16px;margin-top:0}}.eu-cookie-compliance-banner .eu-cookie-compliance-buttons{float:none;max-width:100%}.eu-cookie-compliance-banner .eu-cookie-withdraw-button{display:none}.eu-cookie-compliance-banner [data-hds-component=button]:not([class*=hds-button]),.eu-cookie-compliance-banner .hds-button{--theme-fg1: var(--color-black);--theme-fg2: var(--color-white);--theme-bg1: var(--color-white);--theme-bg2: transparent;--theme-focus: var(--color-white);--theme-focus-gutter-color: transparent;max-width:400px;width:100%}@media(min-width: 768px){.eu-cookie-compliance-banner [data-hds-component=button]:not([class*=hds-button]),.eu-cookie-compliance-banner .hds-button{width:auto}}[dir=ltr] .eu-cookie-compliance-message{text-align:left}@media(min-width: 768px){[dir=ltr] .eu-cookie-compliance-categories-buttons{margin-left:16px;margin-right:0}}.sliding-popup-bottom{width:100%}.eu-cookie-compliance-block-form .hds-checkbox .hds-checkbox__input{z-index:1}.eu-cookie-compliance-block-form .hds-checkbox__label,.eu-cookie-compliance-block-form .hds-checkbox>label,.eu-cookie-compliance-block-form .description>p{background-color:#fff}.gin--horizontal-toolbar .toolbar-bar{position:fixed}.gin--horizontal-toolbar .node-preview-container{padding:0 32px;top:54px}.logo{align-items:center;display:flex;-webkit-text-decoration:none;text-decoration:none}.logo__icon{--height: 32px;--aspect-ratio: 2.1666666667;height:32px;height:var(--height);width:calc(2.1666666667*32px);width:calc(var(--aspect-ratio)*var(--height))}@media(min-width: 768px){.logo__icon{--height: 54px}}.logo__icon--sv,.logo__icon--ru{--aspect-ratio: 2.7857142857}.logo--header{color:#000;height:var(--branding-height)}.logo--footer{margin-top:8px}@media(min-width: 768px){.logo--footer{margin-right:16px;margin-top:0}}.logo--footer .logo__icon{--height: 40px}.metadata-container{background-color:var(--hdbt-color-palette--secondary);display:flex;flex-wrap:wrap;margin-top:16px;padding:24px}@media(min-width: 768px){.metadata-container{margin-top:32px}}.metadata__item{display:flex;margin-top:16px;width:100%}@media(min-width: 768px){.metadata__item{width:50%}}.metadata__item:first-child{margin-top:0}@media(min-width: 768px){.metadata__item:nth-child(2){margin-top:0}}.metadata__item .hel-icon{height:24px;margin-right:8px;min-width:24px;width:24px}.metadata__item-label{--line-height: 1.5;font-size:1rem;font-weight:500;line-height:1.5;line-height:var(--line-height);display:block}.content-tags__tags{margin-left:-4px;margin-right:-4px;display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:0;margin-top:0;padding-left:0}.content-tags__tags>*{margin-left:4px;margin-right:4px}.content-tags__tags__tag{list-style:none;margin-bottom:8px;margin-top:0}.content-tags__tags__tag a,.content-tags__tags__tag span,.content-tags__tags--static li{--line-height: 1.5;font-size:.875rem;font-weight:500;line-height:1.5;line-height:var(--line-height);display:inline-block;line-height:1;-webkit-text-decoration:none;text-decoration:none;transition:.2s ease-in-out background-color, .2s ease-in-out border-color}.content-tags__tags--interactive a{background-color:rgba(0,0,0,0);border:1px solid #000;border-radius:48px;padding:16px 20px 18px}.content-tags__tags--interactive a:hover,.content-tags__tags--interactive a:active{background-color:#000;border-color:#000;color:#fff}.content-tags__tags--interactive a:focus,.content-tags__tags--interactive a:active{border-color:#000;outline:2px solid #000;outline-offset:2px}.content-tags__tags--static span{background-color:#dedfe1;border-radius:16px;padding:8px 16px 10px}.content-tags__tags--static .content-tags__tags__tag--coat-of-arms span{background-color:#b5daf7}.content-tags__tags--static .content-tags__tags__tag--gold span{background-color:#e8d7a7}.content-tags__tags--static .content-tags__tags__tag--bus span{background-color:#ccf}.content-tags__tags--static .content-tags__tags__tag--success span{background-color:#007a64;color:#fff}.content-tags__tags--static .content-tags__tags__tag--alert span{background-color:#ffda07}.content-tags__tags--static .content-tags__tags__tag--error span{background-color:#b01038;color:#fff}.hds-loading-spinner{left:49%;position:fixed;top:48.5%;z-index:1000}#ed11y-panel{left:21px !important;right:auto !important}.is-hidden{display:none}.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}button[class*=Select-module_button__][class*=Select-module_placeholder__]{background-color:inherit}.noscroll{overflow:hidden}
+ [data-hds-variant="primary"],),.views--unit-search .form-actions .hds-button--primary{margin-top:16px;max-width:280px;min-width:44px;width:100%}@media(min-width: 768px){.views--unit-search .views-exposed-form{align-items:flex-end;display:flex;flex-wrap:wrap;max-width:860px}}@media(min-width: 768px){.views--unit-search .views-exposed-form .form-item{width:100%}}.views--unit-search .views-exposed-form .description{white-space:normal}.views--unit-search .views-exposed-form .hds-text-input__input-wrapper .hds-text-input__input{border-radius:0;padding-right:48px}.views--unit-search .views-exposed-form [data-drupal-selector=edit-provided-languages-value]{margin-top:24px}.unit-search__results{display:block;margin-top:64px;width:100%}.unit-search__results>.views-row:first-of-type{margin-top:16px}@media(min-width: 768px){.unit-search__results>.views-row:first-of-type{margin-top:32px}}.unit-search__results>.views-row+.views-row{margin-top:16px}.unit-search__count-container{margin-top:0}.unit-search__count-container:focus{outline:3px solid #000;outline-offset:2px}@media(min-width: 768px){.unit-search__result-actions{align-items:center;display:flex;justify-content:space-between}}.unit-search__additional-information{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height);display:block;margin-bottom:24px;margin-top:16px}.unit-search__additional-information.unit-search__address-not-found{padding-left:48px;position:relative}.unit-search__additional-information.unit-search__address-not-found::before{background-color:#000;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--alert-circle-fill);mask-image:var(--hel-icon--alert-circle-fill);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px;background-color:#d18200;left:16px;margin-top:-12px;position:absolute;top:50%}.unit-search__additional-information.unit-search__address-not-found p{margin-top:0}.unit-search__result--list,.unit-search__result--map{margin-top:16px}.unit-search__result--map{padding-bottom:52%;position:relative;width:100%}.unit-search__map{border:none;height:100%;left:0;position:absolute;top:0;width:100%}.unit-search__map-actions{display:flex;justify-content:flex-end;margin-top:16px}@media(min-width: 768px){.unit-search__map-actions{margin-top:24px}}.unit-search__no-results-title{--line-height: 1.3333333333;font-size:1.5rem;font-weight:500;line-height:1.3333333333;line-height:var(--line-height);margin-top:24px}@media(min-width: 992px){.unit-search__no-results-title{--line-height: 1;font-size:2rem;font-weight:400}}.unit-search__no-results-desc{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:1.5555555556;line-height:var(--line-height)}.views--unit-search--large-volume .unit-search__results .views-row+.views-row{margin-top:8px}.components--upper>.component--unit-accessibility-information,.components--unit>.component--unit-accessibility-information,.components--service>.component--unit-accessibility-information{padding-left:0;padding-right:0}.unit-contact-card{background-color:#f7f7f8;display:flex;flex-direction:column;gap:16px;padding:24px}@media(min-width: 576px){.unit-contact-card{padding-bottom:32px;padding-top:32px}}@media(min-width: 576px){.component--unit-contact-card--with-image .unit-contact-card{flex-direction:row-reverse;gap:24px}}.unit-contact-card__image{flex-basis:30%;flex-shrink:0}.unit-contact-card__image picture,.unit-contact-card__image img{aspect-ratio:1.5;background-color:#f2f2f2;display:block;height:auto;width:100%}.unit-contact-card__info{display:flex;flex-direction:column;flex-grow:1}.unit-contact-card__info-row{margin-top:24px;padding-left:calc(24px + 8px);position:relative;width:100%}.unit-contact-card__info-row:first-child{margin-top:0}.unit-contact-card__info-row::before{left:0;position:absolute;top:0}.unit-contact-card__info-row p:first-child{margin-top:0}.unit-contact-card__info-row .form-item{margin-bottom:0}.unit-contact-card__info-row__title{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:1.5;line-height:var(--line-height)}@media(min-width: 992px){.unit-contact-card__info-row__title{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.unit-contact-card__info-row__content{margin-top:8px}.unit-contact-card__info-row--address::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--location);mask-image:var(--hel-icon--location);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__info-row--phone::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--phone);mask-image:var(--hel-icon--phone);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__info-row--opening-hours::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--clock);mask-image:var(--hel-icon--clock);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__info-row--details::before{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--info-circle);mask-image:var(--hel-icon--info-circle);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px}.unit-contact-card__link-wrapper{margin-top:32px;padding-left:0}@media(min-width: 576px){.unit-contact-card__link-wrapper:first-child{margin-top:0}}.unit-contact-card__link{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:1.5;line-height:var(--line-height)}@media(min-width: 992px){.unit-contact-card__link{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.unit-contact-card__link::after{background-color:currentColor;background-size:contain;content:"";display:inline-block;height:24px;-webkit-mask-image:var(--hel-icon--arrow-right);mask-image:var(--hel-icon--arrow-right);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;vertical-align:bottom;width:24px;margin-left:8px}.component--hdbt-search--ploughing-schedule .component__container{background-color:#f7f7f8}.components--upper .component--hdbt-search--ploughing-schedule .component__container{padding:24px}@media(min-width: 768px){.components--upper .component--hdbt-search--ploughing-schedule .component__container{padding:32px}}@media(min-width: 992px){.components--upper .component--hdbt-search--ploughing-schedule .component__container{margin:0}}.component--hdbt-search--ploughing-schedule .hdbt-search--react__form-title{margin-top:0}.hdbt-search--ploughing-schedule__submit-button:not(:disabled){margin-bottom:0}.hdbt-search--ploughing-schedule__result-card{border-left:8px solid #c2a251;margin-top:32px;padding-bottom:12px;padding-left:32px;padding-right:32px;padding-top:12px}.hdbt-search--ploughing-schedule__result-card.no-results{border:none}.hdbt-search--ploughing-schedule__result-card--title{margin-bottom:16px;margin-top:0}.layout-main-wrapper>*:last-child .component--react-search--ploughing-schedule:last-child .component__container{margin-bottom:0;padding-bottom:32px}.dialog-off-canvas-main-canvas::after{background-color:rgba(0,0,0,.4);content:"";height:0;opacity:0;pointer-events:none;visibility:hidden;width:0}.eu-cookie-compliance-banner{background-color:#0000bf;color:#fff;max-height:100vh;overflow:auto;padding:0 0 24px}@media(min-width: 768px){.eu-cookie-compliance-banner{padding:0 0 32px}}.eu-cookie-compliance-banner .eu-cookie-compliance-content{display:flex;flex-wrap:wrap;padding-top:24px}.eu-cookie-compliance-banner .eu-cookie-compliance-message{float:none;max-width:100%;width:100%}.eu-cookie-compliance-banner .eu-cookie-compliance-message>h2{--line-height: 1.3;font-size:1.25rem;font-weight:500;line-height:1.3;line-height:var(--line-height);margin-top:0;max-width:860px}@media(min-width: 992px){.eu-cookie-compliance-banner .eu-cookie-compliance-message>h2{--line-height: 1.1666666667;font-size:1.5rem;font-weight:500}}.eu-cookie-compliance-banner .eu-cookie-compliance-message>p{max-width:860px}.eu-cookie-compliance-banner .eu-cookie-compliance-more-info,.eu-cookie-compliance-banner .eu-cookie-compliance-all-buttons{margin-top:32px;width:100%}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-more-info,.eu-cookie-compliance-banner .eu-cookie-compliance-all-buttons{align-items:center;display:flex}}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-more-info{width:30%}}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-all-buttons{justify-content:flex-end;width:70%}}.eu-cookie-compliance-banner .eu-cookie-compliance-categories-buttons{margin-top:16px}@media(min-width: 768px){.eu-cookie-compliance-banner .eu-cookie-compliance-categories-buttons{margin-left:16px;margin-top:0}}.eu-cookie-compliance-banner .eu-cookie-compliance-buttons{float:none;max-width:100%}.eu-cookie-compliance-banner .eu-cookie-withdraw-button{display:none}.eu-cookie-compliance-banner [data-hds-component=button]:not([class*=hds-button]),.eu-cookie-compliance-banner .hds-button{--theme-fg1: var(--color-black);--theme-fg2: var(--color-white);--theme-bg1: var(--color-white);--theme-bg2: transparent;--theme-focus: var(--color-white);--theme-focus-gutter-color: transparent;max-width:400px;width:100%}@media(min-width: 768px){.eu-cookie-compliance-banner [data-hds-component=button]:not([class*=hds-button]),.eu-cookie-compliance-banner .hds-button{width:auto}}[dir=ltr] .eu-cookie-compliance-message{text-align:left}@media(min-width: 768px){[dir=ltr] .eu-cookie-compliance-categories-buttons{margin-left:16px;margin-right:0}}.sliding-popup-bottom{width:100%}.eu-cookie-compliance-block-form .hds-checkbox .hds-checkbox__input{z-index:1}.eu-cookie-compliance-block-form .hds-checkbox__label,.eu-cookie-compliance-block-form .hds-checkbox>label,.eu-cookie-compliance-block-form .description>p{background-color:#fff}.gin--horizontal-toolbar .toolbar-bar{position:fixed}.gin--horizontal-toolbar .node-preview-container{padding:0 32px;top:54px}.logo{align-items:center;display:flex;-webkit-text-decoration:none;text-decoration:none}.logo__icon{--height: 32px;--aspect-ratio: 2.1666666667;height:32px;height:var(--height);width:calc(2.1666666667*32px);width:calc(var(--aspect-ratio)*var(--height))}@media(min-width: 768px){.logo__icon{--height: 54px}}.logo__icon--sv,.logo__icon--ru{--aspect-ratio: 2.7857142857}.logo--header{color:#000;height:var(--branding-height)}.logo--footer{margin-top:8px}@media(min-width: 768px){.logo--footer{margin-right:16px;margin-top:0}}.logo--footer .logo__icon{--height: 40px}.metadata-container{background-color:var(--hdbt-color-palette--secondary);display:flex;flex-wrap:wrap;margin-top:16px;padding:24px}@media(min-width: 768px){.metadata-container{margin-top:32px}}.metadata__item{display:flex;margin-top:16px;width:100%}@media(min-width: 768px){.metadata__item{width:50%}}.metadata__item:first-child{margin-top:0}@media(min-width: 768px){.metadata__item:nth-child(2){margin-top:0}}.metadata__item .hel-icon{height:24px;margin-right:8px;min-width:24px;width:24px}.metadata__item-label{--line-height: 1.5;font-size:1rem;font-weight:500;line-height:1.5;line-height:var(--line-height);display:block}.content-tags__tags{margin-left:-4px;margin-right:-4px;display:flex;flex-direction:row;flex-wrap:wrap;margin-bottom:0;margin-top:0;padding-left:0}.content-tags__tags>*{margin-left:4px;margin-right:4px}.content-tags__tags__tag{list-style:none;margin-bottom:8px;margin-top:0}.content-tags__tags__tag a,.content-tags__tags__tag span,.content-tags__tags--static li{--line-height: 1.5;font-size:.875rem;font-weight:500;line-height:1.5;line-height:var(--line-height);display:inline-block;line-height:1;-webkit-text-decoration:none;text-decoration:none;transition:.2s ease-in-out background-color, .2s ease-in-out border-color}.content-tags__tags--interactive a{background-color:rgba(0,0,0,0);border:1px solid #000;border-radius:48px;padding:16px 20px 18px}.content-tags__tags--interactive a:hover,.content-tags__tags--interactive a:active{background-color:#000;border-color:#000;color:#fff}.content-tags__tags--interactive a:focus,.content-tags__tags--interactive a:active{border-color:#000;outline:2px solid #000;outline-offset:2px}.content-tags__tags--static span{background-color:#dedfe1;border-radius:16px;padding:8px 16px 10px}.content-tags__tags--static .content-tags__tags__tag--coat-of-arms span{background-color:#b5daf7}.content-tags__tags--static .content-tags__tags__tag--gold span{background-color:#e8d7a7}.content-tags__tags--static .content-tags__tags__tag--bus span{background-color:#ccf}.content-tags__tags--static .content-tags__tags__tag--success span{background-color:#007a64;color:#fff}.content-tags__tags--static .content-tags__tags__tag--alert span{background-color:#ffda07}.content-tags__tags--static .content-tags__tags__tag--error span{background-color:#b01038;color:#fff}.hds-loading-spinner{left:49%;position:fixed;top:48.5%;z-index:1000}#ed11y-panel{left:21px !important;right:auto !important}.is-hidden{display:none}.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}button[class*=Select-module_button__][class*=Select-module_placeholder__]{background-color:inherit}.noscroll{overflow:hidden}
diff --git a/src/scss/06_components/paragraphs/_unit-contact-card.scss b/src/scss/06_components/paragraphs/_unit-contact-card.scss
index 3b11df761..f83bf158b 100644
--- a/src/scss/06_components/paragraphs/_unit-contact-card.scss
+++ b/src/scss/06_components/paragraphs/_unit-contact-card.scss
@@ -1,71 +1,51 @@
-.component--unit-contact-card {
+.unit-contact-card {
background-color: $color-silver-light;
-}
+ display: flex;
+ flex-direction: column;
+ gap: $spacing;
+ padding: $spacing-and-half;
-// If the unit contact card is just before footer.
-.layout-main-wrapper > *:last-child .component--unit-contact-card:last-child {
- margin-bottom: -115px; // Enough to get the block under the footer.
- padding-bottom: 55px; // Leave enough room between the last card and footer.
+ @include breakpoint($breakpoint-s) {
+ padding-bottom: $spacing-double;
+ padding-top: $spacing-double;
+ }
}
-// If the unit contact card is at the upper content area.
-.components--upper,
-.components--unit,
-.components--service {
- > .component--unit-contact-card .component__container {
- padding-left: $spacing;
- padding-right: $spacing;
- @include breakpoint($breakpoint-m) {
- padding-bottom: $spacing-triple;
- padding-left: $spacing-double;
- padding-right: $spacing-double;
- padding-top: $spacing-triple;
- }
-
- .component__title + .component__content {
- @include breakpoint($component-spacing-breakpoint) {
- margin-top: 40px;
- }
- }
+.component--unit-contact-card--with-image .unit-contact-card {
+ @include breakpoint($breakpoint-s) {
+ flex-direction: row-reverse;
+ gap: $spacing-and-half;
}
}
-.component--unit-contact-card .component__container {
- padding-bottom: $spacing-double;
- padding-top: $spacing-double;
+.unit-contact-card__image {
+ flex-basis: 30%;
+ flex-shrink: 0;
- @include breakpoint($breakpoint-m) {
- padding-bottom: $spacing-quadruple;
- padding-top: $spacing-quadruple;
+ picture,
+ img {
+ aspect-ratio: 1.5;
+ background-color: $color-black-5;
+ display: block;
+ height: auto;
+ width: 100%;
}
}
-.unit-contact-card {
- @include breakpoint($breakpoint-l) {
- overflow: hidden; // Because of the floats.
- }
+.unit-contact-card__info {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
}
.unit-contact-card__info-row {
- margin-top: $spacing-double;
+ margin-top: $spacing-and-half;
padding-left: calc(#{$spacing-and-half} + #{$spacing-half}); // Icon width + spacing between text and icon.
position: relative;
width: 100%;
- @include breakpoint($breakpoint-l) {
- // The float in here is because of the complex structure when switching between mobile and desktop layouts.
- // The image needs to be printed on mobile after the visiting address but before other information so it is
- // printed there in the DOM, but it needs to be on the "column" next to the values on the desktop view.
- float: left;
- margin-right: 50%;
- padding-right: $spacing-and-half;
- width: 50%;
- }
-
&:first-child {
- @include breakpoint($breakpoint-l) {
- margin-top: 0;
- }
+ margin-top: 0;
}
// Icons container.
@@ -78,79 +58,9 @@
p:first-child {
margin-top: 0;
}
-}
-
-// Additional details on the "left column".
-.unit-contact-card__info-row--details {
- @include breakpoint($breakpoint-l) {
- display: none; // This is shown only on mobile to make the print order correct.
- }
-}
-
-// If the details should be visible on the left column on desktop.
-.unit-contact-card--details-on-left {
- .unit-contact-card__info-row--details {
- @include breakpoint($breakpoint-l) {
- display: block;
- }
- }
-
- .unit-contact-card__image-with-details .unit-contact-card__info-row--details {
- @include breakpoint($breakpoint-l) {
- display: none;
- }
- }
-}
-
-// Container for the image and possible details.
-.unit-contact-card__image-with-details {
- @include breakpoint($breakpoint-l) {
- float: right;
- margin-left: -50%;
- width: 50%;
- }
-
- .unit-contact-card__info-row--details {
- display: none; // Additional details is shown on this column only on desktop view.
-
- @include breakpoint($breakpoint-l) {
- display: block;
- float: none;
- margin-right: 0;
- padding-right: 0;
- width: 100%;
- }
- }
-}
-
-// If the left column on desktop is empty.
-.unit-contact-card--left-column-empty .unit-contact-card__image-with-details {
- float: none;
- margin-left: 0;
-}
-
-.unit-contact-card__image {
- margin-top: $spacing-and-half;
-
- img {
- display: block;
- height: auto;
- overflow: hidden;
- width: 100%;
- }
- + .unit-contact-card__info-row {
- margin-top: $spacing-and-half;
-
- @include breakpoint($breakpoint-l) {
- margin-top: $spacing-double;
- }
- }
-
- &:first-child {
- @include breakpoint($breakpoint-l) {
- margin-top: 0;
- }
+ .form-item {
+ margin-bottom: 0;
}
}
@@ -185,7 +95,7 @@
padding-left: 0; // There is no icon on the link so this padding is not needed.
&:first-child {
- @include breakpoint($breakpoint-l) {
+ @include breakpoint($breakpoint-s) {
margin-top: 0;
}
}
diff --git a/templates/paragraphs/paragraph--unit-contact-card.html.twig b/templates/paragraphs/paragraph--unit-contact-card.html.twig
index 9fd6080f5..bf6450a31 100644
--- a/templates/paragraphs/paragraph--unit-contact-card.html.twig
+++ b/templates/paragraphs/paragraph--unit-contact-card.html.twig
@@ -1,82 +1,82 @@
-{# This is shown twice in DOM, to move it between mobile and desktop versions maintaining logical tabbing order #}
-{% set unit_contact_card_details %}
- {% if unit_contact_card.details|render %}
-
- {% endif %}
-{% endset %}
+{% if unit_contact_card.picture_url|render or unit_contact_card.picture_url_override|render %}
+ {% set with_image_class = 'component--unit-contact-card--with-image' %}
+{% endif %}
{% block paragraph %}
{% embed "@hdbt/misc/component.twig" with
{
component_classes: [
'component--unit-contact-card',
+ with_image_class
],
- component_title: unit_contact_card.title,
component_content_class: [
- 'unit-contact-card',
- unit_contact_card.left_column_empty ? 'unit-contact-card--left-column-empty',
- unit_contact_card.details_on_left ? 'unit-contact-card--details-on-left',
+ 'unit-contact-card'
],
}
%}
{% block component_content %}
- {% if unit_contact_card.address|render %}
-
- {% endif %}
- {% if unit_contact_card.picture_url_override|render or unit_contact_card.picture_url|render or unit_contact_card.details|render %}
-
+ {% if unit_contact_card.picture_url|render or unit_contact_card.picture_url_override|render %}
+
+ {% if unit_contact_card.picture_url_override|render %}
+ {{ unit_contact_card.picture_url_override }}
+ {% elseif unit_contact_card.picture_url|render %}
+ {{ unit_contact_card.picture_url }}
{% endif %}
- {{ unit_contact_card_details }}
{% endif %}
- {% if unit_contact_card.address_postal|render %}
-
- {% endif %}
+
+
{{ unit_contact_card.title }}
- {% if unit_contact_card.phone|render %}
-
- {% endif %}
+ {% if unit_contact_card.address|render %}
+
+ {% endif %}
- {% if unit_contact_card.opening_hours|render %}
-
- {% endif %}
+ {% if unit_contact_card.address_postal|render %}
+
+ {% endif %}
- {{ unit_contact_card_details }}
+ {% if unit_contact_card.phone|render %}
+
+ {% endif %}
- {% if unit_contact_card.unit_url %}
-
- {% set unit_link_attributes = { 'class': [ 'unit-contact-card__link', ], } %}
- {{ link('Unit homepage'|t, unit_contact_card.unit_url, unit_link_attributes) }}
-
- {% endif %}
+ {% if unit_contact_card.opening_hours|render %}
+
+ {% endif %}
+
+ {% if unit_contact_card.details|render %}
+
+ {% endif %}
+ {% if unit_contact_card.unit_url %}
+
+ {% set link_title %}
+
+ {{- unit_contact_card.title.0['#context'].value ~ ':' -}}
+
+ {{- 'See details'|t({}, {'context': 'Unit contact card'}) -}}
+ {% endset %}
+ {% set unit_link_attributes = { 'class': [ 'unit-contact-card__link' ], } %}
+ {{ link(link_title, unit_contact_card.unit_url, unit_link_attributes) }}
+
+ {% endif %}
+