@energycap/components 0.39.27-ECAP-26661-delete-site-updates-product-aware-confirm.20241002-1458 → 0.39.28-ECAP-26357-spinner-theme.20241007-0858

package/fesm2020/energycap-components.mjs

@@ -2621,10 +2621,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 class SpinnerComponent {
 }
 SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SpinnerComponent, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SpinnerComponent, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-spinner', template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-color-interactive);animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }]
+            args: [{ selector: 'ec-spinner', template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }]
         }] });
 
 class Overlay {
@@ -5189,15 +5189,11 @@ class ConfirmComponent {
         /** Form Group to hold any form controls needed */
         this.formGroup = new UntypedFormGroup({});
         this.status = new Overlay('hasData');
-        this.showTextBox = true;
-        this.destroyed = new Subject();
         this.onDialogSave = new EventEmitter();
         this.onDialogCancel = new EventEmitter();
     }
     ngOnInit() {
         this.addFormControls();
-        this.setValidations();
-        this.listenCheckBox();
     }
     onSave(source) {
         this.formGroup.markAllAsTouched();
@@ -5206,9 +5202,6 @@ class ConfirmComponent {
             if (formValues.textbox) {
                 this.context.textboxValue = formValues.textbox;
             }
-            if (this.context.checkConfirm) {
-                this.context.checkboxValue = formValues.checkbox ? formValues.checkbox : false;
-            }
             this.context.saveSource = source;
             if (this.context.inlineConfirmAction) {
                 this.doInlineConfirmAction();
@@ -5224,24 +5217,6 @@ class ConfirmComponent {
     onCancel() {
         this.onDialogCancel.emit();
     }
-    ngOnDestroy() {
-        this.destroyed.next();
-        this.destroyed.complete();
-    }
-    listenCheckBox() {
-        this.formGroup.get('checkbox')?.valueChanges.pipe(takeUntil(this.destroyed)).subscribe(value => {
-            this.showTextBox = value;
-            this.setValidations();
-        });
-    }
-    setValidations() {
-        if (this.showTextBox) {
-            this.formGroup.controls['textbox']?.enable();
-        }
-        else {
-            this.formGroup.controls['textbox']?.disable();
-        }
-    }
     /**
      * Adds the textbox form control to our form group if its configured to be visible
      * Will also add the required validator if requested
@@ -5257,11 +5232,6 @@ class ConfirmComponent {
             }
             this.formGroup.addControl('textbox', new UntypedFormControl('', validators));
         }
-        if (this.context.checkConfirm) {
-            this.showTextBox = false;
-            const checkboxControl = new UntypedFormControl('');
-            this.formGroup.addControl('checkbox', checkboxControl);
-        }
     }
     async doInlineConfirmAction() {
         this.status.setStatus('pending', this.context.inlineConfirmPendingMessage);
@@ -5276,10 +5246,10 @@ class ConfirmComponent {
     }
 }
 ConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ConfirmComponent, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      \r\n      <ec-checkbox *ngIf=\"context?.checkConfirm\"\r\n                    [formModel]=\"formGroup.get('checkbox')\"\r\n                    name=\"confirmCheckbox\"\r\n                    [label]=\"context?.checkboxText\"\r\n                    [autofocus]=\"true\"\r\n                    ></ec-checkbox>\r\n      <div *ngIf=\"showTextBox\" [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"(context?.textboxType && !context?.checkConfirm) || showTextBox\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ConfirmComponent, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"context?.textboxType\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-confirm', template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      \r\n      <ec-checkbox *ngIf=\"context?.checkConfirm\"\r\n                    [formModel]=\"formGroup.get('checkbox')\"\r\n                    name=\"confirmCheckbox\"\r\n                    [label]=\"context?.checkboxText\"\r\n                    [autofocus]=\"true\"\r\n                    ></ec-checkbox>\r\n      <div *ngIf=\"showTextBox\" [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"(context?.textboxType && !context?.checkConfirm) || showTextBox\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
+            args: [{ selector: 'ec-confirm', template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"context?.textboxType\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { context: [{
                 type: Input
             }], onDialogSave: [{
@@ -6584,6 +6554,8 @@ class TablePaginationComponent {
          * Maximum number of page tabs to show
          */
         this.maxTabs = 10;
+        /** When true the tabs and the more pages dropdown will be disabled */
+        this.disablePaginationControls = false;
         /**
          * Emits when the page changes.
          *
@@ -6651,6 +6623,7 @@ class TablePaginationComponent {
         for (let i = menuItem.value.firstPage; i <= menuItem.value.lastPage; i++) {
             tabItems.push({
                 label: `${i}`,
+                disabled: this.disablePaginationControls,
                 onClick: () => { this.onPageChange(i); }
             });
         }
@@ -6696,12 +6669,12 @@ class TablePaginationComponent {
     }
 }
 TablePaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TablePaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TablePaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\r\n         class=\"my-2 is-condensed\"\r\n         [tabGroup]=\"currentTabs\"\r\n         tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n             *ngIf=\"dropdownItems.length > 1\"\r\n             class=\"my-1 ml-1\"\r\n             menuTemplateType=\"label\"\r\n             icon=\"icon-more\"\r\n             menuPosition=\"left\"\r\n             [menuMinWidth]=\"80\"\r\n             [showArrow]=\"false\"\r\n             [popupFixed]=\"true\"\r\n             [items]=\"dropdownItems\"\r\n             (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] });
+TablePaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs", disablePaginationControls: "disablePaginationControls" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\r\n         class=\"my-2 is-condensed\"\r\n         [tabGroup]=\"currentTabs\"\r\n         tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n             *ngIf=\"dropdownItems.length > 1\"\r\n             class=\"my-1 ml-1\"\r\n             menuTemplateType=\"label\"\r\n             icon=\"icon-more\"\r\n             menuPosition=\"left\"\r\n             [menuMinWidth]=\"80\"\r\n             [showArrow]=\"false\"\r\n             [popupFixed]=\"true\"\r\n             [items]=\"dropdownItems\"\r\n             [disabled]=\"disablePaginationControls\"\r\n             (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TablePaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-table-pagination', host: {
                         class: 'd-flex px-2 align-items-center'
-                    }, template: "<ec-tabs id=\"{{id}}_pages\"\r\n         class=\"my-2 is-condensed\"\r\n         [tabGroup]=\"currentTabs\"\r\n         tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n             *ngIf=\"dropdownItems.length > 1\"\r\n             class=\"my-1 ml-1\"\r\n             menuTemplateType=\"label\"\r\n             icon=\"icon-more\"\r\n             menuPosition=\"left\"\r\n             [menuMinWidth]=\"80\"\r\n             [showArrow]=\"false\"\r\n             [popupFixed]=\"true\"\r\n             [items]=\"dropdownItems\"\r\n             (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>" }]
+                    }, template: "<ec-tabs id=\"{{id}}_pages\"\r\n         class=\"my-2 is-condensed\"\r\n         [tabGroup]=\"currentTabs\"\r\n         tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n             *ngIf=\"dropdownItems.length > 1\"\r\n             class=\"my-1 ml-1\"\r\n             menuTemplateType=\"label\"\r\n             icon=\"icon-more\"\r\n             menuPosition=\"left\"\r\n             [menuMinWidth]=\"80\"\r\n             [showArrow]=\"false\"\r\n             [popupFixed]=\"true\"\r\n             [items]=\"dropdownItems\"\r\n             [disabled]=\"disablePaginationControls\"\r\n             (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
                 type: Input
             }], totalItems: [{
@@ -6712,6 +6685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], maxTabs: [{
                 type: Input
+            }], disablePaginationControls: [{
+                type: Input
             }], pageChanged: [{
                 type: Output
             }] } });
@@ -7335,6 +7310,8 @@ class SearchableTableComponent {
         this.overlayClasses = '';
         /** When true the overlay and table will not have flex-shrink-max but instead flex-grow */
         this.fillParentHeight = false;
+        /** Passed to the pagination control component. Used to disable the pagination controls */
+        this.disablePaginationControls = false;
         /**
          * Text displayed in the footer.
          * Sometimes `noDataMessage`, sometimes `noSearchResultsMessage`
@@ -7479,10 +7456,10 @@ class SearchableTableComponent {
     }
 }
 SearchableTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchableTableComponent, deps: [{ token: ErrorService }, { token: i3.TranslateService }, { token: RowCountPipe }], target: i0.ɵɵFactoryTarget.Component });
-SearchableTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: { id: "id", resizable: "resizable", sortable: "sortable", sort: "sort", autofocus: "autofocus", tableClasses: "tableClasses", searchboxPlaceholder: "searchboxPlaceholder", formModel: "formModel", noDataMessage: "noDataMessage", noSearchResultsMessage: "noSearchResultsMessage", ready: "ready", getItems: "getItems", refresh: "refresh", status: "status", tableLayoutFixed: "tableLayoutFixed", searchboxTabIndex: "searchboxTabIndex", maxItemCount: "maxItemCount", hideSearchControl: "hideSearchControl", hideHeader: "hideHeader", objectType: "objectType", hideFooter: "hideFooter", pageable: "pageable", pageSize: "pageSize", maxTabs: "maxTabs", searchboxReadonly: "searchboxReadonly", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", additionalCountText: "additionalCountText", selectable: "selectable", customContentTemplate: "customContentTemplate", removeCard: "removeCard", overlayClasses: "overlayClasses", fillParentHeight: "fillParentHeight" }, outputs: { sortChange: "sortChange", pageChangeEmitter: "pageChange", itemsChange: "itemsChange" }, queries: [{ propertyName: "resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"d-flex flex-column {{overlayClasses}}\"\r\n         [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n  </ng-container>\r\n\r\n  <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n    If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n    and still retain all the event handling, header, footer pagination, etc support -->\r\n  <ng-template #defaultContentTemplate>\r\n    <ec-table id=\"{{id}}_table\"\r\n              class=\"{{tableClasses}}\"\r\n              [class.is-fixed]=\"tableLayoutFixed\"\r\n              [sortable]=\"sortable\"\r\n              [sort]=\"sort\"\r\n              (sortChange)=\"onSortChange($event)\"\r\n              [resizable]=\"resizable\"\r\n              [scrollable]=\"true\"\r\n              [selectable]=\"selectable\"\r\n              [selectionContext]=\"selectionContext\"\r\n              [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n              [resizableColumns]=\"resizableColumns\">\r\n      <ng-content></ng-content>\r\n    </ec-table>\r\n  </ng-template>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n          class=\"pagination-footer\"\r\n          [class.border-top]=\"!customContentTemplate\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [maxTabs]=\"maxTabs\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"caption-footer\"\r\n          [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { 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: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs"], outputs: ["pageChanged"] }] });
+SearchableTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: { id: "id", resizable: "resizable", sortable: "sortable", sort: "sort", autofocus: "autofocus", tableClasses: "tableClasses", searchboxPlaceholder: "searchboxPlaceholder", formModel: "formModel", noDataMessage: "noDataMessage", noSearchResultsMessage: "noSearchResultsMessage", ready: "ready", getItems: "getItems", refresh: "refresh", status: "status", tableLayoutFixed: "tableLayoutFixed", searchboxTabIndex: "searchboxTabIndex", maxItemCount: "maxItemCount", hideSearchControl: "hideSearchControl", hideHeader: "hideHeader", objectType: "objectType", hideFooter: "hideFooter", pageable: "pageable", pageSize: "pageSize", maxTabs: "maxTabs", searchboxReadonly: "searchboxReadonly", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", additionalCountText: "additionalCountText", selectable: "selectable", customContentTemplate: "customContentTemplate", removeCard: "removeCard", overlayClasses: "overlayClasses", fillParentHeight: "fillParentHeight", disablePaginationControls: "disablePaginationControls" }, outputs: { sortChange: "sortChange", pageChangeEmitter: "pageChange", itemsChange: "itemsChange" }, queries: [{ propertyName: "resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"d-flex flex-column {{overlayClasses}}\"\r\n         [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n  </ng-container>\r\n\r\n  <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n    If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n    and still retain all the event handling, header, footer pagination, etc support -->\r\n  <ng-template #defaultContentTemplate>\r\n    <ec-table id=\"{{id}}_table\"\r\n              class=\"{{tableClasses}}\"\r\n              [class.is-fixed]=\"tableLayoutFixed\"\r\n              [sortable]=\"sortable\"\r\n              [sort]=\"sort\"\r\n              (sortChange)=\"onSortChange($event)\"\r\n              [resizable]=\"resizable\"\r\n              [scrollable]=\"true\"\r\n              [selectable]=\"selectable\"\r\n              [selectionContext]=\"selectionContext\"\r\n              [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n              [resizableColumns]=\"resizableColumns\">\r\n      <ng-content></ng-content>\r\n    </ec-table>\r\n  </ng-template>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n          class=\"pagination-footer\"\r\n          [class.border-top]=\"!customContentTemplate\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [maxTabs]=\"maxTabs\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         [disablePaginationControls]=\"disablePaginationControls\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"caption-footer\"\r\n          [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { 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: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs", "disablePaginationControls"], outputs: ["pageChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchableTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-searchable-table', template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"d-flex flex-column {{overlayClasses}}\"\r\n         [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n  </ng-container>\r\n\r\n  <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n    If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n    and still retain all the event handling, header, footer pagination, etc support -->\r\n  <ng-template #defaultContentTemplate>\r\n    <ec-table id=\"{{id}}_table\"\r\n              class=\"{{tableClasses}}\"\r\n              [class.is-fixed]=\"tableLayoutFixed\"\r\n              [sortable]=\"sortable\"\r\n              [sort]=\"sort\"\r\n              (sortChange)=\"onSortChange($event)\"\r\n              [resizable]=\"resizable\"\r\n              [scrollable]=\"true\"\r\n              [selectable]=\"selectable\"\r\n              [selectionContext]=\"selectionContext\"\r\n              [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n              [resizableColumns]=\"resizableColumns\">\r\n      <ng-content></ng-content>\r\n    </ec-table>\r\n  </ng-template>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n          class=\"pagination-footer\"\r\n          [class.border-top]=\"!customContentTemplate\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [maxTabs]=\"maxTabs\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"caption-footer\"\r\n          [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"] }]
+            args: [{ selector: 'ec-searchable-table', template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"d-flex flex-column {{overlayClasses}}\"\r\n         [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n  </ng-container>\r\n\r\n  <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n    If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n    and still retain all the event handling, header, footer pagination, etc support -->\r\n  <ng-template #defaultContentTemplate>\r\n    <ec-table id=\"{{id}}_table\"\r\n              class=\"{{tableClasses}}\"\r\n              [class.is-fixed]=\"tableLayoutFixed\"\r\n              [sortable]=\"sortable\"\r\n              [sort]=\"sort\"\r\n              (sortChange)=\"onSortChange($event)\"\r\n              [resizable]=\"resizable\"\r\n              [scrollable]=\"true\"\r\n              [selectable]=\"selectable\"\r\n              [selectionContext]=\"selectionContext\"\r\n              [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n              [resizableColumns]=\"resizableColumns\">\r\n      <ng-content></ng-content>\r\n    </ec-table>\r\n  </ng-template>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n          class=\"pagination-footer\"\r\n          [class.border-top]=\"!customContentTemplate\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [maxTabs]=\"maxTabs\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         [disablePaginationControls]=\"disablePaginationControls\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"caption-footer\"\r\n          [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"] }]
         }], ctorParameters: function () { return [{ type: ErrorService }, { type: i3.TranslateService }, { type: RowCountPipe }]; }, propDecorators: { id: [{
                 type: Input
             }], resizable: [{
@@ -7559,6 +7536,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], fillParentHeight: [{
                 type: Input
+            }], disablePaginationControls: [{
+                type: Input
             }] } });
 
 class TableLockedColumnComponent {
@@ -9176,6 +9155,8 @@ class ItemPickerComponent {
         this.showSelectAllItemsButton = false;
         /** The total number of items returned from the api across all pages */
         this.totalItemsBeforePaging = 0;
+        /** Passed to the searchable table control. Used to disable the pagination controls */
+        this.disablePaginationControls = false;
         /** Used to shut down our subscriptions when the component is destroyed */
         this.destroyed = new Subject();
     }
@@ -9234,6 +9215,7 @@ class ItemPickerComponent {
         });
         this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
         this.selectionContext.isSelectingAllItems = false;
+        this.disablePaginationControls = false;
         this.updateAvailableCheckboxText();
     }
     /**
@@ -9263,6 +9245,7 @@ class ItemPickerComponent {
         this.selectionContext.isSelectingAllItems = true;
         this.showSelectAllItemsButton = false;
         this.updateAvailableCheckboxText();
+        this.disablePaginationControls = true;
     }
     /**
      * Removes all items from the selected items map. This was split from the onClearSelectionClick function to allow
@@ -9320,7 +9303,7 @@ class ItemPickerComponent {
     }
     updateAvailableCheckboxText() {
         if (this.selectionContext.isSelectingAllItems) {
-            this.availableCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalItemsBeforePaging, itemName: this.itemName });
+            this.availableCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalItemsBeforePaging, itemName: this.translateService.instant(this.itemName) });
         }
         else {
             const checkedCount = this.selectionContext.rowCheckboxes.controls.map(c => c.value).filter(v => v).length;
@@ -9370,10 +9353,10 @@ class ItemPickerComponent {
     }
 }
 ItemPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ItemPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ItemPickerComponent, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", 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: "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}}\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </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) || selectionContext.isSelectingAllItems\"\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            <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n                    style=\"height: 3rem;\">\r\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                <button *ngIf=\"selectedItemsClearable\"\r\n                        ecLinkButton\r\n                        id=\"{{id}}_clearSelection\"\r\n                        class=\"pl-2 ml-auto\"\r\n                        (click)=\"onClearSelectionClick()\"\r\n                        translate>ClearSelection_TC</button>\r\n            </header>\r\n            <div class=\"border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n                 [innerHtml]=\"selectAllItemsMessage | translate\"></div>\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 text-heading-2\">\r\n                            <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                            <button *ngIf=\"selectedItemsClearable\"\r\n                                    ecLinkButton\r\n                                    id=\"{{id}}_clearSelection\"\r\n                                    class=\"pl-2 ml-auto\"\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            <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n                 style=\"height: 1.75rem;\">\r\n                <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n            </div>\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\">\r\n        <div class=\"d-flex align-items-center \">\r\n            <div *ngIf=\"!availableCheckboxText\">\r\n                <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </div>\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: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+ItemPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ItemPickerComponent, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", 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: "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                         [disablePaginationControls]=\"disablePaginationControls\">\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}}\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </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) || selectionContext.isSelectingAllItems\"\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            <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n                    style=\"height: 3rem;\">\r\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                <button *ngIf=\"selectedItemsClearable\"\r\n                        ecLinkButton\r\n                        id=\"{{id}}_clearSelection\"\r\n                        class=\"pl-2 ml-auto\"\r\n                        (click)=\"onClearSelectionClick()\"\r\n                        translate>ClearSelection_TC</button>\r\n            </header>\r\n            <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n                 [style.padding-left.rem]=\"4\"\r\n                 [style.padding-right.rem]=\"4\"\r\n                 [innerHtml]=\"selectAllItemsMessage | translate\"></div>\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 text-heading-2\">\r\n                            <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                            <button *ngIf=\"selectedItemsClearable\"\r\n                                    ecLinkButton\r\n                                    id=\"{{id}}_clearSelection\"\r\n                                    class=\"pl-2 ml-auto\"\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            <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n                 style=\"height: 1.75rem;\">\r\n                <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n            </div>\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\">\r\n        <div class=\"d-flex align-items-center \">\r\n            <div *ngIf=\"!availableCheckboxText\">\r\n                <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </div>\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", "disablePaginationControls"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-item-picker', template: "<div ecOverlay\r\n     class=\"d-flex flex-grow card\"\r\n     [status]=\"tableStatus?.status\"\r\n     [message]=\"tableStatus?.message\"\r\n     [displayAsMask]=\"true\">\r\n    <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n                         class=\"flex-grow\"\r\n                         [fillParentHeight]=\"true\"\r\n                         [hideHeader]=\"true\"\r\n                         [hideSearchControl]=\"true\"\r\n                         [removeCard]=\"true\"\r\n                         [pageable]=\"true\"\r\n                         [pageSize]=\"50\"\r\n                         [objectType]=\"itemName\"\r\n                         [formModel]=\"formModel\"\r\n                         [ready]=\"ready\"\r\n                         [getItems]=\"getItems\"\r\n                         [selectable]=\"true\"\r\n                         [noDataMessage]=\"noDataMessage\"\r\n                         [selectionContext]=\"selectionContext\"\r\n                         [status]=\"tableStatus\"\r\n                         (itemsChange)=\"onItemsChange($event)\"\r\n                         [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n                         [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n                         [tableLayoutFixed]=\"true\">\r\n        <header *ngIf=\"customAvailableHeaderTemplate\"\r\n                class=\"card-header flex-shrink\"\r\n                style=\"height: 3rem;\">\r\n            <h3 class=\"card-title\">{{availableTitle | translate}}\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </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) || selectionContext.isSelectingAllItems\"\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            <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n                    style=\"height: 3rem;\">\r\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                <button *ngIf=\"selectedItemsClearable\"\r\n                        ecLinkButton\r\n                        id=\"{{id}}_clearSelection\"\r\n                        class=\"pl-2 ml-auto\"\r\n                        (click)=\"onClearSelectionClick()\"\r\n                        translate>ClearSelection_TC</button>\r\n            </header>\r\n            <div class=\"border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n                 [innerHtml]=\"selectAllItemsMessage | translate\"></div>\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 text-heading-2\">\r\n                            <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                            <button *ngIf=\"selectedItemsClearable\"\r\n                                    ecLinkButton\r\n                                    id=\"{{id}}_clearSelection\"\r\n                                    class=\"pl-2 ml-auto\"\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            <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n                 style=\"height: 1.75rem;\">\r\n                <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n            </div>\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\">\r\n        <div class=\"d-flex align-items-center \">\r\n            <div *ngIf=\"!availableCheckboxText\">\r\n                <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </div>\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"] }]
+            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                         [disablePaginationControls]=\"disablePaginationControls\">\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}}\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </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) || selectionContext.isSelectingAllItems\"\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            <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n                    style=\"height: 3rem;\">\r\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                <button *ngIf=\"selectedItemsClearable\"\r\n                        ecLinkButton\r\n                        id=\"{{id}}_clearSelection\"\r\n                        class=\"pl-2 ml-auto\"\r\n                        (click)=\"onClearSelectionClick()\"\r\n                        translate>ClearSelection_TC</button>\r\n            </header>\r\n            <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n                 [style.padding-left.rem]=\"4\"\r\n                 [style.padding-right.rem]=\"4\"\r\n                 [innerHtml]=\"selectAllItemsMessage | translate\"></div>\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 text-heading-2\">\r\n                            <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                            <button *ngIf=\"selectedItemsClearable\"\r\n                                    ecLinkButton\r\n                                    id=\"{{id}}_clearSelection\"\r\n                                    class=\"pl-2 ml-auto\"\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            <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n                 style=\"height: 1.75rem;\">\r\n                <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n            </div>\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\">\r\n        <div class=\"d-flex align-items-center \">\r\n            <div *ngIf=\"!availableCheckboxText\">\r\n                <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n                <ec-help-popover id=\"availableTitle_helpPopover\"\r\n                                 *ngIf=\"availableTitleHelpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{availableTitleHelpPopover | translate}}\">\r\n                </ec-help-popover>\r\n            </div>\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"] }]
         }], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { id: [{
                 type: Input
             }], availableTitle: [{