Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

gl-ng-menus-frontend

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gl-ng-menus-frontend - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

4

bundles/gl-ng-menus-frontend.umd.js

@@ -454,3 +454,3 @@ (function (global, factory) {

template: "<gl-component-menu-background\n #background\n (click)=\"service.backgroundClick($event)\"\n></gl-component-menu-background>\n<div #container class=\"menu-container {{ className }} {{ menuPosition === 'left' ? 'left' : 'right' }}\">\n <nav class=\"menu-nav-container\">\n <ul class=\"menu-content\">\n <li class=\"menu-header-container\">\n <div class=\"menu-header\">\n <div class=\"menu-top-icons-container\">\n <img id=\"close-menu-button\"\n (click)=\"service.close($event)\"\n [src]=\"closeButton\"\n class=\"menu-icons close-menu\"\n alt=\"Close menu button\">\n <img\n *ngIf=\"showSettings\"\n id=\"settings-menu-button\"\n (click)=\"service.goToSettings(settingsUrl, settingsTarget)\"\n [src]=\"settingsButton\"\n class=\"menu-icons settings-menu\"\n alt=\"Settings menu button\">\n <img\n *ngIf=\"showLogout\"\n id=\"logout-menu-button\"\n (click)=\"$logoutClick.emit($event)\"\n [src]=\"logoutButton\"\n class=\"menu-icons logout-menu\"\n alt=\"Close menu button\">\n\n <div class=\"logo-container\">\n <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>\n </div>\n\n </div>\n <div class=\"menu-header-title\">\n <h1 class=\"title\">{{ title }}</h1>\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n <h3 class=\"system-version\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</h3>\n </div>\n </div>\n </li>\n <li class=\"menu-content-container {{ title?.length > 0 ? 'has-title' : '' }}\">\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItems\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [target]=\"menuItem.target\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItemsComplex\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [hasSubitem]=\"menuItem.hasSubitem\"\n [active]=\"menuItem.active\"\n [target]=\"menuItem.target\"\n [subItems]=\"menuItem.subItems\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n </li>\n<!-- <li class=\"logo-main-container\">-->\n<!-- <div class=\"logo-container\">-->\n<!--&lt;!&ndash; <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>&ndash;&gt;-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomTitle }}</span>-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</span>-->\n<!-- </div>-->\n<!-- </li>-->\n </ul>\n </nav>\n</div>\n",
styles: ["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]
styles: ["@import\"//fonts.googleapis.com/css?family=Montserrat:300\";@import\"//fonts.googleapis.com/css?family=Montserrat:700\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]
},] }

@@ -557,3 +557,3 @@ ];

],
styles: ["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]
styles: ["@import\"//fonts.googleapis.com/css?family=Montserrat\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]
},] }

@@ -560,0 +560,0 @@ ];

2

esm2015/gl-ng-menus-frontend/src/lib/component/menu/gl-component-menu.component.js

@@ -26,3 +26,3 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';

template: "<gl-component-menu-background\n #background\n (click)=\"service.backgroundClick($event)\"\n></gl-component-menu-background>\n<div #container class=\"menu-container {{ className }} {{ menuPosition === 'left' ? 'left' : 'right' }}\">\n <nav class=\"menu-nav-container\">\n <ul class=\"menu-content\">\n <li class=\"menu-header-container\">\n <div class=\"menu-header\">\n <div class=\"menu-top-icons-container\">\n <img id=\"close-menu-button\"\n (click)=\"service.close($event)\"\n [src]=\"closeButton\"\n class=\"menu-icons close-menu\"\n alt=\"Close menu button\">\n <img\n *ngIf=\"showSettings\"\n id=\"settings-menu-button\"\n (click)=\"service.goToSettings(settingsUrl, settingsTarget)\"\n [src]=\"settingsButton\"\n class=\"menu-icons settings-menu\"\n alt=\"Settings menu button\">\n <img\n *ngIf=\"showLogout\"\n id=\"logout-menu-button\"\n (click)=\"$logoutClick.emit($event)\"\n [src]=\"logoutButton\"\n class=\"menu-icons logout-menu\"\n alt=\"Close menu button\">\n\n <div class=\"logo-container\">\n <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>\n </div>\n\n </div>\n <div class=\"menu-header-title\">\n <h1 class=\"title\">{{ title }}</h1>\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n <h3 class=\"system-version\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</h3>\n </div>\n </div>\n </li>\n <li class=\"menu-content-container {{ title?.length > 0 ? 'has-title' : '' }}\">\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItems\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [target]=\"menuItem.target\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItemsComplex\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [hasSubitem]=\"menuItem.hasSubitem\"\n [active]=\"menuItem.active\"\n [target]=\"menuItem.target\"\n [subItems]=\"menuItem.subItems\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n </li>\n<!-- <li class=\"logo-main-container\">-->\n<!-- <div class=\"logo-container\">-->\n<!--&lt;!&ndash; <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>&ndash;&gt;-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomTitle }}</span>-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</span>-->\n<!-- </div>-->\n<!-- </li>-->\n </ul>\n </nav>\n</div>\n",
styles: ["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]
styles: ["@import\"//fonts.googleapis.com/css?family=Montserrat:300\";@import\"//fonts.googleapis.com/css?family=Montserrat:700\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]
},] }

