@energycap/components 0.28.7 → 0.28.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/energycap-components.umd.js +213 -11
- package/bundles/energycap-components.umd.js.map +1 -1
- package/bundles/energycap-components.umd.min.js +1 -1
- package/bundles/energycap-components.umd.min.js.map +1 -1
- package/energycap-components.metadata.json +1 -1
- package/esm2015/lib/components.module.js +6 -3
- package/esm2015/lib/controls/item-picker/item-picker.component.js +189 -0
- package/esm2015/lib/display/table/searchable-table.component.js +7 -4
- package/esm2015/lib/display/table/table-selectable-row.component.js +6 -3
- package/esm2015/lib/display/table/table.component.js +2 -2
- package/esm2015/lib/shared/wizard/wizard-buttons/wizard-buttons.component.js +4 -2
- package/esm2015/lib/shared/wizard/wizard-progress/wizard-progress.component.js +3 -3
- package/esm2015/public-api.js +2 -1
- package/fesm2015/energycap-components.js +205 -12
- package/fesm2015/energycap-components.js.map +1 -1
- package/lib/controls/item-picker/item-picker.component.d.ts +108 -0
- package/lib/display/table/searchable-table.component.d.ts +2 -0
- package/lib/shared/wizard/wizard-buttons/wizard-buttons.component.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/src/assets/locales/en_US.json +3 -1
|
@@ -6854,6 +6854,8 @@
|
|
|
6854
6854
|
this.removeCard = false;
|
|
6855
6855
|
/** Classes to add to the overlay/card element */
|
|
6856
6856
|
this.overlayClasses = '';
|
|
6857
|
+
/** When true the overlay and table will not have flex-shrink-max but instead flex-grow */
|
|
6858
|
+
this.fillParentHeight = false;
|
|
6857
6859
|
/**
|
|
6858
6860
|
* Text displayed in the footer.
|
|
6859
6861
|
* Sometimes `noDataMessage`, sometimes `noSearchResultsMessage`
|
|
@@ -7012,8 +7014,8 @@
|
|
|
7012
7014
|
SearchableTableComponent.decorators = [
|
|
7013
7015
|
{ type: i0.Component, args: [{
|
|
7014
7016
|
selector: 'ec-searchable-table',
|
|
7015
|
-
template: "<header *ngIf=\"!hideHeader\"\r\n class=\"d-flex flex-shrink align-items-center mb-3\">\r\n <ec-textbox id=\"{{id}}_searchbox\"\r\n *ngIf=\"!hideSearchControl\"\r\n class=\"mb-0 flex-grow mr-2\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"searchModel\"\r\n [tabindex]=\"searchboxTabIndex\"\r\n [placeholder]=\"searchboxPlaceholder\"\r\n [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n <div class=\"flex-grow\">\r\n <ng-content select=\".searchable-table-controls\"></ng-content>\r\n </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n class=\"d-flex flex-column
|
|
7016
|
-
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;flex:1 1;flex-direction:column;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}footer{font-size:.75rem;line-height:1rem}footer.has-results{color:rgba(26,26,35,.38);text-align:right}.card.has-mask{min-height:15rem}"]
|
|
7017
|
+
template: "<header *ngIf=\"!hideHeader\"\r\n class=\"d-flex flex-shrink align-items-center mb-3\">\r\n <ec-textbox id=\"{{id}}_searchbox\"\r\n *ngIf=\"!hideSearchControl\"\r\n class=\"mb-0 flex-grow mr-2\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"searchModel\"\r\n [tabindex]=\"searchboxTabIndex\"\r\n [placeholder]=\"searchboxPlaceholder\"\r\n [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n <div class=\"flex-grow\">\r\n <ng-content select=\".searchable-table-controls\"></ng-content>\r\n </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n class=\"d-flex flex-column {{overlayClasses}}\"\r\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n ecOverlay\r\n [status]=\"status.status\"\r\n [message]=\"status.message\"\r\n [displayAsMask]=\"true\">\r\n <ng-content select=\".card-header\"></ng-content>\r\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n </ng-container>\r\n\r\n <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n and still retain all the event handling, header, footer pagination, etc support -->\r\n <ng-template #defaultContentTemplate>\r\n <ec-table id=\"{{id}}_table\"\r\n class=\"{{tableClasses}}\"\r\n [class.is-fixed]=\"tableLayoutFixed\"\r\n [sortable]=\"sortable\"\r\n [sort]=\"sort\"\r\n (sortChange)=\"onSortChange($event)\"\r\n [resizable]=\"resizable\"\r\n [scrollable]=\"true\"\r\n [selectable]=\"selectable\"\r\n [selectionContext]=\"selectionContext\"\r\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </ec-table>\r\n </ng-template>\r\n\r\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n class=\"d-flex flex-shrink align-items-center\"\r\n [class.border-top]=\"!customContentTemplate\">\r\n <ec-table-pagination id=\"{{id}}_pager\"\r\n class=\"font-color-primary\"\r\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n [pageSize]=\"pageSize\"\r\n [maxTabs]=\"maxTabs\"\r\n [pageNumber]=\"pageInfo?.pageNumber\"\r\n (pageChanged)=\"onPageChange($event)\">\r\n </ec-table-pagination>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto mr-2 font-color-hint text-truncate\" \r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n\r\n <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n class=\"p-2 d-flex\"\r\n [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n <ng-content *ngIf=\"!tableCaption\"\r\n select=\".searchable-table-footer\"></ng-content>\r\n <div id=\"tableCaption\"\r\n *ngIf=\"tableCaption\"\r\n [innerHTML]=\"tableCaption\"></div>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto text-truncate\"\r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n</section>",
|
|
7018
|
+
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{--ec-flex-ec-table:var(--ec-flex-properties,0 1 auto);--ec-flex-overlay-section:var(--ec-flex-properties,0 1 auto);--ec-flex-properties:0 1 auto;display:flex;flex:1 1;flex-direction:column;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-flex-ec-table);min-height:0}footer{font-size:.75rem;line-height:1rem}footer.has-results{color:rgba(26,26,35,.38);text-align:right}.card.has-mask{min-height:15rem}"]
|
|
7017
7019
|
},] }
|
|
7018
7020
|
];
|
|
7019
7021
|
SearchableTableComponent.ctorParameters = function () { return [
|
|
@@ -7057,7 +7059,8 @@
|
|
|
7057
7059
|
selectable: [{ type: i0.Input }],
|
|
7058
7060
|
customContentTemplate: [{ type: i0.Input }],
|
|
7059
7061
|
removeCard: [{ type: i0.Input }],
|
|
7060
|
-
overlayClasses: [{ type: i0.Input }]
|
|
7062
|
+
overlayClasses: [{ type: i0.Input }],
|
|
7063
|
+
fillParentHeight: [{ type: i0.Input }]
|
|
7061
7064
|
};
|
|
7062
7065
|
|
|
7063
7066
|
var TableDetailRowComponent = /** @class */ (function () {
|
|
@@ -7358,7 +7361,7 @@
|
|
|
7358
7361
|
else {
|
|
7359
7362
|
var rowCheckbox = (_b = (_a = this.context) === null || _a === void 0 ? void 0 : _a.rowCheckboxes) === null || _b === void 0 ? void 0 : _b.at(this.rowIndex);
|
|
7360
7363
|
if (!this.isHeader && !rowCheckbox) {
|
|
7361
|
-
rowCheckbox = new forms.FormControl(
|
|
7364
|
+
rowCheckbox = new forms.FormControl(this.isSelected);
|
|
7362
7365
|
(_c = this.context) === null || _c === void 0 ? void 0 : _c.rowCheckboxes.push(rowCheckbox);
|
|
7363
7366
|
}
|
|
7364
7367
|
this.formControl = this.isHeader ? this.context.selectAllCheckbox : rowCheckbox;
|
|
@@ -7377,6 +7380,9 @@
|
|
|
7377
7380
|
if (changes.enabled && !this.enabled && ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value) === true) {
|
|
7378
7381
|
this.formControl.setValue(false);
|
|
7379
7382
|
}
|
|
7383
|
+
if (changes.isSelected && this.formControl) {
|
|
7384
|
+
this.formControl.setValue(this.isSelected);
|
|
7385
|
+
}
|
|
7380
7386
|
};
|
|
7381
7387
|
/** Tell the header checkbox to refresh the selectAll subscription because a row was removed*/
|
|
7382
7388
|
TableSelectableRowComponent.prototype.ngOnDestroy = function () {
|
|
@@ -7482,7 +7488,7 @@
|
|
|
7482
7488
|
context: [{ type: i0.Input, args: ['selectionContext',] }],
|
|
7483
7489
|
rowIndex: [{ type: i0.Input }],
|
|
7484
7490
|
lockedColOptions: [{ type: i0.Input }],
|
|
7485
|
-
isSelected: [{ type: i0.HostBinding, args: ['class.is-selected',] }],
|
|
7491
|
+
isSelected: [{ type: i0.HostBinding, args: ['class.is-selected',] }, { type: i0.Input }],
|
|
7486
7492
|
isHeader: [{ type: i0.HostBinding, args: ['class.is-header',] }],
|
|
7487
7493
|
rowClicked: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
|
|
7488
7494
|
};
|
|
@@ -7667,7 +7673,7 @@
|
|
|
7667
7673
|
TableComponent.decorators = [
|
|
7668
7674
|
{ type: i0.Component, args: [{
|
|
7669
7675
|
selector: 'ec-table',
|
|
7670
|
-
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>",
|
|
7676
|
+
template: "<div class=\"selectable-table-toolbar\"\r\n *ngIf=\"hasSelection && selectionToolbarTemplate\">\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>",
|
|
7671
7677
|
encapsulation: i0.ViewEncapsulation.None,
|
|
7672
7678
|
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}"]
|
|
7673
7679
|
},] }
|
|
@@ -8591,6 +8597,7 @@
|
|
|
8591
8597
|
this.nextLabel = 'Next_TC';
|
|
8592
8598
|
this.backLabel = 'Back_TC';
|
|
8593
8599
|
this.cancelLabel = 'Cancel';
|
|
8600
|
+
this.saveLabel = 'Save';
|
|
8594
8601
|
this.cancelId = 'cancelWizardDialog';
|
|
8595
8602
|
this.saveId = 'saveWizardDialog';
|
|
8596
8603
|
this.tabindex = 0;
|
|
@@ -8616,7 +8623,7 @@
|
|
|
8616
8623
|
WizardButtonsComponent.decorators = [
|
|
8617
8624
|
{ type: i0.Component, args: [{
|
|
8618
8625
|
selector: 'ec-wizard-buttons',
|
|
8619
|
-
template: "<ec-button id=\"{{saveId}}\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideNextSaveButton\"\r\n type=\"primary\"\r\n [label]=\"(!showSave ? nextLabel :
|
|
8626
|
+
template: "<ec-button id=\"{{saveId}}\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideNextSaveButton\"\r\n type=\"primary\"\r\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n</ec-button>\r\n<ec-button id=\"previousTab\"\r\n class=\"ml-2\"\r\n *ngIf=\"showBack\"\r\n type=\"secondary\"\r\n [label]=\"backLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n (clicked)=\"onPreviousTab()\">\r\n</ec-button>\r\n<ec-button id=\"{{cancelId}}\"\r\n type=\"secondary\"\r\n [label]=\"cancelLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n (clicked)=\"onCancel()\">\r\n</ec-button>\r\n",
|
|
8620
8627
|
styles: [":host{display:flex;flex-direction:row-reverse}:host-context(ec-page-view .titlebar>.actions){flex-direction:row}"]
|
|
8621
8628
|
},] }
|
|
8622
8629
|
];
|
|
@@ -8625,6 +8632,7 @@
|
|
|
8625
8632
|
nextLabel: [{ type: i0.Input }],
|
|
8626
8633
|
backLabel: [{ type: i0.Input }],
|
|
8627
8634
|
cancelLabel: [{ type: i0.Input }],
|
|
8635
|
+
saveLabel: [{ type: i0.Input }],
|
|
8628
8636
|
cancelId: [{ type: i0.Input }],
|
|
8629
8637
|
saveId: [{ type: i0.Input }],
|
|
8630
8638
|
tabindex: [{ type: i0.Input }],
|
|
@@ -8646,8 +8654,8 @@
|
|
|
8646
8654
|
WizardProgressComponent.decorators = [
|
|
8647
8655
|
{ type: i0.Component, args: [{
|
|
8648
8656
|
selector: 'ec-wizard-progress',
|
|
8649
|
-
template: "<div *ngFor=\"let tab of tabGroup?.items; index as index\"\r\n class=\"progress-tab
|
|
8650
|
-
styles: [".progress-tab,:host{align-items:center;display:flex}.progress-tab.is-active{font-weight:700}
|
|
8657
|
+
template: "<div *ngFor=\"let tab of tabGroup?.items; index as index; first as isFirst; last as isLast\"\r\n class=\"progress-tab\"\r\n [class.ml-2]=\"!isFirst\"\r\n [class.is-active]=\"currentTab?.id === tab.id\">\r\n\r\n <i *ngIf=\"tab.completed\"\r\n class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\r\n <span *ngIf=\"!tab.completed\">{{index+1}}. </span>\r\n <span>{{tab.label | translate}}</span>\r\n <i *ngIf=\"!isLast\"\r\n class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\r\n</div>",
|
|
8658
|
+
styles: [":host{padding:0 1rem}.progress-tab,:host{align-items:center;display:flex}.progress-tab.is-active{font-weight:700}"]
|
|
8651
8659
|
},] }
|
|
8652
8660
|
];
|
|
8653
8661
|
WizardProgressComponent.ctorParameters = function () { return []; };
|
|
@@ -8801,6 +8809,196 @@
|
|
|
8801
8809
|
hideValidationMessage: [{ type: i0.Input }]
|
|
8802
8810
|
};
|
|
8803
8811
|
|
|
8812
|
+
;
|
|
8813
|
+
var ItemPickerSelectableContext = /** @class */ (function (_super) {
|
|
8814
|
+
__extends(ItemPickerSelectableContext, _super);
|
|
8815
|
+
function ItemPickerSelectableContext() {
|
|
8816
|
+
var _this = _super.apply(this, __spread(arguments)) || this;
|
|
8817
|
+
/** id/value map of the selected items. Used for keeping track of what is selected */
|
|
8818
|
+
_this.selectedItemsMap = new Map();
|
|
8819
|
+
/**
|
|
8820
|
+
* Gives a way to tell the picker component that the map was modified externally and to update
|
|
8821
|
+
* the available/selected lists
|
|
8822
|
+
*/
|
|
8823
|
+
_this.selectedItemsMapChanged = new rxjs.Subject();
|
|
8824
|
+
return _this;
|
|
8825
|
+
}
|
|
8826
|
+
return ItemPickerSelectableContext;
|
|
8827
|
+
}(TableSelectableRowContext));
|
|
8828
|
+
var ItemPickerComponent = /** @class */ (function () {
|
|
8829
|
+
function ItemPickerComponent() {
|
|
8830
|
+
/** Identifier for the component. This will be added to the beginning of all internal action elements */
|
|
8831
|
+
this.id = '';
|
|
8832
|
+
/** Title displayed above the available items table */
|
|
8833
|
+
this.availableTitle = '';
|
|
8834
|
+
/** Title displayed above the selected items list */
|
|
8835
|
+
this.selectedTitle = '';
|
|
8836
|
+
/** The type of item being selected. Ex. Meters, Addresses */
|
|
8837
|
+
this.itemName = '';
|
|
8838
|
+
/** Used by the internal Searchable Table when there is no available items to choose from based on the getItems results. Do not supply
|
|
8839
|
+
* to inherit the default message.
|
|
8840
|
+
*/
|
|
8841
|
+
this.noDataMessage = '';
|
|
8842
|
+
/** List of available items to pick from */
|
|
8843
|
+
this.availableItems = [];
|
|
8844
|
+
/**
|
|
8845
|
+
* Selected items array. Created from the selected items map. Binding to the
|
|
8846
|
+
* map iterate values caused angular "expression changed" errors so after a map
|
|
8847
|
+
* update this gets set to the values
|
|
8848
|
+
*/
|
|
8849
|
+
this.selectedItems = [];
|
|
8850
|
+
/** Track by used for the searchable table rows */
|
|
8851
|
+
this.trackByIndex = function (index) { return index; };
|
|
8852
|
+
this.tableStatus = new Overlay('hasData');
|
|
8853
|
+
/** Used to shut down our subscriptions when the component is destroyed */
|
|
8854
|
+
this.destroyed = new rxjs.Subject();
|
|
8855
|
+
}
|
|
8856
|
+
ItemPickerComponent.prototype.ngOnInit = function () {
|
|
8857
|
+
this.setupRowCheckboxesWatcher();
|
|
8858
|
+
this.setupSelectedItemsChangedWatcher();
|
|
8859
|
+
};
|
|
8860
|
+
/**
|
|
8861
|
+
* Watch for changes and react if the custom item template value changes
|
|
8862
|
+
*/
|
|
8863
|
+
ItemPickerComponent.prototype.ngOnChanges = function () {
|
|
8864
|
+
this.setInternalizedTemplates();
|
|
8865
|
+
};
|
|
8866
|
+
ItemPickerComponent.prototype.ngOnDestroy = function () {
|
|
8867
|
+
this.destroyed.next();
|
|
8868
|
+
this.destroyed.unsubscribe();
|
|
8869
|
+
};
|
|
8870
|
+
/**
|
|
8871
|
+
* Called by the searchable table when a new set of items are returned from the getItems call
|
|
8872
|
+
* @param results
|
|
8873
|
+
*/
|
|
8874
|
+
ItemPickerComponent.prototype.onItemsChange = function (results) {
|
|
8875
|
+
var _this = this;
|
|
8876
|
+
// Check to see if any of the items are marked to be selected by default and if so
|
|
8877
|
+
// add them to the map.
|
|
8878
|
+
results.items.forEach(function (item) {
|
|
8879
|
+
var _a, _b;
|
|
8880
|
+
if (item.defaultSelected && !((_a = _this.selectionContext) === null || _a === void 0 ? void 0 : _a.selectedItemsMap.has(item.id))) {
|
|
8881
|
+
(_b = _this.selectionContext) === null || _b === void 0 ? void 0 : _b.selectedItemsMap.set(item.id, item);
|
|
8882
|
+
}
|
|
8883
|
+
});
|
|
8884
|
+
this.availableItems = results.items;
|
|
8885
|
+
};
|
|
8886
|
+
/**
|
|
8887
|
+
* Called when the clear selection link button is clicked
|
|
8888
|
+
*/
|
|
8889
|
+
ItemPickerComponent.prototype.onClearSelectionClick = function () {
|
|
8890
|
+
this.selectionContext.selectedItemsMap = new Map();
|
|
8891
|
+
this.selectionContext.rowCheckboxes.controls.forEach(function (control) { return control.setValue(false); });
|
|
8892
|
+
};
|
|
8893
|
+
/**
|
|
8894
|
+
* Called when the remove item button is clicked for a selected item
|
|
8895
|
+
* @param removeItem
|
|
8896
|
+
*/
|
|
8897
|
+
ItemPickerComponent.prototype.removeSelectedItem = function (removeItem) {
|
|
8898
|
+
var foundIndex = this.availableItems.findIndex(function (item) { return item.id === removeItem.id; });
|
|
8899
|
+
if (foundIndex > -1) {
|
|
8900
|
+
// Update the row checkbox since the item exists in the page being viewed
|
|
8901
|
+
// The value change handler for row checkboxes will update the map/selected items
|
|
8902
|
+
this.selectionContext.rowCheckboxes.at(foundIndex).setValue(false);
|
|
8903
|
+
}
|
|
8904
|
+
else {
|
|
8905
|
+
// The item being removed is not on the current page so just update the
|
|
8906
|
+
// map/selected items
|
|
8907
|
+
this.selectionContext.selectedItemsMap.delete(removeItem.id);
|
|
8908
|
+
this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
|
|
8909
|
+
}
|
|
8910
|
+
};
|
|
8911
|
+
/**
|
|
8912
|
+
* Watch for changes to the row checkboxes form array and update the selected items
|
|
8913
|
+
* list
|
|
8914
|
+
*/
|
|
8915
|
+
ItemPickerComponent.prototype.setupRowCheckboxesWatcher = function () {
|
|
8916
|
+
var _this = this;
|
|
8917
|
+
var _a;
|
|
8918
|
+
(_a = this.selectionContext) === null || _a === void 0 ? void 0 : _a.rowCheckboxes.valueChanges.pipe(
|
|
8919
|
+
// Debounce 10 is simply to not spam the change handler on load/page change
|
|
8920
|
+
// Otherwise this will get called every time a new row is added to the table
|
|
8921
|
+
operators.debounceTime(10), operators.takeUntil(this.destroyed)).subscribe(function (rowValues) {
|
|
8922
|
+
var _a;
|
|
8923
|
+
rowValues.forEach(function (selected, index) {
|
|
8924
|
+
var _a, _b, _c, _d;
|
|
8925
|
+
var availableItem = _this.availableItems[index];
|
|
8926
|
+
if (!selected && ((_a = _this.selectionContext) === null || _a === void 0 ? void 0 : _a.selectedItemsMap.has(availableItem.id))) {
|
|
8927
|
+
(_b = _this.selectionContext) === null || _b === void 0 ? void 0 : _b.selectedItemsMap.delete(availableItem.id);
|
|
8928
|
+
}
|
|
8929
|
+
else if (selected && !((_c = _this.selectionContext) === null || _c === void 0 ? void 0 : _c.selectedItemsMap.has(availableItem.id))) {
|
|
8930
|
+
(_d = _this.selectionContext) === null || _d === void 0 ? void 0 : _d.selectedItemsMap.set(availableItem.id, availableItem);
|
|
8931
|
+
}
|
|
8932
|
+
});
|
|
8933
|
+
_this.selectedItems = Array.from((_a = _this.selectionContext) === null || _a === void 0 ? void 0 : _a.selectedItemsMap.values());
|
|
8934
|
+
});
|
|
8935
|
+
};
|
|
8936
|
+
/**
|
|
8937
|
+
* Watch to be told if changes to the map were made outside of the component and if so update
|
|
8938
|
+
* the array displayed in the selected list and select checkboxes for visible available items
|
|
8939
|
+
*/
|
|
8940
|
+
ItemPickerComponent.prototype.setupSelectedItemsChangedWatcher = function () {
|
|
8941
|
+
var _this = this;
|
|
8942
|
+
this.selectionContext.selectedItemsMapChanged.pipe(operators.takeUntil(this.destroyed)).subscribe(function () {
|
|
8943
|
+
var _a;
|
|
8944
|
+
if (_this.selectionContext) {
|
|
8945
|
+
_this.selectedItems = Array.from((_a = _this.selectionContext) === null || _a === void 0 ? void 0 : _a.selectedItemsMap.values());
|
|
8946
|
+
_this.availableItems.forEach(function (item, index) {
|
|
8947
|
+
if (_this.selectionContext.selectedItemsMap.has(item.id)) {
|
|
8948
|
+
_this.selectionContext.rowCheckboxes.at(index).setValue(true);
|
|
8949
|
+
}
|
|
8950
|
+
});
|
|
8951
|
+
}
|
|
8952
|
+
});
|
|
8953
|
+
};
|
|
8954
|
+
ItemPickerComponent.prototype.setInternalizedTemplates = function () {
|
|
8955
|
+
if (this.customAvailableHeaderTemplate) {
|
|
8956
|
+
this.internalizedAvailableHeaderTemplate = this.customAvailableHeaderTemplate;
|
|
8957
|
+
}
|
|
8958
|
+
else {
|
|
8959
|
+
this.internalizedAvailableHeaderTemplate = this.defaultAvailableHeaderTemplate;
|
|
8960
|
+
}
|
|
8961
|
+
if (this.customAvailableItemTemplate) {
|
|
8962
|
+
this.internalizedAvailableItemTemplate = this.customAvailableItemTemplate;
|
|
8963
|
+
}
|
|
8964
|
+
else {
|
|
8965
|
+
this.internalizedAvailableItemTemplate = this.defaultAvailableItemTemplate;
|
|
8966
|
+
}
|
|
8967
|
+
if (this.customSelectedItemTemplate) {
|
|
8968
|
+
this.internalizedSelectedItemTemplate = this.customSelectedItemTemplate;
|
|
8969
|
+
}
|
|
8970
|
+
else {
|
|
8971
|
+
this.internalizedSelectedItemTemplate = this.defaultSelectedItemTemplate;
|
|
8972
|
+
}
|
|
8973
|
+
};
|
|
8974
|
+
return ItemPickerComponent;
|
|
8975
|
+
}());
|
|
8976
|
+
ItemPickerComponent.decorators = [
|
|
8977
|
+
{ type: i0.Component, args: [{
|
|
8978
|
+
selector: 'ec-item-picker',
|
|
8979
|
+
template: "<div class=\"d-flex flex-grow card\">\r\n <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n class=\"flex-grow\"\r\n [fillParentHeight]=\"true\"\r\n [hideHeader]=\"true\"\r\n [hideSearchControl]=\"true\"\r\n [removeCard]=\"true\"\r\n [pageable]=\"true\"\r\n [pageSize]=\"50\"\r\n [objectType]=\"itemName\"\r\n [formModel]=\"formModel\"\r\n [ready]=\"ready\"\r\n [getItems]=\"getItems\"\r\n [selectable]=\"true\"\r\n [noDataMessage]=\"noDataMessage\"\r\n [selectionContext]=\"selectionContext\"\r\n [status]=\"tableStatus\"\r\n (itemsChange)=\"onItemsChange($event)\"\r\n [style.--ec-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\">\r\n <thead>\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\">\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let item of availableItems; index as rowIndex; trackBy: trackByIndex\">\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n [rowIndex]=\"rowIndex\"\r\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id)\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </ec-searchable-table>\r\n\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"d-flex flex-shrink align-items-center px-2\"\r\n [style.height.rem]=\"3\">\r\n <span class=\"text-heading-2\">{{selectedTitle | translate}}</span>\r\n <a *ngIf=\"selectedItems.length\"\r\n id=\"{{id}}_clearSelection\"\r\n class=\"ml-auto\"\r\n href=\"javascript:void(0)\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>\r\n ClearSelection_TC\r\n </a>\r\n </div>\r\n\r\n <div class=\"d-flex flex-column flex-grow scroll-y\">\r\n <ng-container *ngIf=\"selectedItems.length\">\r\n <div *ngFor=\"let item of selectedItems; last as isLast\"\r\n class=\"d-flex align-items-center pl-2\"\r\n [class.border-bottom]=\"!isLast\">\r\n <ng-container *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\"></ng-container>\r\n\r\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n class=\"ml-auto\"\r\n type=\"icon\"\r\n icon=\"ec-icon icon-cancel\"\r\n (clicked)=\"removeSelectedItem(item)\">\r\n </ec-button>\r\n </div>\r\n </ng-container>\r\n <span *ngIf=\"!selectedItems.length\"\r\n class=\"px-2 pt-2 font-size-small\"\r\n translate\r\n [translateParams]=\"{itemName: itemName | translate}\">\r\n ItemPickerNoItemsSelected_SC\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"selectedItems.length\"\r\n class=\"d-flex flex-shrink px-2 border-top align-items-center\"\r\n [style.height.px]=\"40\">\r\n <span class=\"ml-auto text-caption-1 font-color-hint\">\r\n {{selectedItems.length}} {{itemName | translate}}\r\n </span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary\">{{availableTitle | translate}}</th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate let-item>\r\n <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n {{item.label}}\r\n</ng-template>",
|
|
8980
|
+
styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}::ng-deep ec-table .main-table thead th{border-bottom:0}ec-searchable-table{border-right:2px solid #d2d7d9}.card{border:0}"]
|
|
8981
|
+
},] }
|
|
8982
|
+
];
|
|
8983
|
+
ItemPickerComponent.ctorParameters = function () { return []; };
|
|
8984
|
+
ItemPickerComponent.propDecorators = {
|
|
8985
|
+
id: [{ type: i0.Input }],
|
|
8986
|
+
availableTitle: [{ type: i0.Input }],
|
|
8987
|
+
selectedTitle: [{ type: i0.Input }],
|
|
8988
|
+
itemName: [{ type: i0.Input }],
|
|
8989
|
+
formModel: [{ type: i0.Input }],
|
|
8990
|
+
customAvailableHeaderTemplate: [{ type: i0.Input }],
|
|
8991
|
+
customAvailableItemTemplate: [{ type: i0.Input }],
|
|
8992
|
+
customSelectedItemTemplate: [{ type: i0.Input }],
|
|
8993
|
+
ready: [{ type: i0.Input }],
|
|
8994
|
+
getItems: [{ type: i0.Input }],
|
|
8995
|
+
selectionContext: [{ type: i0.Input }],
|
|
8996
|
+
noDataMessage: [{ type: i0.Input }],
|
|
8997
|
+
defaultAvailableHeaderTemplate: [{ type: i0.ViewChild, args: ['defaultAvailableHeaderTemplate', { static: true },] }],
|
|
8998
|
+
defaultAvailableItemTemplate: [{ type: i0.ViewChild, args: ['defaultAvailableItemTemplate', { static: true },] }],
|
|
8999
|
+
defaultSelectedItemTemplate: [{ type: i0.ViewChild, args: ['defaultSelectedItemTemplate', { static: true },] }]
|
|
9000
|
+
};
|
|
9001
|
+
|
|
8804
9002
|
var ComponentsModule = /** @class */ (function () {
|
|
8805
9003
|
function ComponentsModule() {
|
|
8806
9004
|
}
|
|
@@ -8882,7 +9080,8 @@
|
|
|
8882
9080
|
RelativeDatePipe,
|
|
8883
9081
|
ResizableComponent,
|
|
8884
9082
|
HighlightTextPipe,
|
|
8885
|
-
FormControlLabelComponent
|
|
9083
|
+
FormControlLabelComponent,
|
|
9084
|
+
ItemPickerComponent
|
|
8886
9085
|
],
|
|
8887
9086
|
imports: [
|
|
8888
9087
|
common.CommonModule,
|
|
@@ -8958,7 +9157,8 @@
|
|
|
8958
9157
|
RelativeDatePipe,
|
|
8959
9158
|
ResizableComponent,
|
|
8960
9159
|
HighlightTextPipe,
|
|
8961
|
-
FormControlLabelComponent
|
|
9160
|
+
FormControlLabelComponent,
|
|
9161
|
+
ItemPickerComponent
|
|
8962
9162
|
]
|
|
8963
9163
|
},] }
|
|
8964
9164
|
];
|
|
@@ -10128,6 +10328,8 @@
|
|
|
10128
10328
|
exports.HighlightTextPipe = HighlightTextPipe;
|
|
10129
10329
|
exports.IfViewportWidthDirective = IfViewportWidthDirective;
|
|
10130
10330
|
exports.ItemDisplayComponent = ItemDisplayComponent;
|
|
10331
|
+
exports.ItemPickerComponent = ItemPickerComponent;
|
|
10332
|
+
exports.ItemPickerSelectableContext = ItemPickerSelectableContext;
|
|
10131
10333
|
exports.JsonDisplayComponent = JsonDisplayComponent;
|
|
10132
10334
|
exports.JsonHelper = JsonHelper;
|
|
10133
10335
|
exports.MenuComponent = MenuComponent;
|