@energycap/components 0.39.24-ECAP-26539-Item-Picker-Select-All.20240912-1453 → 0.39.24-ECAP-26539-Item-Picker-Select-All.20240912-1552
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/esm2020/lib/controls/item-picker/item-picker.component.mjs +52 -31
- package/fesm2015/energycap-components.mjs +51 -30
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +51 -30
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/item-picker/item-picker.component.d.ts +27 -8
- package/package.json +1 -1
|
@@ -9084,6 +9084,10 @@ class ItemPickerSelectableContext extends TableSelectableRowContext {
|
|
|
9084
9084
|
* AdvancedRowClickBehavior is disabled for ItemPicker.
|
|
9085
9085
|
*/
|
|
9086
9086
|
this.disableAdvancedRowClickBehavior = true;
|
|
9087
|
+
/** When true the user has opted to select all items across all pages. Due to api pagination
|
|
9088
|
+
* we don't have all of the items locally, so the host will need to tell the API to operate on all
|
|
9089
|
+
* via api filters or other means.
|
|
9090
|
+
*/
|
|
9087
9091
|
this.isSelectingAllItems = false;
|
|
9088
9092
|
}
|
|
9089
9093
|
}
|
|
@@ -9102,8 +9106,12 @@ class ItemPickerComponent {
|
|
|
9102
9106
|
* to inherit the default message.
|
|
9103
9107
|
*/
|
|
9104
9108
|
this.noDataMessage = '';
|
|
9105
|
-
|
|
9106
|
-
|
|
9109
|
+
/** When true the button to select all items will be visible in the available items header when
|
|
9110
|
+
* the header checkbox is checked and there are multiple pages of results
|
|
9111
|
+
*/
|
|
9112
|
+
this.enableSelectAllItems = false;
|
|
9113
|
+
/** Passed in message to display in the selected items table when the select all items button is clicked */
|
|
9114
|
+
this.selectAllItemsMessage = '';
|
|
9107
9115
|
/** List of available items to pick from */
|
|
9108
9116
|
this.availableItems = [];
|
|
9109
9117
|
/**
|
|
@@ -9117,9 +9125,17 @@ class ItemPickerComponent {
|
|
|
9117
9125
|
/** Track by used for the searchable table rows */
|
|
9118
9126
|
this.trackByIndex = (index) => index;
|
|
9119
9127
|
this.tableStatus = new Overlay('pending');
|
|
9120
|
-
|
|
9121
|
-
|
|
9122
|
-
|
|
9128
|
+
/** Text to display next to the checkbox in the available items header. Used to dislay how many items are
|
|
9129
|
+
* selected when select all items is enabled
|
|
9130
|
+
*/
|
|
9131
|
+
this.availableCheckboxText = '';
|
|
9132
|
+
/** When set to true the select all items button will show in the available items header. This is
|
|
9133
|
+
* shown when the user has enabled select all for the item picker and the user selects the header checkbox
|
|
9134
|
+
* with more than one page of results.
|
|
9135
|
+
*/
|
|
9136
|
+
this.showSelectAllItemsButton = false;
|
|
9137
|
+
/** The total number of items returned from the api across all pages */
|
|
9138
|
+
this.totalItemsBeforePaging = 0;
|
|
9123
9139
|
/** Used to shut down our subscriptions when the component is destroyed */
|
|
9124
9140
|
this.destroyed = new Subject();
|
|
9125
9141
|
}
|
|
@@ -9127,11 +9143,6 @@ class ItemPickerComponent {
|
|
|
9127
9143
|
this.setupRowCheckboxesWatcher();
|
|
9128
9144
|
this.setupSelectedItemsChangedWatcher();
|
|
9129
9145
|
}
|
|
9130
|
-
selectAllItems() {
|
|
9131
|
-
this.selectionContext.isSelectingAllItems = true;
|
|
9132
|
-
this.showSelectAllItemsLink = false;
|
|
9133
|
-
this.updateMasterCheckboxText();
|
|
9134
|
-
}
|
|
9135
9146
|
/**
|
|
9136
9147
|
* Watch for changes and react if the custom item template value changes
|
|
9137
9148
|
*/
|
|
@@ -9165,8 +9176,8 @@ class ItemPickerComponent {
|
|
|
9165
9176
|
// When the user filters the list we should reset the select all items
|
|
9166
9177
|
this.selectionContext.isSelectingAllItems = false;
|
|
9167
9178
|
this.availableItems = results.items;
|
|
9168
|
-
this.
|
|
9169
|
-
this.
|
|
9179
|
+
this.totalItemsBeforePaging = results.totalItemsBeforePaging;
|
|
9180
|
+
this.updateAvailableCheckboxText();
|
|
9170
9181
|
}
|
|
9171
9182
|
/**
|
|
9172
9183
|
* Called when the clear selection link button is clicked
|
|
@@ -9204,6 +9215,14 @@ class ItemPickerComponent {
|
|
|
9204
9215
|
this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
|
|
9205
9216
|
}
|
|
9206
9217
|
}
|
|
9218
|
+
/**
|
|
9219
|
+
* Click handler for the select all items button
|
|
9220
|
+
*/
|
|
9221
|
+
selectAllItems() {
|
|
9222
|
+
this.selectionContext.isSelectingAllItems = true;
|
|
9223
|
+
this.showSelectAllItemsButton = false;
|
|
9224
|
+
this.updateAvailableCheckboxText();
|
|
9225
|
+
}
|
|
9207
9226
|
/**
|
|
9208
9227
|
* Watch for changes to the row checkboxes form array and update the selected items
|
|
9209
9228
|
* list
|
|
@@ -9224,32 +9243,34 @@ class ItemPickerComponent {
|
|
|
9224
9243
|
});
|
|
9225
9244
|
this.selectedItems = Array.from(this.selectionContext?.selectedItemsMap.values());
|
|
9226
9245
|
this.selectedItemsClearable = this.selectedItems.length > 0 && this.selectedItems.some(i => !i.preventRemove);
|
|
9227
|
-
this.
|
|
9246
|
+
this.updateAvailableCheckboxText();
|
|
9228
9247
|
});
|
|
9229
9248
|
this.selectionContext.selectAllCheckbox.valueChanges.pipe(debounceTime(10), takeUntil(this.destroyed)).subscribe((checked) => {
|
|
9230
|
-
const onePageOfData = this.availableItems.length === this.
|
|
9249
|
+
const onePageOfData = this.availableItems.length === this.totalItemsBeforePaging;
|
|
9231
9250
|
if (checked && !onePageOfData) {
|
|
9232
|
-
this.
|
|
9251
|
+
this.showSelectAllItemsButton = true;
|
|
9233
9252
|
}
|
|
9234
9253
|
else if (!checked) {
|
|
9235
|
-
this.
|
|
9254
|
+
this.showSelectAllItemsButton = false;
|
|
9236
9255
|
this.selectionContext.isSelectingAllItems = false;
|
|
9237
9256
|
}
|
|
9238
9257
|
});
|
|
9239
9258
|
}
|
|
9240
|
-
|
|
9241
|
-
if (
|
|
9242
|
-
|
|
9243
|
-
|
|
9244
|
-
|
|
9259
|
+
updateAvailableCheckboxText() {
|
|
9260
|
+
if (this.enableSelectAllItems) {
|
|
9261
|
+
if (!this.selectionContext.isSelectingAllItems) {
|
|
9262
|
+
const checkedCount = this.selectionContext.rowCheckboxes.controls.map(c => c.value).filter(v => v).length;
|
|
9263
|
+
if (checkedCount > 0) {
|
|
9264
|
+
this.availableCheckboxText = this.translateService.instant('CountSelected_TC', { count: checkedCount });
|
|
9265
|
+
}
|
|
9266
|
+
else {
|
|
9267
|
+
this.availableCheckboxText = '';
|
|
9268
|
+
}
|
|
9245
9269
|
}
|
|
9246
9270
|
else {
|
|
9247
|
-
this.
|
|
9271
|
+
this.availableCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalItemsBeforePaging, itemName: this.itemName });
|
|
9248
9272
|
}
|
|
9249
9273
|
}
|
|
9250
|
-
else {
|
|
9251
|
-
this.masterCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalCount, itemName: this.itemName });
|
|
9252
|
-
}
|
|
9253
9274
|
}
|
|
9254
9275
|
/**
|
|
9255
9276
|
* Watch to be told if changes to the map were made outside of the component and if so update
|
|
@@ -9271,7 +9292,7 @@ class ItemPickerComponent {
|
|
|
9271
9292
|
if (this.customAvailableHeaderTemplate) {
|
|
9272
9293
|
this.internalizedAvailableHeaderTemplate = this.customAvailableHeaderTemplate;
|
|
9273
9294
|
}
|
|
9274
|
-
else if (this.
|
|
9295
|
+
else if (this.enableSelectAllItems) {
|
|
9275
9296
|
this.internalizedAvailableHeaderTemplate = this.defaultAvailableSelectAllHeaderTemplate;
|
|
9276
9297
|
}
|
|
9277
9298
|
else {
|
|
@@ -9292,10 +9313,10 @@ class ItemPickerComponent {
|
|
|
9292
9313
|
}
|
|
9293
9314
|
}
|
|
9294
9315
|
ItemPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9295
|
-
ItemPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ItemPickerComponent, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", selectAllEnabled: "selectAllEnabled", allSelectedItemsMessage: "allSelectedItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableSelectAllHeaderTemplate", first: true, predicate: ["defaultAvailableSelectAllHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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\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=\"d-flex 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=\"selectionContext.isSelectingAllItems\">\r\n <tr>\r\n <td colspan=\"2\" translate innerHtml=\"allSelectedItemsMessage | translate\"></td>\r\n </tr>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedItems.length && !selectionContext.isSelectingAllItems\">\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 && !selectionContext.isSelectingAllItems\"\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 #defaultAvailableSelectAllHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n <div class=\"d-flex align-items-center \">\r\n <span *ngIf=\"!masterCheckboxText\"\r\n class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n <span *ngIf=\"masterCheckboxText\"\r\n id=\"selectedCount\">{{masterCheckboxText}}</span>\r\n <button *ngIf=\"showSelectAllItemsLink\"\r\n ecLinkButton\r\n id=\"selectAllItemsLink\"\r\n (click)=\"selectAllItems()\"\r\n class=\"ml-2\">\r\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalCount, itemName: itemName } }}\r\n </button>\r\n </div>\r\n </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: [":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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
9316
|
+
ItemPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ItemPickerComponent, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", enableSelectAllItems: "enableSelectAllItems", selectAllItemsMessage: "selectAllItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableSelectAllHeaderTemplate", first: true, predicate: ["defaultAvailableSelectAllHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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\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\"\r\n class=\"selected-items flex-grow d-flex flex-column\">\r\n <div *ngIf=\"selectionContext.isSelectingAllItems\" class=\"d-flex flex-column flex-grow\">\r\n <div class=\"d-flex align-items-center border-bottom px-2\" style=\"height: 3rem;\">\r\n <span class=\"text-heading-2 font-color-primary flex-grow text-truncate\">{{selectedTitle |\r\n 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 <span class=\"m-auto\" [innerHtml]=\"selectAllItemsMessage | translate\"></span> \r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\" [scrollable]=\"true\"\r\n class=\"d-flex 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 |\r\n 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 && !selectionContext.isSelectingAllItems\"\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 #defaultAvailableSelectAllHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n <div class=\"d-flex align-items-center \">\r\n <span *ngIf=\"!availableCheckboxText\"\r\n class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n <span *ngIf=\"availableCheckboxText\"\r\n id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n <button *ngIf=\"showSelectAllItemsButton\"\r\n ecLinkButton\r\n id=\"selectAllItemsButton\"\r\n (click)=\"selectAllItems()\"\r\n class=\"ml-2\">\r\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n </button>\r\n </div>\r\n </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: [":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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
9296
9317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, decorators: [{
|
|
9297
9318
|
type: Component,
|
|
9298
|
-
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\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\"
|
|
9319
|
+
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\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\"\r\n class=\"selected-items flex-grow d-flex flex-column\">\r\n <div *ngIf=\"selectionContext.isSelectingAllItems\" class=\"d-flex flex-column flex-grow\">\r\n <div class=\"d-flex align-items-center border-bottom px-2\" style=\"height: 3rem;\">\r\n <span class=\"text-heading-2 font-color-primary flex-grow text-truncate\">{{selectedTitle |\r\n 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 <span class=\"m-auto\" [innerHtml]=\"selectAllItemsMessage | translate\"></span> \r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\" [scrollable]=\"true\"\r\n class=\"d-flex 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 |\r\n 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 && !selectionContext.isSelectingAllItems\"\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 #defaultAvailableSelectAllHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n <div class=\"d-flex align-items-center \">\r\n <span *ngIf=\"!availableCheckboxText\"\r\n class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n <span *ngIf=\"availableCheckboxText\"\r\n id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n <button *ngIf=\"showSelectAllItemsButton\"\r\n ecLinkButton\r\n id=\"selectAllItemsButton\"\r\n (click)=\"selectAllItems()\"\r\n class=\"ml-2\">\r\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n </button>\r\n </div>\r\n </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: [":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}\n"] }]
|
|
9299
9320
|
}], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { id: [{
|
|
9300
9321
|
type: Input
|
|
9301
9322
|
}], availableTitle: [{
|
|
@@ -9322,9 +9343,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9322
9343
|
type: Input
|
|
9323
9344
|
}], noSelectedItemsMessage: [{
|
|
9324
9345
|
type: Input
|
|
9325
|
-
}],
|
|
9346
|
+
}], enableSelectAllItems: [{
|
|
9326
9347
|
type: Input
|
|
9327
|
-
}],
|
|
9348
|
+
}], selectAllItemsMessage: [{
|
|
9328
9349
|
type: Input
|
|
9329
9350
|
}], defaultAvailableHeaderTemplate: [{
|
|
9330
9351
|
type: ViewChild,
|