Lead-times

      
        
      

    
    
    <div class="m-popup p-lead-times">
        <div class="m-popup__content">
            <div class="m-popup__header">
                <span class="m-popup__close icon-close"></span>
                
    <h3 class="p-lead-times__title a-typography__no-decoration"><!-- text --></h3>
    <p class="p-lead-times__sub-title"><!-- text -->
        <a class="p-lead-times__sub-title__link" href="<!-- url -->" target="_blank"><!-- text --></a>
    </p>

            </div>
            <div class="m-popup__body">
                

    <div class="p-lead-times__body-container">
        <div class="p-lead-times__content-desktop u-tablet-hide">
            <div class="p-lead-times__content-header l-grid">
                <div class="l-grid__col-6-12"></div>
                <div class="p-lead-times__first-order-date l-grid__col-3-12"><!-- text --></div>
                <div class="p-lead-times__second-order-date l-grid__col-3-12"><!-- text --></div>
            </div>
            <div class="p-lead-times__body-content">
                
                <div class="p-lead-times__product-manufacturing-group l-grid">
                    <div class="p-lead-times__products l-grid__col-6-12">
                        
	<ul class="a-list p-lead-times__product-list">
    	
    		<li class="a-list__item ">
			
    				<!-- text -->
			
			</li>
    	

    </ul>

                    </div>

                    <div class="p-lead-times__date-container l-grid__col-3-12">
                        <div class="p-lead-times__order-date">
                            <p class="p-lead-times__order-day"><!-- text --></p>
                            <p class="p-lead-times__order-month"><!-- text --></p>
                        </div>
                        <p class="p-lead-times__legal"></p>
                    </div>
                    <div class="p-lead-times__date-container l-grid__col-3-12">
                        <div class="p-lead-times__order-date">
                            <p class="p-lead-times__order-day"><!-- text --></p>
                            <p class="p-lead-times__order-month"><!-- text --></p>
                        </div>
                        <p class="p-lead-times__legal"></p>
                    </div>

                </div>
                
            </div>
        </div>
        <div class="p-lead-times__content-mobile u-tablet-show">
            <div class="p-lead-times__mobile-header"></div>
            
            <div class="p-lead-times__order-period m-collapsable">
                <div class="p-lead-times__order-period__header icon-arrow-down m-collapsable__title">
                    <p class="p-lead-times__order-period__title"><!-- text --></p>
                </div>
                <div class="p-lead-times__order-period__content m-collapsable__content">
                    <p class="p-lead-times__order-period__sub-title"><!-- text --></p>
                    <div>
                        
                            <div class="p-lead-times__product-manufacturing-group l-grid">
                                <div class="p-lead-times__products l-grid__col-10-12">
                                    
	<ul class="a-list p-lead-times__product-list">
    	
    		<li class="a-list__item ">
			
    				<!-- text -->
			
			</li>
    	

    </ul>

                                </div>
                                <div class="p-lead-times__date-container l-grid__col-2-12">
                                    <div class="p-lead-times__order-date">
                                    
                                        <p class="p-lead-times__order-day"><!-- text --></p>
                                        <p class="p-lead-times__order-month"><!-- text --></p>
                                    
                                    </div>
                                    <p class="p-lead-times__legal"></p>
                                </div>
                            </div>
                        
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div class="p-lead-times__legal-info">
            
	<ul class="a-list p-lead-times__legal-info-list">
    	
    		<li class="a-list__item ">
			
    				<!-- text -->
			
			</li>
    	

    </ul>

        </div>
    </div>

            </div>
            <div class="m-popup__footer">
                
    <div class="p-lead-times__button-container">
        
    <button class="a-button a-button--icon-after icon-arrow-right p-lead-times__close"><!-- text --></button>

    </div>

            </div>
        </div>
    </div>



    @DEVELOPER: THIS IS THE JS SCRIPT FOR THE POPUP

    
    <script type="text/javascript">
        "use strict"

        window.addEventListener("load", () => {
            const collapseContainer = document.getElementsByClassName("m-collapsable");
            const isCollapseOpen = document.getElementsByClassName("is-collapse-open");
            const popup = document.getElementsByClassName("m-popup")[0];
            //close popup button
            const popupCloseButton = document.getElementsByClassName("p-lead-times__close")[0];
            const htmlTag = document.getElementsByTagName("html")[0];
            const bodyTag = document.getElementsByTagName("body")[0];
            
            for(let i = 0; i < collapseContainer.length; i ++) {
                collapseContainer[i].addEventListener("click", () => {
                    if(popupContent.classList.contains("is-popup-centered") && isCollapseOpen.length === 0){
                        popupContent.classList.remove("is-popup-centered");
                        popup.style.overflow = "hidden";
                    }
                    else if(!popupContent.classList.contains("is-popup-centered") && isCollapseOpen.length > 0) {
                        popupContent.classList.add("is-popup-centered");
                        popup.style.overflow = "auto";
                    }
                });      
            }

            // close popup clickhandler
            popupCloseButton.addEventListener("click", () => { 
                popup.classList.toggle("is-popup-open");

                htmlTag.classList.toggle("u-no-scroll");
                bodyTag.classList.toggle("u-no-scroll");
            });
        });
    </script>