<div class="acl-contextual-popup acl-elevation--z3" id="acl-example-123">
<div class="acl-contextual-popup__header">
<div class="acl-contextual-popup__header-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_supermarket" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 4.000000)" fill="#93C3EA" fill-rule="nonzero" id="Path">
<path d="M5.8359375,10.6668055 L15.3634186,10.6668055 C15.59935,10.6668055 15.8063049,10.5090278 15.870163,10.2798611 L17.9796753,2.81305557 C18.0249939,2.65208334 17.9939575,2.47916665 17.8941193,2.34541668 C17.7941437,2.21208334 17.6386871,2.13333333 17.4727936,2.13333333 L4.61851502,2.13333333 L4.24154665,0.417777778 C4.18798828,0.173472213 3.97375488,-1.01054967e-15 3.7265625,-1.01054967e-15 L0.52734375,-1.01054967e-15 C0.235931414,-1.01054967e-15 -1.99840144e-15,0.238611129 -1.99840144e-15,0.533333333 C-1.99840144e-15,0.828194453 0.235931414,1.06666667 0.52734375,1.06666667 L3.30331423,1.06666667 L5.20765685,9.73333333 C4.64735412,9.97972224 4.25390625,10.54375 4.25390625,11.2001389 C4.25390625,12.0823611 4.96362305,12.8001389 5.8359375,12.8001389 L15.3634186,12.8001389 C15.6549683,12.8001389 15.8907623,12.5616667 15.8907623,12.2668055 C15.8907623,11.9720833 15.6549683,11.7334722 15.3634186,11.7334722 L5.8359375,11.7334722 C5.54548644,11.7334722 5.30859375,11.4944444 5.30859375,11.2001389 C5.30859375,10.9058333 5.54548644,10.6668055 5.8359375,10.6668055 Z">
</path>
<path d="M5.30859375,14.4001389 C5.30859375,15.2825 6.01831055,16.0001389 6.89076232,16.0001389 C7.76307677,16.0001389 8.47279357,15.2825 8.47279357,14.4001389 C8.47279357,13.5179167 7.76307677,12.8001389 6.89076232,12.8001389 C6.01831055,12.8001389 5.30859375,13.5179167 5.30859375,14.4001389 Z">
</path>
<path d="M12.7266998,14.4001389 C12.7266998,15.2825 13.4364166,16.0001389 14.3087311,16.0001389 C15.1811828,16.0001389 15.8907623,15.2825 15.8907623,14.4001389 C15.8907623,13.5179167 15.1811828,12.8001389 14.3087311,12.8001389 C13.4364166,12.8001389 12.7266998,13.5179167 12.7266998,14.4001389 Z">
</path>
</g>
</g>
</svg>
</div>
<div class="acl-contextual-popup__header-title">
<span class="acl-contextual-popup__recommended-status">RECOMMENDED</span>
SPARK - Landmark Place
</div>
<div class="acl-contextual-popup__close">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.9579051,12.0736789 C12.9383147,12.0541371 12.9273048,12.0276031 12.9273048,11.9999319 C12.9273048,11.9722607 12.9383147,11.9457267 12.9579051,11.926185 L16.8171675,8.06717843 C17.061188,7.82280257 17.0609082,7.42687083 16.8165425,7.18284013 C16.5721769,6.93880944 16.1762616,6.93908924 15.9322411,7.1834651 L12.0733953,11.0408051 C12.0538544,11.0603963 12.0273215,11.0714067 11.9996514,11.0714067 C11.9719814,11.0714067 11.9454485,11.0603963 11.9259076,11.0408051 L8.06706178,7.1834651 C7.82304125,6.93931934 7.42731253,6.93922607 7.18317695,7.18325677 C6.93904136,7.42728747 6.9389481,7.82303268 7.18296863,8.06717843 L11.0413978,11.926185 C11.0609882,11.9457267 11.0719981,11.9722607 11.0719981,11.9999319 C11.0719981,12.0276031 11.0609882,12.0541371 11.0413978,12.0736789 L7.18296863,15.9331021 C7.02511502,16.0910367 6.96350588,16.3211917 7.02134876,16.5368699 C7.07919164,16.7525482 7.24769885,16.920983 7.46339534,16.9787266 C7.67909182,17.0364702 7.90920817,16.97475 8.06706178,16.8168154 L11.9259076,12.9573922 C11.9454485,12.937801 11.9719814,12.9267906 11.9996514,12.9267906 C12.0273215,12.9267906 12.0538544,12.937801 12.0733953,12.9573922 L15.9322411,16.8168154 C16.1762616,17.0609612 16.5719903,17.0610544 16.8161259,16.8170237 C17.0602615,16.572993 17.0603548,16.1772478 16.8163342,15.9331021 L12.9579051,12.0736789 Z" id="Path" fill="#B1B7CD" fill-rule="nonzero"></path>
</g>
</svg>
</div>
</div>
<div class="acl-contextual-popup__location">
<div class="acl-contextual-popup__location-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_address" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M18.7067265,5.05716593 C18.5570341,4.98094469 18.3807077,4.98094469 18.2310154,5.05716593 L18.2310154,5.05716593 L5.29347757,10.963478 C5.03121265,11.0968573 4.92501854,11.4209636 5.0562599,11.6874376 C5.13096604,11.8391214 5.27154178,11.9462927 5.4357646,11.9767369 L10.9153869,12.9894584 L11.9121118,18.5570237 C11.952903,18.7852448 12.1327454,18.961461 12.3586996,18.9945924 C12.3836846,18.9982596 12.4088874,19 12.4340902,19 C12.6353705,19 12.8193823,18.8845758 12.9093657,18.7016259 L18.943633,5.78122035 C19.0749988,5.51480955 18.9689291,5.19064005 18.7067265,5.05716593 Z" id="navigation-icon" fill="#93C3EA" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<div class="acl-contextual-popup__location-address">
Landmark Place, Station Terrace, Cardiff CF10 2FY
</div>
</div>
<div class="acl-contextual-popup__visit-meta">
<div class="acl-contextual-popup__visit-meta-last-visit">
<div class="acl-contextual-popup__visit-meta-last-visit-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_last_visit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="time-clock-circle-alternate" transform="translate(4.000000, 4.000000)" fill="#93C3EA" fill-rule="nonzero">
<path d="M8,-1.18423789e-15 C3.581722,-1.18423789e-15 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C15.9948568,3.58385413 12.4161459,0.00514317487 8,-1.18423789e-15 Z M8,14.6666667 C4.31810167,14.6666667 1.33333333,11.6818983 1.33333333,8 C1.33333333,4.31810167 4.31810167,1.33333333 8,1.33333333 C11.6818983,1.33333333 14.6666667,4.31810167 14.6666667,8 C14.6626251,11.680223 11.680223,14.6626251 8,14.6666667 L8,14.6666667 Z" id="Shape"></path>
<path d="M11.4226667,10.54 L8.33333333,7.70733333 L8.33333333,4.33333333 C8.33333333,3.9651435 8.0348565,3.66666667 7.66666667,3.66666667 C7.29847683,3.66666667 6.9999996,3.9651435 6.9999996,4.33333333 L6.9999996,8 C6.99979466,8.18703905 7.07817043,8.36556164 7.216,8.492 L10.522,11.522 C10.7946781,11.7672414 11.2134714,11.7491619 11.464,11.4813333 C11.7123025,11.2098954 11.693805,10.7886296 11.4226667,10.54 L11.4226667,10.54 Z" id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="acl-contextual-popup__visit-meta-last-visit-timeframe">
Last visit 11th Apr 2019
</div>
</div>
<div class="acl-contextual-popup__visit-meta-status">Overdue</div>
</div>
<div class="acl-contextual-popup__visit-meta-info">
Visiting this account now can result in a more valuable order. Add to
your route to visit more frequently.
</div>
<div class="acl-contextual-popup__contact">
<div class="acl-contextual-popup__contact-info">
<div>
<img class="acl-contextual-popup__contact-info-avatar" src="https://i.pravatar.cc/22" />
</div>
<div class="acl-contextual-popup__contact-info-name">
Charles Love
</div>
</div>
<div class="acl-contextual-popup__contact-label" data-open-label="Hide Contact" data-closed-label="Contact">
Contact
</div>
</div>
<div class="acl-contextual-popup__contact-details acl-contextual-popup__contact-details--hidden">
<div class="acl-contextual-popup__contact-email">
<div class="acl-contextual-popup__contact-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_email" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12,3.00037695 C7.08228687,2.9551756 3.05644493,6.98084892 3,12 C3.05644493,17.0191511 7.08228687,21.0448244 12,20.999623 C13.807917,21.0059031 15.5764684,20.4608918 17.0788891,19.4344712 C17.3632284,19.2397386 17.5241824,18.904972 17.5011211,18.5562749 C17.4780599,18.2075778 17.274487,17.8979255 16.9670863,17.7439611 C16.6596857,17.5899967 16.2951589,17.6151109 16.0108196,17.8098436 C14.8241975,18.6197721 13.4274949,19.0492625 12,19.0431833 C8.14054963,19.089318 4.97237746,15.9390217 4.91685125,12 C4.97237746,8.0609783 8.14054963,4.91068201 12,4.95681674 C15.8594504,4.91068201 19.0276225,8.0609783 19.0831487,12 L19.0831487,12.6972751 C19.0573515,13.517637 18.3983145,14.1690424 17.5941387,14.1690424 C16.7899629,14.1690424 16.1309259,13.517637 16.1051286,12.6972751 L16.1051286,12 C16.1343951,10.2985754 15.1527116,8.74801363 13.6208987,8.0761772 C12.0890857,7.40434076 10.3113155,7.74463625 9.12210627,8.93732267 C7.93289707,10.1300091 7.56839027,11.9382545 8.19969212,13.5132352 C8.83099397,15.0882158 10.3327468,16.1171875 12,16.1171319 C13.1156827,16.1173653 14.1838068,15.6559925 14.9603851,14.8384029 C15.863854,15.9693119 17.3635782,16.4032129 18.7141068,15.9244317 C20.0646354,15.4456505 20.9779181,14.1563049 21,12.6972751 L21,12 C20.9435551,6.98084892 16.9177131,2.9551756 12,3.00037695 Z M12,14.1606921 C10.8396366,14.1216648 9.92621862,13.13668 9.95178306,11.9519962 C9.97734751,10.7673123 10.9323693,9.82432944 12.0932911,9.83748387 C13.2542128,9.85063831 14.1884879,10.8150289 14.1882774,12 C14.1668611,13.2126502 13.1881698,14.1790042 12,14.1606921 L12,14.1606921 Z" id="Shape" fill="#B1B7CD" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<a href="mailto:ankunding.kathryne@gmail.com">
ankunding.kathryne@gmail.com
</a>
</div>
<div class="acl-contextual-popup__contact-phone">
<div class="acl-contextual-popup__contact-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_phone" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M19.5556875,14.8149375 C18.4536562,14.8149375 17.3715937,14.6425781 16.3462031,14.3037187 C15.84375,14.1323437 15.2260781,14.2895625 14.9194219,14.6045156 L12.8955,16.1323594 C10.5483281,14.8794375 9.10251562,13.4340937 7.86670312,11.1045469 L9.34959375,9.13335938 C9.73485937,8.74860938 9.87304687,8.18657813 9.70748437,7.65923437 C9.36717187,6.62845313 9.19429687,5.54690625 9.19429687,4.44440625 C9.19434375,3.64795312 8.54639062,3 7.74998437,3 L4.44435937,3 C3.64795312,3 3,3.64795312 3,4.44435937 C3,13.5732656 10.4267812,21 19.5556875,21 C20.3520937,21 21.0000469,20.3520469 21.0000469,19.5556406 L21.0000469,16.25925 C21.0000469,15.4628906 20.3520469,14.8149375 19.5556875,14.8149375 Z" id="Path" fill="#B1B7CD" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<a href="tel:029 2037 4945">
029 2037 4945
</a>
</div>
</div>
<div class="acl-contextual-popup__cta">
<div class="acl-contextual-popup__cta-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="add" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.9579051,12.0734675 C12.9383147,12.0539266 12.9273048,12.0273937 12.9273048,11.9997236 C12.9273048,11.9720536 12.9383147,11.9455207 12.9579051,11.9259798 L16.8171675,8.06713397 C17.061188,7.82276829 17.0609082,7.42685304 16.8165425,7.18283251 C16.5721769,6.93881198 16.1762616,6.93909178 15.9322411,7.18345745 L12.0733953,11.0406367 C12.0538544,11.0602271 12.0273215,11.071237 11.9996514,11.071237 C11.9719814,11.071237 11.9454485,11.0602271 11.9259076,11.0406367 L8.06706178,7.18345745 C7.82304125,6.93932187 7.42731253,6.9392286 7.18317695,7.18324914 C6.93904136,7.42726967 6.9389481,7.82299839 7.18296863,8.06713397 L11.0413978,11.9259798 C11.0609882,11.9455207 11.0719981,11.9720536 11.0719981,11.9997236 C11.0719981,12.0273937 11.0609882,12.0539266 11.0413978,12.0734675 L7.18296863,15.9327299 C7.02511502,16.0906579 6.96350588,16.3208033 7.02134876,16.5364726 C7.07919164,16.7521418 7.24769885,16.9205696 7.46339534,16.9783109 C7.67909182,17.0360521 7.90920817,16.9743345 8.06706178,16.8164064 L11.9259076,12.957144 C11.9454485,12.9375536 11.9719814,12.9265437 11.9996514,12.9265437 C12.0273215,12.9265437 12.0538544,12.9375536 12.0733953,12.957144 L15.9322411,16.8164064 C16.1762616,17.060542 16.5719903,17.0606353 16.8161259,16.8166147 C17.0602615,16.5725942 17.0603548,16.1768655 16.8163342,15.9327299 L12.9579051,12.0734675 Z" fill="#FFFFFF" fill-rule="nonzero" transform="translate(12.000000, 11.999792) rotate(-315.000000) translate(-12.000000, -11.999792) ">
</path>
</g>
</svg>
</div>
<div class="acl-contextual-popup__cta-label">Add to route</div>
</div>
</div>
<script>
const infoBox = new acl.ACLContextualPopup;
const example = document.querySelector('#acl-example-123')
infoBox.setPopup(example);
</script>
<div class="acl-contextual-popup acl-elevation--z3" id="acl-example-123">
<div class="acl-contextual-popup__header">
<div class="acl-contextual-popup__header-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_supermarket" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 4.000000)" fill="#93C3EA" fill-rule="nonzero" id="Path">
<path
d="M5.8359375,10.6668055 L15.3634186,10.6668055 C15.59935,10.6668055 15.8063049,10.5090278 15.870163,10.2798611 L17.9796753,2.81305557 C18.0249939,2.65208334 17.9939575,2.47916665 17.8941193,2.34541668 C17.7941437,2.21208334 17.6386871,2.13333333 17.4727936,2.13333333 L4.61851502,2.13333333 L4.24154665,0.417777778 C4.18798828,0.173472213 3.97375488,-1.01054967e-15 3.7265625,-1.01054967e-15 L0.52734375,-1.01054967e-15 C0.235931414,-1.01054967e-15 -1.99840144e-15,0.238611129 -1.99840144e-15,0.533333333 C-1.99840144e-15,0.828194453 0.235931414,1.06666667 0.52734375,1.06666667 L3.30331423,1.06666667 L5.20765685,9.73333333 C4.64735412,9.97972224 4.25390625,10.54375 4.25390625,11.2001389 C4.25390625,12.0823611 4.96362305,12.8001389 5.8359375,12.8001389 L15.3634186,12.8001389 C15.6549683,12.8001389 15.8907623,12.5616667 15.8907623,12.2668055 C15.8907623,11.9720833 15.6549683,11.7334722 15.3634186,11.7334722 L5.8359375,11.7334722 C5.54548644,11.7334722 5.30859375,11.4944444 5.30859375,11.2001389 C5.30859375,10.9058333 5.54548644,10.6668055 5.8359375,10.6668055 Z">
</path>
<path
d="M5.30859375,14.4001389 C5.30859375,15.2825 6.01831055,16.0001389 6.89076232,16.0001389 C7.76307677,16.0001389 8.47279357,15.2825 8.47279357,14.4001389 C8.47279357,13.5179167 7.76307677,12.8001389 6.89076232,12.8001389 C6.01831055,12.8001389 5.30859375,13.5179167 5.30859375,14.4001389 Z">
</path>
<path
d="M12.7266998,14.4001389 C12.7266998,15.2825 13.4364166,16.0001389 14.3087311,16.0001389 C15.1811828,16.0001389 15.8907623,15.2825 15.8907623,14.4001389 C15.8907623,13.5179167 15.1811828,12.8001389 14.3087311,12.8001389 C13.4364166,12.8001389 12.7266998,13.5179167 12.7266998,14.4001389 Z">
</path>
</g>
</g>
</svg>
</div>
<div class="acl-contextual-popup__header-title">
<span class="acl-contextual-popup__recommended-status">RECOMMENDED</span>
SPARK - Landmark Place
</div>
<div class="acl-contextual-popup__close">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path
d="M12.9579051,12.0736789 C12.9383147,12.0541371 12.9273048,12.0276031 12.9273048,11.9999319 C12.9273048,11.9722607 12.9383147,11.9457267 12.9579051,11.926185 L16.8171675,8.06717843 C17.061188,7.82280257 17.0609082,7.42687083 16.8165425,7.18284013 C16.5721769,6.93880944 16.1762616,6.93908924 15.9322411,7.1834651 L12.0733953,11.0408051 C12.0538544,11.0603963 12.0273215,11.0714067 11.9996514,11.0714067 C11.9719814,11.0714067 11.9454485,11.0603963 11.9259076,11.0408051 L8.06706178,7.1834651 C7.82304125,6.93931934 7.42731253,6.93922607 7.18317695,7.18325677 C6.93904136,7.42728747 6.9389481,7.82303268 7.18296863,8.06717843 L11.0413978,11.926185 C11.0609882,11.9457267 11.0719981,11.9722607 11.0719981,11.9999319 C11.0719981,12.0276031 11.0609882,12.0541371 11.0413978,12.0736789 L7.18296863,15.9331021 C7.02511502,16.0910367 6.96350588,16.3211917 7.02134876,16.5368699 C7.07919164,16.7525482 7.24769885,16.920983 7.46339534,16.9787266 C7.67909182,17.0364702 7.90920817,16.97475 8.06706178,16.8168154 L11.9259076,12.9573922 C11.9454485,12.937801 11.9719814,12.9267906 11.9996514,12.9267906 C12.0273215,12.9267906 12.0538544,12.937801 12.0733953,12.9573922 L15.9322411,16.8168154 C16.1762616,17.0609612 16.5719903,17.0610544 16.8161259,16.8170237 C17.0602615,16.572993 17.0603548,16.1772478 16.8163342,15.9331021 L12.9579051,12.0736789 Z"
id="Path" fill="#B1B7CD" fill-rule="nonzero"></path>
</g>
</svg>
</div>
</div>
<div class="acl-contextual-popup__location">
<div class="acl-contextual-popup__location-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_address" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path
d="M18.7067265,5.05716593 C18.5570341,4.98094469 18.3807077,4.98094469 18.2310154,5.05716593 L18.2310154,5.05716593 L5.29347757,10.963478 C5.03121265,11.0968573 4.92501854,11.4209636 5.0562599,11.6874376 C5.13096604,11.8391214 5.27154178,11.9462927 5.4357646,11.9767369 L10.9153869,12.9894584 L11.9121118,18.5570237 C11.952903,18.7852448 12.1327454,18.961461 12.3586996,18.9945924 C12.3836846,18.9982596 12.4088874,19 12.4340902,19 C12.6353705,19 12.8193823,18.8845758 12.9093657,18.7016259 L18.943633,5.78122035 C19.0749988,5.51480955 18.9689291,5.19064005 18.7067265,5.05716593 Z"
id="navigation-icon" fill="#93C3EA" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<div class="acl-contextual-popup__location-address">
Landmark Place, Station Terrace, Cardiff CF10 2FY
</div>
</div>
<div class="acl-contextual-popup__visit-meta">
<div class="acl-contextual-popup__visit-meta-last-visit">
<div class="acl-contextual-popup__visit-meta-last-visit-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_last_visit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="time-clock-circle-alternate" transform="translate(4.000000, 4.000000)" fill="#93C3EA"
fill-rule="nonzero">
<path
d="M8,-1.18423789e-15 C3.581722,-1.18423789e-15 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C15.9948568,3.58385413 12.4161459,0.00514317487 8,-1.18423789e-15 Z M8,14.6666667 C4.31810167,14.6666667 1.33333333,11.6818983 1.33333333,8 C1.33333333,4.31810167 4.31810167,1.33333333 8,1.33333333 C11.6818983,1.33333333 14.6666667,4.31810167 14.6666667,8 C14.6626251,11.680223 11.680223,14.6626251 8,14.6666667 L8,14.6666667 Z"
id="Shape"></path>
<path
d="M11.4226667,10.54 L8.33333333,7.70733333 L8.33333333,4.33333333 C8.33333333,3.9651435 8.0348565,3.66666667 7.66666667,3.66666667 C7.29847683,3.66666667 6.9999996,3.9651435 6.9999996,4.33333333 L6.9999996,8 C6.99979466,8.18703905 7.07817043,8.36556164 7.216,8.492 L10.522,11.522 C10.7946781,11.7672414 11.2134714,11.7491619 11.464,11.4813333 C11.7123025,11.2098954 11.693805,10.7886296 11.4226667,10.54 L11.4226667,10.54 Z"
id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="acl-contextual-popup__visit-meta-last-visit-timeframe">
Last visit 11th Apr 2019
</div>
</div>
<div class="acl-contextual-popup__visit-meta-status">Overdue</div>
</div>
<div class="acl-contextual-popup__visit-meta-info">
Visiting this account now can result in a more valuable order. Add to
your route to visit more frequently.
</div>
<div class="acl-contextual-popup__contact">
<div class="acl-contextual-popup__contact-info">
<div>
<img class="acl-contextual-popup__contact-info-avatar" src="https://i.pravatar.cc/22" />
</div>
<div class="acl-contextual-popup__contact-info-name">
Charles Love
</div>
</div>
<div class="acl-contextual-popup__contact-label" data-open-label="Hide Contact" data-closed-label="Contact">
Contact
</div>
</div>
<div class="acl-contextual-popup__contact-details acl-contextual-popup__contact-details--hidden">
<div class="acl-contextual-popup__contact-email">
<div class="acl-contextual-popup__contact-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_email" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path
d="M12,3.00037695 C7.08228687,2.9551756 3.05644493,6.98084892 3,12 C3.05644493,17.0191511 7.08228687,21.0448244 12,20.999623 C13.807917,21.0059031 15.5764684,20.4608918 17.0788891,19.4344712 C17.3632284,19.2397386 17.5241824,18.904972 17.5011211,18.5562749 C17.4780599,18.2075778 17.274487,17.8979255 16.9670863,17.7439611 C16.6596857,17.5899967 16.2951589,17.6151109 16.0108196,17.8098436 C14.8241975,18.6197721 13.4274949,19.0492625 12,19.0431833 C8.14054963,19.089318 4.97237746,15.9390217 4.91685125,12 C4.97237746,8.0609783 8.14054963,4.91068201 12,4.95681674 C15.8594504,4.91068201 19.0276225,8.0609783 19.0831487,12 L19.0831487,12.6972751 C19.0573515,13.517637 18.3983145,14.1690424 17.5941387,14.1690424 C16.7899629,14.1690424 16.1309259,13.517637 16.1051286,12.6972751 L16.1051286,12 C16.1343951,10.2985754 15.1527116,8.74801363 13.6208987,8.0761772 C12.0890857,7.40434076 10.3113155,7.74463625 9.12210627,8.93732267 C7.93289707,10.1300091 7.56839027,11.9382545 8.19969212,13.5132352 C8.83099397,15.0882158 10.3327468,16.1171875 12,16.1171319 C13.1156827,16.1173653 14.1838068,15.6559925 14.9603851,14.8384029 C15.863854,15.9693119 17.3635782,16.4032129 18.7141068,15.9244317 C20.0646354,15.4456505 20.9779181,14.1563049 21,12.6972751 L21,12 C20.9435551,6.98084892 16.9177131,2.9551756 12,3.00037695 Z M12,14.1606921 C10.8396366,14.1216648 9.92621862,13.13668 9.95178306,11.9519962 C9.97734751,10.7673123 10.9323693,9.82432944 12.0932911,9.83748387 C13.2542128,9.85063831 14.1884879,10.8150289 14.1882774,12 C14.1668611,13.2126502 13.1881698,14.1790042 12,14.1606921 L12,14.1606921 Z"
id="Shape" fill="#B1B7CD" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<a href="mailto:ankunding.kathryne@gmail.com">
ankunding.kathryne@gmail.com
</a>
</div>
<div class="acl-contextual-popup__contact-phone">
<div class="acl-contextual-popup__contact-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="account_phone" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path
d="M19.5556875,14.8149375 C18.4536562,14.8149375 17.3715937,14.6425781 16.3462031,14.3037187 C15.84375,14.1323437 15.2260781,14.2895625 14.9194219,14.6045156 L12.8955,16.1323594 C10.5483281,14.8794375 9.10251562,13.4340937 7.86670312,11.1045469 L9.34959375,9.13335938 C9.73485937,8.74860938 9.87304687,8.18657813 9.70748437,7.65923437 C9.36717187,6.62845313 9.19429687,5.54690625 9.19429687,4.44440625 C9.19434375,3.64795312 8.54639062,3 7.74998437,3 L4.44435937,3 C3.64795312,3 3,3.64795312 3,4.44435937 C3,13.5732656 10.4267812,21 19.5556875,21 C20.3520937,21 21.0000469,20.3520469 21.0000469,19.5556406 L21.0000469,16.25925 C21.0000469,15.4628906 20.3520469,14.8149375 19.5556875,14.8149375 Z"
id="Path" fill="#B1B7CD" fill-rule="nonzero"></path>
</g>
</svg>
</div>
<a href="tel:029 2037 4945">
029 2037 4945
</a>
</div>
</div>
<div class="acl-contextual-popup__cta">
<div class="acl-contextual-popup__cta-icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="add" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path
d="M12.9579051,12.0734675 C12.9383147,12.0539266 12.9273048,12.0273937 12.9273048,11.9997236 C12.9273048,11.9720536 12.9383147,11.9455207 12.9579051,11.9259798 L16.8171675,8.06713397 C17.061188,7.82276829 17.0609082,7.42685304 16.8165425,7.18283251 C16.5721769,6.93881198 16.1762616,6.93909178 15.9322411,7.18345745 L12.0733953,11.0406367 C12.0538544,11.0602271 12.0273215,11.071237 11.9996514,11.071237 C11.9719814,11.071237 11.9454485,11.0602271 11.9259076,11.0406367 L8.06706178,7.18345745 C7.82304125,6.93932187 7.42731253,6.9392286 7.18317695,7.18324914 C6.93904136,7.42726967 6.9389481,7.82299839 7.18296863,8.06713397 L11.0413978,11.9259798 C11.0609882,11.9455207 11.0719981,11.9720536 11.0719981,11.9997236 C11.0719981,12.0273937 11.0609882,12.0539266 11.0413978,12.0734675 L7.18296863,15.9327299 C7.02511502,16.0906579 6.96350588,16.3208033 7.02134876,16.5364726 C7.07919164,16.7521418 7.24769885,16.9205696 7.46339534,16.9783109 C7.67909182,17.0360521 7.90920817,16.9743345 8.06706178,16.8164064 L11.9259076,12.957144 C11.9454485,12.9375536 11.9719814,12.9265437 11.9996514,12.9265437 C12.0273215,12.9265437 12.0538544,12.9375536 12.0733953,12.957144 L15.9322411,16.8164064 C16.1762616,17.060542 16.5719903,17.0606353 16.8161259,16.8166147 C17.0602615,16.5725942 17.0603548,16.1768655 16.8163342,15.9327299 L12.9579051,12.0734675 Z"
fill="#FFFFFF" fill-rule="nonzero"
transform="translate(12.000000, 11.999792) rotate(-315.000000) translate(-12.000000, -11.999792) ">
</path>
</g>
</svg>
</div>
<div class="acl-contextual-popup__cta-label">Add to route</div>
</div>
</div>
<script>
const infoBox = new acl.ACLContextualPopup;
const example = document.querySelector('#acl-example-123')
infoBox.setPopup(example);
</script>
/* No context defined. */
.acl-contextual-popup {
max-width: 258px;
padding: 12px;
background-color: #fff;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
&__header {
display: flex;
}
&__header-title {
font-weight: bold;
width: 100%;
font-size: 14px;
a {
font-weight: bold;
text-decoration: none;
color: black;
}
}
&__header-icon {
max-width: 17px;
margin-right: 10px;
}
&__close {
text-align: right;
cursor: pointer;
}
&__recommended-status {
color: #46ccc2;
}
&__location {
display: flex;
margin: 15px 0;
}
&__location-icon {
margin: 0 5px 0 0;
}
&__location-address {
color: #b1b7cd;
font-size: 12px;
line-height: 17px;
max-width: 198px;
}
&__visit-meta {
display: flex;
justify-content: space-between;
margin: 15px 5px 15px 0;
}
&__visit-meta-last-visit {
color: rgba(40, 136, 214, 0.75);
font-size: 12px;
font-style: italic;
line-height: 17px;
display: flex;
}
&__visit-meta-last-visit-icon {
height: 16px;
margin-right: 5px;
}
&__visit-meta-last-visit-timeframe {
margin-top: 2.5px;
}
&__visit-meta-status {
width: 84px;
text-align: center;
font-size: 12px;
line-height: 17px;
border-radius: 9.5px;
color: #fff;
background-color: #2888d6;
&--blue {
background-color: #2888d6;
}
&--red {
background-color: #ff5a5a;
}
&--orange {
background-color: #ff985a;
}
&--teal {
background-color: #46ccc2;
}
}
&__visit-meta-info {
background-color: #f8f8f8;
color: #2888d6;
font-family: 'Open Sans';
font-size: 12px;
line-height: 17px;
margin: 15px -12px;
padding: 15px;
}
&__contact {
display: flex;
justify-content: space-between;
cursor: pointer;
}
&__contact-info {
display: flex;
margin-bottom: 10px;
}
&__contact-info-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
margin-right: 8px;
color: #b1b7cd;
}
&__contact-info-name {
color: rgba(0, 0, 0, 0.5);
font-size: 14px;
font-weight: 600;
line-height: 23px;
}
&__contact-label {
color: rgba(40, 136, 214, 0.75);
font-size: 12px;
line-height: 23px;
margin-right: 5px;
text-decoration: underline;
}
&__contact-details {
animation: fadeInDown 0.5s;
padding-bottom: 10px;
&--hidden {
display: none;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(10, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(20, 0, 0);
}
}
.fadeInDown {
animation-name: fadeInDown;
}
}
&__contact-email,
&__contact-phone {
display: flex;
color: #b1b7cd;
font-size: 12px;
line-height: 17px;
a {
text-decoration: none;
color: #b1b7cd;
}
}
&__contact-icon {
margin-right: 10px;
}
&__cta {
display: flex;
min-height: 40px;
box-sizing: border-box;
border: 1px solid #2cbcb2;
background-color: #2cbcb2;
margin: 0 -12px -12px -12px;
border-radius: 0 0 4px 4px;
color: #fff;
justify-content: center;
align-items: center;
cursor: pointer;
}
&__cta-icon {
margin-right: 10px;
padding-top: 5px;
}
&__cta-label {
font-size: 14px;
font-weight: 600;
line-height: 19px;
}
}
class ACLContextualPopup {
setPopup(popupEl) {
let popup;
if (typeof popupEl === 'string') {
popup = document.querySelector(popupEl);
} else if (typeof popupEl === 'object') {
popup = popupEl;
} else {
popup = null;
}
if (popup !== null || popup !== undefined) {
const contextualPopUpSelectors = {
contactDetailsClass: '.acl-contextual-popup__contact-details',
contactDetailsHiddenClass: 'acl-contextual-popup__contact-details--hidden',
contactDetailsHeader: '.acl-contextual-popup__contact',
contactDetailsLabel: '.acl-contextual-popup__contact-label',
};
const contextualPopUpDataAttributes = {
open: 'data-open-label',
closed: 'data-closed-label',
};
const contactDetails = popup.querySelector(contextualPopUpSelectors.contactDetailsClass);
const contactDetailsHeader = popup.querySelector(contextualPopUpSelectors.contactDetailsHeader);
const contactDetailsLabel = popup.querySelector(contextualPopUpSelectors.contactDetailsLabel);
if (contactDetails && contactDetailsLabel) {
contactDetailsHeader.addEventListener('click', function() {
contactDetails.classList.toggle(contextualPopUpSelectors.contactDetailsHiddenClass);
const contactDetailsOpenLabelText = contactDetailsLabel.getAttribute(
contextualPopUpDataAttributes.open
);
const contactDetailsClosedLabelText = contactDetailsLabel.getAttribute(
contextualPopUpDataAttributes.closed
);
if (contactDetails.classList.contains(contextualPopUpSelectors.contactDetailsHiddenClass)) {
contactDetailsLabel.innerText = contactDetailsClosedLabelText;
} else {
contactDetailsLabel.innerText = contactDetailsOpenLabelText;
}
});
}
}
}
}
export { ACLContextualPopup };
No notes defined.