@@ -29,0 +29,0 @@ ];

2

esm2015/gl-ng-menus-frontend/src/lib/component/menu/item/gl-component-menu-item.component.js

@@ -75,3 +75,3 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';

],
styles: ["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]
styles: ["@import\"//fonts.googleapis.com/css?family=Montserrat\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]
},] }

@@ -78,0 +78,0 @@ ];

4

fesm2015/gl-ng-menus-frontend.js

@@ -98,3 +98,3 @@ import * as i0 from '@angular/core';

template: "<gl-component-menu-background\n #background\n (click)=\"service.backgroundClick($event)\"\n></gl-component-menu-background>\n<div #container class=\"menu-container {{ className }} {{ menuPosition === 'left' ? 'left' : 'right' }}\">\n <nav class=\"menu-nav-container\">\n <ul class=\"menu-content\">\n <li class=\"menu-header-container\">\n <div class=\"menu-header\">\n <div class=\"menu-top-icons-container\">\n <img id=\"close-menu-button\"\n (click)=\"service.close($event)\"\n [src]=\"closeButton\"\n class=\"menu-icons close-menu\"\n alt=\"Close menu button\">\n <img\n *ngIf=\"showSettings\"\n id=\"settings-menu-button\"\n (click)=\"service.goToSettings(settingsUrl, settingsTarget)\"\n [src]=\"settingsButton\"\n class=\"menu-icons settings-menu\"\n alt=\"Settings menu button\">\n <img\n *ngIf=\"showLogout\"\n id=\"logout-menu-button\"\n (click)=\"$logoutClick.emit($event)\"\n [src]=\"logoutButton\"\n class=\"menu-icons logout-menu\"\n alt=\"Close menu button\">\n\n <div class=\"logo-container\">\n <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>\n </div>\n\n </div>\n <div class=\"menu-header-title\">\n <h1 class=\"title\">{{ title }}</h1>\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n <h3 class=\"system-version\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</h3>\n </div>\n </div>\n </li>\n <li class=\"menu-content-container {{ title?.length > 0 ? 'has-title' : '' }}\">\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItems\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [target]=\"menuItem.target\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItemsComplex\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [hasSubitem]=\"menuItem.hasSubitem\"\n [active]=\"menuItem.active\"\n [target]=\"menuItem.target\"\n [subItems]=\"menuItem.subItems\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n </li>\n<!-- <li class=\"logo-main-container\">-->\n<!-- <div class=\"logo-container\">-->\n<!--&lt;!&ndash; <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>&ndash;&gt;-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomTitle }}</span>-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</span>-->\n<!-- </div>-->\n<!-- </li>-->\n </ul>\n </nav>\n</div>\n",
styles: ["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]
styles: ["@import\"//fonts.googleapis.com/css?family=Montserrat:300\";@import\"//fonts.googleapis.com/css?family=Montserrat:700\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]
},] }

@@ -199,3 +199,3 @@ ];

],
styles: ["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]
styles: ["@import\"//fonts.googleapis.com/css?family=Montserrat\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]
},] }

@@ -202,0 +202,0 @@ ];

2

