@energycap/components 0.39.24-ECAP-26539-Item-Picker-Select-All.20240912-1453 → 0.39.24-ECAP-26539-Item-Picker-Select-All.20240913-1532
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 +63 -31
- package/fesm2015/energycap-components.mjs +62 -30
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +62 -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
|
@@ -9156,6 +9156,10 @@ class ItemPickerSelectableContext extends TableSelectableRowContext {
|
|
|
9156
9156
|
* AdvancedRowClickBehavior is disabled for ItemPicker.
|
|
9157
9157
|
*/
|
|
9158
9158
|
this.disableAdvancedRowClickBehavior = true;
|
|
9159
|
+
/** When true the user has opted to select all items across all pages. Due to api pagination
|
|
9160
|
+
* we don't have all of the items locally, so the host will need to tell the API to operate on all
|
|
9161
|
+
* via api filters or other means.
|
|
9162
|
+
*/
|
|
9159
9163
|
this.isSelectingAllItems = false;
|
|
9160
9164
|
}
|
|
9161
9165
|
}
|
|
@@ -9174,8 +9178,12 @@ class ItemPickerComponent {
|
|
|
9174
9178
|
* to inherit the default message.
|
|
9175
9179
|
*/
|
|
9176
9180
|
this.noDataMessage = '';
|
|
9177
|
-
|
|
9178
|
-
|
|
9181
|
+
/** When true the button to select all items will be visible in the available items header when
|
|
9182
|
+
* the header checkbox is checked and there are multiple pages of results
|
|
9183
|
+
*/
|
|
9184
|
+
this.enableSelectAllItems = false;
|
|
9185
|
+
/** Passed in message to display in the selected items table when the select all items button is clicked */
|
|
9186
|
+
this.selectAllItemsMessage = '';
|
|
9179
9187
|
/** List of available items to pick from */
|
|
9180
9188
|
this.availableItems = [];
|
|
9181
9189
|
/**
|
|
@@ -9189,9 +9197,17 @@ class ItemPickerComponent {
|
|
|
9189
9197
|
/** Track by used for the searchable table rows */
|
|
9190
9198
|
this.trackByIndex = (index) => index;
|
|
9191
9199
|
this.tableStatus = new Overlay('pending');
|
|
9192
|
-
|
|
9193
|
-
|
|
9194
|
-
|
|
9200
|
+
/** Text to display next to the checkbox in the available items header. Used to dislay how many items are
|
|
9201
|
+
* selected when select all items is enabled
|
|
9202
|
+
*/
|
|
9203
|
+
this.availableCheckboxText = '';
|
|
9204
|
+
/** When set to true the select all items button will show in the available items header. This is
|
|
9205
|
+
* shown when the user has enabled select all for the item picker and the user selects the header checkbox
|
|
9206
|
+
* with more than one page of results.
|
|
9207
|
+
*/
|
|
9208
|
+
this.showSelectAllItemsButton = false;
|
|
9209
|
+
/** The total number of items returned from the api across all pages */
|
|
9210
|
+
this.totalItemsBeforePaging = 0;
|
|
9195
9211
|
/** Used to shut down our subscriptions when the component is destroyed */
|
|
9196
9212
|
this.destroyed = new Subject();
|
|
9197
9213
|
}
|
|
@@ -9199,11 +9215,6 @@ class ItemPickerComponent {
|
|
|
9199
9215
|
this.setupRowCheckboxesWatcher();
|
|
9200
9216
|
this.setupSelectedItemsChangedWatcher();
|
|
9201
9217
|
}
|
|
9202
|
-
selectAllItems() {
|
|
9203
|
-
this.selectionContext.isSelectingAllItems = true;
|
|
9204
|
-
this.showSelectAllItemsLink = false;
|
|
9205
|
-
this.updateMasterCheckboxText();
|
|
9206
|
-
}
|
|
9207
9218
|
/**
|
|
9208
9219
|
* Watch for changes and react if the custom item template value changes
|
|
9209
9220
|
*/
|
|
@@ -9219,6 +9230,9 @@ class ItemPickerComponent {
|
|
|
9219
9230
|
* If any of the items have `preventRemove` set, their indices are added to the context.
|
|
9220
9231
|
*/
|
|
9221
9232
|
onItemsChange(results) {
|
|
9233
|
+
if (this.selectionContext.isSelectingAllItems) {
|
|
9234
|
+
this.onClearSelectionClick();
|
|
9235
|
+
}
|
|
9222
9236
|
let newNonDependentCheckboxes = [];
|
|
9223
9237
|
results.items.forEach((item, index) => {
|
|
9224
9238
|
var _a, _b;
|
|
@@ -9238,8 +9252,8 @@ class ItemPickerComponent {
|
|
|
9238
9252
|
// When the user filters the list we should reset the select all items
|
|
9239
9253
|
this.selectionContext.isSelectingAllItems = false;
|
|
9240
9254
|
this.availableItems = results.items;
|
|
9241
|
-
this.
|
|
9242
|
-
this.
|
|
9255
|
+
this.totalItemsBeforePaging = results.totalItemsBeforePaging;
|
|
9256
|
+
this.updateAvailableCheckboxText();
|
|
9243
9257
|
}
|
|
9244
9258
|
/**
|
|
9245
9259
|
* Called when the clear selection link button is clicked
|
|
@@ -9258,6 +9272,7 @@ class ItemPickerComponent {
|
|
|
9258
9272
|
}
|
|
9259
9273
|
});
|
|
9260
9274
|
this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
|
|
9275
|
+
this.selectionContext.isSelectingAllItems = false;
|
|
9261
9276
|
}
|
|
9262
9277
|
/**
|
|
9263
9278
|
* Called when the remove item button is clicked for a selected item
|
|
@@ -9277,6 +9292,14 @@ class ItemPickerComponent {
|
|
|
9277
9292
|
this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
|
|
9278
9293
|
}
|
|
9279
9294
|
}
|
|
9295
|
+
/**
|
|
9296
|
+
* Click handler for the select all items button
|
|
9297
|
+
*/
|
|
9298
|
+
selectAllItems() {
|
|
9299
|
+
this.selectionContext.isSelectingAllItems = true;
|
|
9300
|
+
this.showSelectAllItemsButton = false;
|
|
9301
|
+
this.updateAvailableCheckboxText();
|
|
9302
|
+
}
|
|
9280
9303
|
/**
|
|
9281
9304
|
* Watch for changes to the row checkboxes form array and update the selected items
|
|
9282
9305
|
* list
|
|
@@ -9300,32 +9323,41 @@ class ItemPickerComponent {
|
|
|
9300
9323
|
});
|
|
9301
9324
|
this.selectedItems = Array.from((_a = this.selectionContext) === null || _a === void 0 ? void 0 : _a.selectedItemsMap.values());
|
|
9302
9325
|
this.selectedItemsClearable = this.selectedItems.length > 0 && this.selectedItems.some(i => !i.preventRemove);
|
|
9303
|
-
this.
|
|
9326
|
+
this.updateAvailableCheckboxText();
|
|
9304
9327
|
});
|
|
9305
9328
|
this.selectionContext.selectAllCheckbox.valueChanges.pipe(debounceTime(10), takeUntil(this.destroyed)).subscribe((checked) => {
|
|
9306
|
-
const onePageOfData = this.availableItems.length === this.
|
|
9329
|
+
const onePageOfData = this.availableItems.length === this.totalItemsBeforePaging;
|
|
9330
|
+
console.log('selectAllCheckbox checked: ', checked);
|
|
9307
9331
|
if (checked && !onePageOfData) {
|
|
9308
|
-
this.
|
|
9332
|
+
this.showSelectAllItemsButton = true;
|
|
9309
9333
|
}
|
|
9310
9334
|
else if (!checked) {
|
|
9311
|
-
|
|
9335
|
+
console.log('not checked');
|
|
9336
|
+
if (this.selectionContext.isSelectingAllItems) {
|
|
9337
|
+
// We were selecting all items, clear the selection to allow the user to start over
|
|
9338
|
+
this.onClearSelectionClick();
|
|
9339
|
+
}
|
|
9340
|
+
this.showSelectAllItemsButton = false;
|
|
9312
9341
|
this.selectionContext.isSelectingAllItems = false;
|
|
9313
9342
|
}
|
|
9314
9343
|
});
|
|
9315
9344
|
}
|
|
9316
|
-
|
|
9317
|
-
if (
|
|
9318
|
-
|
|
9319
|
-
if (
|
|
9320
|
-
|
|
9345
|
+
updateAvailableCheckboxText() {
|
|
9346
|
+
if (this.enableSelectAllItems) {
|
|
9347
|
+
console.log(this.selectionContext.isSelectingAllItems);
|
|
9348
|
+
if (!this.selectionContext.isSelectingAllItems) {
|
|
9349
|
+
const checkedCount = this.selectionContext.rowCheckboxes.controls.map(c => c.value).filter(v => v).length;
|
|
9350
|
+
if (checkedCount > 0) {
|
|
9351
|
+
this.availableCheckboxText = this.translateService.instant('CountSelected_TC', { count: checkedCount });
|
|
9352
|
+
}
|
|
9353
|
+
else {
|
|
9354
|
+
this.availableCheckboxText = '';
|
|
9355
|
+
}
|
|
9321
9356
|
}
|
|
9322
9357
|
else {
|
|
9323
|
-
this.
|
|
9358
|
+
this.availableCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalItemsBeforePaging, itemName: this.itemName });
|
|
9324
9359
|
}
|
|
9325
9360
|
}
|
|
9326
|
-
else {
|
|
9327
|
-
this.masterCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalCount, itemName: this.itemName });
|
|
9328
|
-
}
|
|
9329
9361
|
}
|
|
9330
9362
|
/**
|
|
9331
9363
|
* Watch to be told if changes to the map were made outside of the component and if so update
|
|
@@ -9348,7 +9380,7 @@ class ItemPickerComponent {
|
|
|
9348
9380
|
if (this.customAvailableHeaderTemplate) {
|
|
9349
9381
|
this.internalizedAvailableHeaderTemplate = this.customAvailableHeaderTemplate;
|
|
9350
9382
|
}
|
|
9351
|
-
else if (this.
|
|
9383
|
+
else if (this.enableSelectAllItems) {
|
|
9352
9384
|
this.internalizedAvailableHeaderTemplate = this.defaultAvailableSelectAllHeaderTemplate;
|
|
9353
9385
|
}
|
|
9354
9386
|
else {
|
|
@@ -9369,10 +9401,10 @@ class ItemPickerComponent {
|
|
|
9369
9401
|
}
|
|
9370
9402
|
}
|
|
9371
9403
|
ItemPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9372
|
-
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" }] });
|
|
9404
|
+
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 || selectionContext.isSelectingAllItems\"\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\"\r\n class=\"d-flex flex-column flex-grow\">\r\n <div class=\"d-flex align-items-center border-bottom px-2\"\r\n style=\"height: 3rem;\">\r\n <span class=\"text-heading-2 font-color-primary flex-grow text-truncate\">{{selectedTitle |\r\n translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto font-size-base\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </div>\r\n <span class=\"m-auto\"\r\n [innerHtml]=\"selectAllItemsMessage | translate\"></span>\r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\"\r\n [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 <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto font-size-base\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\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" }] });
|
|
9373
9405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, decorators: [{
|
|
9374
9406
|
type: Component,
|
|
9375
|
-
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\"
|
|
9407
|
+
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 || selectionContext.isSelectingAllItems\"\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\"\r\n class=\"d-flex flex-column flex-grow\">\r\n <div class=\"d-flex align-items-center border-bottom px-2\"\r\n style=\"height: 3rem;\">\r\n <span class=\"text-heading-2 font-color-primary flex-grow text-truncate\">{{selectedTitle |\r\n translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto font-size-base\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </div>\r\n <span class=\"m-auto\"\r\n [innerHtml]=\"selectAllItemsMessage | translate\"></span>\r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\"\r\n [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 <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto font-size-base\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\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"] }]
|
|
9376
9408
|
}], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { id: [{
|
|
9377
9409
|
type: Input
|
|
9378
9410
|
}], availableTitle: [{
|
|
@@ -9399,9 +9431,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9399
9431
|
type: Input
|
|
9400
9432
|
}], noSelectedItemsMessage: [{
|
|
9401
9433
|
type: Input
|
|
9402
|
-
}],
|
|
9434
|
+
}], enableSelectAllItems: [{
|
|
9403
9435
|
type: Input
|
|
9404
|
-
}],
|
|
9436
|
+
}], selectAllItemsMessage: [{
|
|
9405
9437
|
type: Input
|
|
9406
9438
|
}], defaultAvailableHeaderTemplate: [{
|
|
9407
9439
|
type: ViewChild,
|