Any external module that is to be added to this one has to go inside data-service-pont-list-map-widget area.
<div class="sds-servicePointListMap" data-js-services-point-map>
<div class="container sds-servicePointListMap__outerContainer">
<div class="row no-bottom-gutter sds-servicePointListMap__outerRow">
<div class="col-12 col-lg-6 position-static">
<div class="sds-servicePointListMap__infoPane">
<!-- Info pane -->
<div class="sds-servicePointListMap__infoWrapper">
<!-- Default list pane -->
<div id="listPane" class="sds-servicePointListMap__listPane">
<div class="sds-servicePointListMap__searchHeader" data-reacts-to-headroom>
<div class="sds-search -clearActive -inverted sds-servicePointListMap__search sds-opacityBgFloating" data-has-shadow-on-map-shown="">
<div class="sds-search__inner form-control">
<span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
<input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
<div class="sds-search__actions">
<div class="sds-search__clear">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
<div class="sds-btnGroup" data-toggle-visibility-at="lg">
<div class="sds-toggleTab -light">
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn">
<span class="sds-btn__text">Agences</span>
</label>
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive">
<span class="sds-btn__text">S-Bank</span>
</label>
</div>
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnHasNotif" data-offset="0,8" data-toggle="dropdown">
<span class="sds-icon sds-icon-filter"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-0-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="action-menu-checkbox-0-base">Check this custom checkbox</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-1-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="action-menu-checkbox-1-base">Check this custom checkbox</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-servicePointListMap__listPaneContent sds-stackLg">
<div class="sds-servicePointListMap__filterBar d-lg-none row row-xs align-items-center no-bottom-gutter">
<div class="col">
<div class="sds-toggleTab sds-opacityBgFloating" data-has-shadow-on-map-shown="">
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn">
<span class="sds-btn__text">Heures</span>
</label>
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive">
<span class="sds-btn__text">Jours</span>
</label>
</div>
</div>
<div class="col-auto">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-opacityBgFloating -btnHasNotif" data-toggle="dropdown" data-offset="0,8" data-has-shadow-on-map-shown="">
<span class="sds-icon sds-icon-filter"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-0-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="action-menu-checkbox-0-base">Check this custom checkbox</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-1-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="action-menu-checkbox-1-base">Check this custom checkbox</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="checkbox" id="spotSelectNoTitleNoImg" class="sds-spotSelect__checkboxInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-checkboxDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<p><label class="sds-spotSelect__checkItemLabel" for="spotSelectNoTitleNoImg">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
<div class="invalid-feedback">Error message</div>
</div>
<ul class="list-unstyled">
<li class="d-lg-none">
<div class="sds-box -boxSunken -insetMd sds-stackXs">
<div class="h4">Spuerkeess Direct</div>
<p>Effectuez vos principales opérations bancaires via Spuerkeess Direct de 8h00 à 18h00 du lundi au vendredi.</p>
<div class="sds-btnGroup -hasVerticalSpacing -medium -wrap sds-exceptionStackMd">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-phone"></span>
<span class="sds-btn__text">+352 4015-1</span>
</button>
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-envelope"></span>
<span class="sds-btn__text">sdi@spuerkeess.lu</span>
</button>
</div>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem -loading">
<div class="sds-servicePointListMap__listItemImg">
<span class="sds-skeletonUnit -floating -radiusInherit"></span>
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs flex-grow-1">
<span class="sds-skeletonUnit"></span>
<span class="sds-skeletonUnit -skeletonUnitSmall"></span>
</div>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<div class="sds-badge badge -badgeHighlight -badgeMuted sds-servicePointListMap__listItemBadge">
Ouvert sur rendez-vous
</div>
<h2 class="h4">Avenue J.-F. Kennedy</h2>
<p>Agence, S-Bank, Accès mobilité réduite</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">B.E.I.</h2>
<p>Agence non accessible au grand public</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<div class="sds-noPic">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity="0.32">
<mask id="path-1-inside-1_6370_182844" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M373.461 286.554H382.086C387.836 286.554 391.669 290.388 391.669 296.138C391.669 301.888 387.836 305.721 382.086 305.721V411.138C382.086 416.888 378.253 420.721 372.503 420.721H257.503C251.753 420.721 247.919 416.888 247.919 411.138V305.721C242.169 305.721 238.336 301.888 238.336 296.138C238.336 290.388 242.169 286.554 247.919 286.554H256.544L305.419 230.013V219.471C305.419 213.721 309.253 209.888 315.003 209.888C320.753 209.888 324.586 213.721 324.586 219.471V230.013L373.461 286.554ZM348.544 286.554L315.003 248.221L281.461 286.554H348.544ZM267.086 305.721V401.554H362.919V305.721H267.086ZM343.753 353.638C343.753 369.929 331.294 382.388 315.003 382.388C298.711 382.388 286.253 369.929 286.253 353.638C286.253 337.346 298.711 324.888 315.003 324.888C331.294 324.888 343.753 337.346 343.753 353.638ZM324.586 353.638C324.586 347.888 320.753 344.054 315.003 344.054C309.253 344.054 305.419 347.888 305.419 353.638C305.419 359.388 309.253 363.221 315.003 363.221C320.753 363.221 324.586 359.388 324.586 353.638Z" />
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M373.461 286.554H382.086C387.836 286.554 391.669 290.388 391.669 296.138C391.669 301.888 387.836 305.721 382.086 305.721V411.138C382.086 416.888 378.253 420.721 372.503 420.721H257.503C251.753 420.721 247.919 416.888 247.919 411.138V305.721C242.169 305.721 238.336 301.888 238.336 296.138C238.336 290.388 242.169 286.554 247.919 286.554H256.544L305.419 230.013V219.471C305.419 213.721 309.253 209.888 315.003 209.888C320.753 209.888 324.586 213.721 324.586 219.471V230.013L373.461 286.554ZM348.544 286.554L315.003 248.221L281.461 286.554H348.544ZM267.086 305.721V401.554H362.919V305.721H267.086ZM343.753 353.638C343.753 369.929 331.294 382.388 315.003 382.388C298.711 382.388 286.253 369.929 286.253 353.638C286.253 337.346 298.711 324.888 315.003 324.888C331.294 324.888 343.753 337.346 343.753 353.638ZM324.586 353.638C324.586 347.888 320.753 344.054 315.003 344.054C309.253 344.054 305.419 347.888 305.419 353.638C305.419 359.388 309.253 363.221 315.003 363.221C320.753 363.221 324.586 359.388 324.586 353.638Z" fill="#4D6E90" />
<path d="M373.461 286.554L372.704 287.208L373.004 287.554H373.461V286.554ZM382.086 305.721V304.721H381.086V305.721H382.086ZM247.919 305.721H248.919V304.721H247.919V305.721ZM256.544 286.554V287.554H257.002L257.301 287.208L256.544 286.554ZM305.419 230.013L306.176 230.667L306.419 230.385V230.013H305.419ZM324.586 230.013H323.586V230.385L323.829 230.667L324.586 230.013ZM315.003 248.221L315.755 247.563L315.003 246.702L314.25 247.563L315.003 248.221ZM348.544 286.554V287.554H350.748L349.297 285.896L348.544 286.554ZM281.461 286.554L280.708 285.896L279.257 287.554H281.461V286.554ZM267.086 401.554H266.086V402.554H267.086V401.554ZM267.086 305.721V304.721H266.086V305.721H267.086ZM362.919 401.554V402.554H363.919V401.554H362.919ZM362.919 305.721H363.919V304.721H362.919V305.721ZM382.086 285.554H373.461V287.554H382.086V285.554ZM392.669 296.138C392.669 293.035 391.631 290.373 389.741 288.483C387.851 286.593 385.188 285.554 382.086 285.554V287.554C384.734 287.554 386.862 288.433 388.327 289.897C389.791 291.361 390.669 293.49 390.669 296.138H392.669ZM382.086 306.721C385.188 306.721 387.851 305.683 389.741 303.793C391.631 301.903 392.669 299.24 392.669 296.138H390.669C390.669 298.785 389.791 300.914 388.327 302.379C386.862 303.843 384.734 304.721 382.086 304.721V306.721ZM383.086 411.138V305.721H381.086V411.138H383.086ZM372.503 421.721C375.605 421.721 378.268 420.683 380.158 418.793C382.048 416.903 383.086 414.24 383.086 411.138H381.086C381.086 413.785 380.208 415.914 378.743 417.379C377.279 418.843 375.15 419.721 372.503 419.721V421.721ZM257.503 421.721H372.503V419.721H257.503V421.721ZM246.919 411.138C246.919 414.24 247.958 416.903 249.848 418.793C251.737 420.683 254.4 421.721 257.503 421.721V419.721C254.855 419.721 252.726 418.843 251.262 417.379C249.797 415.914 248.919 413.785 248.919 411.138H246.919ZM246.919 305.721V411.138H248.919V305.721H246.919ZM237.336 296.138C237.336 299.24 238.374 301.903 240.264 303.793C242.154 305.683 244.817 306.721 247.919 306.721V304.721C245.272 304.721 243.143 303.843 241.678 302.379C240.214 300.914 239.336 298.785 239.336 296.138H237.336ZM247.919 285.554C244.817 285.554 242.154 286.593 240.264 288.483C238.374 290.373 237.336 293.035 237.336 296.138H239.336C239.336 293.49 240.214 291.361 241.678 289.897C243.143 288.433 245.272 287.554 247.919 287.554V285.554ZM256.544 285.554H247.919V287.554H256.544V285.554ZM304.663 229.359L255.788 285.9L257.301 287.208L306.176 230.667L304.663 229.359ZM304.419 219.471V230.013H306.419V219.471H304.419ZM315.003 208.888C311.9 208.888 309.237 209.926 307.348 211.816C305.458 213.706 304.419 216.369 304.419 219.471H306.419C306.419 216.823 307.297 214.695 308.762 213.23C310.226 211.766 312.355 210.888 315.003 210.888V208.888ZM325.586 219.471C325.586 216.369 324.547 213.706 322.658 211.816C320.768 209.926 318.105 208.888 315.003 208.888V210.888C317.65 210.888 319.779 211.766 321.243 213.23C322.708 214.695 323.586 216.823 323.586 219.471H325.586ZM325.586 230.013V219.471H323.586V230.013H325.586ZM374.217 285.9L325.342 229.359L323.829 230.667L372.704 287.208L374.217 285.9ZM314.25 248.88L347.792 287.213L349.297 285.896L315.755 247.563L314.25 248.88ZM282.214 287.213L315.755 248.88L314.25 247.563L280.708 285.896L282.214 287.213ZM348.544 285.554H281.461V287.554H348.544V285.554ZM268.086 401.554V305.721H266.086V401.554H268.086ZM362.919 400.554H267.086V402.554H362.919V400.554ZM361.919 305.721V401.554H363.919V305.721H361.919ZM267.086 306.721H362.919V304.721H267.086V306.721ZM315.003 383.388C331.847 383.388 344.753 370.482 344.753 353.638H342.753C342.753 369.377 330.742 381.388 315.003 381.388V383.388ZM285.253 353.638C285.253 370.482 298.159 383.388 315.003 383.388V381.388C299.263 381.388 287.253 369.377 287.253 353.638H285.253ZM315.003 323.888C298.159 323.888 285.253 336.794 285.253 353.638H287.253C287.253 337.898 299.263 325.888 315.003 325.888V323.888ZM344.753 353.638C344.753 336.794 331.847 323.888 315.003 323.888V325.888C330.742 325.888 342.753 337.898 342.753 353.638H344.753ZM315.003 345.054C317.65 345.054 319.779 345.933 321.243 347.397C322.708 348.861 323.586 350.99 323.586 353.638H325.586C325.586 350.535 324.547 347.873 322.658 345.983C320.768 344.093 318.105 343.054 315.003 343.054V345.054ZM306.419 353.638C306.419 350.99 307.297 348.861 308.762 347.397C310.226 345.933 312.355 345.054 315.003 345.054V343.054C311.9 343.054 309.237 344.093 307.348 345.983C305.458 347.873 304.419 350.535 304.419 353.638H306.419ZM315.003 362.221C312.355 362.221 310.226 361.343 308.762 359.878C307.297 358.414 306.419 356.285 306.419 353.638H304.419C304.419 356.74 305.458 359.403 307.348 361.293C309.237 363.183 311.9 364.221 315.003 364.221V362.221ZM323.586 353.638C323.586 356.285 322.708 358.414 321.243 359.878C319.779 361.343 317.65 362.221 315.003 362.221V364.221C318.105 364.221 320.768 363.183 322.658 361.293C324.547 359.403 325.586 356.74 325.586 353.638H323.586Z" fill="#4D6E90" mask="url(#path-1-inside-1_6370_182844)" />
</g>
</svg>
</div>
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Bascharage</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
<li class="sds-servicePointListMap__listItemWrapper">
<div class="sds-servicePointListMap__listItem">
<div class="sds-servicePointListMap__listItemImg">
<img src="../../media/spuerkeess-site/components/service-point-list-map/list-item.png" alt="">
</div>
<div class="d-flex flex-column justify-content-center sds-stackXs">
<h2 class="h4">Belval Plaza</h2>
<p>Agence, S-Bank</p>
</div>
<button type="button" class="sds-servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
</ul>
</div>
<div class="sds-servicePointListMap__listPaneFooter">
<button type="button" class="sds-btn -btnPrimary sds-opacityBgFloating" data-show-map="" data-has-shadow-on-map-shown="">
<span class="sds-btn__text">Montrer Carte</span>
</button>
<button type="button" class="sds-btn -btnPrimary sds-opacityBgFloating" data-hide-map="" data-has-shadow-on-map-shown="">
<span class="sds-btn__text">Montrer Liste</span>
</button>
</div>
</div>
<!-- Detail pane -->
<div id="serviceDetailPane" class="sds-servicePointListMap__detailPane collapse fade">
<div class="sds-servicePointListMap__detailBack position-sticky" data-reacts-to-headroom>
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-opacityBgFloating" data-toggle="collapse" data-target="#serviceDetailPane" data-has-shadow-on-map-shown="">
<span class="sds-icon sds-icon-arrowprevious"></span>
</button>
</div>
<div class="sds-servicePointListMap__loading" id="serviceDetailLoading">
<div class="sds-stackLg">
<div class="sds-outOfBounds sds-servicePointListMap__detailImg">
<div class="sds-skeletonUnit -floating -radiusInherit"></div>
<img class="img-fluid" src="" alt="">
</div>
<div class="sds-servicePointListMap__detailMainInfo sds-stackMd">
<div class="sds-stackSm">
<span class="sds-skeletonUnit -skeletonUnitTextHelperSmall"></span>
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
</div>
<div class="row row-xs no-bottom-gutter align-items-center">
<div class="col sds-stackMd">
<span class="sds-skeletonUnit"></span>
<span class="sds-skeletonUnit -skeletonUnitSmall"></span>
</div>
<div class="col-auto col-sm-3">
<span class="sds-skeletonUnit -boxBorderRadius" style=" width: var(--map-pin-width); min-height: var(--map-pin-height);"></span>
</div>
</div>
</div>
</div>
</div>
<div class="sds-servicePointListMap__detailContent d-none" id="serviceDetailContent">
<div class="sds-stackXxl">
<div class="sds-stackLg">
<div class="sds-outOfBounds sds-servicePointListMap__detailImg">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/item-detail-img.png" alt="">
</div>
<div class="sds-servicePointListMap__detailMainInfo sds-stackMd">
<div class="sds-stackXs">
<div class="sds-textHelper sds-metaColor">Agence, S-Bank, Accès mobilité réduite</div>
<h3 class="h3">Avenue J.-F. Kennedy</h3>
</div>
<div class="row row-xs no-bottom-gutter align-items-center">
<div class="col">
<div class="sds-textBodyLg">
<p>
Avenue J.-F. Kennedy <br>
391855, Luxembourg
</p>
<a class="sds-link">
4015-9580
</a>
</div>
</div>
<div class="col-auto">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-pin"></span>
<span class="sds-btn__text">Géoportail</span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-servicePointListMap__actionsList sds-exceptionStackLg">
<ul class="list-unstyled row row-xs align-items-stretch-immediate no-bottom-gutter flex-nowrap">
<li class="col col-sm-3">
<a href="" class="sds-navigationTile sds-box -small -noInteraction sds-boxShadowActive">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-calendar"></span>
</span>
<div class="sds-label sds-textHelperSmall">
Rendez-vous
</div>
</a>
</li>
<li class="col col-sm-3">
<a href="" class="sds-navigationTile sds-box -small -noInteraction sds-boxShadowActive">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-phone"></span>
</span>
<div class="sds-label sds-textHelperSmall">
Téléphone
</div>
</a>
</li>
<li class="col col-sm-3">
<a href="" class="sds-navigationTile sds-box -small -noInteraction sds-boxShadowActive">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-messageread"></span>
</span>
<div class="sds-label sds-textHelperSmall">
E-Mail
</div>
</a>
</li>
<li class="col col-sm-3">
<a href="" class="sds-navigationTile sds-box -small -noInteraction sds-boxShadowActive">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-turnright"></span>
</span>
<div class="sds-label sds-textHelperSmall">
Directions
</div>
</a>
</li>
</ul>
</div>
<div class="sds-stackLg">
<h4 class="h4">Heures d’ouvertures</h4>
<nav>
<ul class="sds-toggleTab list-unstyled nav" id="" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive active" id="sidebar-bar-chart-1-tab" data-toggle="tab" data-target="#sidebar-bar-chart-1" role="tab" aria-controls="sidebar-bar-chart-1" aria-selected="true">
<span class="sds-btn__text">Avec rendez-vous</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn" id="sidebar-bar-chart-2-tab" data-toggle="tab" data-target="#sidebar-line-chart-1" role="tab" aria-controls="sidebar-line-chart-1" aria-selected="false">
<span class="sds-btn__text">Sans rendez-vous</span>
</button>
</li>
</li>
</ul>
</nav>
<div class="tab-content" id="sidebar-bar-charts">
<div class="tab-pane fade show active" id="sidebar-bar-chart-1" role="tabpanel" aria-labelledby="sidebar-bar-chart-1-tab">
<ul class="sds-servicePointListMap__detailTimetable list-unstyled">
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Lundi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mardi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mercredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem -active">
<div class="row row-xs no-bottom-gutter">
<span class="col">Jeudi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Vendredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Samedi</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Dimanche</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="sidebar-line-chart-1" role="tabpanel" aria-labelledby="sidebar-bar-chart-2-tab">
<ul class="sds-servicePointListMap__detailTimetable list-unstyled">
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Lundi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mardi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mercredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem -active">
<div class="row row-xs no-bottom-gutter">
<span class="col">Jeudi</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Vendredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Samedi</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
<li class="sds-outOfBounds">
<div class="sds-servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Dimanche</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-stackMd">
<h4 class="h4">Services Agence</h4>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
</ul>
</div>
<div class="sds-stackMd">
<h4 class="h4">Services S-Bank</h4>
<p>
Accessible 24H/24 <br>
Accessible pendant les heures d'ouverture de l'agence
</p>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
</ul>
</div>
<div class="sds-stackMd">
<h4 class="h4">Langues</h4>
<ul class="sds-btnGroup list-unstyled">
<li>
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/lu.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Map pane -->
<div id="serviceMapPane" class="sds-servicePointListMap__mapPane">
<div class="sds-servicePointListMap__filterBar d-lg-none row row-xs align-items-center no-bottom-gutter">
<div class="col">
<div class="sds-toggleTab sds-opacityBgFloating">
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn">
<span class="sds-btn__text">Heures</span>
</label>
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive">
<span class="sds-btn__text">Jours</span>
</label>
</div>
</div>
<div class="col-auto">
<div class="dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-opacityBgFloating -btnHasNotif" data-toggle="dropdown" data-offset="0,8" data-has-shadow-on-map-shown="">
<span class="sds-icon sds-icon-filter"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-0-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="action-menu-checkbox-0-base">Check this custom checkbox</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
<div class="dropdown-item">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-1-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="action-menu-checkbox-1-base">Check this custom checkbox</label>
<div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-servicePointListMap__mapInner embed-responsive flex-grow-1">
<iframe class="" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2639.3604849038306!2d7.743374699999998!3d48.58379619999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c84c3ae29d77%3A0x7580492566f10ea1!2sOsaka%20Strasbourg!5e0!3m2!1sen!2slu!4v1701766921873!5m2!1sen!2slu" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="sds-servicePointListMap__mapFooter">
<button type="button" class="sds-btn -btnPrimary sds-opacityBgFloating" data-hide-map="" data-has-shadow-on-map-shown="">
<span class="sds-btn__text">Montrer Liste</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- This column will be the "widget area" Put any and all content inside data-service-pont-list-map-widget -->
<div class="d-none d-lg-block col-lg-6 col-xl-5 offset-xl-1 sds-pointerEventsNone">
<div class="position-sticky sds-sticky3xl sds-servicePointListMap__widgetZone" data-reacts-to-headroom>
<div class="sds-opacityBgFloating sds-servicePointListMap__widgetZoneInner" data-has-shadow-on-map-shown data-service-pont-list-map-widget>
<div class="sds-openingHours sds-box -insetLg -boxSunken">
<div class="sds-stackXl">
<div class="sds-openingHours__header">
<div class="sds-stackXs d-flex align-items-md-center flex-column flex-md-row justify-content-between">
<div class="h3">Spuerkeess Direct</div>
<div class="position-relative d-flex align-items-center sds-staticInlineMd">
<span class="sds-dot -dotSuccess"></span>
<span class="sds-headingColor sds-textBodyLg sds-textSemiBold">07:00 - 19:00</span>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-openingHours__collapseTrigger stretched-link" data-toggle="collapse" data-target="#openingHoursCollapse">
<span class="sds-icon sds-icon-chevrondown"></span>
<div class="sr-only">Montrer horaires</div>
</button>
</div>
</div>
<p class="sds-textBodyLg">Effectuez vos principales opérations bancaires via Spuerkeess Direct de
8h00 à 18h00 du lundi au vendredi.</p>
</div>
<div class="sds-openingHours__list sds-textBodyLg">
<div class="sds-collapse collapse fade" id="openingHoursCollapse">
<div class="sds-collapse__insetTopXl">
<dl class="list-unstyled">
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Lundi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Mardi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Mercredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Jeudi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="sds-textSemiBold d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Vendredi</dt>
<dd>07:00 - 19:00</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Samedi</dt>
<dd>fermé</dd>
</div>
<div class="d-flex align-items-center justify-content-between sds-staticInlineMd">
<dt class="font-weight-normal">Dimanche</dt>
<dd>fermé</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="row row-xs">
<div class="col-12 col-md-6">
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">Téléphone</h4>
<p class="sds-iconLinkBox__description">(+352) 4015-1</p>
</div>
</a>
</div>
<div class="col-12 col-md-6">
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">E-Mail</h4>
<p class="sds-iconLinkBox__description">sdi@spuerkeess.lu</p>
</div>
</a>
</div>
</div>
<div class="sds-staticStackSm">
<div class="sds-label">
Langues
</div>
<ul class="sds-btnGroup list-unstyled">
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Lëtzebuergesch">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/lu.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Français">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/fr.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="Deutsch">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/de.png" alt="">
</div>
</li>
<li>
<div class="sds-avatar centeredBgi" data-toggle="tooltip" data-placement="top" title="English">
<img class="img-fluid" src="../../media/spuerkeess-site/components/service-point-list-map/uk.png" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}servicePointListMap{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" data-js-services-point-map>
<div class="container {{ namespace }}servicePointListMap__outerContainer">
<div class="row no-bottom-gutter {{ namespace }}servicePointListMap__outerRow">
<div class="col-12 col-lg-6 position-static">
<div class="{{ namespace }}servicePointListMap__infoPane">
<!-- Info pane -->
<div class="{{ namespace }}servicePointListMap__infoWrapper">
<!-- Default list pane -->
<div id="listPane" class="{{ namespace }}servicePointListMap__listPane">
<div class="{{ namespace }}servicePointListMap__searchHeader" data-reacts-to-headroom>
{% render "@search--inverted-tab-filters",{
classes: [namespace + "servicePointListMap__search", namespace + "opacityBgFloating"],
breakpoint: "lg",
attrs: {
"data-has-shadow-on-map-shown":""
}
},true %}
</div>
<div class="{{ namespace }}servicePointListMap__listPaneContent {{ namespace }}stackLg">
<div class="{{ namespace }}servicePointListMap__filterBar d-lg-none row row-xs align-items-center no-bottom-gutter">
<div class="col">
{% render "@toggle-tab",{
classes: [namespace+"opacityBgFloating"],
attrs: {
"data-has-shadow-on-map-shown":""
}
},true %}
</div>
<div class="col-auto">
<div class="dropdown">
{% render "@icon-btn-secondary",{
classes: [namespace+"opacityBgFloating","-btnHasNotif"],
icon: "icon-filter",
"attrs": {
"data-toggle": "dropdown",
"data-offset": "0,8",
"data-has-shadow-on-map-shown":""
}
},true %}
{% render "@snet-action-menu--checkboxes",{
modifiers: ["dropdown-menu-right"],
checkboxes: checkboxes
},true %}
</div>
</div>
</div>
{% render "@spot-select--no-title-no-img",{
checkItemType: "checkbox"
},true %}
<ul class="list-unstyled">
<li class="d-lg-none">
<div class="{{ namespace }}box -boxSunken -insetMd {{ namespace }}stackXs">
<div class="h4">Spuerkeess Direct</div>
<p>Effectuez vos principales opérations bancaires via Spuerkeess Direct de 8h00 à 18h00 du lundi au vendredi.</p>
<div class="{{ namespace }}btnGroup -hasVerticalSpacing -medium -wrap {{ namespace }}exceptionStackMd">
{% render "@btn-secondary-inverse--icon-left",{
icon: "icon-phone",
text: "+352 4015-1"
},true %}
{% render "@btn-secondary-inverse--icon-left",{
icon: "icon-envelope",
text: "sdi@spuerkeess.lu"
},true %}
</div>
</div>
</li>
<li class="{{ namespace }}servicePointListMap__listItemWrapper">
<div class="{{ namespace }}servicePointListMap__listItem -loading">
<div class="{{ namespace }}servicePointListMap__listItemImg">
{% render "@skeleton-unit",{
classes: ["-floating","-radiusInherit"]
},true %}
</div>
<div class="d-flex flex-column justify-content-center {{ namespace }}stackXs flex-grow-1">
{% render "@skeleton-unit" %}
{% render "@skeleton-unit--small" %}
</div>
</div>
</li>
{% for key, item in items %}
<li class="{{ namespace }}servicePointListMap__listItemWrapper">
<div class="{{ namespace }}servicePointListMap__listItem">
<div class="{{ namespace }}servicePointListMap__listItemImg">
{% if item.nopic %}
{% render "@nopic-greatbell" %}
{% else %}
<img src="{{ (mediaPath + "/spuerkeess-site/components/service-point-list-map/list-item.png") | path }}" alt="">
{% endif %}
</div>
<div class="d-flex flex-column justify-content-center {{ namespace }}stackXs">
{% if item.badge %}
{% render "@badge--highlight-muted", {
classes: [namespace + "servicePointListMap__listItemBadge"],
text: item.badge
}, true %}
{% endif %}
<h2 class="h4">{{ item.title }}</h2>
<p>{{ item.text }}</p>
</div>
<button type="button" class="{{ namespace }}servicePointListMap__listDetailTrigger stretched-link" data-toggle="collapse" data-target="#serviceDetailPane">
<span class="sr-only">Montrer détail</span>
</button>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="{{ namespace }}servicePointListMap__listPaneFooter">
{% render "@btn-primary",{
text: "Montrer Carte",
classes: [namespace+"opacityBgFloating"],
attrs: {
"data-show-map": "",
"data-has-shadow-on-map-shown":""
}
},true %}
{% render "@btn-primary",{
classes: [namespace+"opacityBgFloating"],
text: "Montrer Liste",
attrs: {
"data-hide-map": "",
"data-has-shadow-on-map-shown":""
}
},true %}
</div>
</div>
<!-- Detail pane -->
<div id="serviceDetailPane" class="{{ namespace }}servicePointListMap__detailPane collapse fade">
<div class="{{ namespace }}servicePointListMap__detailBack position-sticky" data-reacts-to-headroom>
{% render "@icon-btn-secondary",{
classes: [namespace + "opacityBgFloating"],
icon: "icon-arrowprevious",
attrs: {
"data-toggle": "collapse",
"data-target": "#serviceDetailPane",
"data-has-shadow-on-map-shown":""
}
},true %}
</div>
<div class="{{ namespace }}servicePointListMap__loading" id="serviceDetailLoading">
<div class="{{ namespace }}stackLg">
<div class="{{ namespace }}outOfBounds {{ namespace }}servicePointListMap__detailImg">
<div class="{{ namespace }}skeletonUnit -floating -radiusInherit"></div>
<img class="img-fluid" src="" alt="">
</div>
<div class="{{ namespace }}servicePointListMap__detailMainInfo {{ namespace }}stackMd">
<div class="{{ namespace }}stackSm">
{% render "@skeleton-unit--text-helper-small" %}
{% render "@skeleton-unit--h3" %}
</div>
<div class="row row-xs no-bottom-gutter align-items-center">
<div class="col {{ namespace }}stackMd">
{% render "@skeleton-unit" %}
{% render "@skeleton-unit--small" %}
</div>
<div class="col-auto col-sm-3">
{% render "@skeleton-unit",{
classes: ["-boxBorderRadius"],
inlineCSS: {
"width": "var(--map-pin-width)",
"min-height": "var(--map-pin-height)"
}
},true %}
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}servicePointListMap__detailContent d-none" id="serviceDetailContent">
<div class="{{ namespace }}stackXxl">
<div class="{{ namespace }}stackLg">
<div class="{{ namespace }}outOfBounds {{ namespace }}servicePointListMap__detailImg">
<img class="img-fluid" src="{{ (mediaPath + "/spuerkeess-site/components/service-point-list-map/item-detail-img.png") | path }}" alt="">
</div>
<div class="{{ namespace }}servicePointListMap__detailMainInfo {{ namespace }}stackMd">
<div class="{{ namespace }}stackXs">
<div class="{{ namespace }}textHelper {{ namespace }}metaColor">Agence, S-Bank, Accès mobilité réduite</div>
<h3 class="h3">Avenue J.-F. Kennedy</h3>
</div>
<div class="row row-xs no-bottom-gutter align-items-center">
<div class="col">
<div class="{{ namespace }}textBodyLg">
<p>
Avenue J.-F. Kennedy <br>
391855, Luxembourg
</p>
{% render "@link",{
text: "4015-9580"
},true %}
</div>
</div>
<div class="col-auto">
{% render "@btn-secondary--icon-left",{
icon: "icon-pin",
text: "Géoportail"
},true %}
</div>
</div>
</div>
</div>
<div class="{{ namespace }}servicePointListMap__actionsList {{ namespace }}exceptionStackLg">
<ul class="list-unstyled row row-xs align-items-stretch-immediate no-bottom-gutter flex-nowrap">
{% for key, item in shortCuts %}
{% if item %}
<li class="col col-sm-3">
{% render "@spk-navigation-tile--icon-btn", {
eltType: "a",
icon: item.icon,
text: item.text,
classes: ["-noInteraction", namespace+"boxShadowActive"]
},true %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="{{ namespace }}stackLg">
<h4 class="h4">Heures d’ouvertures</h4>
{% render "@toggle-tab--tabs",horairesOuverture,true %}
<div class="tab-content" id="sidebar-bar-charts">
<div class="tab-pane fade show active" id="{{ horairesOuverture.toggleTabItems[0].target }}" role="tabpanel" aria-labelledby="{{ horairesOuverture.toggleTabItems[0].id }}">
<ul class="{{ namespace }}servicePointListMap__detailTimetable list-unstyled">
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Lundi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mardi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mercredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem -active">
<div class="row row-xs no-bottom-gutter">
<span class="col">Jeudi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Vendredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Samedi</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Dimanche</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="{{ horairesOuverture.toggleTabItems[1].target }}" role="tabpanel" aria-labelledby="{{ horairesOuverture.toggleTabItems[1].id }}">
<ul class="{{ namespace }}servicePointListMap__detailTimetable list-unstyled">
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Lundi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mardi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Mercredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem -active">
<div class="row row-xs no-bottom-gutter">
<span class="col">Jeudi</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Vendredi</span>
<span class="col text-right">07:00 - 19:00</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Samedi</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
<li class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}servicePointListMap__detailTimetableItem">
<div class="row row-xs no-bottom-gutter">
<span class="col">Dimanche</span>
<span class="col text-right">fermée</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="{{ namespace }}stackMd">
<h4 class="h4">Services Agence</h4>
{% render "@list--checked-alt" %}
</div>
<div class="{{ namespace }}stackMd">
<h4 class="h4">Services S-Bank</h4>
<p>
Accessible 24H/24 <br>
Accessible pendant les heures d'ouverture de l'agence
</p>
{% render "@list--checked-alt" %}
</div>
<div class="{{ namespace }}stackMd">
<h4 class="h4">Langues</h4>
<ul class="{{ namespace }}btnGroup list-unstyled">
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/lu.png"
},true %}
</li>
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/fr.png"
},true %}
</li>
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/de.png"
},true %}
</li>
<li>
{% render "@avatar--image",{
img: "/spuerkeess-site/components/service-point-list-map/uk.png"
},true %}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Map pane -->
<div id="serviceMapPane" class="{{ namespace }}servicePointListMap__mapPane">
<div class="{{ namespace }}servicePointListMap__filterBar d-lg-none row row-xs align-items-center no-bottom-gutter">
<div class="col">
{% render "@toggle-tab",{
classes: [namespace+"opacityBgFloating"],
"data-has-shadow-on-map-shown":""
},true %}
</div>
<div class="col-auto">
<div class="dropdown">
{% render "@icon-btn-secondary",{
classes: [namespace+"opacityBgFloating", "-btnHasNotif"],
icon: "icon-filter",
"attrs": {
"data-toggle": "dropdown",
"data-offset": "0,8",
"data-has-shadow-on-map-shown":""
}
},true %}
{% render "@snet-action-menu--checkboxes",{
modifiers: ["dropdown-menu-right"],
checkboxes: checkboxes
},true %}
</div>
</div>
</div>
<div class="{{ namespace }}servicePointListMap__mapInner embed-responsive flex-grow-1">
<iframe class="" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2639.3604849038306!2d7.743374699999998!3d48.58379619999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c84c3ae29d77%3A0x7580492566f10ea1!2sOsaka%20Strasbourg!5e0!3m2!1sen!2slu!4v1701766921873!5m2!1sen!2slu" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="{{ namespace }}servicePointListMap__mapFooter">
{% render "@btn-primary",{
text: "Montrer Liste",
classes: [namespace+"opacityBgFloating"],
attrs: {
"data-hide-map": "",
"data-has-shadow-on-map-shown":""
}
},true %}
</div>
</div>
</div>
</div>
</div>
<!-- This column will be the "widget area" Put any and all content inside data-service-pont-list-map-widget -->
<div class="d-none d-lg-block col-lg-6 col-xl-5 offset-xl-1 {{ namespace }}pointerEventsNone">
<div class="position-sticky {{ namespace}}sticky3xl {{ namespace }}servicePointListMap__widgetZone" data-reacts-to-headroom>
<div class="{{ namespace }}opacityBgFloating {{ namespace }}servicePointListMap__widgetZoneInner" data-has-shadow-on-map-shown data-service-pont-list-map-widget>
{% render "@spk-opening-hours--sunken" %}
</div>
</div>
</div>
</div>
</div>
</div>
import PhotoSwipe from "photoswipe";
export default class ServicesPointMap {
constructor() {
this.servicesPointListMap = document.querySelector(".sds-servicePointListMap");
this.togglePanes()
}
togglePanes() {
const root = this.servicesPointListMap;
const listPane = document.querySelector("#listPane");
const mapPane = document.querySelector("#serviceMapPane");
const mapTrigger = document.querySelectorAll("[data-show-map]");
const listTrigger = document.querySelectorAll("[data-hide-map]");
const detailLoading = document.querySelector("#serviceDetailLoading");
const detailContent = document.querySelector("#serviceDetailContent");
const detailTriggers = document.querySelectorAll("[data-target='#serviceDetailPane']");
$('#serviceDetailPane').on('show.bs.collapse', function () {
// do something...
listPane.classList.add("d-none");
window.scrollTo(0,0);
})
$('#serviceDetailPane').on('shown.bs.collapse', function () {
// do something...
setTimeout(() => {
detailLoading.classList.add("d-none");
detailContent.classList.remove("d-none");
root.classList.add("-detailShown");
}, "1000");
})
$('#serviceDetailPane').on('hide.bs.collapse', function () {
// do something...
listPane.classList.remove("d-none");
root.classList.remove("-detailShown");
window.scrollTo(0,0);
})
$('#serviceDetailPane').on('hidden.bs.collapse', function () {
// do something...
detailLoading.classList.remove("d-none");
detailContent.classList.add("d-none");
})
mapTrigger.forEach((el, i) => {
el.addEventListener("click", (e) => {
this.servicesPointListMap.classList.add("-mapShown");
})
});
listTrigger.forEach((el, i) => {
el.addEventListener("click", (e) => {
this.servicesPointListMap.classList.remove("-mapShown");
window.scrollTo({
top: 0,
behavior: "smooth"
});
})
});
}
}
/* variables specific to current element */
$service-point-list-map-list-item-inset-spacing-mobile: map-deep-get($token-spacer-inset-map, "sm");
$service-point-list-map-list-item-inset-spacing-desktop: map-deep-get($token-spacer-inset-map, "md");
$service-point-list-map-list-pane-inset-spacing-mobile: map-deep-get($token-spacer-inset-map, "md");
$service-point-list-map-list-pane-inset-spacing-desktop: map-deep-get($token-spacer-inset-map, "lg");
$service-point-root-height: calc(100vh - #{$nav-topbar-height-global});
$service-point-root-height-dvh: calc(100dvh - #{$nav-topbar-height-global});
.#{$namespace}servicePointListMap {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
min-height: $service-point-root-height;
@supports(height: 0dvh) {
min-height: $service-point-root-height-dvh;
}
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
&__infoPane {
}
&__infoWrapper {
position: relative;
z-index: z("low");
}
&__mapPane {
@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
position: absolute;
z-index: z("low");
top: 0;
right: map-deep-get($token-spacer-grid-map, "xs");
bottom: 0;
left: map-deep-get($token-spacer-grid-map, "xs");
display: none;
#{$self}__searchHeader {
padding-top: $service-point-list-map-list-pane-inset-spacing-mobile;
@include media-breakpoint-up("lg") {
display: none;
}
}
#{$self}__filterBar {
top: map-deep-get($token-spacer-inset-map, "md");
width: 100%;
}
@include media-breakpoint-up("md") {
right: map-deep-get($token-spacer-grid-map, "gutter");
left: map-deep-get($token-spacer-grid-map, "gutter");
}
@include media-breakpoint-up("lg") {
z-index: z("zero");
right: 0;
left: 0;
height: calc(100vh - #{$nav-topbar-height-global});
top: auto;
}
}
&__mapInner {
z-index: z("negative"); /* position relative is already on the embed-repsonsive class */
margin-top: -($btn-min-height-global + $service-point-list-map-list-item-inset-spacing-desktop);
margin-right: -(map-deep-get($token-spacer-grid-map, "xs"));
margin-left: -(map-deep-get($token-spacer-grid-map, "xs"));
width: auto;
@include media-breakpoint-up("md"){
margin-right: 0 (-(map-deep-get($token-spacer-grid-map, "gutter")));
margin-left: 0 (-(map-deep-get($token-spacer-grid-map, "gutter")));
}
@include media-breakpoint-up("lg"){
margin-top: 0;
margin-right: 0;
margin-left: 0;
width: 100%;
}
}
&__infoPane,
&__listPane,
&__detailPane {
@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
}
&__listPane,
&__detailPane {
padding: $service-point-list-map-list-pane-inset-spacing-mobile 0;
@include media-breakpoint-up("lg") {
padding: $service-point-list-map-list-pane-inset-spacing-desktop 0;
}
}
&__filterBar {
position: relative;
z-index: z("low");
}
&__listPane {
position: relative;
z-index: z("zero");
padding: 0 0 $service-point-list-map-list-pane-inset-spacing-mobile 0;
@include media-breakpoint-up("lg") {
padding: 0;
}
}
&__searchHeader {
padding-top: $service-point-list-map-list-pane-inset-spacing-mobile;
padding-bottom: $service-point-list-map-list-pane-inset-spacing-desktop;
position: sticky;
top: 0;
z-index: z("medium");
@include media-breakpoint-up("lg") {
padding-bottom: map-deep-get($token-spacer-stack-max-map, "sm");
}
}
&__listItemWrapper {
* + &:nth-of-type(2) {
margin-top: map-deep-get($token-spacer-stack-min-map, "md");
@include media-breakpoint-up("lg") {
margin-top: 0;
}
}
@include outOfBoundsInline("sm");
@include media-breakpoint-up("lg") {
@include unsetOutofBoundsInline();
}
}
// servicePointListMap__listItem
&__listItem {
// follows same logic as parent
position: relative;
z-index: z("zero");
display: flex;
align-items: stretch;
@include spacer-component-inline("md");
border-radius: map-deep-get($token-radius-map, "16");
padding: $service-point-list-map-list-item-inset-spacing-mobile;
@include custom-prop-fallback("background-color", "comp-box-background-color");
@include media-breakpoint-up("lg") {
padding: $service-point-list-map-list-item-inset-spacing-desktop;
@include spacer-component-inline("lg");
}
&:hover {
@media (hover: hover) {
@include custom-prop-fallback("background-color", "comp-box-sunken-background-color");
}
}
&.-loading {
pointer-events: none;
cursor: default;
&:hover {
@media (hover: hover) {
background-color: transparent;
}
}
}
}
&__listItemImg {
position: relative;
aspect-ratio: 1/1;
width: map-deep-get($token-sizes-unit-map, "88");
flex-shrink: 0;
align-self: flex-start;
border-radius: map-deep-get($token-radius-map, "24");
@include media-breakpoint-up("lg") {
width: 144px;
}
IMG {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
}
&__listItemBadge {
align-self: flex-start;
@include media-breakpoint-up("lg"){
position: absolute;
top: $service-point-list-map-list-item-inset-spacing-desktop;
right: $service-point-list-map-list-item-inset-spacing-desktop;
}
}
&__listDetailTrigger {
}
&__actionsList {
overflow-x: auto;
padding: map-deep-get($token-spacer-inset-map, "md");
margin-left: -(map-deep-get($token-spacer-grid-map, "xs"));
margin-right: -(map-deep-get($token-spacer-grid-map, "xs"));
margin-bottom: -(map-deep-get($token-spacer-grid-map, "xs"));
@include media-breakpoint-up("lg") {
padding-top: map-deep-get($token-spacer-inset-map, "lg");
}
}
&__detailPane {
width: 100%;
display: none;
&.show {
display: block;
}
}
&__listPaneFooter,
&__mapFooter {
padding: map-deep-get($token-spacer-inset-map, "lg");
z-index: z("low");
}
&__listPaneFooter {
position: sticky;
z-index: z("sticky");
bottom: 0;
bottom: env(safe-area-inset-bottom);
text-align: center;
margin-top: auto;
}
&__mapFooter {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
&__detailImg {
position: relative;
margin-top: -(#{map-deep-get($token-button-size-big-map, "mobile", "min-height") + map-deep-get($token-spacer-stack-max-map, "md")});
border-radius: map-deep-get($token-radius-map, "24");
IMG {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
height: 100%;
border-radius: inherit;
}
}
&__detailBack {
margin-top: map-deep-get($token-spacer-stack-max-map, "md");
margin-left: map-deep-get($token-spacer-stack-max-map, "sm");
top: map-deep-get($token-spacer-stack-max-map, "sm") + $nav-topbar-height-global;
z-index: z("sticky");
@include media-breakpoint-up("lg") {
top: map-deep-get($token-spacer-stack-max-map, "md") + $nav-topbar-height-global;
}
}
&__detailMainInfo {
padding-left: $grid-gutter-width-xs * 0.5;
}
&__detailTimetableItem {
border-radius: map-deep-get($token-radius-map, "4");
padding: map-deep-get($token-spacer-inset-map, "sm");
&.-active {
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
}
}
&__search {
[data-toggle-visibility-at="lg"] {
display: none;
@include media-breakpoint-up("lg") {
display: flex;
}
}
}
&__widgetZone {
margin-top: map-deep-get($token-spacer-unit-map, "72") + map-deep-get($token-spacer-unit-map, "72");
padding-top: $service-point-list-map-list-pane-inset-spacing-mobile;
pointer-events: auto;
}
&__widgetZoneInner {
border-radius: $box-border-radius-global;
}
[data-hide-map] {
display: none;
}
[data-show-map] {
display: inline-flex;
}
/* modifiers */
// servicePointListMap -altStyle
&.-detailOpen {
// follows same logic as base element
#{$self}__listPane {
//overflow: hidden;
opacity: 0;
visibility: hidden;
}
#{$self}__detailPane {
//overflow: visible;
opacity: 1;
visibility: visible;
}
}
&.-mapShown {
position: relative;
height: $service-point-root-height;
@supports(height: 0dvh) {
height: $service-point-root-height-dvh;
}
[data-has-shadow-on-map-shown] {
&::before {
box-shadow: map-deep-get($token-shadow-map, "active");
}
}
[data-hide-map] {
display: inline-flex;
}
[data-show-map] {
display: none;
}
@include media-breakpoint-up("lg") {
position: static;
}
#{$self}__infoPane,
#{$self}__infoWrapper,
#{$self}__listPane,
#{$self}__outerContainer,
#{$self}__outerRow {
height: 100%;
}
#{$self}__infoWrapper {
display: none;
@include media-breakpoint-up("lg") {
display: block;
pointer-events: none;
background-color: transparent;
}
}
#{$self}__searchHeader {
pointer-events: auto;
background-color: transparent;
}
#{$self}__listPaneFooter {
pointer-events: auto;
}
#{$self}__listPane {
display: flex;
flex-direction: column;
background-color: transparent;
}
#{$self}__listPaneContent {
display: none;
}
#{$self}__mapPane {
display: flex;
flex-direction: column;
[data-hide-map] {
@include media-breakpoint-up("lg") {
display: none;
}
}
}
}
&.-detailShown {
min-height: 0;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
.#{$namespace}pageLayout:has([data-nav-module]) & {
#{$self}__searchHeader {
top: $nav-topbar-height-global;
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}