@energycap/components 0.28.13 → 0.28.15-ECAP-12239-Item-Picker-Table-Mode-Header.20220721-0858

package/bundles/energycap-components.umd.js

@@ -7327,7 +7327,7 @@
         function TableSelectableRowComponent() {
             /**The ID root to use for the checkbox and table cell */
             this.id = '';
-            this._enabled = true;
+            this._selectionEnabled = true;
             /*Required for all rows. The row index this component represents, to allow it to know how to handle shift+clicks.
               Defaults to -1 which will cause the directive to behave as a header row*/
             this.rowIndex = -1;
@@ -7335,10 +7335,12 @@
              * if the checkbox is not the first column in the table
              */
             this.lockedColOptions = { border: false, left: 0 };
-            /**Automatically set to true based on checkbox state, used to highlight the row to match our table selected row styles */
+            /** Automatically set to true based on checkbox state, used to highlight the row to match our table selected row styles */
             this.isSelected = false;
-            /**automatically set to true if no rowIndex is provided or the row index is less than zero */
+            /** Automatically set to true if no rowIndex is provided or the row index is less than zero */
             this.isHeader = false;
+            /** Set to true if you want the checkbox to be disabled */
+            this.isCheckboxDisabled = false;
             /* A reference that we can change when a control is replaced to force the master checkbox reference to update
                without also replacing the form array that the host component may be watching for selected row changes */
             this.dependentCheckboxesReference = { controls: [] };
@@ -7346,23 +7348,22 @@
             /**Sends an event when the component is destroyed so that it can unsubscribe from any observables */
             this.destroyed = new rxjs.Subject();
         }
