geico-design-kit 7.0.0

package/src/components/MakePayment.js

@@ -0,0 +1,397 @@
+import baseComponent from '../../src/baseComponent';
+
+const validateSettings = [
+    {
+        setting                 :   "content",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK Make a Payment : Content must be defined and set to a DOM selector or Node"]
+    }
+];
+
+/**
+ * MakePayment Class
+ */
+class MakePayment{
+    /**
+     * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+     * @param {string|Object} content
+     * A reference to the div form field containing the make payment input node
+     *
+     */
+
+    constructor(options) {
+
+        this._internalVars = {};
+
+        //options with defaults set
+        this._defaults = {};
+
+        // Create options by extending defaults with the passed in arugments
+        if (options && typeof options === "object") {
+            this._options = baseComponent.extendDefaults(this._defaults, options);
+        }
+
+        //if the required options are valid set up the environment
+        if( baseComponent.validateSettings(this._options, validateSettings) ){
+            this._internalVars.contentType = baseComponent.getContentType(this);
+            setLocalVars.call(this);
+            setEvents.call(this);
+        }
+    }
+
+    //Public Methods
+
+    /**
+     * destroy()
+     * removes the node from the dom and any events attached
+     */
+    destroy(){
+        removeEvents.call(this);
+        this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+        //a little garbage collection
+        for (var variableKey in this){
+            if (this.hasOwnProperty(variableKey)){
+                delete this[variableKey];
+            }
+        }
+    }
+
+}
+
+// Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+    Array.prototype.forEach.call(this._internalVars.radios, (radio)=> {
+        radio.addEventListener('change', paymentTypeFieldsDisplay.bind(this));
+    });
+
+    Array.prototype.forEach.call(this._internalVars.paymentAmountRadios, (radio)=> {
+        radio.addEventListener('change', enableDisableOtherAmount.bind(this));
+    });
+
+    this._internalVars.creditCardcarddholderSelect.addEventListener('change', mailingAddressDisplay.bind(this));
+    this._internalVars.checkAccountholderSelect.addEventListener('change', mailingAddressDisplay.bind(this));
+
+    this._internalVars.creditCardcarddholderSelect.addEventListener('change', prefillName.bind(this));
+    this._internalVars.checkAccountholderSelect.addEventListener('change', prefillName.bind(this));
+
+    Array.prototype.forEach.call(this._internalVars.newAddressRadios, (radio)=> {
+        radio.addEventListener('change', newAddressFieldsDisplay.bind(this));
+    });
+
+    if(this._internalVars.nameOnCheckInput) {
+        this._internalVars.nameOnCheckInput.addEventListener('blur', parseFirstName.bind(this));
+    }
+    if(this._internalVars.nameOnCardInput) {
+        this._internalVars.nameOnCardInput.addEventListener('blur', parseFirstName.bind(this));
+    }
+
+    this._internalVars.saveMethodRadio.addEventListener('change', saveMethodFieldDisplay.bind(this));
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    Array.prototype.forEach.call(this._internalVars.radios, (radio)=> {
+        radio.removeEventListener('change', paymentTypeFieldsDisplay.bind(this));
+    });
+
+    Array.prototype.forEach.call(this._internalVars.paymentAmountRadios, (radio)=> {
+        radio.removeEventListener('change', enableDisableOtherAmount.bind(this));
+    });
+
+    this._internalVars.creditCardcarddholderSelect.removeEventListener('change', mailingAddressDisplay.bind(this));
+    this._internalVars.checkAccountholderSelect.removeEventListener('change', mailingAddressDisplay.bind(this));
+
+    Array.prototype.forEach.call(this._internalVars.newAddressRadios, (radio)=> {
+        radio.removeEventListener('change', newAddressFieldsDisplay.bind(this));
+    });
+
+    if(this._internalVars.nameOnCheckInput) {
+        this._internalVars.nameOnCheckInput.removeEventListener('blur', parseFirstName.bind(this));
+    }
+    if(this._internalVars.nameOnCardInput) {
+        this._internalVars.nameOnCardInput.removeEventListener('blur', parseFirstName.bind(this));
+    }
+
+    this._internalVars.saveMethodRadio.removeEventListener('change', saveMethodFieldDisplay.bind(this));
+}
+
+function enableDisableOtherAmount(event) {
+    if (event.target.value === 'other') {
+        this._internalVars.currencyInput.removeAttribute('disabled');
+    } else if (event.target.value !== 'other') {
+        this._internalVars.currencyInput.setAttribute('disabled', 'disabled');
+    }
+}
+
+function paymentTypeFieldsDisplay(event) {
+    //Set variable values for which fields should be displayed
+    let creditCardFieldsDisplay = false,
+        checkFieldsDisplay = false,
+        generalFieldsDisplay = false,
+        saveMethodFieldsDisplay = false;
+
+    this._internalVars.creditCardSelected = false;
+    this._internalVars.checkSelected = false;
+
+    if(event.target.value === 'card') {
+        generalFieldsDisplay = true;
+        creditCardFieldsDisplay = true;
+        checkFieldsDisplay = false;
+        this._internalVars.creditCardSelected = true;
+        this._internalVars.addressFieldLabel.innerHTML = "Cardholder's";
+    }
+
+    if(event.target.value === 'check') {
+        generalFieldsDisplay = true;
+        checkFieldsDisplay = true;
+        creditCardFieldsDisplay = false;
+        this._internalVars.checkSelected = true;
+        this._internalVars.addressFieldLabel.innerHTML = "Account holder's";
+    }
+
+    //Reset values if payment method is changed
+    this._internalVars.creditCardcarddholderSelect.options[0].selected = true;
+    this._internalVars.checkAccountholderSelect.options[0].selected = true;
+
+    Array.prototype.forEach.call(this._internalVars.newAddressRadios, (radio)=> {
+        radio.checked = false;
+    });
+
+    this._internalVars.saveMethodRadio.checked = false;
+
+    toggleFieldDisplay.call(this, creditCardFieldsDisplay, checkFieldsDisplay, generalFieldsDisplay, saveMethodFieldsDisplay);
+}
+
+function toggleFieldDisplay(creditCardFieldsDisplay, checkFieldsDisplay, generalFieldsDisplay, saveMethodFieldsDisplay) {
+    if($(this._internalVars.dynamicAddressField).is(':visible')) {
+        $(this._internalVars.dynamicAddressField).slideUp();
+    }
+    if($(this._internalVars.dynamicNewAddressFields).is(':visible')) {
+        $(this._internalVars.dynamicNewAddressFields).slideUp();
+    }
+    if(generalFieldsDisplay === true) {
+        if($(this._internalVars.dynamicFieldGeneral).is(':hidden')) {
+            $(this._internalVars.dynamicFieldGeneral).slideDown();
+        }
+    } else {
+        if($(this._internalVars.dynamicFieldGeneral).is(':visible')) {
+            $(this._internalVars.dynamicFieldGeneral).slideUp();
+        }
+    }
+    if(creditCardFieldsDisplay === true) {
+        if($(this._internalVars.dynamicCardFields).is(':hidden')) {
+            $(this._internalVars.dynamicCardFields).slideDown();
+        }
+    } else {
+        if($(this._internalVars.dynamicCardFields).is(':visible')) {
+            $(this._internalVars.dynamicCardFields).slideUp();
+        }
+    }
+    if(checkFieldsDisplay === true) {
+        if($(this._internalVars.dynamicCheckFields).is(':hidden')) {
+            $(this._internalVars.dynamicCheckFields).slideDown();
+        }
+    } else {
+        if($(this._internalVars.dynamicCheckFields).is(':visible')) {
+            $(this._internalVars.dynamicCheckFields).slideUp();
+        }
+    }
+    if(saveMethodFieldsDisplay === true) {
+        if($(this._internalVars.dynamicFieldSaveFields).is(':hidden')) {
+            $(this._internalVars.dynamicFieldSaveFields).slideDown();
+        }
+    } else {
+        if($(this._internalVars.dynamicFieldSaveFields).is(':visible')) {
+            $(this._internalVars.dynamicFieldSaveFields).slideUp();
+        }
+    }
+}
+
+function mailingAddressDisplay(event) {
+    let mailingAddressFields = false;
+    if(event.target.value === 'Other Payee') {
+        mailingAddressFields = true;
+    }
+    toggleMailingAddressFieldDisplay.call(this, mailingAddressFields);
+}
+
+function prefillName(event) {
+    let addressLabel;
+    if (this._internalVars.checkSelected === true) {
+        addressLabel = "Account holder's";
+    } else if (this._internalVars.creditCardSelected === true) {
+        addressLabel = "Cardholder's";
+    }
+    if(event.target.value !== 'Other Payee' && event.target.value !== 'Please Select') {
+        let value;
+        for (var i = 0; i < event.target.length; i++) {
+            if(event.target.options[i].value === event.target.value) {
+                value = event.target.options[i].text;
+            }
+        }
+        if (this._internalVars.creditCardSelected === true) {
+            this._internalVars.nameOnCardInput.value = value;
+        } else if (this._internalVars.checkSelected === true) {
+            this._internalVars.nameOnCheckInput.value = value;
+        }
+    } else {
+        this._internalVars.nameOnCardInput.value = '';
+        this._internalVars.nameOnCheckInput.value = '';
+        this._internalVars.addressFieldLabel.innerHTML = addressLabel;
+    }
+}
+
+function toggleMailingAddressFieldDisplay(mailingAddressFields) {
+    if(mailingAddressFields === true) {
+        if($(this._internalVars.dynamicAddressField).is(':hidden')) {
+            $(this._internalVars.dynamicAddressField).slideDown();
+        }
+    } else {
+        if($(this._internalVars.dynamicAddressField).is(':visible')) {
+            $(this._internalVars.dynamicAddressField).slideUp();
+        }
+    }
+}
+
+function newAddressFieldsDisplay(event) {
+    let newAddressFields = false;
+    if(event.target.value === 'new') {
+        newAddressFields = true;
+    }
+    toggleNewAddressFieldsDisplay.call(this, newAddressFields);
+}
+
+function toggleNewAddressFieldsDisplay(newAddressFields) {
+    if(newAddressFields === true) {
+        if($(this._internalVars.dynamicNewAddressFields).is(':hidden')) {
+            $(this._internalVars.dynamicNewAddressFields).slideDown();
+        }
+    } else {
+        if($(this._internalVars.dynamicNewAddressFields).is(':visible')) {
+            $(this._internalVars.dynamicNewAddressFields).slideUp();
+        }
+    }
+}
+
+function parseFirstName(event) {
+    let nameField,
+        addressLabel;
+    if (this._internalVars.checkSelected === true) {
+        nameField = this._internalVars.nameOnCheckInput;
+        addressLabel = "Account holder's";
+    } else if (this._internalVars.creditCardSelected === true) {
+        nameField = this._internalVars.nameOnCardInput;
+        addressLabel = "Cardholder's";
+    }
+    if (nameField.value.length > 0) {
+        let firstName = event.target.value.split(" ")[0];
+        if (firstName.slice(-1) === 's' || firstName.slice(-1) === 'S') {
+            this._internalVars.addressFieldLabel.innerHTML = firstName + "'";
+        } else {
+            this._internalVars.addressFieldLabel.innerHTML = firstName + "'s";
+        }
+
+    } else {
+        this._internalVars.addressFieldLabel.innerHTML = addressLabel;
+    }
+}
+
+function saveMethodFieldDisplay(event) {
+    if(event.target.checked === true) {
+        if($(this._internalVars.dynamicFieldSaveFields).is(':hidden')) {
+            $(this._internalVars.dynamicFieldSaveFields).slideDown();
+        }
+    } else {
+        if($(this._internalVars.dynamicFieldSaveFields).is(':visible')) {
+            $(this._internalVars.dynamicFieldSaveFields).slideUp();
+        }
+    }
+}
+
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+    //determine the type of content passed in
+    if(this._internalVars.contentType === 'string'){
+        this._internalVars.node = document.querySelector(this._options.content);
+    }else if(this._internalVars.contentType === 'domNode'){
+        this._internalVars.node = this._options.content;
+    }
+
+    this._internalVars.makePaymentFields = this._internalVars.node;
+
+    this._internalVars.paymentAmountID = 'payment-amount';
+    this._internalVars.paymentAmountFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.paymentAmountID);
+    this._internalVars.paymentAmountRadios = this._internalVars.paymentAmountFields.querySelectorAll("input[type='radio']");
+
+    this._internalVars.currencyInputClass = 'currency-input';
+    this._internalVars.currencyInput = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.currencyInputClass);
+
+    this._internalVars.paymentMethodID = 'payment-method-selection';
+    this._internalVars.paymentMethodFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.paymentMethodID);
+    this._internalVars.radios = this._internalVars.paymentMethodFields.querySelectorAll('input');
+
+    this._internalVars.dynamicFieldCheckClass = 'dynamic-fields-check';
+    this._internalVars.dynamicCheckFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldCheckClass);
+
+    this._internalVars.dynamicFieldCardClass = 'dynamic-fields-card';
+    this._internalVars.dynamicCardFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldCardClass);
+
+    this._internalVars.dynamicFieldGeneralClass = 'dynamic-fields-general';
+    this._internalVars.dynamicFieldGeneral = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldGeneralClass);
+
+    this._internalVars.creditCardCardholderID = 'cardholder-credit-card';
+    this._internalVars.creditCardCardholderField = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.creditCardCardholderID);
+    this._internalVars.creditCardcarddholderSelect = this._internalVars.creditCardCardholderField.querySelector('select');
+
+    this._internalVars.checkAccountholderID = 'accountholder-check';
+    this._internalVars.checkAccountholderField = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.checkAccountholderID);
+    this._internalVars.checkAccountholderSelect = this._internalVars.checkAccountholderField.querySelector('select');
+
+    this._internalVars.nameOnCheckID = 'name-on-check';
+    if(this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCheckID)) {
+        this._internalVars.nameOnCheckFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCheckID);
+        this._internalVars.nameOnCheckInput = this._internalVars.nameOnCheckFields.querySelector('input');
+    }
+
+    this._internalVars.nameOnCardID = 'name-credit-card';
+    if(this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCardID)) {
+        this._internalVars.nameOnCardFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.nameOnCardID);
+        this._internalVars.nameOnCardInput = this._internalVars.nameOnCardFields.querySelector('input');
+    }
+
+    this._internalVars.dynamicFieldAddressClass = 'dynamic-fields-address';
+    this._internalVars.dynamicAddressField = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldAddressClass);
+
+    this._internalVars.addressFieldNameLabelID = 'address-name';
+    this._internalVars.addressFieldLabel = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.addressFieldNameLabelID);
+
+    this._internalVars.newAddressID = 'address';
+    this._internalVars.newAddressFields = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.newAddressID);
+    this._internalVars.newAddressRadios = this._internalVars.newAddressFields.querySelectorAll('input');
+
+    this._internalVars.dynamicFieldNewAddressClass = 'dynamic-fields-new-address';
+    this._internalVars.dynamicNewAddressFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldNewAddressClass);
+
+    this._internalVars.saveMethodId = 'save-method';
+    this._internalVars.saveMethodField = this._internalVars.makePaymentFields.querySelector('#' + this._internalVars.saveMethodId);
+    this._internalVars.saveMethodRadio = this._internalVars.saveMethodField.querySelector('input');
+
+    this._internalVars.dynamicFieldSaveClass = 'dynamic-fields-save-method';
+    this._internalVars.dynamicFieldSaveFields = this._internalVars.makePaymentFields.querySelector('.' + this._internalVars.dynamicFieldSaveClass);
+}
+
+export default MakePayment;

