@energycap/components 0.30.1 → 0.30.2

package/bundles/energycap-components.umd.js

@@ -7329,6 +7329,14 @@
              * without replacing the actual FormArray that the hosting component may be subscribed to for changes
              */
             this.rowAddedOrRemoved = new rxjs.Subject();
+            /**
+             * Set to true to disable Shift-Click/Ctrl-Click functionality
+             */
+            this.disableAdvancedRowClickBehavior = false;
+            /**
+             * Set to list of indices of controls that should not toggle when master/header checkbox toggles
+             */
+            this.nonDependentCheckboxes = [];
         }
         return TableSelectableRowContext;
     }());
@@ -7336,7 +7344,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;
@@ -7344,10 +7352,17 @@
              * 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.
+             *
+             * When you use this property, make sure you set `disableAdvancedRowClickBehavior: true`
+             * in the `TableSelectableRowContext`, or undesired side-effects will occur.
+             */
+            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: [] };
@@ -7355,18 +7370,18 @@
             /**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;
@@ -7392,7 +7407,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) {
@@ -7416,19 +7431,13 @@
          * 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);
+                if (!this.context.disableAdvancedRowClickBehavior) {
+                    this.handleShiftSelect(event);
+                }
             }
         };
         TableSelectableRowComponent.prototype.watchForChanges = function () {
@@ -7439,13 +7448,20 @@
             if (this.isHeader) {
                 this.context.rowAddedOrRemoved.pipe(operators.debounceTime(10), operators.takeUntil(this.destroyed)).subscribe(function () {
                     _this.context.lastClickedIndex = -1;
-                    _this.dependentCheckboxesReference = { controls: _this.context.rowCheckboxes.controls };
+                    // exclude nonDependentCheckboxes (some may not be allowed to be deselected)
+                    var dependentCheckboxes = [];
+                    _this.context.rowCheckboxes.controls.forEach(function (control, index) {
+                        if (!_this.context.nonDependentCheckboxes.includes(index)) {
+                            dependentCheckboxes.push(control);
+                        }
+                    });
+                    _this.dependentCheckboxesReference = { controls: dependentCheckboxes };
                 });
             }
             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;
                 });
@@ -7493,18 +7509,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    <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\r\n         and allow the value to be visible to other components (for example, when they subscribe\r\n         to valueChanges on the FormArray that contains all the checkbox FormControls). -->\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-table-selectable-row-vertical-align-checkbox-th,middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-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'],] }]
     };
 
@@ -8842,6 +8859,10 @@
              * the available/selected lists
              */
             _this.selectedItemsMapChanged = new rxjs.Subject();
+            /**
+             * AdvancedRowClickBehavior is disabled for ItemPicker.
+             */
+            _this.disableAdvancedRowClickBehavior = true;
             return _this;
         }
         return ItemPickerSelectableContext;
@@ -8868,6 +8889,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');
@@ -8889,27 +8912,57 @@
             this.destroyed.unsubscribe();
         };
         /**
-         * Called by the searchable table when a new set of items are returned from the getItems call
-         * @param results
+         * Called by the searchable table when a new set of items are returned from the getItems call.
+         * If any of the items have `preventRemove` set, their indices are added to the context.
          */
         ItemPickerComponent.prototype.onItemsChange = function (results) {
             var _this = this;
-            // Check to see if any of the items are marked to be selected by default and if so
-            // add them to the map.
-            results.items.forEach(function (item) {
+            var newNonDependentCheckboxes = [];
+            results.items.forEach(function (item, index) {
                 var _a, _b;
+                // Check to see if any of the items are marked to be selected by default and if so
+                // add them to the map.
                 if (item.defaultSelected && !((_a = _this.selectionContext) === null || _a === void 0 ? void 0 : _a.selectedItemsMap.has(item.id))) {
                     (_b = _this.selectionContext) === null || _b === void 0 ? void 0 : _b.selectedItemsMap.set(item.id, item);
                 }
+                // Check to see if any of the items are marked to prevent Removal, and if so
+                // add them to the non-dependent checkboxes array.  This will prevent the master
+                // checkbox from toggling them.
+                if (item.preventRemove) {
+                    newNonDependentCheckboxes.push(index);
+                }
             });
+            this.selectionContext.nonDependentCheckboxes = newNonDependentCheckboxes;
             this.availableItems = results.items;
         };
         /**
          * 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());
         };
         /**
@@ -8953,6 +9006,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; });
             });
         };
         /**
@@ -8998,7 +9052,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-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n                         [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n                         [tableLayoutFixed]=\"true\">\r\n        <header *ngIf=\"customAvailableHeaderTemplate\"\r\n                class=\"card-header flex-shrink\"\r\n                style=\"height: 3rem;\">\r\n            <h3 class=\"card-title\">{{availableTitle | translate}}</h3>\r\n        </header>\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-table-selectable-row-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=\"selected-items 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 text-truncate\">{{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 no-data-message\"\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 no-data-message\"\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<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-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n                         [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n                         [tableLayoutFixed]=\"true\">\r\n        <header *ngIf=\"customAvailableHeaderTemplate\"\r\n                class=\"card-header flex-shrink\"\r\n                style=\"height: 3rem;\">\r\n            <h3 class=\"card-title\">{{availableTitle | translate}}</h3>\r\n        </header>\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                    [isCheckboxDisabled]=\"item.preventRemove\"\r\n                    [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id)\"\r\n                    [style.--ec-table-selectable-row-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 id=\"{{id}}_selectedItems\" class=\"selected-items 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 text-truncate\">{{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                        id=\"selected_row_{{item.id}}\"\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 no-data-message\"\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 no-data-message\"\r\n                        translate>{{noSelectedItemsMessage}}</td>\r\n                </tr>\r\n            </tbody>\r\n        </ec-table>\r\n\r\n        <footer id=\"selectedItemsFooter\"\r\n                *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<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 var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items,50%)}.no-data-message{white-space:normal}"]
                 },] }
     ];