@energycap/components 0.27.3-ECAPID-377-Implement-Sidebar.20220125-1124 → 0.27.3-ECAPID-377-Nav-Item-Test.20220125-1635
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/energycap-components.umd.js +6 -2
- package/bundles/energycap-components.umd.js.map +1 -1
- package/bundles/energycap-components.umd.min.js +1 -1
- package/bundles/energycap-components.umd.min.js.map +1 -1
- package/energycap-components.metadata.json +1 -1
- package/esm2015/lib/controls/menu/menu.component.js +5 -2
- package/esm2015/lib/controls/navigation/nav-item-active.directive.js +3 -2
- package/fesm2015/energycap-components.js +6 -2
- package/fesm2015/energycap-components.js.map +1 -1
- package/lib/controls/menu/menu.component.d.ts +4 -0
- package/lib/controls/navigation/nav-item-active.directive.d.ts +6 -1
- package/package.json +1 -1
|
@@ -2682,6 +2682,9 @@
|
|
|
2682
2682
|
*/
|
|
2683
2683
|
this.lastSelected = null;
|
|
2684
2684
|
}
|
|
2685
|
+
MenuComponent.prototype.onRouterLinkActivated = function (event) {
|
|
2686
|
+
this.selectItem(event.event, event.item);
|
|
2687
|
+
};
|
|
2685
2688
|
/**
|
|
2686
2689
|
* Sets & displays the interalized template based on
|
|
2687
2690
|
* the set template.
|
|
@@ -2989,7 +2992,7 @@
|
|
|
2989
2992
|
MenuComponent.decorators = [
|
|
2990
2993
|
{ type: i0.Component, args: [{
|
|
2991
2994
|
selector: 'ec-menu',
|
|
2992
|
-
template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"item-wrapper\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"
|
|
2995
|
+
template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"item-wrapper\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemCurrentItem]=\"item\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"onRouterLinkActivated($event)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon {{item.icon}}\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>",
|
|
2993
2996
|
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{background-color:#fff;display:block;font-size:.875rem;font-weight:400}:host.open>nav>.child,:host.open>nav>.parent{height:100%;left:0;position:absolute;right:0;top:0;transition:transform .25s ease}:host.open>nav>.parent{transform:translateX(0)}:host.open>nav>.child{transform:translateX(100%)}:host.open-active>nav>.parent{transform:translateX(-100%)}:host.open-active>nav>.child{transform:translateX(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{height:100%;overflow:hidden}.parent,nav{display:flex;position:relative}.parent{flex:auto;flex-direction:column;max-width:100%}.parent>header{background-color:#dee2e4;color:rgba(26,26,35,.66);cursor:pointer}.parent>header.is-highlighted,.parent>header.is-selected{background-color:#d9edf2}.parent>header:hover{background-color:#bfe0e9}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{flex:auto;height:100%;list-style:none;margin:0;overflow-y:auto;padding:0}ul li{cursor:pointer}ul li.is-highlighted,ul li.is-selected{background-color:#d9edf2}ul li:hover{background-color:#bfe0e9}ul li:focus{background-color:rgba(26,26,35,.38);outline:none}ul li:active{background-color:#0084a9;color:#fff}ul li.is-disabled,ul li:disabled{color:rgba(26,26,35,.66);cursor:default;opacity:.65}ul li a{border-bottom:0;color:inherit;text-decoration:none}ul li.heading{background-color:#dee2e4;color:rgba(26,26,35,.66)}ul li.heading .item-wrapper{cursor:default}ul li.divider{border-bottom:1px solid #d2d7d9}ul li.is-disabled,ul li.is-readonly{background-color:transparent;color:inherit;cursor:default}ul li.is-checked .icon-check{opacity:1}.item-wrapper{color:inherit;cursor:inherit;display:flex;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{flex:none;margin-top:.125rem}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:.25rem}.item-wrapper .icon-check{opacity:0}.no-data-message{color:rgba(26,26,35,.38);display:none;font-size:1rem;margin-bottom:0;padding:1rem;text-align:center}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li{white-space:nowrap}:host-context(ec-tree) li.is-highlighted,:host-context(ec-tree) li.is-selected{font-weight:700}:host-context(ec-tree) li.is-highlighted:not(:hover),:host-context(ec-tree) li.is-selected:not(:hover){background-color:transparent}"]
|
|
2994
2997
|
},] }
|
|
2995
2998
|
];
|
|
@@ -3819,7 +3822,7 @@
|
|
|
3819
3822
|
if (this._url && this.classValue) {
|
|
3820
3823
|
if (this.router.isActive(this._url, this._exact)) {
|
|
3821
3824
|
this.renderer.addClass(this.el.nativeElement, this.classValue);
|
|
3822
|
-
this.routerLinkActivated.emit(new Event('routerLinkActivated'));
|
|
3825
|
+
this.routerLinkActivated.emit({ event: new Event('routerLinkActivated'), item: this.currentItem });
|
|
3823
3826
|
}
|
|
3824
3827
|
else {
|
|
3825
3828
|
this.renderer.removeClass(this.el.nativeElement, this.classValue);
|
|
@@ -3843,6 +3846,7 @@
|
|
|
3843
3846
|
classValue: [{ type: i0.Input, args: ['ecNavItemActive',] }],
|
|
3844
3847
|
exact: [{ type: i0.Input, args: ['ecNavItemActiveExactMatch',] }],
|
|
3845
3848
|
queryParams: [{ type: i0.Input, args: ['ecNavItemActiveQueryParams',] }],
|
|
3849
|
+
currentItem: [{ type: i0.Input, args: ['ecNavItemCurrentItem',] }],
|
|
3846
3850
|
url: [{ type: i0.Input, args: ['ecNavItemActiveUrl',] }],
|
|
3847
3851
|
routerLinkActivated: [{ type: i0.Output }]
|
|
3848
3852
|
};
|