package/src/components/Modal.js

@@ -0,0 +1,279 @@
+import * as utils from '../../src/utils';
+import baseComponent from '../../src/baseComponent';
+import UserAgentService from '../../src/services/UserAgentService';
+
+let PromiseIE = require('es6-promise-polyfill').Promise;
+
+const validateSettings = [
+    {
+        setting                 :   "content",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK Modal : Content must be defined and set to a DOM selector or Node"]
+    },
+    {
+        setting                 :   "autoShow",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["boolean"],
+        errorMessage            :   ["GDK Modal : autoShow must be a boolean"]
+    },
+    {
+        setting                 :   "overlayShouldCloseModal",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["boolean"],
+        errorMessage            :   ["GDK Modal : overlayShouldCloseModal must be a boolean"]
+    },
+    {
+        setting                 :   "hideCloseButton",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["boolean"],
+        errorMessage            :   ["GDK Modal : hideCloseButton must be a boolean"]
+    },
+    {
+        setting                 :   "onOpened",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["function"],
+        errorMessage            :   ["GDK Modal : onOpened must be a function"]
+    },
+    {
+        setting                 :   "onClosed",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["function"],
+        errorMessage            :   ["GDK Modal : onClosed must be a function"]
+    }
+
+];
+
+
+const modalCloseBtn = '<button class="btn-close icon-close" type="button" aria-label="Close modal"></button>';
+
+
+class Modal{
+    /**
+     * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+     * @param {string|Object} content
+     * A reference to the modal node
+     *
+     * @param {boolean} [autoShow=false]
+     * Use if you want to model to auto show when instantiated
+     *
+     * @param {boolean} [overlayShouldCloseModal=true]
+     * Set to false if you do not want the overlay to have click to close functionality
+     *
+     * @param {boolean} [hideCloseButton=false]
+     * Set to true if you want to hide the close button in the upper right corner of the modal
+     *
+     * @param {function} [onOpened]
+     * A callback function that gets fired when the modal has been opened
+     *
+     * @param {function} [onClosed]
+     * A callback function that gets fired when the modal has been closed
+     *
+     */
+    constructor(options) {
+
+        this._internalVars = {
+            node: null,//used for current node
+            closeBtn : null
+        };
+
+        //options with defaults set
+        this._defaults = {
+            autoShow : false,
+            overlayShouldCloseModal : true,
+            hideCloseButton : false
+        };
+
+        // Create options by extending defaults with the passed in arugments
+        if (options && typeof options === "object") {
+            this._options = baseComponent.extendDefaults(this._defaults, options);
+        }
+
+        //if the required options are valid set up the environment
+        if( baseComponent.validateSettings(this._options, validateSettings) ){
+            this._internalVars.contentType = baseComponent.getContentType(this);
+            setLocalVars.call(this);
+            buildModal.call(this);
+            setEvents.call(this);
+
+            if(this._options.autoShow){
+                this.show();
+            }
+        }
+
+    }
+
+    //Public Methods
+
+    /**
+    * show()
+    * shows the modal
+    */
+    show(){
+
+        this._internalVars.node.style.display = "block";
+
+        setTimeout( ()=> {
+            this._internalVars.node.classList.add("modal--show");
+            if(this._options.onOpened)
+                this._options.onOpened();
+        }, 10);
+        this._internalVars.inModalArray = [];
+        document.addEventListener('keyup', this._internalVars.modalTabHandler);
+
+    }
+
+    /**
+    * hide()
+    * hides the modal
+    */
+    hide(duration = 500){
+        this._internalVars.inModalArray = [];
+        document.removeEventListener('keyup', this._internalVars.modalTabHandler);
+
+        return new PromiseIE((resolve, reject) => {
+            setTimeout( ()=> {
+                this._internalVars.node.classList.remove("modal--show");
+                this._internalVars.node.style.display = "none";
+                if(this._options.onClosed)
+                    this._options.onClosed();
+                resolve();
+            }, duration);
+        });
+    }
+
+    /**
+    * destroy()
+    * removes the node from the dom and any events attached
+    */
+    destroy(){
+        removeEvents.call(this);
+        this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+        //a little garbage collection
+        for (var variableKey in this){
+            if (this.hasOwnProperty(variableKey)){
+                delete this[variableKey];
+            }
+        }
+    }
+
+}
+
+
+/**
+* setLocalVars()
+* set all the local vars to passed in options
+*/
+function setLocalVars() {
+    //determine the type of content passed in
+    if(this._internalVars.contentType === 'string'){
+        this._internalVars.node = document.querySelector(this._options.content);
+    }else if(this._internalVars.contentType === 'domNode'){
+        this._internalVars.node = this._options.content;
+    }
+
+    this._internalVars.modalTabHandler = isolateTab.bind(this);
+}
+
+
+/**
+* modalClicked()
+* Gets fired when you click anywhere on a model
+*/
+function modalClicked(e) {
+
+    //NodeList of items that the mouse is currently over in document order.
+    //The last element in the NodeList is the most specific, each preceding
+    //one should be a parent, grandparent, and so on.
+    let nodes = document.querySelectorAll( ":hover" );
+
+    if(this._internalVars.node == nodes[nodes.length- 1]){
+        this.hide();
+    }
+
+
+}
+
+/**
+ * setEvents()
+ * Sets all the events needed for this component
+ */
+function setEvents() {
+
+    const eventName = UserAgentService._clickEventName();
+
+    if(this._options.overlayShouldCloseModal){
+        this._internalVars.node.addEventListener(eventName, modalClicked.bind(this) );
+    }
+
+    if(this._options.hideCloseButton){
+        this._internalVars.closeBtn.classList.add("hidden");
+    }
+    else {
+        this._internalVars.closeBtn.addEventListener(eventName, this.hide.bind(this) );
+    }
+
+
+
+
+
+}
+
+/**
+ * removeEvents()
+ * removes all events from this component
+ */
+function removeEvents() {
+
+    const eventName = UserAgentService._clickEventName();
+    
+    if(this._options.overlayShouldCloseModal){
+        this._internalVars.node.removeEventListener(eventName, modalClicked.bind(this) );
+    }
+    this._internalVars.closeBtn.removeEventListener(eventName, this.hide.bind(this) );
+}
+
+
+
+
+/**
+* buildModal()
+* Adds needed markup this component
+*/
+function buildModal() {
+    let modalContentDom = this._internalVars.node.querySelector(".modal-container");
+    modalContentDom.insertAdjacentHTML('afterBegin', modalCloseBtn);
+
+    this._internalVars.closeBtn = this._internalVars.node.querySelector(".btn-close");
+
+    let spanTab = document.createElement('span');
+    spanTab.setAttribute('tabindex', '0');
+    spanTab.setAttribute('class', 'tab-filler');
+    let cloneSpanTab = spanTab.cloneNode(true);
+    modalContentDom.appendChild(spanTab);
+    modalContentDom.insertBefore(cloneSpanTab, modalContentDom.children[0]);
+}
+
+function isolateTab(e){
+    if(e.keyCode == 9 || (e.keyCode == 9 && e.shiftKey)){
+        if (utils.isChild("modal", document.activeElement) && !document.activeElement.classList.contains('tab-filler') && !this._internalVars.inModalArray.includes(document.activeElement)) {
+            this._internalVars.inModalArray.push(document.activeElement);
+        }
+
+        if (document.activeElement.classList.contains('tab-filler')) {
+            if (this._internalVars.inModalArray.length > 0) {
+                this._internalVars.inModalArray[0].focus();
+            }
+        }
+    }
+}
+
+
+export default Modal;