gl-ng-menus-frontend.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":4,"metadata":{"GlComponentMenuBackgroundComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"gl-component-menu-background","template":"<div class=\"menu-background\"></div>\n","styles":[":host::ng-deep .menu-background{background-color:#0000004d;position:fixed;width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"GlComponentMenuItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"gl-component-menu-item","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":12,"character":4},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":13,"character":6},"arguments":["",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":13,"character":16},"arguments":[{"opacity":0,"height":0,"transform":"scaleY(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":18,"character":6},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":19,"character":8},"arguments":[{"opacity":0,"height":0,"transform":"scaleY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":24,"character":8},"arguments":["0.3s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":24,"character":32},"arguments":[{"opacity":1,"height":"*","transform":"scaleY(1)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":30,"character":6},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":31,"character":8},"arguments":[250,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":31,"character":21},"arguments":[{"opacity":0,"height":0,"transform":"scaleY(0)"}]}]}]]}]]}],"template":"<li class=\"menu-title {{ itemClass }}\" *ngIf=\"!hasSubitem\">\n <img [src]=\"src\" class=\"menu-icons\" [alt]=\"alt\"/>\n <a\n class=\"menu-item\"\n *ngIf=\"absolute\"\n [href]=\"'externalRedirect'\"\n (click)=\"openAbsoluteLink($event, href, target)\"\n >{{ content }}</a>\n <a *ngIf=\"!absolute\"\n class=\"menu-item\"\n [routerLink]=\"href\"\n [fragment]=\"fragment\"\n (click)=\"onClick($event)\"\n >{{ content }}</a>\n</li>\n\n<li class=\"menu-title {{ itemClass }} {{ active ? 'active' : '' }}\" *ngIf=\"hasSubitem\">\n <img [src]=\"src\" class=\"menu-icons\" [alt]=\"alt\"/>\n <div\n class=\"menu-item\"\n (click)=\"toggleActive()\"\n >{{ content }}</div>\n <img src=\"../assets/img/icon/side-menu/arrow-down.svg\" class=\"menu-arrow\" [alt]=\"alt\"/>\n</li>\n<ol *ngIf=\"hasSubitem && active\" [@fadeInOut] class=\"subitem-container {{ active ? 'active' : '' }}\">\n <li class=\"menu-title adding-row-animated {{ item.class }}\" *ngFor=\"let item of subItems\">\n <img [src]=\"item.src\" class=\"menu-icons\" [alt]=\"item.alt\"/>\n <a\n class=\"menu-item\"\n *ngIf=\"item.absolute\"\n [href]=\"'externalRedirect'\"\n (click)=\"openAbsoluteLink($event, item.href, item.target)\"\n >{{ item.content }}</a>\n <a *ngIf=\"!item.absolute\"\n class=\"menu-item\"\n [routerLink]=\"item.href\"\n [fragment]=\"item.fragment\"\n (click)=\"onClick($event)\"\n >{{ item.content }}</a>\n </li>\n</ol>\n","styles":["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]}]}],"members":{"itemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"absolute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"menuLogo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"href":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"fragment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"alt":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"hasSubitem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"subItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"$click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":58,"character":21},{"__symbolic":"reference","name":"GlComponentMenuService"}]}],"openAbsoluteLink":[{"__symbolic":"method"}],"toggleActive":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}]}},"GlComponentMenuItemInterface":{"__symbolic":"error","message":"Unsupported bundled module reference","context":{"module":"./gl-ng-menus-frontend/src/lib/component/menu/item/gl-component-menu-item.interface"}},"GlComponentMenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"gl-component-menu","template":"<gl-component-menu-background\n #background\n (click)=\"service.backgroundClick($event)\"\n></gl-component-menu-background>\n<div #container class=\"menu-container {{ className }} {{ menuPosition === 'left' ? 'left' : 'right' }}\">\n <nav class=\"menu-nav-container\">\n <ul class=\"menu-content\">\n <li class=\"menu-header-container\">\n <div class=\"menu-header\">\n <div class=\"menu-top-icons-container\">\n <img id=\"close-menu-button\"\n (click)=\"service.close($event)\"\n [src]=\"closeButton\"\n class=\"menu-icons close-menu\"\n alt=\"Close menu button\">\n <img\n *ngIf=\"showSettings\"\n id=\"settings-menu-button\"\n (click)=\"service.goToSettings(settingsUrl, settingsTarget)\"\n [src]=\"settingsButton\"\n class=\"menu-icons settings-menu\"\n alt=\"Settings menu button\">\n <img\n *ngIf=\"showLogout\"\n id=\"logout-menu-button\"\n (click)=\"$logoutClick.emit($event)\"\n [src]=\"logoutButton\"\n class=\"menu-icons logout-menu\"\n alt=\"Close menu button\">\n\n <div class=\"logo-container\">\n <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>\n </div>\n\n </div>\n <div class=\"menu-header-title\">\n <h1 class=\"title\">{{ title }}</h1>\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n <h3 class=\"system-version\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</h3>\n </div>\n </div>\n </li>\n <li class=\"menu-content-container {{ title?.length > 0 ? 'has-title' : '' }}\">\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItems\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [target]=\"menuItem.target\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItemsComplex\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [hasSubitem]=\"menuItem.hasSubitem\"\n [active]=\"menuItem.active\"\n [target]=\"menuItem.target\"\n [subItems]=\"menuItem.subItems\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n </li>\n<!-- <li class=\"logo-main-container\">-->\n<!-- <div class=\"logo-container\">-->\n<!--&lt;!&ndash; <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>&ndash;&gt;-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomTitle }}</span>-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</span>-->\n<!-- </div>-->\n<!-- </li>-->\n </ul>\n </nav>\n</div>\n","styles":["@import\"https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900\";@import\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["container",{"static":true,"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":12,"character":48}}]}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":["background",{"static":true,"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":13,"character":49}}]}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"subtitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"systemVersion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"menuItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"menuItemsComplex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"showSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"showLogout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"settingsUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"settingsTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"menuLogo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"menuBottomTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"menuBottomVersion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"menuPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"logoutButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"settingsButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"$click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"$logoutClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"GlComponentMenuService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":41,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}]}},"GlComponentMenuService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnDestroy":[{"__symbolic":"method"}],"initialize":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"goToSettings":[{"__symbolic":"method"}],"backgroundClick":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"GlComponentMenuInterface":{"__symbolic":"error","message":"Unsupported bundled module reference","context":{"module":"./gl-ng-menus-frontend/src/lib/component/menu/gl-component-menu.interface"}},"GlNgMenusComponentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"GlComponentMenuBackgroundComponent"},{"__symbolic":"reference","name":"GlComponentMenuItemComponent"},{"__symbolic":"reference","name":"GlComponentMenuComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":15,"character":4}],"exports":[{"__symbolic":"reference","name":"GlComponentMenuBackgroundComponent"},{"__symbolic":"reference","name":"GlComponentMenuItemComponent"},{"__symbolic":"reference","name":"GlComponentMenuComponent"}]}]}],"members":{}},"GlNgMenusFrontendModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"declarations":[],"imports":[{"__symbolic":"reference","name":"GlNgMenusComponentModule"}],"exports":[{"__symbolic":"reference","name":"GlNgMenusComponentModule"}]}]}],"members":{}},"TTheme":{"__symbolic":"interface"}},"origins":{"GlComponentMenuBackgroundComponent":"./gl-ng-menus-frontend/src/lib/component/menu/background/gl-component-menu-background.component","GlComponentMenuItemComponent":"./gl-ng-menus-frontend/src/lib/component/menu/item/gl-component-menu-item.component","GlComponentMenuItemInterface":"./wrapper_menus","GlComponentMenuComponent":"./gl-ng-menus-frontend/src/lib/component/menu/gl-component-menu.component","GlComponentMenuService":"./gl-ng-menus-frontend/src/lib/component/menu/gl-component-menu.service","GlComponentMenuInterface":"./wrapper_menus","GlNgMenusComponentModule":"./gl-ng-menus-frontend/src/lib/component/component.module","GlNgMenusFrontendModule":"./gl-ng-menus-frontend/src/lib/gl-ng-menus-frontend.module","TTheme":"./gl-ng-menus-frontend/src/lib/interfaces/global.interface"},"importAs":"gl-ng-menus-frontend"}
{"__symbolic":"module","version":4,"metadata":{"GlComponentMenuBackgroundComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"gl-component-menu-background","template":"<div class=\"menu-background\"></div>\n","styles":[":host::ng-deep .menu-background{background-color:#0000004d;position:fixed;width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"GlComponentMenuItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"gl-component-menu-item","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":12,"character":4},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":13,"character":6},"arguments":["",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":13,"character":16},"arguments":[{"opacity":0,"height":0,"transform":"scaleY(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":18,"character":6},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":19,"character":8},"arguments":[{"opacity":0,"height":0,"transform":"scaleY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":24,"character":8},"arguments":["0.3s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":24,"character":32},"arguments":[{"opacity":1,"height":"*","transform":"scaleY(1)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":30,"character":6},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":31,"character":8},"arguments":[250,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":31,"character":21},"arguments":[{"opacity":0,"height":0,"transform":"scaleY(0)"}]}]}]]}]]}],"template":"<li class=\"menu-title {{ itemClass }}\" *ngIf=\"!hasSubitem\">\n <img [src]=\"src\" class=\"menu-icons\" [alt]=\"alt\"/>\n <a\n class=\"menu-item\"\n *ngIf=\"absolute\"\n [href]=\"'externalRedirect'\"\n (click)=\"openAbsoluteLink($event, href, target)\"\n >{{ content }}</a>\n <a *ngIf=\"!absolute\"\n class=\"menu-item\"\n [routerLink]=\"href\"\n [fragment]=\"fragment\"\n (click)=\"onClick($event)\"\n >{{ content }}</a>\n</li>\n\n<li class=\"menu-title {{ itemClass }} {{ active ? 'active' : '' }}\" *ngIf=\"hasSubitem\">\n <img [src]=\"src\" class=\"menu-icons\" [alt]=\"alt\"/>\n <div\n class=\"menu-item\"\n (click)=\"toggleActive()\"\n >{{ content }}</div>\n <img src=\"../assets/img/icon/side-menu/arrow-down.svg\" class=\"menu-arrow\" [alt]=\"alt\"/>\n</li>\n<ol *ngIf=\"hasSubitem && active\" [@fadeInOut] class=\"subitem-container {{ active ? 'active' : '' }}\">\n <li class=\"menu-title adding-row-animated {{ item.class }}\" *ngFor=\"let item of subItems\">\n <img [src]=\"item.src\" class=\"menu-icons\" [alt]=\"item.alt\"/>\n <a\n class=\"menu-item\"\n *ngIf=\"item.absolute\"\n [href]=\"'externalRedirect'\"\n (click)=\"openAbsoluteLink($event, item.href, item.target)\"\n >{{ item.content }}</a>\n <a *ngIf=\"!item.absolute\"\n class=\"menu-item\"\n [routerLink]=\"item.href\"\n [fragment]=\"item.fragment\"\n (click)=\"onClick($event)\"\n >{{ item.content }}</a>\n </li>\n</ol>\n","styles":["@import\"//fonts.googleapis.com/css?family=Montserrat\";:host::ng-deep .menu-title .menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep{font-size:1.5em;outline:none!important}:host::ng-deep .menu-title{font-size:1em;background-color:#ffffff1a;margin:0 0 1px;position:relative;display:flex;align-items:center;border-left:solid rgba(255,255,255,.3) .2em;padding:.2em .3em}:host::ng-deep .menu-title .menu-icons{border-radius:.25em;height:1.5em;width:1.5em}:host::ng-deep .menu-title .menu-arrow{padding:.2em .5em;height:1em;width:1em;opacity:.5;transform:rotate(0);transition:opacity .25s ease-in-out}:host::ng-deep .menu-title .menu-item{text-decoration:none;font-size:.6em;font-family:\"Montserrat\",sans-serif;font-weight:400;color:#fff6;padding:1.2em .7em;flex-grow:1;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:67%}:host::ng-deep .menu-title.active .menu-arrow{transform:rotate(180deg);transition:transform .25s ease-in-out}:host::ng-deep .menu-title:not(hover) .menu-icons{transform:scale(1);transition:transform .2s ease-in-out}:host::ng-deep .menu-title:hover .menu-icons{transform:scale(1.2);transition:transform .2s ease-in-out}:host::ng-deep .menu-title.dark{margin:0;border-bottom:solid 1px #38393c;border-left:solid transparent .2em}:host::ng-deep .menu-title.dark:not(hover){background-color:#2c2c2f;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.dark:hover{background-color:#4b4d52;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid{margin:0;border-bottom:solid .5px rgba(255,255,255,.1);border-left:solid transparent .2em}:host::ng-deep .menu-title.translucid:not(hover){background-color:#ffffff0d;transition:background-color .3s ease-in-out}:host::ng-deep .menu-title.translucid:hover{background-color:#ffffff1a;transition:background-color .3s ease-in-out}:host::ng-deep .subitem-container,:host::ng-deep .menu-title,:host::ng-deep .menu-item{outline:none!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host::ng-deep .subitem-container .menu-title{transform:scaleY(0);transition:transform .3s ease-in-out}:host::ng-deep .subitem-container.active .menu-title{transform:scaleY(1);transition:transform .3s ease-in-out;transition-delay:.1s}\n"]}]}],"members":{"itemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"absolute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"menuLogo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"href":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"fragment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"alt":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"hasSubitem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"subItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"$click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":58,"character":21},{"__symbolic":"reference","name":"GlComponentMenuService"}]}],"openAbsoluteLink":[{"__symbolic":"method"}],"toggleActive":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}]}},"GlComponentMenuItemInterface":{"__symbolic":"error","message":"Unsupported bundled module reference","context":{"module":"./gl-ng-menus-frontend/src/lib/component/menu/item/gl-component-menu-item.interface"}},"GlComponentMenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"gl-component-menu","template":"<gl-component-menu-background\n #background\n (click)=\"service.backgroundClick($event)\"\n></gl-component-menu-background>\n<div #container class=\"menu-container {{ className }} {{ menuPosition === 'left' ? 'left' : 'right' }}\">\n <nav class=\"menu-nav-container\">\n <ul class=\"menu-content\">\n <li class=\"menu-header-container\">\n <div class=\"menu-header\">\n <div class=\"menu-top-icons-container\">\n <img id=\"close-menu-button\"\n (click)=\"service.close($event)\"\n [src]=\"closeButton\"\n class=\"menu-icons close-menu\"\n alt=\"Close menu button\">\n <img\n *ngIf=\"showSettings\"\n id=\"settings-menu-button\"\n (click)=\"service.goToSettings(settingsUrl, settingsTarget)\"\n [src]=\"settingsButton\"\n class=\"menu-icons settings-menu\"\n alt=\"Settings menu button\">\n <img\n *ngIf=\"showLogout\"\n id=\"logout-menu-button\"\n (click)=\"$logoutClick.emit($event)\"\n [src]=\"logoutButton\"\n class=\"menu-icons logout-menu\"\n alt=\"Close menu button\">\n\n <div class=\"logo-container\">\n <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>\n </div>\n\n </div>\n <div class=\"menu-header-title\">\n <h1 class=\"title\">{{ title }}</h1>\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n <h3 class=\"system-version\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</h3>\n </div>\n </div>\n </li>\n <li class=\"menu-content-container {{ title?.length > 0 ? 'has-title' : '' }}\">\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItems\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [target]=\"menuItem.target\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n <gl-component-menu-item\n *ngFor=\"let menuItem of menuItemsComplex\"\n [absolute]=\"menuItem.absolute\"\n [alt]=\"menuItem.alt\"\n [src]=\"menuItem.src\"\n [fragment]=\"menuItem.fragment\"\n [routerLink]=\"menuItem.href\"\n [href]=\"menuItem.href\"\n [content]=\"menuItem.content\"\n [itemClass]=\"menuItem.class\"\n [hasSubitem]=\"menuItem.hasSubitem\"\n [active]=\"menuItem.active\"\n [target]=\"menuItem.target\"\n [subItems]=\"menuItem.subItems\"\n ($click)=\"$click.emit($event)\"\n ></gl-component-menu-item>\n </li>\n<!-- <li class=\"logo-main-container\">-->\n<!-- <div class=\"logo-container\">-->\n<!--&lt;!&ndash; <img class=\"main-logo\" [src]=\"menuLogo\" alt=\"Menu Logo\"/>&ndash;&gt;-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomTitle }}</span>-->\n<!-- <span class=\"main-logo-title\">{{ menuBottomVersion == null ? 'Version: ' + systemVersion : menuBottomVersion }}</span>-->\n<!-- </div>-->\n<!-- </li>-->\n </ul>\n </nav>\n</div>\n","styles":["@import\"//fonts.googleapis.com/css?family=Montserrat:300\";@import\"//fonts.googleapis.com/css?family=Montserrat:700\";:host::ng-deep .menu-container{height:100vh;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host::ng-deep .visible-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-in;animation-name:blur-animation-in;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}@keyframes blur-animation-in{0%{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}to{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}}:host::ng-deep .hide-background{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-animation-name:blur-animation-out;animation-name:blur-animation-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}@keyframes blur-animation-out{0%{-webkit-backdrop-filter:blur(10px) opacity(1);backdrop-filter:blur(10px) opacity(1)}to{-webkit-backdrop-filter:blur(10px) opacity(0);backdrop-filter:blur(10px) opacity(0)}}:host::ng-deep{font-size:1em}:host::ng-deep .menu-container{font-size:1em;border-top:.1em solid rgba(255,255,255,.3);background-color:#0006;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);position:fixed;background-size:cover;top:0;bottom:0;overflow:hidden;width:100vw;min-width:100vw;z-index:10000;flex-grow:1;display:flex}:host::ng-deep .menu-container.left{left:-110vw;transition:left .5s ease-in-out}:host::ng-deep .menu-container.right{right:-110vw;transition:right .5s ease-in-out}:host::ng-deep .menu-container .a{display:block}:host::ng-deep .menu-container .menu-nav-container{overflow:hidden;max-height:calc(1vh * 100);max-height:calc(var(--vh, 1vh) * 100);flex-grow:1;display:flex}:host::ng-deep .menu-container .menu-nav-container .menu-content{display:flex;flex-direction:column;flex-grow:1;position:relative}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container{display:flex;flex-direction:column;padding:.5em 1em 1em .5em;min-width:calc(100% - 1em);max-width:calc(100vw - 1.2em)}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header{display:flex;flex-direction:column}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container{display:flex;margin:0 0 1.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo{cursor:pointer;height:2.8em;width:2.8em;border-radius:.5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logout-menu:hover,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:active,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .main-logo:hover{opacity:1;-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .close-menu,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .settings-menu{margin:0 .4em 0 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-top-icons-container .logo-container{display:flex;flex-grow:1;justify-content:flex-end}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title{padding:0 0 0 .5em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle,:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;margin:0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .title{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:1.2em;padding:.2em 0}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .subtitle{font-family:\"Montserrat\",sans-serif;font-weight:300;font-size:1.2em}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .menu-header .menu-header-title .system-version{font-family:\"Montserrat\",sans-serif;font-weight:700;font-size:.6em;margin:1em 0 0;padding:1em 0;color:#d24077}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-header-container .admin-settings{visibility:collapse}:host::ng-deep .menu-container .menu-nav-container .menu-content .menu-content-container{display:flex;flex-direction:column;flex-grow:1;overflow-x:hidden!important;overflow-y:auto;border-bottom:.1em solid rgba(255,255,255,.3)}:host::ng-deep .show-admin-settings{visibility:visible!important}:host::ng-deep .menu-container.menu-active.left{left:0}:host::ng-deep .menu-container.menu-active.right{right:0}:host::ng-deep .menu-background{opacity:0;z-index:-100}:host::ng-deep .visible-background{width:100vw;height:calc(1vh * 100);height:calc(var(--vh, 1vh) * 100);background-color:#0000004d;opacity:1;position:fixed;top:0;z-index:999;transition:opacity 1s ease-in-out}:host::ng-deep .hide-background{opacity:0;transition:opacity 1.1s ease-in-out}:host::ng-deep .hide-subtitle{opacity:0;visibility:collapse;margin:0;padding:0;transition:opacity .25s ease-in-out}:host::ng-deep .show-subtitle{opacity:1;visibility:visible;transition:opacity .25s ease-in-out;transition-delay:.4s}:host::ng-deep .hide-subtitle-container{-webkit-animation:hide-subtitle .4s ease-in-out;animation:hide-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .show-subtitle-container{-webkit-animation:show-subtitle .4s ease-in-out;animation:show-subtitle .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .collapsed-menu .expand{transform:rotate(0);transition:transform .4s ease-in-out}:host::ng-deep .collapsed-menu .menu-icons{-webkit-animation:decrease-increase .4s ease-in-out;animation:decrease-increase .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .expanded-menu .expand{transform:rotate(-180deg);transition:transform .4s ease-in-out}:host::ng-deep .expanded-menu .menu-icons{-webkit-animation:increase-decrease .4s ease-in-out;animation:increase-decrease .4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host::ng-deep .menu-container.dark{border-left:solid 1px #38393c;border-top:solid .3em rgba(210,64,119,.7);border-image-source:none}:host::ng-deep .menu-container.translucid{background:rgba(255,255,255,.05);border-left:solid 1px rgba(255,255,255,.05);border-top:solid .3em rgba(255,255,255,.1);border-image-source:none}@media screen and (min-width: 300px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.2em}}@media screen and (min-width: 360px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: portrait){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (min-width: 700px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header .menu-header-title{font-size:1.5em}}@media screen and (max-height: 350px) and (orientation: landscape){:host::ng-deep .menu-container .menu-header-container{padding:.5em 1em 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-top-icons-container{margin:0 0 .5em!important}:host::ng-deep .menu-container .menu-header-container .menu-header .menu-header-title{font-size:1em}}@media screen and (min-width: 700px){:host::ng-deep .menu-container{width:23em;min-width:23em}}\n"]}]}],"members":{"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["container",{"static":true,"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":12,"character":48}}]}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":["background",{"static":true,"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":13,"character":49}}]}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"subtitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"systemVersion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"menuItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"menuItemsComplex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"showSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"showLogout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"settingsUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"settingsTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"menuLogo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"menuBottomTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"menuBottomVersion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"menuPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"logoutButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"settingsButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"$click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"$logoutClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"GlComponentMenuService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":41,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}]}},"GlComponentMenuService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnDestroy":[{"__symbolic":"method"}],"initialize":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"goToSettings":[{"__symbolic":"method"}],"backgroundClick":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"GlComponentMenuInterface":{"__symbolic":"error","message":"Unsupported bundled module reference","context":{"module":"./gl-ng-menus-frontend/src/lib/component/menu/gl-component-menu.interface"}},"GlNgMenusComponentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"GlComponentMenuBackgroundComponent"},{"__symbolic":"reference","name":"GlComponentMenuItemComponent"},{"__symbolic":"reference","name":"GlComponentMenuComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":15,"character":4}],"exports":[{"__symbolic":"reference","name":"GlComponentMenuBackgroundComponent"},{"__symbolic":"reference","name":"GlComponentMenuItemComponent"},{"__symbolic":"reference","name":"GlComponentMenuComponent"}]}]}],"members":{}},"GlNgMenusFrontendModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"declarations":[],"imports":[{"__symbolic":"reference","name":"GlNgMenusComponentModule"}],"exports":[{"__symbolic":"reference","name":"GlNgMenusComponentModule"}]}]}],"members":{}},"TTheme":{"__symbolic":"interface"}},"origins":{"GlComponentMenuBackgroundComponent":"./gl-ng-menus-frontend/src/lib/component/menu/background/gl-component-menu-background.component","GlComponentMenuItemComponent":"./gl-ng-menus-frontend/src/lib/component/menu/item/gl-component-menu-item.component","GlComponentMenuItemInterface":"./wrapper_menus","GlComponentMenuComponent":"./gl-ng-menus-frontend/src/lib/component/menu/gl-component-menu.component","GlComponentMenuService":"./gl-ng-menus-frontend/src/lib/component/menu/gl-component-menu.service","GlComponentMenuInterface":"./wrapper_menus","GlNgMenusComponentModule":"./gl-ng-menus-frontend/src/lib/component/component.module","GlNgMenusFrontendModule":"./gl-ng-menus-frontend/src/lib/gl-ng-menus-frontend.module","TTheme":"./gl-ng-menus-frontend/src/lib/interfaces/global.interface"},"importAs":"gl-ng-menus-frontend"}

4

package.json
{
"name": "gl-ng-menus-frontend",
"version": "4.0.0",
"version": "4.0.1",
"description": "Common code and components designed for Angular 2+ to be used among web front-end development.",

@@ -28,3 +28,3 @@ "main": "bundles/gl-ng-menus-frontend.umd.js",

"dependencies": {
"gl-scss-styles": "^3.0.1",
"gl-scss-styles": "^3.1.0",
"gl-icons-assets": "^1.5.0",

@@ -31,0 +31,0 @@ "smooth-scroll": "^16.1.3",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc