{"version":3,"sources":["webpack:///./widgets/menu/index.ts"],"names":["dropdownToggle","selectors","setWrapper","wrapper","this","initElements","initialize","elements","addEventListeners","length","customToggleFunction","window","innerWidth","xl","document","querySelectorAll","forEach","dropdown","setDropdownObserver","adjustDropdownPosition","addEventListener","nextElementSibling","isOutsideViewport","element","getBoundingClientRect","right","top","style","left","parentElement","clientWidth","e","el","nextMenuSibling","classList","toggle","parent","offsetParent","closest","contains","shownMenu","child","remove","getParents","offsetTop","offsetWidth","stopPropagation","selector","parents","body","matches","push","onHideFunction","onShowFunction","MutationObserver","mutations","mutation","target","observe","attributes","attributeOldValue","attributeFilter","Menu","Selectors","Elements","ClassList","Texts","HTMLElement"],"mappings":"6rCAKA,+B,+CAAiC,OAAb,WAAa,MAAjC,CAAoB,KAEpB,mC,+CAAqC,OAAb,eAAa,UAArC,CAAwB,KAExB,iF,OACI,EAAAA,eAAiB,mC,EACrB,OAFwB,eAExB,UAFA,CAAwB,KAIxB,cAII,kBAAYC,GAAZ,MACI,YAAMA,GAAW,IAAM,K,OAJ3B,EAAAD,eAA+C,IAAI,I,EAevD,OAhBuB,cAQnB,mBAAAE,WAAA,SAAWC,GACPC,KAAKD,QAAUA,EACfC,KAAKC,gBAGT,mBAAAA,aAAA,WACID,KAAKJ,eAAiB,YAAiBI,KAAKH,UAAUD,eAAgBI,KAAKD,UAEnF,SAhBA,CAAuB,KAqBvB,aAEI,cAAqBA,GAAA,KAAAA,UAmIzB,OAjII,eAAAG,WAAA,WACIF,KAAKG,SAASL,WAAWE,KAAKD,SAC9BC,KAAKI,qBAGT,eAAAA,kBAAA,sBACOJ,KAAKG,SAASP,eAAeS,QAC5BL,KAAKM,uBAGLC,OAAOC,YAAc,IAAqBC,KAC1CC,SAASC,iBAAiB,kBAAkBC,SAAQ,SAACC,GACjD,EAAKC,oBAAoBD,GAAU,eAChC,WACC,EAAKE,uBAAuBF,SAIpCH,SAASC,iBAAiB,oBAAoBC,SAAQ,SAAChB,GACnDA,EAAeoB,iBAAiB,aAAa,WACzC,EAAKD,uBAAuBnB,EAAeqB,4BAM3D,eAAAC,kBAAA,SAAkBC,GAEd,OADWA,EAAQC,wBACPC,MAAQd,OAAOC,YAG/B,eAAAO,uBAAA,SAAuBF,EAAuBS,GACtCtB,KAAKkB,kBAAkBL,KACvBA,EAASU,MAAMC,KAAO,OACtBX,EAASU,MAAMF,MAAQR,EAASY,cAAcC,YAAc,KAC5Db,EAASU,MAAMD,IAAM,MAI7B,eAAAhB,qBAAA,sBACIN,KAAKG,SAASP,eAAegB,SAAQ,SAAChB,GAClCA,EAAeoB,iBAAiB,SAAS,SAACW,GAGtC,IAAIC,EAAKhC,EAELiC,EAAkBD,EAAGX,mBAEzBW,EAAGE,UAAUC,OAAO,mBAEpB,IAAIC,EAASJ,EAAGK,aAAaC,QAAQ,qBAGrC,IAAKL,EAAgBC,UAAUK,SAAS,QAAS,CAC7C,IAAMC,EAAYR,EAAGM,QAAQ,kBAAkBvB,iBAAiB,SAC7DyB,GAAaA,EAAU/B,OAAS,GAC/B+B,EAAUxB,SAAQ,SAASyB,GACvBA,EAAMP,UAAUQ,OAAO,WAkCnC,OA5BGT,EAAgBC,UAAUK,SAAS,kBAClCN,EAAgBC,UAAUC,OAAO,QAGlCH,EAAGH,eACFG,EAAGH,cAAcK,UAAUC,OAAO,SAId,EAAKQ,WAAWX,EAAI,8BAAgC,IAE5DhB,SAAQ,SAACoB,GACrB,EAAKlB,oBAAoBkB,GAAQ,WAC7BtB,SAASC,iBAAiB,wBAAwBC,SAAQ,SAACC,GACvDA,EAASiB,UAAUQ,OAAO,WAE9BV,EAAGE,UAAUQ,OAAO,yBAKxBN,IAAWA,EAAOP,cAAcK,UAAUK,SAAS,gBAClDP,EAAGX,mBAAmCM,MAAMD,IAAMM,EAAGY,UAAY,KACjEZ,EAAGX,mBAAmCM,MAAMC,KAAOQ,EAAOS,YAAc,MAI7Ed,EAAEe,mBACK,SAMnB,eAAAH,WAAA,SAAWpB,EAAsBwB,GAI7B,IAHA,IAAMC,EAAyB,GAC3BZ,EAA6Bb,EAAQM,cAEvB,OAAXO,GAAmBA,IAAWtB,SAASmC,MACtCb,EAAOc,QAAQH,IACfC,EAAQG,KAAKf,GAEjBA,EAASA,EAAOP,cAGpB,OAAOmB,GAIX,eAAA9B,oBAAA,SAAoBD,EAAuBmC,EAAoCC,QAApC,IAAAD,MAAA,mBAAoC,IAAAC,MAAA,cAC5D,IAAIC,kBAAiB,SAASC,GACzCA,EAAUvC,SAAQ,SAAAwC,GACTA,EAASC,OAAuBvB,UAAUK,SAAS,QACpDc,IAEAD,UAKHM,QAAQzC,EAAU,CACvB0C,YAAY,EACZC,mBAAmB,EACnBC,gBAAiB,CAAC,YAlIxBC,KAAI,YADT,YAAaC,EAAWC,EAAUC,EAAWC,G,gCAGZC,eAF5BL,MAAN,GAuIe","file":"js/menu-62dcce278470f34c7fbb.js","sourcesContent":["import { BaseElements, BaseObject, BaseService, BaseInjector } from 'ui-theme/js/base';\nimport { querySelectorAll, EmptyNodeList } from 'ui-theme/utility/utils/index';\nimport bootstrapBreakpoints from 'ui-theme/utility/grid';\n\n\nclass Texts extends BaseObject { }\n\nclass ClassList extends BaseObject { }\n\nclass Selectors extends BaseObject {\n    dropdownToggle = '.dropdown-menu a.dropdown-toggle';\n}\n\nclass Elements extends BaseElements<Selectors> {\n    dropdownToggle: NodeListOf<HTMLInputElement> = new EmptyNodeList();\n    wrapper: HTMLElement\n\n    constructor(selectors: Selectors) {\n        super(selectors, false);\n    }\n\n    setWrapper(wrapper: HTMLElement) {\n        this.wrapper = wrapper;\n        this.initElements();\n    }\n\n    initElements() {\n        this.dropdownToggle = querySelectorAll(this.selectors.dropdownToggle, this.wrapper);\n    }\n}\n\ninterface Menu extends BaseService<Selectors, Elements, ClassList, Texts> { }\n\n@BaseInjector(Selectors, Elements, ClassList, Texts)\nclass Menu {\n\n    constructor(readonly wrapper: HTMLElement) { }\n\n    initialize(): void {\n        this.elements.setWrapper(this.wrapper);\n        this.addEventListeners();\n    }\n\n    addEventListeners(): void {\n        if(this.elements.dropdownToggle.length) {\n            this.customToggleFunction();\n        }\n\n        if (window.innerWidth >= bootstrapBreakpoints.xl) {\n            document.querySelectorAll('.dropdown-menu').forEach((dropdown: HTMLElement) => {\n                this.setDropdownObserver(dropdown, ()=>{\n                }, ()=> {\n                    this.adjustDropdownPosition(dropdown)\n                })\n            });\n    \n            document.querySelectorAll('.dropdown-toggle').forEach((dropdownToggle: HTMLElement) => {\n                dropdownToggle.addEventListener('mouseover', () => {\n                    this.adjustDropdownPosition(dropdownToggle.nextElementSibling as HTMLElement);\n                });\n            });\n        }\n    }\n\n    isOutsideViewport(element: HTMLElement) {\n        var rect = element.getBoundingClientRect();\n        return rect.right > window.innerWidth;\n    }\n\n    adjustDropdownPosition(dropdown: HTMLElement, top?: string) {\n        if (this.isOutsideViewport(dropdown)) {\n            dropdown.style.left = 'auto';\n            dropdown.style.right = dropdown.parentElement.clientWidth + 'px';\n            dropdown.style.top = '0'\n        }\n    }\n\n    customToggleFunction(): void {\n        this.elements.dropdownToggle.forEach((dropdownToggle) => {\n            dropdownToggle.addEventListener('click', (e) => {\n                \n                // Select the clicked element (dropdown toggle)\n                var el = dropdownToggle as HTMLElement;\n                // Select the next sibling \n                let nextMenuSibling = el.nextElementSibling as HTMLElement;\n                // remove or add the class to the element\n                el.classList.toggle('active-dropdown');\n                // get the upper parent with the class dropdown menu\n                var parent = el.offsetParent.closest('.dropdown-submenu') as HTMLElement;\n\n                // hide all pervious opened sub dropdown when click on the next one\n                if (!nextMenuSibling.classList.contains('show')) {\n                    const shownMenu = el.closest('.dropdown-menu').querySelectorAll('.show')\n                    if(shownMenu && shownMenu.length > 0) {\n                        shownMenu.forEach(function(child) {\n                            child.classList.remove('show');\n                        });\n                    }\n                }\n                \n                // show the sub menu on click \n                if(nextMenuSibling.classList.contains(\"dropdown-menu\")) {\n                    nextMenuSibling.classList.toggle('show')\n                }\n\n                if(el.parentElement) {\n                    el.parentElement.classList.toggle('show')\n                }\n\n                // get all parents with that class\n                const dropdownParents = this.getParents(el, 'li.nav-item.dropdown.show') || []\n                // hide all dropdown opened when moving between the main items of menu.\n                dropdownParents.forEach((parent) => {\n                    this.setDropdownObserver(parent, ()=>{\n                        document.querySelectorAll('.dropdown-menu .show').forEach((dropdown) => {\n                            dropdown.classList.remove('show');\n                        });\n                        el.classList.remove('active-dropdown');\n                    })\n                })\n\n                // add styling to sub menu\n                if (parent && !parent.parentElement.classList.contains('navbar-nav')) {\n                    (el.nextElementSibling as HTMLElement).style.top = el.offsetTop + 'px';\n                    (el.nextElementSibling as HTMLElement).style.left = parent.offsetWidth + 'px';\n                }\n                \n                // to prevent the dropdown body event when click\n                e.stopPropagation();\n                return false;\n            });\n        }); \n    }\n\n    // to get all parents with specific selector for an element.\n    getParents(element: HTMLElement, selector: string): HTMLElement[] {\n        const parents: HTMLElement[] = [];\n        let parent: HTMLElement | null = element.parentElement;\n    \n        while (parent !== null && parent !== document.body) {\n            if (parent.matches(selector)) {\n                parents.push(parent);\n            }\n            parent = parent.parentElement;\n        }\n    \n        return parents;\n    }\n\n    // Observe the show and hide action of bootstrap dropdown\n    setDropdownObserver(dropdown: HTMLElement, onHideFunction: Function = ()=>{} , onShowFunction: Function = ()=>{}) {\n        var observer = new MutationObserver(function(mutations) {\n            mutations.forEach(mutation => {\n                if ((mutation.target as HTMLElement).classList.contains(\"show\")) {\n                    onShowFunction();\n                } else {\n                    onHideFunction();\n                }\n            })\n        });\n\n        observer.observe(dropdown, {\n            attributes: true,\n            attributeOldValue: true,\n            attributeFilter: ['class']\n        });\n    }\n}\n\nexport default Menu;\n\nexport {\n    Elements as MMenuElements,\n    Selectors as MenuSelectors,\n    ClassList as MenuClassList,\n    Texts as MenuTexts\n}"],"sourceRoot":""}