Modal Base: Import Beneficiaire Empty State

See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)

Refer to modal frame found in view tab for complete structure without content.

A modal's default size is 640px

Modifier classes for modals

  • modal-sm: 480px
  • modal-md: 720px (mainly used for modals containing images)
  • modal-lg: 896px
  • modal-xl: 1120px

Content loading

A modal with a content loading component behaves as follows:

  • It has a second body element with the -isLoading class that is hidden by default, and shown only when ...
  • ... the -contentLoading modifier is applied to the modal element ...
  • ... which in turn hides the regular modal body element which into which the content is injected
<div class="sds-modal modal fade -bodySecondary06" id="importBeneficiaire" data-backdrop="static" aria-labelledby="importBeneficiaireTitle" aria-modal="true" role="dialog" tabindex="-1">
    <div class="sds-modal__dialog modal-dialog modal-lg modal-xl modal-dialog-scrollable modal-dialog-centered">
        <div class="sds-modal__content modal-content">

            <div class="sds-modal__header modal-header">

                <div class="sds-modal__title modal-title" id="importBeneficiaireTitle">Copier mes bénéficiaires depuis S-Net Privé</div>

            </div>

            <div class="sds-modal__body modal-body">

                <div class="sds-stackXl d-flex flex-column h-100">
                    <div class="sds-message sds-stackMd">
                        <div class="sds-message__header">

                            <span class="sds-icon sds-icon-infocirclefill"></span>

                            <div class="sds-message__iconAlign">

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa cumque debitis dicta ducimus fugiat fugit maiores modi molestiae officiis provident quis, quos ratione sapiente sunt tempora temporibus unde veniam!</p>

                            </div>
                        </div>

                    </div>
                    <div class="sds-box -insetLg position-relative overflow-hidden">
                        <div class="row col-separator h-100 overflow-hidden">
                            <div class="col-12 col-md-6 h-100">
                                <div class="h-100 sds-overflowAutoBlock row">
                                    <div class="col-12">
                                        <div class="sds-actionsList -stickyHeading -stickyHeadingTop">
                                            <div class="sds-actionsList__heading">
                                                <div class="sds-actionsList__title">
                                                    <div class="h3">Vos bénéficiaires privés</div>
                                                    <div class="sds-actionsList__meta sds-fontBase sds-textRegular sds-textHelper">convention S-Net XYZABCDEF</div>
                                                </div>
                                                <button type="button" class="sds-btn -btnSecondary">

                                                    <span class="sds-icon sds-icon-copy"></span>

                                                    <span class="sds-btn__text">
                                                        Copier Tout

                                                    </span>

                                                </button>
                                            </div>
                                            <div class="sds-actionsList__body">
                                                <div class="sds-input -search -hasIcon">
                                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                                    <div class="sds-input__searchActions">
                                                        <div class="sds-input__clearBtn">
                                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                                <span aria-hidden="true" class="sds-icon sds-icon-close"></span>

                                                            </button>
                                                        </div>
                                                        <div class="sds-input__searchBtn">
                                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                                <span class="sds-btn__text">
                                                                    Rechercher

                                                                </span>

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

                                                    <div class="sds-input__iconLeft">
                                                        <span class="sds-icon sds-icon-search"></span>
                                                    </div>

                                                </div>
                                                <ul class="sds-stackSm list-unstyled">

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                    <li class="sds-actionsList__bodyItem">
                                                        <div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">

                                                            <div class="sds-avatar centeredBgi -avatarMd -userBank">

                                                                <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                                                <span class="sds-avatar__circle">

                                                                    <img src="../../media/logos/logo-spuerkeess.png" alt="">

                                                                </span>

                                                            </div>
                                                            <div class="sds-listItem__text">
                                                                <div class="sds-listItem__textMain">A-Part</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">LU55 0030 0566 9076 0000</div>
                                                                <div class="sds-listItem__textMeta sds-textHelper">Banque &amp; Caisse d&#39;Epargne de l&#39;Etat</div>
                                                            </div>

                                                            <div class="sds-listItem__rightContent">
                                                                <button type="button" class="sds-btn -btnSecondary">

                                                                    <span class="sds-icon sds-icon-copy"></span>

                                                                    <span class="sds-btn__text">
                                                                        Copier

                                                                    </span>

                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 h-100">
                                <div class="h-100 sds-overflowAutoBlock row">
                                    <div class="col-12">
                                        <div class="sds-actionsList -stickyHeading -stickyHeadingTop h-100">
                                            <div class="sds-actionsList__heading">
                                                <div class="sds-actionsList__title">
                                                    <div class="h3">Bénéficiaires Société XY</div>
                                                    <div class="sds-actionsList__meta sds-fontBase sds-textRegular sds-textHelper">convention S-Net XYZABCDEF</div>
                                                </div>
                                            </div>
                                            <div class="sds-actionsList__body">
                                                <div class="sds-box -boxInsetLg -boxSunken d-flex h-100">

                                                    <div class="sds-emptyState">

                                                        <span class="sds-emptyState__icon sds-icon sds-icon-list" aria-hidden="true"></span>

                                                        <div class="sds-emptyState__textBlock sds-stackXxs">

                                                            <p class="sds-emptyState__text sds-textSemiBold">Veuillez séléctionner les bénéficiaires que vous souhaitez copier ou déplacer dans votre espace professionnel.</p>

                                                        </div>

                                                    </div>

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

            </div>

            <div class="sds-modal__footer modal-footer">

                <ul class="sds-btnGroup">
                    <li>
                        <button type="button" class="sds-btn -btnSecondary -btnInverse" data-dismiss="modal">

                            <span class="sds-btn__text">
                                Pas maintenant

                            </span>

                        </button>
                    </li>
                    <li>
                        <button type="button" class="sds-btn -btnPrimary">

                            <span class="sds-btn__text">
                                Valider

                            </span>

                        </button>
                    </li>
                </ul>

            </div>

        </div>
    </div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
    <div class="{{ namespace }}modal__title modal-title" id="{{ modalTitleID }}">{{ title }}</div>
{% endblock %}
{% block body %}
    <div class="{{ namespace }}stackXl d-flex flex-column h-100">
        {% render '@message' %}
        <div class="{{ namespace }}box -insetLg position-relative overflow-hidden">
			<div class="row col-separator h-100 overflow-hidden">
                <div class="col-12 col-md-6 h-100">
					<div class="h-100 {{ namespace }}overflowAutoBlock row">
						<div class="col-12">
							<div class="{{ namespace }}actionsList -stickyHeading -stickyHeadingTop">
								<div class="{{ namespace }}actionsList__heading">
									<div class="{{ namespace }}actionsList__title">
										<div class="h3">Vos bénéficiaires privés</div>
										<div class="{{ namespace }}actionsList__meta {{ namespace }}fontBase {{ namespace }}textRegular {{ namespace }}textHelper">convention S-Net XYZABCDEF</div>
									</div>
									{% render '@btn-secondary--icon-left', {text: "Copier Tout", icon: "icon-copy"}, true %}
								</div>
								<div class="{{ namespace }}actionsList__body">
									{% render "@input--search" %}
									<ul class="{{ namespace }}stackSm list-unstyled">
										{% for i in range(0, 8) %}
											<li class="{{ namespace }}actionsList__bodyItem">
												{% render '@snet-list-item--user-bank-btn',{
													text: "A-Part",
													helperText: "LU55 0030 0566 9076 0000",
													helperTextTwo: "Banque & Caisse d'Epargne de l'Etat"
												}, true %}
											</li>
										{% endfor %}
									</ul>
								</div>
							</div>
						</div>
					</div>
                </div>
                <div class="col-12 col-md-6 h-100">
					<div class="h-100 {{ namespace }}overflowAutoBlock row">
						<div class="col-12">
							<div class="{{ namespace }}actionsList -stickyHeading -stickyHeadingTop h-100">
								<div class="{{ namespace }}actionsList__heading">
									<div class="{{ namespace }}actionsList__title">
										<div class="h3">Bénéficiaires Société XY</div>
										<div class="{{ namespace }}actionsList__meta {{ namespace }}fontBase {{ namespace }}textRegular {{ namespace }}textHelper">convention S-Net XYZABCDEF</div>
									</div>
								</div>
								<div class="{{ namespace }}actionsList__body">
									<div class="{{ namespace }}box -boxInsetLg -boxSunken d-flex h-100">
										{% render "@empty-state",{
											icon: "icon-list",
											text: "Veuillez séléctionner les bénéficiaires que vous souhaitez copier ou déplacer dans votre espace professionnel.",
											button: false
										},true %}
									</div>
								</div>
							</div>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block footer %}
    <ul class="{{ namespace }}btnGroup">
		<li>
			{% render "@btn-secondary-inverse", {
				text: "Pas maintenant",
				attrs: {
					"data-dismiss": "modal"
				}
			} ,true %}
		</li>
		<li>
			{% render "@btn-primary",{text: "Valider"},true %}
		</li>
    </ul>
{% endblock %}
  • Content:
    export default class ModalTrap {
    	constructor() {
    
    		// select all modals with the dialog role and modal classe.
    		// this ensures that only modals with the right attributes are selected
    		this.modals = document.querySelectorAll("[role='dialog'].modal");
    
    		// select all modal trigger buttons that don't have a data-dismiss attribute
    		// buttons with data-dismiss and data-toggle are typically only used within modals to trigger another modal
    		// we want to exclude these from the selection
    		this.modalToggles = document.querySelectorAll("[data-toggle='modal']:not([data-dismiss='modal'])");
    
    		// list of focusable elements inside a modal
    		this.focusableElements = [
    			"a[href]",
    			"button:not([disabled])",
    			"textarea:not([disabled])",
    			"input:not([disabled])",
    			"select:not([disabled])",
    			"[tabindex]:not([tabindex='-1'])"
    		];
    
    		// this will ensure that any modal with the dialog-scrollable modifier gets the intended behaviour
    		// all other modals will get ignored
    		this.modalScrollBody = ".modal-dialog-scrollable .modal-body"
    
    		// modal trigger element with same data-target value as id of triggered modal
    		this.modalTriggerElement = null;
    
    		// Used to store keydown handlers per modal
    		this.focusHandlers = new WeakMap();
    		this.init();
    
    	}
    
    	init() {
    
    		// loop over all modal trigger buttons
    		this.modalToggles.forEach(btn => {
    
    			// if data target value is erroneous or doesn't match any modal ID, return false
    			const targetSelector = btn.getAttribute('data-target');
    			if ((targetSelector === "#") || (!targetSelector)) return;
    
    			// on modal trigger interaction, set the modal trigger element's value to that of its DOM representation
    			// and store it
    			btn.addEventListener('click', (e) => {
    				e.preventDefault();
    				this.modalTriggerElement = e.target;
    			});
    
    		});
    
    		// loop over all modals
    		this.modals.forEach(modal => {
    
    			const closeBtn = modal.querySelector('.sds-modal__close');
    
    			// when a modal shown event is fired:
    			$(modal).on('shown.bs.modal', (e) => {
    
    				// check if a close button exists and focus it if so
    				if (closeBtn) {
    					closeBtn.focus();
    				}
    				else {
    
    					// if no close is present focus first focusable element instead
    					let focusableElements = this.getFocusableElements(modal);
    					let first = focusableElements[0];
    
    					first.focus()
    
    				}
    
    				// check for a scrollable body element inside the modal
    				// set focus trap inside modal while open
    				this.checkScrollabilityAndSetFocusTrap(modal);
    
    				/*
    				 * if the modal gets shown through the bootstrap method instead of
    				 * through a trigger element interaction, store the value of the trigger element
    				 * so it can be focused when closing the modal
    				 *
    				 * this will ensure that no matter how the modal is shown,
    				 * there's always an element to put the focus back on when closed
    				 *
    				 * closing a modal after navigating from modal to modal will also put the focus back on
    				 * the initial modal trigger element or corresponding modal's trigger element, if applicable
    				 * for this purpose, modal trigger elements inside modals that have the data-dismiss="modal" attribute are ignored
    				 */
    
    				let lastFocusedElement = document.querySelector("[data-toggle='modal']:not([data-dismiss='modal'])[data-target='#"+ e.target.getAttribute("id") +"']");
    
    				if (lastFocusedElement) {
    					this.modalTriggerElement = lastFocusedElement;
    				}
    
    			});
    
    			$(modal).on('hidden.bs.modal', (e) => {
    
    				// if it exists focus the modal's trigger element upon closing the modal
    				if (this.modalTriggerElement) {
    					this.modalTriggerElement.focus();
    				}
    			});
    
    		});
    	}
    
    	checkScrollabilityAndSetFocusTrap(modal) {
    
    		const modalBodySelector = this.modalScrollBody;
    
    		// check if the modal scrollable modifier is applied to the current modal
    		// if not, the last element to receive focus will be the modal itself
    		const modalBody = modal.querySelector(modalBodySelector) ? modal.querySelector(modalBodySelector) : modal;
    
    		// add or remove tabindex depending on whether the modal body area is scrollable
    		function setScrollability () {
    
    			const isScrollable = modalBody.scrollHeight > modalBody.clientHeight;
    
    			if (isScrollable) {
    				// Ensure it's focusable
    				if (!modalBody.hasAttribute('tabindex')) {
    					modalBody.setAttribute('tabindex', '0');
    				}
    			} else {
    				if (modalBody.hasAttribute('tabindex')) {
    					modalBody.removeAttribute('tabindex');
    				}
    			}
    
    		}
    
    		// check if modal body is scriollable or not on page load
    		setScrollability();
    		// Initial trap
    		this.trapFocus(modal);
    
    		// Observe scrollability changes
    		const observer = new ResizeObserver(() => {
    			// check if modal body becomes scrollable on resize
    			setScrollability();
    			this.trapFocus(modal);
    		});
    
    		// Required to detect resizing/scrollability
    		observer.observe(modalBody);
    	}
    
    	// trap the kesyboard focus navigfation inside the modal while it is shown
    	trapFocus(modal) {
    
    		const focusable = this.getFocusableElements(modal);
    
    		// abort if no focusable elements are found inside modal
    		if (!focusable.length) return;
    
    		// define first and last focusable elements inside modal
    		const first = focusable[0];
    		const last = focusable[focusable.length - 1];
    
    		// Remove old handler if exists
    		if (this.focusHandlers.has(modal)) {
    			modal.removeEventListener('keydown', this.focusHandlers.get(modal));
    		}
    
    		// move focus from first to last and vice-versa when using tab or shift+tab
    		const handleKeydown = (e) => {
    			if (e.key !== 'Tab') return;
    
    			if (e.shiftKey && document.activeElement === first) {
    				e.preventDefault();
    				last.focus();
    			} else if (!e.shiftKey && document.activeElement === last) {
    				e.preventDefault();
    				first.focus();
    			}
    		};
    
    		modal.addEventListener('keydown', handleKeydown);
    		this.focusHandlers.set(modal, handleKeydown);
    	}
    
    	// function to get list of focusable elements in modal
    	getFocusableElements(container) {
    
    		// stringify list of focusable element to pass it to querySelectorAll
    		const selector = this.focusableElements.join();
    		return container.querySelectorAll(selector);
    
    	}
    }
  • URL: /components/raw/snet-modal-base/ModalTrap.js
  • Filesystem Path: components/snet/organisms/modal/modal-base/ModalTrap.js
  • Size: 6.1 KB