-        Object.defineProperty(TableSelectableRowComponent.prototype, "enabled", {
-            get: function () { return this._enabled; },
+        Object.defineProperty(TableSelectableRowComponent.prototype, "isSelectionEnabled", {
+            get: function () { return this._selectionEnabled; },
             /** Disables the selection functionality when false */
-            set: function (value) { this._enabled = value !== false; },
+            set: function (value) { this._selectionEnabled = value !== false; },
             enumerable: false,
             configurable: true
         });
         /**Validate and populate the context as the table is dynamically built. Because the context is shared between the
-       * header and each of the rows, changes to it can be used to determine what is happening and hook up the correct
-       * subscriptions for selectAll. The user can provide an existing formArray for the rows and form control for the header,
-       * or it can just be the default empty ones created by the context class.
-      */
+         * header and each of the rows, changes to it can be used to determine what is happening and hook up the correct
+         * subscriptions for selectAll. The user can provide an existing formArray for the rows and form control for the header,
+         * or it can just be the default empty ones created by the context class.
+        */
         TableSelectableRowComponent.prototype.ngOnInit = function () {
             var _a, _b, _c;
             this.isHeader = this.rowIndex < 0;
             if (!this.context) {
-                console.error('ecTableSelectableRow requires a defined SelectableTableRowContext to be shared with all instances in one table.');
             }
             else {
                 var rowCheckbox = (_b = (_a = this.context) === null || _a === void 0 ? void 0 : _a.rowCheckboxes) === null || _b === void 0 ? void 0 : _b.at(this.rowIndex);
@@ -7383,7 +7384,7 @@
                 this.formControl = this.context.rowCheckboxes.at(this.rowIndex);
                 this.checkboxAttributeID = this.id + "_row" + this.rowIndex + "_ecCheckbox";
             }
-            if (changes.enabled && !this.enabled && ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value) === true) {
+            if (changes.isSelectionEnabled && !this.isSelectionEnabled && ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value) === true) {
                 this.formControl.setValue(false);
             }
             if (changes.isSelected && this.formControl) {
@@ -7407,16 +7408,8 @@
          * Handle shift and control select as well as checkbox click like windows explorer or the original bill lists do.
         */
         TableSelectableRowComponent.prototype.rowClicked = function (event) {
-            var _a, _b, _c;
-            if (!this.isHeader && this.enabled) {
+            if (!this.isHeader && this.isSelectionEnabled && !this.isCheckboxDisabled) {
                 var targetEl = event === null || event === void 0 ? void 0 : event.target;
-                var isCheckboxClick = (_c = (_b = (_a = targetEl === null || targetEl === void 0 ? void 0 : targetEl.classList) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === null || _c === void 0 ? void 0 : _c.includes('row-checkbox');
-                //normally clicking on a row checks only that row and unchecks everything else. 
-                //If the user wants to instead add that row to the current selection, they can either hold the control key or
-                //use the row checkbox.
-                if (!event.ctrlKey && !isCheckboxClick) {
-                    this.clearAllRows();
-                }
                 //clicking on a row always toggles that row. Sometimes the shift-select will toggle it back
                 this.formControl.setValue(!this.formControl.value);
                 this.handleShiftSelect(event);
@@ -7436,7 +7429,7 @@
             else {
                 this.context.rowAddedOrRemoved.next();
                 //watch for the checkbox state to change on a child row and set the row isSelected class / highlight to match
-                //this way the rows match even if external code updates the form model 
+                //this way the rows match even if external code updates the form model
                 (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(operators.takeUntil(this.destroyed)).subscribe(function (value) {
                     _this.isSelected = value;
                 });
@@ -7484,18 +7477,19 @@
     TableSelectableRowComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: '[ecTableSelectableRow]',
-                    template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n<ng-container *ngIf=\"enabled\">\r\n  <th *ngIf=\"isHeader\"\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n    <ec-checkbox id=\"{{id}}_selectAll\"\r\n                 class=\"m-0\"\r\n                 *ngIf=\"context?.selectAllCheckbox\"\r\n                 [formModel]=\"context?.selectAllCheckbox\"\r\n                 [dependentCheckboxesGroup]=\"dependentCheckboxesReference\">\r\n    </ec-checkbox>\r\n  </th>\r\n  <td *ngIf=\"!isHeader && formControl\"\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n    <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n                 [attr.id]=\"checkboxAttributeID\"\r\n                 class=\"m-0 row-checkbox\"\r\n                 [formModel]=\"formControl\">\r\n    </ec-checkbox>\r\n  </td>\r\n</ng-container>\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>",
+                    template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n<ng-container *ngIf=\"isSelectionEnabled\">\r\n  <th *ngIf=\"isHeader\"\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n    <ec-checkbox id=\"{{id}}_selectAll\"\r\n                 class=\"m-0\"\r\n                 *ngIf=\"context?.selectAllCheckbox\"\r\n                 [formModel]=\"context?.selectAllCheckbox\"\r\n                 [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\r\n                 [ignoreDisabledDependents]=\"false\">\r\n    </ec-checkbox>\r\n  </th>\r\n  <td *ngIf=\"!isHeader && formControl\"\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n    <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n                 [readonly]=\"isCheckboxDisabled\"\r\n                 [attr.id]=\"checkboxAttributeID\"\r\n                 class=\"m-0 row-checkbox\"\r\n                 [formModel]=\"formControl\">\r\n    </ec-checkbox>\r\n  </td>\r\n</ng-container>\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>",
                     styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:1px;padding-right:1px;width:1.125rem}:host .checkbox:first-child{padding-left:.5rem;width:1.5625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-vertical-align-checkbox-th,middle)}td.checkbox{vertical-align:var(--ec-vertical-align-checkbox-td,top)}"]
                 },] }
     ];
     TableSelectableRowComponent.propDecorators = {
         id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }],
-        enabled: [{ type: i0.HostBinding, args: ['class.is-enabled',] }, { type: i0.Input, args: ['ecTableSelectableRow',] }],
+        isSelectionEnabled: [{ type: i0.HostBinding, args: ['class.is-enabled',] }, { type: i0.Input, args: ['ecTableSelectableRow',] }],
         context: [{ type: i0.Input, args: ['selectionContext',] }],
         rowIndex: [{ type: i0.Input }],
         lockedColOptions: [{ type: i0.Input }],
         isSelected: [{ type: i0.HostBinding, args: ['class.is-selected',] }, { type: i0.Input }],
         isHeader: [{ type: i0.HostBinding, args: ['class.is-header',] }],
+        isCheckboxDisabled: [{ type: i0.Input }],
         rowClicked: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
     };
 
@@ -8859,6 +8853,8 @@
              * update this gets set to the values
              */
             this.selectedItems = [];
+            /** True if there are selected items and at least one can be removed */
+            this.selectedItemsClearable = false;
             /** Track by used for the searchable table rows */
             this.trackByIndex = function (index) { return index; };
             this.tableStatus = new Overlay('pending');
@@ -8899,8 +8895,30 @@
          * Called when the clear selection link button is clicked
          */
         ItemPickerComponent.prototype.onClearSelectionClick = function () {
-            this.selectionContext.selectedItemsMap = new Map();
-            this.selectionContext.rowCheckboxes.controls.forEach(function (control) { return control.setValue(false); });
+            var e_1, _e;
+            var _this = this;
+            try {
+                // Remove removable items from map
+                // This is safe.  See https://stackoverflow.com/questions/35940216/es6-is-it-dangerous-to-delete-elements-from-set-map-during-set-map-iteration
+                for (var _f = __values(this.selectionContext.selectedItemsMap), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var _h = __read(_g.value, 2), key = _h[0], val = _h[1];
+                    if (!val.preventRemove) {
+                        this.selectionContext.selectedItemsMap.delete(key);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_g && !_g.done && (_e = _f.return)) _e.call(_f);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            this.selectionContext.rowCheckboxes.controls.forEach(function (control, index) {
+                if (!_this.availableItems[index].preventRemove) {
+                    control.setValue(false);
+                }
+            });
             this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
         };
         /**
@@ -8944,6 +8962,7 @@
                     }
                 });
                 _this.selectedItems = Array.from((_a = _this.selectionContext) === null || _a === void 0 ? void 0 : _a.selectedItemsMap.values());
+                _this.selectedItemsClearable = _this.selectedItems.length > 0 && _this.selectedItems.some(function (i) { return !i.preventRemove; });
             });
         };
         /**
@@ -8989,7 +9008,7 @@
     ItemPickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-item-picker',
-                    template: "<div ecOverlay\r\n     class=\"d-flex flex-grow card\"\r\n     [status]=\"tableStatus?.status\"\r\n     [message]=\"tableStatus?.message\"\r\n     [displayAsMask]=\"true\">\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                         [style.--ec-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n                         [tableLayoutFixed]=\"true\">\r\n        <thead>\r\n            <tr ecTableSelectableRow\r\n                [selectionContext]=\"selectionContext\"\r\n                class=\"border-bottom-0\">\r\n                <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></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                    [style.--ec-vertical-align-checkbox-td]=\"'middle'\">\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    <section class=\"flex-grow d-flex flex-column\">\r\n        <ec-table [scrollable]=\"true\"\r\n                  class=\"flex-grow is-fixed\">\r\n            <colgroup>\r\n                <col>\r\n                <col style=\"width: 2rem;\">\r\n            </colgroup>\r\n            <thead>\r\n                <tr style=\"height: 3rem;\">\r\n                    <th colspan=\"2\"\r\n                        class=\"p-2 border-bottom-0\">\r\n                        <div class=\"d-flex align-items-center\">\r\n                            <span class=\"text-heading-2 font-color-primary flex-grow\">{{selectedTitle | translate}}</span>\r\n                            <a *ngIf=\"selectedItems.length\"\r\n                               id=\"{{id}}_clearSelection\"\r\n                               class=\"pl-2 ml-auto font-size-base\"\r\n                               href=\"javascript:void(0)\"\r\n                               (click)=\"onClearSelectionClick()\"\r\n                               translate>ClearSelection_TC</a>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n                <ng-container *ngIf=\"selectedItems.length\">\r\n                    <tr *ngFor=\"let item of selectedItems; last as isLast\"\r\n                        [class.border-bottom]=\"!isLast\">\r\n                        <td class=\"p-2\">\r\n                            <ng-container\r\n                                          *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n                            </ng-container>\r\n                        </td>\r\n\r\n                        <td class=\"actions-col text-right\"\r\n                            style=\"vertical-align: middle;\">\r\n                            <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n                                       type=\"icon\"\r\n                                       icon=\"ec-icon icon-cancel\"\r\n                                       (clicked)=\"removeSelectedItem(item)\">\r\n                            </ec-button>\r\n                        </td>\r\n                    </tr>\r\n                </ng-container>\r\n                <tr *ngIf=\"!selectedItems.length\">\r\n                    <td *ngIf=\"!noSelectedItemsMessage\"\r\n                        colspan=\"2\"\r\n                        class=\"p-2\"\r\n                        translate\r\n                        [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n                    <td *ngIf=\"noSelectedItemsMessage\"\r\n                        colspan=\"2\"\r\n                        class=\"p-2\"\r\n                        translate>{{noSelectedItemsMessage}}</td>\r\n                </tr>\r\n            </tbody>\r\n        </ec-table>\r\n\r\n        <footer *ngIf=\"selectedItems.length\"\r\n                class=\"d-flex flex-shrink px-2 border-top align-items-center\"\r\n                style=\"height: calc(2.5rem + 1px);\">\r\n            <span class=\"ml-auto text-caption-1 font-color-hint\">\r\n                {{selectedItems.length}} {{itemName | translate}}\r\n            </span>\r\n        </footer>\r\n    </section>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n    <th class=\"text-heading-2 font-color-primary border-bottom-0\">{{availableTitle | translate}}</th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n             let-item>\r\n    <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n             let-item>\r\n    {{item.label}}\r\n</ng-template>",
+                    template: "<div ecOverlay\r\n     class=\"d-flex flex-grow card\"\r\n     [status]=\"tableStatus?.status\"\r\n     [message]=\"tableStatus?.message\"\r\n     [displayAsMask]=\"true\">\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                         [style.--ec-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n                         [tableLayoutFixed]=\"true\">\r\n        <thead>\r\n            <tr *ngIf=\"customAvailableHeaderTemplate\">\r\n                <th [attr.colspan]=\"customAvailableHeaderNumberOfColumns\" class=\"text-heading-2 font-color-primary border-bottom-0\">{{availableTitle | translate}}</th>\r\n            </tr>\r\n            <tr ecTableSelectableRow\r\n                [selectionContext]=\"selectionContext\"\r\n                class=\"border-bottom-0\">\r\n                <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></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                    [isCheckboxDisabled]=\"item.preventRemove\"\r\n                    [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id)\"\r\n                    [style.--ec-vertical-align-checkbox-td]=\"'middle'\">\r\n                    <!-- [defaultValue]=\"item.defaultSelected\" -->\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    <section class=\"flex-grow d-flex flex-column\">\r\n        <ec-table [scrollable]=\"true\"\r\n                  class=\"flex-grow is-fixed\">\r\n            <colgroup>\r\n                <col>\r\n                <col style=\"width: 2rem;\">\r\n            </colgroup>\r\n            <thead>\r\n                <tr style=\"height: 3rem;\">\r\n                    <th colspan=\"2\"\r\n                        class=\"p-2 border-bottom-0\">\r\n                        <div class=\"d-flex align-items-center\">\r\n                            <span class=\"text-heading-2 font-color-primary flex-grow\">{{selectedTitle | translate}}</span>\r\n                            <a *ngIf=\"selectedItemsClearable\"\r\n                               id=\"{{id}}_clearSelection\"\r\n                               class=\"pl-2 ml-auto font-size-base\"\r\n                               href=\"javascript:void(0)\"\r\n                               (click)=\"onClearSelectionClick()\"\r\n                               translate>ClearSelection_TC</a>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n\r\n            <tbody>\r\n                <ng-container *ngIf=\"selectedItems.length\">\r\n                    <tr *ngFor=\"let item of selectedItems; last as isLast\"\r\n                        [class.border-bottom]=\"!isLast\">\r\n                        <td class=\"p-2\">\r\n                            <ng-container\r\n                                          *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n                            </ng-container>\r\n                        </td>\r\n\r\n                        <td class=\"actions-col text-right\"\r\n                            style=\"vertical-align: middle;\">\r\n                            <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n                                       *ngIf=\"!item.preventRemove\"\r\n                                       type=\"icon\"\r\n                                       icon=\"ec-icon icon-cancel\"\r\n                                       (clicked)=\"removeSelectedItem(item)\">\r\n                            </ec-button>\r\n                        </td>\r\n                    </tr>\r\n                </ng-container>\r\n                <tr *ngIf=\"!selectedItems.length\">\r\n                    <td *ngIf=\"!noSelectedItemsMessage\"\r\n                        colspan=\"2\"\r\n                        class=\"p-2\"\r\n                        translate\r\n                        [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n                    <td *ngIf=\"noSelectedItemsMessage\"\r\n                        colspan=\"2\"\r\n                        class=\"p-2\"\r\n                        translate>{{noSelectedItemsMessage}}</td>\r\n                </tr>\r\n            </tbody>\r\n        </ec-table>\r\n\r\n        <footer *ngIf=\"selectedItems.length\"\r\n                class=\"d-flex flex-shrink px-2 border-top align-items-center\"\r\n                style=\"height: calc(2.5rem + 1px);\">\r\n            <span class=\"ml-auto text-caption-1 font-color-hint\">\r\n                {{selectedItems.length}} {{itemName | translate}}\r\n            </span>\r\n        </footer>\r\n    </section>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n    <th class=\"text-heading-2 font-color-primary border-bottom-0\">{{availableTitle | translate}}</th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n             let-item>\r\n    <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n             let-item>\r\n    {{item.label}}\r\n</ng-template>",
                     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}ec-searchable-table{border-right:2px solid #d2d7d9}"]
                 },] }
     ];
@@ -9001,6 +9020,7 @@
         itemName: [{ type: i0.Input }],
         formModel: [{ type: i0.Input }],
         customAvailableHeaderTemplate: [{ type: i0.Input }],
+        customAvailableHeaderNumberOfColumns: [{ type: i0.Input }],
         customAvailableItemTemplate: [{ type: i0.Input }],
         customSelectedItemTemplate: [{ type: i0.Input }],
         ready: [{ type: i0.Input }],
@@ -9013,6 +9033,28 @@
         defaultSelectedItemTemplate: [{ type: i0.ViewChild, args: ['defaultSelectedItemTemplate', { static: true },] }]
     };
 
+    var HelpPopoverComponent = /** @class */ (function () {
+        function HelpPopoverComponent() {
+            this.id = '';
+            this.text = '';
+            this.contentPosition = 'top-left';
+        }
+        return HelpPopoverComponent;
+    }());
+    HelpPopoverComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'ec-help-popover',
+                    template: "<ec-popover id=\"{{id}}_popover\"\r\n            icon=\"icon-help-circle\"\r\n            [contentPosition]=\"contentPosition\"\r\n            iconHoverClass=\"font-color-primary-light\">\r\n  <div id=\"{{id}}_popoverContent\"\r\n       class=\"help-popover-content text-body-1\"\r\n       [class.is-right]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\">\r\n    <div *ngIf=\"text\"\r\n         [innerHTML]=\"text | translate\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ec-popover>",
+                    styles: [".help-popover-content{background-color:#162f3b;color:#fff;max-width:15rem;padding:.375rem .5rem .375rem 1.75rem}.help-popover-content.is-right{padding:.375rem 1.75rem .375rem .5rem}"]
+                },] }
+    ];
+    HelpPopoverComponent.ctorParameters = function () { return []; };
+    HelpPopoverComponent.propDecorators = {
+        id: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.id',] }],
+        text: [{ type: i0.Input }],
+        contentPosition: [{ type: i0.Input }]
+    };
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
@@ -9095,7 +9137,8 @@
                         ResizableComponent,
                         HighlightTextPipe,
                         FormControlLabelComponent,
-                        ItemPickerComponent
+                        ItemPickerComponent,
+                        HelpPopoverComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -9172,7 +9215,8 @@
                         ResizableComponent,
                         HighlightTextPipe,
                         FormControlLabelComponent,
-                        ItemPickerComponent
+                        ItemPickerComponent,
+                        HelpPopoverComponent
                     ]
                 },] }
     ];
@@ -10335,6 +10379,7 @@
     exports.FormControlLabelComponent = FormControlLabelComponent;
     exports.FormGroupComponent = FormGroupComponent;
     exports.FormGroupHelper = FormGroupHelper;
+    exports.HelpPopoverComponent = HelpPopoverComponent;
     exports.HierarchyBase = HierarchyBase;
     exports.HierarchyBaseTestInjectorFactory = HierarchyBaseTestInjectorFactory;
     exports.HierarchyItem = HierarchyItem;