@energycap/components 0.28.1 → 0.28.3
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 +10 -5
- 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/dropdown/dropdown.component.js +1 -1
- package/esm2015/lib/controls/menu/menu.component.js +8 -3
- package/esm2015/lib/display/hierarchy/hierarchy-tree/hierarchy-tree.component.js +2 -2
- package/esm2015/lib/display/tree/tree.component.js +2 -2
- package/fesm2015/energycap-components.js +10 -5
- package/fesm2015/energycap-components.js.map +1 -1
- package/lib/controls/menu/menu.component.d.ts +4 -0
- package/package.json +1 -1
|
@@ -2790,6 +2790,10 @@
|
|
|
2790
2790
|
* want the item to be selected when clicked.
|
|
2791
2791
|
*/
|
|
2792
2792
|
this.maintainSelectedItem = true;
|
|
2793
|
+
/**
|
|
2794
|
+
* Will prevent text-wrapping of menu items and truncate instead. Also turns on a tooltip for the menu item. Default: false;
|
|
2795
|
+
*/
|
|
2796
|
+
this.truncateItems = false;
|
|
2793
2797
|
/**
|
|
2794
2798
|
* Emitted when `selected` is changed. Emits the referenced object.
|
|
2795
2799
|
*
|
|
@@ -3121,8 +3125,8 @@
|
|
|
3121
3125
|
MenuComponent.decorators = [
|
|
3122
3126
|
{ type: i0.Component, args: [{
|
|
3123
3127
|
selector: 'ec-menu',
|
|
3124
|
-
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=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\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 </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\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)=\"selectItem($event, item)\"\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, 'text-heading-3': item?.display === 'heading'}\"\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>",
|
|
3125
|
-
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{cursor:pointer}.parent>header.is-highlighted .item-wrapper,.parent>header.is-selected .item-wrapper{background-color:#d9edf2}.parent>header:hover .item-wrapper{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;padding:0 .25rem}ul li a{border-bottom:0;color:inherit;text-decoration:none}ul li.is-highlighted .item-wrapper,ul li.is-selected .item-wrapper{background-color:#d9edf2}ul li:hover .item-wrapper{background-color:#bfe0e9}ul li:focus .item-wrapper{background-color:rgba(26,26,35,.38);outline:none;position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:rgba(26,26,35,.66);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid #d2d7d9;margin-bottom:.25rem;padding-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{border-radius:var(--ec-border-radius);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
|
|
3128
|
+
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=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\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 </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\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)=\"selectItem($event, item)\"\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, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\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 title=\"{{truncateItems ? item.label : ''}}\"\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 title=\"{{truncateItems ? item.label : ''}}\"\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 [truncateItems]=\"truncateItems\"\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\"\r\n [class.text-truncate]=\"truncateItems\">{{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\"\r\n [class.text-truncate]=\"truncateItems\">{{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\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>",
|
|
3129
|
+
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{cursor:pointer}.parent>header.is-highlighted .item-wrapper,.parent>header.is-selected .item-wrapper{background-color:#d9edf2}.parent>header:hover .item-wrapper{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;padding:0 .25rem}ul li a{border-bottom:0;color:inherit;text-decoration:none}ul li.is-highlighted .item-wrapper,ul li.is-selected .item-wrapper{background-color:#d9edf2}ul li:hover .item-wrapper{background-color:#bfe0e9}ul li:focus .item-wrapper{background-color:rgba(26,26,35,.38);outline:none;position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:rgba(26,26,35,.66);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid #d2d7d9;margin-bottom:.25rem;padding-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{border-radius:var(--ec-border-radius);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.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}"]
|
|
3126
3130
|
},] }
|
|
3127
3131
|
];
|
|
3128
3132
|
MenuComponent.ctorParameters = function () { return [
|
|
@@ -3145,6 +3149,7 @@
|
|
|
3145
3149
|
enableKeyNav: [{ type: i0.Input }],
|
|
3146
3150
|
highlightedItem: [{ type: i0.Input }],
|
|
3147
3151
|
maintainSelectedItem: [{ type: i0.Input }],
|
|
3152
|
+
truncateItems: [{ type: i0.Input }],
|
|
3148
3153
|
selectedChanged: [{ type: i0.Output }],
|
|
3149
3154
|
menuClosed: [{ type: i0.Output }],
|
|
3150
3155
|
labelTemplate: [{ type: i0.ViewChild, args: ['label', { static: true },] }],
|
|
@@ -3324,7 +3329,7 @@
|
|
|
3324
3329
|
{ type: i0.Component, args: [{
|
|
3325
3330
|
selector: 'ec-dropdown',
|
|
3326
3331
|
template: "<div class=\"control\">\r\n <ec-button [disabled]=\"disabled\"\r\n id=\"{{id}}_toggle\"\r\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n *ecPopup=\"dropdownMenu\"\r\n [label]=\"label\"\r\n [icon]=\"icon\"\r\n [tabindex]=\"tabindex\"\r\n [type]=\"buttonType\"\r\n [customTemplate]=\"buttonCustomTemplate\"\r\n [pending]=\"pending\"\r\n title=\"{{buttonTitle}}\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n <span class=\"arrow is-{{buttonType}}\"\r\n *ngIf=\"showArrow\"\r\n [class.is-disabled]=\"disabled\">\r\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n <div id=\"{{id}}_popup\"\r\n class=\"popup\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\">\r\n <!-- Dropdown Menu Title -->\r\n <header id=\"{{id}}_title\"\r\n class=\"text-heading-2 px-2 my-2\"\r\n *ngIf=\"menuTitle\">{{menuTitle}}\r\n </header>\r\n <!-- Dropdown Menu -->\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.wrap-items]=\"menuWidth\"\r\n [templateType]=\"menuTemplateType\"\r\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n [items]=\"items\"\r\n [showNoItems]=\"true\"\r\n [enableKeyNav]=\"true\"\r\n [highlightedItem]=\"highlightedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\">\r\n </ec-menu>\r\n <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n </div>\r\n</ng-template>",
|
|
3327
|
-
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{box-sizing:border-box;display:inline-block}:host(.fill),:host(.fill) .control,:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;display:flex;height:100%;width:100%}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){left:0;position:absolute;top:0}:host(.td-fill) ec-button ::ng-deep button{font-size:.75rem;padding-left:.375rem;padding-right:.375rem}:host(.is-action) .arrow,:host(.is-action) ec-button{color:#0084a9}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host-context(th){color:#1a1a23}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{align-items:center;display:flex;height:100%;pointer-events:none;position:absolute;right:.5rem;top:0;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:rgba(26,26,35,.66);transition:color .3s ease;width:auto}ec-button.has-arrow~.arrow.is-common .ec-icon{color:#fff}ec-button.has-arrow~.arrow.is-link .ec-icon{color:#0084a9}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:rgba(26,26,35,.66);opacity:.5}ec-button.has-arrow ::ng-deep button{padding-right:1.25rem;width:auto}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:#fff;border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:50}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{border-top:.0625rem solid #d2d7d9;color:rgba(26,26,35,.66);font-size:.75rem;line-height:1.2;padding:.1875rem .5rem}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}"]
|
|
3332
|
+
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{box-sizing:border-box;display:inline-block;vertical-align:top}:host(.font-size-inherit) ec-button,:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill),:host(.fill) .control,:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;display:flex;height:100%;width:100%}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){left:0;position:absolute;top:0}:host(.td-fill) ec-button ::ng-deep button{font-size:.75rem;padding-left:.375rem;padding-right:.375rem}:host(.is-action) .arrow,:host(.is-action) ec-button{color:#0084a9}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host-context(th){color:#1a1a23}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{align-items:center;display:flex;height:100%;pointer-events:none;position:absolute;right:.5rem;top:0;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:rgba(26,26,35,.66);transition:color .3s ease;width:auto}ec-button.has-arrow~.arrow.is-common .ec-icon{color:#fff}ec-button.has-arrow~.arrow.is-link .ec-icon{color:#0084a9}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:rgba(26,26,35,.66);opacity:.5}ec-button.has-arrow ::ng-deep button{padding-right:1.25rem;width:auto}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:#fff;border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:50}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{border-top:.0625rem solid #d2d7d9;color:rgba(26,26,35,.66);font-size:.75rem;line-height:1.2;padding:.1875rem .5rem}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}"]
|
|
3328
3333
|
},] }
|
|
3329
3334
|
];
|
|
3330
3335
|
DropdownComponent.ctorParameters = function () { return []; };
|
|
@@ -5856,7 +5861,7 @@
|
|
|
5856
5861
|
HierarchyTreeComponent.decorators = [
|
|
5857
5862
|
{ type: i0.Component, args: [{
|
|
5858
5863
|
selector: 'ec-hierarchy-tree',
|
|
5859
|
-
template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode\">\r\n <div class=\"item-wrapper\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"rootNode?.icon\"></i>\r\n <span class=\"mx-1\">{{rootNode?.label}}</span>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1\">{{item.label}}</span>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1\">{{item.label}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n",
|
|
5864
|
+
template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"rootNode?.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{item.label}}\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n",
|
|
5860
5865
|
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:.875rem}ul{list-style:none;margin:0;overflow-x:hidden}ul,ul li{padding:0}ul li{white-space:nowrap}ul .item-wrapper{align-items:center;border-radius:var(--ec-border-radius);display:flex;height:1.75rem;margin:0 .25rem;padding:0 .25rem}ul .item-wrapper.is-heading{color:rgba(26,26,35,.38);cursor:pointer;font-size:.75rem;font-weight:700;text-transform:uppercase}ul .item-wrapper:hover{background-color:#bfe0e9}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{align-items:center;color:inherit;display:flex;flex:1 1;min-height:0;min-width:0}"]
|
|
5861
5866
|
},] }
|
|
5862
5867
|
];
|
|
@@ -8040,7 +8045,7 @@
|
|
|
8040
8045
|
TreeComponent.decorators = [
|
|
8041
8046
|
{ type: i0.Component, args: [{
|
|
8042
8047
|
selector: 'ec-tree',
|
|
8043
|
-
template: "<header class=\"flex-shrink d-flex align-items-center border-bottom bg-content pl-2 pr-1\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>",
|
|
8048
|
+
template: "<header class=\"flex-shrink d-flex align-items-center border-bottom bg-content pl-2 pr-1\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>",
|
|
8044
8049
|
styles: [":host{display:flex;flex-direction:column}header{height:3rem}ec-dropdown.fill{height:3rem;width:3rem}"]
|
|
8045
8050
|
},] }
|
|
8046
8051
|
];
|