@energycap/components 0.30.1 → 0.30.2

package/fesm2015/energycap-components.js

@@ -6196,13 +6196,21 @@ class TableSelectableRowContext {
          * without replacing the actual FormArray that the hosting component may be subscribed to for changes
          */
         this.rowAddedOrRemoved = new 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 = [];
     }
 }
 class TableSelectableRowComponent {
     constructor() {
         /**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;
@@ -6210,10 +6218,17 @@ class TableSelectableRowComponent {
          * 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: [] };
@@ -6222,13 +6237,13 @@ class TableSelectableRowComponent {
         this.destroyed = new Subject();
     }
     /** Disables the selection functionality when false */
-    set enabled(value) { this._enabled = value !== false; }
-    get enabled() { return this._enabled; }
+    set isSelectionEnabled(value) { this._selectionEnabled = value !== false; }
+    get isSelectionEnabled() { return this._selectionEnabled; }
     /**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.
+    */
     ngOnInit() {
         var _a, _b, _c;
         this.isHeader = this.rowIndex < 0;
@@ -6254,7 +6269,7 @@ class TableSelectableRowComponent {
             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) {
@@ -6277,19 +6292,13 @@ class TableSelectableRowComponent {
      * Handle shift and control select as well as checkbox click like windows explorer or the original bill lists do.
     */
     rowClicked(event) {
-        var _a, _b, _c;
-        if (!this.isHeader && this.enabled) {
+        if (!this.isHeader && this.isSelectionEnabled && !this.isCheckboxDisabled) {
             let targetEl = event === null || event === void 0 ? void 0 : event.target;
-            let 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);
+            }
         }
     }
     watchForChanges() {
@@ -6299,13 +6308,20 @@ class TableSelectableRowComponent {
         if (this.isHeader) {
             this.context.rowAddedOrRemoved.pipe(debounceTime(10), takeUntil(this.destroyed)).subscribe(() => {
                 this.context.lastClickedIndex = -1;
-                this.dependentCheckboxesReference = { controls: this.context.rowCheckboxes.controls };
+                // exclude nonDependentCheckboxes (some may not be allowed to be deselected)
+                let dependentCheckboxes = [];
+                this.context.rowCheckboxes.controls.forEach((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(takeUntil(this.destroyed)).subscribe((value) => {
                 this.isSelected = value;
             });
@@ -6352,18 +6368,19 @@ class TableSelectableRowComponent {
 TableSelectableRowComponent.decorators = [
     { type: 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: HostBinding, args: ['attr.id',] }, { type: Input }],
-    enabled: [{ type: HostBinding, args: ['class.is-enabled',] }, { type: Input, args: ['ecTableSelectableRow',] }],
+    isSelectionEnabled: [{ type: HostBinding, args: ['class.is-enabled',] }, { type: Input, args: ['ecTableSelectableRow',] }],
     context: [{ type: Input, args: ['selectionContext',] }],
     rowIndex: [{ type: Input }],
     lockedColOptions: [{ type: Input }],
     isSelected: [{ type: HostBinding, args: ['class.is-selected',] }, { type: Input }],
     isHeader: [{ type: HostBinding, args: ['class.is-header',] }],
+    isCheckboxDisabled: [{ type: Input }],
     rowClicked: [{ type: HostListener, args: ['click', ['$event'],] }]
 };
 
@@ -8156,6 +8173,10 @@ class ItemPickerSelectableContext extends TableSelectableRowContext {
          * the available/selected lists
          */
         this.selectedItemsMapChanged = new Subject();
+        /**
+         * AdvancedRowClickBehavior is disabled for ItemPicker.
+         */
+        this.disableAdvancedRowClickBehavior = true;
     }
 }
 class ItemPickerComponent {
@@ -8180,6 +8201,8 @@ class ItemPickerComponent {
          * 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 = (index) => index;
         this.tableStatus = new Overlay('pending');
@@ -8201,26 +8224,44 @@ class ItemPickerComponent {
         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.
      */
     onItemsChange(results) {
-        // 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(item => {
+        let newNonDependentCheckboxes = [];
+        results.items.forEach((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
      */
     onClearSelectionClick() {
-        this.selectionContext.selectedItemsMap = new Map();
-        this.selectionContext.rowCheckboxes.controls.forEach(control => control.setValue(false));
+        // 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 (const [key, val] of this.selectionContext.selectedItemsMap) {
+            if (!val.preventRemove) {
+                this.selectionContext.selectedItemsMap.delete(key);
+            }
+        }
+        this.selectionContext.rowCheckboxes.controls.forEach((control, index) => {
+            if (!this.availableItems[index].preventRemove) {
+                control.setValue(false);
+            }
+        });
         this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
     }
     /**
@@ -8263,6 +8304,7 @@ class ItemPickerComponent {
                 }
             });
             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(i => !i.preventRemove);
         });
     }
     /**
@@ -8306,7 +8348,7 @@ class ItemPickerComponent {
 ItemPickerComponent.decorators = [
     { type: 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}"]
             },] }
 ];