@energycap/components 0.39.24-ECAP-26539-Item-Picker-Select-All.20240912-1552 → 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 +14 -3
- package/fesm2015/energycap-components.mjs +13 -2
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +13 -2
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -9158,6 +9158,9 @@ class ItemPickerComponent {
|
|
|
9158
9158
|
* If any of the items have `preventRemove` set, their indices are added to the context.
|
|
9159
9159
|
*/
|
|
9160
9160
|
onItemsChange(results) {
|
|
9161
|
+
if (this.selectionContext.isSelectingAllItems) {
|
|
9162
|
+
this.onClearSelectionClick();
|
|
9163
|
+
}
|
|
9161
9164
|
let newNonDependentCheckboxes = [];
|
|
9162
9165
|
results.items.forEach((item, index) => {
|
|
9163
9166
|
// Check to see if any of the items are marked to be selected by default and if so
|
|
@@ -9196,6 +9199,7 @@ class ItemPickerComponent {
|
|
|
9196
9199
|
}
|
|
9197
9200
|
});
|
|
9198
9201
|
this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
|
|
9202
|
+
this.selectionContext.isSelectingAllItems = false;
|
|
9199
9203
|
}
|
|
9200
9204
|
/**
|
|
9201
9205
|
* Called when the remove item button is clicked for a selected item
|
|
@@ -9247,10 +9251,16 @@ class ItemPickerComponent {
|
|
|
9247
9251
|
});
|
|
9248
9252
|
this.selectionContext.selectAllCheckbox.valueChanges.pipe(debounceTime(10), takeUntil(this.destroyed)).subscribe((checked) => {
|
|
9249
9253
|
const onePageOfData = this.availableItems.length === this.totalItemsBeforePaging;
|
|
9254
|
+
console.log('selectAllCheckbox checked: ', checked);
|
|
9250
9255
|
if (checked && !onePageOfData) {
|
|
9251
9256
|
this.showSelectAllItemsButton = true;
|
|
9252
9257
|
}
|
|
9253
9258
|
else if (!checked) {
|
|
9259
|
+
console.log('not checked');
|
|
9260
|
+
if (this.selectionContext.isSelectingAllItems) {
|
|
9261
|
+
// We were selecting all items, clear the selection to allow the user to start over
|
|
9262
|
+
this.onClearSelectionClick();
|
|
9263
|
+
}
|
|
9254
9264
|
this.showSelectAllItemsButton = false;
|
|
9255
9265
|
this.selectionContext.isSelectingAllItems = false;
|
|
9256
9266
|
}
|
|
@@ -9258,6 +9268,7 @@ class ItemPickerComponent {
|
|
|
9258
9268
|
}
|
|
9259
9269
|
updateAvailableCheckboxText() {
|
|
9260
9270
|
if (this.enableSelectAllItems) {
|
|
9271
|
+
console.log(this.selectionContext.isSelectingAllItems);
|
|
9261
9272
|
if (!this.selectionContext.isSelectingAllItems) {
|
|
9262
9273
|
const checkedCount = this.selectionContext.rowCheckboxes.controls.map(c => c.value).filter(v => v).length;
|
|
9263
9274
|
if (checkedCount > 0) {
|
|
@@ -9313,10 +9324,10 @@ class ItemPickerComponent {
|
|
|
9313
9324
|
}
|
|
9314
9325
|
}
|
|
9315
9326
|
ItemPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
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" }] });
|
|
9327
|
+
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" }] });
|
|
9317
9328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, decorators: [{
|
|
9318
9329
|
type: Component,
|
|
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\"
|
|
9330
|
+
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"] }]
|
|
9320
9331
|
}], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { id: [{
|
|
9321
9332
|
type: Input
|
|
9322
9333
|
}], availableTitle: [{
|