@energycap/components 0.27.10 → 0.28.0

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.
Files changed (48) hide show
  1. package/bundles/energycap-components.umd.js +37 -28
  2. package/bundles/energycap-components.umd.js.map +1 -1
  3. package/bundles/energycap-components.umd.min.js +2 -2
  4. package/bundles/energycap-components.umd.min.js.map +1 -1
  5. package/energycap-components.metadata.json +1 -1
  6. package/energycap-components.min.css +3 -3
  7. package/esm2015/lib/controls/banner/banner.component.js +1 -1
  8. package/esm2015/lib/controls/button/button.component.js +1 -1
  9. package/esm2015/lib/controls/checkbox/checkbox.component.js +1 -1
  10. package/esm2015/lib/controls/combobox/combobox.component.js +1 -1
  11. package/esm2015/lib/controls/dropdown/dropdown.component.js +3 -3
  12. package/esm2015/lib/controls/file-upload/file-upload.component.js +3 -3
  13. package/esm2015/lib/controls/form-control/form-control.component.js +1 -1
  14. package/esm2015/lib/controls/menu/menu.component.js +5 -4
  15. package/esm2015/lib/controls/popover/popover.component.js +1 -1
  16. package/esm2015/lib/controls/radio-button/radio-button.component.js +1 -1
  17. package/esm2015/lib/controls/select/select.component.js +1 -1
  18. package/esm2015/lib/controls/tabs/tabs.component.js +1 -1
  19. package/esm2015/lib/controls/textbox/textbox.component.js +1 -1
  20. package/esm2015/lib/display/app-bar/app-bar.component.js +9 -4
  21. package/esm2015/lib/display/avatar/avatar.component.js +1 -1
  22. package/esm2015/lib/display/dialog/dialog.component.js +1 -1
  23. package/esm2015/lib/display/hierarchy/hierarchy-tree/hierarchy-tree.component.js +3 -3
  24. package/esm2015/lib/display/json-display/json-display.component.js +1 -1
  25. package/esm2015/lib/display/table/table.component.js +1 -1
  26. package/esm2015/lib/display/tags/tags.component.js +1 -1
  27. package/esm2015/lib/display/tree/tree.component.js +2 -2
  28. package/esm2015/lib/shared/page/page-base/page-base.component.js +4 -1
  29. package/fesm2015/energycap-components.js +37 -28
  30. package/fesm2015/energycap-components.js.map +1 -1
  31. package/lib/controls/dropdown/dropdown.component.d.ts +1 -0
  32. package/lib/display/app-bar/app-bar.component.d.ts +3 -2
  33. package/package.json +1 -1
  34. package/src/styles/_global-variables.scss +11 -0
  35. package/src/styles/_variables.scss +1 -4
  36. package/src/styles/components/_card.scss +5 -2
  37. package/src/styles/index.scss +1 -0
  38. package/src/styles/mixins/_button-base.scss +1 -1
  39. package/src/styles/mixins/_control-base.scss +11 -1
  40. package/src/styles/mixins/_dialog-base.scss +2 -2
  41. package/src/styles/mixins/_form-control-base.scss +6 -7
  42. package/src/styles/mixins/_login.scss +1 -0
  43. package/src/styles/mixins/_table-base.scss +7 -2
  44. package/src/styles/mixins/_tabs-base.scss +5 -2
  45. package/src/styles/mixins/_tags-base.scss +2 -2
  46. package/src/styles/utilities/_borders.scss +4 -0
  47. package/src/styles/utilities/_common.scss +30 -2
  48. package/src/styles/utilities/_layout.scss +13 -13
