'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const __chunk_1 = require('./chunk-2755df65.js');

class Navbar {
    constructor(hostRef) {
        __chunk_1.registerInstance(this, hostRef);
        /**
         * Json string of menu-items
         */
        this.menuItems = null;
        this.logo = null;
        this.position = 'scroll';
        this.lastScrollState = 0;
        this.fixedScroll = false;
    }
    componentWillLoad() {
        this.innerMenuItems = JSON.parse(this.menuItems);
    }
    componentDidLoad() {
        this.moveMenu();
        this.setActiveMenuItem();
        // Set Navbar Set
        switch (this.position) {
            case 'fixed':
                this.navElement.style.position = 'fixed';
                break;
            case 'fixed-scroll':
                this.navElement.style.position = 'fixed';
                this.navElement.style.webkitTransition = "transform 0.2s ease-out";
                this.navElement.style.transition = "transform 0.2s ease-out";
                this.navElement.style.transform = 'translateY(0%)';
                this.fixedScroll = true;
                break;
            case 'scroll':
                break;
            default:
                throw new Error("Position information is invalid. Can be set to: 'fixed', 'fixed-scroll', 'scroll'");
        }
    }
    render() {
        return ([
            __chunk_1.h("nav", { ref: (element) => this.navElement = element }, __chunk_1.h("div", { class: "navbar-wrapper" }, this.createLogo(), __chunk_1.h("ul", { id: "desktop-menu", ref: (element) => this.desktopMenu = element }, this.createMenuItems()), __chunk_1.h("div", { ref: (element) => this.menuIcon = element, class: "menuIcon", onClick: () => this.toggleMobileMenu() }, __chunk_1.h("span", { class: "bar1" }), __chunk_1.h("span", { class: "bar2" }), __chunk_1.h("span", { class: "bar3" })))),
            __chunk_1.h("div", { class: "overlay-menu", ref: (element) => this.overlayMenu = element }, __chunk_1.h("ul", { id: "mobile-menu", ref: (element) => this.mobileMenu = element }))
        ]);
    }
    createMenuItems() {
        var htmlItems = [];
        if (this.menuItems != null) {
            this.innerMenuItems.map(menuItem => {
                htmlItems.push(__chunk_1.h("li", null, __chunk_1.h("a", { href: menuItem.url, onClick: (event) => this.menuClick(event) }, menuItem.name)));
            });
        }
        else {
            for (var i = 0; i < this.itemCount; i++) {
                htmlItems.push(__chunk_1.h("li", { onClick: (event) => this.menuClick(event) }, __chunk_1.h("slot", { name: 'item-' + (i + 1) })));
            }
        }
        return htmlItems;
    }
    createLogo() {
        if (this.logo == null) {
            return;
        }
        else {
            return __chunk_1.h("div", { class: "logo" }, __chunk_1.h("a", { href: "/" }, __chunk_1.h("img", { class: "logo-image", src: this.logo })));
        }
    }
    toggleMobileMenu() {
        this.menuIcon.classList.toggle('opened');
        if (this.menuIcon.classList.contains('opened')) {
            this.overlayMenu.style.transform = 'translateX(0%)';
            this.overlayMenu.style.transition = 'transform 0.4s ease-out';
            document.body.style.position = "fixed";
            document.documentElement.style.position = "fixed";
        }
        else {
            this.overlayMenu.style.transform = 'translateX(-100%)';
            this.overlayMenu.style.transition = 'transform 0.4s ease-out';
            document.body.style.position = null;
            document.documentElement.style.position = null;
        }
    }
    menuClick(ev) {
        var activeElements = document.getElementsByClassName('active');
        for (var i = 0; i < activeElements.length; i++) {
            activeElements[i].classList.remove('active');
        }
        ev.srcElement.classList.add('active');
        if (this.mobileMenu.children.length > 0) {
            this.toggleMobileMenu();
        }
    }
    setActiveMenuItem() {
        var url = document.location.href;
        var menuItems = document.getElementsByTagName('a');
        for (var i = 0; i < menuItems.length; i++) {
            var anchorMenuItem = menuItems[i];
            if (anchorMenuItem.href == url) {
                menuItems[i].classList.add('active');
            }
        }
    }
    moveMenu() {
        if (window.innerWidth <= 638 && this.desktopMenu.children.length != 0) {
            while (this.desktopMenu.children.length > 0) {
                this.mobileMenu.appendChild(this.desktopMenu.childNodes[0]);
            }
        }
        else if (window.innerWidth > 638 && this.mobileMenu.children.length != 0) {
            if (this.menuIcon.classList.contains('opened')) {
                this.toggleMobileMenu();
            }
            while (this.mobileMenu.children.length > 0) {
                this.desktopMenu.appendChild(this.mobileMenu.childNodes[0]);
            }
        }
    }
    bodyScroll() {
        if (this.fixedScroll && !this.menuIcon.classList.contains('opened')) {
            var scrollState = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollState == 0) ;
            else if (scrollState > this.lastScrollState) {
                this.navElement.style.transform = 'translateY(-100%)';
            }
            else {
                this.navElement.style.transform = 'translateY(0%)';
            }
            this.lastScrollState = scrollState <= 0 ? 0 : scrollState;
        }
    }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}ema-navbar{--ema-navbar-background:var(--ema-background-light,#e9ecef);--ema-navbar-border:var(--ema-border,1px solid #c0c3c6);--ema-navbar-color:var(--ema-primary,#46444b);--ema-navbar-hover-color:var(--ema-primary,#46444b);--ema-navbar-width:100%;--ema-navbar-height:50px;--ema-navbar-padding:var(--ema-padding,15px);--ema-navbar-text-transform:none;--ema-navbar-a-padding:0 var(--ema-padding,15px);--ema-navbar-a-font-size:0.9em;--ema-navbar-a-font-family:Arial,Helvetica,sans-serif;--ema-navbar-mobile-a-font-size:1.8em}ema-navbar nav{background-color:var(--ema-navbar-background);border-bottom:var(--ema-navbar-border);color:var(--ema-navbar-color);top:0;height:var(--ema-navbar-height);line-height:var(--ema-navbar-height);width:100%;z-index:1000}ema-navbar .navbar-wrapper{margin:auto;text-align:right;width:calc(var(--ema-navbar-width) * .9)}\@media (max-width:768px){ema-navbar .navbar-wrapper{width:calc(var(--ema-navbar-width) * .9)}}\@media (max-width:638px){ema-navbar .navbar-wrapper{width:var(--ema-navbar-width)}}ema-navbar .logo{float:left;margin-left:28px;font-size:1.5em;height:calc(var(--ema-navbar-height) - 10px);letter-spacing:1px;text-transform:var(--ema-navbar-text-transform)}ema-navbar .logo-image{max-height:100%;width:auto}\@media (max-width:768px){ema-navbar .logo{margin-left:5px}}ema-navbar ul{display:inline-block;float:right;list-style:none;margin-top:-2px;text-align:right;-webkit-transition:-webkit-transform .5s ease-out;transition:-webkit-transform .5s ease-out;transition:transform .5s ease-out;transition:transform .5s ease-out,-webkit-transform .5s ease-out;width:var(--ema-navbar-width);-webkit-transition:transform .5s ease-out}\@media (max-width:638px){ema-navbar ul{display:none}}\@media (orientation:landscape){ema-navbar ul{display:inline-block}}ema-navbar li{display:inline-block}ema-navbar ::slotted(a),ema-navbar a{color:var(--ema-navbar-color);display:block;font-size:var(--ema-navbar-a-font-size);height:var(--ema-navbar-height);letter-spacing:1px;padding:var(--ema-navbar-a-padding);position:relative;text-decoration:none;text-transform:var(--ema-navbar-text-transform);transition:all .5s ease;-webkit-transition:all .5s ease}ema-navbar .overlay-menu ::slotted(a),ema-navbar .overlay-menu a{display:inline-block;width:var(--ema-navbar-width);padding:0;text-align:center;line-height:var(--ema-navbar-height)}ema-navbar .overlay-menu ul{width:var(--ema-navbar-width)}ema-navbar ::slotted(a:active),ema-navbar a:active{color:var(--ema-navbar-hover-color)}ema-navbar ::slotted(a.active),ema-navbar a.active{color:var(--ema-navbar-hover-color);font-weight:700}ema-navbar ::slotted(a:hover),ema-navbar a:hover{color:var(--ema-navbar-hover-color);transition:all 1s ease;-webkit-transition:all 1s ease}ema-navbar ::slotted(a:after),ema-navbar ::slotted(a:before),ema-navbar a:after,ema-navbar a:before{content:\"\";position:absolute;width:0;height:1px;bottom:-1px;background:var(--ema-navbar-hover-color)}ema-navbar ::slotted(a:before),ema-navbar a:before{left:0;-webkit-transition:.5s;transition:.5s}ema-navbar ::slotted(a:after),ema-navbar a:after{background:var(--ema-navbar-hover-color);right:0}ema-navbar ::slotted(a:hover:before),ema-navbar a:hover:before{background:var(--ema-navbar-hover-color);width:100%;-webkit-transition:width .5s cubic-bezier(.22,.61,.36,1);transition:width .5s cubic-bezier(.22,.61,.36,1)}ema-navbar ::slotted(a:hover:after),ema-navbar a:hover:after{background:transparent;width:100%}\@media (max-width:638px){ema-navbar .menuIcon{display:inline-block;cursor:pointer;position:relative;top:10px;right:25px;height:23px;width:20px;z-index:20}ema-navbar .bar1{top:0}ema-navbar .bar1,ema-navbar .bar2{background:var(--ema-navbar-color);height:2px;width:100%;-webkit-transition:.4s;transition:.4s;position:absolute;left:0}ema-navbar .bar2{top:8px}ema-navbar .bar3{background:var(--ema-navbar-color);height:2px;width:100%;-webkit-transition:.4s;transition:.4s;position:absolute;top:16px;left:0}ema-navbar .opened .bar1{-webkit-transform:rotate(-45deg) translate(-5px,6px);transform:rotate(-45deg) translate(-5px,6px)}ema-navbar .opened .bar2{opacity:0}ema-navbar .opened .bar3{-webkit-transform:rotate(45deg) translate(-5px,-6px);transform:rotate(45deg) translate(-5px,-6px)}}ema-navbar .overlay-menu{background:var(--ema-navbar-background);color:var(--ema-navbar-color);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:var(--ema-navbar-height);left:0;margin-right:15px;padding-top:15px;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100vw;height:100vh;-webkit-transition:transform .4s ease-out;-webkit-transition:-webkit-transform .4s ease-out;transition:-webkit-transform .4s ease-out;transition:transform .4s ease-out;transition:transform .4s ease-out,-webkit-transform .4s ease-out}ema-navbar .overlay-menu li,ema-navbar .overlay-menu ul{display:block;position:relative}ema-navbar .overlay-menu li a{display:block;font-size:var(--ema-navbar-mobile-a-font-size);font-family:var(--ema-navbar-a-font-family);letter-spacing:4px;padding:10px 0;text-align:right;text-transform:var(--ema-navbar-text-transform);-webkit-transition:color .3s ease;transition:color .3s ease;width:100%}ema-navbar .overlay-menu li a:active,ema-navbar .overlay-menu li a:hover{color:var(--ema-navbar-hover-color);-webkit-transition:color .3s ease;transition:color .3s ease}"; }
}

exports.ema_navbar = Navbar;
