nd-gui
Version:
UI components for NetDocuments
3 lines (2 loc) • 20.5 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("nd-gui/core"),require("nd-common"),require("@angular/common")):"function"==typeof define&&define.amd?define("nd-gui/menu",["exports","@angular/core","nd-gui/core","nd-common","@angular/common"],t):t((e["nd-gui"]=e["nd-gui"]||{},e["nd-gui"].menu={}),e.ng.core,e["nd-gui"].core,e.ndCommon,e.ng.common)}(this,function(e,i,o,n,t){"use strict";var r=function(){function e(e){var t=this;this.element=e,this.setFocus=new i.EventEmitter,this.showIcons=!1,this.columns=1,this.isOpenEmitter=new i.EventEmitter,this.modelChange=new i.EventEmitter,this.setFocus.asObservable().subscribe(function(e){setTimeout(function(){e&&t.element.nativeElement.querySelector("ul.ndMenu-list").focus()},150)})}return Object.defineProperty(e.prototype,"open",{get:function(){return this._open},set:function(e){this._open=e,this.isOpenEmitter.emit(e),e&&this.setFocus.emit(!0)},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.parentContainer instanceof Element||(this.parentContainer=null)},e.prototype.close=function(){this.open=!1},e.prototype.onMenuBlur=function(){this.open=!1},e.prototype.mouseEnterListener=function(e){e.classList.add("highlighted")},e.prototype.mouseLeaveListener=function(e){e.classList.remove("highlighted")},e.prototype.itemClickedHandler=function(e,t){this.model.forEach(function(e){e.selected=!1}),e.selected=t,this.modelChange.emit(this.model),this.open=!1},e}();r.decorators=[{type:i.Component,args:[{selector:"nd-menu",template:'<div #ndMenuBox *ngIf="open" \n class="nd-menu-box columns-{{columns}}" [ngClass]="classList" \n [attr.id]="Id" \n [ngStyle]="inlineStyle"\n (clickOutside)="onMenuBlur()"\n [containerElements]="[ndMenuBox, parentContainer || ndMenuBox.parentNode.parentNode]"\n [manuallyActiveElement]="true">\n <ul tabindex="-1" [nd-menu-nav]="open" class="ndMenu-list">\n <li *ngFor="let item of model"\n [ngClass]="item.id"\n tabindex="-1"\n title="{{item.hoverTip}}"\n [class.disabled]="item.disabled"\n [class.divider]="item.divider"\n [class.selected]="item.selected"\n [nd-menu-item]="item" \n (selected)="itemClickedHandler(item, $event)"\n [attr.aria-label]="item.label">\n <hr *ngIf="item.divider" />\n {{item.label || item.id}}\n <span *ngIf="item.selected" class="fa fa-check"></span>\n <i *ngIf="showIcons && item.icon" class="icon {{item.icon}}"></i>\n </li>\n </ul> \n <ng-content select=".nd-menu-footer"></ng-content>\n</div>',styles:['*{-webkit-box-sizing:border-box;box-sizing:border-box}.ui-widget{font-family:\'Open Sans\',sans-serif;font-size:14px;font-weight:400;font-style:normal;font-stretch:normal;color:#000}.ui-widget .ui-widget,.ui-widget button,.ui-widget input,.ui-widget select,.ui-widget textarea{font-size:1em}.ui-widget.ui-widget-content{border:none;overflow-x:hidden}.ui-widget.ui-widget-content .ui-overlaypanel-content{padding:0}.ui-widget-content{border:none;background:#fff;color:#000}.ui-widget-content a{color:#000}.ui-widget-header{border:1px solid #194062;background:#225582;color:#fff;font-weight:400}.ui-widget-header a{color:#fff}.ui-chkbox{margin:5px 14px 5px 5px}.ui-chkbox .ui-chkbox-box{cursor:pointer;vertical-align:middle;margin-right:0;height:16px;width:16px;position:relative}.ui-chkbox .ui-chkbox-icon{font-weight:700;font-size:17px;position:absolute;top:-2px;left:-1px}.ui-chkbox-box .ui-chkbox-icon.fa-close:before{content:"\\f068"!important}.ui-button,.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,html .ui-button.ui-state-disabled:active,html .ui-button.ui-state-disabled:hover{border:1px solid #e8e8e8;background:#fff;font-weight:400;color:#000}.ui-button,.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button{color:#000;text-decoration:none}.ui-button:focus,.ui-button:hover,.ui-state-focus,.ui-state-hover,.ui-widget-content .ui-state-focus,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-focus,.ui-widget-header .ui-state-hover{border:1px solid #225582;background:#fff;font-weight:400;color:#000}.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,a.ui-button:focus,a.ui-button:hover{color:#fff;text-decoration:none}.ui-visual-focus{-webkit-box-shadow:0 0 3px 1px #5e9ed6;box-shadow:0 0 3px 1px #5e9ed6}.ui-button.ui-state-active:hover,.ui-button:active,.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active{border:1px solid #225582;background:#1e4c74;font-weight:400;color:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#225582;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:none;background:#e0ecf7;color:#000}.ui-state-checked{border:1px solid #e66e25;background:#e66e25}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#fff}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #df2e2e;background:#fff;color:#666}.ui-state-error a,.ui-state-error-text,.ui-widget-content .ui-state-error a,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error a,.ui-widget-header .ui-state-error-text{color:#666}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:700}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:400}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-corner-all,.ui-corner-left,.ui-corner-tl,.ui-corner-top{border-top-left-radius:1px}.ui-corner-all,.ui-corner-right,.ui-corner-top,.ui-corner-tr{border-top-right-radius:1px}.ui-corner-all,.ui-corner-bl,.ui-corner-bottom,.ui-corner-left{border-bottom-left-radius:1px}.ui-corner-all,.ui-corner-bottom,.ui-corner-br,.ui-corner-right{border-bottom-right-radius:1px}.ui-widget-overlay{background:#000;opacity:.35;filter:Alpha(Opacity=35)}.ui-widget-shadow{box-shadow:0 0 3px 0 rgba(0,0,0,.14),0 2px 4px 0 rgba(0,0,0,.18);-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.14),0 2px 4px 0 rgba(0,0,0,.18)}.ui-inputtext.ui-state-default{height:32px;padding:0 20px}.ui-menu{margin-top:4px;white-space:nowrap}@media screen and (max-height:900px){.ui-menu{max-height:450px;overflow-y:auto}}@media screen and (max-height:500px){.ui-menu{max-height:200px;overflow-y:auto}}@media screen and (min-height:901px){.ui-menu{max-height:500px;overflow-y:auto}}.ui-menu::-webkit-scrollbar{background-color:#fff;width:5px}.ui-menu::-webkit-scrollbar-thumb{background-color:#c2c2c2;border-radius:10px}.ui-menu .ui-menuitem,.ui-menu .ui-menuitem-link{line-height:34px}.ui-menu .ui-menuitem-link{padding:0 20px;border:0}.ui-menu .ui-menuitem-link.ui-state-disabled:hover{background-color:#fff}.ui-menuitem-text{vertical-align:middle}.ui-menu .ui-menuitem-link .ui-menuitem-icon{margin-right:8px;color:#225582}.ui-menu-selectable .ui-menuitem-icon{float:right;margin-top:13px}.ui-menu-selectable .ui-menuitem-icon~.ui-menuitem-text{font-weight:700;color:#225582}.ui-menu .ui-menu-parent .ui-submenu-icon{margin-top:12px}.ui-menu .ui-menu-parent .ui-menu-child{padding:0}.ui-dropdown{height:32px}.ui-dropdown .ui-dropdown-list{padding:0;border:none}.ui-dropdown .ui-dropdown-item:hover,.ui-menu .ui-menuitem-link.keyOrMouseNav,.ui-menu .ui-menuitem-link:hover{background-color:#e0ecf7}.ui-dropdown .ui-dropdown-trigger{border:0;padding:0 15px;width:auto}.ui-dropdown .ui-dropdown-trigger .fa{margin-top:10px}.ui-dropdown .ui-dropdown-label{line-height:24px}.ui-dropdown .ui-state-highlight{background-color:#fff;color:#225582;font-weight:700}.ui-dropdown .ui-state-highlight span::after{font-family:FontAwesome;content:"\\f00c";float:right;padding-top:2px}.ui-autocomplete-panel,.ui-dropdown-panel{margin-top:10px;z-index:7!important}.ui-autocomplete-input.ui-state-default,.ui-dropdown.ui-state-default{border:1px solid #e8e8e8;height:32px;padding:0 15px}.ui-autocomplete-panel .ui-autocomplete-list,.ui-menu{padding:0}.ui-autocomplete-panel .ui-autocomplete-list-item,.ui-dropdown-panel .ui-dropdown-item,.ui-menu .ui-menuitem{margin:0}.ui-autocomplete-panel .ui-autocomplete-list-item,.ui-dropdown .ui-dropdown-item{line-height:34px;padding:0 20px}.ui-button{outline:0}.ui-button.ui-state-default{background-color:#225582;border:none;color:#fff;height:38px;min-width:110px;padding-left:15px;padding-right:15px}.ui-button:hover{background-color:#39668e}.ui-button:active{background-color:#1e4c74}.ui-button:disabled{background-color:#6488a7;color:#225582;cursor:default}.ui-button-secondary.ui-state-default{background-color:#979797}.ui-button-secondary:enabled:hover{background-color:#a1a1a1}.ui-button-secondary:enabled:active{background-color:#878787}.ui-button-secondary:disabled{background-color:#b6b6b6;color:#979797}.ui-button-multi.ui-state-default{background-color:#fff;border:1px solid #e66e25;color:#e66e25}.ui-button-multi:hover{background-color:#e66e25;color:#fff}.ui-button-multi:active{background-color:#d86722;color:#fff}.ui-button-multi:disabled{background-color:#ed9966;color:#e66e25}.ui-chkbox .ui-chkbox-box{border-radius:0;border:1px solid #979797}.ui-chkbox-box.ui-state-active,.ui-chkbox-box.ui-state-focus{background-color:#fff;color:#225582}.ui-chkbox-box.ui-state-disabled{background-color:#e8e8e8;color:#979797;opacity:1}.ui-radiobutton .ui-state-disabled{opacity:1;background-color:#e8e8e8}.ui-radiobutton .ui-state-disabled .ui-radiobutton-icon{color:#979797}.ui-radiobutton{margin:5px 14px 5px 5px}.ui-radiobutton .ui-state-default{border-color:#979797}.ui-radiobutton .ui-state-active{background:#fff}.ui-radiobutton .ui-radiobutton-icon{vertical-align:middle;margin-bottom:50%;color:#225582;font-size:16px;left:48%}.ui-datepicker{margin-top:4px}.ui-datepicker th{font-weight:400}.ui-datepicker-calendar .ui-state-default{border:0}.recent-header-search-tooltip>.ui-tooltip-arrow{display:none}.recent-header-search-tooltip.ui-tooltip{padding:0;top:inherit!important;min-width:250px}.recent-header-search-tooltip>.ui-tooltip-text{color:#000;background-color:#fff;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.16);box-shadow:0 2px 4px 0 rgba(0,0,0,.16);border:1px solid #accbe9;min-width:150px;min-height:20px;white-space:normal;padding:12px 20px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{padding-right:31px;font-size:12px;line-height:2;color:#7f7f7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:text-top}@media screen and (min-width:992px){.recent-header-search-tooltip>.ui-tooltip-text{width:300px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{width:105px;max-width:105px}}@media screen and (min-width:1268px){.recent-header-search-tooltip>.ui-tooltip-text{width:430px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{width:130px;max-width:130px}}@media screen and (min-width:1400px){.recent-header-search-tooltip>.ui-tooltip-text{width:470px}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-text{width:150px;max-width:150px}}.recent-header-search-tooltip>.ui-tooltip-text .rc-criteria-value{word-break:break-all;min-width:160px;width:100%;max-width:100%;vertical-align:text-top}.recent-header-search-tooltip>.ui-tooltip-text .rc-subfolders-value{white-space:pre;overflow:hidden;text-overflow:ellipsis;max-width:290px}.recent-header-search-tooltip.ui-tooltip-bottom{left:inherit!important}.headerSearchScopeSelector{width:280px;margin-top:33px;left:auto!important;top:22px!important}.headerSearchScopeSelector a.ui-menuitem-link .ui-menuitem-text{display:inline-block;overflow:hidden;padding-right:20px;text-overflow:ellipsis;white-space:nowrap;width:100%}.ui-menu li.ui-menuitem .ui-menuitem-link[target=separator]{height:0;display:block;padding:0;min-height:0;border-bottom:1px solid #525252;width:calc(100% - 40px);margin:2px 0 2px 20px}.ui-confirmdialog{width:668px!important;background-color:#fff!important;-webkit-box-shadow:0 -1px 2px 0 rgba(0,0,0,.15)!important;box-shadow:0 -1px 2px 0 rgba(0,0,0,.15)!important}.ui-helper-clearfix::after,.ui-helper-clearfix::before{content:initial!important}.ui-confirmdialog .ui-dialog-titlebar{height:74px!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important;padding:25px!important;background-color:#fff!important;color:#000!important}.ui-confirmdialog .ui-dialog-title{font-size:20px!important;margin-right:auto!important}.ui-dialog-footer{padding:0!important}.ui-confirmdialog p-footer{height:74px!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;padding-right:20px!important}.ui-confirmdialog p-footer .accept,.ui-confirmdialog p-footer .reject{width:110px!important;height:38px!important;border-radius:1px!important}.ui-confirmdialog p-footer .reject{background-color:#acacac!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui-confirmdialog p-footer .accept{background-color:#225582!important;margin-left:20px!important}.ui-confirmdialog .ui-dialog-content{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;min-height:110px!important;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.3)!important;box-shadow:0 1px 3px 0 rgba(0,0,0,.3)!important}.ui-confirmdialog .ui-dialog-content i{display:none!important}.ui-confirmdialog span.fa-close::before{font-family:FontAwesome!important;content:"✖"!important;float:right!important;margin-bottom:15px!important;color:#000!important}@-webkit-keyframes ui-progress-spinner-color{0%,100%{stroke:#225582}}@keyframes ui-progress-spinner-color{0%,100%{stroke:#225582}}.breadcrumb-search-results-page:not(.show-breadcrumb){display:none!important}',".nd-menu-box{position:absolute;min-width:130px;min-height:50px;background-color:#fff;-webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.14),0 2px 4px 0 rgba(0,0,0,.18);box-shadow:0 0 3px 0 rgba(0,0,0,.14),0 2px 4px 0 rgba(0,0,0,.18);font-size:13px;color:#000;z-index:7;margin-top:4px;overflow:hidden;padding:0;text-overflow:ellipsis}.nd-menu-box.columns-2{width:calc(211px * 2)}.nd-menu-box.columns-3{width:calc(211px * 3)}.nd-menu-box ul{padding:0;margin:6px 0;overflow:hidden;-webkit-column-break-inside:avoid;break-inside:avoid-column;outline:0}.nd-menu-box.columns-2 ul{-webkit-column-width:209px;column-width:209px;-webkit-column-count:2;column-count:2;-moz-column-count:2;-webkit-column-rule:2px solid #e5e5e5;column-rule:2px solid #e5e5e5;-moz-column-rule:2px solid #e5e5e5;-webkit-column-gap:2px;column-gap:2px;-moz-column-gap:2px}.nd-menu-box.columns-3 ul{-webkit-column-width:209px;column-width:209px;-webkit-column-count:3;column-count:3;-moz-column-count:3;-webkit-column-rule:2px solid #e5e5e5;column-rule:2px solid #e5e5e5;-moz-column-rule:2px solid #e5e5e5;-webkit-column-gap:2px;column-gap:2px;-moz-column-gap:2px}.nd-menu-box li{list-style-type:none;padding:10px 20px;height:38px;-webkit-column-break-inside:avoid;break-inside:avoid-column;outline:0;cursor:default}.nd-menu-box li.highlighted:not(.divider){background-color:#e0ecf7}.nd-menu-box li.highlighted.disabled{background-color:transparent;cursor:default}.nd-menu-box li hr{color:#525252;border-style:solid;border-width:1px;border-top:none}.nd-menu-box li.selected{color:#225582;font-weight:700}.nd-menu-box li.selected .fa-check{float:right;margin-top:2px}.nd-menu-box li.disabled{cursor:default;color:#979797;fill:#979797!important}.nd-menu-box li .icon{float:left;font-size:16px;margin-top:2px;margin-right:10.5px;color:#235583}.nd-menu-footer{border-top:2px solid #e5e5e5;width:100%;height:40px;font-size:13px;font-weight:600;line-height:2.67;color:#225582;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;margin-top:5px}"]}]}],r.ctorParameters=function(){return[{type:i.ElementRef}]},r.propDecorators={open:[{type:i.Input}],model:[{type:i.Input}],Id:[{type:i.Input}],classList:[{type:i.Input}],showIcons:[{type:i.Input}],parentContainer:[{type:i.Input,args:["parent"]}],inlineStyle:[{type:i.Input,args:["style"]}],columns:[{type:i.Input}],isOpenEmitter:[{type:i.Output,args:["openChange"]}],modelChange:[{type:i.Output}]};var a=function(){function e(e){this.el=e}return e.prototype.keyupListener=function(e){if(this.menuIsActive){var t=this.el.nativeElement.querySelector(".highlighted");e.keyCode!=n.UP_ARROW?e.keyCode!=n.DOWN_ARROW?e.keyCode!=n.ENTER&&e.keyCode!=n.SPACE&&(e.keyCode==n.HOME&&this.setFirstChild(),e.keyCode==n.END&&this.setLastChild()):this.nextSibling(t):this.previousSibling(t)}},e.prototype.nextSibling=function(e){if(e){e.classList.remove(o.HIGHLIGHTED);var t=e.nextElementSibling;t?t.classList.contains(o.DISABLED)?this.nextSibling(t):(t.classList.add(o.HIGHLIGHTED),t.focus()):this.setFirstChild()}else this.setFirstChild()},e.prototype.setLastChild=function(){var e=this.el.nativeElement.querySelector("li:last-child");e.classList.add(o.HIGHLIGHTED),e.focus()},e.prototype.previousSibling=function(e){if(e){e.classList.remove(o.HIGHLIGHTED);var t=e.previousElementSibling;t?t.classList.contains(o.DISABLED)?this.previousSibling(t):(t.classList.add(o.HIGHLIGHTED),t.focus()):this.setLastChild()}else this.setLastChild()},e.prototype.setFirstChild=function(){var e=this.el.nativeElement.querySelector("li:first-child");e.classList.add(o.HIGHLIGHTED),e.focus()},e}();a.decorators=[{type:i.Directive,args:[{selector:"[nd-menu-nav]"}]}],a.ctorParameters=function(){return[{type:i.ElementRef}]},a.propDecorators={menuIsActive:[{type:i.Input,args:["nd-menu-nav"]}],keyupListener:[{type:i.HostListener,args:["keydown",["$event"]]}]};var u=function(){function e(e){this.el=e,this.itemSelected=new i.EventEmitter}return e.prototype.mouseEnterHandler=function(){var e=this.el.nativeElement.parentElement.querySelector("."+o.HIGHLIGHTED);e&&e.classList.remove(o.HIGHLIGHTED),this.el.nativeElement.classList.add(o.HIGHLIGHTED)},e.prototype.mouseLeaveHandler=function(){this.el.nativeElement.classList.remove(o.HIGHLIGHTED)},e.prototype.keyEventListener=function(e){e.keyCode!=n.ENTER&&e.keyCode!=n.SPACE||this.executeCommand(this.item,e)},e.prototype.clickEventHandler=function(e){this.executeCommand(this.item,e)},e.prototype.executeCommand=function(e,t){e.disabled||(e.command&&e.command.call(this,e,t),this.itemSelected.emit(!0),t.stopPropagation())},e}();u.decorators=[{type:i.Directive,args:[{selector:"[nd-menu-item]"}]}],u.ctorParameters=function(){return[{type:i.ElementRef}]},u.propDecorators={item:[{type:i.Input,args:["nd-menu-item"]}],itemSelected:[{type:i.Output,args:["selected"]}],mouseEnterHandler:[{type:i.HostListener,args:["mouseenter"]}],mouseLeaveHandler:[{type:i.HostListener,args:["mouseleave"]}],keyEventListener:[{type:i.HostListener,args:["keydown",["$event"]]}],clickEventHandler:[{type:i.HostListener,args:["click",["$event"]]}]};var d=function(){};d.decorators=[{type:i.NgModule,args:[{imports:[t.CommonModule,o.ndClickOutsideModule],declarations:[r,u,a],exports:[r]}]}],e.ndMenuModule=d,e.MenuComponent=r,e.ɵb=u,e.ɵa=a,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=nd-gui-menu.umd.min.js.map