@@ -187,7 +187,7 @@ BannerComponent.decorators = [
187
187
  { type: Component, args: [{
188
188
  selector: 'ec-banner',
189
189
  template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n <ec-button id=\"banner{{id}}_close\"\r\n *ngIf=\"showCloseBtn\"\r\n type=\"icon\"\r\n icon=\"ec-icon-sm icon-cancel\"\r\n (clicked)=\"close()\">\r\n </ec-button>\r\n <div class=\"banner-content d-flex text-body-1 font-color-secondary\">\r\n <i class=\"ec-icon {{icon}}\"></i>\r\n <div class=\"ml-2\">\r\n <p class=\"title mb-0\" *ngIf=\"title\">\r\n {{title}}\r\n </p>\r\n <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n \r\n <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n <li *ngFor=\"let item of list\">{{item}}</li>\r\n </ul>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n",
190
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0}.banner{display:flex;flex:1 1;flex-direction:column;min-height:2.5rem;overflow-y:auto;position:relative}.banner-content{flex:none;margin:auto 0;padding:.5rem 1rem}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{font-size:1.125rem}ec-button{position:absolute;right:.25rem;top:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info{background-color:#dae4e9}.info .banner-content>.ec-icon{color:#2d9ab8}.warning{background-color:#fff8cc}.warning .banner-content>.ec-icon{color:#fa7b2e}.success{background-color:#dff0d8}.success .banner-content>.ec-icon{color:#3c763d}.error{background-color:#ecc4c5}.error .banner-content>.ec-icon{color:#cd1d20}.pinned{border-bottom:1px solid rgba(26,26,35,.08)}.toast{border:1px solid rgba(26,26,35,.08);box-shadow:0 .125rem .625rem 0 rgba(26,26,35,.18)}.toast ec-button{right:.1875rem;top:.1875rem}"]
190
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0}.banner,:host(.border-bottom-0) .banner{border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex:1 1;flex-direction:column;min-height:2.5rem;overflow-y:auto;position:relative}.banner-content{flex:none;margin:auto 0;padding:.5rem 1rem}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{font-size:1.125rem}ec-button{position:absolute;right:.25rem;top:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info{background-color:#dae4e9}.info .banner-content>.ec-icon{color:#2d9ab8}.warning{background-color:#fff8cc}.warning .banner-content>.ec-icon{color:#fa7b2e}.success{background-color:#dff0d8}.success .banner-content>.ec-icon{color:#3c763d}.error{background-color:#ecc4c5}.error .banner-content>.ec-icon{color:#cd1d20}.pinned{border-bottom:1px solid rgba(26,26,35,.08);border-radius:0}.toast{border:1px solid rgba(26,26,35,.08);box-shadow:var(--ec-box-shadow)}.toast ec-button{right:.1875rem;top:.1875rem}"]
191
191
  },] }
192
192
  ];
193
193
  BannerComponent.ctorParameters = () => [
@@ -275,7 +275,7 @@ ButtonComponent.decorators = [
275
275
  { type: Component, args: [{
276
276
  selector: 'ec-button',
277
277
  template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>",
278
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{-webkit-appearance:none;color:#1a1a23;display:inline-block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:.875rem;margin:0;padding:0;vertical-align:top}:host(.font-size-inherit),:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-custom,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-icon,:host(.active) .ec-button-link,:host(.active) .ec-button-secondary,:host(.active) .ec-button-text{background-color:#bfe0e9}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:#d2d7d9}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:#0084a9}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:#3c763d}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:#cd1d20}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{height:.625rem;width:.625rem}:host-context(.btn-group) button:focus{position:relative;z-index:1}.ec-button-primary,.ec-button-submit{background-color:#cfd856;border-color:#c1cd23;color:#1a1a23}.ec-button-primary:active:enabled,.ec-button-submit:active:enabled{background-color:#c1cd23;color:#1a1a23}.ec-button-secondary{border-color:#d2d7d9}.ec-button-secondary,.ec-button-secondary:active:enabled{background-color:#fff;color:#1a1a23}.ec-button-common{background-color:#2d9ab8;border-color:#0084a9;color:#fff}.ec-button-common .ec-icon{color:inherit}.ec-button-common:active:enabled{background-color:#0084a9;border-color:#005f7a}.ec-button-icon{background-color:transparent;color:rgba(26,26,35,.66);padding:0;width:2rem}.ec-button-icon .ec-icon{height:1.1428571429em;margin:0;padding:0}.ec-button-icon:hover{background-color:#bfe0e9}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.ec-button-icon.has-badge{min-width:2rem;padding-left:.375rem;padding-right:0;width:auto}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:#1a1a23}.ec-button-text .ec-icon{color:rgba(26,26,35,.66)}.ec-button-text:active:enabled{background-color:transparent;color:#000}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:#0084a9}.ec-button-link .ec-icon{color:inherit}.ec-button-link:active:enabled{background-color:transparent;color:#00485d}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:#e64c4d;border-color:#e33436;color:#fff}.ec-button-danger .ec-icon{color:inherit}.ec-button-danger:active:enabled{background-color:#e33436}.ec-button-danger-text{background-color:transparent;color:#e33436}.ec-button-danger-text .ec-icon{color:inherit}.ec-button-danger-text:active:enabled{background-color:transparent;color:#b2191a}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{background-color:transparent;height:auto;padding:0}.ec-button-custom:disabled{background-color:transparent;border:0}button{align-items:center;background-color:#fff;border:.0625rem solid transparent;border-radius:0;cursor:pointer;display:flex;font-size:.875rem;height:2rem;justify-content:center;line-height:1.25;line-height:1.25rem;padding:.3571428571em .5714285714em;position:relative}button.is-highlighted,button.is-selected{background-color:#d9edf2}button:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;outline:none}button:active{background-color:#0084a9;color:#fff}button.is-disabled,button:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);cursor:default;opacity:.65}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{justify-content:center;white-space:nowrap}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px;padding-left:.4375rem;padding-right:.4375rem}.badge{background-color:#7e579b;border:.125rem solid #fff;border-radius:.5625rem;color:#fff;display:inline-block;font-size:.625rem;font-weight:700;line-height:.875rem;margin-left:-.25rem;margin-top:-.75rem;min-width:1rem;padding:0 .25rem;text-align:center;vertical-align:baseline;white-space:nowrap}:host(.is-tab) button{align-items:center;border:1px solid transparent;border-radius:0;color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:1.5rem;justify-content:center;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{background-color:#d2d7d9;color:#354751}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}:host(.is-tab) button.is-disabled{color:rgba(26,26,35,.38);cursor:default}:host(.is-tab) button.ec-button-icon{justify-content:center;padding:0;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{background-color:#d2d7d9;color:#354751}.pending-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}.pending-container>.ec-icon{color:inherit;flex:none}.pending-container~.badge,.pending-container~.ec-icon,.pending-container~.label{opacity:0}"]
278
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{-webkit-appearance:none;color:#1a1a23;display:inline-block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:.875rem;margin:0;padding:0;vertical-align:top}:host(.font-size-inherit),:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-custom,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-icon,:host(.active) .ec-button-link,:host(.active) .ec-button-secondary,:host(.active) .ec-button-text{background-color:#bfe0e9}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:#d2d7d9}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:#0084a9}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:#3c763d}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:#cd1d20}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{height:.625rem;width:.625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:#cfd856;border-color:#c1cd23;color:#1a1a23}.ec-button-primary:active:enabled,.ec-button-submit:active:enabled{background-color:#c1cd23;color:#1a1a23}.ec-button-secondary{border-color:#d2d7d9}.ec-button-secondary,.ec-button-secondary:active:enabled{background-color:#fff;color:#1a1a23}.ec-button-common{background-color:#2d9ab8;border-color:#0084a9;color:#fff}.ec-button-common .ec-icon{color:inherit}.ec-button-common:active:enabled{background-color:#0084a9;border-color:#005f7a}.ec-button-icon{background-color:transparent;color:rgba(26,26,35,.66);padding:0;width:2rem}.ec-button-icon .ec-icon{height:1.1428571429em;margin:0;padding:0}.ec-button-icon:hover{background-color:#bfe0e9}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.ec-button-icon.has-badge{min-width:2rem;padding-left:.375rem;padding-right:0;width:auto}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:#1a1a23}.ec-button-text .ec-icon{color:rgba(26,26,35,.66)}.ec-button-text:active:enabled{background-color:transparent;color:#000}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:#0084a9}.ec-button-link .ec-icon{color:inherit}.ec-button-link:active:enabled{background-color:transparent;color:#00485d}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:#e64c4d;border-color:#e33436;color:#fff}.ec-button-danger .ec-icon{color:inherit}.ec-button-danger:active:enabled{background-color:#e33436}.ec-button-danger-text{background-color:transparent;color:#e33436}.ec-button-danger-text .ec-icon{color:inherit}.ec-button-danger-text:active:enabled{background-color:transparent;color:#b2191a}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{background-color:transparent;height:auto;padding:0}.ec-button-custom:disabled{background-color:transparent;border:0}button{align-items:center;background-color:#fff;border:.0625rem solid transparent;border-radius:var(--ec-border-radius);cursor:pointer;display:flex;font-size:.875rem;height:2rem;justify-content:center;line-height:1.25;line-height:1.25rem;padding:.3571428571em .5714285714em;position:relative}button.is-highlighted,button.is-selected{background-color:#d9edf2}button:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;outline:none;position:relative;z-index:1}button:active{background-color:#0084a9;color:#fff}button.is-disabled,button:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);cursor:default;opacity:.65}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{justify-content:center;white-space:nowrap}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px;padding-left:.4375rem;padding-right:.4375rem}.badge{background-color:#7e579b;border:.125rem solid #fff;border-radius:.5625rem;color:#fff;display:inline-block;font-size:.625rem;font-weight:700;line-height:.875rem;margin-left:-.25rem;margin-top:-.75rem;min-width:1rem;padding:0 .25rem;text-align:center;vertical-align:baseline;white-space:nowrap}:host(.is-tab) button{align-items:center;border:1px solid transparent;border-radius:var(--ec-border-radius);color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:1.5rem;justify-content:center;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{background-color:#d2d7d9;color:#354751}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none;position:relative;z-index:1}:host(.is-tab) button.is-disabled{color:rgba(26,26,35,.38);cursor:default}:host(.is-tab) button.ec-button-icon{justify-content:center;padding:0;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{background-color:#d2d7d9;color:#354751}.pending-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1}.pending-container>.ec-icon{color:inherit;flex:none}.pending-container~.badge,.pending-container~.ec-icon,.pending-container~.label{opacity:0}"]
279
279
  },] }
280
280
  ];
281
281
  ButtonComponent.ctorParameters = () => [];
@@ -1054,7 +1054,7 @@ CheckboxComponent.decorators = [
1054
1054
  { type: Component, args: [{
1055
1055
  selector: 'ec-checkbox',
1056
1056
  template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\"\r\n [innerHtml]=\"label | translate\">\r\n </span>\r\n </label>\r\n</div>\r\n",
1057
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:rgba(26,26,35,.18)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:#0084a9}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{background-color:currentColor;content:\"\";display:block;height:3px;width:10px}.input:focus+.ec-icon{box-shadow:0 0 0 1px #0084a9;color:#0084a9}.input:disabled+.ec-icon{background-color:rgba(26,26,35,.1);border-color:rgba(26,26,35,.18)}.input:disabled+.ec-icon,.input:disabled~.label{color:rgba(26,26,35,.66);opacity:.65}.ec-icon{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid;border-radius:2px;color:#0084a9;display:inline-flex;flex:none;height:1em;justify-content:center;margin-top:.5rem;pointer-events:none;width:1em}.ec-icon:before{font-size:.6875em}.label{height:2rem;height:auto;line-height:1.25;margin-left:.5rem;min-height:2rem;padding:.375em 0}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:rgba(26,26,35,.12);border:0}.checkbox.is-readonly .ec-icon,.checkbox.is-readonly .label{color:#1a1a23;opacity:1}.no-label .icon-check,.no-label .input{margin-top:0}"]
1057
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:rgba(26,26,35,.18)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:#0084a9}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{background-color:currentColor;content:\"\";display:block;height:3px;width:10px}.input:focus+.ec-icon{box-shadow:0 0 0 1px #0084a9;color:#0084a9}.input:disabled+.ec-icon{background-color:rgba(26,26,35,.1);border-color:rgba(26,26,35,.18)}.input:disabled+.ec-icon,.input:disabled~.label{color:rgba(26,26,35,.66);opacity:.65}.ec-icon{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid;border-radius:.125rem;color:#0084a9;display:inline-flex;flex:none;height:1em;justify-content:center;margin-top:.5rem;pointer-events:none;width:1em}.ec-icon:before{font-size:.6875em}.label{height:2rem;height:auto;line-height:1.25;margin-left:.5rem;min-height:2rem;padding:.375em 0}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:rgba(26,26,35,.12);border:0}.checkbox.is-readonly .ec-icon,.checkbox.is-readonly .label{color:#1a1a23;opacity:1}.no-label .icon-check,.no-label .input{margin-top:0}"]
1058
1058
  },] }
1059
1059
  ];
1060
1060
  CheckboxComponent.ctorParameters = () => [
@@ -1225,7 +1225,7 @@ TextboxComponent.decorators = [
1225
1225
  { type: Component, args: [{
1226
1226
  selector: 'ec-textbox',
1227
1227
  template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>",
1228
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}:host input{background-clip:padding-box;background-color:#fff;background-image:none;border:.0625rem solid #d2d7d9;border-radius:0;height:2rem;line-height:1.25;padding:.3125em .5em;width:100%}:host input::-moz-selection{background-color:#0084a9;color:#fff}:host input::selection{background-color:#0084a9;color:#fff}:host input::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host input::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host input:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host input:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host input:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host input.ng-invalid.ng-touched,:host input:required.is-empty{background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host input.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host input.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending,:host input.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host input:focus,:host input:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host input:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-clip:padding-box;background-color:#fff;background-image:none;border:.0625rem solid #d2d7d9;border-radius:0;display:block;height:auto;line-height:1.25;padding:.3125em .5em;resize:none;width:100%}:host textarea::-moz-selection{background-color:#0084a9;color:#fff}:host textarea::selection{background-color:#0084a9;color:#fff}:host textarea::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host textarea::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host textarea:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host textarea:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host textarea:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host textarea.ng-invalid.ng-touched,:host textarea:required.is-empty{background-position:.25em .5rem;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host textarea.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending,:host textarea.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em .5rem;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host textarea:focus,:host textarea:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host textarea:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}:host(.textbox-group-input:not(:last-child)) input:focus{border-right-width:.0625rem;position:relative;z-index:1}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace}"]
1228
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}:host input{background-clip:padding-box;background-color:#fff;background-image:none;border:.0625rem solid #d2d7d9;border-radius:var(--ec-border-radius);height:2rem;line-height:1.25;padding:.3125em .5em;width:100%}:host input::-moz-selection{background-color:#0084a9;color:#fff}:host input::selection{background-color:#0084a9;color:#fff}:host input::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host input::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host input:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host input:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host input:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host input.ng-invalid.ng-touched,:host input:required.is-empty{background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host input.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host input.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending,:host input.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host input:focus,:host input:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host input:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-clip:padding-box;background-color:#fff;background-image:none;border:.0625rem solid #d2d7d9;border-radius:var(--ec-border-radius);display:block;height:auto;line-height:1.25;padding:.3125em .5em;resize:none;width:100%}:host textarea::-moz-selection{background-color:#0084a9;color:#fff}:host textarea::selection{background-color:#0084a9;color:#fff}:host textarea::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host textarea::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host textarea:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host textarea:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host textarea:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host textarea.ng-invalid.ng-touched,:host textarea:required.is-empty{background-position:.25em .5rem;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host textarea.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending,:host textarea.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em .5rem;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host textarea:focus,:host textarea:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host textarea:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}:host(.textbox-group-input:not(:last-child)) input:focus{border-right-width:.0625rem;position:relative;z-index:1}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace}"]
1229
1229
  },] }
1230
1230
  ];
1231
1231
  TextboxComponent.ctorParameters = () => [
@@ -2258,7 +2258,7 @@ ComboboxComponent.decorators = [
2258
2258
  { type: Component, args: [{
2259
2259
  selector: 'ec-combobox',
2260
2260
  template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': (templateType === 'iconAndLabel' && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n",
2261
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;border-color:#d2d7d9;padding-left:1.5em}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;left:.5rem;position:absolute;top:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75em}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-bottom-right-radius:0;border-right-width:.0625rem;border-top-right-radius:0}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open .textbox-group,.control.is-always-open label{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;border:0;flex:1 1;margin:0;min-height:0;z-index:0}.control.is-always-open ec-menu{border-top:1px solid rgba(26,26,35,.18)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}.popup{background-color:#fff;border:.125rem solid #0084a9;margin-bottom:-1px;margin-top:-1px;z-index:50}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid rgba(26,26,35,.18)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{align-items:center;background-color:#fff;border:0;cursor:pointer;display:flex;height:2rem;line-height:1.25;padding:.25rem .5714285714em;width:100%}.add-new.is-highlighted,.add-new.is-selected{background-color:#d9edf2}.add-new:focus{background-color:rgba(26,26,35,.38);outline:none}.add-new:active{background-color:#0084a9;color:#fff}.add-new.is-disabled,.add-new:disabled{color:rgba(26,26,35,.66);cursor:default;opacity:.65}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new.is-selected,.add-new:hover:not(:active){background-color:#bfe0e9}.add-new:active .ec-icon{color:inherit}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{border-top:1px solid rgba(26,26,35,.18);color:rgba(26,26,35,.38);font-size:.75rem;line-height:1;padding:.5rem;text-align:right}ec-button ::ng-deep button .ec-icon{background-position:50%;background-size:1em}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:#d2d7d9;box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:#bfe0e9;box-shadow:none}"]
2261
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;border-color:#d2d7d9;padding-left:1.5em}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;left:.5rem;position:absolute;top:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75em}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-bottom-right-radius:var(--ec-border-radius);border-right-width:.0625rem;border-top-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open .textbox-group,.control.is-always-open label{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;border:0;box-shadow:none;flex:1 1;margin:0;min-height:0;z-index:0}.control.is-always-open ec-menu{border-top:1px solid rgba(26,26,35,.18)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}.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}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid rgba(26,26,35,.18)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{align-items:center;background-color:#fff;border:0;cursor:pointer;display:flex;height:2rem;line-height:1.25;padding:.25rem .5714285714em;width:100%}.add-new.is-highlighted,.add-new.is-selected{background-color:#d9edf2}.add-new:focus{background-color:rgba(26,26,35,.38);outline:none;position:relative;z-index:1}.add-new:active{background-color:#0084a9;color:#fff}.add-new.is-disabled,.add-new:disabled{color:rgba(26,26,35,.66);cursor:default;opacity:.65}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new.is-selected,.add-new:hover:not(:active){background-color:#bfe0e9}.add-new:active .ec-icon{color:inherit}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{border-top:1px solid rgba(26,26,35,.18);color:rgba(26,26,35,.38);font-size:.75rem;line-height:1;padding:.5rem;text-align:right}ec-button ::ng-deep button .ec-icon{background-position:50%;background-size:1em}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:#d2d7d9;box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:#bfe0e9;box-shadow:none}"]
2262
2262
  },] }
2263
2263
  ];
2264
2264
  ComboboxComponent.ctorParameters = () => [
@@ -2604,6 +2604,7 @@ class MenuComponent {
2604
2604
  * @memberof MenuComponent
2605
2605
  */
2606
2606
  selectItem(event, item, isKeyEvent) {
2607
+ var _a;
2607
2608
  event.stopPropagation();
2608
2609
  //In the case that the user clicks an item, selectItem() will be called from the click handler
2609
2610
  //and through onRouterLinkActivated. Only one of these will make it through this if statement
@@ -2621,7 +2622,7 @@ class MenuComponent {
2621
2622
  }
2622
2623
  // We need to manually handle the url navigation if the keyboard was used
2623
2624
  }
2624
- else if (isKeyEvent) {
2625
+ else if (isKeyEvent || ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === 'LI') {
2625
2626
  if (item.target) {
2626
2627
  window.open(item.url, item.target);
2627
2628
  }
@@ -2857,8 +2858,8 @@ class MenuComponent {
2857
2858
  MenuComponent.decorators = [
2858
2859
  { type: Component, args: [{
2859
2860
  selector: 'ec-menu',
2860
- 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)=\"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}\"\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>",
2861
- 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}"]
2861
+ 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>",
2862
+ 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{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}"]
2862
2863
  },] }
2863
2864
  ];
2864
2865
  MenuComponent.ctorParameters = () => [
@@ -3056,8 +3057,8 @@ class DropdownComponent {
3056
3057
  DropdownComponent.decorators = [
3057
3058
  { type: Component, args: [{
3058
3059
  selector: 'ec-dropdown',
3059
- 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 *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>",
3060
- 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:.125rem solid #0084a9;margin-top:-1px;position:absolute;z-index:50}.popup>header{background-color:#0084a9;color:#fff;line-height:1.25rem;overflow:hidden;padding:.25rem .5rem;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}"]
3060
+ 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>",
3061
+ 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}"]
3061
3062
  },] }
3062
3063
  ];
3063
3064
  DropdownComponent.ctorParameters = () => [];
@@ -3238,8 +3239,8 @@ class FileUploadComponent extends FormControlBase {
3238
3239
  FileUploadComponent.decorators = [
3239
3240
  { type: Component, args: [{
3240
3241
  selector: "ec-file-upload",
3241
- template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex\">\r\n <div class=\"textbox-group-input d-flex flex-grow\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (click)=\"browseBtn.focus()\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"formModel?.get('name')?.value\">\r\n <ec-form-control id=\"{{inputId}}_formControl\"\r\n class=\"text-truncate\"\r\n [required]=\"required\"\r\n [pending]=\"pending\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('name')\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [tabindex]=\"-1\">\r\n </ec-form-control>\r\n </div>\r\n <ec-button #browseBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n (clicked)=\"fileInput.click()\"\r\n class=\"textbox-group-btn-right\"\r\n type=\"secondary\"\r\n [tabindex]=\"tabindex\"\r\n [disabled]=\"formModel?.get('name')?.disabled\"\r\n label=\"Browse\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n </div>\r\n</ec-form-group>",
3242
- 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;margin-bottom:1rem}.textbox-group-input{position:relative}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{cursor:pointer;display:block;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}input[type=file].has-value{width:calc(100% - 1.5rem)}"]
3242
+ template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (click)=\"browseBtn.focus()\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"formModel?.get('name')?.value\">\r\n <ec-form-control id=\"{{inputId}}_formControl\"\r\n class=\"text-truncate\"\r\n [required]=\"required\"\r\n [pending]=\"pending\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('name')\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [tabindex]=\"-1\">\r\n </ec-form-control>\r\n </div>\r\n <ec-button #browseBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n (clicked)=\"fileInput.click()\"\r\n type=\"secondary\"\r\n [tabindex]=\"tabindex\"\r\n [disabled]=\"formModel?.get('name')?.disabled\"\r\n label=\"Browse\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n </div>\r\n</ec-form-group>",
3243
+ 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;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{cursor:pointer;display:block;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}input[type=file].has-value{width:calc(100% - 1.5rem)}"]
3243
3244
  },] }
3244
3245
  ];
3245
3246
  FileUploadComponent.ctorParameters = () => [
@@ -3296,7 +3297,7 @@ FormControlComponent.decorators = [
3296
3297
  selector: 'ec-form-control',
3297
3298
  template: "<ng-content></ng-content>\r\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\r\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\r\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\r\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\r\n<i id=\"{{id + '_clear'}}\" *ngIf=\"showClear\" class=\"ec-form-control-clear ec-icon icon-cancel\" (click)=\"clear()\"></i>\r\n<i id=\"{{id + '_action'}}\" *ngIf=\"actionIcon\" class=\"ec-form-control-action ec-icon {{actionIcon}}\" (click)=\"actionClicked.emit()\"></i>\r\n<div class=\"ec-focus-ring\"></div>",
3298
3299
  encapsulation: ViewEncapsulation.None,
3299
- styles: ["ec-form-control{background-clip:padding-box;background-color:#fff;border:1px solid rgba(26,26,35,.18);border-radius:0;color:#1a1a23;display:flex;font-size:1rem;min-height:2rem;padding:0 .5rem;position:relative;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea{background-color:transparent;border:0;color:inherit;flex:1 1;min-width:0;order:2}ec-form-control>input::-moz-selection,ec-form-control>select::-moz-selection,ec-form-control>textarea::-moz-selection{background-color:#0084a9;color:#fff}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection{background-color:#0084a9;color:#fff}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder{color:rgba(26,26,35,.38)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder{color:rgba(26,26,35,.38)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring{display:block}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix,ec-form-control>input,ec-form-control>select,ec-form-control>textarea{font-size:inherit;line-height:1.25;padding:.3125rem 0}ec-form-control>textarea{padding:.3125rem 0;resize:none}ec-form-control .ec-form-control-icon{margin-right:.25rem;margin-top:.4375rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required{color:#ffe433}ec-form-control .ec-form-control-action,ec-form-control .ec-form-control-clear{cursor:pointer;flex:none;height:1.875rem;order:3;width:2rem}ec-form-control .ec-form-control-action:last-of-type,ec-form-control .ec-form-control-clear:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-action:hover,ec-form-control .ec-form-control-clear:hover{background-color:#bfe0e9}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:rgba(26,26,35,.66);cursor:default;flex:none}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{border:.125rem solid #0084a9;border-radius:0;bottom:-1px;display:none;left:-1px;pointer-events:none;position:absolute;right:-1px;top:-1px;z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{background-color:#fff8cc;border-color:#ffe433}ec-form-control.is-empty .ec-form-control-clear,ec-form-control.is-invalid .icon-required,ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type,ec-form-control:not(.is-empty) .icon-required,ec-form-control:not(.is-invalid) .icon-invalid,ec-form-control:not(.is-pending) .icon-loading,ec-form-control:not(.is-required) .icon-required{display:none}ec-form-control.is-disabled,ec-form-control.is-readonly{background-color:rgba(26,26,35,.1)}ec-form-control.is-disabled .ec-form-control-clear,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-required{display:none}ec-form-control.is-readonly{border-color:transparent;color:#1a1a23}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:rgba(26,26,35,.38);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}"]
3300
+ styles: ["ec-form-control{background-clip:padding-box;background-color:#fff;border:1px solid rgba(26,26,35,.18);border-radius:var(--ec-border-radius);color:#1a1a23;display:flex;font-size:1rem;min-height:2rem;padding:0 .5rem;position:relative;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea{background-color:transparent;border:0;color:inherit;flex:1 1;min-width:0;order:2}ec-form-control>input::-moz-selection,ec-form-control>select::-moz-selection,ec-form-control>textarea::-moz-selection{background-color:#0084a9;color:#fff}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection{background-color:#0084a9;color:#fff}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder{color:rgba(26,26,35,.38)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder{color:rgba(26,26,35,.38)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring{display:block}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix,ec-form-control>input,ec-form-control>select,ec-form-control>textarea{font-size:inherit;line-height:1.25;padding:.3125rem 0}ec-form-control>textarea{padding:.3125rem 0;resize:none}ec-form-control .ec-form-control-icon{margin-right:.25rem;margin-top:.4375rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required{color:#ffe433}ec-form-control .ec-form-control-action,ec-form-control .ec-form-control-clear{cursor:pointer;flex:none;height:1.875rem;order:3;width:2rem}ec-form-control .ec-form-control-action:last-of-type,ec-form-control .ec-form-control-clear:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-action:hover,ec-form-control .ec-form-control-clear:hover{background-color:#bfe0e9}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:rgba(26,26,35,.66);cursor:default;flex:none}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{border:.125rem solid #0084a9;border-radius:var(--ec-border-radius);bottom:-1px;display:none;left:-1px;pointer-events:none;position:absolute;right:-1px;top:-1px;z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{background-color:#fff8cc;border-color:#ffe433}ec-form-control.is-empty .ec-form-control-clear,ec-form-control.is-invalid .icon-required,ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type,ec-form-control:not(.is-empty) .icon-required,ec-form-control:not(.is-invalid) .icon-invalid,ec-form-control:not(.is-pending) .icon-loading,ec-form-control:not(.is-required) .icon-required{display:none}ec-form-control.is-disabled,ec-form-control.is-readonly{background-color:rgba(26,26,35,.1)}ec-form-control.is-disabled .ec-form-control-clear,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-required{display:none}ec-form-control.is-readonly{border-color:transparent;color:#1a1a23}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:rgba(26,26,35,.38);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}"]
3300
3301
  },] }
3301
3302
  ];
3302
3303
  FormControlComponent.ctorParameters = () => [
@@ -4097,7 +4098,7 @@ PopoverComponent.decorators = [
4097
4098
  { type: Component, args: [{
4098
4099
  selector: 'ec-popover',
4099
4100
  template: "<div class=\"p-2\">\r\n <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n</div>\r\n\r\n<ng-template #content>\r\n <article class=\"popover-content\"\r\n (document:mousemove)=\"onMouseMove($event)\">\r\n <ng-content></ng-content>\r\n </article>\r\n <div class=\"p-2 {{contentPosition}}\">\r\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n </div>\r\n</ng-template>\r\n",
4100
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:inline-block;line-height:1}.popover-content{border-radius:3px;box-shadow:0 3px 6px 0 rgba(26,26,35,.12);overflow:hidden;position:relative}.popover-content+div{line-height:1;position:absolute}.popover-content+div.top-left{left:0;top:0}.popover-content+div.top-right{right:0;top:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}"]
4101
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:inline-block;line-height:1}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px 0 rgba(26,26,35,.12);overflow:hidden;position:relative}.popover-content+div{line-height:1;position:absolute}.popover-content+div.top-left{left:0;top:0}.popover-content+div.top-right{right:0;top:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}"]
4101
4102
  },] }
4102
4103
  ];
4103
4104
  PopoverComponent.ctorParameters = () => [
@@ -4172,7 +4173,7 @@ RadioButtonComponent.decorators = [
4172
4173
  { type: Component, args: [{
4173
4174
  selector: 'ec-radiobutton',
4174
4175
  template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n",
4175
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:rgba(26,26,35,.12);border:0}.radio-group.is-readonly .radio-button .indicator,.radio-group.is-readonly .radio-button .label{color:#1a1a23;opacity:1}.radio-group.is-readonly.radio-group-toggle{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:rgba(26,26,35,.18)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{box-shadow:0 0 0 1px #0084a9;color:#0084a9}.input:disabled+.indicator{background-color:rgba(26,26,35,.1);border-color:rgba(26,26,35,.18)}.input:disabled+.indicator,.input:disabled~.label{color:rgba(26,26,35,.66);opacity:.65}.indicator{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid;border-radius:50%;color:#0084a9;display:inline-flex;flex:none;height:1em;justify-content:center;margin-top:.5rem;pointer-events:none;width:1em}.indicator:before{background-color:currentColor;border-radius:50%;content:\"\";display:block;height:.5em;width:.5em}.label{height:2rem;height:auto;line-height:1.25;margin-left:.5rem;min-height:2rem;padding:.375em 0}.radio-group-toggle{background-color:#d2d7d9;border:.0625rem solid #d2d7d9;border-radius:0;color:rgba(26,26,35,.38);display:flex;font-size:1rem;min-height:2em;position:relative}.radio-group-toggle input{opacity:0;position:absolute;z-index:-1}.radio-group-toggle input:checked+label{color:#0084a9}.radio-group-toggle input:checked:last-of-type~a{transform:translateX(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{bottom:0;box-shadow:0 0 0 .125rem #0084a9;display:none;left:0;position:absolute;right:0;top:0}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:0;display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:#fff;border-radius:0;height:100%}.radio-group-toggle.is-disabled{background-color:rgba(26,26,35,.1);color:rgba(26,26,35,.66);opacity:.65}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:hsla(0,0%,100%,.38)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translateX(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translateX(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translateX(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translateX(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translateX(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translateX(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translateX(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translateX(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translateX(100%)}"]
4176
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:rgba(26,26,35,.12);border:0}.radio-group.is-readonly .radio-button .indicator,.radio-group.is-readonly .radio-button .label{color:#1a1a23;opacity:1}.radio-group.is-readonly.radio-group-toggle{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:rgba(26,26,35,.18)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{box-shadow:0 0 0 1px #0084a9;color:#0084a9}.input:disabled+.indicator{background-color:rgba(26,26,35,.1);border-color:rgba(26,26,35,.18)}.input:disabled+.indicator,.input:disabled~.label{color:rgba(26,26,35,.66);opacity:.65}.indicator{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid;border-radius:50%;color:#0084a9;display:inline-flex;flex:none;height:1em;justify-content:center;margin-top:.5rem;pointer-events:none;width:1em}.indicator:before{background-color:currentColor;border-radius:50%;content:\"\";display:block;height:.5em;width:.5em}.label{height:2rem;height:auto;line-height:1.25;margin-left:.5rem;min-height:2rem;padding:.375em 0}.radio-group-toggle{background-color:#d2d7d9;border:.0625rem solid #d2d7d9;border-radius:var(--ec-border-radius);color:rgba(26,26,35,.38);display:flex;font-size:1rem;min-height:2em;position:relative}.radio-group-toggle input{opacity:0;position:absolute;z-index:-1}.radio-group-toggle input:checked+label{color:#0084a9}.radio-group-toggle input:checked:last-of-type~a{transform:translateX(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{border-radius:var(--ec-border-radius);bottom:0;box-shadow:0 0 0 .125rem #0084a9;display:none;left:0;position:absolute;right:0;top:0}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius)*0.75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:#fff;border-radius:calc(var(--ec-border-radius)*0.75);height:100%}.radio-group-toggle.is-disabled{background-color:rgba(26,26,35,.1);color:rgba(26,26,35,.66);opacity:.65}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:hsla(0,0%,100%,.38)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translateX(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translateX(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translateX(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translateX(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translateX(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translateX(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translateX(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translateX(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translateX(100%)}"]
4176
4177
  },] }
4177
4178
  ];
4178
4179
  RadioButtonComponent.ctorParameters = () => [
@@ -4258,7 +4259,7 @@ SelectComponent.decorators = [
4258
4259
  { type: Component, args: [{
4259
4260
  selector: 'ec-select',
4260
4261
  template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>",
4261
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}:host select{-moz-appearance:none;-webkit-appearance:none;appearance:none;background-clip:padding-box;background-color:#fff;background-image:none;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-position:right .5rem center;background-repeat:no-repeat;background-size:.75em .75em;border:.0625rem solid #d2d7d9;border-radius:0;height:2rem;line-height:1.25;padding:.3125em 1.5rem .3125em .5em;width:100%}:host select::-moz-selection{background-color:#0084a9;color:#fff}:host select::selection{background-color:#0084a9;color:#fff}:host select::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host select::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host select:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host select:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host select:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host select.ng-invalid.ng-touched,:host select:required.is-empty{background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host select.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host select.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending,:host select.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host select:focus,:host select:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host select:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}"]
4262
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;display:block;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{display:flex;flex-direction:column;width:100%}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-bottom:0;margin-top:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-clip:border-box;background-color:rgba(26,26,35,.12);background-image:none;border-color:transparent;color:#1a1a23;opacity:1;overflow:hidden;pointer-events:none;user-select:none;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host select:focus,:host textarea:focus{outline:none}:host label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}:host select{-moz-appearance:none;-webkit-appearance:none;appearance:none;background-clip:padding-box;background-color:#fff;background-image:none;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-position:right .5rem center;background-repeat:no-repeat;background-size:.75em .75em;border:.0625rem solid #d2d7d9;border-radius:var(--ec-border-radius);height:2rem;line-height:1.25;padding:.3125em 1.5rem .3125em .5em;width:100%}:host select::-moz-selection{background-color:#0084a9;color:#fff}:host select::selection{background-color:#0084a9;color:#fff}:host select::-webkit-input-placeholder{color:rgba(26,26,35,.38)}:host select::-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host select:-ms-input-placeholder{color:rgba(26,26,35,.38)}:host select:-moz-placeholder{color:rgba(26,26,35,.38);opacity:1}:host select:required.is-empty{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');border-color:#d2d7d9}:host select.ng-invalid.ng-touched,:host select:required.is-empty{background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host select.ng-invalid.ng-touched{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>')}:host select.ng-invalid.ng-touched:not(:focus){border-color:#ffe433}:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending,:host select.is-pending.ng-valid{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-position:.25em;background-repeat:no-repeat;background-size:1em 1em;padding-left:1.5em}:host select:focus,:host select:focus.is-empty{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;position:relative;z-index:1}:host select:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-color:rgba(26,26,35,.1);background-image:none;border-color:#d2d7d9;padding-left:.5em}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}"]
4262
4263
  },] }
4263
4264
  ];
4264
4265
  SelectComponent.ctorParameters = () => [
@@ -4339,7 +4340,7 @@ TabsComponent.decorators = [
4339
4340
  { type: Component, args: [{
4340
4341
  selector: 'ec-tabs',
4341
4342
  template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ",
4342
- 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}ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.tabs{border-bottom:1px solid #d2d7d9;display:flex;padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;border-radius:0;color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:2rem;justify-content:center;margin-bottom:-1px;min-width:2rem;padding-left:.5rem;padding-right:.5rem}.tabs .tab:hover{color:#354751}.tabs .tab.active{background-color:#f1f3f4;border-left-color:#d2d7d9;border-right-color:#d2d7d9;border-top-color:#d2d7d9;color:#354751}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}.tabs .tab.is-disabled{color:rgba(26,26,35,.38);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{align-items:center;border:1px solid transparent;border-radius:0;color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:1.5rem;justify-content:center;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}.pills .tab:hover{color:#354751}.pills .tab.active{background-color:#d2d7d9;color:#354751}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}.pills .tab.is-disabled{color:rgba(26,26,35,.38);cursor:default}.icon-only .tab{justify-content:center;padding:0}.indicator{background-color:rgba(111,28,138,.25);border:2px solid #6f1c8a;border-radius:50%;display:block;height:.625rem;width:.625rem}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}"]
4343
+ 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}ul{list-style:none;margin:0;padding:0}a{text-decoration:none}.tabs{border-bottom:1px solid #d2d7d9;display:flex;padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--ec-border-radius);border-top-right-radius:var(--ec-border-radius);color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:2rem;justify-content:center;margin-bottom:-1px;min-width:2rem;padding-left:.5rem;padding-right:.5rem}.tabs .tab:hover{color:#354751}.tabs .tab.active{background-color:#f1f3f4;border-left-color:#d2d7d9;border-right-color:#d2d7d9;border-top-color:#d2d7d9;color:#354751}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none;position:relative;z-index:1}.tabs .tab.is-disabled{color:rgba(26,26,35,.38);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{align-items:center;border:1px solid transparent;border-radius:var(--ec-border-radius);color:rgba(26,26,35,.66);cursor:pointer;display:flex;font-size:.75rem;height:1.5rem;justify-content:center;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}.pills .tab:hover{color:#354751}.pills .tab.active{background-color:#d2d7d9;color:#354751}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none;position:relative;z-index:1}.pills .tab.is-disabled{color:rgba(26,26,35,.38);cursor:default}.icon-only .tab{justify-content:center;padding:0}.indicator{background-color:rgba(111,28,138,.25);border:2px solid #6f1c8a;border-radius:50%;display:block;height:.625rem;width:.625rem}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}"]
4343
4344
  },] }
4344
4345
  ];
4345
4346
  TabsComponent.ctorParameters = () => [];
@@ -4413,23 +4414,28 @@ AvatarService.decorators = [
4413
4414
  class AppBarComponent {
4414
4415
  constructor(avatarService) {
4415
4416
  this.avatarService = avatarService;
4416
- this.user = {};
4417
4417
  this.userMenuItems = [];
4418
4418
  this.userMenuWidth = 0;
4419
4419
  this.userMenuMinWidth = 160;
4420
4420
  this.userMenuTabindex = 0;
4421
4421
  this.iconPath = '/assets/images/icon.svg';
4422
+ this.menuItems = [];
4423
+ this.userItem = [];
4422
4424
  }
4423
4425
  ngOnChanges() {
4424
4426
  if (this.user) {
4425
- this.userMenuTitle = this.avatarService.getAvatarLabels(this.user).full;
4427
+ this.userItem[0] = { label: this.avatarService.getAvatarLabels(this.user).full || '', display: 'heading' };
4428
+ }
4429
+ else {
4430
+ this.userItem = [];
4426
4431
  }
4432
+ this.menuItems = [...this.userItem, ...this.userMenuItems];
4427
4433
  }
4428
4434
  }
4429
4435
  AppBarComponent.decorators = [
4430
4436
  { type: Component, args: [{
4431
4437
  selector: 'ec-app-bar',
4432
- template: "<section class=\"logo-container\">\r\n <img src=\"{{iconPath}}\"\r\n alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n <ng-content select=\".app-bar-actions\"></ng-content>\r\n <ec-dropdown id=\"AppBarUserMenu\"\r\n *ngIf=\"userMenuItems.length; else avatar\"\r\n [menuTitle]=\"userMenuTitle\"\r\n [items]=\"userMenuItems\"\r\n [buttonCustomTemplate]=\"avatar\"\r\n [showArrow]=\"false\"\r\n [menuWidth]=\"userMenuWidth\"\r\n [menuMinWidth]=\"userMenuMinWidth\"\r\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n <div class=\"p-1\">\r\n <ec-avatar [user]=\"user\"></ec-avatar>\r\n </div>\r\n</ng-template>",
4438
+ template: "<section class=\"logo-container\">\r\n <img src=\"{{iconPath}}\"\r\n alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n <ng-content select=\".app-bar-actions\"></ng-content>\r\n <ec-dropdown id=\"AppBarUserMenu\"\r\n *ngIf=\"userMenuItems.length; else avatar\"\r\n [items]=\"menuItems\"\r\n [buttonCustomTemplate]=\"avatar\"\r\n [showArrow]=\"false\"\r\n [menuWidth]=\"userMenuWidth\"\r\n [menuMinWidth]=\"userMenuMinWidth\"\r\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n <div class=\"p-1\">\r\n <ec-avatar [user]=\"user\"></ec-avatar>\r\n </div>\r\n</ng-template>",
4433
4439
  styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{align-items:center;background-color:#fff;display:flex;height:3rem;padding:0 .75rem 0 1rem;position:relative;width:100%;z-index:40}:host ::ng-deep .app-bar-actions{align-items:center;display:flex;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{height:2rem;width:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}"]
4434
4440
  },] }
4435
4441
  ];
@@ -4504,7 +4510,7 @@ AvatarComponent.decorators = [
4504
4510
  { type: Component, args: [{
4505
4511
  selector: 'ec-avatar',
4506
4512
  template: '{{label}}',
4507
- styles: [":host{align-items:center;border-radius:50%;color:#fff;display:flex;font-family:Roboto;font-size:1rem;height:2.25rem;justify-content:center;line-height:1.25rem;text-transform:uppercase;width:2.25rem}:host.avatar-red{background-color:#eb6669}:host.avatar-orange{background-color:#fa9f69}:host.avatar-yellow{background-color:#ffec74}:host.avatar-green{background-color:#dbe280}:host.avatar-blue{background-color:#58afc7}:host.avatar-purple{background-color:#9e82b4}:host.avatar-gray{background-color:#acbcc3}:host.avatar-green,:host.avatar-orange,:host.avatar-yellow{color:rgba(26,26,35,.66)}"]
4513
+ styles: [":host{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:1rem;height:2.25rem;justify-content:center;line-height:1.25rem;text-transform:uppercase;width:2.25rem}:host.avatar-red{background-color:#eb6669}:host.avatar-orange{background-color:#fa9f69}:host.avatar-yellow{background-color:#ffec74}:host.avatar-green{background-color:#dbe280}:host.avatar-blue{background-color:#58afc7}:host.avatar-purple{background-color:#9e82b4}:host.avatar-gray{background-color:#acbcc3}:host.avatar-green,:host.avatar-orange,:host.avatar-yellow{color:rgba(26,26,35,.66)}"]
4508
4514
  },] }
4509
4515
  ];
4510
4516
  AvatarComponent.ctorParameters = () => [
@@ -5067,7 +5073,7 @@ DialogComponent.decorators = [
5067
5073
  { type: Component, args: [{
5068
5074
  selector: 'ec-dialog',
5069
5075
  template: '<article [style.width.px]="width" [style.min-width]="minWidth" class="dialog-{{size}}" cdkTrapFocus cdkTrapFocusAutoCapture><ng-template #content></ng-template></article>',
5070
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}:host{align-items:center;background-color:rgba(26,26,35,.5);bottom:0;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:60}:host.is-open{display:flex}:host.fade-in{-webkit-animation-duration:125ms;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-in,:host.fade-out{-webkit-animation-name:fadeIn;animation-name:fadeIn}:host.fade-out{-webkit-animation-duration:.1s;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-direction:reverse;animation-duration:.1s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel{background-color:transparent}:host.is-panel article{border-bottom:0;border-right:0;border-top:0;bottom:0;box-shadow:0 0 8px rgba(26,26,35,.12);max-height:none;position:absolute;right:0;top:0}:host.is-panel.fade-in{-webkit-animation:none;animation:none}:host.is-panel.fade-in article{-webkit-animation-duration:.25s;-webkit-animation-fill-mode:forwards;-webkit-animation-name:slideIn;-webkit-animation-timing-function:ease-out;animation-duration:.25s;animation-fill-mode:forwards;animation-name:slideIn;animation-timing-function:ease-out}:host.is-panel.fade-out{-webkit-animation:none;animation:none}:host.is-panel.fade-out article{-webkit-animation-duration:225ms;-webkit-animation-fill-mode:forwards;-webkit-animation-name:slideIn;-webkit-animation-timing-function:ease-in;animation-direction:reverse;animation-duration:225ms;animation-fill-mode:forwards;animation-name:slideIn;animation-timing-function:ease-in}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{margin-top:20vh;min-height:auto}article{background-clip:padding-box;background-color:#f1f3f4;border-radius:0;box-shadow:0 0 .625rem rgba(26,26,35,.2);display:flex;flex:none;max-height:90vh;max-width:90vw;min-height:9rem}.dialog-xsmall{width:20rem}.dialog-small{width:30rem}.dialog-medium{width:40rem}.dialog-large{width:50rem}.dialog-xlarge{width:60rem}.dialog-full{width:90vw}"]
5076
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}:host{align-items:center;background-color:rgba(26,26,35,.5);bottom:0;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:60}:host.is-open{display:flex}:host.fade-in{-webkit-animation-duration:125ms;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-in,:host.fade-out{-webkit-animation-name:fadeIn;animation-name:fadeIn}:host.fade-out{-webkit-animation-duration:.1s;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-direction:reverse;animation-duration:.1s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel{background-color:transparent}:host.is-panel article{border-bottom:0;border-radius:0;border-right:0;border-top:0;bottom:0;box-shadow:0 0 8px rgba(26,26,35,.12);max-height:none;position:absolute;right:0;top:0}:host.is-panel.fade-in{-webkit-animation:none;animation:none}:host.is-panel.fade-in article{-webkit-animation-duration:.25s;-webkit-animation-fill-mode:forwards;-webkit-animation-name:slideIn;-webkit-animation-timing-function:ease-out;animation-duration:.25s;animation-fill-mode:forwards;animation-name:slideIn;animation-timing-function:ease-out}:host.is-panel.fade-out{-webkit-animation:none;animation:none}:host.is-panel.fade-out article{-webkit-animation-duration:225ms;-webkit-animation-fill-mode:forwards;-webkit-animation-name:slideIn;-webkit-animation-timing-function:ease-in;animation-direction:reverse;animation-duration:225ms;animation-fill-mode:forwards;animation-name:slideIn;animation-timing-function:ease-in}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{margin-top:20vh;min-height:auto}article{background-clip:padding-box;background-color:#f1f3f4;border-radius:var(--ec-border-radius-dialog);box-shadow:0 0 .625rem rgba(26,26,35,.2);display:flex;flex:none;max-height:90vh;max-width:90vw;min-height:9rem;overflow:hidden}.dialog-xsmall{width:20rem}.dialog-small{width:30rem}.dialog-medium{width:40rem}.dialog-large{width:50rem}.dialog-xlarge{width:60rem}.dialog-full{width:90vw}"]
5071
5077
  },] }
5072
5078
  ];
5073
5079
  DialogComponent.ctorParameters = () => [
@@ -5284,8 +5290,8 @@ class HierarchyTreeComponent extends HierarchyBase {
5284
5290
  HierarchyTreeComponent.decorators = [
5285
5291
  { type: Component, args: [{
5286
5292
  selector: 'ec-hierarchy-tree',
5287
- template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y\">\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",
5288
- 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;padding:0}ul li{white-space:nowrap}ul .item-wrapper{align-items:center;display:flex;height:1.75rem;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}"]
5293
+ 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",
5294
+ 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}"]
5289
5295
  },] }
5290
5296
  ];
5291
5297
  HierarchyTreeComponent.ctorParameters = () => [
@@ -5400,7 +5406,7 @@ JsonDisplayComponent.decorators = [
5400
5406
  { type: Component, args: [{
5401
5407
  selector: 'ec-json-display',
5402
5408
  template: "<ec-button id=\"{{id}}_copy\"\r\n class=\"copy-button\"\r\n *ngIf=\"jsonDisplay.value\"\r\n type=\"icon\"\r\n icon=\"icon-copy\"\r\n [ecCopyButton]=\"jsonDisplay\">\r\n</ec-button>\r\n<pre><code>{{jsonDisplay.value}}</code></pre>",
5403
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{background:#354751;border-radius:3px;color:hsla(0,0%,100%,.6);display:block;font-size:.75rem;max-height:15rem;min-height:2.125rem;overflow-x:auto;overflow-y:auto;position:relative;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:hsla(0,0%,100%,.6)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:#fff!important}"]
5409
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{background:#354751;border-radius:var(--ec-border-radius-card);color:hsla(0,0%,100%,.6);display:block;font-size:.75rem;max-height:15rem;min-height:2.125rem;overflow-x:auto;overflow-y:auto;position:relative;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:hsla(0,0%,100%,.6)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:#fff!important}"]
5404
5410
  },] }
5405
5411
  ];
5406
5412
  JsonDisplayComponent.ctorParameters = () => [
@@ -7021,7 +7027,7 @@ TableComponent.decorators = [
7021
7027
  selector: 'ec-table',
7022
7028
  template: "<div class=\"selectable-table-toolbar\"\r\n *ngIf=\"hasSelection\">\r\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n</div>\r\n<div id=\"{{id}}-scroll-container\" \r\n class=\"table-scroll-container\">\r\n <table class=\"main-table\"\r\n id=\"{{id}}\"\r\n [ecResizableTable]=\"resizable\"\r\n [containerEl]=\"el\"\r\n [sortableTable]=\"sortable\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </table>\r\n</div>",
7023
7029
  encapsulation: ViewEncapsulation.None,
7024
- styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}ec-table{display:flex;min-height:0;position:relative}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;font-size:.75rem;width:100%}ec-table .main-table th{border-bottom:1px solid rgba(26,26,35,.87);color:rgba(26,26,35,.66);font-weight:400;height:2rem;line-height:1rem;overflow:hidden;padding:.5rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{border-top:1px solid rgba(26,26,35,.18);height:2rem;line-height:1rem;overflow:hidden;padding:.5rem;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:#ecc4c5}ec-table .main-table tbody>tr.is-success td{background-color:#dff0d8}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected,ec-table .main-table tbody>tr.is-selected>td{background-color:#dae4e9}ec-table .main-table tr.is-heading td{background-color:#ebedee;border-bottom-color:rgba(26,26,35,.09);color:rgba(26,26,35,.66)}ec-table .main-table td.actions-col,ec-table .main-table th.actions-col{padding:0}ec-table .main-table td.actions-1,ec-table .main-table th.actions-1{width:2.0625rem}ec-table .main-table td.actions-2,ec-table .main-table th.actions-2{width:4.0625rem}ec-table .main-table td.actions-3,ec-table .main-table th.actions-3{width:6.0625rem}ec-table .main-table td.actions-4,ec-table .main-table th.actions-4{width:8.0625rem}ec-table .main-table td.actions-5,ec-table .main-table th.actions-5{width:10.0625rem}ec-table.is-condensed td,ec-table.is-condensed th{height:1.5rem;padding-bottom:.25rem;padding-top:.25rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:#fff;border-bottom:1px solid rgba(26,26,35,.87);display:flex;height:3rem;left:calc(var(--selection-toolbar-left, 0rem) + 1.5625rem);padding:0 .5rem;position:absolute;right:0;top:0;z-index:4}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:#fff;position:sticky!important;top:0;z-index:1}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:#fff;bottom:0;position:sticky!important;z-index:1}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td,ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:#f1f3f4}ec-table.is-sortable th[data-sortfield]{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{cursor:pointer;display:flex}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{background-position:50%;background-repeat:no-repeat;content:\"\";display:none;flex:none;height:.875rem;margin:0 .25rem;vertical-align:top;width:.875rem}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{background-position:50%;background-repeat:no-repeat;content:\"\";display:none;height:.875rem;margin:0 .25rem;vertical-align:top;width:.875rem}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{background-position:50%;background-repeat:no-repeat;content:\"\";display:none;height:.875rem;margin:0 .25rem;vertical-align:top;width:.875rem}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{overflow:visible;position:relative;z-index:1}ec-table.is-resizable th.is-resizable.is-active{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:#0084a9}ec-table.is-resizable th.is-resizable .handle{height:100%;padding:.5rem 0 .5rem 10px;position:absolute;right:-7px;right:0;top:0;width:13px;z-index:30}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;height:100%;position:relative;transition:background-color .3s ease}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:#0084a9}ec-table.is-resizable th.is-resizable .handle:before{background-color:#d2d7d9;bottom:.5rem;content:\"\";display:block;position:absolute;right:0;top:.5rem;width:1px}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:#bfe0e9;border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:#dae4e9}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:#bfe0e9}ec-table.is-selectable th.is-resizable .handle{padding-bottom:1rem;padding-top:1rem}ec-table.is-selectable th.is-resizable .handle:before{bottom:1rem;top:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{border-top:0;font-size:1rem;height:2.5rem;line-height:2rem;padding-bottom:.25rem;padding-top:.25rem}ec-table.is-form-table tr:first-child td{height:2.75rem;padding-top:.5rem}ec-table.is-form-table tr:last-child td{height:2.75rem;padding-bottom:.5rem}ec-table.is-fixed .main-table{table-layout:fixed}"]
7030
+ styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}ec-table{display:flex;min-height:0;position:relative}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;font-size:.75rem;width:100%}ec-table .main-table th{border-bottom:1px solid rgba(26,26,35,.87);color:rgba(26,26,35,.66);font-weight:400;height:2rem;line-height:1rem;overflow:hidden;padding:.5rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{border-top:1px solid rgba(26,26,35,.18);height:2rem;line-height:1rem;overflow:hidden;padding:.5rem;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:#ecc4c5}ec-table .main-table tbody>tr.is-success td{background-color:#dff0d8}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected,ec-table .main-table tbody>tr.is-selected>td{background-color:#dae4e9}ec-table .main-table tr.is-heading td{border-top:0;color:rgba(26,26,35,.66);font-size:.75rem;font-weight:700;line-height:1.333333333;padding-bottom:0;text-transform:uppercase;vertical-align:bottom}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table td.actions-col,ec-table .main-table th.actions-col{padding:0}ec-table .main-table td.actions-1,ec-table .main-table th.actions-1{width:2.0625rem}ec-table .main-table td.actions-2,ec-table .main-table th.actions-2{width:4.0625rem}ec-table .main-table td.actions-3,ec-table .main-table th.actions-3{width:6.0625rem}ec-table .main-table td.actions-4,ec-table .main-table th.actions-4{width:8.0625rem}ec-table .main-table td.actions-5,ec-table .main-table th.actions-5{width:10.0625rem}ec-table.is-condensed td,ec-table.is-condensed th{height:1.5rem;padding-bottom:.25rem;padding-top:.25rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:#fff;border-bottom:1px solid rgba(26,26,35,.87);display:flex;height:3rem;left:calc(var(--selection-toolbar-left, 0rem) + 1.5625rem);padding:0 .5rem;position:absolute;right:0;top:0;z-index:4}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:#fff;position:sticky!important;top:0;z-index:1}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:#fff;bottom:0;position:sticky!important;z-index:1}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td,ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:#f1f3f4}ec-table.is-sortable th[data-sortfield]{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{cursor:pointer;display:flex}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{background-position:50%;background-repeat:no-repeat;content:\"\";display:none;flex:none;height:.875rem;margin:0 .25rem;vertical-align:top;width:.875rem}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{background-position:50%;background-repeat:no-repeat;content:\"\";display:none;height:.875rem;margin:0 .25rem;vertical-align:top;width:.875rem}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{background-position:50%;background-repeat:no-repeat;content:\"\";display:none;height:.875rem;margin:0 .25rem;vertical-align:top;width:.875rem}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{overflow:visible;position:relative;z-index:1}ec-table.is-resizable th.is-resizable.is-active{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:#0084a9}ec-table.is-resizable th.is-resizable .handle{height:100%;padding:.5rem 0 .5rem 10px;position:absolute;right:-7px;right:0;top:0;width:13px;z-index:30}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;height:100%;position:relative;transition:background-color .3s ease}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:#0084a9}ec-table.is-resizable th.is-resizable .handle:before{background-color:#d2d7d9;bottom:.5rem;content:\"\";display:block;position:absolute;right:0;top:.5rem;width:1px}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:#bfe0e9;border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:#dae4e9}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:#bfe0e9}ec-table.is-selectable th.is-resizable .handle{padding-bottom:1rem;padding-top:1rem}ec-table.is-selectable th.is-resizable .handle:before{bottom:1rem;top:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{border-top:0;font-size:1rem;height:2.5rem;line-height:2rem;padding-bottom:.25rem;padding-top:.25rem}ec-table.is-form-table tr:first-child td{height:2.75rem;padding-top:.5rem}ec-table.is-form-table tr:last-child td{height:2.75rem;padding-bottom:.5rem}ec-table.is-fixed .main-table{table-layout:fixed}"]
7025
7031
  },] }
7026
7032
  ];
7027
7033
  TableComponent.ctorParameters = () => [
@@ -7106,7 +7112,7 @@ TagsComponent.decorators = [
7106
7112
  { type: Component, args: [{
7107
7113
  selector: 'ec-tags',
7108
7114
  template: "<ul class=\"tags\" [class.is-wrapped]=\"wrap\">\r\n <li *ngFor=\"let tag of tagsArray; index as i\"\r\n id=\"{{id}}_tag_{{i}}\"\r\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\r\n [ngClass]=\"{'text-caption-1': !isCondensed, 'text-caption-2': isCondensed, 'is-condensed': isCondensed, 'pr-0': tag.isDismissable}\"\r\n title=\"{{tag.tooltip | translate}}\">\r\n <i *ngIf=\"tag.icon\" class=\"ec-icon {{tag.icon}} font-color-muted ec-icon-sm\"></i>\r\n {{tag.label | translate}}\r\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\r\n *ngIf=\"tag.isDismissable\"\r\n (click)=\"closeTag(tag)\">\r\n <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\r\n </button>\r\n </li>\r\n</ul>",
7109
- 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}.tags{display:flex;list-style:none;margin:0;padding:0}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag{align-items:center;background-color:rgba(172,188,195,.25);border:2px solid #acbcc3;border-radius:.75rem;display:inline-flex;height:1.5rem;line-height:1.25rem;overflow:hidden;padding:0 .4375rem;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.tag>.ec-icon:first-child{margin-right:.1875rem}.tag .ec-icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;justify-content:center;min-width:1em}.tag .ec-icon,.tag .ec-icon:after,.tag .ec-icon:before{height:auto;width:auto}.tag.is-info{background-color:rgba(172,188,195,.25);border-color:#acbcc3}.tag.is-success{background-color:rgba(193,205,35,.25);border-color:#c1cd23}.tag.is-warning{background-color:rgba(245,212,0,.25);border-color:#f5d400}.tag.is-danger{background-color:rgba(227,52,54,.25);border-color:#e33436}.tag.is-accent{background-color:rgba(144,110,168,.25);border-color:#906ea8}.tag.is-chargeback{background-color:rgba(250,123,46,.25);border-color:#fa7b2e}.tag.is-accrual{background-color:rgba(35,195,205,.25);border-color:#23c3cd}button{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:100%;padding:0 .4375rem 0 .1875rem}button:focus,button:hover{background-color:rgba(26,26,35,.1);outline:none}.is-condensed{border:0;border-radius:.1875rem;height:1.125rem;justify-content:center;line-height:1.125rem;min-width:1.125rem;padding:0 .25rem}.is-condensed>.ec-icon:first-child{margin-right:.125rem}.is-condensed button{padding-left:.125rem;padding-right:.25rem}"]
7115
+ 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}.tags{display:flex;list-style:none;margin:0;padding:0}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag{align-items:center;background-color:rgba(172,188,195,.25);border:2px solid #acbcc3;border-radius:calc(var(--ec-border-radius, .25rem)*3);display:inline-flex;height:1.5rem;line-height:1.25rem;overflow:hidden;padding:0 .4375rem;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.tag>.ec-icon:first-child{margin-right:.1875rem}.tag .ec-icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;justify-content:center;min-width:1em}.tag .ec-icon,.tag .ec-icon:after,.tag .ec-icon:before{height:auto;width:auto}.tag.is-info{background-color:rgba(172,188,195,.25);border-color:#acbcc3}.tag.is-success{background-color:rgba(193,205,35,.25);border-color:#c1cd23}.tag.is-warning{background-color:rgba(245,212,0,.25);border-color:#f5d400}.tag.is-danger{background-color:rgba(227,52,54,.25);border-color:#e33436}.tag.is-accent{background-color:rgba(144,110,168,.25);border-color:#906ea8}.tag.is-chargeback{background-color:rgba(250,123,46,.25);border-color:#fa7b2e}.tag.is-accrual{background-color:rgba(35,195,205,.25);border-color:#23c3cd}button{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:100%;padding:0 .4375rem 0 .1875rem}button:focus,button:hover{background-color:rgba(26,26,35,.1);outline:none}.is-condensed{border:0;border-radius:var(--ec-border-radius);height:1.125rem;justify-content:center;line-height:1.125rem;min-width:1.125rem;padding:0 .25rem}.is-condensed>.ec-icon:first-child{margin-right:.125rem}.is-condensed button{padding-left:.125rem;padding-right:.25rem}"]
7110
7116
  },] }
7111
7117
  ];
7112
7118
  TagsComponent.ctorParameters = () => [];
@@ -7388,7 +7394,7 @@ class TreeComponent {
7388
7394
  TreeComponent.decorators = [
7389
7395
  { type: Component, args: [{
7390
7396
  selector: 'ec-tree',
7391
- template: "<header class=\"flex-shrink d-flex align-items-center border-bottom bg-content\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow m-0 mx-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink fill\"\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>",
7397
+ 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>",
7392
7398
  styles: [":host{display:flex;flex-direction:column}header{height:3rem}ec-dropdown.fill{height:3rem;width:3rem}"]
7393
7399
  },] }
7394
7400
  ];
@@ -8321,6 +8327,7 @@ class PageBaseComponent {
8321
8327
  yield this.initPromise;
8322
8328
  }
8323
8329
  catch (error) {
8330
+ this.splashService.hideSplash();
8324
8331
  this.onError(error);
8325
8332
  }
8326
8333
  ;
@@ -8355,6 +8362,7 @@ class PageBaseComponent {
8355
8362
  this.setUpRouterSubscriptions();
8356
8363
  }
8357
8364
  catch (error) {
8365
+ this.splashService.hideSplash();
8358
8366
  this.onError(error);
8359
8367
  }
8360
8368
  });
@@ -8431,6 +8439,7 @@ class PageBaseComponent {
8431
8439
  catch (error) {
8432
8440
  //clear the "saving" overlay and show the message at the top of the view through the errors property
8433
8441
  this.showErrorBanner(error, this.defaultUnknownSaveError);
8442
+ this.splashService.hideSplash();
8434
8443
  }
8435
8444
  }
8436
8445
  else {